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

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

  • Don’t let your clients hear you say that!

  • Thank you very much! Worded flawlessly.

  • 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.

  • 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!

  • good job! tks!!

  • 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.

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

  • 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.

  • Simple and just perfect !

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

  • 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

  • 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.

  • Thanks for sharing.

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

  • 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

  • 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. ><

  • Will do Simon.

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

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

  • Thank you soooooo much! Great and easy! ♥

  • 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?

  • 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

Join the Discussion

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>