Creating a Portfolio Website with Headway

Screen Shot 2014-02-19 at 12.02.07 PM

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.

Get Started

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.

Screen Shot 2014-02-19 at 8.51.51 AM

Fill in the blanks like so:

Custom Post Type Name Plural: Portfolio
Custom Post Type Name Singular: Portfolio Item
Slug: work

The slug will be what appears as part of your URL for each portfolio item. Here, I chose ‘work’ because I’d like to have a main landing page called ‘Portfolio’ – and setting this slug to ‘portfolio’ would conflict with a Page with a slug of ‘portfolio’ as well.

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”.

Screen Shot 2014-02-19 at 9.03.29 AM

Add a few Portfolio Items

Get started by adding a few portfolio items. Make sure you add a featured image to each one!

Screen Shot 2014-02-19 at 9.15.18 AM

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”.

Screen Shot 2014-02-19 at 9.17.16 AM

 

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

Screen Shot 2014-02-19 at 11.58.22 AM

Filter Content

Under Filter Content, edit the Post Types filter to choose Portfolio from the list.

Build Layout

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.

Build Articles

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.

Screen Shot 2014-02-19 at 11.08.03 AM

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!

Spread the word!

10 Responses

  1. Great article!

    It was great to see you using the Article Builder! Perfect example of its use 🙂

    I hope with the custom fields you will be using the power of the article builder to add custom shortcodes.

    Andy

    • Hey Sam,

      You can use the Types plugin without a child theme. That article in the documentation is only if you want to do it without a plugin and want to code it yourself.

      Sorry for the confusion!

  2. I’m a freelance Web Graphics Designer who happens to have limited knowledge of HTML / CSS, I have tried headway and its awesome.

    The only thing that’s keeping me away from buying headway theme is this sole reason – my clients mostly want to edit their sites content from the backend of wordpress, they aren’t interested or do not have time to learn about how headway works and how to make edits to the site pages using headway, is there any way i can let them edit pages only from the wordpress backend and not to trouble them to venture into headway backend ?? because if they mistakenly delete a block then I will have work on the site again to redesign the block.

    I’m losing lot of customers because of my inability to create WordPress sites and I think headway is perfect for me to get started, please help me with my problem
    My Question here may be out of topic ( sorry about that ) .

    Thanks

    • All content can be managed exclusively from the WordPress dashboard. There really is no reason for them to dig into the finer functions of Headway.

  3. Thanks Grant, There is a small problem, I don’t have a credit card and I’m from India, Indian users cannot use Paypal account to buy products online as part of Paypal India restriction is there any other payment method please let me know…..

    I will be buying a headway license for now it will be personal but soon in a month or so I will update it to Developers license because i need to design it for my several clients. I need to know how to user’s can manage the content of the site from WordPress dashboard instead of venturing into headway, is there any tutorial for this ?
    Believe me or not but I have been searching for this answer for over a year and was hesitant to ask anybody about this.

    Waiting for your reply.

    Thanks again.

  4. Looking forward to part two – when will you post it on the blog. I am keen to see how I can use the custom fields. Thanks
    Sam

  5. Doesn’t Matter, I have figured out how to keep the content on the WordPress Dashboard using content blocks and types plugin so that the client can do the edits. Thanks. I have skrill account I hope I can buy headway theme from that. Please at least reply to this question.

Leave a reply

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress