05. Custom Post Types - Portfolio

Portfolio Custom Post Type

To have access to Portfolio Custom Post Type you need install and activate the AZ Custom Post Type plugin.

One thing that might have caught your attention since activating the plugin is the "Portfolio" tab that appeared. This is where you will manage, edit and create all of the portfolio related items that you wish to place in your pages.

Adding Portfolio items is the same as creating blog posts or create a page.

This is the process of adding portfolio project:

  • Go to Portfolio -> Add New
  • Enter a title.
  • Create or Select the project categories.
  • Create or Select the project attributes.
  • Upload a featured image.
  • Setup the Portfolio Metabox for the current portfolio project post.
  • Use the page builder for create the portfolio content page.
  • Write a few words excerpt (it is used for SEO and Social Share Description).
  • Click "Publish" and you're all done.

About Featured Image

You can change the size of featured image on the fly when you insert into your page/post the "Portfolio Grid" shortcode.

  • Grid Layout - If you select this layout inside the portfolio grid shortcode you can select your featured image size based on your columns selected ( 2 to 6 columns ). By default is set to 700x700.
  • Masonry Layout - If you select this layout the theme does all the resizing, so if you upload various image with custom sizes, the theme will detect which is the best width for it. The columns available for this layout is from 2 to 4 columns. When you upload an image the theme will always search for the highest occurence of a 480 multiplier ( 480, 960, 1440, 1920, etc. ). The images will be positioned vertically in the space available.

    - If you upload an image size 550x550 the theme resize to 480x480.
    - If you upload an image size 1600x1000 the theme resize to 1440x960.
    - If you upload an image size 960x960 the theme not resize.


    If you select a masonry 4 columns the sum of each columns height is always 4. For example 960x960 is equals to 1/2 block, an 480x240 is equals to 1/1, etc.

Portfolio Metabox

This is the options available for each portfolio post:

  • Creative Module - This module permitted to have a modal instead the single portfolio page. Is available only if activate the option into the "Portfolio Grid" shortcode. You can upload an image or create simple slider and add description.
  • Project Type - Here you can select your project type, you need setup this option for all portfolio posts. This is available only for Portfolio Classic Module.

    - Normal Type - Open the single portfolio post in its corresponding single page.
    - Fancybox Type - Open the single portfolio post with the fancybox pop-up for images or videos. This type is excluded from the navigation.
    - External Type - Open the single portfolio post indicated in the URL Field. This type is excluded from the navigation.
  • Back to URL - This option is available only if you activate the "Custom Navigation" in "Theme Options Panel -> Portfolio". This permitted to select your custom main portfolio page for back to portfolio feature for each portfolio post.
  • Colorize FX - This options permitted to have different hover color for each single portfolio post. You can set the colors in Portfolio Metabox inside the respective single portfolio post. Is available only if activate the option into the "Portfolio Grid" Shortcode.

About Fancybox Image Type

If you selected this for your portfolio post you have some options.

  • Fancy Image - Upload an image if you want display another image instead the default featured image. If you want a caption below the image you need write into the Caption Field when you upload/select the image with Wordpress Media Uploader: See Here
  • Fancy Gallery Image - You can create a gallery of images with the same portfolio post. Just you upload your images. If you want you can have a caption for each image, just you write into the Caption Field when you upload/select the image with Wordpress Media Uploader.
  • Fancy Image Gallery Name - This field is required only if you want use Fancy Gallery Images or you want a gallery between other portfolio fancybox type posts. Just you write a name in lowercase. See Here

    If you want a gallery between all portfolio posts with fancybox type, just you enter the same name in Fancy Image Gallery Name field. Remember the gallery works only with the same type of fancybox, image or video not both.

About Fancybox Video Type

If you selected this for your portfolio post you have some options.

  • Fancy Video URL - Enter your video URL, only support for Vimeo and Youtube Video.
  • Fancy Video Caption - Optional you can insert a text
  • Fancy Gallery Videos - Simple just you insert a title, caption and link to video, you can insert unlimited video to same portfolio posts, just you click on add slides, drag and drop for sorting or remove.
  • Fancy Video Gallery Name - This field is required only if you want use Fancy Video Gallery or you want a gallery between other portfolio fancybox type posts. Just you write a name in lowercase. See Here

    If you want a gallery between all portfolio posts with fancybox type, just you enter the same name in Fancy Video Gallery Name field. Remember the gallery works only with the same type of fancybox, image or video not both.

Exclude Post From Navigation

If you use the Fancybox or External URL Type you can exclude this posts from navigation. Just you write this excludePost into Excerpt post.

How to have access to portfolio items?

For display the portfolios in your pages or posts you need use the Portfolio Grid Shortcode via page builder.

You can have more options to sort, display the portfolio items. Also if you want to show only certain portfolio categories, not the entire portfolio posts, you need write in the Portfolio Post Categories ( inside the shortcode ) the categories, separated by commas. Please use the project-category slug, not the title.

You can order the post via shortcode with this default wordpress parameters or use the Simple Custom Post Order plugin with drag and drop feature.