WordPress Tag Navigation Using A Select Element
November 9, 2020 • jQuery, PHP, WordPress • Published By Josh • 4 minute read
WordPress tags can be used to organize your posts into specific topics. Selecting a tag brings you to an archive of all posts with that tag. A tag cloud used to be a common way of presenting your tags for navigation. Let’s learn how to use a select element instead to help users navigate to the selected tag.
Table of Contents
Select Element
Let’s say we want to display a select element in our template’s sidebar. Open the template file in your theme called sidebar.php. Let’s add code for a standard select element with one option that has no value. It will act like a placeholder. Make note of the element’s id called topics. This will be referenced later when we write some Javascript using jQuery.
<select id="topics">
<option value="">Select Topic</option>
</select>
Just after the first option but before the closing select tag, let’s add more options, one for each tag used. Using the WordPress function called get_tags, create a variable called $tags, which will hold an array of all our tags.
$tags = get_tags();
Now let’s loop through each tag and output an option. The option’s value is a link to the archive for the tag and the text is the tag name. Using the WordPress function called get_tag_link, pass in the tag’s id in order to get the tag archive’s url, which will become the option’s value. Use the tag name as the option’s text.
foreach ( $tags as $tag ) {
echo '<option value="' . get_tag_link( $tag->term_id ) . '">' . $tag->name . '</option>';
}
The end result should look like the following:
<select id="topics">
<option value="">Select Topic</option>
<?php
$tags = get_tags();
foreach ( $tags as $tag ) {
echo '<option value="' . get_tag_link( $tag->term_id ) . '">' . $tag->name . '</option>';
}
?>
</select>
After saving, if you view your website, you should see a select element containing entries for each of your tags. However, selecting an option won’t actually do anything yet!
Enqueue Script
The first thing that must be done is to tell WordPress to load the Javascript file we’ll be using along with jQuery. This is done with the wp_enqueue_scripts action hook. Open the template file in your theme called functions.php. The second parameter is the name of the function you want to call when this action hook is run.
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
Now let’s write the function called my_theme_enqueue_scripts. It will call the function called wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ). Let’s review the arguments that can be passed in.
- $handle is a unique name for the script.
- $src is the path to the script file. Using get_template_directory_uri makes it easy to get the theme’s path. The name of the file in our example is theme.js. The name of the file can be whatever you want.
- $deps is an array of other scripts this script depends on. We’re using jQuery so let’s define that as a dependency.
- $ver is for the script version number, which we don’t need.
- $in_footer is used to load the script at the end of the body instead of in the head of the page. We want it to load at the end of the body.
function my_theme_enqueue_scripts() {
wp_enqueue_script( 'theme', get_template_directory_uri() . '/theme.js', array( 'jquery' ), null, true );
}
Javascript using jQuery
All that’s left to do is write a little Javascript using jQuery. Create a file called theme.js in your theme folder. We want to add a change listener to the select element that has an id called topics. So when the select element value changes, the user will navigate to the option’s value, which will be the tag’s archive url!
(function($) {
// Navigate to selected topic.
$('#topics').on('change', function() {
window.location.href = $(this).val();
});
})( jQuery );
Related Articles
