Commanding Chaos for Coworking, Open Source and Creative Communities

Howto: Include Wordpress Widgets in Post or Page Body

Sun, 04/08/2007 - 11:50 -- rprice

I recently had a desire to make the homepage of a blog feel more like a portal - include a search box, updates coming in from around the web, a list of recent posts and links to other parts of the site that give more description than a simple blogroll. I ended up using Wordpress Widgets, runPHP and a little elbow grease to get it done. To see an example of this working live, visit Blogging Fringe - everything below the search box is a widget. I definitely recommend including widgets on a Page as opposed to a Post, but your needs may dictate otherwise.

  1. The first thing we need is to install and set up Wordpress Widgets. I won't cover this, as the official tutorials and dozens of other places on the web do a great job of describing this process.
  2. Next we need the ability to run PHP code inside of a post. Coincidentally, we will be using a plugin called runPHP to accomplish this. There are other plugins to run code available, but this one worked for me. All you need to do is activate the plugin and check a box when you're editing the page. This works for any PHP code, but we're going to use it for calling a dynamic_sidebar in the body of a page.
  3. Before we can call the sidebar, we need to register a new one with Wordpress. I think this adds records to the database, but mainly it exposes a new box on the Widget options interface for you to drag widgets to. This thread on the Wordpress Support forums addresses the issue of adding multiple sidebars - particularly the comment by johnnyspade. You need to add some code to your functions.php file (in your theme directory) that looks a bit like this:
    if ( function_exists('register_sidebar') )
        register_sidebar(array(
    		'name'=>'sidebar1',
    		'before_widget' => '<li id="%1$s" class="widget %2$s"><div>',
    		'after_widget' => "</div></li>\n",
    		'before_title' => '<h2>',
    		'after_title' => "</h2>\n",
        ));
    
    if ( function_exists('register_sidebar') )
        register_sidebar(array(
    		'name'=>'sidebar2',
    		'before_widget' => '<li id="%1$s" class="widget %2$s"><div>',
    		'after_widget' => "</div></li>\n",
    		'before_title' => '<h2>',
    		'after_title' => "</h2>\n",
        ));


    When I did this, my original unnamed sidebar disappeared and I had to repopulate the list. Still, naming the sidebars is very important, because we need to be able to invoke them later in our page.

  4. Now that we're all ready to run code, all we have to do is make a simple function call. With the multitude of widgets available, you can do most anything. Here's the line I included in my post:
    <?php dynamic_sidebar('sidebar2'); ?>

Now I actually have a dynamic homepage that introduces my users to my blog and the related feeds, content, etc, while hopefully remaining useful and fresh all the while.

Categories: 

Commenting on this Blog post is closed.

Comments

This works pretty well. The only prob. I've found is that Wordpress wants to apply sidebar styles to the sidebar that has been embedded into a page/post. So now I'm on a reverse-engineering quest to figure out how to remove that styling without adversely impacting the "real" sidebars!

Chuck,

Very simply, this is a question of CSS selectors.

You know your main content area has a particular CSS class, let's say, "content", and your sidebars have another, like "sidebar". If sidebar is inside content, you can target it with .content .sidebar { background:#000;} and all is well.

Hope that helps.