As I write this, many designers are facing hard times—furloughs and layoffs abound. Chances are, if you haven’t been faced with such a situation, you at least know someone who has. For those in the midst of such situations, my thoughts and prayers are with each of you, and I hope you can land back on your feet again soon.

I’m a big believer in being prepared, so earlier this year I set out to create a new online portfolio for myself, should my circumstances ever take a turn for the worse. I built the portfolio using WordPress, and I want to share how I put it together so that you can make something similar in the event you should need to hit the job market!

Why WordPress?

Services like Wix and Squarespace already exist that make it easy to build and create websites—as well as online portfolios—so why should you use WordPress for your portfolio? There are three main reasons:

  1. Customization. Many services provide customizable templates for you to build your portfolio off of, but not all aspects of these templates are easily customizable. WordPress websites can be customized fully to your liking, so you have a design you can truly call your own.
  2. Cost. When using other services, you may find that certain features like shopping carts or blogs are placed behind paywalls—in other words, you’ll have to pay more to add that functionality into your website. When using WordPress, the only things you have to pay for is hosting and your domain!
  3. Scalability. Although WordPress is built with bigger websites in mind, you can easily start with a small website and build up to something much bigger!

Finding a Web Host

Before building your portfolio, you’ll need to find a web host for your WordPress installation. I recommend using one of the following:

  • Bluehost – This web host is super-affordable, and offers a free domain name for the first year, 24/7 support and a free SSL certificate to help keep your website secure.
  • HostGator – This host features a variety of hosting options, all of which include a free domain for the first year, a free SSL certificate and 99% uptime.
  • 1&1 Ionos – This web host offers dedicated hosting packages for WordPress, as well as a free domain name for the first year, and a free SSL certificate.

The best thing about each of these hosts is that they offer one-click WordPress installs. Simply log in to your hosting account and find the option to install WordPress. You’ll be asked for basic information, such as your desired login information and the name of your new WordPress website—your web host will take care of the rest!

Choosing Your Theme

The first thing you’ll want to do once installing WordPress is install your desired template (or theme, as WordPress calls them). You can find new themes easily from the WordPress Theme Directory, which can be easily accessed from within your WordPress dashboard—just go to Appearance > Themes in the left sidebar, and click the “Add New” button at the top of the page.

The WordPress Theme Directory

Once you’ve found a theme you like, click the “Install” button to add it to your WordPress installation. Once it’s added, you’ll need make it your active theme. To do so, click the “Activate” button that appears.

The WordPress theme customizer

Now that you’ve chosen a theme, it’s time to customize it. Go to Appearance > Customize in the left sidebar. You’re taken to the theme customizer where you can add a logo, change page colors, and edit navigation menus. If you know CSS, you can also add in custom CSS to customize your theme on an even greater scale.

Once you’ve made all your desired changes, click the “Publish” button at the top of the screen to save them.

Adding Your Content

The WordPress Gutenberg editor

Now that your theme is ready, you’ll need to start adding your content. To create your first page, go to Pages > Add New in the left sidebar. You’re taken WordPress’ page editor, called Gutenberg. Content within Gutenberg is added via blocks. Simply put, every element on your page—including headings, paragraphs, and even layout elements like rows and columns—is a block. To add blocks, click the “plus” button that appears in the editor window.

Changing the settings of a block within the Gutenberg editor

Settings for each block are available in the toolbar that appears when hovering over a block, or in the right sidebar when a block is selected. You can click the “Save Draft” link at the top to save a draft version of the page, or click the “Publish” button to make the page live.

For your home page, you’ll want to create a heading that gets attention, and a “call-to-action” link that visitors can use to learn more about or contact you. You’ll also need to create pages for each of your portfolio items, as well as an “About” page where you can place information about yourself.

Working With Plugins

The WordPress plugin repository

In order to add your portfolio grid to your home page, you’ll need to use a plugin. Plugins extend the functionality of WordPress, allowing you to add things like contact forms, social media feeds, and more. To add a plugin, go to Plugins > Add New in the left sidebar. For my website, I used the “Visual Portfolio, Posts & Image Gallery” plugin. Click the “Install Now” button to add it to your website, then activate it when prompted.

Once the plugin has been activated, you’ll find a new “Visual Portfolio” option in the left sidebar. Go to Visual Portfolio > Portfolio Layouts to make a new grid.

The Visual Portfolio settings window

You’re then given a preview of your portfolio grid, and the setup options for it. Under “Content Source”, I like to choose “Images” as opposed to the other two options, as they integrate with your WordPress blog, and can thus cause issues if you want to implement a blog into your website. Once the “Images” option is selected, you can click the “plus” button to upload your thumbnail images.

Once uploaded, you can drag the thumbnails around to reorder them, or click on them to change the caption and desired link for each one—make sure that your thumbnail links point to the correct portfolio item page!

Along the right side of the page, you’re also given the change to change various properties of the portfolio grid as a whole, including how thumbnails are spaced and titles are displayed. Again, once your desired settings are applied, click “Publish” to save them.

To add the portfolio grid to your home page, copy the shortcode at the top of the settings pane at the right, then paste it into a paragraph block within your home page. Don’t forget to publish the changes to your home page!

As a side note, you can actually create multiple portfolio layouts, and then switch between them as needed—this is useful if a certain client or employer is looking for a certain skill set. It’s as simple as pasting the appropriate shortcode into your home page!

Final Steps

Changing the display settings of your homepage

One final thing you’ll need to do before you finish with your website is to select which page acts as your home page. Go to Settings > Reading in the left sidebar. Under “Your homepage displays”, select “A static page”, then select your home page from the drop down menu. Once finished, click the “Save Changes” button at the bottom.

As you can see, building a portfolio website with WordPress is a straightforward process. Not only can you create a stunning website for yourself, but by using WordPress for your portfolio and getting yourself familiar with how it works, you open yourself up to being able to create WordPress websites for other people.

Do you have a personal or portfolio site you created with WordPress? Share it in the comments below!