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:

42 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
  11. Hi :-)
    thx for the pi (y)

    i have added the parent_id as attr, so it can be used in the shortcode, in:
    class-auto-hierarchic-category-menu.php
    line 196: ,'parent_id' => 0 // parent id to begin with
    line 237: $html=$this->atakanau_category($categories, $attr, home_url().$link_sub, $attr['parent_id'] );

    Would be great, if you can add it to your code for the next release (y) :-D

    thx for the good work!

    ReplyDelete
    Replies
    1. Thanks. This is a good idea. I will try and check on next release.

      Delete
  12. Hello! Is it possible to show only one category and its subcategories? How "included"?

    Shortcode includes all categories, too many to exclude

    ReplyDelete
    Replies
    1. Hello. Identifying the starting category with the ID number is on my to-do list. For example: [autocategorymenu root_ids="101,102,103"]

      Delete
  13. Hey
    Thank you for your amazing plugin!

    I have category name "advice" that contains a lot of posts.
    I want male the short code' should the shortcode neef to be like this:
    [autocategorymenu hide_empty="0"]
    [autocategorymenu taxonomy="advice"]

    Or maybe something like this:
    [autocategorymenu hide_empty="0"]
    [autocategorymenu category="advice"]

    Two of this sortcode doesn't work for me.
    I use the default WordPress for post and tags.

    Thanks :) !

    ReplyDelete
    Replies
    1. Thanks. There are only categories in the menu. There are no posts. For now you can exclude categories by id number, eg. [autocategorymenu exclude="101,102"]. Identifying the starting category with the ID number is on my to-do list. For example [autocategorymenu root_ids="101,102,103"]

      Delete
  14. Hi! Thank you for this plugin! Can you tell how to make it in order which I want?

    ReplyDelete
    Replies
    1. Thank you. Menu items are listed alphabetically. Adding the sort parameter is on my to-do list.

      Delete
    2. ok. We are waiting for it

      Delete
  15. Hi, Working on a Property site and there is a CPT for the properties with their own category taxonomy. Your plugin correctly identifies and displays the categories but the URL is missing a subfolder. This is what it should be https://ajo.casa/it/property_category/residenziale/ and this is what your plugin outputs https://ajo.casa/it//residenziale/

    Is there a way to fix this?

    ReplyDelete
    Replies
    1. I see that the plugin is used on your website. As you want it to be, the link generated in the menu already has the category base address and the subcategory address. As in: https://ajo.casa/it/property_category/residenziale/

      Delete
    2. Thanks, I worked it out by the time you checked it. I have a request. Please add the Ability to set an 'active' class to the A record (e.g. If link url = browser url then add class name) and the ability to edit the menu item after adding.

      Delete
    3. I have a feature request! Can you accept a optional argument "root_id" that takes a category id as input, and as a result of that being provided uses such id ad the root of the hierarchical tree being displayed?

      Delete
    4. Challenge accepted ­čÖé. Determining the starting category is on my to-do list. May be next release...

      Delete
  16. Hi i am have created a menu but when i insert the shortcode the items appear as a bullet list and not with dropdowns. I am using Breakdance builder. Is it possible to make the menu appear as it should normally is.

    ReplyDelete
    Replies
    1. Hello. This plugin creates the menu in HTML format. The appearance is related to the theme you are using. You have to customize generated HTML via plugin parameters, such as prnr_cls="???" . You can check the examples in the post. If you need professional help, you can write to me using contract page / form.

      Delete

ⓘ Comment is published after moderation.


Subscribe to: Post Comments (Atom)