Create a menu with the 2023 theme

About this lesson

Learn how to create a navigation menu for your WP website using the default 2023 theme.

Important:

In order to be able to add pages to your navigation menu, you need to have previously created them. You may view them by selecting the All pages link from the dashboard navigation.

No pages yet?

If you have not created pages yet, please take a break, and do so by:

  1. Selecting the Add new link from the Pages menu in the dashboard navigation.
  2. Give each page a title (examples: Home, About, Services, Team, Contact)
    • If you have content created you may add it to the pages at this time; however it is not necessary.
  3. Publish each page.

Learn more about creating a WordPress page here.

The steps

Open your WordPress dashboard

On the top admin menu of your website, hover over your site title to reveal the Dashboard link. Select it to open the dashboard.

Navigate to the Editor

To begin creating your navigation menu in the Twenty Twenty-Three theme:

  1. Hover over the Appearance tab of your dashboard.
  2. Select the Editor link.
Image showing Site Editor Location

Welcome to the Full-Site Editor

Once the page loads you see the default page layout for your website in the Editor view. Each page on your website follows this template.

Image Showing Site Parts

Toggling the List view will allow you to navigate through your site parts. There is the Header, Post Content Group, and a Footer region. 

Warning:

You should not remove the Post Content block when editing your templates. This causes issues with your website. The content you see displayed is only a placeholder and will display the correct page or post content of your site on the frontend.

Add the Navigation block

It is now time to add our menu. Follow the steps below to achieve this:

  1. From the List view navigation select the Row block. This is included in the default template of 2023. If it has gotten deleted, you may add it back at this time.
  2. The Row properties should be set with the following:
    1. The Justification will be set at Space between.
    2. The Orientation should be set to Horizontal.
    3. The Wrap option is toggled to the On position.
  3. In the Row widget content region select the Plus sign “+” to add a block.
  4. Locate the Navigation block. If you do not see it you may use the search field in the popup to find it.
  5. Select the Navigation block to add it to the row.
  6. If a menu has been auto-created, and you want to scratch, you may select the Create new menu link. This may also be used to create a different menu for your footer or other regions.
Image showing how to create a menu

Add pages to the menu

Now that you have added the Navigation block to the template it is time to populate it with your pages. You can do this by using the following steps:

Image showing how to add pages to menu
  1. Select the Add block located in your navigation region.
  2. In the search field that appears, begin typing the name of the page you would like to add. It may take a few seconds to appear below depending on your hosting.
  3. Select the page in which you would like to add. It will then appear in the menu.
  4. Repeat the process for all your top level menu items.

Reorder your pages

You may reorder you menu items by selecting the desired item in your menu doing the following:

Image showing how to reorder menu items
  • Using the Move left/right icons in the popup settings.
  • Using the List View panel, select the desired menu item, and drag it to the proper location.

Create submenus

In order to add child pages to your menu, you may do the following:

Image showing how to edit submenu
  1. Select the parent menu item you wish to have a submenu.
  2. In the popup settings select the Add submenu option.
  3. Select the Add link option as shown in the image below.
  4. Type the name of your child pages and add them to the menu using the same way as adding your parent links above.
  5. Repeat the process to add your remaining child pages vertically in the submenu.

Save your changes

Once you have added all your pages to the navigation menu it is time to save your work.

Image showing how to save your work

Select the blue Save button at the top of your page. Once selected, you will be asked to confirm these changes.

Exit the Editor

You may now exit the Editor by first selecting the WordPress icon. Then, select the Dashboard link to return to your dashboard.

Image of how to exit editor

View your page

You are now ready to view your new navigation menu. From the top left of your dashboard, click the Visit site link. Your menu should now appear in the header of your website.

Image of navigation block

Making changes

You may select and view all your pages to ensure that it works correctly. If you would like to make changes, or add some styling to your menu, you may return to the Editor.

Getting Stuck?

If you are having trouble using the new Full-Site Editor you may also switch your WordPress theme to one that uses the classic navigation method. This method has much more documentation and videos online. Even better yet, you should try using a solution such as Elementor Hosting for WordPress that come with Hello theme, a pre-created template library with many header options, and all the other tools you need to create professional looking headers and navigation for your website.