Auto Filter Rooms 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.
For version 2 +
// themo_hook_head_css = to add custom css or JS to your head add_action('wp_head','themo_hook_head_css'); function themo_hook_head_css() { $output="<script> jQuery(window).load(function($) { // Change collaboration to your filter name. var filterby = 'collaboration'; // DONT EDIT BEYOND THIS jQuery('.th-portfolio-row').isotope({ // options itemSelector: '.th-portfolio-item', layoutMode: 'fitRows' }); jQuery('.th-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. }); </script>"; echo $output; }
For earlier versions:
// themo_hook_head_css = to add custom css or JS to your head add_action('wp_head','themo_hook_head_css'); function themo_hook_head_css() { $output="<script> jQuery(document).ready(function($) { // Change collaboration to your filter name. var filterby = 'king'; // DONT EDIT BEYOND THIS jQuery('.rooms-row').isotope({ // options itemSelector: '.rooms-item', layoutMode: 'fitRows' }); jQuery('.rooms-row').isotope({ filter: '.p-'+filterby }); // Filter by specific class jQuery('a[data-filter=\"*\"]').removeClass( 'current'); // Remove All as active jQuery('a[data-filter=\"#themo_rooms_1 .p-'+filterby+'\"]').addClass( 'current'); // Add active state to specific class. }); </script>"; 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 'king' filter. You can see an example of the 'king' filter on this page although we don't have it auto filtering at this time.
http://demo.themovation.com/bellevue/hotel/#themo_rooms_1
:-)