Personality - One Page Portfolio WordPress Theme

Created: Oct 28th, 2011 / Author: Adrian Diaconescu

Thank you for purchasing my theme! If you have any questions that are beyond the scope of this help file or even suggestions on how to improve the theme, the best way to get in touch is via my ThemeForest profile page contact form (right sidebar, at the bottom).

I take feedback very seriously and I always do my best to help out everyone, so you can be sure you'll hear from me sooner or later, depending on my availability and the nature of your issue.

Note: I'm subscribed to the comments section via RSS, so you can leave a message there as well, but please don't ask for support via Twitter or directly on my website, as I try to keep support requests centralized. Thank you!

Table of Contents

1. Introduction

Personality is a premium one page portfolio WordPress theme, ideal for powering a small presentation website for both businesses or individuals. There's no blog functionality (the posts are used to power the portfolio) and the main focus is on the pages. The theme uses a slick navigation system and its features (shortcodes, photo gallery, portfolio, contact page) have been tweaked to perfection. Personality makes deploying and managing your small website and portfolio a breeze!

2. Theme Setup

Before installing the theme and setting up the content, please make sure you have the latest version of WordPress installed. The theme should work with previous versions, but my advice is to update to WordPress 3 as soon as possible. Once you're ready, login into the WordPress admin and follow the steps below:

2.1. Installation

In the ZIP file you downloaded from ThemeForest there should be a folder called theme. Inside this folder there's another ZIP file, which contains the actual WordPress theme. There are two ways to install the theme:

Note: Do not use the main ZIP file you downloaded (use the theme ZIP only), otherwise the whole process will fail.

The main menu is dynamically generated, based on the pages you added under Pages > Pages. The moment you activate the theme and if you have more than one page, the page slider should kick in and you should have a functional navigation.

In order to easily manage the order of the items in the menu (and that of pages in the slider) I recommend you install the Custom Page Order plugin or a similar one that allows you to drag and drop pages, rather than mess with the Page Order parameter.

2.3. Theme Options

Personality comes with an intuitive, easy to use Theme Options panel. You can access it by navigating to Appearance > Theme Options. The theme options are conveniently grouped under a series of tabs and each tab contains the options that pertain to a particular area of the theme.

General Settings

Gallery Settings

Contact Settings

3. Theme Features

The theme features include a couple of shortcodes that allow you to create some nice column layouts, an enhanced and more flexible gallery shortcode and a dedicated portfolio section that's super easy to manage and has a kick-ass navigation. Oh, and there's also a contact page template with everything you need.

3.1. Shortcodes

You can split the page width into up to 5 columns. There's also a gimick that allows you to implement a content - sidebar type of layout. There's no better way top explain how column shortcodes work than with a couple of examples, so here goes:

3 Column Layout

[column split="3"]
Add column 1 content here ...

[column split="3"]
Add column 2 content here ...

[column split="3" last="true"]
Add column 3 content here ...

Got it? Now all you have to do is change the split parameter to and add the correct number of shortcodes. And don't forget that last="true" parameter for the last shortcode.

2 Column Layout - Wide + Narrow

[column split="3" multiply="2"]
This column will be wide ...

[column split="3" last="true"]
This column will be narrow ...

Notice how we're still spliting the conten into 3, but we're telling the first column to take twice the space. There's only styling for this particular setup (others didn't seem practical), so don't try it with more columns.

Highlight Columns


[column split="5" highlight="true"]
This column will be highlighted ...


To highlight a certain column you just add the parameter highlight="true". You can add this to one or more columns, although I think it looks best when added to all columns.

This is still a shortcode (and I have actually overwritten the default one for some added awesomeness), but it definitely deserves a separate discussion.

First of all, there's something you should know regarding how galleries work in WordPress. In order for certain images to show up in a gallery from a page / post, they must be attached to that page / post. This has to do with how you upload the images and there are two ways you can do that:

  1. In the page / post - when you edit a certain page, click the Add an Image icon next to Upload / Insert. Upload the images from your computer or grab them from the Media Library and they will automatically be attached to the page you are currently editing.
  2. In the Media Library - if you navigate to Media > Add New and upload your images there, you will notice that when you navigate to Media > Library the image shows up as Unattached. This means the image will not show up as part of any gallery. Just click Attach and look for the page / post where your gallery resides.

Once you attached more than an image to a page (and clicked Save all changes), a new tab called Gallery will show up in the Add an Image popup window. To add this gallery to your page, here are the steps you might want to take:

  1. Order images - This is super easy and all you have to do is drag and drop the images to shuffle them around.
  2. Add title, caption, description - Click the Show link next to an image to reveal its properties, then edit the Title (by default this will be your image file name, without extension), Caption and Description
  3. Choose gallery settings - All thumbnails link to images, so you can ignore the first parameter, but make sure you choose the display order and the number of columns, then click Insert gallery.
  4. Edit gallery settings - If you want to go back and change these settings, just click the large gallery rectangle in the editor, then Edit Gallery. Or you can switch to HTML view and edit the shortcode directly.

Now make sure you navigate to Appearance > Theme Options and click on Gallery Settings for more options.

To set up the portfolio, first navigate to Pages > Add New to create a new page. Give it any title you like, but make sure you choose the Portfolio template in the Page Attributes panel. You don't have to add any content, as it will not be displayed anywhere. What this pages does is grab and display all portfolio items and create the links to filter by category.

Adding a portfolio item

The theme uses the posts as portfolio items, so basically all you have to do is navigate to Posts > Add New and create a new post as you normaly would: add a title, add some content that will act as a short description and choose a category, which will be used to generate the portfolio filter. Besides that, you have to perform the following tasks:

To set up a page containing the contact info, social links and contact form you must navigate to Pages > Add New and create a new page, but this time choose the Contact template in the Page Attributes panel. You can add some content, that will show up above the contact form. The page might not look like much, so make sure you navigate to Appearance > Theme Options, then click the Contact Settings tab to add your own info.

Theme Files

If you intend to make design or functionality changes to the theme, I recommend you read the info below before you get to work. It might save you some trouble! ;)

CSS Files

The theme is based on the HTML5 Boilerplate, from which is removed what I didn't find relevant. In terms of styling, the following CSS file are being loaded (located in the root folder and in the css folder):

JavaScript Files

The theme uses jQuery and a couple of jQuery plugins. These are the files that are being loaded (located in the js folder):

PSD / PNG Files

I've included 2 layered PNGs and PDSs with this theme: light skin and dark skin. The mockups were originally created in Fireworks and then I exported PSD files and tweaked them in Photoshop. For pixel perfect accuracy you should use the PNGs. However, both versions are pretty similar and they are both carefully oraganized using layers and sub layers.