Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
The template for displaying cpt with isotope, bootstrap 4 and acf
<?php
/**
* The template for displaying cpt with isotope, bootstrap 4 and acf
* Template Name: Custom Isotope
*
* @package wordpress
*/
get_header();
?>
<section id="project-header">
<h1 class="text-center">Projects</h1>
</section>
<section id="word-filters">
<div class="container">
<div class="row justify-content-start justify-content-md-around">
<?php
$terms = get_terms( array (
'taxonomy' => 'project-category',
'hide_empty' => false,
));
?>
<?php $term = get_queried_object(); ?>
<div class="col-6 col-md-3 col-lg-2">
<button onclick="" class="text-uppercase filter-button" data-filter-by="*">All</button>
</div>
<?php foreach ($terms as $term): ?>
<?php
$name = $term->name;
$slug = $term->slug;
$colour = get_field('colour', $term);
?>
<div class="col-6 col-md-3 col-lg-2">
<button onclick="" class="text-uppercase filter-button" data-filter-by=".<?php echo $slug; ?>" style="background-color: <?php echo $colour; ?>;"><?php echo $name; ?></button>
</div>
<?php endforeach; ?>
</div>
</div>
</section>
<section id="project-posts">
<div class="container">
<div class="row grid">
<?php
$args = array(
'posts_per_page' => -1,
'orderby' => 'menu_order',
'order' => 'ASC',
'post_type' => 'projects',
'post_status' => 'publish'
);
$projects = get_posts( $args ); ?>
<?php $term = get_queried_object(); ?>
<?php foreach ( $projects as $post ) : setup_postdata( $post ); ?>
<?php
$title = get_the_title();
$excerpt = get_the_excerpt();
$pageLink = get_the_permalink();
$category = get_the_terms( $post->ID, 'project-category' );
$colour = get_field('colour', $category[0]);
?>
<div class="col-12 col-md-6 col-lg-4 grid-item <?php echo $category[0]->slug; ?>">
<a class="project-card-link" href="<?php echo $pageLink; ?>">
<div class="project-card">
<?php the_post_thumbnail(); ?>
<h2 class="text-uppercase"><?php echo $title; ?></h2>
<div class="excerpt-box">
<p><?php echo $excerpt; ?></p>
</div>
<div class="date-box"><?php the_time( 'jS F Y' ); ?></div>
<div class="cat-box category" style="background-color: <?php echo $colour; ?>;"><?php echo $category[0]->name;?></div>
</div>
</a>
</div>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
</div>
</div>
</section>
<?php
get_footer();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.