Getting Started with Clean

Do you need help installing or updating Clean?

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.

General

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.

Footer Text: Edit the footer text. Add your own copyright info, links, etc.

Appearance

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.

Home Page

Change the home page message text.

Posts

Control various post settings, like layout, thumbnail size, infinite scrolling options, etc.

Footer

Enter text that will be displayed in the footer.

Integration

Add your analytics code.

Slideshow

Control the settings for the slideshow on the home page and those generated from the slideshow shortcode.

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 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

Clean 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.

Clean Twitter: Display your most recent tweets.

Clean 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: http://idgettr.com/

Post Options

Along with all the usual things you can do with posts and pages, this theme also has some added functionality that gives you more flexibility when adding content.

Featured Image

To create the thumbnail for your post, use 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”.

Slideshow Image

If you plan on including a post or page in the home page slideshow, use this box. Once you’ve selected an image and it is uploaded, click the “Set as slideshow image” link. Recommended Size: 960px by 350px (anything else will be cropped to these dimensions).

Slideshow Options

You can use this box to include a page or post in the slideshow and add a caption to be included with the image.

Lightbox Options

Here you can set an image or video to be opened in a lightbox when the featured image is clicked.

In the Lightbox Video field you can enter the url of a video on Vimeo or YouTube. For example:

http://vimeo.com/7993383

Using Button Shortcodes

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

[ssc][button url="http://themetrust.com/" target="_blank" label="Learn More"][/ssc]

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

Lightbox

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>

Slideshow Shortcode

This theme comes with a special slideshow built-in that scales with the fluid layout which is all part of the responsive design. All you have to do to turn a set of images in your content into a slideshow is wrap them in this shortcode:

[ssc][slideshow][/slideshow][/ssc]

See the example below:

[ssc][slideshow]
<img src="http://domain/imageurl-1.jpg" />
<img src="http://domain/imageurl-2.jpg" />
[/slideshow][/ssc]

It’s important to note that images in a slideshow can not be linked.