How to Add Extra Widget Section In WordPress Blog

Generally, in the default WordPress themes, the sidebar contains the widget sections where you can easily add some script or block to highlight your blog content. In widget section you can show your recent posts, recent comments, or customized features dynamically just adding some plug-in or php code in the widget section from your administrator panel. But if you decide to add an extra widget section in any where within your blog, may be you get some problem. WordPress doesn’t allow you to add the widget section as usual.

Related : Add Digsby Widget In Your Blog.

Firstly, you have to register the widget section that you want to add in your theme function (Function.php).

How to add an extra widgets in your WordPress blog

Generally, the WordPress  free themes are widget ready. The number of inbuilt widget sections is maximum 3. But you can increase that number by registering them in the Function.php of your  blog theme.

Register your widget in Function.php

Suppose you want to add a widget  in the footer section in your blog  named footer-widget. At first take a backup of your theme folder using FTP. Open the function.php (/wp-content/themes/your_theme/function.php) and look for the code below:

if ( function_exists('register_sidebar') ){ register_sidebar(array( 'before_widget' => '', 'after_widget' => '', 'before_title' => '<h2>', 'after_title' => '</h2>', )); 

After the above code just add the following code

register_sidebar(array( 'name' => 'footer-widget', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h3>', 'after_title' => '</h3>' )); 

Save it or update it. Note that I’ve registered the widget “footer-widget”. You can give any name.

Editing theme template

After registering the widget section you have to call the function in your theme template where you want to display it. For instance I’ll call that function from the footer template (footer.php). Add the following code where you want to show the widget section.

Click to view the code.

Now save the template.

Adding some styling rule in the style-sheet template

You have just added the widget in the proper place of your theme template. Now the last job is to add some rules in your style-sheet (style.css). Open style.css and add the following codes (you can also customize it).

# footer-widget { background:#F7F7F7; width:200px; height:200px; }

You are done. To see the effect open the widget section from your WordPress admin panel. If you are using WordPress 2.8 or higher, then it should be here:

add-extra-widget

Click on “Widgets” and you can see the list of the widgets section.

add-extra-widget-1

Find the widget section that you’ve just added. Enjoy your new widget section. Add any widget by dragging them in the widget section.

Feel free to share your problems or suggestions in the comment section.

Comments

  1. Marie :

    Hi, I made the widgets and maybe I didn’t do it right. I put in the code and the widget boxes show up in the admin panel. When I put stuff in them and save then look at the page they aren’t there. Then when I go back the stuff I put in them has also disappeared. I’m thinking something went wrong. Can you help me? thanks!

  2. Marie :

    HA! Nevermind… now I have a new problem and that’s that they won’t stay 400px across and floating left and right.

  3. Tanmay :

    @Marie
    Actually you are getting the problem with your css design. Write the appropriate css codes for your design. Also double check that you’ve not copy and pasted the function code above. If so then delete and retype the quote and commas.

  4. Marie :

    What would the correct CSS code be? The code you have here doesn’t say anything about floating or where it should be placed if I want two side by side 400px across each.

    Thanks so much for your help Tanmay!! YOU ARE AWESOME!!!

  5. Tanmay :

    @Marie
    That depends on your theme design. For instance if you want to add the widget in the sidebar then the css code can be written as your requirement is
    #sidebar .footer-widget{background:#F7F7F7;width:200px;height:200px;float:left;}
    You can also change “

    to
    then try to edit the design. Keep in your mind that when you use div class then always use .classname in the css and if div id then use #idname.
    Never mind. I’m happy to help you.
  6. Marie :

    I want the footers to be under the left sidebar and under the blog portion. I want them to be 400px across each side by side. What I have now at http://www.michtopelo.com is:

    #footer-widget1 {

    background:#000000;
    float: left;
    width:400px;
    height:400px;
    margin-left:5px;
    margin-right:5px;

    }

    #footer-widget2 {

    background:#000000;
    float: right;
    width:400px;
    height:400px;
    margin: 0px 0px 5px 0px;

    }

    This code makes them one on top of each other about 800px across. Do you see the calendar how it’s all stretched out funny? I want that to be the same width as the sidebar- 400px

    Also, do you know anything about adding a header with a photo changer? like on this page?: http://stancrawford.com/ I downloaded the plug-in smooth slider which I’m pretty sure that is… I’m just not sure how to put it at the top like he’s got it.

    Thanks so much again Tanmay! I’m learning so much here! Do you like jazz? Can I send you a free copy of my hot jazz album?

  7. Marie :

    Update- I had to delete the footers because they were just all messed up. Not sure where I went wrong. At first they were super stretched. Then I put my gallery in there and the gallery went up into my posts! very messed up! ha!

  8. WhiskeyJim :

    I like using child themes with their own functions file to maintain capabilities I like to see regardless of theme style.

    This is one of them. Most themes have terrible footers. This code allows anyone to fix that. Thanks.

  9. Tanmay :

    You are welcome Jim..:)

  10. RT :

    Awesome tutorial, just added a widget using it, cheers.

  11. Bojan :

    Hey people,

    Am I missing something? Is “endif; ?>” all I need to put into footer.php? Or this tutorial is damaged somehow and missing most of the function?

    Please help! Thanks.

  12. Tanmay :

    @Bojan: Sorry for the inconvenience. There was a problem with the page template, that is why the code was not being shown properly. We have rectified that and you can see the code by clicking the link given. Lwt me know if you face any more problem.

  13. tabitha :

    hi my website is http://savinnaiken.com,,I see the footer-widget in my widget area and when I put something in it I cannot see it on website. Any ideas? Thanks!

  14. Rohith VR :

    Thanks a lot for this tutorial. I m not a developer and I was so confused how to manage different sections of my footer through admin and this tutorial really worked for me. Thanks a lot..! :)

  15. Bimbo :

    Hi TanMay,

    I was wondering if this also applies to wordpress.com? I so much need a widget on my frontpage! Ryu has it all ushed up and hidden. Please let me know if there is anything I can do.
    thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>