Portfolio themes focus on your work – often with big, beautiful graphics in the case of Photography, Web or Graphic Design portfolios. Today we’ll use the free WP Types plugin alongside a premium community Headway Extend Block, Article Builder, to make a beautiful portfolio layout.
To complete this tutorial, you will need to download and install WP Types (Free) and purchase and install Article Builder (Premium). Activate both plugins. In this demo, we happen to be using the Carnegie Headway Template to jump-start our design.
Create A New Post Type
Before we can add portfolio items and create our layout styles with Article Builder, we will need to create a post type. Creating a separate post type will create another sidebar item in the WordPress Dashboard (we will call it Portfolio) where we can add our Portfolio items just like we do Posts and Pages.
To create your new type, go to Types -> Custom Types and Taxonomies and click on Add Custom Post Type.
Fill in the blanks like so:
Custom Post Type Name Plural: Portfolio
Custom Post Type Name Singular: Portfolio Item
We will leave most of the other fields on the page at their defaults. You can read more about each option and what they do at WP Types. The one change you want to be sure you make is to check “Thumbnail” under “Display Options”. This is a portfolio – we need to display a featured image with each! Save your custom post type, and you will see “Portfolio” appear on the left – probably under “Comments”.
Add a few Portfolio Items
Get started by adding a few portfolio items. Make sure you add a featured image to each one!
Customize the Portfolio Page Layout
I created a page called Portfolio and added some simple introductory text. Later, I can enhance this by adding call to action buttons, such as “Get a Quote” or “Read Testimonials”.
Open the Portfolio page in the Visual Editor (Grid Mode) and either clone from an existing layout or start fresh with a preset or black grid. Make sure you have a Content Block set to default if you’d like to show the introductory content added on the Portfolio page, and then drop another block on the page – this time, choose Article Builder.
Configure Article Builder
Under Filter Content, edit the Post Types filter to choose Portfolio from the list.
On the Build Layout tab, choose whether you will create a grid (Float) or list (Stacked) of portfolio items under Orientation. I’ve chosen Float.
Next define the number of items and columns, and modify as needed for mobile users. (Remember, mobile devices are much narrower so you probably want fewer columns). Finally, set the width between the items.
We’re creating a grid of previews with no space between and only hover effects – like a Portfolio Quilt – so we will remove the spacing entirely and set all these values to 0.
Finally, we can define the elements that appear for each Portfolio item. In this case, our “quilt”, we are only going to display the featured image, but you could choose to display the Title, Thumbnail, Excerpt, a Read More link, as well as post, author and comment meta.
In this case, we’re only displaying the Thumbnail [thumb] and nothing else.
Use the options on the left under ‘Build Articles’ to configure the display of various items. Choose ‘Thumb’ and adjust the thumbnail size as well as the hover effect to your liking.
Save and View
Voila! You have a simple grid with a pretty sweet hover effect, if you chose one – and it’s responsive, too. If you’d like to further style these elements in Design Mode, Article Builder is fully integrated into Design Mode of the Visual Editor, allowing you to modify all of the elements just as you would any other part of your website.
Reduce the padding around the Article Container to really pack your thumbnails close together!
Part II: Advanced Techniques with Custom Fields
Stay tuned! Next week, we will expand on this tutorial and show you how you can gather custom data for each Portfolio Item using custom meta boxes and display it with Article Builder in your layout — no PHP needed!