Creating sidebar widgets for Menus in WP 3.0

Creating Side Bar widgets for Menus in WordPress 3.0
So you want to add sidebars to your website and do them dynamically. I am sure there are many ways to do this, but here is how I do it. You need FTP access to your wordpress site to do this. I use Dreamweaver to edit all my code. You can use whatever you like.
For this example, let’s say you have 5 categories: Home, Services, Blog, About, Contact Us, and there are 4 subpages under services. So you want to create some links to those pages and do it dynamically with wordpress.

Here are the steps:
1. We have to create new page template. So copy page.php and save it as a new page. Let’s call it services-page.php.
2. Open services page.php and put in your template name: * Template Name: Services, sidebar. This does under the /** Also, you will need to change the call to the sidebar to get the new page.
To do this find the call
Now replace it with:


The ‘services-sidebar’ is what I am calling this widget.
3. Now let’s create our custom sides bar where our custom side menu widget will be. Open sidebar.php and save it as services-sidebar.php.
Change this line:
From if ( ! dynamic_sidebar( ‘primary-widget-area’ ) ) : ?>
To if ( ! dynamic_sidebar( ‘services-sidebar’ ) ) : ?>

4. Next we need to register out new sidebar in the functions.php. I always suggest backing up your functions.php before making changes to it. So do this now.

5. Open Functions.pgp and find the line: function twentyten_widgets_init() {
There you will see several areas where widgets go. The first is:
// Area 1, located at the top of the sidebar.
register_sidebar( array(
‘name’ => __( ‘Primary Widget Area’, ‘twentyten’ ),
‘id’ => ‘primary-widget-area’,
‘description’ => __( ‘The primary widget area’, ‘twentyten’ ),
‘before_widget’ => ‘

  • ‘,
    ‘after_widget’ => ‘
  • ‘,
    ‘before_title’ => ‘

    ‘,
    ‘after_title’ => ‘

    ‘,
    ) );

    So we now need to make one for our new sidebar.
    Place it before the final } in the list of areas.

    Here is the code:
    // Area 7, located in the sidebar. Empty by default.
    register_sidebar( array(
    ‘name’ => __( ‘Services’, ‘twentyten’ ),
    ‘id’ => ‘services-sidebar’,
    ‘description’ => __( ‘This is the services sidebar’, ‘twentyten’ ),
    ‘before_widget’ => ‘

  • ‘,
    ‘after_widget’ => ‘
  • ‘,
    ‘before_title’ => ‘

    ‘,
    ‘after_title’ => ‘

    ‘,
    ) );
    6. Now that you have that registered, go into wordpress and look in the widgets under appearance. You should now see your new widget sidebar. If you do not see it make sure your naming convention is correct.
    7. Now we need to create the menu, so click on menus under appearance. Create a new menu and call it services.
    8. Drag the 4 subpages into this menu. You might also include the services tab. You can match the order of your dropdown by dragging them around. Now save your menu.
    9. Now go to the pages you want to have this new sidebar and change the Template to your new one – Services, sidebar.
    And you are done. You now have a custom vertical menu for the side of your page.
    Now you can style them however you like.

    Things to keep in mind.

    1. Always back up your functions.php file before messing with this. I typically download it, then rename the server one and re-upload it. Then renew the local one. So I have two backups.
    2. Make sure you naming convention is the same throughout all pages (sidebar, page and functions)

    Removing “Allowed Tags” on the comment form.

    By Dave Fogel | March 12, 2011

    This solution is from the wordpress forums from Emsi.  It is not guaranteed to work on all themes, but it did work fine for me on my theme based on twenty ten. Follows these steps: 1. back up your functions.php file. 2. Add the following to your functions.php file function my_comment_form_args($user_identity, $post_id, $req) { $args…

    How to remove the website field from the comment form

    By Dave Fogel | March 12, 2011

    I had a customer request to remove the website field in the comments.  You would think this would be a relatively simple thing to do, but not so.  After an hour of searching, I found a solution that worked great.  Here is the link. http://techhacking.com/2011/02/04/wordpress-how-to-remove-the-website-field-from-the-comment-form/

    Google Website Optimizer and WordPress

    By Dave Fogel | February 24, 2011

    Today I started a test using Google Website Optimizer on WordPress. The manual way of doing this would mean you would need to create 3 different headers and input the correct tracking code in each. While it is not a ton of work, it is a pain in the butt. The better way to do…

    Posted in

    Dave Fogel

    Leave a Comment