How to Add Extra Widget Section In WordPress Blog

The WordPress widgets are nice to show anything like adds, recent posts or comments, affiliate banners and many more to the front end users without knowing about coding. What you need is to put them at respective widget sections from your WordPress admin panel. Though almost every WordPress theme has one or more widget sections at the sidebar they may happen to be insufficient according to your need. You would like to add extra widgets to WordPress.

Ads by Google

The WordPress doesn’t allow to add extra widget sections from the admin panel – you need to deal with some advanced stuff. Here is how to get some more widget blocks at your WordPress theme. You can show the widgets at your themes’ header, sidebar, footer and even in the posts.

How to Add Extra Widgets in your WordPress Theme

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 the extra widget sections in the Function.php of your blog theme.

Registering new widgets in Function.php

Say, you want to add a widget in the footer section of your blog theme, named footer-widget. Open the function.php (/wp-content/themes/your_theme/function.php) and look for the code below:

Ads by Google
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 the changes. Note that I’ve registered the widget as “footer-widget”. You can give any name for it.

Editing the Theme Template

After registering the widget sections, call the functions in your theme template where you want to display them.

Note: If you’re using any theme framework like Thesis or Genesis, follow the proper hook guides to place the widgets in your child theme.

Adding the New Widget Block in WordPress Theme’s Footer

To add the new widget block at your theme’s footer, call the widget function from the footer template (footer.php) of your theme. Open footer.php and add the following code where you want to show the widget section.

<div id="footer-widget"><?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer-widget') ) : ?>
<?php endif; ?>
</div>

The Genesis theme users can add the following code at their child theme’s function.php file:

add_action('genesis_footer' , 'oxh_footer_widget');
function oxh_footer_widget(){
?>
<div id="footer-widget"><?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer-widget') ) : ?>
<?php endif; ?>
</div>
<?php
}

Adding Styles for the New Widget Block

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 the 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 under Appearance > Widgets.

add-extra-widget

Click on ‘Widgets’ and you can see the list of the widgets section at the right side of the screen.

add-extra-widget-1

The new widget area should appear there. Add any thing like text, scripts and html/php codes at your widgets.

Have anything to add to this story? Feel free to share with us.

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 Comment

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