In our blog, one of the most popular posts with more than 55k visits is Managing Menus In WordPress, which I wrote back in 2018. And as one of the most radical changes that has come to us with the WordPress Full Site Editing is menu building, I thought it’d be interesting to create a new post on how we’re supposed to create menus now.
To do this, let’s see if we are able to create the menu we have on our home page in Nelio:
On a local site with WordPress 6.0.2, I installed the Twenty Twenty-Three theme version 1.0 and also the Gutenberg plugin, which this theme requires.
Table of Contents
The Template Editor
Menus in the Full Site Editing of the site are no longer treated separately (the same goes for widgets). That is, there is no longer a Menus tab in Appearance. Menus are now built into the editing of the theme templates. So, to create or edit a new menu, what you need to do is go to the theme editor and for that you have three options:
- click on the Appearance » Editor option that you find in the left sidebar,
- click on Edit site that you find in the top menu when you view any page while logged in, or
- go directly to the themes page and click on the Customize button of your active theme.
This will take you to the home page theme template editor, which is quite similar to the block editor you already know, but with some differences I’ll discuss below. The theme template, therefore, is also created from blocks in a similar way to the creation of pages.
In the top menu you will find, first, on the left, the site logo (by default, the WordPress logo) to toggle the navigation. If you click on it you will see that it shows you the templates and template parts that make up the site, and also allows you to return to the Dashboard so you can go back to editing your pages and posts.
In the Templates tab you can see all the templates included in the theme, and in the Template Parts tab you can see a subset of blocks that are part of some templates that are commonly used throughout your site, such as the header or footer.
The buttons and options to the right of the logo are the ones you already know from the page editor: add blocks, edit or select them, undo or redo changes, and view the structure of blocks that make up the template.
In the middle we find the name of the template that we are editing and a dropdown that shows you the template parts included in said template (this information, as you can see in the first image, is also available in the right sidebar). You also have the option to go to the list of templates that we have already seen before in case you want to edit any other template.
And finally, on the right side of the menu, in addition to the buttons to see the configuration and the display options that we already had in the block editor, two more buttons appear. The first is the button to customize the style of specific blocks for the whole site. So here you can define styles for the blocks globally, and then, on each page independently, you can also change them as you wish. And then we have the button that shows the navigation menu tabs for the template you’re editing. In this case, the default Home template with the Twenty Twenty-Three theme does not include any navigation menu links.
Creating a New Header
Now that we have a general idea of how everything’s organized, let’s see how to create a new menu. As we have already mentioned, the Twenty Twenty-Three theme comes with a very minimalist header.
If we click on List View, we see it’s made up of 3 elements (Header, Group, and Footer), two of which (Header and Footer) are template parts.
Deleting the Default Header
If we directly edit the content of this Header, as it is a template part, the changes will be applied to all templates that use it.
Since we want this menu to be exclusive to the main page, we start by deleting it from our template. Simply select the header block, click on the three little dots on the right site of the editing block and select the Remove Header option.
Use a Pattern to Create a New Header
Next, just as we do when we want to add a block to a page, click on the + button to add block, and you will have a set of blocks and patterns to choose from. For our example I have selected, among the available header patterns, the “Simple header with background color” pattern.
Once the pattern has been copied, we can see the list of blocks that make it up: a group that contains another group and this in turn contains a row containing a row with the logo and title of the site, and a navigation block with the list of pages that I have on my site.
Editing the Site Logo
Next we are going to make the necessary changes to this header to make it look the way we want it to look. We start by changing the background color of the group that contains the entire header. In the properties of the group block, select a background color.
Next, click on the logo block, select a logo from the media library, and delete the site title.
Editing the Navigation Menu
We are now going to create the actual navigation menu. Currently, we have the page list block which, being my new site, only has the Sample Page.
Navigation Menu Properties
Before we deal with the contents of this menu, let’s see what properties of the menu itself can be modified. These can be found in the right sidebar.
As you can see in the image above, you can specify its justification and orientation, when and how it should look collapsed (if you click on the Display box, it shows you several display options). For displaying the submenus, you can specify whether they are displayed only on click and whether a down arrow should be displayed.
About the navigation menu colors, you can specify the text and background of the main menu and submenus. You can also specify the font and size of the menu text and the spacing between the different menu tabs.
In our example, the main text is white and the text in the submenus should be the same blue as the background color of the menu. For the size I have chosen medium and for the spacing between blocks, 30 pixels.
Editing Menu Content
Before editing the menu content, we create the set of pages on my site so we can link the menu to them. Now we see that the navigation menu shows all the newly created pages.
Next, when trying to edit any of the navigation menu items, the first thing we get is a popup to convert the list of pages to page links.
Click and we have our list of pages as editable links. Now, you can add, edit (change display name or its link), or remove links as you like.
When you add any link, it can be to an existing page on your site or to any other URL you want to specify. This way, creating the different elements of our navigation menu is very easy.
You can also add a submenu in which you can add the tabs you want.
If you want, you could perfectly well add additional submenus with more tabs.
Add a Search Item
Finally, we have to add the search feature. In this case, you must insert a search-type block, in which you can add a label, a placeholder, and a magnifying glass. This is a block that consists of a field where the user must insert the words to search for, and a magnifying glass or label to click on to perform the search.
Also in the right sidebar, we can modify some properties of the search item: its width, the text and background color, if we want it to have a border and the radius of the border of the field to insert the search.
Latest Settings and Preview
Finally, for the whole group to be displayed at the top of our page, you must indicate in the group that contains it that it does not have any padding, and that’s it. We have already created a menu quite similar to the one on the main page of our website.
Additional Considerations
As you have seen, the only limitation that we have encountered in creating the menu we have in Nelio is with the search block. In our website we only show the search field when you click on the magnifying glass, a functionality that does not exist in this block.
In this post we have create a new menu for our home page. But it is also very easy to create a menu for all the pages that correspond to a certain product. To do this, you just have to create a template for that set of pages and customize the menu in it.
I hope you found this post helpful, but feel free to add a comment below if you have any questions.
Featured image by Igor Miske on Unsplash.
Leave a Reply