Adding A Sidebar For Specific Pages In WordPress

Adding A Sidebar For Specific Pages In WordPress

Widgets are actually pretty damn cool

I used to think they were stupid, which is why I hard coded the sections pulling data for this blog. If you read my last post though, you will know I am building a theme for work and I had to use widgets. I gotta say, these things are handy. Now the client will be able to stick whatever he wants wherever he wants it. I did run into a problem though, which took me a while to solve.

I needed to get a widgetized sidebar onto a specific page, without showing up on any of the other pages. Luckily it was the blog page, which uses the index.php file within your theme folder, and not something where I would have to create a custom page for. I started the theme off of ‘TwentyTen’, and pretty much deleted all the content in all the theme files, meaning all I had left was the php that calls the header, footer, and sidebar. The function file remained the same other than adding the code to call jQuery from Google’s server, and renaming all the function names from ‘twentyten’ to ‘mythemename’ (not posting what it was really called, because it is irrelevant).

The functions page

You only need to do a few things, the first of which is to register the sidebars. Place the following code within your functions page (I dropped it all the way at the bottom):

if ( function_exists('register_sidebar') )
register_sidebar(array(
		'name' => __( 'Blog Widget Area', 'intmedreps' ),
		'id' => 'first-blog-widget-area',
		'description' => __( 'The first blog widget area', 'intmedreps' ),
		'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
		'after_widget' => '</li>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

Create a new php file

Pay attention to the id, because you will need that. Create a new php file, and call it ‘sidebar-whatever.php’. I called mine -blog.php because that is what it relates to. Within that new file, paste this code:

<div id="firstBlog" class="widget-area" role="complementary">
			<ul class="xoxo">
 
<?php
	/* When we call the dynamic_sidebar() function, it'll spit out
	 * the widgets for that widget area. If it instead returns false,
	 * then the sidebar simply doesn't exist, so we'll hard-code in
	 * some default sidebar stuff just in case.
	 */
	if ( ! dynamic_sidebar( 'first-blog-widget-area' ) ) : ?>
 
			<li id="search" class="widget-container widget_search">
				<?php get_search_form(); ?>
			</li>
 
			<li id="archives" class="widget-container">
				<h3 class="widget-title"><?php _e( 'Archives', 'intmedreps' ); ?></h3>
				<ul>
					<?php wp_get_archives( 'type=monthly' ); ?>
				</ul>
			</li>
 
			<li id="meta" class="widget-container">
				<h3 class="widget-title"><?php _e( 'Meta', 'intmedreps' ); ?></h3>
				<ul>
					<?php wp_register(); ?>
					<li><?php wp_loginout(); ?></li>
					<?php wp_meta(); ?>
				</ul>
			</li>
 
		<?php endif; // end first blog widget area ?>
			</ul>
		</div><!-- #firstBlog .widget-area -->

Copy the id of the sidebar you registered in the functions.php page, and paste over the ‘first-blog-widget-area’ in the above code. Change the initial div id from ‘firstBlog’ to whatever you want it to be., then look at the comments on the bottom of the page and change those to whatever you want. The code above have the words ‘first blog’ in them, but they relate to your sidebar.

Where do you want it?

Last item to take care of. Open the file that pertains to the page you want to add the new sidebar to. Mine was the blog page, so index.php, but you might be adding a sidebar to a custom page, or the default pages of the blog…whatever it is, I can’t help you there, because I don’t know what page you will be affecting. What you will have to do is paste this code where you want the new sidebar to appear:

<?php include (TEMPLATEPATH . '/sidebar-blog.php'); ?>

Change the -blog.php to whatever you called the new sidebar page. That is it!

Conclusion

Main thing to remember is to remember what you are calling things, and change them in the appropriate places. Once you have that all finished, the new sidebar will only appear on the page(s) you placed the last bit of code on. In your admin section you will have a new sidebar ready to be widgetized. See below for how it will appear, which in reality, is no different than the other widget sections, it will just have your new name. You can easily add more sidebar areas by repeating this process, and adding them to whatever sidebar file you want.

Widget Area image

Once I figured out how to do this, I am no longer afraid of adding widgetized sidebars to my themes. If you have any problems, let me know and I’ll help you work through it.

Coupon Code: webmachine

jQuery junkBox

(:header)
This selects all elements that are headers…h1, h2, h3…Below, would select all header elements with the class ‘allRed’ and change them all to have a font-weight of normal

$('.allRed:header').css('font-weight', 'normal');

Tags:

3 Responses to “Adding A Sidebar For Specific Pages In WordPress”

  1. adriana says:

    Hello!

    This tutorial was super helpful. I’m stuck on one final thing, though. As you can see on my blog, I can’t get the post and the sidebar to appear side by side. Ideally, I’d like to get the sidebar to be on the right, and for the posting area to be small enough for everything to fit side-by-side in the wrapper. Any advice? Thanks so much!

    All the best,
    Adriana
    Chicago, IL

    • jcDesigns says:

      Hi Adriana. Well, after tooling around a little on your blog using Firebug, you would add float: right to the sidebar div, and float: left to the content div on your CSS. Then you would have to adjust widths, Unfortunately right after I refreshed, it looks like you took the sidebar out, so I couldn’t get any further than that.

  2. Amy Beaumont says:

    Thanks very much for this, it’s just what I was looking for! I have roughly implemented this in combination with WordPress’ conditional tags is_home() and is_single() so my categories would display as a sidebar within my Sketchblog but not elsewhere. I’ve got plenty more to do but this has got me one step closer!

Leave a Reply to jcDesigns