Advice on custom Taxonomy in menu

[dhunink]

Hi!

Through ACF I’ve created a custom posttype and a taxonomy. The taxonomy holds 3 items.
There are 12 pages of this CPT and each post has one or more taxonomy-items (categories).
What I would like to achieve is to display each of the three taxonomy items (categories) in a menu (which was fairly easy), and have a dropdown on each category that shows all the pages linked to that category.
I can think of multiple ways to try and achieve that, but I want to stay as close to how Cornerstone is designed as possible.

To illustrate: there are 12 pages (CPT) and all have a taxonomy-item attached (e.g. assigned a category)

I’d like to display them in a Cornerstone menu as a dropdown like this

What’s the advised route to take, which uses the full potential of Cornerstone and auto-add’s new posts and/or categories?

Thanks in advance!

[prakash_s]

Hello @dhunink,

Thanks for writing to us.

You can add taxonomy terms or categories to your menu by following these steps:

1. Go to your WordPress menu settings and click on Screen Options at the top.

2. Enable the specific taxonomy or category you want to add as menu items.

3. Once enabled, the taxonomy will appear on the left side with its terms listed. Select the terms you want and click Add to Menu.

Save the menu, and then use a navigation element such as Navigation Inline or Navigation Dropdown, etc, to display it on your site using the Cornerstone page builder.

Hope it helps
Thanks

[dhunink]

Hi!

I’ve done exactly that and the selected taxonomy terms do show up inside the Cornerstone Navigation elements, but they don’t display drop-down with the pages that have those taxonomies. That’s the challenge I’m facing, and I’m not sure what the best route forward would be, inside Cornerstone.

[ruenel]

Hello @dhunink,

Going to the Appearance > Menus, as pointed out by @Prakash_s, you will have to manually insert the Custom Taxonomy and the pages under each taxonomy.

When you want to display the custom post type for each taxonomy, using the Looper Provider Query Builder should allow you to achieve what you are trying to accomplish. Take, for example, the element structure below:

Section
  Row
    Column
        Div - Looper Provider All Terms (Looper to display the taxonomy)
           Dropdown - Looper Consumer (display taxonomy item)
              Div - Looper Provider Query String (under the current taxonomy)
                 Div - Looper Consumer 
                     Button - Link to custom post item 

Hope this makes sense.

[dhunink]

Hi @ruenel,

I did thought about using Loopers, but was not sure if that indeed was the advised way to go. I was kind of surprised that pages added to a taxonomy are not automatic added to submenu’s, hence my question.

Thanks for pointing me in the right direction. Your description definitely makes sense.
However, that only covers adding a single dropdown for each taxonomy item. I’m perfectly okay with building a Looper, but also want to incorporate that inside a default Pro menu-element, since that has all the styling and responsive behavior done already. What’s your advice on using a Menu-Element with taxonomie cateogries and displaying their items?

In the mean time, may this be an interesting challenge for the developers to support auto-added taxonomy sub-pages in menus, or is that just something WP isn’t supporting and therefore won’t be something to be supported in Pro?

[ruenel]

Hello @dhunink,

At the moment, when going to Appearance > Menus, adding the menu items is to be done manually. This means that using the Menu element is not possible to automatically add the custom taxonomies along with the pages under each taxonomy. What you have in mind is WP’s current limitation.

With the Loopers, you can add the items under each taxonomy using the Dropdown, like I have shown in my previous reply.

Thanks.

[dhunink]

Hi @ruenel,

that was exactly the clarification I was looking for. Given the current possibilities of both WordPress and Pro, I will either have to choose to add new taxonomy-items by hand to a default WP Menu and display that using Pro’s native Navigation element, or choose to build my own navigation in Pro but being able to use DC/Loopers to auto-add new items.
Tough choice, to be honest. I expect items to be added/deleted a few times a year, so using DC/Loopers would fit perfectly. At the same time I really love how the default navigation elements behave and their styling is done perfect.

Given your experience and all the user case you’ve seen, I guess I would really like to take your option and take that into account when making the final decision. Really looking forward to your thoughts!

[ruenel]

Hello @dhunink,

Since you expect to add/remove items from the navigation, I highly recommend customizing your header by adding buttons and dropdown elements. You can then have the Looper inside the dropdown content.

Perhaps this structure will give you the idea:

Bar 
    Container
       Div - {ul html tag}

          Div - {li html tag}
              Button - {nav item 1} or Home button

          Div - {li html tag}
              Button - {nav item 2}

          Div - {li html tag}
           Div - Looper Provider All Terms (Looper to display the taxonomy)
             Dropdown - Looper Consumer (display taxonomy item)
              Div - Looper Provider Query String (under the current taxonomy)
                 Div - Looper Consumer 
                     Button - Link to custom post item 

Hope this makes sense.

[dhunink]

Thanks @ruenel, that indeed makes sense.
I’ve started working on it but I do encounter two major issues.
The first one is the Looper Provider not recognizing all terms.

Looper Provider set up to ‘all terms’:

With this setting, only one single term is picked up, as seen in this screenshot:

However, the taxonomies and terms created through ACF are set up to be accessed through a public query:

Secondly I’m kind of doubting about the route of trying to replicate the excellent default nav-inline element. So far I did followed the structure you described, but to achieve the exact same look of a inline-nav element, I had to add custom CSS. I think that could be avoided somehow.
So I sought to find the source-code of the default nav-inline element, import that into Pro and then add a dropdown element with exactly the same style settings. However I did not found those settings/document in the source code.
What would be the best way to import a nav-inline element as editable rows/columns/childs with their default styling, and then add the dropdown elements for the taxonomies?

Thanks in advance for any guidance!

[ruenel]

Hello @dhunink,

Your custom taxonomy must be Public Queryable:

By the way, all the navigation elements are just integration bridge to display the WordPress menus in the builder. It gets the name of the menu and then return the menu items that is generated by the WordPress menu wp_nav_menu() functions.

• https://developer.wordpress.org/reference/functions/wp_nav_menu/

Hope this makes sense.

[dhunink]

Hi @ruenel,

I wasn’t aware that the taxonomies needed to be public queryable, but you are absolutely right, that did the trick on the first part of my question.

To get back to the second part: I know navigation elements are ‘just’ a way of styling the default wp_nav_menu(). What I meant is that I’m trying to replicate the inline navigation element with the structure you suggested, running into pretty basic issues and need to add custom CSS, while the Navigation Inline element already has it’s own settings and formats to display perfectly.
So I started wondering: is there a way to use/replicate/duplicate the Navigation Inline Element and add the menu items for the custom taxonomy? That would save so much time and custom-code!