Masonry is a dynamic grid layout plugin for jQuery. Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.
Here, is the steps to develop Masonry Slider which slides the boxes using jQuery in WordPress.
Read: To get Last auto increment id in WordPress
Step 1: First of all include js and css files in a header.For that place below code into function.php
1 2 3 4 5 6 7 8 9 10 11 | add_action('wp_head','include_head'); // Replace css and js path with desired one function include_head(){ ?> <script type="text/javascript" src="demo.js"></script> <link type="text/css" href="css/demo.css" media="screen" charset="utf-8" rel="stylesheet" /> <link type="text/css" href="fancymoves.css" media="screen" charset="utf-8" rel="stylesheet" /> <?php } |
Step 2: place below line of code into function.php which will generate custom post type for slider.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | /*action hook to generate custom post type*/ <?php add_action( 'init', 'register_Masonry' ); function register_Masonry() { $labels = array( 'name' => _x('Masonry Slider', 'Masonry_Slider'), 'singular_name' => _x('Masonry Slider Item', 'post type singular name'), 'add_new_item' => __('Add New Masonry Slider Item'), 'edit_item' => __('Edit Masonry Slider Item'), 'new_item' => __('New Masonry Slider Item'), 'view_item' => __('View Masonry Slider Item'), 'search_items' => __('Search Masonry Slider'), 'not_found' => __('Nothing found'), 'not_found_in_trash' => __('Nothing found in Trash'), 'parent_item_colon' => '' ); $args = array( 'labels' => $labels, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'query_var' => true, 'menu_icon' => plugins_url('/images/', __FILE__) . 'masonry_menu_icon.png', 'rewrite' => array('slug'=>'videos'), 'capability_type' => 'post', 'hierarchical' => false, 'menu_position' => null, ); register_post_type( 'masonry' , $args ); } ?> |
Above Code is to generate custom post type to create own categories, post and images for a slider.You can separate images for slider by category.
Step 3: Now , It’s turn to write code for displaying a slider into front-end. You can write below code to the page you want to display.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <?php echo '<div id="slider-one">'; foreach ($cats as $cat) : $args = array( 'category__in' => array($cat->term_id), 'post_type' => 'Masonry_Slider' ); $my_query = new WP_Query($args); if ($my_query->have_posts()) : echo '<div>'; echo '<h2 id="cat_title_container_'.$cat->term_id.'" style="display:none">'.$cat->name.'</h2>'; query_posts( 'post_type=our_work&order=ASC&orderby=ID'); while ($my_query->have_posts()) : $my_query->the_post(); $cls =get_post_meta($my_query->post->ID,'img_type',true); $attachment = get_posts( array( 'post_type' => 'attachment', 'posts_per_page' => 1, 'post_parent' => $my_query->post->ID, 'exclude' => get_post_thumbnail_id() ) ); ?> <div class="box photo <?php echo $cls;?>" id="<?php echo $post->ID;?>" "> <?php the_post_thumbnail(); ?> </div> <?php endwhile; ?> </div> </div> <?php endif; endforeach; ?> |
Step 4:Next is to place JavaScript code for calling masonry which removes gap between images.
1 2 3 4 5 6 7 8 9 10 11 | $(this).masonry({ itemSelector : '.box', isAnimated: true, isFitWidth: true, appendCallback: true }); $(this).masonry('reload'); }); |
Above code is rearrange image layout so which remove the gap between images whether is vertical or horizontal.
Step 5: Last but not the least, This step is for css so your slider looks proper.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .box{ width:155px; height:155px; } .box.w { width: 315px; } .box.h { height: 315px; } .box.wh { width: 315px; height: 315px; } |
You need to change width and height of CSS as per your images in slider, As an example, In .box w containing width only because we have landscape image means width of images different.
According to css, You need to create one custom field img_type and add value like w for landscape image, h for portrait image and wh for square box.
That’s it. your masonry slider is ready. Now you can view in frontend ?.
Hope this helps someone else out.As always, thanks for reading. Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.
