You are here: Home > Web Design

How to Add Widget Areas to Your WordPress Theme


Just found this fantastic tutorial on adding widget areas to any WordPress theme. I successfully set up a new widget area below the content of my posts on another blog I write for in about 5 minutes.

Addwidget Area to Theme: Step 1.

In the index.php file in your theme directory, add the following code to an area where you would like a new widget area. Directly below the content is a good idea if you wish to place adverts, or further reading there. Note we have had to wrap this line of code so it displays. Careful of too many spaces.

<div>

	<?php if ( !function_exists('dynamic_sidebar') || 
!dynamic_sidebar('Post Widget') ) : ?>
	<?php endif; ?>

</div>

Step 2.

Then in the functions.php file add the following line, directly below the current widget code:

register_sidebar(array('name'=>'Post Widget',));

Step 3.

Finally, to style the wdiget, add this code to the style.css file:

.widget_post {
	background: #FFFFFF;
	margin: 0px;
	padding: 10px;
	width: 600px;
	}

It really is as simple as that. When you next go to the widgets area in your WordPress control panel, you will see an option for “Post Widget”. There is a more detailed explanation on StudioGrasshopper’s website.

Source: Studiograsshopper.ch -How to add a Widgetised area in a WordPress theme

  22 comments for “How to Add Widget Areas to Your WordPress Theme

  1. October 15, 2010 at 12:04 pm

    I didn’t realise it was so simple, thanks for this.

  2. Webologist
    October 15, 2010 at 12:24 pm

    Don’t let your clients hear you say that!

  3. October 23, 2010 at 8:28 pm

    Thank you very much! Worded flawlessly.

  4. Victoria
    November 19, 2010 at 3:58 pm

    Finally a simple solution that works! So many other people seem to make this more difficult than it is. Your solution workded perfectly first time. Much appreciated! Thank you.

  5. Webologist
    November 19, 2010 at 4:20 pm

    Glad it still works OK! This was written quite a few versions back and when I tried it on one theme I got in a bit of a mess!

  6. Tavares
    December 8, 2010 at 1:35 pm

    good job! tks!!

  7. Ritergal
    March 4, 2011 at 2:51 am

    I’m new to this and feel like I’m climbing a cliff without a map.

    The index.php file in the Atahualpa theme folder is short*. I have no clue where to put that code.

    Is this the right file? Any input welcome.

    ****************

  8. Webologist
    March 4, 2011 at 2:53 am

    Some themes do things differently. I thought that Atahualpa was pretty flexible though as far as widgets are concerned. Sometimes you need to modify functions.php.

  9. don
    April 25, 2012 at 8:22 pm

    Simple and just perfect !

  10. Webologist
    April 25, 2012 at 8:24 pm

    Glad to hear it still works, I have not tried if for ages.

  11. June 11, 2012 at 6:32 pm

    Ha, you rock. Just used this at http://www.futebolbrasileirao.com/parceiros/ page. This is going to be very handy for projects with partners who don’t understand the back-end. Like there, I set up so my partner need only add parceiros links from the dashboard, put the links widget in the sidebar, and put the sidebar in the page template for /parceiros/.

    Cheers,
    Geoff

  12. Webologist
    June 27, 2012 at 2:17 pm

    Everyone will have adopted Genesis? Sounds like a very bold statement!

    Anyway, I do not have a copy of the Genesis Framework so cannot help, sorry.

  13. jay
    August 16, 2012 at 9:31 am

    Thanks for sharing.

  14. Webologist
    August 16, 2012 at 9:35 am

    No problem. Is it still working? Ages since I used it.

  15. simon
    August 26, 2012 at 4:27 am

    yep this is still working, just used it on the latest wordpress, 3.4.1. was much easier to follow this than try to follow the codex imo, i couldnt figure out what the hell i was supposed to do or not.

    i just dropped the code into my header.php and it worked great! i’m styling it as we speak… this saved me a lot of time! maybe you should do an update post if you understand the whole codex thing.. it talks about using ordered/unordered list, not sure where it’s going…

    this is it: http://codex.wordpress.org/Widgetizing_Themes

  16. simon
    August 26, 2012 at 4:28 am

    can you delete kenya wordpress expert’s post? i just clicked his website address and had an AVG anti virus thing pop up from his site. ><

  17. Webologist
    August 29, 2012 at 1:43 pm

    Will do Simon.

  18. Umair
    October 10, 2012 at 9:19 am

    WOW! This is really awesome. It really worked for me. Thank you so much.

  19. Webologist
    October 10, 2012 at 9:22 am

    Cool. Great to hear that it still works. That theme are you using?

  20. mercedes
    January 9, 2013 at 1:57 am

    Thank you soooooo much! Great and easy! ♥

  21. March 31, 2013 at 11:01 pm

    Hi,
    I have a wordpress blog, I use pagelines theme, I wanna add a css code to the content widget. My problem is that after saving nothing is displayed . Is the content widget disabled by default? Could anyone help me pls?

  22. Webologist
    April 1, 2013 at 12:01 am

    Hi Dima, I do no understand what you are trying to do. Really, css needs to be placed in .css files, not in content widgets. Most wordpress theses support child themes, so creating a new child theme with its own styles.css, with the relevant changes in that, may help. Advice on child themes: http://codex.wordpress.org/Child_Themes

Leave a Reply

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