Web Design

How to Add Widget Areas to Your WordPress Theme

- by Webologist - 22 Comments.

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 on “How to Add Widget Areas to Your WordPress Theme”

  4. 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. 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!

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

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

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

  21. 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. 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 *