poof

XtrA StuFf

Find it on Facebook

Subscribe to Feeds

Enter your email address:

Categories

1

Adding Siderbar to WordPress theme

21 Mar 2010

So, you liked a wordpress theme on the internet and added it to your blog. But the theme is not widget ready . You are not able to add custom widgets to the theme or the sidebar is static. There has always being tutorials to add a second sidebar but what if your theme isn’t widget ready (No Sidebar at all).
 
In this small tutorial I will show you how to make your theme widget ready. PHP programmers would find this very easy to apply but novices can do it easily without messing up the code. I hope that the reader has basic knowledge of the wordpress file structure and the HTML/CSS.
 
Now to begin, you should go to your themes folder in wp-content/ and select your theme. You will find a file named functions.php in your theme folder, if it doesn’t exists then create one php file named functions.php and open that file in any editor and place the following code in it :-
 
<php
if ( function_exists('register_sidebar') ) {
	register_sidebar(array(
		'before_widget' => '
  • ', 'after_widget' => '
  • ', 'before_title' => '

    ', 'after_title' => '

    ', )); } ?>
     
    and save the file. Please not the classes for li-tag and h2-tag can be kept according to your theme. The changes for these classes can be done in the style.css of your theme. Now in the admin area under widget section you can see that there is an option of sidebar now avaliable. But dragging your widget items under that sidebar option won’t show anything on the front-end.
     
    So now we will work on sidebar.php file to show the widget items on the front-end. Create a new php file named sidebar.php and add the following code in it:-
     
    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
    
    <?php endif; ?>
    
     
    and save the file. To position the side bar at a specific postion, add a wrapper div so that you can postion it.The class of this wrapper div will be made in the same default css style.css of the theme
     
    Now the sidebar is ready, but it is not yet placed in the index.php.Open the file index.php of your theme and add the following code where you want the side bar to appear exactly. (this may require knowledge of php structure in wordpress)
     
    <?php get_sidebar(); ?>
    
     
    Save the index.php file and view your theme. You will see all the widgets that you placed in your sidebar appearing on your website. If you have not placed any widgets yet, you will not see any change. There might be alignment errors but you will have to fix them yourself through css. I hope this was helpful.

    About The Author

    Gunjan Jaswal is a web developer from mystic land of India. A novice blogger and a strong believer in open source technology. He is the guy behind 'The old skool blog'. Visit my website

     

     

    Find me here:-     


    • http://www.techkumar.org DadhaKumar

      Good. Would try it out.