Isotope WP Template Code

front-page.php

get_header(); ?>

<div id="primary" class="content-area">
	<main id="main" class="site-main" role="main">

		<!-- ******
		1. Add this HTML to the template where you want the filtering bar to display.
		****** -->
		<ul id="filters">
			<li><a href="#" data-filter="*" class="selected">Everything</a></li>
		  <?php
		  	// Get a list of all categories and print their links
		  	$categories = get_categories();
		  	foreach ($categories as $cat): ?>
		  		<li><a href="#" data-filter=".<?php echo $cat->slug ?>"><?php echo $cat->cat_name ?></a></li>
		  <?php endforeach ?>
		</ul>
		
		
		<!-- ******
		2. Add this HTML where you want the filtered posts to display
		****** -->
		<div class="grid" id="isotope-list">
			<?php
		
			// Get all posts and the listed post types (the -1 says "all")
			$query = new WP_Query( array(
				'post_type' => array( 'post', 'resource', 'project'),
				'posts_per_page' => -1
			));
		
			while ( $query->have_posts() ) : $query->the_post();
				// Get the categories for each post to print as classes
		   	$termsArray = get_the_terms( $post->ID, "category" );
		    $termsString = "";
		    foreach ( $termsArray as $term ) {
		      $termsString .= $term->slug.' ';
		    } ?>
		
		    <!-- ******
		    3. Customize this markup to display the HTML for each post (or card).
		    ****** -->
		    <?php // The categories and post type are printed as classes ?>
				<div class="item <?php echo $termsString . $post->post_type ?>">
					<h3><?php the_title(); ?></h3>
				</div>
		
		<?php	endwhile; // End of the loop.
			?>
		</div>
	<!-- End super duper important stuff -->
	
	</main><!-- #main -->
</div>

<?php
get_sidebar();
get_footer();