WordPress可筛选网格页面加载时设置selected类

Hey there! Let's work through getting your WordPress filtered grid to load with a specific category selected by default. Here are a few practical methods depending on how your grid is built:

1. Simulate a Click on the Target Category (Most Universal) #

If your grid relies on clicking the category links to trigger filtering, we can mimic that click when the page finishes loading. Add this JavaScript to your theme's functions.php (via a wp_enqueue_script call) or a custom JS plugin:

document.addEventListener('DOMContentLoaded', function() {
  // Replace ".cat3" with the data-option-value of your target category
  const targetCategory = document.querySelector('a[data-option-value=".cat3"]');
  
  if (targetCategory) {
    // Add the 'selected' class first to match the active state
    targetCategory.classList.add('selected');
    // Trigger the click event to activate the filter logic
    targetCategory.click();
  }
});

If your site uses jQuery, you can use this version instead:

jQuery(document).ready(function($) {
  const $targetLink = $('a[data-option-value=".cat3"]');
  
  if ($targetLink.length) {
    $targetLink.addClass('selected').trigger('click');
  }
});

2. Adjust the Grid's Initialization Settings (If Plugin Supports It) #

Many grid plugins (like Isotope or MixItUp) let you set a default filter directly in their initialization code. If your grid is built on one of these libraries, tweak the setup like this:

For Isotope: #

jQuery(document).ready(function($) {
  // Initialize the grid with your target filter
  $('.your-grid-container').isotope({
    itemSelector: '.grid-item',
    filter: '.cat3' // Match your target category's class
  });
  
  // Add the 'selected' class to the corresponding category button
  $('a[data-option-value=".cat3"]').addClass('selected');
});

For MixItUp: #

jQuery(document).ready(function($) {
  $('.your-grid-container').mixItUp({
    load: {
      filter: '.cat3' // Set default filter here
    }
  });
  
  $('a[data-option-value=".cat3"]').addClass('selected');
});

3. Server-Side Adjustments (For PHP-Savvy Users) #

If your grid is generated via WordPress queries, you can set the default filter and active class directly in your template code:

First, update the category menu to mark your target as selected:

<?php
// Replace with your taxonomy slug and default category slug
$taxonomy = 'your-taxonomy-slug';
$default_cat_slug = 'portfolio-1';
$categories = get_terms(array('taxonomy' => $taxonomy));

foreach ($categories as $cat) {
  // Add 'selected' class if this is your default category
  $selected_class = ($cat->slug === $default_cat_slug) ? 'selected' : '';
  // Match your data-option-value format (e.g., .cat3 for term ID 3)
  $data_value = '.cat' . $cat->term_id;
  
  echo '<a data-option-value="' . esc_attr($data_value) . '" class="' . esc_attr($selected_class) . '" href="#">
          <span>' . esc_html($cat->name) . '</span>
          <span class="num">' . $cat->count . '</span>
        </a>';
}
?>

Then, modify the post query to only load items from your default category:

<?php
$grid_query = new WP_Query(array(
  'post_type' => 'your-post-type-slug', // Replace with your post type
  'tax_query' => array(
    array(
      'taxonomy' => $taxonomy,
      'field'    => 'slug',
      'terms'    => $default_cat_slug,
    ),
  ),
));

// Loop through the query to render grid items
if ($grid_query->have_posts()) {
  while ($grid_query->have_posts()) {
    $grid_query->the_post();
    // Your grid item template here
  }
  wp_reset_postdata();
}
?>

Quick Notes to Keep in Mind: #

• Make sure your JavaScript runs after the grid's own scripts load (use wp_enqueue_script dependencies if adding via PHP)
• Double-check that your data-option-value and category class names match exactly
• Clear your browser cache after making changes to avoid old code interfering

内容的提问来源于stack exchange，提问作者Zack Bluem