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!
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!
Log into your WordPress admin panel.
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”.
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.
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.
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
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.
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.
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”.
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.
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.
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.
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.
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.
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.
There are 6 things you should do when you create each new gallery:
- Give your gallery a title
- Give your gallery a subtitle (optional)
- Describe this gallery (optional)
- Upload the cover image for this gallery in the Featured Image area
- Upload all images in the Photography Portfolio area
- 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.
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.
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.
Go to Plugins > Add New and in the search field type in “Post Types Order”.
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.
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.
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.
Now that you assigned your categories to your entries, go to Appearance > Menus.
Click on the “Screen Options” button and activate Portfolio Categories.
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.
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.
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:
You can see it live here.
Creating a contact page
Go to Pages > Add New and call your page “Contact.”
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”.
In order to add some visual interest to the contact page, upload an image in the Featured Image area.
Write some text in the content area. Be short and concise. Add your email address and any other relevant information.
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]
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:
Go to Plugins > Add New and search for and install “Contact Form 7”
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”.
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.
Click the “Save” button. A contact form shortcode will be automatically generated for you.
Select and copy it.
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!
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.
Go to Pages > Add New.
Create a new page and call it Blog. You don’t need to write anything in the content area.
Go to Settings > Reading and in the Posts page area select your Blog page.
Click the “Save Changes” button.
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.
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!
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 🙂