How to Create a Free Portfolio Website Using WordPress.com
Every creative professional needs some form of online portfolio where they can share their work and present themselves in a positive light, and while it’s a good idea to post your profile at some of the many portfolio sites available on the internet (Carbonmade, deviantART, and Coroflot to name a few), it’s crucial to have a home base to direct people to. That way, you can control the message you’re trying to project about yourself, your work, and how to contact you.
Unfortunately, designing your own website can sometimes be a daunting task, and not everyone has the time or the skill to master CSS or HTML, not to mention the funds to hire a web designer. And yet, sacrificing customization for affordability isn’t exactly an appealing Plan B.
The Solution
There is, however, a way to find a healthy balance while still presenting a professional portfolio that combines the essential elements of a gallery, About page, and Contact page with the added bonus of an embedded blog. I recently devised a method of achieving all of this in just a few hours by making creative use of a free WordPress.com blog template. The intention of this article is to show you how you can do the same. But first I’d like to explain the reasons that you might want to take this approach.
The Why
The most obvious benefit of this technique is the minimal investment of two of your most important resources: time and money. As I mentioned above, I created my site in just a few short hours and spent the whopping sum of $9.97. You can do it for free if you don’t mind keeping the “.wordpress.com” suffix on your domain, but for that extra professional touch I recommend spending the money to get rid of that. The most you’ll have to spend is $14.97 to register your own domain, but in my case all that was required was the transfer of my own domain from a previous website that I was unsatisfied with (hence the $9.97 that WordPress charges to do this).
Another benefit that’s not so obvious was brought to my attention by Jeff Fisher of Jeff Fisher LogoMotives, in a recent interview that I conducted for Episode 5 of the Escape From Illustration Island Podcast. In our conversation about social networking, Jeff told me about his concept of the “blogfolio”, where you use your blog as the main portal for sharing your work and promoting your business. Jeff explains that this allows your site to show up more often in search engines due to the fact that people tend to update their blogs more often than their portfolio websites.
To be sure, using a free WordPress blog template means giving up total customization, but in return you get a professional-looking, standards-compliant, search-engine-friendly website and the support and security that WordPress has to offer. The beauty of using WordPress is that it’s one of those rare occasions where something is easy, fast, free, and valuable all at the same time.
The How
Through my experiences with using WordPress to create Escape From Illustration Island, I learned to appreciate the fact that you can make a blog feel more like a website through the use of pages. This allows the visitor to navigate to different places on your site, rather than just scroll through your latest blog posts. That being said, I hadn’t quite figured out how to include a gallery that allowed people to click on thumbnails to enlarge the images they wanted to view. After all, there are indeed limitations to how much you can accomplish with WordPress.com sites.
That all changed when the team at WordPress introduced the “Image” option to the list of widgets for the sidebar. With this option, you can turn your sidebar into your thumbnail gallery, allowing visitors to click on each one to see a full-size version. (The Text widget offers another way to do this, but requires some basic knowledge of HTML that I won’t cover here.)
Here’s how it works:
The basic idea is to have each portfolio image on its own page, with an accompanying thumbnail in the sidebar.
First, register a blog and choose your template theme. In my case, I found the Vigilance theme to be best suited for this approach. Next, create a page, but do not name it. This ensures that it won’t show up in the menu bar, which we don’t want to happen because this page will only contain an image in our portfolio, which we only want accessed by clicking on its future thumbnail in the sidebar. Simply place the image of your choice and publish the page. Then click on the “View Page” button underneath the empty Title box. Ctrl-click (Mac) on your image and copy its address, then go back to the WordPress Dashboard and choose Widgets under the Appearance section. Here you will find the Image Widget. Paste the image address on the “Image URL” line, then enter the URL of the page that the image is on by going back to that page and copying it from the browser. Lastly, set the width to 125, and leave the height blank. If you do this for all your thumbnails, they will all be the same width on your site, which will be visually pleasing for the viewer.
(Note: For some reason, any time you rearrange the thumbnails in the sidebar, you’ll need to clear the Height box again. Otherwise, the height of your image will be stretched to its original size.)
So now you have an image on its own page and a thumbnail in the sidebar. Just repeat this process for every image that you want to add. One of the added features of this approach is that your thumbnails will appear on every page of your site, giving your visitors every opportunity to see your work.
Once you’ve uploaded all your images, and created corresponding thumbnails, you can create the other essential pages of your site, such as the About and Contact pages. I like to keep my sidebars clean, so as to not distract from the thumbnails, but I did decide to add the Categories Widget, and title it “Blog Posts”, so that people have a way to get to the blog portion of my site.
Well, there you have it. If you’re reading this somewhere other than my site, check out my version of this approach.
Did you find this tutorial helpful?
What are some other creative ways that you’ve found to build portfolio sites like this one?
Are there any questions that you still have after reading this?
Read my 7 Part series called 7 Elements of an Effective Portfolio Website at Escape From Illustration Island.
Receive more tutorials like this and other news from Thomas James Illustration by signing up for free email updates.
Darn clever method. Great way to have your own portfolio included.
Will definitively experiment with this. I’m sure someone will beat me to the method. Right now I’m checking out options, and need to build some content, so it will take some time… but I was looking for something like this, being that I had already picked WordPress as starting tool.
Thanks!
Thanks for the feedback, Jose. WordPress definitely has a good amount of customization options. You can even add things like a contact form, which is another great way to make a blog look and feel more like a website.
What made YOU choose WordPress?
Thomas
I chose to start with WP because of the clean look, and the many tools and options… but basically, because of our mutual friends (webcomickers) good personal reviews. I’m still working on content at this time… really wish I had something to show at this time. (nothing like putting myself on the spot to push progress eh? LOL!).
Promise I will provide a beginner’s perspective soon!
Thanks for the help!
Never answered your question…
“What made YOU choose WordPress?”
Well… looking at the blogspot, and others, they seemed easy to use, and are very popular.
I noticed that lots of webcomickers used WordPress, so I checked it out.
I liked its clean looks, and its collection of features.
I’ve coded pages before, and it can get time consuming. WordPress seems to provide a good range of features from simple to advanced that I haven’t seen offered by others (yet).
So… knowing I don’t plan to code that much, I decided WP would be my starting blog platform.
I have yet organize content, though. But time permitting, I’ll make blog-fall before the end of this year.
Do yourself a favor and make sure you use the IMAGE widget, and not the SIMPLE IMAGE widget if you go this route. MUCH more effective. Great tutorial. Think you saved me from a major headache!
THANKS!
Visual CV is another useful tool to help create an online portfolio. Check it out at: http://www.visualcv.com
Thanks for sharing the link, David.
Thanks so much for this tutorial Thomas!!! I have been working on it on and off since you first posted the tutorial, learning and adding things.
It would be nice to have a gallery that allowed people to click on thumbnails to enlarge the images they wanted to view.
If you can figure this out that would be fantastic!!
Looking forward to hearing from you!
http://josephmule.wordpress.com
Hey Thomas, I’m trying to follow your tutorial here, but I’m having some troubles. How do you tweek the Home page to just have the image? Come to think of it, how do you tweek the home page period? Does the widget need to be put on every page or you put it on once and it is transfered to the other pages.
I’ll have to admit that I’m pretty lost. I’m sure your tutorial is accurate, but I’m a little “Internet stupid”
Any help would be MUCH appreciated. Thanks.
-Mark
Nevermind, I got it working. I’m just a little slow sometimes.
But, I still don’t know how to edit the HOME page. If you could help me that would be great. Thanks.
Hi there -
Thanks so much for this tutorial, I’ve been faithfully following it the past few days and building my site. I’ve got one question though – I want to upload a custom header, as you have done, but I can’t figure out what dimensions to make it. Did you make yours in Photoshop? Thanks for the help, either way.
-Rachel
Hey Rachel. The header dimensions for the vigilance theme are 920w x 180h (pixels).
Thanks so much! I can’t tell you how glad I am I found your site.
Yet again another excellent article. The most inspirational illustration web resource I have found, period.
Keep up all the good work!
Thanks for the great feedback Ryan! I really appreciate it.
thanks a lot for the tuorial, i was thinking about make a website and this is a very atractive solution!!!
Hi Thomas
I have been having a problem with the image widget. When the height box is left blank and you save your settings WordPress determines the height and stretches the image. I can’t seem to find a way to prevent this. Can you help?
Any time you make a change to the image widget, you’ll need to reset your desired image size. Does this answer your question?
Thanks for the great tutorial, I will be trying it out, soon.
Good luck!