Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

How to Display the Tags Filter List as a Dropdown

Would you like to display your Envira Tags in a dropdown instead of a list? Envira will help you easily create something custom on your site that will do exactly that. This guide will show you how to display tags as a dropdown instead of a list.

This tutorial is a bit more technical than our other docs, but we’ll walk you through the process step by step. In order to display the tags in a dropdown, we’ll need to create and upload a basic WordPress plugin.
  1. Creating the Plugin
  2. Activate the Plugin
  3. FAQs

To display the Envira Tags as a dropdown instead of a list, just add the following code to a new file at wp-content/plugins/envira-tags-as-dropdown.php.

<?php
/**
* Plugin Name: Envira Gallery - Display Tags as Dropdown
* Plugin URI: https://enviragallery.com
* Version: 1.0.0
* Author: Envira Gallery Team
* Author URI: https://enviragallery.com
* Description: Displays your Envira Tags list as a dropdown.
*/
add_action( 'wp_footer', 'envira_tags_dropdown', 100 );
function envira_tags_dropdown() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function() {
        jQuery(function() {
                jQuery('ul.envira-tags-filter-list').each(function() {
                        var $select = jQuery('<select class="envira-tags-dropdown" />');
 
                        jQuery(this).find('a').each(function() {
                                var $option = jQuery('<option />');
                                $option.attr('value', jQuery(this).attr('href')).html(jQuery(this).html());
                                $select.append($option);
                        });
                        jQuery(this).replaceWith($select);
                });
 
        });
        jQuery('.envira-gallery-wrap').change(function() {
        window.location = jQuery(':selected',this).attr('value')});
        });
    </script>
<?php
}
In the above code you can see class="envira-tags-dropdown". This adds the class envira-tags-dropdown to your dropdown for easy styling. You can change that class to whatever you wish before saving the file.

Not sure how to do that? Just follow these steps:

  1. Open a text file and make sure that it is a plain text document. You can use a plain text editor like Notepad or a code editor of your choice.
  2. Next, copy and paste the code above into the file and save the file as envira-tags-as-dropdown.php
  3. Once you have saved the file you can easily upload this directly to your /plugins directory on your server using FTP or you can right-click on the text document and zip (or compress).
  4. Finally, log in to your WordPress dashboard and go to Plugins » Add New » Upload Plugin and upload the .zip file you just created in the previous step.

Your next step is to activate the plugin you just uploaded. Simply navigate to the Plugins from within your WordPress dashboard and activate the Envira Gallery – Display Tags as Dropdown plugin.

Activate Tags Dropdown

Here’s what the tags list looked like before the plugin was activated:

Tags as a List

And now we can see what the tags looks like after installing the plugin and changing it into a dropdown:

Tags Dropdown Closed

Tags Dropdown Open

And that’s it! You are have now changed Envira Tags into a dropdown. Now that you’ve completed this, take a look at how to limit the caption length in your Base lightbox themes.


A: Your dropdown style may be affected by your theme or other plugins. No worries! You can add the following CSS (and even customize it further to fit your styling needs) to Appearance » Customize » Additional CSS or your theme’s style.css for a more uniform look and feel:

select.envira-tags-dropdown{
    -webkit-appearance: menulist;
    border: 1px solid #bbb;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    max-width: 100%;
    margin: 10px 0;
}