How to Filterable Portfolio Dynamic in WordPress

Today discuss an important for WordPress theme, “How to Filterable Portfolio Dynamic in WordPress like Mixitup”. Most of the WordPress theme must have portfolio items so portfolio is very important to know how to dynamic in WordPress. In this tune everyone can easily dynamic portfolio like mixitup in WordPress.

To dynamic portfolio items must need to register custom post and custom taxonomies. If not register register custom post and custom taxonomies see the tune name “How to Register a Custom Post and Custom Taxonomies”. In the registering custom post and custom taxonomy get a post type like register_post_type( ‘portfolio-items’) and register_taxonomy( ‘portfolio_cat’, ‘portfolio-items’). The ‘portfolio-items’ and the ‘portfolio_cat’, need to dynamic filterable portfolio.

Initially the portfolio HTML may look like this:

<div class="portfolio">
    <div class="portfolio_filter">
        <ul>
            <li class="filter" data-filter="all">All</li>
            <li class="filter" data-filter="website">Website</li>
            <li class="filter" data-filter="photography">PhotoGraphy</li>
            <li class="filter" data-filter="video">Video</li>
            <li class="filter" data-filter="audio">Audio</li>
            <li class="filter" data-filter="others">Others</li>
        </ul>
    </div>
    
    <div class="portfolio_contents">
        <ul id="portfolio_filter_action">
            <li class="mix website photography">
                <div class="single_portfolio">
                    <img src="img/graphic-01.jpg" alt="" />
                </div>
            </li>
            <li class="mix photography">
                <div class="single_portfolio">
                    <img src="img/graphic-02.jpg" alt="" />
                </div>
            </li>
            <li class="mix photography">
                <div class="single_portfolio">
                    <img src="img/graphic-03.jpg" alt="" />
                </div>
            </li>
            <li class="mix video">
                <div class="single_portfolio">
                    <img src="img/graphic-04.jpg" alt="" />
                </div>
            </li>
            <li class="mix video">
                <div class="single_portfolio">
                    <img src="img/graphic-05.jpg" alt="" />
                </div>
            </li>
            <li class="mix others">
                <div class="single_portfolio">
                    <img src="img/graphic-06.jpg" alt="" />
                </div>
            </li>
            <li class="mix video">
                <div class="single_portfolio">
                    <img src="img/graphic-07.jpg" alt="" />
                </div>
            </li>
            <li class="mix website">
                <div class="single_portfolio">
                    <img src="img/graphic-08.jpg" alt="" />
                </div>
            </li>
            <li class="mix video">
                <div class="single_portfolio">
                    <img src="img/graphic-09.jpg" alt="" />
                </div>
            </li>
            <li class="mix audio">
                <div class="single_portfolio">
                    <img src="img/graphic-10.jpg" alt="" />
                </div>
            </li>
            <li class="mix others">
                <div class="single_portfolio">
                    <img src="img/graphic-11.jpg" alt="" />
                </div>
            </li>
            <li class="mix audio">
                <div class="single_portfolio">
                    <img src="img/graphic-12.jpg" alt="" />
                </div>
            </li>                                
        </ul>
    </div>
</div>

Here is two portion one for filter “portfolio menu items” which populate from custom taxonomy and another portion is “portfolio content items”. First dynamic menu section:

<?php
     $terms = get_terms("portfolio_cat");
     $count = count($terms);
     echo '<div class="portfolio_filter">
    <ul>';
     echo '<li class="filter" data-filter="all">All</li>';
     if ( $count > 0 ){
         
            foreach ( $terms as $term ) {
                 
                $termname = strtolower($term->name);
                $termname = str_replace(' ', '-', $termname);
                echo '<li class="filter" data-filter="'.$termname.'">'.$term->name.'</li>';
                
            }
     }
     echo "</ul></div>";
?>

Here change “portfolio_cat” by using your registering custom taxonomy and start echo <div class=”portfolio_filter”><ul> this two tag, this also end in last echo “</ul></div>”. Here also echo ‘<li class=”filter” data-filter=”all”>All</li>’; and echo ‘<li class=”filter” data-filter=”‘.$termname.'”>’.$term->name.'</li>’; If think this two echo line here used ‘.$term->name.’ between <li></li> tag for category name and used “‘.$termname.'” in data-filter=”” for the taxonomy slug.

Now going to dynamic portfolio content section see below code:

<?php
$loop = new WP_Query(array('post_type' => 'portfolio-items', 'posts_per_page' => -1));
$count =0;
?>


<div class="portfolio_contents">
<ul id="portfolio_filter_action">

<?php if ( $loop ) :

while ( $loop->have_posts() ) : $loop->the_post(); ?>

<?php
$terms = get_the_terms( $post->ID, 'portfolio_cat' );

if ( $terms && ! is_wp_error( $terms ) ) :
$links = array();

foreach ( $terms as $term )
{
$links[] = $term->name;
}
$links = str_replace(' ', '-', $links);
$tax = join( " ", $links );
else :
$tax = '';
endif;
?>

<?php $infos = get_post_custom_values('_url'); ?>


<li class="mix  <?php echo strtolower($tax); ?>">
<div class="single_portfolio">
<?php the_post_thumbnail( array(400, 160) ); ?>
<div class="color_overlay"></div>
<div class="portfolio_hover">
<h2><?php the_title();?></h2>
<a href=""><i class="fa fa-search"></i></a>
<a href=""><i class="fa fa-link"></i></a>
</div>
</div>
</li>

<?php endwhile; else: ?>

<li class="error-not-found">Sorry, no portfolio entries for while.</li>

<?php endif; ?>

</ul>
</div>

In first line change ‘portfolio-items’ by using you registering custom post type and use ‘posts_per_page’ to show total post. Here also change ‘portfolio_cat’ by using your registering custom taxonomy same as previous one. In <li class=”mix <?php echo strtolower($tax); ?>”> this tag used <?php echo strtolower($tax); ?> for getting category name add as class dynamically.

Now can easily dynamic image, title, content & other thing which your need. Hopefully this working good for all portfolio dynamic. Fully the code are given below.

<div class="portfolio">

<?php
$terms = get_terms("portfolio_cat");
$count = count($terms);
echo '<div class="portfolio_filter">
<ul>';
echo '<li class="filter" data-filter="all">All</li>';
if ( $count > 0 ){

foreach ( $terms as $term ) {

$termname = strtolower($term->name);
$termname = str_replace(' ', '-', $termname);
echo '<li class="filter" data-filter="'.$termname.'">'.$term->name.'</li>';

}
}
echo "</ul></div>";
?>

<?php
$loop = new WP_Query(array('post_type' => 'portfolio-items', 'posts_per_page' => -1));
$count =0;
?>


<div class="portfolio_contents">
<ul id="portfolio_filter_action">

<?php if ( $loop ) :

while ( $loop->have_posts() ) : $loop->the_post(); ?>

<?php
$terms = get_the_terms( $post->ID, 'portfolio_cat' );

if ( $terms && ! is_wp_error( $terms ) ) :
$links = array();

foreach ( $terms as $term )
{
$links[] = $term->name;
}
$links = str_replace(' ', '-', $links);
$tax = join( " ", $links );
else :
$tax = '';
endif;
?>

<?php $infos = get_post_custom_values('_url'); ?>


<li class="mix  <?php echo strtolower($tax); ?>">
<div class="single_portfolio">
<?php the_post_thumbnail( array(400, 160) ); ?>
<div class="color_overlay"></div>
<div class="portfolio_hover">
<h2><?php the_title();?></h2>
<a href=""><i class="fa fa-search"></i></a>
<a href=""><i class="fa fa-link"></i></a>
</div>
</div>
</li>

<?php endwhile; else: ?>

<li class="error-not-found">Sorry, no portfolio entries for while.</li>

<?php endif; ?>

</ul>
</div>
</div>

How to Filterable Portfolio Dynamic in WordPress

Filterable Portfolio