How to Create a WordPress Portfolio Website for Freelance Projects

How to Create a WordPress Portfolio Website for Freelance Projects

How to Set Up Your Own WordPress Portfolio/Blog from Start to Finish

This is geared towards people that have never used WordPress and never set up hosting and all that jazz before. But if you have then should be able to get through it pretty quickly. The idea is to do this for as little money as possible so you can get a portfolio up and working to show to potential employers and clients. This will make you seem more professional and can lead to securing lucrative work for yourselves.

This is a very comprehensive and long tutorial spanning over 4,500 words and containing 37 screenshots. I try to be as detailed as I possibly can so there is no confusion for you when following it.

What you will learn in this guide:

  • How to purchase a domain
  • How to purchase and set up hosting
  • How to install WordPress on your domain
  • How to find a free theme for WordPress
  • How to arrange all of your content on the page
  • Make a working contact form
  • Create a portfolio section for all of your projects
  • Which plugins to use
  • How to add Google Analytics
  • And probably more stuff that I forgot about

 

If you are a freelance writer or want to become one, it is very important for you to have a website to show potential clients that you are a professional writer and you are going to get the job done. Also, the ability for them to see previous works you wrote is crucial, so they can see your writing style, command of the English language, etc.

This also works for any profession that wants to show off a portfolio of their work, like a graphic designer, web developer, architect, model, photographer, etc.

In this extremely detailed tutorial, I am going to walk you through, step-by-step, the process of setting up your new personal portfolio/blog on WordPress. In fact, I am literally going to be doing this as I am writing this guide and taking screenshots of every step to avoid any confusion.

I have not started anything currently, but I have set up many WordPress sites before. I have developed several custom themes from scratch for clients, so I promise I know what I am doing.

I am going to start from the very beginning of buying a domain, setting it up with hosting, installing WordPress on that domain and adding content to our site to make it look presentable. I am going to do everything with the idea of keeping costs as low as possible, because I want the barrier to entry into your field of choice to be very easy for you.

I am going to use a basic, pre-built, free theme that looks professional. This will get the job done for your first experience with WordPress and will avoid paying $40 – $100 for other more complex themes that have a whole bunch of features you will never use.

The only things you will have to pay for are your domain and hosting. There is no way around this if you want to have a real website. The total cost of this can be done for under $30.

Once you get this installed, add all your content, and learn the ropes of WordPress you are welcome to explore some paid themes at Themeforest.

OK, let’s begin…

Step 1: Purchase a Domain and Hosting

We are going to be using HostGator to purchase the domain and for hosting. There are tons of hosting companies out there, but I have been using HostGator for years and I have never once had an issue with my hosting. If it isn’t broken, don’t fix it.

Head on over to HostGator to start the process of purchasing a domain and hosting.

Either click Choose a Plan or just scroll down a little bit and you will see the plans. For right now, we only want to go with the Hatchling Plan. If you decide down the road you want another website, you can easily upgrade your plan, but we are only doing one website right now.

 

 

After clicking the Hatchling Plan, you will be asked to choose a domain.

I typed in nathanbeers.com and it is available. I guess I will go ahead and buy it. It wasn’t available when I started my website, so I had to get nathanbeers.net. I guess now I can switch over to the .com version.

Funny story: About a year ago, someone emailed me and asked me if I wanted to buy nathanbeers.com for $200. I said not a chance, go away, I am fine with .net. And look, now I get it for $13. Looks like the joke is on them.

 

hostgator buy domain

 

As far as which domain to choose, it really makes no difference. If you want to just go with your name, that works. If you want to go with something about your niche, you can do that too, like techwritergirl.com or graphicdesignguru.com whatever. It is probably the least important part of all of this.

Now, you will notice right below your domain, it will say Add Domain Privacy Protection for $14.95. Personally, I would get rid of Privacy Protection to save some money, but that is up to you. You may get a few some spam emails or phone calls after you sign up with people trying to sell you stuff. Just hang up and block their number or send the emails to spam.

Pick whichever options you want and click “Continue to Checkout”. You should now be prompted with an option to create an account or login. I am assuming nobody reading this has an account, so put some info in there and create your new HostGator account. If you happen to have an account, then go ahead and login.

Now comes choosing the plan and billing cycle.

The package should already say Hatchling. If it doesn’t then find Hatchling in the dropdown and select it.

Billing cycle is completely up to you. The longer you do, the better price you get.

 

 

Remember, you will be paying the whole thing up front, so if you select 36 months @ $2.75/mo then you will pay 36*2.75 right up front.

Now enter a user name and security pin and move onto entering in your billing info.

After entering in your billing info move onto the next section where they try to upsell you a bunch of crap. Just uncheck everything and move on.

Finally, we are at the checkout stage. Review your order and make sure everything is to your liking. I am only signing up for a month-to-month billing cycle, so mine looks like this.

 

 

Apparently, there was a coupon added to mine automatically called FREEUPGRADE3. HostGator always has some random coupon deal going on so, depending on when you’re reading this, your coupon may be different, and your pricing may also be slightly different.

I also apparently forgot to remove one of the addons, as you can see I got a Hosting Addon for $14.95. Without that addon, the price is around $25. I said we could get it under $30 in the beginning. If you pay for more months in the beginning, your cost will be more up front, but less overall. I would definitely recommend that if you can afford it.

Notice they have a 45-day money back guarantee. In case you can’t follow my guide in setting up WordPress or you decide you actually hate your profession and don’t want anything to with a website, you can always get your money back. They won’t hassle you about it. Just make sure you decide within 45 days or it will be too late.

They have 24/7 support. I have been on their online live chat at 3am before, so I can verify they do have people working at crazy hours.

Notice: The domain you purchase is not eligible for a refund, but the hosting and the privacy is. So, you would be out the $12 or $13 for your domain.

Go ahead and agree to their terms and finish the checkout process. If you want to read their terms and conditions, go for it. I never read any of that stuff though. I prefer to wing it.

Assuming your credit card was not declined, you should see a message looking like this:

 

 

After maybe 30 seconds, I was redirected as promised. If you weren’t after a minute or two, then click the link at the bottom.

You should be redirected to a page like this:

 

 

Step 2: Install WordPress on Your New Domain

Click on the Domains tab at the top and see if your domain is still pending. There is a very good chance it is. Mine is unfortunately….

 

 

Now, you will likely need to wait for a little while. Unfortunately, HostGator has to get everything registered with ICANN (Internet Corporation for Assigned Names and Numbers) and get the hosting all setup so it takes a little while.

I actually called them and spoke to a customer service rep. named Will, and he said the account has to go through a setup process and should be ready within an hour in most cases. I didn’t remember this because I haven’t gone through this process in a few years.

Speaking of customer support in case you did ever want to contact HostGator by phone, you can call +1 713 574 5287 or you can hop on the live chat here. They are available 24/7 and always seem helpful.

Now would be a great time to check your email, the one you used to sign up with HostGator.

The first email should have all your login information for the HostGator customer portal. I recommend saving that email in a folder. The second email you should have received will have more login information. This is for the Control Panel (cPanel). Don’t worry about the Nameservers or the Server IP. I also recommend saving that one in the same folder you maybe just created.

The cPanel is where you can go to manage the files and database of your website. You shouldn’t have to ever login to that unless you are buying a second domain name and adding that domain to your current hosting. I doubt that scenario will apply to anyone here because we are just doing one website.

Well, I just refreshed the page and looks like my domain is ready to go. Only took about 15 minutes.

 

 

 

Step 3: Install WordPress on our New Domain 

Once your domain and hosting has been set up by HostGator, you are ready to install WordPress. HostGator makes this relatively painless for us.

Click the “Hosting” tab at the top and then click “Get Started with WordPress Today.”

 

hostgator dashboard

 

That should direct you to this page here:

 

 

 

Don’t worry about that stuff at the bottom that costs money. We are doing this installation ourselves for free.

Select your domain, leave the directory blank and click Next.

The next part will have you fill in your blog title, user name, first and last names, and your email. The blog title can easily be changed later so this is no big deal. I put Nathan Beers Portfolio. The title is what Google will show in search results for your home page. The user name is the name you will be using to login to the back end of your website to update content. The email is the one that forgot password links will go to. Fill all of those out, check the two boxes below, and click next.

 

 

 

WordPress should now begin installing and likely finish within 10 or 15 seconds.

 

 

WordPress is officially installed on your website. And to think they were asking that you pay $100 – $400 to install it for you and we just did it for free in a few minutes.

Go ahead and click login. The login to your website will always be at http://yourdomain.com/wp-admin

It’s possible it could take some more time for the DNS to propagate and you might have to wait anywhere from 5 minutes to a couple hours for your site to show up. This is standard no matter which company your purchase hosting from.

The login page should look like this:

 

wordpress login page

 

Once your logged in, you will be taken to the main dashboard page. We can now move on to the theme process. 

Step 4: Find a Theme (FREE)

We need to add a theme to our WordPress install and we are looking for a free theme to start out. There are plenty of options out there, but this is one that I have used before and I know it will work for what we want to do. It has a portfolio component on the home page and a blog component already set up. That is all we need for now.

Open up a new browser tab and go to https://graygrids.com/item/responsive-free-onepage-portfolio-wordpress-theme/

Click the Download Now button then Proceed to Checkout. You have to go through the checkout process, but it doesn’t cost anything. After you fill out the form click the link to download it. Ta-portfolio-1.1.1.zip.

*Important note here: If you want to choose your own theme from a different site, feel free, but it is impossible for me to cover every theme in this tutorial. I chose one that fits what we need and go with that.Most themes come with instructions on how to set them up, at least the paid ones do. The free ones don’t always have instructions, so if this is your first time ever using WordPress, I recommend following this tutorial and using this theme.

We now have a theme ready to upload into WordPress.

Go back to your WordPress dashboard and go to Appearance > Themes

 

wordpress add theme

 

Disregard the default themes like Twenty Seventeen. Those are terrible and you can delete them if you like. Click Upload Theme at the top of the screen.

 

wordpress upload theme

 

Find ta-portfolio-1.1.1.zip unless you decided to go with a different theme and upload it. Click the Activate link when it is finished uploading.

 

wordpress activate theme

 

Hurray, we have a theme! Now, we need to get some content on the site and rearrange a few things to get everything working. We will also be cleaning the site up a bit since HostGator adds some extra plugins that we don’t need.

Step 5: Changing Site Settings

Before we change the settings, we need to add a Home page really quick. On the left menu, go to Pages > Add New. Give it a title of “Home” and change the template to “Portfolio”, then click Publish. That’s it, now we have the basics of a home page.

 

wordpress create page

 

Next, we need to actually set the page we called home as the home page. On the left menu, go to Settings > Reading.

 

wordpress settings

 

The top setting is “Your homepage displays”. We to change that to “A static page” and then select “Home” from the select box. Then click “Save Changes” at the bottom.

 

wordpress set home page

 

Next, we need to change our Permalinks settings. If you don’t know what that is, don’t worry about it. It’s just the structure of the URLs.

On the left menu go to Settings > Permalinks and make sure “Post Name” is selected. Then Save the changes at the bottom. If it is already on Post Name, then you are good to go, but mine was on “Custom Structure.”

 

wordpress change permalinks

 

Step 6: Adding Portfolio Projects

Alright, let’s add one portfolio item quickly and then check our progress, so you can see how everything is coming together. I will just put in some fake information. On the left menu go to Portfolios > Add New

 

 

Here, we are going to enter the title, body, excerpt, client name, client URL, and featured image. Then hit Publish.

I made up a fake article that I supposedly wrote for The Next Web, grabbed their logo from Google, and made it the featured image of the page as you can see on the screenshot below.

 

wordpress create new post

 

I think we should check out our progress. It’s good to actually see proof that you are accomplishing something. Click your site title in the top left corner to go to your home page, like where mine says Nathan Beers Portfolio.

 

 

You should see something resembling this:

 

wordpress ta portfolio theme

 

If you scroll down further, you should also see a section for Blog and Contact.

 

wordpress ta portfolio theme

 

Now we are finally getting somewhere! We still have more stuff to do, but at least you can see how it is all coming together now. You can click on your portfolio item to see how that works, as well. You can see what the excerpt looks like, and the featured image.

 

wordpress ta portfolio

 

Then, you can click learn more and you will see where the body paragraphs go. Also, I have noticed it shows the categories with a blank next to it, so if you go back to the back end of your web site (Click the title in the top left again on the black menu). Then click Portfolios on the left menu. Next, click the portfolio item you just entered moments ago and click “Add New Portfolio Tag” on the righthand side.

 

 

I will enter Technology and press enter. Then hit the blue update button right above it.

If you go back to your home page, you will see the section has updated to include categories, acting as a filter for people visiting your site. Also, Category won’t be blank anymore if you click on your portfolio item.

 

ta portfolio theme

 

Now that you know how to add your portfolio projects, you can add the rest of them or continue the tutorial and come back to them later.

Step 7: Add a Navigation Menu

Let’s add a little navigation menu to the top so people can easily navigate between the sections on our home page.

On the left menu, navigate to Appearance > Menus.

 

wordpress add menu

 

To create a new menu, type your menu name. It doesn’t really matter what you put here. I put Top Menu because it goes at the top of the page. Then click “Create Menu”.

 

wordpress create menu

 

Over on the left, click “Custom Links” and enter #portfolio for the URL and Portfolio for Link Text, then click Add to Menu. (#portfolio must be all lowercase)

 

 

Repeat the same process but use #blog and Blog, and then a third time with #contact and Contact. Your menu should look like this:

 

 

Make sure you have Primary menu checked and then Save the menu. You can then open your home page again to look at your new navigation menu. If you click Portfolio, it will scroll to the portfolio section. If it doesn’t, you may have spelled #portfolio wrong or used a capital P. It must be all lowercase.

Step 8: Make a Blog Post

Ok, let’s go ahead and learn how to create a blog post.

On the left menu Click on Posts. We want to first get rid of the Hello world! post. If you hover your mouse over it, a little menu will show up and you can click on Trash.

 

wordpress delete post

 

Now, click Add New at the top to add our first post.

I put “How I Make Money as a Freelance Writer” for my title. I put in some lorem ipsum in the body of the blog post, but you will also notice from the screenshot below that I inserted an image. If you want to insert an image, simply click the cursor in between the paragraphs you want the image to go, then click Add Media just above the Body area where your text is.

 

wordpress upload image

 

When adding your media, you will notice the setting in the bottom right that says Alignment, Link to and Size. I typically go with Center, None, and Large, but you can put them however you like, then click “Insert into post” at the bottom. After you add it to the post, you can click you mouse on the image and some options will appear. You can resize it from the corner then.

 

wordpress create post

 

If you decide you want to move the image to a different spot, you can drag and drop it.

We also need to add a Category, Tags, and a Featured Image, just like we did when we created our Portfolio posts. Go ahead and add those on the right side and Publish. Our first blog post is up! After clicking Publish, you can click “View Post” on the top black menu to check it out.

I’m sure you will notice all the stuff on the right sidebar, like recent posts, recent comments, archives, etc. Don’t worry about that yet, as we will be customizing that in a few moments. You will be able to control what you show there.

 

wordpress blog post

 

Step 9: Adjust Theme Settings 

This theme comes with several options we can change around to our liking, so let’s go ahead and do that now. We are going to be doing several things within this Theme Panel menu.

On the left menu go to Theme Panel > Homepage Settings

 

wordpress theme options menu

 

For logo and favicon, I created something very quickly in Photoshop. You could also do it in paint or hire someone on Fiverr to make a logo. People there will make you a logo for $5 or $10. For header image, I used a picture of myself and for the Header Title, I put “Nathan Beers.” Header Tagline I put “Copywriter – Content Writer.” Make sure you click “Save Changes” when you are done.

 

wordpress theme options

 

You can open up your home page after that if you want to see the results. Notice below – my logo went in the top left, replacing that long title we had before. My name and tagline is there as well. Here is mine:

 

wordpress ta portfolio theme

 

Note: If you don’t want your picture there, leave the picture field blank.

Next, move down the list to Portfolio Settings within the Theme Panel.

 

 

Here, you can adjust the number of columns your portfolio projects are displayed in and whether you want to have the category filter show up. All of that is completely up to you. Personally, I leave all those settings at the default setting.

Next is Blog Settings. Most of the stuff here is pretty self-explanatory. I also leave everything at the default settings, but feel free to change anything you like.

Up next is Social Settings. You can add any of the social accounts you like. I added LinkedIn, Facebook and Twitter. These icons will automatically show up on the home page down near the footer once we add the widget later. Save your changes and move to the next item, Footer Settings.

Here, you can add a custom copyright message. I put Copyright © 2018 nathanbeers.com.

Save your changes and move to Contact Settings. Here, you need to put the email in you would like any contact inquiries to go to.

That is it! You don’t need to worry about Custom CSS, Import/Export, or Theme Information.

We are so close to being done. Just a few more things.

Step 10: Widgets

Go to Appearance > Widgets on the left menu.

 

 

Here you will see all the different items we had in our sidebar on the blog posts. You may customize this however you like. You can drag it away or drag widgets from the left into your sidebar. Personally, I get rid of Recent Comments, Archives, Recent Posts and Meta, and added TA Portfolio: Post Tabs Widget, so it looks like this:

 

wordpress edit widgets

 

Another thing I like to do here is to find the widget named TA Portfolio: Social Widget and add that to Footer 2. I gave it a title of Social. This adds your social icons to your footer and makes them center aligned on the page.

 

 

You officially have a working website! Feel free to check out your home page and blog post to look at your changes. There are a couple more things that I would recommend doing, so read on if you like.

Step 11: Plugins

One of the coolest thing about WordPress is the number of plugins available to you for free. There are paid plugins as well, but I believe there are now over 55,000 free plugins to choose from.

Our WordPress install comes out of the box with some plugins that we don’t need, however, and we can get rid of them now.

On the left menu go to Plugins > Installed Plugins

 

wordpress add new plugin

 

The plugins you can say auf wiedersehen (goodbye) to are Hello Dolly, MOJO Marketplace, OptinMonster API and WPForms Lite. First you must deactivate them then you can delete them.h

The ones we will keep are Akismet, Jetpack, and the Google Analytics one. We need to configure these three plugins to do what we want.

  1. Akismet
    1. This plugin fights those spam comments for people trying to get easy links back to their site by having robots post on blogs everywhere. Click Settings under Akismet
    2. Click Get your API Key
    3. Click Activate Akismet
    4. Click Add Personal Subscription
    5. When it asks How much is Akismet worth to you, move the slider to 0 and click Create Subscription.
    6. Click Activate this site.
    7. Click Save changes
  2. Google Analytics by Monster Insights
    1. This requires you to have a Google Analytics account, which I highly recommend. This is the best way to keep track of stats for your site. It’s free and you can use your Gmail account, which I’m guessing you already have.
    2. Go to https://www.google.com/analytics and click Sign in > Analytics at the top right. If you don’t already have an Analytics account, it will ask you to sign up.
    3. Input all the information, like the Website name and URL. You can leave everything checked and click Get Tracking ID. Then accept the terms and conditions.
    4. Go to the Google Analytics by Monster insights inside WordPress and click “Authenticate with your Google account.”
    5. Login with Google, allow permissions, find your site and click All Web Site Data, and click Complete Authentication
    6. That’s it.
  3. Jetpack by WordPress.com
    1. Back at the list of plugins page Plugins > Installed Plugins click “Jetpack” under Jetpack by WordPress.com
    2. Click Set up Jetpack and then you can login with your Google Account or create an account with WordPress.com. I think it’s easier to just use Google.
    3. Click the Start with Free à button at the bottom.
    4. Click the X. You don’t need to activate all their recommended features.
    5. Under performance you can switch on Image Performance.
    6. So, this will make all your images load faster, give you site stats, activate one of the widgets we put in the sidebar of your blog posts, and track views and display them on your blog posts

 

Your site would function fine without any of these plugins, but these plugins help. Many plugins are not really necessary but can add extra features. If you think of something else you want for your site, simply Google for it and add “wordpress plugin” to the end of your search and most likely something will pop up.

Grab the title of the plugin from your Google Search and go to Plugins > Add New

 

wordpress add new plugin

 

There, you can search for the plugin and install/Activate it. You can also see how many people have installed it and the overall rating.

Step 12: Conclusion

You now have a fully functioning and well-configured WordPress portfolio and blog website. I hope you were able to stick it out to the end and get everything set up.

If there are any specific plugins you want me to run through and add to this tutorial or anything else, like something not working properly, feel free to reach out in the comments or in an email and I’ll be happy to try to get you back on track.