Automatically Hierarchic Categories in Menu - WP Plugin

Automatically Hierarchic Categories in Menu - WP Plugin

How to automatically add hierarchic categories in WordPress Navigation Menus ?


You can use this WordPress plugin:

Automatically Hierarchic Categories in Menu - WordPress Plugin

This plugin works with most of WordPress themes. Sometimes you have to use some extra parameters. Here is informations and examples.

Some themes using custom html and css rules, like OceanWP, Kadence, Neve ...
First release is not supporting them, but new versions will. Keep watching.
Parameter	Default			Description
taxonomy	category		taxonomy type
exclude		false			exclude taxonomy id(s)
level		2			hierarchy max level
prnt_tag	ul			parent tag, dom name
prnt_cls	sub-menu		parent tag, class
chld_tag	li			child tag, dom name
chld_cls	menu-item		child tag, class
chld_chc	menu-item-has-children	child tag, has children class
chld_cid	false			add id to class
a_cls		false			default link class
subi_bfr	false			sub item, before for has children item
subi_aft	false			sub item, after has children item
nline		"\n"			new line
linkget		false			extra get parameter after link
hide_empty	1			hide categories with empty items

Note: For WooCommerce product categories set 'taxonomy' to 'product_cat':
[autocategorymenu taxonomy="product_cat"]

Shortcode Helper

Your shortcode:
[autocategorymenu]
Reset
Menu items:
Exclude item id(s):
Maximum hierarchy level:
Extra get parameter after link:
<ul id="primary-menu" class="menu-container"> < class=""> ¦ <a href="#" class="">Level 1, Item 1</a> </li> <li class="menu-item"> ¦ <a href="#">Level 1, Item 2</a> </li> <li class="menu-item "> ¦ ¦ <a href="#">Level 1, Item 3</a> ¦ ¦ < class=""> ¦ ¦ <li class="menu-item"> ¦ ¦ ¦ <a href="#">Level 2, Item 3.1</a> ¦ ¦ </li> ¦ </ul> </li> <li class="menu-item menu-item-has-children"> ¦ ¦ <a href="#">Level 1, Item 4</a> ¦ ¦ <ul class="sub-menu"> ¦ ¦ <li class="menu-item"> ¦ ¦ ¦ <a href="#">Level 2, Item 4.1</a> ¦ ¦ </li> ¦ ¦ <li class="menu-item"> ¦ ¦ ¦ <a href="#">Level 2, Item 4.2</a> ¦ ¦ </li> ¦ </ul> </li>
Your shortcode:
[autocategorymenu]


1 - Twenty Twenty-One
<ul id="primary-menu-list" class="menu-wrapper">
  <li id="menu-item-16006" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16006"><a href="#">Lost password</a></li>
  <li id="menu-item-16004" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-16004"><a href="#">Account</a>
    <button class="sub-menu-toggle" aria-expanded="false" onClick="twentytwentyoneExpandSubMenu(this)"><span class="icon-plus"><svg class="svg-icon" width="18" height="18" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z" fill="currentColor"/></svg></span><span class="icon-minus"><svg class="svg-icon" width="18" height="18" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 11h12v2H6z" fill="currentColor"/></svg></span><span class="screen-reader-text">Open menu</span></button>
    <ul class="sub-menu">
      <li id="menu-item-16003" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16003"><a href="#">Address</a></li>
      <li id="menu-item-16001" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-16001"><a href="#">Orders</a>
        <ul class="sub-menu">
          <li id="menu-item-16002" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16002"><a href="#">Downloads</a></li>
        </ul>
      </li>
      <li id="menu-item-16005" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16005"><a href="#">Logout</a></li>
    </ul>
  </li>
</ul>

level : 2
chld_cls : menu-item menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children
chld_chc : menu-item-has-children
subi_aft : <button class="sub-menu-toggle" aria-expanded="false" onClick="twentytwentyoneExpandSubMenu(this)"><span class="icon-plus"><svg class="svg-icon" width="18" height="18" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z" fill="currentColor"/></svg></span><span class="icon-minus"><svg class="svg-icon" width="18" height="18" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 11h12v2H6z" fill="currentColor"/></svg></span><span class="screen-reader-text">Open menu</span></button>

Shortcode : [autocategorymenu hide_empty="0" level="2" chld_cls="menu-item menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children" chld_chc="menu-item-has-children" subi_aft='<button class="sub-menu-toggle" aria-expanded="false" onClick="twentytwentyoneExpandSubMenu(this)"><span class="icon-plus"><svg class="svg-icon" width="18" height="18" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z" fill="currentColor"/></svg></span><span class="icon-minus"><svg class="svg-icon" width="18" height="18" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 11h12v2H6z" fill="currentColor"/></svg></span><span class="screen-reader-text">Open menu</span></button>']

2 - Twenty Twenty
<ul class="primary-menu reset-list-style">
  <li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6"><a href="#">Bulk 0</a></li>
  <li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-8">
    <a href="#">Bulk 1</a>
    <span class="icon"></span>
    <ul class="sub-menu">
      <li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a href="#">Bulk 1 . 1</a></li>
      <li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10"><a href="#">Bulk 1 . 2</a></li>
    </ul>
  </li>
</ul>

subi_aft : <span class="icon"></span>

Shortcode : [autocategorymenu hide_empty="0" level="3" subi_aft='<span class="icon"></span>']

3 - Twenty Nineteen
<div class="menu-main-menu-auto-container">
  <ul id="menu-main-menu-auto" class="main-menu" tabindex="0">
    <li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6"><a href="#">Bulk 0</a></li>
    <li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-8">
      <a href="#" aria-haspopup="true" aria-expanded="false">Bulk 1</a>
      <span class="submenu-expand" tabindex="-1">
        <svg class="svg-icon" width="24" height="24" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path><path fill="none" d="M0 0h24v24H0V0z"></path></svg>
      </span>
      <ul class="sub-menu">
        <li id="menu-item--1" class="mobile-parent-nav-menu-item menu-item--1"><span class="menu-item-link-return" tabindex="-1"><svg class="svg-icon" width="24" height="24" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>Bulk 1</span></li>
        <li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a href="#">Bulk 1 . 1</a></li>
        <li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10"><a href="#">Bulk 1 . 2</a></li>
      </ul>
    </li>
  </ul>
</div>

subi_aft : <span class="submenu-expand" tabindex="-1"><svg class="svg-icon" width="24" height="24" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path><path fill="none" d="M0 0h24v24H0V0z"></path></svg></span>

Shortcode : [autocategorymenu hide_empty="0" subi_aft='<span class="submenu-expand" tabindex="-1"><svg class="svg-icon" width="24" height="24" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path><path fill="none" d="M0 0h24v24H0V0z"></path></svg></span>']

4 - Astra
<ul id="ast-hf-menu-1" class="main-header-menu ast-nav-menu ast-flex  submenu-with-border astra-menu-animation-fade  stack-on-mobile">
  <li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6"><a href="#" class="menu-link">Bulk 0</a></li>
  <li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-8"><a href="#" class="menu-link">Bulk 1</a><button class="ast-menu-toggle" aria-expanded="false"><span class="screen-reader-text">Menu Toggle</span></button>
    <ul class="sub-menu">
      <li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a href="#" class="menu-link">Bulk 1 . 1</a></li>
      <li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10"><a href="#" class="menu-link">Bulk 1 . 2</a><button class="ast-menu-toggle" aria-expanded="false"><span class="screen-reader-text">Menu Toggle</span></button>
        <ul class="sub-menu">
          <li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14"><a href="#" class="menu-link">xx</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

a_cls : menu-link
level : 3

Shortcode : [autocategorymenu hide_empty="0" level="3" a_cls="menu-link"]

5 - PopularFX
<ul id="primary-menu" class="menu">
  <li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6"><a href="#">Bulk 0</a></li>
  <li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-8"><a href="#">Bulk 1</a>
    <ul class="sub-menu">
      <li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a href="#">Bulk 1 . 1</a></li>
      <li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10"><a href="#">Bulk 1 . 2</a>
        <ul class="sub-menu">
          <li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14"><a href="#">xx</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

level : 3

Shortcode : [autocategorymenu hide_empty="0" level="3"]
Share:

26 comments:

  1. Hi. Love this plugin, I have been looking for something like this for ages. I am just having a little problem with it though - my categories are for a custom post type which has its own url, plus each category has its own category base set in the permalinks (which I can't remove). The plugin seems to simply go to the base URL and the category slug, ignoring the inbetween bits! Is there any way to fix this?
    Thanks

    ReplyDelete
    Replies
    1. Hi.
      Which shortcode did you use?
      How was a link in the menu created?
      What is the link in the menu supposed to be?

      Delete
  2. Hello hello, Usually specific “menu-item-…” is added as id + class to the li elements with normal WordPress menus. When using your plugin those classes, ids are not added to li‘s which makes it hard to hide certain entries etc.

    I only get this:

    li class="menu-item " or this:
    li class="menu-item menu-item-has-children"

    but no specific classes.

    I’m running “Hello” theme.

    Any ideas? Thanks!

    ReplyDelete
    Replies
    1. Hi, I updated the "Development Version". So please update plugin manual and add chld_cid="true" parameter to your shortcode. Let me know if you have any other issues.

      Delete
    2. I'm not totally sure where to download it. Could you send me a link to the zip? Thanks a lot!

      Delete
    3. Scroll down on the plugin’s page and click on the "Advanced View".
      Scroll to the bottom of the page and you will see an option to download previous versions of the plugin. Select "Development Version" option and click "Download" button.

      Delete
    4. Perfect. Now it's working. Thanks for taking your time. Really appreciated!

      Delete
  3. Plugin is awesome! I have 1,300 product categories on a website we are building and this really helped organize much easier.

    But, it just stopped working. It was working, and then stopped and now just displays the shortcode as text instead of the drop downs.

    Here is website: https://everybodyuniforms.com/

    The Theme is Divi which is so widely used I figured we would be okay. And it was working, then stopped. so, confused.

    Ideas to solve?

    ReplyDelete
    Replies
    1. Thanks.
      Can you share your installed theme and plugin details with me?
      Tools \ Site health \ Info

      Delete
    2. Thank you for the positive opinion.

      If the shortcode appears as plain text, it's because of a plugin or theme. Read the documentation of the theme/plugin you are using and see how the shortcode is used. This plugin works the same as before.

      Delete
  4. Hi, please is there possibility to show menu collapse? I am using Woodmart theme, and I need automatically added Product categories. Everything works, but I need only to show main category, and when hover on it, then shoe subcategory. Now its everything under main category as list. Thank you.

    ReplyDelete
    Replies
    1. Hello,
      Can you share the working demo link of the result you want to have?

      Delete
  5. Hello hello, could you imagine adding a "category image to nav items" funtionality. I'm using it for a "fake" polylanguage page and want to add language flags to my parent language categories. Thanks for your work. The plugin is really great! Cheers

    ReplyDelete
    Replies
    1. I guess category images can be used with or without names. I will keep this in mind. I can work on it later.
      Thank you for your praise.

      Delete
  6. Hello! Thank you for this great plugin!
    I'm using TheGem theme and WooCommerce, and I have many product categories. I want to have in the main menu a "Product categories" button and when the mouse is on this button to collapse with all product categories. The problem is that for now my menu contains buttons with all categories, but the "Product categories" button is missing. Otherwords, the button label is missing, but I have a lot of buttons with the categories.
    I used this shortcode: [autocategorymenu taxonomy="product_cat"]
    Could you please to advise me?

    ReplyDelete
    Replies
    1. Thanks. Is there a demo address where I can see it working?

      Delete
    2. I cannot provide you a link to my working site because it is local, but you can see the menu of the theme here: https://preview.themeforest.net/item/thegem-creative-multipurpose-highperformance-wordpress-theme/full_screen_preview/16061685
      I need a "Product categories" button and when hover on it, then show all categories.

      Delete
    3. Try this:
      https://tncyazilim.com/temp/iccWhh9AzH.png

      You can use tastewp.com for tests.

      Delete
  7. Hi. What parameter I need if I want to specify category name to display all posts under that category not all categories.

    ReplyDelete
    Replies
    1. What I understand is this: In the menu; Under the category, you want the posts included in that category. For example:
      - Colors (Cat.)
      -- Red (Post)
      -- Green (Post)
      -- Blue (Post)

      Sorry, this Plugin doesn't work that way. All of the menu items are categories. Maybe it will be possible to add this feature later.

      Delete
  8. Great plugin! I am having trouble though with a custom post type taxonomy: [autocategorymenu taxonomy="case_studies_category"]. The url comes out without the base of the custom taxonomy. I would expect the link url to be ".../case_studies_category/something/" but it is giving ".../something/" and those links give a 404 without the taxonomy base. Am I missing something? Thank you!

    ReplyDelete
    Replies
    1. Thank you for the positive opinion.
      Please, can you try with "Development Version". So please update plugin manual. I explained how to do it above.

      Delete
  9. How can i add some levels in hierarchy? I have about 3 subcategories like "doors > small doors > handle. Now i've set 10 levels and it shows only subcategories

    ReplyDelete
    Replies
    1. Use the "level" parameter. The default value is 2. In this way, you only see the root and its first sub-branch elements. How many level branches do you want to use, assign this value. For example:[... level="3" ...]

      Delete
  10. add class with current menu should be there

    ReplyDelete

ⓘ Comment is published after moderation.


Subscribe to: Post Comments (Atom)