It's a a critical component to a successful freelance career to have a website to detail your services and showcase your portfolio.
With the wide variety of high quality WordPress themes available there is no reason why you can't have an excellent portfolio for your work - even if you haven't had prior web development experience. Yes, you can do this yourself.
In this tutorial, we're going to take a premium WordPress theme and work through each step in the customization process to develop a website for your freelance portfolio.
Before You Begin
Here are two considerations to keep in mind before you tackle this tutorial:
- Install WordPress - Make sure that you have WordPress up and running before you tackle this tutorial. While a new installation is preferred, this tutorial can also be followed with an existing installation.
- Beginner Focus - I wrote this tutorial with beginners in mind. If you've had little to no experience with WordPress before, take comfort, I've got you covered. If you have a lot of experience, this tutorial will serve as more of a guideline.
Choosing A Theme
Picking the right WordPress theme for your portfolio can be difficult. I recommend that you start by browsing the list of portfolio themes on Themeforest. For this tutorial, I'll be using Scope, designed by Orman Clark (a recent "Power Elite" author on Themeforest). While the examples will be specific to Scope, the general principles apply to whichever theme you choose.
Purchase and download the theme of your choice and unzip the theme package.
1. Read The Documentation
Don't skip this step. Even after completing hundreds of theme installations I still read the documentation first. While not all documentation is created equal, in more cases than not the theme developer goes to great lengths to make customizing the theme as painless as possible.
2. Install The Theme
Log in to your WordPress Admin and go to Appearance > Themes. Click "Install Themes" near the top right of the interface.
Next, click the Upload link and then Choose File. Browse to the location of your recently downloaded theme and select the theme zip file.
Note: Make sure the zip file you upload contains only the actual theme. Most premium themes come packaged as a zip file with the theme itself zipped up inside the initial package. After you decompress the file you initially downloaded, look for the zip file with the name of the theme.
Now, click Activate.
3. Review Theme Options
With the theme activated, it's time to review theme options. While some theme authors organize theme options in a different location, in most cases you can access the options by going to Appearance > Theme Options.
Explore the options and familiarize yourself with the customizations the theme offers.
4. Start Customizing
With the Scope theme, our range of customizations are relatively limited - which is just fine! It's a great theme out-of-the-box. Our goal is to implement a few style updates and make the theme our own. From Theme Options go to Styling Options.
For this tutorial, we're going to tackle three different customizations:
- Change the highlight color
- Add a tiling background image
- Change the background color of the footer
Change The Highlight Color
The Scope theme comes with a hot shade of yellow for a highlight color, which shows up in the header behind the caption, as the background color for the icons throughout the site, and on links when you hover over them. Within Styling Options add a color via the Highlight and Link Color option.
You can use the Color Picker or enter in a color code manually. I used Kuler.com to find a shade of green I liked. Two other great resources for choosing colors are ColorSchemeDesigner.com and ColourLovers.com.
Add A Tiling Background Image
Next up, we'll replace the default background color with a background image of our choice. Scope offers several options for working with background images. For this tutorial, we're going to add a repeating pattern that fills the background. First, choose a background image and click Upload Image, then, under Default Background Repeat, choose Repeat.
Note: If you're interested in using full background images, check out PhotoDune.net - you can get a great, royalty free background image for $3 or $4, depending on which size you choose. Once you've chosen an image, set the Default Background Position to Full Screen.
Change The Background Color Of The Footer
The Scope theme offers the ability to add our own Custom CSS. As a last touch, we're going to change the background color on the footer. The hex value is set to #222 by default. Let's change that to a slightly lighter value of #333.
Now, if you're new to CSS, that may look like Greek to you. Have no fear! You can skip the custom CSS altogether, or, if you're feeling more adventurous, take a look at this screencast I put together on how to experiment with styles in Safari, Chrome, and Firefox.
Beyond what we've covered here you'll also want to upload a logo or use the plain text logo option that the Scope theme offers. Scope also offers the ability to set a "Header Caption" which appears above your navigation menu. This can be a great place to include a phone number or a short message. This is also a good time to drop in any analytics tracking code you have.
If you'd like to go even further with customizations to the theme, you'll need to move beyond theme options. First, if you don't plan to upgrade the theme, you can edit the theme files directly and make changes in the code. If you'd like the ability to upgrade in the future, setup a child theme and make your changes there (recommended).
Here are some changes you might want to make:
- Customize Footer Text - You can remove the credit link or leave it there as a thanks (and include your affiliate link!).
- Replace Login Logo - The Scope theme includes a nice custom login logo. To replace it with your own, edit (or replace) the file custom-login-logo.png located in your theme images folder.
- Disable Comments - If you want to disable comments on pages you can use the WordPress interface or simply open up page.php and comment out or remove the comments_template function (currently line 29).
5. Create A Homepage
The Scope theme, along with most other premium themes, provides a custom homepage template and options for managing what content appears on the homepage. First, we need to create a new page. Go to Pages > Add New. Give the page a name (I just called it "Homepage") then, in the Page Attributes menu, select the Template drop-down menu and choose the Home Page template.
Next, Publish your page. Now, go to Settings > Reading. At the top, you'll see Front page displays. Switch the toggle from "Your latest posts" to "A static page", then for "Front page" choose your recently created homepage from the drop-down list and Save Changes.
Creating a good homepage is hard work. First impressions matter - a lot. When you're just getting started, you won't have much to work with. If you've already had a lot of work experience, though, a homepage is a great place to highlight some of that experience while drawing visitors (and potential clients) further into your site.
A good homepage should have the following:
- Context - When a visitor first lands on your site, assure them that they are in the right place. If you are a web developer, it should be obvious by the words and graphics you've chosen. If you specialize in print work, make it obvious. If you're a writer, spell it out. You only have a few seconds to make a positive impression.
- Credibility - After establishing context, give people a reason to care. Why should they work with you? The best way to establish credibility is to let others do it for you. Highlight third-party endorsements or showcase your best clients and the results you helped them achieve.
- Call To Action - Once you've established context and credibility, offer a clear next step. This is where many sites fail. Direct potential clients to learn more about your service or go straight to checking your current availability. Make sure that the next step is obvious.
Theme Specific Recommendations
The Scope theme (and most "Portfolio" style premium themes) has a very visual focus for the homepage template. For those of you with a visually oriented portfolio, I recommend that you follow the theme recommendations and make use of the sliders and other homepage options that the theme offers.
6. Create An About Page
An "About" page is very important. When a potential client considers you for a project they want to learn what they can about you. An "About" page gives you an opportunity to tell your story and establish a personal connection.
From Pages > Add New, create a page called "About" (or perhaps "About Me" or "About [Your Name]") and get to work on the content.
Here are some guidelines to keep in mind:
- Make It Real - Write as if you were talking to the individual in person. You're an interesting individual. Don't hide behind awkward sentences and a third-person voice.
- Prioritize - Your visitors are there to learn about you, but before you go into your life-story, keep their priorities in mind. This is a website for your freelance portfolio and, as such, introduce yourself briefly then focus on what you can do for them. After that, you can share your life story.
- Keep It Current - Be sure to revisit your "About" page on a regular basis to make sure that the information is up-to-date and accurate.
And here are some ideas to consider:
- Use Your Medium - Bring your area of expertise into your "About" page. If you do videography work, create a video on your page (a great idea, even if you don't do video work). If you're an illustrator, create some illustrations for your "About" page that reflect your style and your favorite type of work. Take your area of expertise and look for opportunities to weave it in.
- Call To Action - Take opportunities throughout the page to invite people to go deeper into your site. If your site includes a blog, include a list of your favorite posts. If you've been published elsewhere, reference the publications. As you describe the work that you do, invite people to learn more about your services or view your portfolio.
7. Create a Services Page
A "Services" page lets potential clients know what you offer and can help them decide whether or not you are a match for their needs.
For this tutorial, we're going to focus on creating a "Services" page with the following attributes:
- A "Full Width" template (no sidebar)
- A three-column layout for three different services
- A custom background image
From Pages > Add New, create a page and give it an appropriate title. From Page Attributes choose Full Width from the Template drop-down.
Working With Shortcodes
The folks at WordPress.com describe a shortcode as "a WordPress-specific code that lets you do nifty things with very little effort." The majority of premium theme developers provide theme-specific shortcodes that you can use within the theme. To create our three-column layout we're going to make use of shortcodes.
You can write the shortcodes directly into the Visual Editor or, from the editor menu, click the shortcode icon (its availability and appearance may vary from theme to theme) to use the theme's built-in shortcode interface.
You can grab the code for an example three column shortcode here.
Adding A Custom Background
The Scope theme, and portfolio themes like it, offer the ability to set a custom background image on a per-page basis. To make use of this, scroll down below the main editor and look for the Page Settings panel. If it's not visible, go to Screen Options (top right corner) and be sure that the "Page Settings" option is checked.
Within Page Settings click the "Browse" button to upload an image and then click "Insert to Post" (within the image managing dialog) to add the image URL to the field. In my case, since I've chosen another pattern image, I'll also set "Custom Background Repeat" to "Repeat". If you use a full-size image, you would set "Custom Background Position" to either "Full Screen" or "Centered", depending on the size of the image.
- Keep It Simple - You may be able to offer 20 different services and that doesn't mean you should. I recommend that you work a balance between listing the services that are the most profitable for you and the ones you enjoy the most (hopefully they're the same!). In my experience, 3-5 services are the ideal.
- Include Your Prices - Listing prices up-front helps you qualify potential clients and saves your time (and theirs) by offering a clear sense of what to expect before any initial contact is made.
- Lead To More Detail - As time allows, take each of your services and expand them into more detail on an additional page, referencing each new page from the main services page. Perhaps you can include an overview of the process for a particular service. You might also include references to examples in your portfolio or third-party endorsements for that particular service.
- Offer Availability - Let folks know if you're currently available to take on new projects. If you're booked up for the next month, say so! This helps to set a realistic expectation for the potential clients who do get in contact with you and serves as an aspect of social proof (think about the food service industry - who wants to eat at an empty restaurant?).
8. Create a Contact Page
A "Contact" page offers potential clients options for contacting you.
For this tutorial, we're going to focus on creating a "Contact" page using the "Contact" template, provided by the Scope theme.
From Pages > Add New, create a page and give it an appropriate title (perhaps, "Contact Me!"). From Page Attributes choose Contact from the Template drop-down.
- Write An Intro - Don't just stick a form on an empty page - include a short introduction that addresses the reader, reflects your personality, and encourages them to contact you.
- Set An Expectation - Let folks know when they can expect to hear back from you.
- Grow To A Form Plugin - In the beginning, using the theme's built in contact form template is just fine. When you want to do more, though, I recommend you move to a forms plugin. Contact Form 7 is a solid free plugin. On the premium side Gravity Forms is a great option, as is Quform on Code Canyon.
9. Create a Portfolio
Next up is the heart of this tutorial, creating a portfolio index and adding entries to our portfolio.
For this tutorial, we're going to focus on accomplishing the following:
- Create a portfolio index using the theme's "Portfolio" template
- Define a list of portfolio types
- Add individual entries to the portfolio
From Pages > Add New, create a page and give it an appropriate title. From Page Attributes choose Portfolio from the Template drop-down. The portfolio page will now automatically display your entries as you publish them.
Defining Portfolio Types
The Scope theme makes use of custom taxonomies in WordPress to let you organize portfolio entries by type. Most Portfolio themes offer similar functionality.
From the Portfolios menu choose Portfolio Types.
Now, you can predefine the types of portfolio entries that you're expecting to publish.
Here are a few suggestions to keep in mind:
- Don't Get Stuck - If you can figure out your "types" right away, great. If not, don't sweat it. Do your best and revisit later. Effective organization requires continual improvement, especially as new entries are added or older entries removed.
- Don't Go Crazy - A list of 3-5 portfolio types is the ideal, with some exceptions depending on your particular type of work.
Adding Portfolio Entries
From Portfolios > Add New to create your first portfolio entry. Give it an appropriate title and a description. Then from the Portfolio Type interface, choose the appropriate type(s), keeping in mind that an entry may easily belong to more than one type.
Next, set the visual options for the entry and upload your images or, depending on the "Portfolio Type", you can embed an audio or video file instead. In the Scope theme, the settings are organized under the Portfolio Detail Settings just below the main editor window.
Last, set a Featured Image for your entry, which will be used to represent the entry in the portfolio index.
- Layout Updates - For visually focused portfolios, the default theme layout works great. If your portfolio is less visual in nature, the wide format layout with a large image can prove a bit difficult to manage. If you're feeling adventurous, tackle the changes yourself via the single-portfolio.php template and Custom CSS (or direct edits to style.css). If you need support, visit the theme's Support Forums, being sure to first check and see if someone else has already had the same request answered.
- Portfolio Details - You may want to list more details than the "Date, "Client", and "Portfolio URL". In the Scope theme, edit theme-portfoliometa.php to add additional custom fields, using the current fields as a guideline. Next, edit single-portfolio.php and follow the examples of the three default fields.
- Portfolio Sorting - The Scope theme offers the ability to sort and prioritize entries in your portfolio. From the Portfolios menu choose Sort Portfolios and follow the instructions.
- Include a Call To Action - Along with each portfolio entry include a clear call to action, inviting potential clients to learn more about your services and contact you to find out how you can help them.
- Choose Work Carefully - Be selective in choosing which projects and types of work you put into your portfolio. Keep in mind that you tend to attract the type of work that you've already done (it's a paradox when you're first starting out, I know). Highlight the types of work in your portfolio that you want more of, not just a grand list of all the work you've done.
- Focus On Results - As you write the descriptions for your portfolio and choose the accompanying visuals, focus on highlighting the results of your work more than the work itself. Clients hire you for results, not just to pay for work to be done. Bring attention to what your client accomplished as a result of working with you and note, wherever possible, the impact that it had on their business or organization.
10. Add a Blog
The Scope theme, along with most portfolio themes, is built to work with a blog. Adding a blog is a relatively major decision and for simplicity sake, we're going to assume that you've given it careful thought and decided it was a match.
From Pages > Add New create a new page for your blog. Give it a title and leave the content empty. This page will become the index for your blog posts. Next, go to Settings > Reading and choose the page you created (mine was titled "Blog") from the "Posts page" drop-down. Save your changes.
11. Add A Menu
Now that we have some pages to work with it's time to add a menu. From Appearance > Menus create a new menu (I'm calling mine "Navigation").
Next, assign the menu to the theme header using the Primary Menu drop-down.
Now, use the Pages widget, right below Theme Locations and Custom Links to assign the recent pages you've created. In our case that includes "Blog", "Portfolio", "Contact", "Services", and "About". Next, drag and drop each menu item to order them accordingly. Save when you're done.
12. Working With Widgets
By default, the Scope theme will use a set of four basic widgets on your blog posts and pages sidebar. While you may want to leave them as is, odds are you're going to want to customize them.
The Scope theme, and many like it, offer multiple sets of widget locations. For Scope, those locations are:
- Sidebar - The Scope theme offers a single sidebar location, allowing you to set widgets that appear on all the sidebars, whether on posts or pages.
- Footer - The Scope theme includes three footer locations, allowing you to set a widget on the left, center, and right side of the theme footer.
To customize the widgets, go to Appearance then Widgets.
Working with widgets is outside the scope of this tutorial, but here are some recommendations to keep in mind:
- Keep It Simple - Widgets are great. Don't overdo it, though. 3-5 widgets is probably the most you want to put on a general, site-wide sidebar. If you want to have more widgets on, say, your blog post pages, consider customizing the theme to include a separate widget location.
- You Can Expand - The WordPress plugin repository offers additional widgets. You can browse the general widget tag (which includes a mix of plugins that include their own widgets along with stand-alone widgets) or you can browse the widget only tag which offers just stand-alone widgets. Code Canyon also offers a growing list of premium WordPress widgets.
13. Wrapping Up
Whew! We're almost there! Now it's time to take a step back and do a review.
Go through each page and portfolio entry with an editor mentality, looking for content that needs updating and fine-tuning. Look at each page as a potential client would see it, challenging yourself to make sure that your work and service offerings are presented well along with a clear call to action.
As you review, take note of ideas for future updates and further improvements. Note, perhaps, what you like most about the current theme and what you'd like to see improved in a future version (be sure to let the author know) or perhaps even in a new theme entirely down the road.
Once you've completed a personal review, send your website out to a few trusted friends and family and ask for feedback. Don't focus on feedback on the aesthetics but rather on the content and organization. Ask them if what you do and what you're offering is clearly conveyed. Ask for any suggestions to improve the message conveyed.
A peer review is important and has the benefit of offering a third-party perspective on your work and, if you're just starting out, the first list of people that you ask to review your site may even become your first clients.
We've covered a lot of ground. You've gone from a brand new theme to a customized portfolio for your freelance business. Well done!
Have questions? Ask them in the comments below. If they're technical questions you are welcome to ask, though for expedience sake, please direct any theme specific questions to the theme authors themselves.
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post