Web Design & Development

Divi: Link To Filterable Portfolio Module Via URL Hash

I wrote some code that allows you to link a specific filter to the Filterable Portfolio Module.

By default when you load the page, the “All” category is selected. This code looks in the URL for a hash, and if there is a matching filter, it sets that one as active instead of “All”. For example, going to “http://site.com/#laptops” will load with the “laptops” filter active.

<script type="text/javascript">
(function($){
$(window).load(function(){
// find the hash in the URL and removes the #
var et_hash = window.location.hash.substr(1);
var et_filter = $( '.et_pb_portfolio_filter a[data-category-slug="' + et_hash + '"]' );

if(window.location.hash && et_filter.length) {
// if it finds a hash and the filter exists, then add the active class
$(et_filter).addClass('active')

// removes the active class from the all filter
$( '.et_pb_portfolio_filter a[data-category-slug="all"]' ).removeClass('active')
}
});
})(jQuery)
</script>

Just add the code to the “Body” area of the Divi > Theme Options > Integration section, or to the “Footer” area of the Settings > Header and Footer plugin.

See our featured website design work

Check out some of the beautiful websites we’ve built for over 2,000 clients.

We offer WordPress support & maintenance

Shake the stress of ongoing maintenance with plans supported by our team of WordPress experts.

Related articles