Sridhar Katakam

Genesis and WordPress Tutorials

Masonry Grid on Portfolio CPT Archive in Genesis

by 16 Comments

Want to display Portfolio Post Type items in Masonry style in Genesis?

In this article I share the code for using Masonry (built into WP) on Portfolio CPT Archive page and Portfolio taxonomy archives on non-handhelds. On tablets and mobiles, :nth-of-type pseudo selector will be used for displaying the entries in a grid with the number of columns depending on viewport widths.

portfolio-cpt-archive-masonry-genesis

While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.

Step 1

Install and activate Portfolio Post Type plugin. This will register a portfolio Custom Post Type with a corresponding portfolio_category and portfolio_tag custom taxonomies.

Add your Portfolio entries while setting a featured image for each. Images of varying sizes make the best impact for the masonry display.

Step 2

Create a file named say, masonry-init.js in child theme's js (create if not existing) directory having the following code:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Hi Sridhar,
    Thanks for the tuturial, it’s great!
    I would like to use this with Easy Content Types (by pippins plugins), instead of the Portfolio Post Type plugin, is that possible? And is it possible on a page with a right sidebar?
    Thanks in advance,
    Eva

    Reply

    • Are you going to register and use custom taxonomies with that plugin?

      Yes, it is possible to have this on a page with right sidebar. Just delete the following in archive-portfolio.php:

      // Force full width content
      add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

      You also need to adjust the width of .masonry-page .content .entry.

      ((no. of columns) * x) + ((no. of columns – 1) * gutter width) = available width

      Reply

  • Hello Sridhar,
    Thanks for your prompt reply. I am still in a testing phase and I don’t know yet if I will need to use taxonomies. The purpose is to show the custom post types to replace this: http://www.xanderuitgevers.nl/, with more or less the same look and feel. Hope that’s possible.

    For your information, the description of the plugin says:
    “Much like the built-in Categories and Tags, custom taxonomies allow you to define an organization within your custom post types. In just seconds you can add a “Genres” category to your movies or books review website and “categorize” all reviews into their correct Genres. It works just like the regular categories, but is so much better because you get to define the exact name your taxonomy uses.”

    I am sorry, but I don’t understand exactly how to use ((no. of columns) * x) + ((no. of columns – 1) * gutter width) = available width
    Just change no. of columns?

    Thanks again,
    Eva

    Reply

  • Hi Sridhar,

    Thank you very much for the tutorial, I really appreciate it! I’ve applied it and it works well.

    I’m only having trouble with the media queries, they seem to display the images like a stair case, or they don’t have a padding between entries. Not sure if I am also the only one experiencing trouble.

    I want to be able to reorder the portfolio using the Simple Page Ordering plugins. I’m not sure but where do I add the following code in the functions.php?

    $query->set( ‘orderby’, ‘menu_order’ );
    $query->set( ‘order’, ‘ASC’ );

    Thanks in advance 🙂

    Reply

  • .masonry-page .content .entry {
    /* ((no. of columns) * x) + ((no. of columns - 1) * gutter width) = available width */
    }

    Can you help me understand the formula?

    What is “X”?

    for example if I have 4 columns:

    ((4) * X + ((4-1) * 40)

    Thanks.

    Reply

  • Hi Sridhar,
    first of all really great tutorials!
    I’ve used this and it works perfekt.
    Currently I use the Altitude-Pro childtheme. And I want to add this “Archive”-Page into one of the Front Page Widget Areas.
    First I thought of writing a Widget that pulls all the posts like this Archive-Page and insert that Widget in the designated Widget Area on Front Page.
    How can I do this? Is there a way to include that Archive Portfolio Page?

    That’s why I need to figure it out:
    The Website will be a onepager, after a Slider(Front Page 1) this kind of Blogroll comes with the Portfolio-Items displayed in Masonry-Style like this tutorial (Front Page 2). Later there will be some functionality added like a “Load More” Button (to display more Portfolio-Items and stay on same Page (Onepage)). Another functionality will be an ordering function that allows the user to click a tag/category link under the Posts (where it says Filed under) and that section will only show the posts under this category (but still on same page because the Onepager).

    Reply

  • Hello Sridhar,

    Thanks for this very useful tutorial.

    I don’t know why but my portfoio category loads the template index.php instead of the archive-portfolio template ?
    See : http://goo.gl/nYqBzu

    Have you any recommandation ?

    Thank you

    Reply
    • >