WordPress Pinegrow Part 3 | Creating the WordPress Navbar in Pinegrow

Pinegrow Tutorial

Time: 3 minutes

If you haven’t already, check out the previous post on generating the WordPress header and footer files in Pinegrow.

Download the source files for the project here.

In this tutorial, we will create a WordPress navbar in Pinegrow for our theme.

Creating a menu is perhaps our least favorite part of WordPress theme development. Judging by the amount of WordPress navbar plugins available, we are not the only ones who feel this way!

Thankfully Pinegrow lets us create a WordPress navbar with just a few clicks. This is a huge time saver and one of the many reasons we love Pinegrow.

In this tutorial, as we are using Bootstrap 4, obviously we are creating a Bootstrap 4 navbar, which adds the Bootstrap navbar walker to our theme after we export it, but the process is pretty much the same for any kind of navbar.

Creating the WordPress Navbar in Pinegrow

Now we will create a WordPress navbar in Pinegrow for our theme. Before we do this in Pinegrow we need to set one up in our WordPress install first

In our WordPress install admin area, go to appearance, Menus.

Give the menu a name and save it.

Add some pages or links to the menu.

Set the display location to primary and save.

Back in Pinegrow.

Open the tree options.

Select the Navbar UL tag to highlight it.

Click the nav menu action under navigation and pagination.

Type primary in the menu field.

Select Bootstrap 4 from the Menu type dropdown.

If you are working on a non Bootstrap project you should select SMART, the process is pretty much the same.

Right click on the element and select preview PHP code, or use the keyboard shortcut shift P.

You will see the menu has now been converted to a WordPress PHP menu.

We recommend you get used to previewing the PHP code generated by Pinegrow, you will learn to understand if everything is correct from it.

Save and export the theme.

Refresh our browser window to check that it worked.

Well done you have created a WordPress Navbar in Pinegrow.

Resources

WordPress Codex – Registering the Navbar

WordPress Codex – Navbar menus

WordPress Codex – Reference

Pinegrow Docs (old) – Navigation Menus

Integrating a Bootstrap 4 Navbar into a WordPress theme