Create a Portfolio using Jetpack

This tutorial shows how you can use the WordPress Jetpack portfolio options in our Emphasize Pro theme to create sleek looking portfolio items on a page. Our theme does not have a built-in portfolio post type because if you were to change themes, you would lose it. However, if you use or plan to use Jetpack, there is a Custom Content Type module in it that lets you activate and create a portfolio. You can see a sample of the custom styling Emphasize offers you, should you use the portfolio feature.

Portfolio Demo

The demo portfolio is using a page with the portfolio shortcode method to display the three columns you see.

Install Jetpack

If you do not have Jetpack installed and plan to use it, this is how you set it up:

1. Go to Plugins >> Add New
2. Search for Jetpack, but more likely it will show up on the Add New plugin page like this:
   
3. Click the “Install” button in the upper right (in the screenshot, I already have it, so it shows it’s installed). Once done, activate it. For additional information on using Jetpack, I would recommend checking out the Jetpack Plugin
4. Go to Jetpack >> Settings >> and find the Custom Content Types module and activate it. Once done, click on “Configure” when you mouseover the module you just activated.
   
5. Put a checkmark next to the portfolio setting and choose how many items you want to display.
   
6. Click “Save Changes“

Add a Portfolio Project Type (Category)

Now it’s time to begin adding portfolio posts…much like adding posts to a blog. But first, we need a category (Project Types).

1. Go to Portfolio >> Project Types
   
2. Type a name for your category and a description for it
3. Click on “Add New Project Type“

Add Portfolio Projects

Projects are basically posts (items) that you add to your portfolio type (category). Again, this is just like a blog, so most of this will seem familiar.

1. Go to Portfolio >> Add New
2. Fill out the title and begin adding your portfolio project details. Depending on what your portfolio is about, this is where you have the flexibility to add your project information. You can add galleries, a slider, video, or anything else that will showcase this project, both in content and visual elements.
3. For the Portfolio thumbnail image, use the “Featured Image” box to upload a photo or graphic to represent this project.
4. Click on “Publish“
5. Repeat for additional projects.

Featured Image I suggest to maintain a consistent look to your portfolio, that you keep your Featured Images the same size as each other so that your page layout columns will be lined up perfectly. For example, the demo portfolio for Emphasize Pro has featured images that are 440 x 330 pixels. When viewing the portfolio project, the full page is set in columns where the featured image will display to the right.

Create a Portfolio Page

The next part is to create a page for our portfolio (if you plan to use the “Shortcode” method) so that we can display it with more flexibility. By doing a page with the shortcode method, you can add extra content to your page.

1. Go to Pages >> Add New
2. Choose your Page Template (I recommend a full width template)
3. Title your portfolio page anything you want. IMPORTANT: Do not name it “Portfolio” because the permalinks will get messed up. Jetpack is aware of this conflict.
4. If you plan to add some content, you can add it to your page.
5. Add your portfolio shortcode (use the “Text” tab on the editor) with all of the attributes you want to show. For reference, go to PORTFOLIO SHORTCODE
   The shortcode I used for the demo is this:  [portfolio display_types=false display_tags=false columns=3 showposts=9 orderby=title]
6. Publish your page, or click Update if you already have this created.

If you would like to read more on Jetpack, check out this article about the benefits and additional features of WordPress Jetpack plugin – it is a great write up and review of the most important functionalities it adds to your site and it explains in detail why we recommend using Jetpack.