Automatically Adds Sub Categories as sub menu under Parent Category menu item

Assume you create Programming posts category and add it into your site menu bar. Later you are adding some sub categories like PHP, CSS, HTML, JQuery etc under Programming category. You do not need to add them manually from Menu page(Appearance -> Menus). These sub categories and any future sub category of Programming category will automatically add as sub menu items under the Programming parent menu item on your site’s primary menu.

In this tutorial I shall show you how you will get this for your site.

Adding The Category to Primary Menu

1. Navigate to Appearance -> Menus page
2. Click on Categories box
3. Check mark the category checkbox(es)
4. Click on Add to Menu button
5. Choose a Display Location if you do not select yet
6. Click on Save Menu

As per screenshot you can see that I add the parent category only. You will do the same process and can add multiple parent categories to your menu. If there have any sub category of a parent category, it will automatically add as sub menu items at front end.

Also I set Display Location Primary Menu. You can select another location if you have any.

Adding PHP Snippets

With PHP program we shall add the sub categories to parent category menu item(s).  In WordPress there have a filter walker_nav_menu_start_el which filters a menu item’s starting output. It is accepting 4 parameters:

1. $item_output: (string) The menu item’s starting HTML output.
2. $item: (WP_Post) Menu item data object.
3. $depth: (int) Depth of menu item. Used for padding.
4. $args: (stdClass) An object of wp_nav_menu() arguments.

Hook this filter like this way add_filter( 'walker_nav_menu_start_el', 'my_callback_function', 10, 4 );. Inside the callback function, get the all sub categories list of a parent category with wp_list_categories function.

Where will you add the code?
You can add the code into the functions.php file of your theme or any PHP file of your custom plugin.

Full Code

Explaining the code:

1. $args->theme_location is checking the display location. I want for primary menu location. So I am checking that there have any active menu at primary location. “primary” is the location slug. It would be unique. You will replace the primary slug with your own theme location slug, if it is different in your theme.
2. There have a category menu item in the menu? $item->object variable is checking it.
3. wp_list_categories is creating HTML lists of the categories. This is taking one parameters as an array. Here is used following items:
   1. echo: Saving the category list into a variable for future use. So echo parameter is set as false.
   2. hide_empty: Do not show those sub categories which have not any post. So it is set to 0.
   3. child_of: It is taking the parent category ID.
   4. title_li: By default title is Categories. Do not need title here. Therefore it is set as null.
4. If a category have sub category,  I am wrapping the category list with <ul class="sub-menu"></ul> HTML markup. In WordPress Menu all sub menu items are wrapping with <ul class="sub-menu"></ul>
5. Later returning the updated $item_output variable