How to dynamic mixitup or Isotope in wordpress step by step with video tutorial

Shortlink:

Hi today i will tech you how to dynamic mixitup or isotope for WordPress.

How to Markup with dynamic mixitup step by step

Mix It Up Dynamic

Step# 01: Register Custom Post

# Register Custom Post
function wp_tutorials_post() {
    register_post_type( 'portfolio',
        array(
            'labels' => array(
                'name' => __( 'Portfolio' ),
                'singular_name' => __( 'Portfolio' ),
                'add_new' => __( 'Add New' ),
                'add_new_item' => __( 'Add New Portfolio' ),
                'edit_item' => __( 'Edit Portfolio' ),
                'new_item' => __( 'New Portfolio' ),
                'view_item' => __('portfolio'),
                'not_found' => __( 'Sorry, we couldnt find the Portfolio you are looking for.' )
            ),
        'public' => true,
        'publicly_queryable' => true,
        'exclude_from_search' => true,
        'has_archive' => false,
        'hierarchical' => false, 
        'capability_type' => 'page',
        'rewrite' => array( 'slug' => 'portfolio' ),
        'supports' => array( 'title', 'editor', 'custom-fields','thumbnail')
        )
    );
}
add_action( 'init', 'wp_tutorials_post' );

 

Step # 02: Register Custom Taxonomy For Portfolio

# Register Custom Taxonomy For Portfolio

function wp_tutorials_post_taxonomy() {
    register_taxonomy(
        'portfolio_category',  //The name of the taxonomy. Name should be in slug form (must not contain capital letters or spaces).
        'portfolio',                  //post type name
        array(
            'hierarchical'          => true,
            'label'                         => 'Portfolio Category',  //Display name
            'query_var'             => true,
            'show_admin_column'             => true,
            'rewrite'                       => array(
                'slug'                  => 'portfolio-category', // This controls the base slug that will display before each term
                'with_front'    => true // Don't display the category base before
                )
            )
    );
}
add_action( 'init', 'wp_tutorials_post_taxonomy');

 

Step # 03: Register Shortcode

# Dynamic Portfolio With Shortcode

function portfolio_shortcode($atts){
    extract( shortcode_atts( array(
        'category' => ''
    ), $atts, '' ) );
    
    $q = new WP_Query(
        array('posts_per_page' => 50, 'post_type' => 'portfolios')
        );        
        

//Portfolio taxanomy query
    global $paged;
    global $post;
    $args = array(    
        'post_type' => 'portfolios',
        'paged' => $paged,
        'posts_per_page' => -1,
    );

    $portfolio = new WP_Query($args);
    if(is_array($portfolio->posts) && !empty($portfolio->posts)) {
        foreach($portfolio->posts as $gallery_post) {
            $post_taxs = wp_get_post_terms($gallery_post->ID, 'portfolio_category', array("fields" => "all"));
            if(is_array($post_taxs) && !empty($post_taxs)) {
                foreach($post_taxs as $post_tax) {
                    $portfolio_taxs[$post_tax->slug] = $post_tax->name;
                }
            }
        }
    }
?>        

        <!--Category Filter-->
        
        <div class="portfolio_button_area fix">
            <button class="filter portfolio_button active" data-filter="all">Show All</button>
            <?php foreach($portfolio_taxs as $portfolio_tax_slug => $portfolio_tax_name): ?>
                <button class="filter portfolio_button" data-filter=".<?php echo $portfolio_tax_slug; ?>"><?php echo $portfolio_tax_name; ?></button>
            <?php endforeach; ?>
        </div>        
        <!--End-->

        

<?php

    $list = '<div id="Container">';
    while($q->have_posts()) : $q->the_post();
        $idd = get_the_ID();
        //Get Texanmy class        
        $item_classes = '';
        $item_cats = get_the_terms($post->ID, 'portfolio_category');
        if($item_cats):
        foreach($item_cats as $item_cat) {
            $item_classes .= $item_cat->slug . ' ';
        }
        endif;
            
        $single_link = 
        $list .= '    

                <div class="mix '.$item_classes.'" >'.get_the_content().'</div>        
        ';        
    endwhile;
    $list.= '</div>';
    wp_reset_query();
    return $list;
}
add_shortcode('portfolio', 'portfolio_shortcode');

 

if you have any problem or show any error then you will create one new .php file then copy below all code then past in your new php file. then include you file in functions.php file, example: if you create protfolio.php file then include in functions.php file use this code

include_once( 'protfolio.php' );

 

and select all code and past in protfolio.php file.

<?php 


# Dynamic Portfolio With Shortcode

function portfolio_shortcode($atts){
    extract( shortcode_atts( array(
        'category' => ''
    ), $atts, '' ) );
    
    $q = new WP_Query(
        array('posts_per_page' => 50, 'post_type' => 'portfolios')
        );        
        

//Portfolio taxanomy query
    global $paged;
    global $post;
    $args = array(    
        'post_type' => 'portfolios',
        'paged' => $paged,
        'posts_per_page' => -1,
    );

    $portfolio = new WP_Query($args);
    if(is_array($portfolio->posts) && !empty($portfolio->posts)) {
        foreach($portfolio->posts as $gallery_post) {
            $post_taxs = wp_get_post_terms($gallery_post->ID, 'portfolio_category', array("fields" => "all"));
            if(is_array($post_taxs) && !empty($post_taxs)) {
                foreach($post_taxs as $post_tax) {
                    $portfolio_taxs[$post_tax->slug] = $post_tax->name;
                }
            }
        }
    }
?>        

        <!--Category Filter-->
        
        <div class="portfolio_button_area fix">
            <button class="filter portfolio_button active" data-filter="all">Show All</button>
            <?php foreach($portfolio_taxs as $portfolio_tax_slug => $portfolio_tax_name): ?>
                <button class="filter portfolio_button" data-filter=".<?php echo $portfolio_tax_slug; ?>"><?php echo $portfolio_tax_name; ?></button>
            <?php endforeach; ?>
        </div>        
        <!--End-->

        

<?php

    $list = '<div id="Container">';
    while($q->have_posts()) : $q->the_post();
        $idd = get_the_ID();
        //Get Texanmy class        
        $item_classes = '';
        $item_cats = get_the_terms($post->ID, 'portfolio_category');
        if($item_cats):
        foreach($item_cats as $item_cat) {
            $item_classes .= $item_cat->slug . ' ';
        }
        endif;
            
        $single_link = 
        $list .= '    

                <div class="mix '.$item_classes.'" >'.get_the_content().'</div>        
        ';        
    endwhile;
    $list.= '</div>';
    wp_reset_query();
    return $list;
}
add_shortcode('portfolio', 'portfolio_shortcode');




?>

 

 

Now you shotcode is “portfolio”, so input your shortcode in your location, where are you want to show your portfolio, if you want to show any dynamic pages then add new pages and use only [portfolio] this code then you will publish the pages. or if you want to show any template then input blow code

<?php echo do_shortcode('[portfolio]');?>

Then you will see custom post name of portfolio in your WordPress dashboard. then you will add new post, then you will see your post in mixitup or isotope.

mixitup and isotope dynamic is same way. not deferment way.

 

If you want to watch video tutorials? then you can watch below

Or Part by Part

Part One

Part Two

Part Three

 

20 thoughts on “How to dynamic mixitup or Isotope in wordpress step by step with video tutorial”

  1. syed says:

    dynamicly content ashe amar kintu image ashe na. ami jodi .get_the_content() ar jaigai the_post_thumbanail() dei tahole image ahse but filtering hoye image show kore na. still hoye thakey

    1. Md Abul Bashar says:

      You can use src code

      $slider_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'slider-image' );
      
  2. syed says:

    <?php

    $list = '’;
    while($q->have_posts()) : $q->the_post();
    $idd = get_the_ID();
    //Get Texanmy class
    $item_classes = ”;
    $item_cats = get_the_terms($post->ID, ‘portfolio_category’);
    if($item_cats):
    foreach($item_cats as $item_cat) {
    $item_classes .= $item_cat->slug . ‘ ‘;
    }
    endif;

    $single_link =
    $list .= ‘

    ‘.get_the_content().’
    ‘;
    endwhile;
    $list.= ”;
    wp_reset_query();
    return $list;
    }
    add_shortcode(‘portfolio’, ‘portfolio_shortcode’);

    ami apnar ai code ta use korechi bhaiya. pls ektu details bolben ki kutai apnar ai matro post kora code ti use korbo

    1. Md Abul Bashar says:

      You can Watch my Video tutorials, you can see below the post.

    2. Md Abul Bashar says:

      If you want you can watch this mixitup/isotupe dynamic in WordPress Video tutorial https://www.youtube.com/watch?v=OlwA1_WiPmo&t=0s

      1. Balram says:

        This video link is not working pls repost this video if possible??

        1. Md Abul Bashar says:

          Thanks for comment : “YouTube account associated with this video has been terminated. ”
          Now you can watch this tutorial https://www.youtube.com/watch?v=QjecEtKHEQ0

          I will upload that video As soon as possible on new channel.

  3. syed says:

    video er shate portfolio jekane show hobe oikhaner code er shate source code er mil nei. tai ami image show korate parchi na

  4. Danny says:

    Warning: Invalid argument supplied for foreach() in line…..

    This line is as follows: $portfolio_tax_name): ?>

    What am i doing wrong?

    1. Md Abul Bashar says:

      You can check your code, maybe you will mistake any code.

    2. Md Abul Bashar says:

      If you want you can watch this mixitup/isotupe dynamic in WordPress Video tutorial https://www.youtube.com/watch?v=OlwA1_WiPmo&t=0s

  5. mimi says:

    I use your tutorial but I have some problem, I asked it in stackoverflow but no one answer me, instead of show my category it show ‘array’ and I cant find why this happening ?

    mind me ask you to see my problem in stack? I added extra details in stack.

      1. Md Abul Bashar says:

        Thanks for comment, can you share your all code part by part on pastebin.com ? then i can good understand. then i will try to help you.

        THanks

      2. Md Abul Bashar says:

        Or you can contact via skype or email.

        1. mimi says:

          ok can I have your email address ?

          1. Md Abul Bashar says:

            Already i did send email, just check your email 🙂

            Thanks.

  6. mimi says:

    can I have your email address?

    1. Md Abul Bashar says:

      If you want you can watch this mixitup/isotupe dynamic in WordPress Video tutorial https://www.youtube.com/watch?v=OlwA1_WiPmo&t=0s

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!




%d bloggers like this: