Getting Started with Clarity

Do you need help installing or updating Clarity?

Sample Content

If you’d like to start with some example content, here’s the content from the demo. Download and unzip the file. Then use the Tools → Import tool in your WordPress admin. Need step by step directions?

Download Demo Content

Theme Options

In your WordPress admin, click on the “Theme Options” button located under the “Appearance” tab in the left menu. Here you can configure a number of options to tailor the theme to fit your needs.


Logo: Upload your own personal logo. If no logo is uploaded, your website’s name will be displayed in
plain text.

Favicon: Add your own favicon.

Custom CSS: Add your own custom styles.


Colors: Here you can control the colors of vaious elements in the theme.
Fonts: Specify fonts from Google’s Web Font Directory for headings and body text. You must enter the name of the font exactly as displayed by Google (including capitalization).

Home Page

Here you can control various elements of the home page.

Project Formatting

Project Thumbnail Layout: Choose how project thumbnails are displayed – in a masonry or grid layout.

Post Formatting

Control what information is shown with posts and the size of the post’s featured image.


Enter text that will be displayed in the footer.


Control what social links are shown in the header, and enter your analytics code.

Creating the Main Menu

In your WordPress admin, click on “Menus”, which is located uner the “Appearance” tab on the left. Start by creaing a new menu in the panel on the right. Once the new menu is created you can add pages, categories, and custom links from the panels on the left. You can then re-order and create submenus by dragging the menu items. When you’re finished, click the “Save Menu” button.

Adding Portfolios to the Main Menu

You can use the custom menu editor to add portfolios to the main menu. If the “Portfolio” box is not visible on the menu editor screen, click on the “Screen Options” tab in the upper right and then select “Portfolio”. Note: You must link to a parent portfolio for the filter navigation to work as in the demo.

Adding Widgets

This theme has several custom widgets and a number of widgetized areas in which you can use them. To add widgets, click on “Widgets” under the “Appearance” tab in your WordPress admin. Click and drag a widget to one of the boxes on the right. Then set your options for that widget.

Custom Widgets

Clarity Recent Posts: Display a list of recent posts from a certain category or all categories, with the option to display an excerpt from the most recent post.

Clarity Twitter: Display your most recent tweets.

Clarity Flickr: Show thumbnails for a Flickr account. Please note the Flickr widget uses your ID not your username. If you don’t know it, this will help:

Clarity Mini Feature: Display a linked title along with an icon and block of text.

Setting Up a Blog

To set up your blog, select “Categories” under “Posts” in the left menu. Create a category for your “Blog” or whatever you decide to name it. If you plan on having subcategories, create those and assign “Blog” as the parent for each. Now go to your menu editor under Appearance in the left menu, and add the “Blog” category to your menu. Save the menu.

Now when you create posts, just assign them to the appropriate subcategory.

Building Your Portfolio

This theme uses a custom post type called “Projects” and a custom taxonomy called “Portfolios”. Together they make it easy for you to display your work.

Create Portfolios

The first thing you should do is create a top level portfolio. Do this by selecting “Portfolios” under “Projects” in the left menu. For example, you would call this portfolio “Work”. Then decide if you would like to have sub-portfolios. If so you would create more, and assign “Work” as each ones parent. For example, “Branding”, “Photography”, and “Web” could be children of “Work”.

Adding Projects

Once you have your portfolio structure created, it’s time to create some projects. Use the same project menu as above to add a new project. Use the main content editor to enter images or embed videos. The suggested width for images here are 700px.

Add a thumbnail by using the “Featured Image” box found at the bottom of the right column. Use the popup window to upload an image, and then click “Use as featured image”.

The Project Details box allows you to add notes about your projects, a URL, and a URL label. You can use the URL to link out to an external site. For example, if your project is a web design, you can use the URL to let the visitor look at the live website. You can also mark a project as featured to be displayed on the homepage. For this to work, you need to make sure Settings → Reading is set to “Show latest posts”.

The Lightbox Options box gives you the ability to set an image or video to be opened in a lightbox when the project thumbnail is clicked.
In the Lightbox Video field you can enter the url of a video on Vimeo or YouTube. For example:

The Home Feature Options let you display a project in the home page slideshow. If you don’t specify an image here, the projects “Featured Image” will be used. To include text in the slide, use the Home Slideshow Text field.

Assign your project to a portfolio. Once you’ve entered your project content, use the “Portfolio” box in the right column to assign it to a portfolio. If you only have a top level portfolio, select it. But if you have sub-portfolios, only assign it to those.

You can use the custom menu editor to add portfolios to the main menu. If the “Portfolio” box is not visible on the menu editor screen, click on the “Screen Options” tab in the upper right and then select “Portfolio”.

Using Button Shortcodes

You can add beautiful buttons to the content of any page, post, or widget using the following shortcode:

[ssc][button url="" target="_blank" label="Learn More"][/ssc]

The button shortcode takes 3 parameters: url, target, and label.


This theme comes packaged with built-in lightbox functionality. WordPress gallery thumbnails will automatically open in the lightbox, but you can also make any <a> tag open in a lightbox by adding the class “lightbox”.

<a class="lightbox" href="http://domain/imageurl">link</a>