Auto Filter Portfolio on page load

We wrote a little javascript to help customize what filter is triggered on page load.

Put this in your child theme functions file.

// themo_hook_head_css = to add custom css or JS to your head
function themo_hook_head_css() {
        jQuery(window).load(function($) {
            // Change collaboration to your filter name.
            var filterby = 'collaboration';
            // DONT EDIT BEYOND THIS
                // options
                itemSelector: '.portfolio-item',
                layoutMode: 'fitRows'
            jQuery('.portfolio-row').isotope({ filter: '.p-'+filterby }); // Filter by specific class
            jQuery('a[data-filter=\"*\"]').removeClass( 'current'); // Remove All as active
            jQuery('a[data-filter=\"#portfolio_content .p-'+filterby+'\"]').addClass( 'current'); // Add active state to specific class.
    echo $output;

Then change the filterby variable to the filter you wish to auto filter by on page load.

In the example above I want to auto filter on page load by the collaboration filter. You can see an example of the collaboration filter on this page although we don't have it auto filtering at this time.