I assume you have your own WordPress installation, so let's get started!

Installation

You can do it in two ways:

1. FTP Upload: Unzip the “centum-theme.zip” file and upload the contents of this zip to the /wp-content/themes folder on your server.
2. Wordpress Upload: Navigate to Appearance Add New Themes Upload. Go to browser, and select the zipped theme folder. Hit Install Now and the theme will be uploaded and installed.

Now open this Options Panel and hit Save button - it will set some options for the start.

Now open this Options Panel and hit Save button - it will set some options for the start.

If you want to have the same content on your website as Live Preview of Centum theme, you'll need to import demo content. To do that please go to Tools Import WordPress, install plugin you'll see and than select file "extras/import.xml" from Theme Package.

If you don't want to import whole data, in "extras/layouts" you'll find txt files with code from Live Preview. You can choose for example home1.txt, copy whole content of that file, than create new home page on your WordPress, paste it in HTML view, and start working on your page based on this layout.

Notice All photos included with import file are just plain gray color, as they are copyrighted files purchased on PhotoDune. If you want to use them, list of links is at the end of this documentation.

If your import was successful, please go to Appearance Menus and in Theme Locations select "Menu", than save.

First you have to create a basic page, and select page template named "Home Page Template". Now you can fill it with your content and publish. Next, create another basic page with no content and no template, name it Blog.

After that, go to Settings Reading and in the Front page displays choose A static page, then select your just created page Home.
For blog page you can select your page named Blog. Click Save Changes

Next, you should setup your permalinks to look pretty. You can go to Settings Permalinks, choose the Custom Structure, and use this: /%category%/%postname%/

This theme has two types of slider. First is based on FlexSlider by Woothemes, second is Revolution Slider by themepunch. With Flexslider you can use slides based on a image&text column layout, it's light, simple, elegant and fast. Revolution Slider is a little bit heavier and harder to configure but gives you opportunity to create amazing animated slides from images and videos.

To create slides for FlexSlider you need to go to Appearance Theme Options Slider and click Add new

You need to upload a backgroud to each slide, by default it should be 940x400px. The title is not required, if you won't put any text in title and description you'll see just an image, otherwise the content will be displayed in semi transparent black box.

To create slides for Revolution Slider you need to go to Revolution Slider and create new slider. Detailed howto for this is in next section

<h3>This is a caption</h3>
<p style="padding-top: 10px;">Donec scelerisque aliquet mi, non venenatis urnas<br/> iaculis. Utea id nila ante. Cras est massa, interdum<br/> ateal imperdiet etean, gravida eu quame. Aeneana <br/>volutpat hendrerit posuere.</p>

<div style="display: block; height: 400px; padding:  4px 8px 0 8px; ">
<h2>
Powerful Theme <br/>You’ve Been<br/> Waiting For, Seriously!
</h2>
<p>Donec scelerisque aliquet mi, non venenatis urnas<br/> iaculis. Utea id nila ante. Cras est massa, interdum<br/> ateal imperdiet etean, gravida eu quame. Aeneana <br/>volutpat hendrerit posuere.Aliquam rutrum mattis <br/>mollis. Vestibulum a pellentesque tellus.</p> </div>

Modern & Clean Design

<?php putRevSlider("alias"); ?>

[rev_slider example1]

Setting up the menu

This theme uses WordPress 3.0 Custom Menus. Go to Appearance > Menus and you will see a panel where you can create new menus. Create one, add your created pages to it(from the left side panels) and save it. After this, in the left side you have a Theme Locations drop down box where you can select the Menu. Choose your newly created menu, click Save and your menu is ready.

---

Creating posts is nothing new if you have even basic experience with WordPress. Centum theme offers couple of additional options in Post editor.

Below Editor you'll see Layout box and Post options box.

Layout box

Layout box gives you ability to select sidebar to display with post or page, and also select layout of post - you can put sidebar on left or right side. Right side is default.

You can create more sidebars in Theme Options in Sidebars section. Just follow instruction there.

Post options

You can choose here post display type. There are 2 options:

1. Show thumbnail - you need to first upload image to post and select it as a Featured Image using one of the boxes below. Click on “Set featured image” to upload a preview image for this post or select already uploaded image. Then click “Use as featured image”.
2. Hide thumbnail - even if you've selected featured image you can hide it - that way the thumbnnail will be used in widgets or in homepage "recent on blog" section, but it won't take space on your blog

If you want to use shortcodes in post content, you need to write the excerpt or you might see non parsed shortcodes in search results or in front page.

Post types

Centum support 3 types of posts. You can change them in right side box. Default is Standard - that one shows single image if it has any Featured Image. The Video post will display video if you'll fill Video URl option, and Gallery type will display ALL images attached to the post in flexslider

Pages have the same option for Layout like posts. Additionally you'll also find box with Subtitle field and box where you can select slider Alias for Revolution Slider. Keep in mind that this will only work when you have selected Page template "Page with Revo Slider" for this slider.

List of page templates:

If you'll select ono of "portfolio" templates for page, you can configure it using this Options box.

• You can select filters by clicking checkboxes from which you want to compose Portfolio page - thanks to this you have now option to build many portfolios, not only one
• You can decide if you want to display (which is default) or hide buttons to filter portfolio items.
• Custom title for Portfolio, by default it's taken from Theme Options, but you can customize it here per page

Portfolio is similar to posts. You can create portfolio item which will feature gallery of your images, or video clip. Fill the content ( by default it's 12 columns wide). Gallery will be created from all photos added to portfolio item, and don't forget to set Featured Image.

Ideally images for portfolio should be 940x473px, . Smaller images won't look good.

Now you have couple of custom options. First you can put subtitle to the Item name.
You can also switch gallery to Video, then just paste URL to the clip and it will be displayed in place of gallery slider. List of supported sites is here http://codex.wordpress.org/Embeds

By default content for text under portfolio item is 12 columns. In first 4 columns you can show informations like Date, Client name and link to Launch button. You need to first setup this fields in Theme Options. If you don't want this informations to be displayed, you can switch content width to Full - than it will be the same as Full width page, so 16 columns.

Portfolio meta informations

You can display 4 types on information for Portfolio item. "Text" and "Link" types values can be edited for each portfolio, "Filters" will display all filters selected for currently viewed portfolio and "Date of publication" is self explanatory :)

• Date - type "Text"
• Client - type "Text"
• Launch - type "Link to project"

If you'll upload images to your Portfolio Item, here you can select which one you'd like to exclude from slider (because for example one is smaller size specially for thumbnail, or some other image you want to put in conten)

Portfolio filters

Filters acts like categories - you can add one portfolio item to many filters.

Centum has many shortcodes which will help you to build awesome layouts. In "extras" folder you have sample layouts saved as text files, so you can just copy them to your Editor and use them as a base for your site.

Here is list of all shortcodes as they appear in editor:

[headline margin="no-margin" htype="h4"] Text [headline]

Centum is based on Skeletons grid - Full width page has 16 columns, if it's page with sidebar it has 11 columns. Using columns shortcodes you can build your own layouts. You have also some preset layouts like:

You should use Columns Creator but it's easy to this shortcodes by hand. Look closely at this shortcode, the important part except the width is place. You have 3 options here - first, none or last. If last is used, it's assumed that this column is last in current row and floats will be cleared. First  will set margin-left to 0px. If you have more than two columns you might want to use also place="center" - it will set margin left and margin right to 0px. It's good to try different parameters to find out what looks the best in specific situation.

[column width="1/3" place="first" ] Put here content [/column] [column width="2/3" place="last" ] Put here content[/column]
                            

You can use other shortcodes in columns, you can even use nested columns if you want.

[button size="small" color="green" url="#" icon="icon-ok" iconcolor="white"] Text [/button]
                            

[tabgroup] [tab title="Tab 1" icon="icon-star"] Aliquam egestas consectetur elementum class aptent taciti sociosqu ad litora torquent perea conubia nostra lorem inceptos orem ipsum dolor sit amet, consectetur adipiscing elit.[/tab] [tab title="Tab 2"] Lorem ipsum pharetra felis. Aliquam egestas consectetur elementum class aptent taciti sociosqu ad litora torquent perea conubia nostra lorem inceptos orem ipsum dolor sit amet, consectetur adipiscing elit.[/tab] [tab title="Tab 3"] Lorem ipsum pharetra felis. Aliquam egestas consectetur elementum class aptent taciti sociosqu ad litora torquent perea conubia nostra lorem inceptos orem ipsum dolor sit amet, consectetur adipiscing elit. [/tab] [/tabgroup]
                    

You can add icons to tab by using parameter icon. Whole tab section must be in [tabgroup] shortcode.

[accordion title="Accordion#1"] Lorem ipsum dolor sit amet, consectetur adipiscing elit tortor libero sodales leo, eget blandit nunc tortor eu nibh. Aenean nisl orci lorem, condiment ultrices consequat eu lorem ipsum dolor sit amet inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo dolor sit amet.[/accordion][accordion title="Accordion#1"] Lorem ipsum dolor sit amet, consectetur adipiscing elit tortor libero sodales leo, eget blandit nunc tortor eu nibh. Aenean nisl orci lorem, [/accordion][accordion title="Accordion#1"] Lorem ipsum dolor sit amet, consectetur adipiscing elit tortor libero sodales leo, eget blandit nunc tortor eu nibh. Aenean nisl orci lorem, [/accordion]
                    

[box type=error] Error! Please fill in all the fields required. [/box]
                            

[notice title="This is a Headline"]
This is a example of style component for calling extra attention to featured content or information. Adipiscing elit. Cras eu nisl quam. Cras in elit a massa fermentum bibendum.
[button color="color" url="#"] Read More [/button][/notice]

it's good way to show "call to action" buttons and important informations.

[feature title="Easy to Customize" icon="http://www.demo.purethemes.net/incredible/wp-content/uploads/2012/08/features_ico_01.png"]Proin iaculis purus consequat sem cursus digni ssim. Donec porttitor entume suscipit. Aenean rhoncus posuere odio in tincidunt.[/feature]
                                

Feature box looks the best in 3 columns row, it gives nice icon to get attention of user, you can use e.g. it to list features of your products. There is list of icons you can use, but you can also add your own icons using icon parameter with URL to the image.

[list type=star_list]
  <ul>
    <li> list item </li>
    <li> list item </li>
 </ul>
[/list]
                                

[pureslideshow] URL_To_Photo1;URL_To_Photo2 [/pureslideshow]
                                

[social_icons] [social_icon service="rss" url="URL" ][/social_icons]
                                

[social_icons]

Pricing tables are not available currently from TinyMCE editor.

Sample code for Pricing table:

[pricing_wrapper number="4"][pricing_table header="Standard" price="$9.99" per="per month" color="1" ]<ul>
<li>5 GB Storage</li>
<li>Free Live Support</li>
<li>Unlimited Users</li>
<li>No Time Tracking</li>
<li>Enhanced SSL Security</li>
</ul>
<a class="sign-up" href="#"><span>Sign Up</span></a>[/pricing_table][pricing_table header="Premium" price="$29.99" per="per month" color="2" ]<ul>
<li>5 GB Storage</li>
<li>Free Live Support</li>
<li>Unlimited Users</li>
<li>No Time Tracking</li>
<li>Enhanced SSL Security</li>
</ul>
<a class="sign-up" href="#"><span>Sign Up</span></a>[/pricing_table][pricing_table header="Professional" price="$69.99" per="per month" color="3" ]<ul>
<li>5 GB Storage</li>
<li>Free Live Support</li>
<li>Unlimited Users</li>
<li>No Time Tracking</li>
<li>Enhanced SSL Security</li>
</ul>
<a class="sign-up" href="#"><span>Sign Up</span></a>[/pricing_table][pricing_table header="Maximum" price="$99.99" per="per month" color="1" ]<ul>
<li>5 GB Storage</li>
<li>Free Live Support</li>
<li>Unlimited Users</li>
<li>No Time Tracking</li>
<li>Enhanced SSL Security</li>
</ul>
<a class="sign-up" href="#"><span>Sign Up</span></a>[/pricing_table][/pricing_wrapper]
                        

You need to put all tables in container shortcode

[pricing_wrapper number="4"]

the parameter "number" has to be equal to number of tables you want to display.

Here's one regular column:

[pricing_table header="Standard" price="$9.99" per="per month" color="1" ]<ul>
<li>5 GB Storage</li>
<li>Free Live Support</li>
<li>Unlimited Users</li>
<li>No Time Tracking</li>
<li>Enhanced SSL Security</li>
</ul>
<a href="#">Sign Up</a>[/pricing_table]
                        

What's important here is header, price, per and  color parameters.

The colors can be set to 1,2 or 3

Remember that there shoudn't be any white space between closing and opening tag [/pricing_table][pricing_table]

[team link="http://www.memberpage.com" photo="http://demo.purethemes.net/incredible/wp-content/uploads/2012/08/team_img.png" name="Fred Wallet" job="WordPress Developer" twitter="#" facebook="#" digg="#" vimeo="#" youtube="#" skype="#"] Tempus libero ellus viverra pharetra. Donec commodo gravida velit vel lorem ipsum dolor sit amet euismod. [/team]
                        

Team shortcode is used on About Us page - it gives nicely styled boxes to feature team members of your comapny. Use example as a template for others.

[testimonials] [testimonial author="Michael" job="Flash Developer"]Posuere erat a ante venenatis dapibus posuere velit aliquet. Duis llis, est non coeammodo luctus, nisi erat porttitor ligula, egeteas laciniato odiomo sem.[/testimonial]
[testimonial author="John" job="Web Developer"] Integer eu libero sit amet nisl vestibulum semper. Fusce nec porttitor massa. In nec neque elit. Curabitur malesuada ligula vitae purus ornare onec etea magna diam varius. [/testimonial] [/testimonials]
                       

This shortcode will display carousel with testimonials. Single testimonial looks like this [testimonial author="John" job="Web Developer"] text [/testimonial]. Whole block of testimonials must be contained in [testimonials] [/testimonials]

[clients]
<ul>
<li><img title="logo_01" src="http://www.demo.purethemes.net/incredible/wp-content/uploads/2012/09/logo_01.png" alt="" width="187" height="95" /></li>
<li><img title="logo_01" src="http://www.demo.purethemes.net/incredible/wp-content/uploads/2012/09/logo_02.png" alt="" width="187" height="95" /></li>
</ul>
[/clients]
                        

You can display with this shortcode nice list of logo of e.g your partners, just put list of IMG tags in [clients] [/clients].

[recent_pf limit="4" fullpage="no" orderby="date" filters=''] 

You can display with this shortcode you recent portfolios. If items do not align corectly on your page, you can try to set fullpage="yes", you can also change orderby to "rand" to show random items

[recent_blog number="4" fullpage="no"] 

You can display with this shortcode you recent blog posts. If items do not align corectly on your page, you can try to set fullpage="yes"

[googlemap width="100%" height="250px" address='New York, United States']

You can display simple google map with address box, if you want something more advanced there are dozens of plugins you could use

• CentumWP Posts
  Displays recent posts list with thumbnails
• CentumWP Twitter Widget
  Latest posts from your Twitter
• CentumWP Flickr
  Displays photos from Flickr

Options panel is based on amazing OptionsTree plugin.

Slider

1. Enable slider - or disable slider on homepage
2. Select slider for homepage - select which slider to show - RevolutionSlider is created via it's own panel, FlexSlider is created on the screen you are now
3. Alias of revolution slider - When you're creating this slider, you need to put it name (e.g. slider1) You need to put it here after that to display it on homepage
4. Homepage Flexslider - here you can create slides for Flexslider

General tab

• Upload logo - just select it from your computer or Media Library
• Logo area width - Full width of top area is 16 columns. Logo area by default is 9 columns, while icons and contact details area is 6 columns wide. If you want to have bigger logo, please change here number of columns for logo.
• Logo Top Margin - set top margin of logo image
• Logo Bottom Margin - set top margin of logo image
• Favicon - 16x16 icon
• Header social icons

General II

• Enable contact details in header
• Header minimum height - You can change it to adjust header height - it depends on your logo and contact details settings
• Contact details email
• Contact details phone
• Portfolio options
• Copyrigths text - text in footer
• Custom CSS - if you're not using Child Theme plus put all CSS changes in that box - it will make updates easier.

Typography

You can choose from one of 500+ Google fonts. Select font for body and for headers. You can also just choose some nice font for a logo if you prefer to have text logo instead of image.

Sidebars

All sidebars that you create here will appear both in the Appearance > Widgets, and then you can choose them for specific pages or posts. Please choose a unique title for each sidebar and make it one word.

Centum is using new feature of latest WordPress - Theme Customizer, you'll get there by clicking Appearance - Customize

It gives you real time preview of changes you made to your site.

Layout type

Colors

• Background color - can be changed only if you haven't set Background image nad you're using boxed layout
• Main color - Centum is 3 colors design - dark, white and one vibrant color for all elements like active menus, arrows, buttons etc. Here you can change that color and see it live
• Overlay color - Change just hover effect color on items in menu

Background Image

Works only on boxed layout - you can upload any image you want, or switch to default

You should use contact form 7 plugin for contact form. After installing it, go to Contact - Add new (or edit current one) and in Form field paste what's below:

<div class="field">
<label>Name:</label> [text your-name]
</div>
<div class="field">
<label>Email: <span style="color:#e4280f;">*</span></label> [email* your-email]
</div>
<div class="field">
<label>Message: <span style="color:#e4280f;">*</span></label> [textarea* your-message]
</div>

<div class="field">[submit class:button class:medium class:yellow "Send Message"]</div>
                                    

Than at the top of page you'll see shortcode, for example:

[contact-form-7 id="503" title="Contact form 1"] 

You'll find home, blog and portfolio pages in PSD format in "extras" folder.

You can learn from here about Translating theme into your language.

The .pot file is in 'centum/languages' folder named 'default.pot'.

You can use Poedit to translate the .po file. You need to save it in languages folder, and name just the same way your language is defined in WP config file. Open wp-config.php and check define ('WPLANG', '');
if it's for example fr_FR, save your .po file as fr_FR.po