Dropdown Navigation: How to Maintain the Selected Option On WordPress

In a previous tutorial, we learned how to use a select element for navigation and maintain the selected option on page load. To demonstrate it we used an example project with some static pages.

Today, we’ll go one step further and discuss the actions needed for incorporating this functionality into a WordPress website.

Note: this tutorial assumes you’re familiar with WordPress as well as the process of building child themes.

1. Create a Child Theme

To kick things off we’ll create a new WordPress site and run it locally through XAMPP. Next, we create a new child theme for the Twenty Fifteen theme (v2.1 at the time of this writing).

• WordPress
  Customizing WordPress With Child Themes
  Craig Campbell

Its initial file structure will look like this:

Let’s have a closer look at the contents of our child theme.

The Stylesheet

The child theme’s stylesheet (“style.css”) begins with the following file header (you can enrich it depending on your needs, but for our purposes it’s good to go):

/*
Theme Name: Twenty Fifteen Child
Description: Twenty Fifteen Child Theme
Author: George Martsoukos
Author URI: http://georgemartsoukos.com
Template: twentyfifteen
Version: 1.0.0
*/

Within this file we put styles targeting the select element which we’ll be adding in an upcoming section.

For now, let’s add these styles, most of which come from the previous tutorial:

.page-top-header {
  border-left: none;
  margin-bottom: 50px;
}

.myselect {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  max-width: 400px;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid #cbd1d8;
  font-size: 2rem;
  line-height: 1.5;
  background: #fff url(assets/img/down.svg) no-repeat center right 12px / 18px 18px;
  transition: all 0.2s ease-in-out;
}

/*IE*/
.myselect::-ms-expand {
  display: none;
}

.myselect:focus {
  outline: 0;
  border-color: #7bbaff;
  box-shadow: 0 0 0 3px rgba(0, 121, 250, 0.3);
}

Enqueuing Files

Inside the “functions.php” file we enqueue the parent and child theme stylesheets. In addition to these, we enqueue a JavaScript file which will hold our JavaScipt code.

Here’s the required PHP code:

<?php
function my_theme_enqueue_scripts() {
  $parent_style = 'twentyfifteen-style';  

  wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    array( $parent_style ),
    wp_get_theme()->get('Version')
  );
  wp_enqueue_script( 'main-js', get_stylesheet_directory_uri() . '/assets/js/main.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
?>

Screenshot

The “screenshot.png” is a 1200x900px thumbnail of the theme design.

Assets

The “assets” folder contains the images and JavaScript files that we’ll need for our site. On a larger project it might contain other folders as well, like a “scss” folder.

JavaScript

Inside the “assets” folder, there’s the “main.js” file which includes the code that should run each time an option is selected. 

Here’s the required code:

const select = document.querySelector(".myselect");
const options = document.querySelectorAll(".myselect option");

if (select) {
  // 1st method
  select.addEventListener("change", function() {
    const url = this.options[this.selectedIndex].dataset.url;
    if (url) {
      location.href = url;
    }
  });

  for (const option of options) {
    const url = option.dataset.url;
    if (url === location.href) {
      option.setAttribute("selected", "");
      break;
    }
  }

  // 2nd method
  /*select.addEventListener("change", function() {
    const url = this.options[this.selectedIndex].dataset.url;
    if (url) {
      localStorage.setItem("url", url);
      location.href = url;
    }
  });

  if (localStorage.getItem("url")) {
    for (const option of options) {
      const url = option.dataset.url;
      if (url === localStorage.getItem("url")) {
        option.setAttribute("selected", "");
        break;
      }
    }
  }*/
}

Note: This code is taken from the previous tutorial, where we walked through the functionality and explained how it works. The only small addition here is the initial if statement which checks to see whether the page contains a select element or not. That happens because, as we’ll see, the select will appear only on certain pages. Instead of adding this extra check, an alternative approach is to conditionally enqueue the JavaScript file.

• JavaScript
  Dropdown Navigation: How to Maintain the Selected Option On Page Load
  George Martsoukos

2. Activate the Child Theme

Now that we are familiar with the child theme’s contents, we’re ready to activate it.

3. Create Some Posts and Categories

As a next step we’ll create four different post categories:

With the categories in place, we’ll add a bunch of posts and randomly assign them to the aforementioned categories, like this:

Now that we’ve added content, let’s look at the appearance of the category (archive) pages.

4. Customize the Category Pages

Within each of the category pages, we want to add a select element which will hold all the post categories. Each time an option is selected, the related category should be loaded and the target option should be marked as selected. Plus, an extra All option should appear which will load all posts (by default the homepage displays all posts).

With that in mind, we first loop through all post categories and add them as options to a select element.

The code responsible for that behavior is as follows:

<?php 
  // get all post categories 
  $cats = get_categories();
  if ( !empty( $cats ) ) {
    echo '<div class="page-header page-top-header">';
    echo '<select class="myselect">';
    echo '<option data-url="' . get_home_url() .  '">All</option>';
    foreach ( $cats as $cat ) {
      $cat_id = $cat->term_id;
      $cat_name = $cat->name;
      $cat_link = get_category_link( $cat_id );
      echo '<option data-url="' . $cat_link . '">' . $cat_name . '</option>';
    }
    echo '</select>';
    echo '</div>';
  }
?>

We put this code inside a file called “content-post-categories.php”. This file is stored in a directory called “template-parts”.

We want to import the target file in the “index.php” and “archive.php” parent files. That said, we’ll have to override those files and add our custom code.

To do this, we first copy and paste those files in our child theme. The new structure of our theme becomes as follows:

Next in the “index.php” file we add this code:

And in the “archive.php” file this one:

At this point let's again navigate to the category pages.

Happily enough, the select works as expected. Good job, everyone!

Conclusion

In this tutorial, we created a WordPress child theme and covered the process of maintaining the selected option on page load. Hopefully, you found all the things we discussed here useful and you’ll be able to apply them in your upcoming projects.

Last but not least, all the files of our child theme are available as a Github repository.

More WordPress Goodness

• WordPress
  How to Build a WordPress Website With Elementor
  Adi Purdila
• WordPress Gutenberg
  The Best Gutenberg-Optimized WordPress Themes, Available Now
  Tomas Laurinavicius
• Inspiration
  15+ Best WordPress Portfolio Themes for Creatives
  Brenda Barron