While the Page template in Adapt can certainly be adapted to work in any WP theme..
That is what I did this weekend and chose Genesis as that’s the theme I have been thinking about day and night. In this article I provide the code needed to turn your simple Portfolio archive page of any Genesis theme into a awesome filterable portfolio with fluid animations without using a plugin.
I selected Minimum Pro for this article as it already comes with Portfolio CPT (Custom Post Type). If your Genesis child theme does not have that CPT built-in, you can just use a free plugin like Types to create it and use the method in this article.
As a bonus, I also provide a ready-made custom page template that can simply be applied to any static Page and have the filterable portfolio appear on that Page. This means in addition to having your fancy portfolio appear on http://site.com/portfolio/, you can also have it on say, http://site.com/showcase/
- If the active Genesis child theme does not come with a Portfolio CPT, create it using a plugin like Types. Ensure that slug is portfolio. This step is not needed when using Minimum Pro
- Create a custom portfolio-category taxonomy
- Assign Portfolio items to the custom taxonomy
- Upload Isotope and the initialization .js files
- Add custom CSS
- Change the image size for portfolio handle
- Replace archive-portfolio.php and optionally add page_filterable-portfolio.php if you wish to use custom page template
Create Portfolio CPT
Ensure that featured image support is set.
Screenshot if using Types:
Enable featured image support by ticking Thumbnail under Display Sections.
Create Portfolio Category custom taxonomy
Set it a) so its slug is portfolio-category b) to be used with Portfolio taxonomy c) as Hierarchical, similar to post categories.
Screenshot of custom taxonomy creation screen using the Types plugin:
Assign your Portfolio items to the custom taxonomy
Create a folder named js under the child theme. Download the Isotope script, jquery.isotope.min.js from http://isotope.metafizzy.co/v1/jquery.isotope.min.js and upload it to js directory. Also upload another file isotope_init.js having this code in the same js directory.
Add the following at the end of child theme’s style.css:
To change the number of images (columns) that appear in each row, you will have to change the width of .portfolio-item.
Here’s the formula for calculating this width:[main element width – (number of columns – 1)*20] / number of columns
where 20 is .portfolio-item‘s left margin.
main element width can be obtained using Firebug. It is the available width of the content area in the viewport. Note that in the PHP that follows we are going to make the content area full width.
Make sure that width of .filterable-portfolio is same as that of .portfolio-item but with a negative value.
If the above is not clear, you can safely ignore. The code provided already has the values to get the same look and functionality as in the demo site.
Replace (if present, otherwise add)
add_image_size( 'portfolio', 540, 340, TRUE );
add_image_size( 'portfolio', 270, 220, TRUE ); /* width = [main element width - (number of columns - 1)*20]/number of columns height = up to you */
and change the width and height values to your liking. Note that this step is not mandatory but just ensures that optimum sized images are shown vs letting the browser upsize/downsize thereby making it a little efficient.
Take a backup of archive-portfolio.php (if present) in your current active child theme and replace it with this:
By default the number of posts will be limited to what’s set at Settings > Reading (10 is the default). If you wish to change it, use this sample code instead of the above. In the sample code, unlimited i.e., all posts are set to appear.
If you wish to have the filterable portfolio appear on a separate URL of your choice, use this page template. Upload page_filterable-portfolio.php to child theme, create a Page and apply Filterable Portfolio template to it.