Plugins are a great way to enhance WordPress. However, visually those plugins don’t always work well with your theme. They tend to place their graphical elements all over the place. Most of them offer only little control over their location and visual appearance. Here’s a trick to move them to the spot you like.
For a while I’ve been adding a few features to my blogposts through WordPress plugins. Most importantly, I’m using and loving the Outbrain rating plugin and the Sociable social bookmarking and sharing plugin. One thing I didn’t like was the way those plugins integrated on the webpage. They just add a bunch of stuff to the end of the post that you have no control over.
Until now.
This is a fairly advanced topic, but not that complicated once you get the hang of it. Plugins add HTML code to your site by adding filters to the WordPress rendering. For instance, by adding a filter to the “the_content” execution, it is possible to influence the output of the blog post details.
Outbrain and Sociable work exactly like this. When the content of the post is rendered they add a filter to it that adds their own widgets. What I wanted to achieve was to have more influence over the placement of those plugins.
If you go to a post detail now, you’ll notice that both widgets are now inside their own div (to which I added a border). It’s something that is not possible if you respect the plugins standard placement.
So how do you go about it? Well there’s three steps:
- First you need to figure out the name of the filter that the plugin uses. You’ll need to open up the plugin source code and find a line that looks like “add_filter(“the_content”, “xxxxxx”);”. For Outbrain it’s “outbrain_display”; for Sociable it’s “sociable_display_hook”. You might need to experiment a little with your plugin.
- Next you remove the filter in your functions.php
- And finally you add your own filter, exactly where you want to display the plugin. Or you could execute the function where you want it to. There are a wealth of possibilities here. This also happens in functions.php.
For instance, if I wanted to move the Sociable plugin from the bottom of the post content area to one of Thematic’s designated areas, called “thematic_post_footer”, I’d add the following code to my themes functions.php:
function remove_filter_from_the_content() {
remove_filter('the_content', 'sociable_display_hook');
}
add_action('init', 'remove_filter_from_the_content');
function my_postfooter() {
echo '
';
}
add_filter('thematic_postfooter','my_postfooter');
This will remove the Sociable executions from the content area, move it to Thematic’s post footer and wrap it in a div that can be used to style it.
Feel free to share your WordPress hacks in the comments.