How to add a Widgetised area in a WordPress theme

Darling, I'm not in the mood to go dancing. Let's stay home and code widgets instead!

Here’s a tutorial to show you how to add a widget to a theme template file.

Most themes these days come with built-in widget support, most commonly in the sidebar, but also sometimes in other parts of the theme such as the header, homepage or single post pages.

In this tutorial I show you how to add a widget area to single post pages, and how to use the new widget area to display an advert on every single post page.

Widget basics

There are only four things we need to know in order to set up our new widget area:

1. Which theme template file we need to edit
2. The code for a Widget area, which we will place in the relevant theme template file
3. How to “register” a Widget area, usually in the theme’s functions.php, in order to tell WordPress that the widget area exists and therefore allow you to add widgets to this widget area in the Dashboard.
4. Add some styling to the widget area so that it fits in with the look of our site.

Which template file?

If you familiar with WordPress you will know that different pages on your site are produced by different theme template files. Which template file is used to display different views of your site is taken care of by WordPress, behind the scenes, and follows the Template Hierarchy coded into the WordPress Core files.

In our example, we want to add the widget area to the single post page. Depending on your theme this will be either single.php or index.php. In our example, let’s assume it is index.php.

Adding Widget code to the theme file

Open up your index.php (take a backup first, just in case you need to put everything back to how it was) and decide where you want the new widget area to appear. Typically, your index.php file will be structured something like this (I’ve left out most of the code to keep things simple):

<?php get_header(); ?>

<div id="content">

	<div id="contentleft">
	
		<div class="postarea">
		
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
			
			// Loop stuff goes here eg Title, Date, Content etc
			
					 			
			<!--
			<?php trackback_rdf(); ?>
			-->
			
			<?php endwhile; else: ?>
			
			<p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
			
		</div><!-- End of postarea -->
			
		<div class="postcomments">
            
			<?php comments_template('',true); ?>
        
		</div>
		
	</div>
	
	<?php include(TEMPLATEPATH."/sidebar.php");?>
			
</div>

<?php get_footer(); ?>

Your index.php file may not have the same DIV id name’s, but the structure should be similar: a DIV containing the Loop, in this case the postarea div (lines 7-22), and a DIV containing the call to the comments template, in this case the postcomments DIV (lines 24-28).

We want to place our widget area between these two DIVs. That way, the widget content will display below the post content and above the comments section of the page.

First, let’s add a new DIV and give it a new class called “widget-post”. You can name this class whatever you like, but choose something that has some meaning so that it’s easier to remember its purpose. Here’s our added code in lines 24-28:

</div><!-- End of postarea -->

<div class="widget-post">

	// Our widget stuff will go here...

</div>
			
<div class="postcomments">
            
	<?php comments_template('',true); ?>
        
</div>

Now let’s add the code to display our new widget area. Here it is:

</div><!-- End of postarea -->

<div class="widget-post">

	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Post Widget') ) : ?>
	<?php endif; ?>

</div>
			
<div class="postcomments">
            
	<?php comments_template('',true); ?>
        
</div>

The new code we’ve added will pull in the widget content. In plain English, the code says – if widgets aren’t enabled in this theme or a widget area called “Post Widget” hasn’t been registered, do nothing. Therefore, if widgets are enabled and the widget area called “Post Widget” exists, the widget content will be displayed here. That’s it – no more work needed on the template file, and it’s time to add the “register” code in functions.php.

Registering the widget in functions.php

We now need to tell WordPress that it should enable a widget area called “Post Widget”. Open up your functions.php and look for a block of code something like this:

if ( function_exists('register_sidebars') ) {
	register_sidebar(array('name'=>'Sidebar 1',));
	register_sidebar(array('name'=>'Sidebar 2',));
	register_sidebar(array('name'=>'Sidebar 3',));
}

This is the section of code that tells WordPress to enable widget areas. All we need to do is add a new line to this block of code to register our new widget area. Like this:

if ( function_exists('register_sidebars') ) {
	register_sidebar(array('name'=>'Sidebar 1',));
	register_sidebar(array('name'=>'Sidebar 2',));
	register_sidebar(array('name'=>'Sidebar 3',));
	register_sidebar(array('name'=>'Post Widget',));
}

The important points to note are:

1. We’ve added the extra line below the existing lines, but before the closing curly bracket. This ensures that our changes do not mess up the widgets you’ve already set up in your sidebar, for example.
2. We’ve used exactly the same name “Post Widget” that we used in the new code added in index.php above.

Another important point to remember is that the names of widget areas must be unique!

Adding widgets to the new widget area

Go to Dashboard>Appearance>Widgets and you should now see that your Post Widget appears in the righthand side of this screen. You can now drag a Text Widget to the Post Widget, and then add the code necessary to display your adverts within the Text Widget. For example, you can add Google Adsense code here, or affiliate code for a banner ad etc.

View your site and check that on single post pages you now see your adverts between the post content and the comments. If it doesn’t appear, re-check the above steps in case you’ve missed something. If using a newly set up Google Adsense, remember that it can take a short while for the Adsense to populate.

Styling the new widget area

You will probably need to adjust your CSS to get the new widget area to fit in with the look of your site. The most important thing to do first is to add something like this to your style.css to define a style for the new widget-post DIV class which is the container for the widget area:

.widget-post {
	background: #FFFFFF;
	margin: 0px;
	padding: 10px;
	width: 600px;
	}

This is just a starting point – adjust the width, background, padding and margin to suit you.

If you are using Google Adsense, your Google code will already include various styles based on the selections you made when setting up the Google Adsense. If you are posting your own HTML in the Text Widget you will probably have to add some styling to style.css to make the neceesary adjustments. If you are unfamiliar with CSS, check out the many great tutorials that are out there.

And finally…

As you can see, it isn’t too difficult to add a widget area to a theme file. This same method can be used elsewhere in your site to create other widget areas – just remember to name each one uniquely, and have fun!