The new Smart Menus in Pinegrow offers a very convenient way to use different kind of menus components and transform them into WordPress navigation menus but in the current version it doesn’t yet support nested submenus.
Note: While this is a process that we plan to include in a future Pinegrow update, in the mean time and if you are in a hurry, here is a clean and efficient solution to add menus with nested submenus in your Foundation based WordPress theme.
UPDATE The current version of this tutorial is enhanced and fixed thanks to the collaboration of Rob Lee, a fellow Pinegrow community member, owner of Invisible Inc* and a Foundation framework addict 🙂
We assume that you have already started to design your theme with the Foundation framework, that you have activated the WordPress plugin (see our video tutorial) and added a Top bar to manage your navigation menu before continuing with the rest of the steps here.
Foundation offcanvas menus don’t work with this technique but you can use Smart menus instead.
We have created the package topbar_essentials.zip with the following content:
- /topbar_essential/: All the files you need to follow the current tutorial
- /PG_Foundation_Walker_Template/: The sample HTML template from the current tutorial
- /PG_Foundation_Walker_Theme/: The WordPress theme generated from the current tutorial
Now, in your project folder, create a new folder, name it inc (project_folder_name/inc) then extract the content of the topbar_essentials package and copy the file foundation-walker-nav-menu.php into the inc folder.
In Pinegrow, identify the Top bar section that you want to target as your WordPress menu and add the Nav menu action on the Top bar list element.(Navigation and Pagination > Nav menu)
Proceed to the settings:
primary(you can also enter a specific menu ID)
- Menu class:
top-bar-menu leftdepending on which Top bar list you have added in the previous step)
- Item wrap:
<ul id="%1$s" class="%2$s">%3$s</ul>
- Echo: checked
- Replace: Element
Tweak your template
To ensure your Top bar menu works correctly you need to change/replace one of the scripts at the bottom of the page.
From the topbar_essentials package, copy the file foundation_init.js to the /js/ folder inside your Pinegrow project folder.
Click Page > Edit code and at the bottom of the code before the </body> tag replace
Save your template and export your theme.
In your theme folder edit the file functions.php and add the following line at the bottom of the file, before the php closing tag
This is the PHP command to import the external navwalker script into the theme.
Note: do not add the code inside /* Pinegrow generated … */ sections because those are overwritten by Pinegrow when you export the theme.
You can read more about adding code snippets to your functions.php by following our tutorial.
From WordPress admin, in Appearance > Menus be sure that you have a valid menu set as primary and, for the sake of the demonstration, be sure that you have submenu items available.
Activate your theme and test if your WordPress menu is working as expected.
You can also check the menu behavior in mobile view. It should be fine as well.
Last updated on December 1, 2015 at 1:25 pm