1. Fake Widget Filter
Unfortunately, of the bajillion filters WordPress has, none of them apply to the meat of widgets. What’s worse, there isn’t a function to return individual widgets in order to manually manipulate their content. I have no idea why
I tried putting the opening
<div> in the
after_title arg and the closing
</div> in the
after_widget arg when registering the sidebar, (which would have been an easy solution), but
after_header is not applied to widgets with blank titles (again, no idea why). So any widget without a title will get a closing
<div> without an opening one, and that will break your layout. The only solution at this point is to use an object buffer.
About Object Buffers
Essentially, a object buffer will prevent content from being echoed normally, and will return it as a string. I’d never had occasion to use one before this, but it’s quite a handy tool. The only thing to be wary of is failing to clear the buffer. If you don’t, you may get buffered text from elsewhere which is unpredictable and generally a bad time.
Using Object Buffers
- Always use
ob_flush()before you begin to clear anything leftover in the buffer.
- Start the buffer with
ob_start(). After this line, any output that would normally go right to the screen (like
print_r()) gets trapped in the buffer instead.
- You can then use
ob_get_contents()to return the currently buffered output to a variable without clearing the buffer.
- Alternatively, you can use ob_get_clean() or ob_get_flush() to return the currently buffered content to a variable, and stop the buffering process.
.widget-title CSS Class
Once you’ve captured the string with an object buffer, you can do whatever you want to it… you sicko. Personally, I think the most useful manipulation is to wrap everything under the
.widget-title with a
.widget-content container element. For me, working with 2 inner elements that wrap all the text is a lot more intuitive than a 1 inner element that only wraps the title and loose text in the remainder, that’s just silly.
// object buffer ob_clean(); // CLEAR the object buffer ob_start(); // start object buffer if( !dynamic_sidebar( 'sidebar_id' ) ) // get the dynamic sidebar if exists themeslug_default_sidebar(); // or the default sidebar if it doesn't $output = ob_get_clean(); // get buffer contents and stop buffering /* regular expression * note: This will only add the OPENING .widget-content <div>! * you need to specify a closing </div> in the 'after_widget' arg when * registering your sidebar. You could add this with a regex too, but * I suck at regular expression so I didn't $pattern = '/<li([^>]*)class="widget([^"]*)"([^>]*)>(<h2)?([^>]*)?(class="widget-title")?([^>]*)?(>)?([^>]*)?(>)?/'; // the regex search pattern $replace = '<li$1class="widget$2"$3>$4$5$6$7$8$9$10<div class="widget-content">'; $output = preg_replace( $pattern, $replace, $output ); // return or echo the new sidebar! echo $output;
This regex only adds an opening
<div class=".widget-content">before the widget content, it does not close it. You should specify the closing div in the
after_widgetarg, when registering the sidebar.
The regex uses what I suspect to be a ridiculous search pattern of:/<li([^>]*)class="widget([^"]*)"([^>]*)>(<h2)?([^>]*)?(class="widget-title")?([^>]*)?(>)?([^>]*)?(>)?/
It got so complicated because of the unpredictability of a dynamic sidebar widgets, which may or may not have a title wrapped in a
.widget-titleelement, and also because I’m terrible at regular expressions.
I’m quite sure there’s a more elegant regex to do the same thing, so if you’ve got one please leave a comment and I’ll update this. I will also give you credit and gratitude.
If you don’t mind the mess on the back end, a
.widget-conentclass makes styling widgets a lot more straight forward. Next up, the