How to dynamic mixitup or Isotope in wordpress step by step with video tutorial
Md Abul Bashar | 9,638 views | December 28, 2015 | Tips And Tricks,WordPress Themes Development | 20 | 11:11 AM |
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
You have to enjoy this articel? Don't forget subscribes this site.
If you want to get our update article, then please subscribe this site.
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
You can use src code
<?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
You can Watch my Video tutorials, you can see below the post.
If you want you can watch this mixitup/isotupe dynamic in WordPress Video tutorial https://www.youtube.com/watch?v=OlwA1_WiPmo&t=0s
This video link is not working pls repost this video if possible??
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.
video er shate portfolio jekane show hobe oikhaner code er shate source code er mil nei. tai ami image show korate parchi na
Warning: Invalid argument supplied for foreach() in line…..
This line is as follows: $portfolio_tax_name): ?>
What am i doing wrong?
You can check your code, maybe you will mistake any code.
If you want you can watch this mixitup/isotupe dynamic in WordPress Video tutorial https://www.youtube.com/watch?v=OlwA1_WiPmo&t=0s
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.
I forget to add stack link
here is the link
http://stackoverflow.com/questions/38967092/dynamic-mixitup-plugin-in-wordpress
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
Or you can contact via skype or email.
ok can I have your email address ?
Already i did send email, just check your email 🙂
Thanks.
can I have your email address?
Sure, admin@wp-tutorials.com
If you want you can watch this mixitup/isotupe dynamic in WordPress Video tutorial https://www.youtube.com/watch?v=OlwA1_WiPmo&t=0s