In this tutorial, we’re going to explain how to create a beautiful portfolio to display your work. The end result will be theme independent meaning your portfolio will remain in place, no matter the theme you use.
Required Plugins
Jetpack
Page Builder by SiteOrigin
SiteOrigin Widgets Bundle
Widgets for SiteOrigin
Jetpack will provide us with a portfolio post type.
Page Builder will let us insert the portfolio on any page.
Widgets Bundle will provide the framework for Widgets for SiteOrigin to operate on.
Widgets for SiteOrigin (Portfolio Widget) will display the portfolio items in Page Builder.
Initial Setup
Once Jetpack is activated and connected to your WordPress account, go to JetpackSettings and search for portfolios, use the toggle switch to enable the Portfolios module.
Once Page Builder by SiteOrigin is activated, no further steps are required.
Once SiteOrigin Widgets Bundle is activated, no further steps are required.
Finally, once Widgets for SiteOrigin is activated, go to PluginsSiteOrigin Widgets and use the search field on the right to search for portfolio. Enable the Inked Portfolio widget.
Adding a Portfolio Project
To add your first portfolio project, locate the Projects menu item in the main WordPress menu (it has a folder icon). For the moment, we’ll just add a demo project to test with. To do so click PortfolioAll ProjectsAdd New. Add a project title, demo text and set a Featured Image in the right column. When formally adding projects later you’ll also want to add project types and tags in the right column. Once done, click the Publish button.
Displaying Your Portfolio
With a demo/example project added, we can look at how to display your portfolio. Go to Pages and either create a new portfolio page or edit an existing page. Click on the Page Builder tab (Page Builder by SiteOrigin) and then the Add Widget button. Search for and then add the Inked Portfolio widget. Once editing the Inked Portfolio widget you’ll see the Select Projects section first. Use the Post type drop-down to select Projects. Next, scroll down and browse the Design and Styling sections. Both can be used to fine-tune your portfolio output. Finally, click the Done button to save the widget and then Update to save the page or Publish if it’s a new page.
At this point, you’ll only have one project displaying on your portfolio page. You can now go back to the Portfolio menu item and add Project Types, Project Tags, and of course, new portfolio items.
Hopefully, this brief overview has helped you get started with Jetpack Portfolios and Widgets for SiteOrigin. If you have any questions, please, post them in the comments section below.