SDAC Inc Logo

WordPress Widgets

WordPress Widgets

I recently started looking into WordPress Widgets which allow people to customize their WordPress web site or blog without knowing any HTML. Widgets allow WordPress users to simply “drag and drop” features in their sidebars. Sound interesting?
A basic overview on how to get widgets working on your site:

  1. Download the Widgets plugin for WordPress
  2. Read the README file to figure out where to put the files that you just downloaded
  3. Within the WordPress Admin, activate the Widgets plugin
  4. If you are using a custom theme, make sure you have the functions.php file in your directory with the following code: , otherwise you should have moved over the functions.php file that was included with the widgets plugin download to use with the classic or default theme.
  5. Within your sidebar code (either in the sidebar.php file or within your template file) add: at the beginning of your sidebar code (assuming you are using sidebar.php) then at the end In between those two PHP statements, you can put any default code that you would like to display if you decide not to use the widgets for the sidebar.

That is it for the basic set up. You can then log into the WordPress admin and under “Presentation”, you will see “Sidebar Widgets” as an option to choose in the menu. If you want to add/delete/edit your sidebar, you can now just drag and drop widget “blocks” in the sidebar window. If you want the calendar at the top, followed by your link list, followed by an RSS feed, drag all those options in. If you decide that you really want the RSS feed at the top, just drag it to the top of the list. This is quite cool (and easy)!
Advanced Widget Customization:
In most sites that I have worked on, there are more than one sidebars…and ideally I would like to make all of them use widgets because it is so darn cool and easy. If I want two sidebars, I would go into the functions.php file and instead of using: I would use: 

'Sidebar 1',
'before_widget' =&gt; '<div class="side-c %2$s">', // Removes <li>
'after_widget' =&gt; '</div>', // Removes </li>
'before_title' =&gt; '<h3>', // Replaces <h2>
'after_title' =&gt; '</h3>', // Replaces </h2>
));
register_sidebar(array('name'=&gt;'Sidebar 2',
'before_widget' =&gt; '<div class="side-c %2$s">', // Removes <li>
'after_widget' =&gt; ' </div>', // Removes </li>
'before_title' =&gt; '<h3>', // Replaces <h2>
'after_title' =&gt; '</h3>', // Replaces </h2>
));
?&gt;

Ok, that does a little more than just giving me the option to have two sidebars. The code above allows me to name the sidebars (I named mine “Sidebar 1” and “Sidebar 2”. The code also allows me to remove the list code that the sidebar generally uses (and I do not) as well as allows me to replace h2 tag with something else (in this case the h3 tag). You can also customize the div classes and IDs in the example above. Now in your Sidebar Widget Admin page, you can drag and drop widgets on both Sidebars. **If you would like more than two sidebars, just use the code above to duplicate new Sidebars…just make sure they are have unique names. The only thing you will need to do now is duplicate the sidebar.php file so you can call in the second sidebar. For example sake, I duplicated sidebar.php and named it sidebar2.php and the only code I changed in the sidebar files (when using more than one sidebar) is this line: 

 to: <code> [php]

. Then, sidebar2.php would have that same line, except I would change the title from “Sidebar 1” to “Sidebar 2”. Finally, in the template, I would use the use the WordPress code to call in Sidebar 1 by using and then elsewhere in the template I would use to call in the second sidebar.

More information

**Please note that I have placed spaces between the opening “<" and the tag name so it would appear in the text.

13 thoughts on “WordPress Widgets”
  1. Reply
    Greg Kendall |

    Jennifer,

    Thank you so much for this very useful tutorial on creating multiple sidebars with widgets – it’s just what I was looking for.

    I followed your ‘Advanced Widget Customisation’ steps and now have a highly configurable set of templates using a variry of sidebars – fantastic.

    However, I think I’ve spotted a slight mistake in one of the above code snippets – it’s the third ‘Plain Text’ box in the Advanced Widget Customisation section. In it you have the code that you’d expect to see in the functions.php file when it should bethe code you’d see in the sidebar.php file! The explanatory text is fine – it’s only the example code in that one box which appears to be in error.

    Thanks again,
    Greg

  2. Reply
    jzelazny |

    Good catch – I have correct my code!

  3. Reply
    Martha |

    THANK YOU!!!

    This was exactly the information I was looking for and couldn’t quite find anywhere else.

  4. Reply
    jzelazny |

    Glad it was helpful!

  5. Reply
    Angela |

    I have a question that I hope you could answer.
    I have a blog with many different sets of pages and I would like to have multiple sidebars.
    My problem is that the sidebar admin area is only showing the sidebars on one line. Is there a way to get the sidebar boxes to wrap onto the next line. I could shrink all the widths and such, but I foresee there being more sidebars than would fit on one line.

    If you have any advice I would really appreciate it.

  6. Reply
    jzelazny |

    How many sidebars do you want to display?

  7. Reply
    Angela |

    Currently I have 6 sidebars. And there could possibly be more. It would be a real advantage to have them on two lines in the admin area.

    I am working on a site where it is useful to have dynamic sidebars on different sets of pages with different information on the sidebars. It makes it more user friendly to other people administering the site to have them dynamic, rather then having to hard code something into a .php file.

    I hope that makes sense.

  8. Reply
    brandon |

    Hi, sorry I’m a total newbie. I follow up until the last bit of code. What do you mean by the following:

    Finally, in the template, I would use the use the WordPress code to call in Sidebar 1 by using
    PHP:

    and then elsewhere in the template I would use
    PHP:

    to call in the second sidebar.

    I’ve been working at this for several days but can’t get it to work yet. Any help would be much appreciated.

    thanks,
    bg

  9. Reply
    jzelazny |

    That means in your index.php template, you would need to include your sidebar(s) code, so you would use the code I have above to include the code (just as you do the header and footer).

  10. Reply
    bob |

    Uq0uN2 hi super site thanks http://peace.com

  11. Reply
    Gionata |

    Dear Jzelanzny.

    I’ve happily found your page here about Advanced Widget Customization and I’ve taken all the time to set the modification on a lacal wamp server before i would try it online.

    It didn’t work and i double checked on line.

    Same result.

    The problem seems to be either in siderbar.php and sidebar2.php

    The site display this:

    Parse error: syntax error, unexpected $end in C:wampwwwblogwp-contentthemesshades-of-graysidebar.php on line 24

    it displays this even if i take off the tag

    Any advice?

    Regards.

    Gionata Nencini
    http://www.Partireper.it

Leave a Reply

Your email address will not be published.
*
*

This site uses Akismet to reduce spam. Learn how your comment data is processed.