Guide: Create a simple portfolio using Wordpress.

Messages
2,775
Name
Ben
Edit My Images
Yes
This is a guide on how to create a simple portfolio site to showcase your photography, powered by WordPress and using a free theme. The result will be a minimal, clean and effective looking website with the focus being on your images.

If you follow this step by step guide, your website will look something like this: http://boycalledben.co.uk/example

It’s similar to some of the 4ormat themes I’ve seen, minus the nasty branding they impose on your site. This also works out a lot, lot cheaper.

Examples of similarity

http://www.rosiehardy.com/1147-main-gallery
http://www.rachelbellinsky.com/
http://www.tomhoops.com/
http://demo.flothemes.com/matte/gallery/wedding/

This tutorial will probably take 1-2 hours, depending on how familiar you are with WordPress.

I will already assume that you have a domain name, web hosting and a version of WordPress installed on your site. If you haven’t, do that first – there are plenty of resources on the web to help you.

Downloading & Installing the theme

1. Start by downloading the free theme we’ll be using. You can find it here http://wpshower.com/themes/expositio/

2. Go into the admin panel of your site (http://yourwebsitename.co.uk/wp-admin.php) (You’ll need this admin panel a lot.)

3. Go to Appearance >> Themes and select the ‘Install themes’ tab at the top and then the ‘Upload’ option just below it

4. Find the .zip file of the theme you downloaded earlier and click ‘install now’

themer.png


5. If all has gone to plan you should see something like this:

activate.png


6. Click 'Activate' to make the theme live on your website.

OK, so at the moment it doesn't look too great, but with a few simple changes it will do. Before we make any changes to the styling of the site, we'll add some content to the navigation bar down the side.
 
Adding Content

Adding section headings is done via 'Categories' in the admin panel. So to follow my example site shown at the beginning of this post (it may be worth keeping that web page open for reference), I will be adding 'Portfolio' and 'Social' as categories. 'About, 'Pricing' and 'Contact' are added in a different way, through pages, but I'll go through that later.

It's important to rename 'Uncategorized' to either one of those, rather than just adding them alongside it as you'll find when you add a sub-section later on, it will automatically add it under 'Uncategorized' if it isn't renamed.

Adding sections

1. Go to Posts >> Categories then hover over Uncategorized and select 'Edit', then just type in Portfolio and leave everything else clear.

edit-category.png


Click 'Update' to save it.

2. Add a new category and call it 'Social' (Optional)

categories.png


At this point your site will still look the same as before, but don't worry this is normal. Sections won't appear on the website until they have been populated by sub-sections.

Adding sub-sections

Under Portfolio, I will be adding Portraits, Weddings, Landscapes, Music, Corporate and Street.
Under Social, I will be adding 500px, Twitter, Facebook, Pinterest and Flickr.

1. Go to admin panel

2. Go to Posts >> Add new

3. Fill in the title with 'Portraits' and make sure you tick 'Portfolio' as the category on the right hand side.

add-new-post-sub-section.png


4. Click Publish.

Check your site and you should have something that looks like this.

site1.png


Still pretty unattractive but we're making progress. Continue to add in all of the relevant sub-sections until you are at this point, or have sub-sections you are happy with.

filled-in-sections.png


Starting to get there. Now we have the layout sorted, it's time to make some small modifications to enhance the look of the site. We will add the images later on.
 
Last edited:
Basic customisation

1. Go to the admin panel again
2. Select Appearance >> Theme Options (Here you can make the simple changes to your site like link colours, fonts etc. These can easily be changed, so have a play about until you are happy).

I have decided to keep it simple with a white background, size 12 Helvetica font, text color #212121 and link color #4f4f4f.

theme-options.png


At this point you can add a favicon, and your google analytics code if you wish to see where your website traffic is coming from. I haven't bothered.

Adding a logo

By default the theme uses the name of your site as a text title. If you are happy with that then leave it. However if you want your logo displayed like I'm sure most people will, you'll need this.

Make sure your logo is no larger than about 200px. Mine is 160 x 182px.

1. Upload your logo by going to Media >> Add New

2. Once uploaded, copy the file url as we'll need that in a second.

benlogo-494x378.png


3. Go to Theme >> Editor and select 'Sidebar.php'.

sidebar.php_-243x494.png


4. Find the line <h1><a href="<?php echo site_url('') ?>" title="<?php echo __('Home page', 'free01') ?>"><?php echo bloginfo( 'name' ); ?> </a> </h1> (3rd row down) and delete it.

5. Replace with this line <h1><a href="<?php echo site_url('') ?>" title="<?php echo __('Home page', '****01') ?>"> <img src="your file url from a few moments ago" /></a> </h1>

You should now have something like this.

after-logo-change-246x494.png


Much better.

Note: I've made my logo tightly cropped to the left in Photoshop so it sits in line with the navigation menus.
 
Last edited:
Changing the copyright

Whilst I think it's fair to credit the theme author for all their hard work in creating this theme, I will show you how to change the copyright below the navigation section, to your name. Maybe you could find out if the theme author has a donation page that you could contribute to in exchange for removing their copyright, or perhaps like their Facebook page.

1. Go to Theme >> Editor and select 'Sidebar.php' again.

2. Scroll to the bottom of that section until you find this bit of code and delete the bit highlighted in blue.

copyrightdelete.png


3. In it's place, just type &copy; followed by your name or whatever you want. In my case I wrote; &copy; Boy Called Ben

4. Hit 'Update file'

This should be the result.

copyright-result.png





Adding photos.

This is very straight forward if you follow these instructions, a lot of people have tripped up in the past because once they upload the images, they click 'insert gallery'. Don't do this.
I'm going to add my images to the wedding section, just as an example.

1. Go to Posts >> All Posts

2. Hover over 'Weddings' and click edit.

3. Click the upload/insert icon.

insert-media-494x100.png


4. Find the photos from your computer that you want to upload.

Note: All images should be at the same height to make the site look it's best. I've gone for 600px height in Lightroom, at 90% quality to keep file sizes fairly low whilst still being large enough to showcase my shots.

5. Once uploaded, click 'save all changes' rather than 'insert gallery' and close the pop-up box.

save-changes-471x494.png


6. Update the page to save everything..

7. Do this for all of your pages under the Portfolio section.

If you get confused, this video may help demonstrate how to do it http://vimeo.com/25828240


http://boycalledben.co.uk/example/weddings/


Great! Almost there.
 
Last edited:
Adding pages

Apart from the home page, this isn't essential for a simple portfolio site, but useful to know if you intend to add an 'about' page etc like I have.

1. Go to admin panel.

2. Go to Pages >> Add New

3. Give your page a title then add the content in the editor.

about-page.png


4. Click 'Publish'

http://boycalledben.co.uk/example/about-2

Do the same for all of the other pages you want to add. At this point it's also worth adding a 'Home' page, although don't add this to the menu using the method below unless you actually want it to appear on the navigation bar.

Note: Just creating the pages isn't enough. They then need to be added to the navigation bar on the website. This is done by:

4. Go to Appearance > Menus (All pages you've created should appear on the left)

5. Select the pages and click 'Add to menu'

menupages-494x186.png


6. Press 'Save Menu'.

7. At the top left is a dropdown. Go to this and select 'Main menu'. Make sure you also save this, otherwise your menu won't display on your website.

menu1-494x179.png
 
Last edited:
Can't seem to connect to that link. Nice post though! I may have a play, setting up a second wp. Need to read how first though :)
 
Right, last essential part them some little bits to clean up.

Adding a home page

1. Go to Settings >> Reading

2. Select 'Static page' and choose 'Home' from the dropdown menu, providing you created a page title 'Home' in the previous section.

settings-home-page-288x124.png


Also, by default you can only show 10 images per photo category, so to change this, stay on the same page and change 'Blog pages show at most' to a high number, as this will determine the maximum amount of images that can be displayed per sub-section.

blog-posts-288x44.png






Now to add content to the home page.

I'm just going to keep it simple and have an image as my home page, next to my navigation bar and logo.

1. Go to Pages >> All Pages

2. Hover over 'Home' and click 'Edit'

3. Click the 'Insert media icon' and upload your favourite photo, as this will be the first photo people see when visiting your site.

insert-into-post-home-page.png


4. Once uploaded, choose to 'Insert into post' and the media pop up will automatically close. You should now see the image in the content editor.

5. Click 'Update' to save it.

Go to your website and it should now be looking something like this as your home page.

home-page.png


Quite a transformation. All we have to do now is some finishing touches.
 
Finishing touches

Removing page titles

This may not bug you like it bugs me, but as I'm going for a minimal look, so it's gone.

Before
before-page-title-494x202.png


1. Go to admin panel

2. Go to Appearance >> Editor

3. Find 'Stylesheet' on the right and make sure you select that, if not already selected

4. Scroll down and find this line highlighted in blue

stylesheet-edit-page-title-494x108.png


5. Now add the text display: none; as shown.

display-none-page-title-494x16.png


6. Click 'Update file'.

You should now see the page title has been removed.

title-now-removed-494x174.png






Remove photo title


Before
photo-title-remove-288x51.png


Whilst the photo title under each image can be put to good use, I don't want it. So here's how to remove it.

Do exactly the same as when you removed the page title.

1. Scroll down to find this line (highlighted)

code-page-title-remove-288x93.png


2. Add the text display: none; like you did previously.

3. Click 'Update file'

You should now see that the photo titles have been removed.


Your website is basically complete! I will update this post in a bit to show what you need to do with the 'social' sub-section, but this should keep you occupied for a little while.

I hope this is of use to someone and would be great if you could provide me with some feedback on this guide. I know it's not perfect because it didn't start out as a tutorial, so some photos might not match up exactly but hopefully there is nothing glaringly obvious I've messed up on.

If you wanted to, this customisation could be taken a lot further. If you do this tutorial, it'd be good to see the site once it's up and running.
 
Last edited:
Nice work Ben - I'm just building a community website and on a vertical learning curve with WP but enjoying every minute - I've learnt even more reading your posts so can apply these as well!!

Thanks again
Adrian
 
Nice work Ben - I'm just building a community website and on a vertical learning curve with WP but enjoying every minute - I've learnt even more reading your posts so can apply these as well!!

Thanks again
Adrian

Wordpress is a fantastic tool once you get the hang of it.

Glad it's of use, but one thing I would say is whilst some of this stuff may be relevant to all Wordpress sites, other parts are only relevant to this theme.

The versatility of how functions are integrated into a theme is amazing, but can also be frustrating when managing a few different thems at the same time.

Thanks for putting the time into this Ben, really interesting read.


No problem, thanks for the feedback. It looks long winded but is actually fairly quick to do.

I should point out that larger images in the guide are available here.
 
Hi,
please I need to use this theme but everything's changed from this tutorial: any advice?
Which previous version of WP I need to install for use this tutorial?
Thank you!
 
Hello Quiet Man,
have you any idea about how make this WP theme working in this modern age?
I think it's still very actual, clean and really useful.
Or some advice for similar themes (both free and fee themes): cause nothing found in my research.
Any kind of help is very appreciated =)
 
Back
Top