Updating WordPress Menus Automatically

WordPress is one of the best Content Management Systems we have available today. It is very easy to use and very fast, meeting most of the requirements that developers have.

However, as a developer, you might find yourself in a situation where you are developing a website for someone who keeps on adding pages to the site without necessarily changing the navigation of the website. This will require a lot of work if you have not automated the menu updating system.

In this article, we are going to discuss how one can update menus automatically and create a system that will display the pages in a website. Child pages will be shown as secondary entries on the navigation menu.

Prerequisites

To be able to automate your wordpress navigation menus, you will need to have the following;

• A working installation of wordpress that has working pages.
• You will also need to have subpages added.
• You will need to have a code editor.

Starting with the Code

I will be adding my code to a plugin so that I am able to use in the future in case I want to change my theme. This will allow me to easily code from the plugin and into the theme, adding the menu in the right place of the theme. If the theme you are using has hooks, then you can use them to add the code.

For those working with third party themes that do not have hooks, then the only way to do it is by adding code to the theme. However, the best way would be to create another theme as child theme, and then use it to add the code. You can do this by creating a duplicate of the parent theme and adding it as a child theme.

My first step now is going to be creation of the plugin. Create a folder in the plugins directory. This gives us the ability to add more files to this plugin in the future if need arises. We will then add this code to the plugin, which should be in comments. This is used to let wordpress know what this is.

<?php
/**
 * Plugin Name: Automating Navigation Menus
 * Description: Plugin to Automate Updating Menus
 * Version: 1.
 * Author: Jackson
 * Author URI: http://boochyonlinepesa.co.ke
 */

Activating the Plugin

The next step is to activate the plugin. I will be using Twenty Seventeen child theme for this tutorial. My stylesheet looks like this:

<?php
/**
 * Plugin Name: Automating Navigation Menus
 * Description: Plugin to Automate Updating Menus
 * Version: 1.
 * Author: Jackson
 * Author URI: http://boochyonlinepesa.co.ke
 Template: twentyseventeen
 Version: 1
*/
@import url("../twentyseventeen/style.css");
 */

We are now going to write some code. The first will be creating a function that will enable us to have all the pages listed in a hierarchical manner.

Let us use wp_list_pages() to list all the pages we have with their links. This will definitely require us to create arguments that will take care of it, as shown below:

wpmap_list_pages() {
 $args = array(
 'depth' => 3
 );
}

Setting the depth to 3 means that the pages at the top level will be displayed with a maximum of two sub pages beneath. We then add our function just below the arguments, as shown below:

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

Getting the Function to Work with the Theme

At the moment, the function we have created is not working anywhere on our theme. We are going to copy the parent theme header and edit it at the child theme. I am going to copy navigation-top.php from the parent theme to the child theme. In my theme, the code that I need to edit looks like this;

<?php wp_nav_menu( array(
 'theme_location' => 'top',
 'menu_id' => 'top-menu',
 ) ); ?>

I am going to have the code above in an else statement, therefore ending up with this:

<?php 
 if ( function_exists( 'wpmap_list_pages' ) ) {
 wpmap_list_pages();
 }
 else {
 wp_nav_menu( array(
 'theme_location' => 'top',
 'menu_id' => 'top-menu',
 ) );
 }
?>

Now, I would like to remove Pages at the top, and order the pages in a better way. To do that, I will have to go back to the code and fix the issues. I will edit the arguments I created earlier and change the code to this:

$args = array(
 'depth' => 3,
 'title_li' => '<h4>' . __( 'Menu', 'wpmap' ) . '</h4>',
 'sort_column' => 'menu-order'
);

We will also set the page order for all of the pages we have, with the home page getting a 0 value and the others higher values.

Conclusion

If you have a WordPress website that is page based, this is one of the best techniques you could use to automatically add newly created pages to the menu.

It is very helpful especially for freelance developers who work for clients who will keep on adding more pages to the site yet they do not know how to work on the menus to show the newly created pages. The only thing that such developers would need to do is to show their clients how they can set the order for the menus.