Resource is a custom post here.
This code provides a dynamic resource filtering and display feature for a WordPress site using AJAX, PHP, and JavaScript. The code includes a filter section where users can filter resources by category, an AJAX script to update the displayed resources based on selected filters without page reload, and basic CSS styling for a responsive layout. Initially, all resources are displayed, and the list updates instantly as the user selects categories.
<div class="resource-wrapper"> <!-- Filter Section --> <div class="resource-filter"> <h3>Asset Type</h3> <ul><?php $categories=get_terms(array('taxonomy'=>'resource-category','hide_empty'=>false,));if(!empty($categories)){foreach($categories as $category){echo '<li><label><input type="checkbox" class="resource-category" value="'.esc_attr($category->slug).'"> '.esc_html($category->name).'</label></li>';}}else{echo 'No categories found.';} ?></ul> </div> <!-- Resources Display Section --> <div id="resource-content"> <!-- Default Content: Display all resources initially --> <?php $args=array('post_type'=>'resource','posts_per_page'=>-1);$resource_query=new WP_Query($args);if($resource_query->have_posts()):while($resource_query->have_posts()):$resource_query->the_post(); ?><div class="resource-item"><div class="resource-thumbnail"><?php the_post_thumbnail('medium'); ?></div><h2><?php the_title(); ?></h2><p><?php the_excerpt(); ?></p><span class="resource-date"><?php echo get_the_date(); ?></span><a href="<?php the_permalink(); ?>">Read More</a></div><?php endwhile;else:echo 'No resources found.';endif;wp_reset_postdata(); ?> </div> </div> <!-- Include AJAX script to dynamically filter resources -->
<script>jQuery(document).ready(function($){function filterResources(){let e=[];$('.resource-category:checked').each(function(){e.push($(this).val())});$.ajax({url:"<?php echo admin_url('admin-ajax.php'); ?>",type:"POST",data:{action:'filter_resources',categories:e},success:function(e){$('#resource-content').html(e)}})}$('.resource-category').on('change',filterResources)});</script> <!-- Add CSS styling -->
<style>.resource-filter li label,label{cursor:pointer}.resource-wrapper{display:flex;margin-top:10%}.resource-filter{width:20%;margin-right:2%}.resource-filter ul{list-style:none;padding:0}.resource-filter li{margin-bottom:10px}#resource-content{width:78%;display:flex;flex-wrap:wrap}.resource-item{width:30%;margin-bottom:20px;margin-right:2%;padding:10px;border:1px solid #ddd;background-color:#f9f9f9}.resource-item h2{font-size:18px;font-weight:700}.resource-item a{display:inline-block;margin-top:10px;color:#0073aa}.resource-item .resource-date{font-size:14px;color:#999}.resource-thumbnail img{width:100%}input[type=checkbox],input[type=checkbox]:active,input[type=checkbox]:focus,input[type=checkbox]:focus-within,input[type=checkbox]:hover{display:inline-block!important;visibility:visible!important;width:20px;height:20px;margin:10px;outline:auto!important;appearance:auto!important}label{display:flex;align-items:center;font-size:16px}</style>