[Support request] How to create Left menu

[Bipul]

Hi, I want to create a left menu in all inner pages except home page, is it possible to create with dynamic, this all left menu came from top header. How can I create?

[David]

Hi there,

can you explain a little more of how this Menu would work ? Is it inside the Header ?

And can you share a link to your site so i can see your current setup.

[Simon]

Hi David, My website have the structure below, i have a Header Menu and a left menu for all the sub pages in About Us, Service, Locations. When i go in the page The Mission in the left menu i need to display : About Us, The Company, The Mission, Team. I would like to create a custom HTML, i have a ACF field to display an icon for each sub menu controlled by a ACF field in each page. What will be the best way to build it.

## Website ##
– Home
– About Us
— The Company
— The Mission
— Team
– Service
— Service 1
— Service 2
— Service 3
– Locations
— Italy
— US
— Canada

Thank you

[David]

Is this left menu in the Sidebar ?

[Simon]

Hi, yes in a sidebar. thanks

[Elvin]

Hi there,

You can use a Block element or a Hook Element for this.

What exactly are the ACF fields for? I assume this requires an if condition to check if it’s empty?

Can you explain a bit more on how it should be working? Perhaps link us to a reference site you want to replicate?

Let us know.

[Simon]

Hi, ACF field for icon images, It’s a normal left menu section like in the 80’s 😉 each top section have his left menu.
do you have any GP document i can refer to ?

Thank you

Simon

[Elvin]

There’s no documentation about this as this is quite a bit of customization from the default.

Here’s what I’d do though.

If it’s purely just a static icon, add it in as content rather than an ACF field.

You can use GenerateBlock’s Icon or Button block for this, assuming your making a static menu.

Where the menu is coming from has to be considered as well. If you’re using a menu you’ve made from Appearance > Menu, you can just add your icon within its menu items – https://docs.generatepress.com/article/adding-icons-to-menu-items/

[Simon]

Usually i create a new template with my custom PHP/WP to fetch the pages of the sections and create the menu with css and I assign this template to the page where i need a left menu.

I would like to know if there’s a better WordPress Way to do this ?

[Elvin]

Usually i create a new template with my custom PHP/WP to fetch the pages of the sections and create the menu with css and I assign this template to the page where i need a left menu.

IF that’s the case then you should include the acf fields on your custom PHP for menu as well.

I’m not fully sure how or where you’ve made your custom menu to advise the most appropriate thing to do.

If you can share us the full detail of how you’ve made your menu, we should be able to get a better idea of how to add your icons.

[Simon]

Here we go a wireframe with a left menu : http://uiwireframes.com/assets/img/wireframe-examples/Website1-06-Content-Left-Navigation.png

[Elvin]

Here we go a wireframe with a left menu : http://uiwireframes.com/assets/img/wireframe-examples/Website1-06-Content-Left-Navigation.png

We’ll need the actual code so we can point you to where you should insert the icons. 😀

[Simon]

please do not focus on the icon 🙂

[Elvin]

please do not focus on the icon 🙂

I assume you got that figured out?

In that case let’s go w/ the conditions.

Since you’re using custom HTML to add this in, I suggest using a Hook element to add in your custom HTML to the left side bar.

You need to create multiple Block or Hook elements.

1 for the left menu for the rest of the pages, another 1 fr the left menu on the pages you’ve mentioned.

You basically need to set the display rule differently for the multiple Hook elements so you can assign them to which pages they’d display.

Display Rule Location sets the element to display on the specified pages wile Display Rule Exclude prevents the element from being displayed on the specified page.

as for the hook to use, you can refer to the hook visual guide. https://docs.generatepress.com/article/hooks-visual-guide/

[Simon]

Thanks, i understand now how to use the Module Elements and the hooks, Thank you for your time !

[Author]

Posts