In an earlier post, I wrote about my quest to find a way to easily allow users to modify text in the sidebar of a site I was creating. After trying a few different options, I happily settled on the Improved Include Page plugin.

Then I started trying to add all sorts of social stuff to the blog part of the site, such as the Sociable icons for bookmarking, and the option to email a post to a friend, or print a printer-friendly version. The problem is that if you select to have the sociable bookmarks appear on Pages, and you insert the PHP code for the print and email functions on Pages, it conflicts with the bit in the sidebar which is also, in essence, a Page.

After playing around with it for a bit, I realized I needed a different solution to the editable text in the sidebar, and decided to try to go with widgets.

The Need: I needed to be able to insert a text widget so that users could easily edit the text within it, but I needed to keep the rest of the information that appears in the sidebar, such as the posts from a certain category, since as far as I know there are no widgets that allow you to display posts from one category only. I also needed the text in the widget to appear with the same styles as the rest of the sidebar.

The Solution:

First I made the site widget-ready. This is very easy, and involves only a few steps:

  1. Download the widgets plugin. Upload the entire widgets folder to your plugins directory. Activate.
  2. Create a file called functions.php. Put the following code in the file and upload (make sure there are no spaces before or after the code – that can be deadly!):
    <?php
    if ( function_exists('register_sidebar') )
    register_sidebar();
    ?>
  3. Since I wanted most of the sidebar text to remain as is, I modified my sidebar as follows:
    <form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <input type="text" name="s" id="s" value="search and press enter..."/></form>
    <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>
    <?php endif; ?><h2>News</h2>
    <ul>
    ...
    This kept my search bar at the top, inserted a place for the widgets, and then after that the rest of the sidebar appears as is.
  4. The widgets plugin that was installed in step 1 creates a menu under Presentation>Sidebar Widgets. I went there, and dragged a text widget onto the Sidebar. I then clicked on the box on the right, and entered the title in the title field, and the text in the text box with HTML tags.
  5. Everything looked good, but next to the title was an annoying bullet that obviously emanated from an unwanted <li> list tag that had been added. The question was – where did it come from? I scoured the web looking for an answer, and found a hint on this page under the section called “My sidebar isn’t a list. What do I do?” It explained that it styles the widget with <li> tags. I opened widgets.php in the widgets folder under plugins, and changed lines 52 and 53 as follows:
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget' => "</div>\n",
    I changed the places where it said li to div. It worked like a charm.

Now I had easily editable text in the sidebar, plus I could freely use the Sociable, e-mail and print plugins as I pleased.