In this article I am going to share how we can set up Portfolio Custom Post Type with Portfolio Category and Portfolio Tag custom taxonomies in Genesis.
The child theme used in this example is Genesis Sample.
There are a few themes that include CPT functionality. For example, Executive Pro includes Portfolio CPT and a Portfolio Category taxonomy. Minimum Pro includes Portfolio CPT. This code in this article will need to be adjusted a little when you are using such themes.
Video Overview:
Portfolio Archive, Portfolio Category and Tags taxonomy archive pages:
- Entries' featured images will appear in a grid.
- Each image will have a transparent overlay caption at the bottom on which first few characters of the excerpt will be shown. The caption area links to single page. If a Portfolio entry does not have any content, caption will not appear.
- When the image is hovered, its opacity is reduced to reveal a magnifying glass icon.
- When the image is clicked, the full featured image will be shown in a lightbox. The images can be navigated in the lightbox using left and right arrow keys or keyboard navigation. There's also a Play button to start a slideshow.
On single Portfolio pages, these will appear:
- Full featured image below post info
- Portfolio categories and tags
- Previous and Next navigation links at the bottom
Step 1
Install and activate Portfolio Post Type plugin.
This plugin registers a custom post type for portfolio items. It also registers separate portfolio taxonomies for tags and categories.
Add new Portfolio items with category(ies), tag(s) and featured image in each.
Step 2
Create a file named portfolio-image-hover.js under js directory (create if not existing) in the child theme having this code:
