Make a Free Portfolio Website with WordPress: Step-by-Step Guide

You might have a WordPress website already or you might be completely new to WordPress but since you’re reading this, I assume that you’re not quite happy with your website situation right now and you’re looking to create a fully functioning, simple, but good looking free portfolio website for yourself.

If that’s true then you have come to the right spot, because this is a complete setup guide for beginners that will help you create a personal online portfolio website without spending a dime!

Final result – this is what we’re going to create

Click here to see the final result of this guide. It’s a live portfolio website that I’ll help you create by guiding you every step of the way. Looks nice, doesn’t it? And it’s using a free theme and portfolio plugin!

final result for a free portfolio website tutorial

In this guide, we will cover a lot of ground but I tried to write it in a way that is easy to follow and doesn’t skip any steps. By following through it, you will find out how to:

  • Install a WordPress child theme
  • Plan out your website structure
  • Install and create a Portfolio page
  • Create an About Me page
  • Set up a working Contact page
  • Set up your Blog

Since this is written in a step by step tutorial style, I would encourage you to not only read it but do the steps with me and by the end of this article, you will have a stylish website of your own!

What do I need before going further?

Since this article deals with free things, I assume that you already have the following not so free things set up:

  • a domain name
  • a hosting provider
  • a working, fresh WordPress installation

If you have these already, you’re all set to go.

If you’re missing any of those parts, check out our “How to set up your Web Hosting & Domain name” tutorial now!

Installing a free WordPress theme

For this tutorial, we will use a Child Theme called Minimalist and that is based on the beautiful WordPress theme – Hamilton.

A child theme is a WordPress theme that inherits its look and functionality from another theme – the parent theme.

We made “Minimalist Portfolio” theme specially for this tutorial and you can download it here.

Why use a child theme instead of the original one?

A child theme is used when you want to add custom tweaks to your website without losing the ability to upgrade the theme in the future.

In this case, our Minimalist Portfolio theme has some extra styling for the portfolio that we’re going to create.

Ok, let’s get to work!

Step 1

Log into your WordPress admin panel.

Step 2

The first thing we need to do is install our free Hamilton child theme.

If you haven’t already, click here to download Minimalist theme.

Now go to go to Appearance > Themes. Click on the “Add New” button and then click on “Upload Theme” button.

Locate your “minimalist-portfolio.zip” file you just downloaded (look in your Downloads folder) and upload it.

When uploading is done, click on “Activate”.

Install Minimalist portfolio theme - free portfolio website design

You now have an active installation of two themes – Minimalist Portfolio and Hamilton theme.

You need both of these themes because one will be responsible for the overall design (Hamilton) and the other will be responsible for the portfolio part of the design (Minimalist Portfolio).

Uploading your logo

Right now your site is completely empty. You can see it “live” if you open a new browser tab and type your website address in the URL field.

Let’s make this website feel like it’s ours even if we don’t have any content in it yet.

We’ll start by uploading our logo (or at least by changing the name of the site) and by adding copyright information in the footer area.

Logo

To upload your own logo, go to Appearance > Customize and click on the “Site Identity” tab.

Your logo file size should be 100 px high. The logo itself can be even smaller than that and centered in that 100 pixels high file.

If you don’t have a logo of your own you can either change the Site Title to your business name or you can download a free logo template from our 100 free photography logo templates section.

Copyright information

Your copyright information is located in the footer and you can change it by writing your preferred text in the site title field, just below the logo upload area.

Planning out your website structure

In order to get organized, we need to write down our website structure before we start to build it.

Since we’re building a photography portfolio website, I will go with the following pages:

  • Portfolio (which will serve as my homepage)
  • People (separate portfolio category with people galleries)
  • Objects (separate portfolio category with objects galleries)
  • About Me
  • Blog
  • Contact

My portfolio will be my homepage because I want people to see my work as soon as they enter my website.

Then I will group all my galleries in two categories called “People” and “Objects”. These categories will be placed in the navigation area and will serve as filters for my portfolio so that if someone wants to see only my People galleries, instead of browsing the whole portfolio page, they can go to“People” and only those galleries will be shown on that page.

If you’re specializing in wedding and couple photography, instead of “People” and “Objects” you could do “Weddings” and “Couples”. Or you could skip the whole category part and just have one portfolio page.

No matter what you choose, it’s important to write down your website structure before you start building the site. Doing the planning part beforehand will save time and effort later on.

Design Decisions

There a couple of design decisions that you should make before you start to populate your site with content.

You will be able to come back to them later on as well, but I would like you to get familiar with your theme and consider them now because they might affect your choices later on.

Here are the design decisions you should think about:

  • Navigation – should your menu items be hidden under a button or visible at all times?Si
  • Site color – will your site background be light or dark?
  • Blog layout – should your blog layout be in 3 columns or 2?

All of these things can be tested and changed by going to Appearance > Customize.

You will find your menu and blog column count options under “Theme Options” tab and your color options will be under the “Colors” tab.

For this demo site, I chose to have my menu open, site background color light and stick to the 2 column layout for my blog.

Portfolio

We will start with the most important and fun part which is our portfolio page!

Install the Portfolio plugin

Right now our WordPress theme has only blog posts and pages, we will have to install a plugin that will give us the ability to create a portfolio.

We will do that by going to Plugins > Add New.

In the search bar area type in “Easy photography portfolio”.

Install Easy Photography Portfolio plugin un Minimalist Portfolio theme

Click on the “Install Now” button and wait for it to install. Then click the “Activate” button.

As soon as the plugin is activated, you will have a new section in your dashboard – Portfolio.

Just like you go to Pages to create a new page for your website, you will go to Portfolio whenever you’ll need to create new portfolio galleries or manage your existing ones!

Set up your menu

Before we start creating our portfolio entries, we need to add our portfolio to our menu, so that we can access it from our website.

Step 1

We do that by going to Appearance > Menus.

Currently, there is no menu, so we need to create one. In the “Menu Name” area type MENU and click on the “Create Menu” button.

Step 2

In the pages section, you will see a page called “Portfolio”. It was created automatically when you installed the Easy Photography Portfolio Plugin.

Select that Portfolio page and click on the “Add to Menu” button to add it to your menu.

Step 3

We want our menu to show up on our site so tick the Primary Menu check box and then click on the “Save Menu” button.

As I mentioned before, I chose to set my menu to be visible in the header area. You can change how your menu is displayed by going to Appearance > Customize > Theme Options.

Assign Portfolio to Front page

Right now my website home page displays my blog post sample, but in the planning phase, I decided that my website front page should be my portfolio, so I need to make that happen now.

Step 1

Go to Settings > Reading. Select your Portfolio as your Front page and click the “Save Changes” button.

Creating your portfolio galleries

Now that all the preparation work is finally done, we can start uploading our images.

Step 1

Go to Portfolio > All Entries.

As you’ll see, there is one portfolio entry that was created for you automatically. You can either delete it and create a new one by going to Portfolio > New Portfolio Entry. Or you can open this one and replace the existing content with your own.

I’m going to delete this one and start fresh by going to Portfolio > New Portfolio Entry.

If you need more instructions on how exactly does this portfolio plugin work, take a moment and watch this video.

Step 2

There are 6 things you should do when you create each new gallery:

  1. Give your gallery a title
  2. Give your gallery a subtitle (optional)
  3. Describe this gallery (optional)
  4. Upload the cover image for this gallery in the Featured Image area
  5. Upload all images in the Photography Portfolio area
  6. Assign a category for this gallery (optional)

When uploading your images, make sure you always prepare your them for web before uploading. We have discussed both the best image sizes for your portfolio and how to optimize your images for speed in our other articles, so make sure you skim trough them.

Step 3

Go ahead and create a couple of galleries for your portfolio now. Don’t worry about the gallery order, I’ll show you how to re-arrange them later on!

I created 12 galleries for my portfolio page. You can see them all live here.

Free portfolio website using Minimalist Portfolio WordPress theme

Re-arranging your portfolio order

To change the order of your portfolio galleries, we will need to install a plugin that will help us with that.

Step 1

Go to Plugins > Add New and in the search field type in “Post Types Order”.

Step 2

Install and activate this plugin and then go to Settings > Post Types Order and simply click on the “Save Changes” button to make it work.

Step 3

Go back to Portfolio > All Entries.

Now simply drag-and-drop your portfolio entries around to create a new order!

Now our portfolio page is ready! Wasn’t that hard, wasn’t it?!

Adding Portfolio Categories to Menu

Back in the planning phase, I decided that my whole portfolio will be my home page and then I’ll have 2 separate portfolio pages – one would show only my “Objects” photography and other – “People” photography.

You can, of course, skip this part if it’s not relevant to you, but here’s how you can quickly add your portfolio categories to your menu.

Step 1

While I was creating my portfolio galleries, I assigned each gallery to either “People” or “Objects” categories.

If you didn’t do this, you can open up each portfolio entry and assign a specific category to each one of them.

Step 2

Now that you assigned your categories to your entries, go to Appearance > Menus.

Click on the “Screen Options” button and activate Portfolio Categories.

Step 3

Select the necessary portfolio categories and add them to your menu. Then click the “Save Menu” button.

Now your navigation area has a portfolio page and your category pages.

Minimalist Portfolio - free portfolio website theme for creatives

About Me Page

It’s time to grab a cup of tea because we’re about to do some creative writing!

An About page is an important part of any personal website because even though your pictures might be great, people visiting your site will want to know who’s behind all that work.

Here are a couple of pointers for your About page:

  • It should mention your name and where are you from
  • Make sure you get a nice picture of yourself
  • Write in your own voice. Don’t write in the 3rd person.
  • No need to overdo it – around 300 words are plenty enough.

Creating your Page

To create the About page (or any other page) go to Pages > Add New and start writing!

Make your text easy to read and pleasant to look at. Use captions when appropriate. Have a favorite quote? Add it and make use of Hamilton theme’s beautiful styling options.

Contact Page

Good job so far – we’re more than half done already!

Next, we’re going to create a contact page with a working contact form and some information.

Here’s what we’re going to create:

Contact page example for our free portfolio website called Minimalist Portfolio

You can see it live here.

Creating a contact page

Step 1

Go to Pages > Add New and call your page “Contact.”

Step 2

I want to add a short greeting text just below the page name. We can do that by typing it in the “Excerpt” field.

If you don’t see your Excerpt field, click on the “Screen options” button in the top right corner of your screen and activate “Excerpt”.

Step 3

In order to add some visual interest to the contact page, upload an image in the Featured Image area.

Step 4

Write some text in the content area. Be short and concise. Add your email address and any other relevant information.

Step 5

You can make your email address clickable by selecting it, clicking on the “Link To” icon from your text tools and then type mailto:[email protected]

Contact Form

You could leave your contact page as it is now, but it’s a good idea to create a contact form that people can fill out without leaving your website. Here’s how you do it:

Step 1

Go to Plugins > Add New and search for and install “Contact Form 7”

Step 2

Go to Contact > Add New.

Automatically a new contact form will be generated for you. Your task here is to give this form a name so that you can find it in the future. I called mine “My contact form”.

Step 3

Switch to the Mail tab.

Add your email address in the “To” field. All messages from your website contact form will go to that email address.

Step 4

Click the “Save” button. A contact form shortcode will be automatically generated for you.

Select and copy it.

Step 5

Go back to your Contact page and paste this shortcode where you want your contact form to appear.

And now you have a beautiful and functional contact page ready to go! The last thing you need to do is add it to your menu and I trust that by now you already know exactly how to do that!

Blog

I strongly believe that every good personal website should have a blog that’s frequently updated for a number of reasons:

  • it shows that you’re alive, active and doing work,
  • Search Engines (like, Google) love websites that are active so you will rank better and gain more site visitors
  • your blog can serve as a showcase area for your photography projects.

I understand that you won’t go and create a bunch of posts here and now but consider creating at least a “Welcome to my new website” or “My most recent photo shoot” post to get you going.

Setting up your blog

Before we do any post writing, we need to create a blog page first.

Step 1

Go to Pages > Add New.

Create a new page and call it Blog. You don’t need to write anything in the content area.

Step 2

Go to Settings > Reading and in the Posts page area select your Blog page.

Click the “Save Changes” button.

Step 3

If you want to have a short greeting text for your blog page, you can add it by going to Appearance > Customize and click on the “Theme Options” tab.

Write your text in the “Front Page Title” area. This text will show up on your blog page.

Writing your blog posts

You write posts by going to Posts > Add New.

Your post content goes in the Text area and your post cover image has to be uploaded in the Featured Image area (just like you did for your portfolio galleries).

If you plan to add any images inside your posts, make use of Hamilton’s beautiful gallery styles. You can see examples and instructions in the Hamilton theme demo here.

Here’s a screenshot of how one of my blog posts look from the admin panel side.

The important thing here is to be creative, experiment and create.

Extra polish

We just created our free portfolio website and if you followed through this far – you are awesome!

In this last part, I just want to mention a couple of plugins and actions you might want to take in order to give your new website that final polish.

Upload a Favicon

A favicon is a little icon associated with your website and displayed in the browser tab.

You can upload a favicon by going to Appearance > Customize > Site Identity and upload it in the Favicon area. It should be simple enough to work in very small sizes.

I chose to use the icon from the size logo as my favicon.

Protect your images

If your website has photography or any other work that you would like to protect and discourage people from simply right-click > Save As.. on your work, you can install our free image protection plugin that disables right-clicking on your images. It’s called Photection and you can read more about protecting your images here.

Premium website designs

If you’re looking for a website design that is more advanced than the one in this article, we specialize in premium photography website designs so check them out. The setup process for our premium themes is very similar to the process described in this guide yet design wise you’ll get a more advanced and professional website and access to our support forums where we can get help one-on-one!

Conclusion

When everything and everyone are online,  a personal website is a necessity for every creative. I truly hope that this guide helped you with designing a nice, cozy corner of the internet for yourself.

If you followed this guide and if it helped you in any way, please share your website in the comments, we would love to visit!

Take care 🙂

7 comments

  1. Amazing tutorial! One question though…

    Is it possible to display the portfolio categories in the home page instead? And to assign a photo to each category?

    Thanks!

    1. Hi Josh,

      Glad you like the tutorial! No, unfortunately, Easy Photography Portfolio plugin that we’re using here doesn’t have an option to have category thumbnails on your front page.

      I think you could try and “hack it” by being clever though. What I would try is create a new page and place a couple of images in it. Each image would represent 1 category (maybe photoshop the category name on top of the image.) Then I would link each image to the corresponding category page.

      Hope you got my idea. I’m not sure how this would look but maybe it’s worth a try! 🙂

  2. Hello,

    First of all, thank you for this great article !
    I love the way I can create portfolio now, as I’m a photographer. But I have a little issue : I created a portfolio without a name but with the category “journal”. With the url, I made a page named “journal” in my menu from this portfolio. In this one, I publish my daily work.
    But, the thing is this “journal” portfolio appears in the page ” Portfolio ” with the others, and I don’t want that, as I’d like for this one to appears only in the page “journal” I created in the menu.
    Could you help me please ? Is this possible to create a portfolio that doesn’t appear in the page “Portfolio” ?
    Sorry for my english, I’m french !
    Thank you for your help
    Marine

    1. Hi Marine,

      Here’s what I would do:

      Create 2 portfolio categories for your galleries – 1 would be “journal” and the other would be “work”. Assign all your galleries (except the Journal gallery) to “work”.

      Now go to Appearance > Menu. On the top right side of your screen, you will see a button called “Screen options”. Click on it and activate “Portfolio Categories”. A new tab will show up on the left side of the screen called “Portfolio Categories”. Toggle it open and add “Work” category to your menu. Then remove “portfolio” from your menu since you don’t want all your galleries to show up there. You can even rename the “Work” category and call it Portfolio but this time only galleries with Work category will show up on this page.

      Hope you understood what I’m saying here!

      Good luck!

  3. Hi,
    Thank you for the great theme. I’m on my way to upload images now, you can check my website if you want. I was just wondering is there a way to add social icons to the header?

    Thank you in advance.

    All the best,
    Mikeleito

    1. Hi Mikeleito,

      There isn’t enough space in the menu area to add social icons, but you have two other options:
      1. If you choose the hamburger menu (hidden behind a button), you can go to Appearance > Menu, create a new Menu and assign it to “Secondary Menu”. Then add all your social links as “Custom links” in this menu.
      2. Install any social icon plugin you like and add then add them to your About and Contact pages!

Leave a Reply

Your email address will not be published. Required fields are marked *