Wordpress Tutorial: Create Post-Specific Sidebars Using Custom Fields
Published: ,
Looking for a way to add more sidebars to your Wordpress blog? Want to be able to create and assign a unique sidebar to one individual blog post? Take this easy 3 step tutorial and change the dynamics of your WordPress forever. Learn how to create not only one dynamic sidebar, but as many as you want. Have sidebar content targeted to individual posts using custom fields.
Up until recently I was at peace with my WordPress theme sidebar setup. However, as I added more content and some posts started to receive more traffic than others, I felt a growing need for post-specific and individually targeted sidebar content. Using three separate tutorials I managed to create a new sidebar for one specific post publication, and customize the sidebar for optimal Adsense earnings and visitor interaction. Now I am making a staggering $3 a week on Adsense, a 300 % increase, thank you very much!
Step 1 - Registering new sidebars
It is in functions.php the sidebar is 'registered'. All you need to do now is register a few more. Simply copy the code snippet located in functions.php, and displayed below, and paste each snippet for as many sidebars that you want.
Locate the initial snippet in functions.php:
if ( function_exists('register_sidebar') ) {
register_sidebar(array('name'=>'sidebar1',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>', 'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>', ));
Copy the code displayed below and paste it below the initial snippet as many times equal to the amount of new sidebars you want.
register_sidebar(array('name'=>'YourSidebarName',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>', 'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>', ));
Make sure the bold code is present (if it's not, add it) and that you set the unique sidebar name for each code snippet you add. Note also that the code within the register_sidebar snippet may vary from theme to theme, and that the important thing is that you include the bold code.
Example of code:
if ( function_exists('register_sidebar') ) {
register_sidebar(array('name'=>'sidebar1',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>', 'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>', ));
register_sidebar(array('name'=>'movies',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>', 'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>', ));
register_sidebar(array('name'=>'wordpress',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>', 'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>', ));
register_sidebar(array('name'=>'music',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>', 'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>', ));
}
When you have added the registration code into functions.php, go to the admin>appearance>widgets, and your new sidebars should appear like below:
Step 2 - Creating sidebar files
Now, like the parent file sidebar.php, your newly registered sidebars also need to exist as files. Open the parent sidebar.php and copy the code over to a new html document. Save it where sidebar.php is located, as sidebar-YourSidebarName.php.
Add the code below, above <?php dynamic_sidebar(); ?> in sidebar-YourSidebarName.php and remember to match the sidebar name in the code (bold) with the file name.
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('YourSidebarName') ) : ?> <?php endif; ?>
Note! Make sure to save the new sidebar as sidebar-YourSidebarName.php, with emphasis on "sidebar-". Once this is done, the new sidebar files will appear in admin>appearance>editor, like below:
Step 3 - Adding the Custom Fields function
Finally, you just need to implement the custom field function. Locate <?php get_sidebar(); ?> in single.php and replace it with the following code:
<?php $sidebar = get_post_meta($post->ID, "sidebar", true); get_sidebar($sidebar); ?>
This will allow you to decide upon a sidebar using Custom Fields for each individual post. This however does not mean that you have to make a unique sidebar every time you write a new post. Leave it, and the original sidebar will be used.
Add the new custom field 'sidebar' and in value type in the name of the sidebar you want (using tutorial examples: movies, wordpress or movies). Do not put the whole file name of your new sidebars, such as "sidebar-movies", as it will not work. Excluding "sidebar-" will suffice. You can now start to fill each sidebar with post-specific content, ads etc.
Make it stable
Ok, now you (hopefully) know how to add post-specific sidebars, making you a millionaire. All kidding aside, this know-how is a good thing bit it won't do you any good if your WordPress site isn't stable. The three providers below all have WordPress hosting plans that we think will satisfy most peoples' needs.
Feedback
If you find this tutorial too hard and/or impossible to complete with desired results, chances are it's you, me or your blog situation. In any case, please comment below or send me an email to brian [at] webhostingsearch [dot] com. Also you who has found this tutorial helpful are welcome to share your kind words :).
Comments
wordpress video tutorial
12:52, January 11, 2010
Great tutorial for wordpress users. Thanks.Really I hellp this post.
wordpress video tutorial
12:54, January 11, 2010
Great tutorial for wordpress users. Thanks.Really I hellp this post.
[url=http://www.wordpress-r-us.com/]wordpress tutorial[/url]
Olivia
11:10, January 19, 2010
What a lifesaver! Thank you for explaining everything in detail, I found another tutorial that gave me the same gist as this but left out too many details and I couldn't figure out why it wasn't working. I owe success to you, thanks for this!
brian franklin
03:46, February 22, 2010
glad it helped, it's mashup of two three separate tutorials :)
Phillip
05:45, March 28, 2010
I have been able to successfully add the sidebar to individual posts but it is not in the format of my theme. How do I get it to be in the format of my theme? Currently I am using Arthemia. Thanks so much for your help!
Gail
14:58, May 19, 2010
Where can we see an example of the extra sidebars? Please, and thank you.
Lovina
09:42, June 1, 2010
I am looking for this information and across so many blogs but only this who provide the real step by steps guide. My each posts now customized with unique sidebars.
Thank you so much for the great tutorial
Mandy
11:50, June 21, 2010
I'm using the editor under appearance. I can't seem to get past step 2, as I don't know how to create a new html file or save it. Was that ability removed in Wordpress 2.5? I'll upgrade to 3.0 and see if that helps.
Kristina
20:53, July 7, 2010
I'm trying to do this with the Create Your Own WP Theme tutorial-I can register the new sidebars but they're not appearing with my theme. Am I missing something?
Carol
09:10, July 8, 2010
Thanks a lot for yet another first-rate WordPress tutorial. I am always on the look-out for awesome WordPress tips to suggest to my readers. Thanks for taking the time to write this post. It's exactly what I was searching for. Truly great post.
Carol
23:50, July 15, 2010
I want to thank you for yet another first-rate WordPress tutorial. I am always trying to find super WordPress tips to
suggest to my readers. Thank you for posting this article. It's just what I was searching for. Truly amazing post.
David
22:16, September 1, 2010
Bless You!! FINALLY, someone who understands what we want when we Google "adding sidebars to wordpress themes"...