Adding an element at bottom of widget output

by admin on June 6, 2012

As a  developer i noticed that  wordpress lacks hooks for  altering a widget’s HTML structure,  this forced me to come up with a quick fix.

this is a fix  for those rare occasions, where you want to alter the widget’s HTML structure and add a div or any other HTML element to  the widget output.

in the provided code below we shall add the HTML element to the  bottom of  our widget. This element can be used in styling the widget.

first we look at the HTML code before the alteration.

<div id=”sidebar_1″ class=”sidebar”>
<ul class=”sidebar_list”>
<li class=”widget widget_recent_entries” id=”recent-posts-2″> <h3>Recent Posts</h3> <ul>
<li><a href=”http://example.com/example1/” title=”example1″>example1</a></li>
<li><a href=”http://example.com/example1/” title=”example1″>example1</a></li>
<li><a href=”http://example.com/example1/” title=”example1″>example1</a></li>
<li><a href=”http://example.com/example1/” title=”example1″>example1</a></li></ul>
</li>
<li class=”widget widget_recent_comments” id=”recent-comments-2″><h3>Recent Comments</h3>
<ul id=”recentcomments”>
<li class=”recentcomments”>example on <a href=”http://example.com/example2/#comment-2″>example2</a></li>
<li class=”recentcomments”>example on <a href=”http://example.com/example2/#comment-2″>example2</a></li>
</ul></li>
</ul>
</div>

by scrutinizing the above HTML, we find that at the end of every widget,  we have the following patten
</a></li></ul>  (this is very useful since we are going to use preg_replace at some point)

the following code has been extracted from my custom template.

<?php 
function add_element($buffer){
	// add bottom div to the widgets in a side bar
	$buffer = preg_replace('(</a>[\r\n\s]*</li>[\r\n\s]*</ul>)', '</a></li></ul><div class="widget-bottom"></div>', $buffer);
	return $buffer;
}

ob_start('add_element');

thesis_get_sidebar();

ob_end_flush();
?>

you should locate the code that is displaying the sidebar In your theme or template, then paste the above code.
replace thesis_get_sidebar();    with your sidebar function call  e.g.  get_sidebar( $name );

Explanation

in the code above ob_start(‘add_element’);   caches sidebar output to a buffer and sends buffer content to  function add_element for further procesing

function add_element($buffer) locates the bottom of every widget and adds   <div class=”widget-bottom”></div>

ob_end_flush(); out puts the modified HTML to the browser.

below is the modified output

<div id="sidebar_1" class="sidebar">
<ul class="sidebar_list">
<li class="widget widget_recent_entries" id="recent-posts-2"> <h3>Recent Posts</h3> <ul>
<li><a href="http://example.com/example1/" title="example1">example1</a></li>
<li><a href="http://example.com/example1/" title="example1">example1</a></li>
<li><a href="http://example.com/example1/" title="example1">example1</a></li>
<li><a href="http://example.com/example1/" title="example1">example1</a></li></ul><div class="widget-bottom"></div>
</li>
<li class="widget widget_recent_comments" id="recent-comments-2"><h3>Recent Comments</h3>
<ul id="recentcomments">
<li class="recentcomments">example on <a href="http://example.com/example2/#comment-2">example2</a></li>
<li class="recentcomments">example on <a href="http://example.com/example2/#comment-2">example2</a></li>
</ul><div class="widget-bottom"></div></li>
</ul>
</div>

Leave a Comment