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

  1. Web Design Norwich October 15, 2010 12:04 pm

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

    http://www.design-vibe.co.uk

  2. Webologist October 15, 2010 12:24 pm

    Don’t let your clients hear you say that!

  3. Dustin Ring October 23, 2010 8:28 pm

    Thank you very much! Worded flawlessly.

    http://mediamilitia.com/

  4. Victoria November 19, 2010 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 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 1:35 pm

    good job! tks!!

  7. Ritergal March 4, 2011 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 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 8:22 pm

    Simple and just perfect !

  10. Webologist April 25, 2012 8:24 pm

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

  11. Geoffrey Hale June 11, 2012 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

    http://www.geoffreyhale.com

  12. Webologist June 27, 2012 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 9:31 am

    Thanks for sharing.

  14. Webologist August 16, 2012 9:35 am

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

  15. simon August 26, 2012 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 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 1:43 pm

    Will do Simon.

  18. Umair October 10, 2012 9:19 am

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

  19. Webologist October 10, 2012 9:22 am

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

  20. mercedes January 9, 2013 1:57 am

    Thank you soooooo much! Great and easy! ♥

  21. Dima Al Mahsiri March 31, 2013 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?

    http://www.tipsfornaturalbeauty.com

  22. Webologist April 1, 2013 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

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>