When the navigation menu system was released with WordPress 3.0, this was one of the factors that transformed WordPress from a blogging platform into a powerful CMS.

This meant that you could add any content you wanted to your website's navigation menus, including custom links. The "drag and drop" interface meant that anyone could create their own custom menu without any coding skills.

But sometimes you don't want to rely on it. If you are developing a website for a client who is going to add pages to their website, they are unlikely to update the navigation menu (s) when they do or lack the skills. .

So this is where an automated navigation menu comes in handy.

In this tutorial, I'm going to show you how to create an automated navigation menu that displays all the pages of your website, as well as the child pages displayed as second level entries in the navigation menu.

You can then add this code to your theme's page header, sidebar, or footer if you want, and this will show your users links that automatically update when new content is added to your website.

But, if you've never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog 

Then back to why we are here.

Here's what you'll need to automate WordPress navigation menus:

• A WordPress development or test installation, with a few pages and sub-pages added
• A code editor.

Code Configuration

I will add this code to a plugin so that it is permanent, even if I change the WordPress theme. In this way, I can add the function of my plugin in my theme to add the navigation menu where I want. If your WordPress theme has " hooks You can use one or more to inject this code.

Also see our list of 10 WordPress plugins to create a countdown

If you are working with a third party WordPress theme that does not have Hooks, you will need to add code to the theme. Don't code it directly into the theme: instead, create a child theme and add your code to it. Just create a duplicate of the theme template file from the main theme you want to edit, add it to your child theme, and edit it.

First step

The first step is to create the plugin. I create a folder in " wp-content/plugins ". Creating a folder means I can add more files to the plugin in the future if I have to, like a stylesheet or include files.

First, you need to add the login code for your plugin, in the comments, to tell WordPress what it is:

<?php
/**
 *Plugin Name:Plugin
 * Plugin URI: http://blogpascher.com
 * Description: WordPress Plugin
 * Version: 1.0
 * Author: Herve
 * Author URI: http://blogpascher.com
 *
 */

Now activate your plugin.

Then, if you are using a child theme, configure it. I'm using the child theme from the Twenty Seventeen theme - here is my stylesheet:

<?php
/**
 *Plugin Name:Plugin
 * Plugin URI: http://blogpascher.com
 * Description: WordPress Plugin
 * Version: 1.0
 * Author: Herve
 * Author URI: http://blogpascher.com
 *
 */

@import url( " ../twentyseventeen/style.css " );

Once you've done that, if your website doesn't have any pages yet, add a few. They must have a structure on several levels. This is what my fake pages look like:

Now, let's start adding the code to the plugin.

Create a function to list all pages hierarchically

We will use the function « wp_list_pages () To retrieve all pages and list them with links. But first, we need to define some arguments for it. Start by creating your function and add these arguments:

wpmu_list_pages () {wpmu_list_pages () {$ args = array ('depth' => 2); }

The arguments are very simple - there is only one for the level of pages we want to do. Setting "2" means that the top level pages and their subpages will be displayed, but no more.

Discover 5 common login errors on WordPress and their solutions

Now let's add the function "wp_list_pages ()" after the arguments:

Wp_list_pages ($ args);

Here is the complete function:

wpmu_list_pages () {wpmu_list_pages () {$ args = array ('depth' => 2); wp_list_pages ($ args); }

Adding the function to the theme

At the moment, the function does not show anything on my website. To change this we need to add a copy of the main theme header to the child theme and edit that.

See also: How to protect your WordPress work on client websites

Start by copying your header file to your child theme and open it. In Twenty Seventeen, the navigation menu code can be found in " templates-parts / navigation / navigation-top.php Which means I need to add a copy of this file to the same place in my child theme.

Discover to go further How to install a WordPress child theme

In your theme, this can be the file header.php that must be copied.

Depending on your theme, the menu code will be different. In the one I'm using, this is the code I need to replace:

'top', 'menu_id' => 'top-menu',)); ?>

Modify the code of your navigation menu to add a new function, with the existing code in an "else {}" declaration:

'top', 'menu_id' => 'top-menu',)); }?>

Conditional statements are important: first, it checks if the function you added to your plugin is present (i.e. if the plugin is activated) and, if so, it performs the function from that. Otherwise, it works normally.

See also our guide on How to display ad units on WordPress

Now look at my website:

The links appear, but there are some issues. I don't want "Pages" displayed at the top (which is the default for the function wp_list_pages () ) and I want to order the pages more efficiently. You will see that the home page is in the middle of the list, which is not ideal.

Improve the function

Let's go back to the plugin code and adapt it to correct these problems.

Find the arguments you have already defined for wp_list_pages ():

$ args = array ('depth' => 2);

And edit it:

$ args = array ($ args = array ('depth' => 2, 'title_li' => ' '. __ ('Menu', 'bpc'). ' ',' sort_column '=>' menu-order ');

This adds two additional arguments:

• The markup before the list, which now says " Menu " instead of " Pages ».
• The order in which the pages are displayed.

You must return to the editing screens of your pages and define the order of the pages for each of them. Set your home page to a value of "0" and other top-level pages are higher than these. 

Also read our guide on : How to gradually load Facebook and Disqus comments

Now, when you display the menu, it will look like this:

You can also change the menu order of the second level pages. This will never appear above top level pages, so you can start at 0 or 1 for each set of subpages.

Discover also some premium WordPress plugins  

You can use other WordPress plugins to give a modern appearance and to optimize the connection to your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. Gravity Forms

As a business owner, allowing your customers to contact you should be your priority. Gravity Forms is the plugin of Contact form the most popular on WordPress.

You can use it for create any type of form, such as a quote form, surveys, and more.

Download | Demo | Web hosting

2. eForm

eForm is an advanced and flexible form builder that can be integrated into an existing WordPress website. It is a complete form management solution. This concerns, among other things, quizzes, surveys, data collection, payment estimation and user comments.

With such a form designer, you can design forms in an unlimited way and manage them from your dashboard. All requests are stored in your database, you will be able to see, track, analyze and act on the data you have saved.

Read also our article on How content marketing affects the SEO of your blog

In addition, a user portal allows registered users to also review and track their requests.

Download | Demo | Web hosting

3. Mailster

Mailster is a WordPress Plugin easy-to-use premium that will help you integrate a newsletter into your website. With the latter, you will be able to create, send, and track your campaigns without too much hassle.

Its main features are: the ability to track open emails, clicks, subscriptions and bounce rates, the ability to target your campaigns, campaign management and planning, support for 6 types of auto-responders, unlimited creation registration forms, a user-friendly interface, customization of the background, support for multilingual, and more.

Download | Demo | Web hosting

Recommended Resources

Find out about other recommended resources to help you build and manage your website.

• 8 WordPress plugins to create a megamenu on your blog
• How to display recent articles on WordPress
• How to create a slideshow with Slider Revolution on WordPress
• How to display ad units on WordPress

Conclusion

Here is ! That's all for this tutorial, I hope it will allow you to add pages automatically to your menus. If you have any concerns or suggestions in this area, let's find ourselves in the comments section to discuss.

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.

But meanwhile, share this article on your different social networks.

...