Use Mosaic jQuery plugin for your WordPress Sticky posts

My website is developed using WordPress. On my website’s home page, I have a section ‘What’s New’ to show the latest two projects I have been working on. I do this by making the last two added portfolio posts sticky. To complete the design I’ve used the Mosaic jQuery plugin to display these two Sticky Posts. This blog post show a step-by-step how to integrate the Mosaic jQuery plugin with WordPress Sticky posts.

1. Add Mosaic jQuery plugin to your WordPress theme

Download the Mosaic jQuery plugin from Build Internet! by One Mighty Roar. WordPress is packaged with the jQuery library. You need to add jQuery with WordPress using your theme’s function.php file and register/enqueue any new scripts accordingly. Make sure to read Dear theme developers, this is how you add scripts in WordPress themes. This tutorial will show you how to load scripts in a WordPress  theme the right way!

2. Set up Thumbnail Image for the Featured Image

Part of the web design, I’ve decided beforehand about a specific size I want the images to be, that display in the Sticky Posts. This is different to the image size I use in the actual post. To accomplish this, I set up my own custom thumbnail size for the Sticky posts. The image for the Sticky post will be added by setting it as a Featured Image in the new post admin.

Open the function.php file in your WordPress theme and add the following.

// Feature Images (Post Thumbnails)

add_theme_support('post-thumbnails');

add_image_size('feature_thumb', 572, 260, true);

3. Add Custom Loop for the Sticky Post

In this example the custom loop for the sticky posts go in the custom home page template for my WordPress website. It can be used in any page template.

Custom loop for the posts:

<?php if(is_home() && !is_paged()) { ?>

/* Code for the Sticky Post will go in here */

<?php while (have_posts()) : the_post(); ?>

/* Mosaic plugin use following classes .mosaic-block .bar in the <div> */
 <div class="mosaic-block bar">
 <a href="<?php the_permalink() ?>" rel="bookmark">
/* Use the .details class to style the meta information */ 
 <div class="details">
/* Meta information for the title and short description that will be added by using Custom Fields */
 <h4><?php echo get_post_meta($post->ID, 'Feature Title', true); ?></h4>
 <p><?php echo get_post_meta($post->ID, 'Feature Teaser', true); ?></p>
 </div><!-- .details -->
 </a>

/* The .mosaic-backdrop class is used by Mosaic plugin */
 <figure class="mosaic-backdrop">
 <?php the_post_thumbnail("ttrust_one_fourth_short", array('class' => 'thumb', 'alt' => ''.get_the_title().'', 'title' => ''.get_the_title().'')); ?>
 </figure>

 </div><!--.bar-->
 <?php endwhile; ?>

<?php wp_reset_query(); ?>
<?php } ?>

The bit to make your post sticky:

After creating the custom loop in the custom page template (in this case my home page), it is ready to add the following code after the first line of the loop.

<?php if(is_home() && !is_paged()) { ?>
/* Add sticky posts code after the above line */
<?php /* Get all sticky posts */ $sticky = get_option( 'sticky_posts' );
/* Sort the stickies with the newest ones at the top */ 
rsort( $sticky );
/* Get the 2 newest stickies (change 2 for a different number) */ 
$sticky = array_slice( $sticky, 0, 2 );
/* Query sticky posts */ 
query_posts( array( 'post__in' => $sticky, 'caller_get_posts' => 1 ) ); ?>

4. Preparing the Sticky Post

After adding your new WordPress post, go to Featured Image, to set the image that will be used in the Sticky Post. This can be found in the right column towards the bottom of the post editor in your WordPress admin area.  Add the new image by setting an uploaded image as Featured Image.

Use Custom Fields for the Heading and Description displayed in the Sticky Post

To display Custom Fields in you WordPress admin area, click on the Screen Options tab at the top of the screen and tick Custom Fields. Add a heading and a short description for your Sticky Post via the Custom Fields that will now display underneath the new post text area.

After the initial set up of the Custom Fields in the custom loop, use the same names to add the new Custom Fields. In this case it is Feature Title for the heading and Feature Teaser for the description.

Last but not least, make the post sticky! This can be enabled and disabled on any posts any time after a new post has been published. You can find the tick box in the Publish panel on the right of the new post’s admin area under Visibility: Public. See image on the right.