How to Set up Navigation Structure like W3Schools?[WordPress Guide]

Today in this tutorial blog post we will learn to “Set up Navigation Structure like w3schools and TutorialPoint ” where you have a collection of posts that you want your viewers to read in a particular sequence.

Must-Read WordPress Guides

• Speed Up Your WordPress Website
• Steps to installing WordPress on any host 2022
• WordPress SEO (On-Page & Off-Page)
• Monetize Website with low Traffic
• How to Create Shortcodes in WordPress

Features for Navigation Structure like w3schools

Then you need the following navigational features in your blog :

• A navigation menu that is listing all the posts in the correct order.
• The navigation menu should only be visible on a post page, this is the mainly focused part of this post.
• The Previous and Next post links are a must here so the viewer can visit neighboring posts in the sequence.
• The current post that a viewer is reading should arise in bold in the custom menu so the viewer can locate their sight in that list where he is.

Many tutorial websites such as w3schools and tutorialpoint have all of the above features so that a viewer can follow a series of posts (i.e. tutorials) in sequence.

Here’s the good news, in WordPress you can also implement the same navigation structure on your website!

Configuring the Blog

There are 2 parts you need to configure here in your blog:

1. functionality
2. ccs styling

Setting up the Functionality

• Ensure Sidebar Enabled – Where the post series menu will appear.
• Write WordPress Posts – If you haven’t done it yet.
• Assign Categories to Post – the same series of posts are to be assigned in the same category or you can assign them tags.
• Create Custom Menu – the menu’s name must be the same as the category.
• Add Posts to Custom Menu – Make sure you only add posts that belong to said category.
  Note: you might need to set a post as visible under screen options.
• Arrange the order of your posts – drag & drop features will make it easy for you.
• Install the https://en-gb.wordpress.org/plugins/widget-options – this plugin is only to ensure that the navigation menu is only visible when the viewer is viewing a post that is listed under the said menu.
• Add the custom menu to the sidebar – Appearance -> Widgets
• Install Plugin “Custom Menu Driven Prev/Next”Insert the function tag into your theme – Appearance -> Editor
  (insert into any PHP file which is documented on the far right)

[php light=”true”]<?php CMD_prev_next(‘Tutorial’); ?>[/php]

• Precisely which file you need to edit depends on your individual WordPress theme. A good starting point could be going to a file called “single.php”.

After you have done this your posts in the series should now start showing previous/next links that conform to your new navigation menu.

However, the styling of the previous next links may look all wrong. We will fix this in the next step

Setting up the CSS Styling

At this point, you should have the following previous links displayed at the bottom of your post. But at this point, they might not look the way you want them to. You can solve this problem by adding a CSS style.

We suggest the ensuing way to add the css styling:

• Install the Simple Custom CSS Plugin – if you have WordPress version 4.7+ then you don’t need to do this Because, In WordPress 4.7, there’s a new section in the customizer labeled Additional CSS.
• Apply Custom CSS – Appearance -> Custom.css
  Write the CSS code to customize how the previous/next links will look.
  The “cmd” prefix should be included in the classes and ids you are using in styling.

To get you started, Add the below code to your CSS code:-

/* Previous-Next links */

.cmd_post_nav li { 
  list-style: none;
}

.cmd_post_nav .cmd_previous { 
  float:left;
  width: 48%;
}

.cmd_post_nav .cmd_next { 
  float:right;
  width: 48%;
  text-align: right;
}

.cmd_post_nav a {
  font-size: 16px;
  font-weight: 300;
}

.cmd_previous .meta-nav {
  float: left;
  font-size: 44px;
  font-weight: 500;
  line-height: 30px;
  padding-right: 10px;
}

.cmd_next .meta-nav {
  float: right;
  font-size: 44px;
  font-weight: 500;
  line-height: 30px;
  padding-left: 10px;
}

.cmd_right {
    float: right;
    width: 85%;
    word-wrap: break-word;
}

.cmd_left {
    float: left;
    width: 85%;
    word-wrap: break-word;
}

• Styling for your Current Active Menu – Make it standard from the rest, this is helpful for the viewer to see how far along they are in the series.

To do this all add the below code:-

/* Current custom menu item styling */
.current-menu-item > a {
   color:red;
   font-weight: bold;
}

Conclusion

hope this article”How to Set up Navigation Structure like W3Schools?” help you. If you run into any problems while implementing this solution, please contact us we’ll help in inserting the PHP tag into your theme and applying some basic CSS styling to get you started.

Thank you Team Piotech INDIA