BeatificaBytes

The Joys of Computing

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

[html]

<!– 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>

[/html]

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

[php]href="<?php echo esc_url( home_url( ‘/’ ) ); ?>"[/php]

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”

Loading

Categories:

Tags:

Comments

9 responses to “Add categories as dropdown menu in WordPress Navigation Bar”

  1. Per-Åke Franklind Avatar
    Per-Åke Franklind

    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/

    Reply
    1. Valery Letroye Avatar
      Valery Letroye

      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’);

      Reply
      1. Per-Åke Franklind Avatar
        Per-Åke Franklind

        I took some similarly code and now it works 🙂

        http://wphacks.com/how-to-make-categories-drop-down-menu/

        pls check it out cinemaattic.synology.me/wordpress

        Soon i will try to get rid of the wordpress in URL, but I have tried it twice using this tips, but it has ended with a re-install, not sure if it’s related to hosting wp on Synology or not…
        http://askwpgirl.com/how-do-i-move-wordpress-from-a-subdirectory-to-the-root-directory/

        Reply
        1. Valery Letroye Avatar
          Valery Letroye

          Instead of such a trick to get rid of the WordPress folder in the url, I prefered to keep it but enforce a redirection using a rule on the domain in a htaccess file put in the root.

          Also, consider buying a domain (about 10€/year) so you can access your Synology using your ddns address and your blog using your domain name (you will simply have to configure your domain as an ‘alias’ of your ddns Synology.me). The redirect in the htaccess file will be only for request on the domain name and not on the ddns one)

          Reply
  2. Per-Åke Franklind Avatar
    Per-Åke Franklind

    Wish plugin do u use for category icons?
    I have tried this one
    http://machkouri.net/caticons/2012/07/new-version-of-category-icons-lite/

    But the result is not as nice as your site. I want the icon to work as a link to the category.

    Reply
    1. Per-Åke Franklind Avatar
      Per-Åke Franklind

      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;
      }

      Reply
      1. Valery Letroye Avatar
        Valery Letroye

        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…

        Reply
        1. Per-Åke Franklind Avatar
          Per-Åke Franklind

          Here is the “new” site for Category Icons. With the light version I also get icons in menu drop-menu, so i tried the classic one and after the “margin” tweak it looks ok.

          http://machkouri.net/caticons/

          Reply
          1. Valery Letroye Avatar
            Valery Letroye

            Thx a lot for the updated link 😉

Leave a Reply

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