Monthly Archives: March 2012

P

Pinterest has been creating quite a stir in the social networking world over the past months. One of the most beautiful things about the web is that it’s full of overwhelming resources, tutorials and plugins developed by dedicated developers in order to make our lives easier. For people who want to ride the waves of the popularity and create their own Pinterest clone websites. Today we are going to get your own Pinterest site in 4 simple steps.

1. Create the HTML structure of your boxes.
2. Setting the size of your images
3. Adding the like feature to your posts
4. Integrating WordPress theme with your HTML structure
5. Stacking Your posts using jQuery Masonry
6. Overcoming the pagination issues with “infinite scrolling”

1. Create The HTML Structure Of Your Boxes.

The main structure of Pinterest content box is close to this:

<div> <div> <div> <a href=""> <strong>Comment</strong> </a> </div> <div> <a href=""> <strong>Repin</strong> </a> </div> </div>   <a href=""> <img alt="" src=""> </a>  <p>Cairo</p> <p><span>12 repins&nbsp;&nbsp;</span></p>  <div> <a title="Jessica Wozniak" href=""> <img alt="Picture of Jessica Wozniak" src=""> </a>  <a href="">Jessica Wozniak</a>  onto <a href="">Category Name</a> </p> </div> </div>

2. Setting The Size Of Your Images

First we will use WordPress as the CMS and create a photo blog. There are many free high quality WordPress themes out there, below you can find some of the best.

Now we will Add a new post and click on the “Set featured Image” found at the bottom of the right column to add your thumbnail image.

In the index.php file found in your current theme folder, add the following code that will display the thumbnail image we just added into our post.

<?php echo get_the_post_thumbnail(get_the_ID(),'meduim'); ?>

Notice 'medium' is the size of the thumbnail. You can use 'large', 'medium' or 'Thumbnail'.

These sizes determine the maximum dimensions in pixels to use when inserting an image into the body of a post. You can setup the size of the ‘Large’, ‘Medium’ and ‘Thumbnail’ in your WordPress Admin area > Setting > Media > Image sizes

Now you can link the image of the post to it’s original source. To do this, we will add a new 'Custom Field'to our post and we will give it this name 'Source-URL' and in the value of this custom field you can insert the URL of the source of your image.

Back to index.php template file, we need to add the link to the post thumbnail. Now we will use the code below to add the custom field name we added into our post.

<a href="<?php echo get_post_meta($post->ID, 'Source-URL', true); ?>"></a>

3. Adding The Like Feature To Your Posts And Get The Total Number Of Likes

One of the most appealing features of Pinterest is the ability to allow users to like the posts and show the total number of likes per post. We can mimic this using the “I Like This” WordPress plugin. To display the number of likes for every post, add this to your index.php file after activating your plugin:

<?php if(function_exists(getILikeThis)) getILikeThis('get'); ?>

4. Integrating WordPress Theme With Your HTML Structure

We need to display the latest x number of posts on your home page. To do this we will create our own loop using WP_Query to fetch the posts and integrate it with our HTML markup.

<?php $latestPosts = new WP_Query(); $latestPosts->query('showposts=20'); ?> <?php while ($latestPosts->have_posts()) : $latestPosts->the_post(); ?> <div> <div> <div> <strong><?php comments_number('No Comments', '1 Comment', '% Comments' ); ?></strong> </div> <div> <strong><?php if(function_exists(getILikeThis)) getILikeThis('get'); ?></strong> </div> </div>   <a href="<?php echo get_post_meta($post->ID, 'Source-URL', true); ?>"> <img alt="<?php the_title(); ?>" src="<?php echo get_the_post_thumbnail(get_the_ID(),'meduim'); ?>"> </a>  <p><?php the_title(); ?></p> <p><span>12 repins&nbsp;&nbsp;</span></p>  <div> <? echo get_avatar( get_the_author_meta('user_email'), $size = '50'); ?> <?php the_author_link(); ?> onto <?php the_category(', ') ?> </div> </div> <?php endwhile; ?>

5. Stacking Your Posts Using JQuery Masonry

Notice how Pinterest have their posts in a neatly stacked layout, we want to replicate this effect. To acheive this effect, we will use jQuery Masonry plugin to minimize the vertical gaps between the boxes of varying height. Integrating Masonry in WordPress is simple, first add the following to the theme’s functions.phpto enqueue jQuery:

if (!is_admin()) { wp_deregister_script('jquery'); wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false); wp_enqueue_script('jquery'); }

Now add the following to your header.php file:

<?php wp_head(); ?> <script language="javascript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.masonry.min.js"></script>

Notice how we placed the Masonry script after wp_head.

Now that everything is in place, the last thing to do is to add the Masonry function, preferably right after the script call in header.php:

$('#container').masonry({ itemSelector: '.pin-box' });

#container is the name of the wrapper around the posts .pin-box. So now we have all the posts in a neatly stacked layout, same as Pinterest.

6. Overcoming The Pagination Issues With “Infinite Scrolling”

We need to activate the infinite scrolling effect on the blog. To do this we will use Paul Irish jQuery plugin:Infinite Scroll. You can download the WordPress version from here.

Masonry integrates well with auto-paging scripts like Infinite Scroll. We just need to use the appended method to force Masonry to position only the newly appended elements, and skip over all the previous elements that are already in their proper position, thus saving precious milliseconds of page load time.

For more information about integrating Masonry with Infinite Scroll, check out http://masonry.desandro.com/demos/infinite-scroll.html and http://masonry.desandro.com/docs/methods.html#appended