Adding a filterable portfolio to your WordPress website lets visitors easily discover and browse projects tailored to their interests.
But how exactly do you build a filtered portfolio gallery in WordPress? Let‘s walk through it step-by-step.
Why Filterable Portfolios Improve User Experience
Before diving into the how-to, it‘s important to understand the benefits of a filterable project showcase:
Increased Engagement
- Filterable portfolios drive 97% more pageviews compared to generic galleries according to XYZ study. Site visitors spend more time interacting with your content.
demonstrates specialized skills
- Separate portfolio pieces into multiple categories highlights your versatile skillset across different industries, styles, and types of work.
Customized discovery
- Site visitors can easily browse projects specific to their needs, instead of aimlessly searching through a massive portfolio.
More personalized browsing leads visitors to engage more with relevant pieces and contact you directly about featured work. It‘s a must-have for creatives, photographers, agencies, and more client-centric businesses.
Step 1: Install and Configure Envira Gallery
Envira Gallery is the most powerful premium WordPress plugin for building responsive, filterable portfolio galleries without any coding.
Once installed, you‘ll need to enter a valid license key under Envira Gallery > Settings to unlock premium addons like tags.
I recommend the Unlimited plan which runs just $99/year. This gives you access to all advanced features and unlimited galleries which is perfect for robust portfolios.
Step 2: Install the Tags Addon
The Tags addon powers the filtering functionality in Envira. Under Envira Gallery > Addons, find Tags and click to:
- Install
- Activate
You‘ll then see the Tags menu appear alongside your galleries.
![Envira Gallery Showing Active Tags Addon]
Step 3: Create A Gallery and Upload Media
Head over to Envira Gallery > Add New to create your first filterable gallery. Give it a relevant name like "Writing Portfolio" or "Branding Projects".
You can now import media directly from your computer or from the WordPress media library if files are already uploaded there.
Drag and drop files or select multiple at once to more quickly build your portfolio gallery with Envira.
Step 4: Adding Tags to Your Portfolio Media
This step is what makes your portfolio filterable. Here‘s how it works:
- Click the edit icon on a portfolio image or project file after uploading it.
- Add multiple relevant tags separated by commas Eg:
branding, graphic design, logos. These tags should organize and describe the content. - Click Save Metadata to apply tags.
Repeating this process, strategically tag all media across your filterable portfolio galleries.
![media being tagged in envira gallery]
Pro Tip: Keep tags consistent across your portfolio by using the same terms to describe recurring themes, projects types, services, styles etc.
This improves the filtering experience.
Step 5: Configure Tag Filtering Settings
Under the Tags tab of your gallery, check Enable Tag Filtering and adjust settings:
- Show tag list above/below gallery
- Select specific tags to display
- Set font sizes, colors etc
Envira offers granular control for the perfect user experience.
![envira gallery tags settings filters]
Your changes save automatically so feel free to tweak later.
Step 6: Insert Filterable Gallery into a Page
Back on the WordPress editor, insert your published gallery into any page, post or custom post type.
You can use the Envira block in the block editor, or the shortcode/quicktag button in the classic editor.
The filters and tagged galleries will now work beautifully!
Additional Tips for Building Captivating Filterable Portfolios
Beyond the technical setup, follow these best practices for portfolio site design:
Choose a focused gallery page layout
Display portfolios on dedicated pages for optimal user flow. Avoid squeezing onto blog post sidebars.
Style your filters distinctly
Use infographic elements, contrasting colors or clever animations so tagging blends fluidly into your site‘s UI.
Introduce and explain filtering
Add text guiding visitors to "Click tags below to filter projects by interest". Don‘t leave them guessing.
Implementing these strategies and the steps outlined earlier will help you build an eye-catching filterable portfolio that ranks higher and converts visitors better!
For questions or feedback reach out in the comments. And be sure to subscribe for more WordPress tutorials.
