Get your Pinterest Site in 6 Simple Steps

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 class="pin-box">      
        <div class="actions">
            <div class="right">
                <a class="comment" href="">
                    <strong>Comment</strong>
                </a>
            </div>
            <div class="left">
                <a class="repin" href="">
                    <strong>Repin</strong>
                </a>
            </div>               
        </div>   
        
        <a class="PinImage" href="">
             <img class="PinImageImg" alt="" src="">
        </a>

        <p class="description">Cairo</p>
        <p class="stats"><span class="RepinsCount">12 repins&nbsp;&nbsp;</span></p>
 
        <div class="convo">
                <a class="ImgLink" 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 class="pin-box">
        <div class="actions">
            <div class="right">
                <strong><?php comments_number('No Comments', '1 Comment', '% Comments' ); ?></strong>
            </div>
            <div class="left">
                    <strong><?php if(function_exists(getILikeThis)) getILikeThis('get'); ?></strong>
            </div>
        </div>   

        <a class="PinImage" href="<?php echo get_post_meta($post->ID, 'Source-URL', true); ?>">
             <img class="PinImageImg" alt="<?php the_title(); ?>" src="<?php echo get_the_post_thumbnail(get_the_ID(),'meduim'); ?>">
        </a>

        <p class="title"><?php the_title(); ?></p>
        <p class="stats"><span class="RepinsCount">12 repins&nbsp;&nbsp;</span></p>

        <div class="convo">   
                    <? 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.php to 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


And we’re done. I haven’t gone into deep details but you get the general idea. We are thinking about creating a Pinterest clone WordPress theme with a download zip file, let us know in your comments below if you digg this idea.

Issue - Feb-20-2012

Comments

  1. web designer blog, February 22, 2012

    lovely tut, thanks for sharing, bookmarked this new website!

  2. will, February 22, 2012

    fyi, you have “masonry” misspelled as “mansory” in a number of places

  3. Amos, February 23, 2012

    Love the idea but would it be possible to see some examples of it in use?

  4. Dennis, February 25, 2012

    Nice tutorial! “Medium” is misspelled in the case at section 2

  5. funny Images, March 17, 2012

    Thanks for sharing awesome trick. Is there downloadable zip file ?
    if possible please share. Any way thanks for tutorial

  6. Lars, April 13, 2012

    Hi, thanks for a great tutorial, love to see a zip of this example, Thanks again

  7. Madeleine, September 5, 2014

    Aw, this was an incredibly nice post. Taking a few minutes and actual
    effort to generate a really good article… but what can I say… I hesitate a lot and never seem to get nearly anything done.

  8. i want to learn Spanish fast, September 6, 2014

    It’s amɑzing to pay a quick viisit this website and reading thе νiews of all colleagues concerning this piece of writing, while I amm also keen of geting knowledge.

  9. wealthylabyrint32.wordpress.com, October 4, 2014

    Hello, I think your site migt be havinjg browser compatibility issues.

    When I look aat yopur blog in Safari, it looks fine but when opening in Internet Explorer, it
    has some overlapping. I just wanted to give you a quick heads up!
    Other then that, excellent blog!

  10. Dewey, October 11, 2014

    Pretfty element of content. I just stumbled upn your blog and in accession capital
    to claim that I acquire actually enjoyed account your webpog posts.
    Anyway I’ll be subscribing for your augment and evsn I fulfillment you get entry to persistently rapidly.

  11. Coach Hire Berkhampstead, October 13, 2014

    First off I would like to say great blog! I had a quick question that I’d like to ask if you do not mind.
    I was curious to know how you center yourself and clear your
    mind before writing. I’ve had trouble clearing my mind in getting my ideas out there.
    I truly do enjoy writing but it just seems like the
    first 10 to 15 minutes tend to be wasted just trying to figure out how
    to begin. Any suggestions or hints? Appreciate it!

  12. 360 degree feedback, October 15, 2014

    Thanks for finally talking about >Get yyour Pinterest Site inn 6
    Simple Steps | Dolody <Liked it!

  13. Harley, November 3, 2014

    Thanks for your marvelous posting! I certainly enjoyed reading it, you happen to be a great author.I
    will be sure to bookmark ypur blog and will often come baack
    aat some point.I want to encourage you to ultimately continue your great writing,
    have a nice day!

  14. Tatum Kristofferson, June 17, 2015

    Stock market prices reached their peak in August and then fell having a 22 Tatum Kristofferson this could
    be the only sheer difference involving the bad credit holder and
    a good credit rating holder otherwise just how much remains exactly the
    same for the borrowers.

  15. mattress cover for bed bugs, June 26, 2015

    I have read so many articles or reviews about the blogger lovers except this piece
    of writing is truly a nice piece of writing, keep it
    up.

  16. c# dictionary, January 7, 2017

    “Wow, great post.Much thanks again. Fantastic.”

Leave A Comment:

Name:

Email:

Website: