Skip to main content
Widget

The Best Way to Code an Automatic Section Menus Widget in WordPress

Most regular users of large e-commerce websites or news sites must have observed section menus that have links to all of the pages. When you add one of these menus to your website, you will get users get associated content. This also helps in reducing bounce rate.

Unfortunately, setting up a menu that detects which specific section a user is in and providing them appropriate links is not an easy process. A Custom Menu widget can be added to the sidebar. However, this tends to show same menu on each page of your website. Now the question is how to add a menu that categorizes the space on the site the currently browsed by user and supplies them links to other pages in that specific section.

Here, you will learn how to write a plugin that fulfills this job. This plugin serves the following two purposes:

  1. It detects the particular part of the site you were in. It will also detect the top level page is for that specific section.
  2. Thereafter, it produces a list of the entire child pages of that specific top level page combined with a link to the top level page first.

The final stage is to create a widget that you can utilize to output the ‘section’ menu. In case, your user is on a second level page, a link to the page will be displayed combined with child pages. For a top level page, a link to the same page and all of its children will be visible.

What You’ll Need

Since this is a code based post, you will require the following things:

– A testing or development, installation of WordPress

– A code editor

Having an understanding of how to write plugins also helps. If you are a novice, take an online course or go through tutorials for some of the best WordPress developers for beginners.

Developing the Plugin

Create an empty plugin. Follow the steps:

Step 1: Create a folder for your plugin in your WP-content/plugins directory. Now create an empty php file inside.

Step 2: Give the empty file a name. Make sure this name is easy to remember and successfully describes what the plugin does.

It is important that you place the plugin in its own folder. This helps if you wish to add extra files such as a stylesheet at a later date.

Step 3: Open your new file. Add the following to it:

<?php

/**

* Plugin Name: WPMU DEV Section Menus

* Plugin URI: https://github.com/rachelmccollin/wpmudev-section-menus

* Description: Plugin to Automatically Display Section Menus in WordPress

* Version: 1.0

* Author: Rachel McCollin

* Author URI: http://rachelmccollin.co.uk

*

*/

view rawplugin-opener.php hosted with ❤ by GitHub

Step 4: It is time to activate your plugin through the admin screen of Plugins.

Check the Page Level

Start by writing a function that checks if you are on a top level page. In case, you are, save that specific page ID as a variable that you can use later on. In case, you are on a second level page, it will identify the top level page right above it. Now save the ID for that page.

Add the following in your plugin:

function wpmu_check_for_top_page() {

global $post;

// check if the page has parents

if ( $post->post_parent ){

// fetch the list of ancestors

$parents = array_reverse( get_post_ancestors( $post->ID ) );

// get the top level ancestor

return $parents[0];

}

// return the id  – this will be the topmost ancestor if there is one, or the current page if not

return $post->ID;

}

view rawwpmu_check_for_top_page.php

Step through that code and assess its function:

– It calls the global $post variable that will be used in the function.

– It uses if ( $post->post_parent ) to check whether the present post takes in any parents.

– If it has parents, it will use array_reverse ( get_post_ancestors( $post->ID ) to raise a list of ancestors for the existing post. It will save those in a variable referred to as $parents.

– It returns the top level ancestor’s ID by using return $parents[0].

– In case, the existing post does not have any ancestors, it will return the existing post’s ID.

– The function returns one of two things:

  1. Existing post’s ID if it is top level
    2. Top ancestor’s ID if it has ancestors

This ID will be used in the next function.

How to List the Pages in the Existing Section

This step involves the use of this ID to list the relevant pages.

Add an empty function in your plugin file:

function wpmu_list_subpages() {

}

view rawwpmu_list_subpages_empty.php

Here, you need to add two things to that function:

  1. Set things up by calling the wpmu_check_for_top_page() function. You also need to define the arguments for the get_pages() and wp_list_pages() functions.
    2. Add the code to output those pages in conjunction with links.

Add the following inside empty function:

// run the wpmu_check_for_page_tree function to fetch top level page

$ancestor = wpmu_check_for_top_page();

// set the arguments for children of the ancestor page

$args = array(

‘child_of’ => $ancestor,

‘depth’ => ‘-1’,

‘title_li’ => ”,

);

view rawwpmu_list_subpages1.php

Here, the results of first function have been called and saved as a variable referred to as $ancestor. Thereafter, it will be used as one of the arguments for get_pages(). The arguments will also define the depth of the lists and blank title.

It is now time to output pages with links. Add this inside your function:

// set a value for get_pages to check if it’s empty

$list_pages = get_pages( $args );

// check if $list_pages has values

if( $list_pages ) {

// open a list with the ancestor page at the top

?>

<ul class=”page-tree”>

<li class=”ancestor”>

<a href=”<?php echo get_permalink( $ancestor ); ?>”><?php echo get_the_title( $ancestor ); ?></a>

</li>

<?php wp_list_pages( $args );            ?>

 

</ul>

<?php

}

view rawwpmu_list_subpages2.php

Work through the following:

Run get_pages() by using arguments, and defining it as $list_pages (a new variable).

Now it is time to check if the variable is populated. This means you need to check whether get_pages() has returned anything.

If yes, open a ul element. The first item in the list serves as the ancestor which will not be called by the wp_list_pages() function. Remember that the children of the ancestor will return. Hence, it is wise to add it manually. In case, you are not interested in including the top level page in your list, simply omit this line.

It is now time to run wp_list_pages() with the arguments. This will output a list of the pages with links. The code set up is done.

Use of Automated Section Menu

The menu is helpful in helping your users navigate your website. For a website based on a hierarchical page structure, you can add section menus to help your users easily locate content relevant to the page they are viewing at present and navigate the site. It serves as a useful addition to the main navigation of the website on the sidebar.

The plugin can be easily customized for creating a list of pages in the current section right at the bottom of each page. Featured images can also be added to support your posts.

Read Also :- How to choose best word press hosting

Leave a Reply

Your email address will not be published. Required fields are marked *