Creativelife WordPress Theme

Crafted by The Open Dept.

Hello there! Thank you for buying our theme. Your support is sincerely appreciated :)
This documentation will guide you through the installation of this theme and show you how to configure a general website. If you have any questions that are beyond the scope of this document, feel free to open a ticket on the dedicated Support Forum.

  1. Preamble

  2. Getting started

    1. Theme Installation
    2. Configuring the Main Menu
    3. Configuring the Footer
    4. Setting up the Homepage
    5. Configuring the Slider
    6. Setting up the Blog
    7. Setting up a Portfolio

  3. Portfolio

    1. Adding Items
    2. Assigning Filters
    3. Using the Lightbox

  4. Post Formats

  5. Sidebars

  6. Widgets

  7. Using Shortcodes

  8. Extras

  9. Technical Help

  10. Ending Credits

1. Preamble

Before starting, there's a few informations you need to know, just to make everything easier.

Pages Settings

Every setting regarding a page (or a Portfolio) is located inside the edit page mode of WordPress itself, not in the Control Panel. That means that every page has its own little option panel.

Thumbnails (Images Resizing)

Unlike the majority of the WordPress Themes, Creativelife does not use the popular image resizing script TimThumb. The reason why we decided to drop it is pretty simple: We didn't want to rely on any external script that may compromise our users's security and rely completely on the WordPress engine.

The difference between the two methods of resizing is that TimThumb can recreate every image on-the-fly, while WordPress creates a series of copies of your image of different sizes after you upload them. So if you change, for instance, the size of the blog featured images on the theme Options Panel, from 100 pixels to 200 pixels, WordPress will not find the 200 pixels images and show the 100 pixels one, simply because when you uploaded them the image size was configured to 100.

However, even if it sounds a little bit problematic, there's an easy solution. Using a WordPress plugin you can recreate every Thumbnail at any time. You'll find a copy of the best Thumbnail Rebuilder around at the moment ("Ajax Thumbnail Rebuild"). Simply install it and remember to refresh your images after you change some image parameter setting.

2. Getting Started

1. Theme Installation

Installing a WordPress theme is the most easy thing in the world! There are two ways to install it:

"I know what FTP is": Using your favorite FTP application, upload the "Creativelife" folder in your server's /wp-content/themes folder.

Via WordPress: Go to Appearance → Install Themes → Upload and choose the "Creativelife.zip" file. Click "Install Now" to install the theme.

Once you have uploaded it, go to Appearance → Themes and finally activate it!

2. Getting Started

This theme makes use of the WordPress Nav Menu feature, so you can configure your Main Menu simply dragging and dropping your elements.

To configure the Main Menu from scratch, go to Appearance → Menu, click on the + Icon and create it.

Now on the left side of the Menu Manager, select your Menu under the Theme Locations block and save. That's it! Now you can start filling your menu with your items.

A characteristic element of this theme is that every Menu Item has its own icon, and assigning them it's extremely easy. All you have to do is "open" a Menu Item clicking on the arrow positioned on the extreme right and enter in the "Icon" field either a number from 1 to 30 corresponding the default icons or the url to a custom image.

The "Icon" field may be named "Title attribute" in some cases, but don't worry, the result will be exactly the same.

→ → →
1 2 3
4 5 6
7 8 9
10 11 12
13 14 15
16 17 18
19 20 21
22 23 24
25 26 27
28 29 30

2. Getting Started

3. Configuring the Footer

The footer of this theme consists in two blocks. The left block is a content block that you can fill with everything you want, while the right one is left for a configurable menu.

To configure the content of the left block, go to Appearance → Creativelife and select the General tab. Now scroll to Footer Info and fill the Content textarea with anything you want.

2. Getting Started

4. Setting up the Homepage

To configure your homepage, create a page (e.g. "Home"), and assign to it the "Homepage" Page Template.

To set the page you just created as "Front page", go to Settings → Reading. Now switch the "Front page displays" input to "A static page" and select your page under the "Front page:" select box. Don't forget to hit the "Save Changes" button.

The Content

There are two ways to configure your Homepage content. You can simply enter your content inside your page when in the edit mode, or you can use Widgets. After assigning the Page Template to your page, you will notice that a new sidebar area magically appeared in the Appearance → Widgets section of WordPress.

Every Widget that you'll add in these Sidebars will be displayed in your Homepage. Have a look at the available Widgets and see what you can achieve with them.

2. Getting Started

5. Configuring the Slider

Creativelife includes a powerful Slider that allows you to add almost any kind of media to the Homepage of your website, with just a few clicks and allowing you to order them via drag & drop.

To open the Slides Manager, go to Appearance → Creativelife, select the Homepage tab and hit the Slides → switcher.

For every slide you can enter up to 3 data: a Picture, some Content and a Url.

The Picture will be the image displayed in the slide, the Content is the text that will be displayed on the left side of the Slider and the Url is the link where the Slide will point to.

Content data is optional, so if you don't enter any text the slide's Picture will simply be displayed as full-width, covering the space left by the side block.

Video Slides

If you enter a Video Url (Youtube, Vimeo) in the Url field, the Slide will become Video Slide. Video Slides don't allow Content data. Pictures are worth a thousands words!

If you wish to simply link your Slide to a video and not show it in the Slider, you can simply activate the Link To option that will appear.

2. Getting Started

6. Setting up the Blog

To configure a Blog all you have to do is create a page (e.g. "Blog"), go to Settings → Reading, switch the "Front page displays" input to "A static page" and select your page under the "Posts page:" select box. Don't forget to hit the "Save Changes" button.

2. Getting Started

7. Setting up a Portfolio

Creativelife gives you the possibility to create infinite Portfolios with individual settings.

Creating a Portfolio is amazingly simple. All you have to do is create a new page (e.g. "Portfolio"), assign to that page the "Portfolio" Page Template and hit the blue "Update" button.

After you do that, a new Post Type with the same name of your page will magically appear on the left side of the WordPress Administration.

More importantly, your page will be transformed from a normal page to a Portfolio Page, so a little Option Panel will take the place of the editor.

3. Portfolio

1. Adding Items

Adding items to a Portfolio is just like adding Posts to a Blog. All you have to do is "open" your Portfolio Post Type (named as your Portfolio page) and hit the "Add New Item" link.

A Portfolio Item consists of a Featured Image, a Title, a Excerpt (a short description) and the Content. What you will insert inside the Content block will be displayed as a page when the item is clicked.

Featured Images

The Featured Image is basically the picture that will be displayed in the Portfolio to represent your item. To apply it, simply click the "Set Featured Image" link located under the "Featured Image" block. A Lightbox will appear, now choose your image, select a size (usually "Full Size") and click the "Use as featured image" link.

3. Portfolio

2. Assigning Filters

This theme gives you the chance to assign multiple Tags or "Filters" to your Portfolio Items so that your users can navigate your Portfolio choosing to filter your items basing on the category you have assigned to them (e.g. Logos, Interfaces, Prints).

To assign a Filter to your Portfolio Item, visualize it in the edit mode and start adding them as you would do with Tags on normal WordPress Posts.

3. Portfolio

3. Using the Lightbox

If you want to show a Lightbox when clicking to your Portfolio Item, open it in the edit mode and check the "Use Lightbox" checkbox. Always remember to click the blue "Update" button to apply your changes.

After you do that, a series of options will appear.

Image Lightbox

4. Post Formats

Creativelife gives you the possibility to choose a Post Format for every Post and Portfolio Item. The available formats are: Gallery, Video and Audio.

To select a Post Format, simply select it from the Format block positioned on the right side of the WordPress Administration when editing a Post or a Portfolio Item.

Gallery Post Format

Using the Gallery Post Format you can show a customized Slider that will display all images attached to a post. All you have to do is select the "Gallery" Format, click the "Upload/insert" button and then upload all the images you wish to display.

Video Post Format

Using the Video Post Format you can display a YouTube or Vimeo video in your Post or Portfolio Item's page. Simply select the "Video" Format and paste the url to your video in the Video Settings box.

Audio Post Format

Using the Audio Post Format you can show a simple and direct HTML5 audio player. To use it, select the "Audio" Post Format and paste the url to your audio file. Please, note that the file format of the audio file must be "mp3", no other format is supported at this moment.

5. Sidebars

This theme gives you the possibility to create an infinite number of Custom WordPress Sidebars and assign them to different Pages, Posts or Portfolio Items.

To create a Sidebar, head over Appearance → Creativelife, select the "Sidebars" tab and hit the "Add New Sidebar" button.

For each Sidebar you can use a different Title and Description. By default the credentials of the logged user will be used.

Every sidebar has a unique ID that you can use to identify it when assigning it to a Page, Post or Portfolio Item through the "Layout Settings" box.

You can use the same ID to put the content of your Sidebar in your Post or Page's content using the [sidebar] Shortcode.

6. Widgets

Creativelife includes 8 hand-made (hitting keys on a keyboard) Widgets that will help you to build your website with just a few clicks.

Featured Article

Using this Widget you can display one of your latest 25 posts to feature it on your Homepage or Sidebar.

Latest Articles

Using this Widget you can display a list containing your latest posts.

Latest Works

Using this Widget you can display the latest Portfolio Items from a specific Portfolio Page.

Twitter

This Widget lets you show the latest tweets from a Twitter.com account.

Flickr

Using this Widget you can display the latest photos from a Flickr.com account.

Text

This Text Widget differs from the WordPress one for the possibility to use Shortcodes inside of it.

Video

With this Widget you can add any Youtube or Vimeo inside your Sidebar.

Maps

Using this Widget you can display an image of a map's portion and link it to a page.

6. Shortcodes

This theme includes many Shortcodes that let you add from simple to complex content using just a few characters.

You can find all Shortcodes in the HTML tab of the WordPress editor, so that you can add them just clicking a button.

Shortcodes List

[skills-container][/skills-container] & [skill][/skill]

Available options:

Usage:

[skills-container]
[skill label="Web Design" val=70%]
[skill label="Ego" val=100%]
[/skills-container]

[color][/color]

Available options:

Usage:

[color]Key Color[/color] or [color=#999999]Custom Color[/color].

[quote][/quote]

Available options:

Usage:

[quote cite="John Doe"]Lorem Bibendum Ullamcorper Tristique Malesuada[/quote]

[code][/code]

Usage:

[code].logo { margin-top: 15px; }[/code]

[youtube]

Available options:

Usage:

[youtube url=http://www.youtube.com/watch?v=clfAq1xSevc size=250x200]

[vimeo]

Available options:

Usage:

[vimeo url=http://vimeo.com/27495689 size=250x200]

[columns-container][/columns-container] & [column][/column]

[column] Available options:

Usage:

[columns-container]
[column size=3]Column 1[/column]
[column size=3]Column 2[/column]
[column size=3]Column 3[/column]
[/columns-container]

[mark][/mark]

Usage:

Lorem ipsum dolor sit amet, [mark]consectetur[/mark] adipiscing elit.

[map]

Available options:

Usage:

[map center="Area 51" zoom=12 size=400x200 maptype=satellite]

[link][/link]

Available options:

Usage:

[link url=http://www.google.com]Visit Google.com[/link]

[pic]

Available options:

Usage:

[pic url=http://.../uploads/2011/08/image.jpg]

[sidebar]

Available options:

Usage:

[sidebar id=admin_sidebar_0]

7. Extras

Creativelife includes a few Extra options that will make the whole experience of using the theme even more enjoyable. You can find all Extras in the Control Panel, under the "Extras" tab. Appearance → Creativelife.

Categories Exclusion

These theme gives you the possibility to exclude any Post Category you want from all user-accessible areas of your website.

Theme Updates

If you like to keep your themes up-to-date: You're awesome. You can choice to enable the Updates Notification, so when a new version of Creativelife will be available you'll be notified.

8. Technical Help

Here's some informations that may help if you want to customize the theme even more.

Headings Font

By default the theme uses the CSS @font-face property to add a custom font named "League Gothic" on the main areas of the layout. If you wish to switch to a different font, here's what you need to do:

  1. Prepare your Font-Face Kit, converting your font using a great tool like the Font Squirrel's Generator.
  2. Move your kit's contents in the "font" folder of the theme.
  3. Open the "style.css" file located inside the theme's folder, go to line 211 and replace the default font name with yours.

You can edit the selectors list that follows (line 222) if you wish to use your font on more elements.

Theme Translation

Creativelife is translation-ready. That means that editing the ".po" file included inside the Creativelife/languages/ folder you can translate the theme in any other language.

When editing a language, do not remove strings like "%s" or "%1$", but simply write around them. These are strings that get automatically replaced with dynamic or more complex content.

9. Ending Credits

To build this theme, I've used some external sources from great people kind enough to share their work.

Graphics

Javascript

Misc

Fin

Once again, thank you for buying our theme. If you have any questions that this file couldn't answer, don't hesitate to open a new ticket on our dedicated Support Forum.

The Open Dept.