Looking for something?

How to create a portfolio on your WordPress website using Jetpack

If you are a service-based business owner then a portfolio might be a key part of your website.

A portfolio is a great way to showcase the past work you have done to potential clients. And the good news is it is super easy to create your own portfolio and add projects to it using the Jetpack plugin.

In this post, I am going to show you how to create a portfolio on your WordPress website using the free Jetpack plugin.


1 | Install and set up Jetpack

If you haven’t already installed the Jetpack plugin and set it up then you will need to do this first. It’s a free plugin that brings over many of the tools and features available on WordPress.com to a self-hosted WordPress website.

I have shared a full tutorial on how to set up Jetpack which you can read here.

2 | Activate the portfolios custom content type

Once you have installed and activated Jetpack, you will need to activate the portfolio custom content type setting.

To do this, hover over Jetpack in the left-hand menu and click Settings.

How to access Jetpack's settings

On the settings page, click on the Writing tab at the top of the page to view the Writing settings.

The Writing settings tab in Jetpack settings

Then scroll down until you see the Custom content types section. To activate the portfolios custom content type, just click the switch button next to Portfolios. It will turn blue once it’s activated.

Portfolio custom post type option in Jetpack settings

And that’s it! You have now activated Jetpack’s portfolios feature.

3 | Add projects to your portfolio

To create your first project for your portfolio, hover over the new Portfolio item in the left-hand menu and click Add New.

Add new portfolio item

This will take you to a page which looks a lot like the new page or post page…

Add new portfolio item page

Start by giving your project a title, and then in the main content section, add in any details about the project you are working on. The block editor makes it easy to add in single images or create image galleries to showcase your work. You can also add in text or embed videos. Creating a project in your porfolio is just like creating a blog post in WordPress.

You can then assign a featured image to your portfolio if you wish, and an excerpt if to summaries the content of that particular project.

The portfolio custom post type comes with a couple of taxonomies that are specially for portfolio projects. Firstly there is the Project Types taxonomy which works in the same way as categories do for your blog posts, and secondly, there are Project Tags which work just like tags do for your blog posts. You can create these and assign these directly on the project page itself.

Portfolio project types and tag options

When you’re done, click Publish.

4 | View your project

After you have saved your first project as a draft or after you have published it, take a look at the permalink structure of that project. It should look a little something like this:

https://YOUR-URL.com/portfolio/PROJECT-NAME

(With YOUR-URL being your domain and PROJECT-NAME being the name you have given to your project. )

If you check out https://YOUR-URL.com/portfolio/ you will be able to see a full archive of your projects within your porfolio.

This is what a project looks like on my website when using my current theme:

Example portfolio project

If you are familiar with the WordPress template hierarchy then you will know that this portfolio page will use the archive.php template to display the content, and if there isn’t an archive.php template present in your theme folder then it will use the index.php template. This is why portfolio page looks exactly like my blog page.

If you wanted to create a specific template for your portfolio page, you would need to create a new file in your theme folder called archive-portfolio.php.

Similarly, if you wanted to create a specific template for your individual project pages within your portfolio, you would need to create a new file in your theme folder called single-portfolio.php.

You can easily change the number of portfolio that are displayed on this page. To do this, hover over Settings in the left-hand menu and click Writing. Then scroll down to the bottom of the page when you will see a section called Your Custom Content Types, and the option to change the number of projects that are displayed.

Portfolio settings

5 | Use a shortcode to display your projects

You can also display portfolio projects within a post or a page using a shortcode. The shortcode you need to use is simply:

[portfolio]

This is what a project looks like on my website without any further customisation:

Example portfolio project

You can actually customise the appearance of your portfolio by adding attributes to your shortcode:

Columns

By default, projects are set to be displayed in 1 column, but you can change this with the columns attribute. For example, the following shortcode will display the projects in two columns:

[portfolio columns=2]

Content

By default, the content of the project will be displayed. If you have provided an excerpt, the excerpt will be displayed rather than the full content.


However, if you don’t want to display any content alongside your project, use the display_content attribute and set it to false:

[portfolio display_content=false]

Number of posts to display

By default, all your porjects will be displayed when you use the shortcode. If you want to specify the number of projects that are displayed you can use the showposts attribute:

[portfolio showposts=5]

Ordering

By default, projects will display in ascending date order, but you can switch them to display in descending order using the order attribute and setting it to DESC:

[portfolio order=DESC]

You can also sort projects using different criteria using the orderby attribute. To sort portects by author, set the orderby attribute to author:

[portfolio orderby=author]

To sort by date, set it to date:

[portfolio orderby=date]

To sort by the title of the projects, set it to title:

[portfolio orderby=title]

And finally, to display the projects in a random order, set it to rand:

[portfolio orderby=rand]

To style your portfolio further you will need to add some CSS. Make sure if you are editing a pre-made that you create a child theme if you haven’t done so already.


Get access to my freebies library!

My exclusive freebies library contains cheat sheets, checklists and other resources to help you to create and run your dream website.

To access my freebies library and join my community, just fill in the form below. Find out more information about my community right here.


How to create a portfolio on your WordPress website using Jetpack | HollyPryce.com

Leave a comment

Comment

* = Required. Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.