WORDPRESS PORTFOLIO SITE

Lacking a professional portfolio can severely impact the types of client or employer you attract – especially if you’re a freelancer. Many won’t give this step due care and attention because they think it’s too complicated, or don’t know where to start. However, creating a professional-looking portfolio site on WordPress is a piece of cake!

WordPress is the perfect solution for freelancers who are looking to showcase their work on a budget. It’s got everything you’ll need – power out of the box, and plenty of additional functionality through the myriad of available themes and plugins.

By the time we wrap this article up, you’ll know how to create a basic (but elegant) portfolio site on WordPress in eight steps – and we’ll start right at the beginning, for those of you unfamiliar with aspects such as web hosts and WordPress installs. Let’s get started!

1. Choose a good WordPress host

We’ve discussed this topic to death in the past, but if you want to jump right in, here are the four things you’ll need to keep in mind when choosing a WordPress host:

  1. Scalability: Your host should be able to handle demanding sites, in case you want to pursue new projects in the future.
  2. Security: A good host should take web security seriously and offer features to keep you safe.
  3. Support: This one is critical. If anything goes wrong with your site, you’ll want to have access to a reliable support team.
  4. Reputation: Every web host will have its detractors, but overall you’ll want to go with one that has a proven track record.

We would be doing you a disservice if we just suggested a single host now and said “Sign up here!”. Instead, you should take a look at our recent massive WordPress hosting survey, and use that information to make a decision.

Let’s now move onto installing WordPress.

2. Install WordPress

This process might look a bit different depending on the web host you’ve settled on, but the basic steps remain the same. After signing up with a provider, you’ll gain access to a private cPanel for your hosting plan. This will likely include a one-click option for installing WordPress, or the Softaculous Apps Installer:

The Softaculous installer on a regular cPanel.

Click on the Softaculous Apps Installer icon, and find the WordPress option on the next screen. Then, click on Install Now to begin the process:

The WordPress installation option under Softaculous.

On the next screen, you’ll be prompted to fill in the details of your WordPress site, including its name, description, account name, and password, among others. Most of these are self-explanatory, but for security reasons, do remember to change the default admin username and database name:

The admin account details for a new WordPress installation.

Once you click on Install, and waited a few moments, you’ve created your first WordPress site! Next we’re going to turn it into a handsome portfolio.

3.  Find and install the right themes and plugins

This step is a bit more open-ended than the rest of this guide, for the simple reason that we can’t pick the perfect theme and plugins for your own needs. For the purposes of this tutorial, we’re going to use the Zerif Pro theme as our foundation (which also comes with a free version):

zerif pro

While Zerif Pro is a perfectly solid choice, we urge you to look around and find a theme that feels just right for you. You can settle on either a multipurpose theme (such as Zerif Pro) or look for something tailored to visual portfolios. As long as your theme has decent ratings and good documentation, you should be okay.

Dealing with plugins poses a similar issue. Shooting off random plugin recommendations would be irresponsible (although some are downright essential). However, we can teach you how to spot the best free ones. Once you’ve learned that, you’ll be ready to delve into the official plugin directory and see what piques your interest.

After finding the perfect theme and a promising plugin or two, you’ll need to install them.

To do that, you should start in the WordPress dashboard. You can access it by going to YOURSITE.com/wp-admin. Log in and familiarize yourself with that dashboard:

The WordPress dashboard.

Ours already has a few extra options, but don’t concern yourself with those right now. Instead, look to the Appearance and Plugins tabs. Click on Appearance, and on the next screen you’ll find an Add New option. Clicking that will bring you to a new screen where you can either select one of WordPress’ default themes or upload a new one:

The Add new themes section on the WordPress dashboard.

Selecting Upload Theme brings up a prompt to locate your downloaded theme on your computer. Select the folder, click on Install Now, and you’re all set.

To install any plugins, the process is very similar. It all happens in the Plugins tab, instead of the Appearance > Themes tab. Here’s our in-depth guide on how to install WordPress plugins.

Lsatly, please bear in mind that your new theme and any new plugins you install need to be activated in order to work. If you skip the activation, your themes and plugins won’t function.

In our case, we installed the Zerif Pro theme and no additional plugins for this tutorial, to keep things simple.

4. Build a header

We have WordPress installed and a working theme, now it’s time to actually create our portfolio page. Its first component will be a header – a simple full-width image with a clear message and a call to action for any potential clients visiting your site. Head to Appearance > Customize, and check out how the Zerif theme looks out of the box:

The base Zerif header.

Let’s take that big header section and adjust it for our needs using the WordPress Customizer – a place to tweak your theme to your desired needs. This involves three steps:

  1. Replacing the text under Content, in the Big title section (that’s how Zerif refers to its header).
  2. Adjusting the text of the first button and removing the second in that same section.
  3. Uploading a new image under the Parallax tab and turning on the effect. This enables us to use an image as a background instead of plain colors.

Here’s the result after implementing those tweaks:

Our customized header.

That’s our header ready for action, and we’ll take a look at the site as a whole at the end. You’ll notice that the button below doesn’t link to anywhere at this stage – we’ll fix it later.

5. Build a project gallery

The project gallery is the heart and soul of any portfolio site on WordPress. It’s essentially a collective display of your latest projects, with links to each entry. The Zerif theme includes a custom post type called Portfolio, which enables you to add new projects from the dashboard:

The Portfolio custom post type on the WordPress dashboard.

For this example, we’ve added four of our past articles and set featured images for each. Once set, these will appear on your main portfolio page:

4 portfolio images

Aside from creating four individual projects, here’s what else we did using the WordPress Customizer:

  1. We added a new Portfolio section underneath our header. You can do this in Zerif through a drop-down menu in the Sections order tab.
  2. We modified the main title under the Content tab of the Portfolio section.
  3. We added featured images to each project under the Portfolio custom posts section.
  4. Finally, we enabled the Open portfolio in a lightbox? option under the Settings tab. That way, you don’t need to create individual pages for each project to get up and running. Just assign a good image that exemplifies your work, and flesh out each page later if necessary.

Next, we’ll tackle adding some additional content – specifically an About Me section.

6. Build an About Me section

We’re already making great headway into our portfolio, but we still need to flesh things out. An excellent way to do that is to provide your visitors with some insight into who you are – for example, the key facts employers would love to know about you. To do that, we’re going to use Zerif Pro to divide all of the information into digestible bites:

A Zerif blurb.

Those types of items are called blurbs, and they’re part of Zerif’s Our focus section in the Customizer. Here are the steps you need to follow, in order:

  1. Add an Our focus section to your portfolio page, using the Sections order tab.
  2. Enter the Our focus section and change the content under Header to “About Me”.
  3. Create three (or more) individual widgets under the Our focus section widgets. Each should include a title, some body text, and an image from your WordPress media library.

Now let’s see how the finished product looks:

Our customized About Me section.

Looking good! We’re getting pretty close to the end; now it’s time to deal with the last big section of our portfolio site on WordPress – the contact form.

7. Build a contact form

Now that you’ve reeled in employers, it’s time to get them to contact you. Sure – you could just drop your email in there, but a contact form looks much more professional. Here’s how to do it.

First of all, Zerif includes a Contact Us section, but if you’re looking for an alternative, we recommend the WPForms plugin. If you’re using Zerif, jump back into the Customizer and add a Contact Us section within the Sections order tab, right after About Me. Then head into it, go to Settings, and enter your email address into the relevant field:

The email field on our contact form.

The contact form included in this section is perfect for our needs, so all we have to do is edit its titles. We can do this using the Main content tab:

The content fields for your contact form.

Before moving onto the final step, head back to the Big title section, into Content, and add #contact under First button link. That’s called anchor text, and it will link your call to action to the contact form below it.

Next, it’s time to view our site as a whole, and look at where you can go from here.

8. Flesh out your new portfolio site on WordPress

Take a moment to step back and admire your work – we’ve just built a simple, professional looking portfolio site on WordPress together!

portfolio site on WordPress

What comes next is up to you. Firstly, you’ll want to read up on everything you can do with Zerif, whether that’s adding more projects, creating individual pages for each of them, or playing around with new sections.

Next, you’ll want to learn some of the advanced techniques to take your portfolio even further using the Zerif theme – for that, check out our recent 3 Killer WordPress Portfolio Tweaks to Make Your Site Awesome piece.

Conclusion

A good-looking portfolio site on WordPress can open a lot of doors to meeting (and impressing) potential clients. It provides employers with a better idea of your capabilities, and enables you to set yourself apart from the competition. The entire process will take some time – especially if you aren’t familiar with WordPress – but as we’ve shown, it’s definitely achievable with minimal effort.

Here are the eight basic steps you’ll need to follow in order to make a portfolio site:

  1. Choose a good WordPress host.
  2. Install WordPress.
  3. Find and install the right theme and plugins.
  4. Build a header.
  5. Build a project gallery.
  6. Put together an About Me section.
  7. Set up a contact form.
  8. Flesh out your brand new WordPress portfolio site.

Do you have any questions about how to build a portfolio site on WordPress? Feel free to ask away in the comments section below!

Free guide

5 Essential Tips to Speed Up
Your WordPress Site

Reduce your loading time by even 50-80%
just by following simple tips.

Download free guide