Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. JavaScript
Webdesign

Dropdown Navigation: How to Maintain the Selected Option On WordPress

by
Difficulty:IntermediateLength:ShortLanguages:

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).

Its initial file structure will look like this:

The initial file structure of our theme

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):

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:

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:

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:

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.

2. Activate the Child Theme

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

Activating the child theme

3. Create Some Posts and Categories

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

The post categories

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

The posts

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:

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:

The new theme structure

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

Overriding the parent theme

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

Overriding the parent theme

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.