Close

WordPress – Set up a navigation structure like w3schools and tutorialspoint

If you have a collection of posts that you want your viewers to read in a certain sequence, then you need the following navigational features:

Announcement

I have released my new course on Udemy, Kubernetes By Example. Sign up now to get free lifetime access!
  1. You need a navigation menu in the side column, which lists all the posts in the correct order
  2. The navigation menu should only be visible when a viewer is on a post that is part of the series
  3. There needs to be a “Previous” and “Next” links at the bottom of each post that allows the viewer to visit adjacent posts in the series.
  4. The current post that a viewer is reading should appear as bold in the custom menu so that the viewer can where they are in the series

A lot of tutorials websites such as w3schools and tizag (as well as this website, codingBee) have all 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 implement the same navigation structure in your website too! There are 2 parts you need set up, the functionality and the cs styling:

Setting up the functionality

  1. Ensure you have side bar enabled – This is where your post-series’s navigation menu will appear.
  2. Write your WordPress posts – if you haven’t done already done so.
  3. Add your posts to a category – All the posts that are going to be in the same series needs to be assigned to the same category. You can also tag your posts in the usual way.
  4. Create a new Custom menu – This menu’s name must be the same name as your category’s name.
  5. Add your posts to the custom menu – Make sure you only add posts that belongs to the said category. Tip: you might need to enable posts visibility under screen options, otherwise you won’t be able to add any posts to the custom menu.
  6. Arrange the order of your posts – this is just a case of dragging and dropping the menu items within the custom menu. This is part where we are ordering the posts.
  7. Install the https://en-gb.wordpress.org/plugins/widget-options/ – We’ll be using this plugin to ensure that the navigation menu is only visible when the viewer is viewing a post that is listed under the said menu
  8. Add the custom menu to the side bar – you do this via Appearance->Widgets. Then drag the custom menu widget into the side bar. Then give the menu any title you like, and then select the menu from the dropdown list
  9. Select “Show on Checked Pages” from the dropdown list – This is still part of configuring the widget.
  10. Place a tick beside the said category’s name – This will now ensure that the menu is only visible when the viewer is browsing the series of posts. Then save your changes.
  11. Install our plugin which is called Custom Menu Driven Prev/Next Links plugin
  12. Insert function tag into your theme – Now comes a tricky part, go to Appearance -> Editor. Here you need to insert:

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

    …into one of the php files (which are listed on the far right). Exactly which file you need to edit depends on your particular WordPress theme. A good starting point could be going to a file called “single.php”. Also, you can change the word “Tutorial” to something more appropriate for your website. For example if your website is about cooking, then you might want to change this to something like “Recipe”. Then your previous/next links will display as “Previous Recipe” and “Next Recipe” respectively. After you have done this your posts in the series should now start displaying previous/next links that correspond 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 previous next links showing up at the bottom of your posts. But at this point, they may not look like how you want them to. You can fix this by adding some css styling. We recommend the following way to add the css styling:

  1. Install the Simple Custom CSS plugin – note if you are using wordpress 4.7+, then I don’t think you need to use this plugin, because: https://wptavern.com/a-preview-of-the-custom-css-editor-added-to-the-customizer-in-wordpress-4-7
  2. Apply custom CSS – Go to Appearance -> Custom CSS. Then write the css code to customise how your Previous/Next links look. The css classes and ids that you need add styles to all have the “cmd” prefix in their name. To get you started, you can try to copy and paste in the following 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;
    }
    
    
  3. Apply styling to currently active menu item – You may also want to add some more css styling to the currently selected item in the custom menu, so to make it standout from the rest. This is helpful for the viewer to see how far along they are in the series. To be do this all you need to do is add the following:
    /* Current custom menu item styling */
    .current-menu-item > a {
       color:red;
       font-weight: bold;
    }
    

Hopefully that helps. If you have any problems with implementing this solution, then please contact us and for a nominal fee of $15, we will insert the php tag into your theme, and apply a basic css styling to get you started.