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.
While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.
Install and activate Portfolio Post Type plugin. This will register a
portfolio Custom Post Type with a corresponding
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.
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.