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.
On the settings page, click on the Writing tab at the top of the page to view the Writing 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.
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.
This will take you to a page which looks a lot like the new page or post 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.
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:
(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:
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.
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:
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.
Hot off the WordPress!
Join my FREE email community today to receive helpful tips and advice on building and maintaining your website directly in your inbox every other Friday. Just pop in your name and email address.