Add categories as dropdown menu in WordPress Navigation Bar

Edit the file header.php of your theme to add such a menu.

Click to Read More

On Synology, this file is accessible via the "web" shared folder (See here for details) at:

\\<YourSynology>\web\wordpress\wp-content\themes\<YourTheme>\header.php

Find the right location in the code generating the navigation bar and add something like this (using the adequate 'class' from you own theme. Here after, I am using TwentyEleven.)


<!-- Add a drop dow menu with all the categories -->
<div style="text-align:center;">
 <ul id="menu" style="padding:0; margin:0;">
 <li class="cat-item">
   <a href="#" title="Filter by categories.">Categories</a>
   <ul class="children">
     <?php wp_list_categories('sort_column=name&sort_order=asc&
               style=list&children=true&hierarchical=true&
               title_li=0&exclude=1'); ?>
   </ul>
 </li>
 </ul>
</div>

Instead of href="#" (to stay on the current page when selecting the head of that menu), you could also use:

href="<?php echo esc_url( home_url( '/' ) ); ?>"

The parameter "exclude=1" is used to skip the category "Uncategorized". You can add other category IDs to be skipped separated with a comma. To determine the ID of a category, go to "Administration Dashboard > Posts > Categories" and move the mouse over the "Edit" link for that category. Look at the URL displayed by the browser for that link; this one includes the category ID as a parameter: "&tag_ID=xxx"

9 thoughts on “Add categories as dropdown menu in WordPress Navigation Bar

  1. Hi, I love your blog, in fact I love it so much that I going to steal a lot from it :)

    I have more or less the same purpose with me wp (installed yesterday...)

    I have a problem to implement this tweak, i get an extra "category". If you have time, pls check my blogg and hover category.

    cinemaattic.synology.me/wordpress/

    • Weird... If I look at the html generated for your menu, it's indeed one element which should not be there. Either it's in your header.php and you didn't noticed it ? Or it's generated by the wp_list_categories function.

      Possibly check in your dashboard that your categories "Home Theater", "Swedish", etc... don't have a parent (combo 'parent' must be equal to "None").

      And I just noticed that "category icons" appear now in my menu. it was not the case before... I think it's due to a recent update of the plugin as header.php contains now this php code:

      if (function_exists('put_cat_icons'))
      put_cat_icons( wp_list_categories('sort_column=name&sort_order=asc&
      style=list&children=true&hierarchical=true&
      title_li=0&exclude=13,1'.'&echo=0'));
      else
      wp_list_categories('sort_column=name&sort_order=asc&style=list&
      children=true&hierarchical=true&title_li=0&exclude=13,1');

    • This one is solved.

      I guess you are using the classic one

      trick was to edit style.css with

      .myicons {
      margin : 0 5px 0px 0;
      }

      • Well, I don't remember if it was the default one, but it's named "Category Icons 2.2.3" from "Brahim Machkouri".
        Unfortunately, I get a 403 on its website http://www.category-icons.com.

        For the link to the category, it's generated by the method get_cat_icon() used in content.php to add the icon in front of posts' title.
        Look at Dashboard's menu "Posts" > "Category Icons"; there is a tab "Template Tags" with the code to be used (if not by default in your content.php)

        That being said, I did tweak a bit the style.css indeed...

Leave a Reply

Your email address will not be published. Required fields are marked *