Incredible WP Documentation

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here or submit ticket on purethemes.ticksy.com . Thanks so much!


Created: 2012-10-16
Modified: 2012-10-16
Current Version: 1.2
Documentation Version 1.1.2

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 “incredible-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.

Once the theme is uploaded, you need to activate it. Go to Appearance Themes and activate your chosen theme.

 



After activating the theme, you will notice under Appearance menu new submenu Theme Options. You'll find there Theme Options Panel, from where you can do a lot of cool stuff. Every section of Theme Options Panel will be described later.


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

If you want to have the same website as Live Preview of Incredible 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


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

When you decide which slider to use, go to Theme Options and selecet Enable slider and choose name of script. If it's RevoSlider, put alias to field in Theme Options. Now, you'll see that slider on your homepage.

You can find Revolution Slider  at the bottom of the WordPress Menu.

After pressing the Create New Slider button you will see a form where you are need to enter a Slider Title and a Slider Alias (a slug that is used to display the Slider in this theme, try to keep it simple, no spaces and special chars).

The options in the boxes on the right side (General Settings, Position, Appearance, Navigation, Thumbnails) have helping Tooltips on mouseover so they are not explained here.

Set the slider exactly like on this screenshot:

The Sizes section is needed to fit the slider in all screen sizes needed. The height of the slider will always be calculated to keep the aspect ratio from the max width and height given in the Slider Size line.

The next step is creating/editing slides. You get there by just clicking on Edit Slides in the Slider Form window.

Just press "New Slide" and the native WP Media Upload dialog window will appear. Choose or Upload the slide's background image, choose "Full Size" and then "Insert Into Post"

Use the arrow handles on the right side to change the slides position in the slider (top to bottom = first to last slide to be shown) or delete it with the "Delete" button.

The "Edit Slide" leads you to the next chapter "Slide".

In the Edit Slide view you see the heart of our plugin. The drag&drop Caption editor.

But first please note that you have another chance here to change the background image with the "Change Image" button.

To create a Layer (Caption, Image or Video) press the button "Add Layer" or "Add Layer: Image". In case of a text layer a basic layer will be created you can use the "Text" field in the Layer Params to change the caption on it. The "Style" selectbox shows some basic styles (CSS classes) you can use to style the caption (you can always add own CSS classes to this field or edit the existing ones via the "Edit CSS File").

In case of an Image Layer you will see the native WP Media Uploader again. In case of a Video Layer you will prompted to a custom Video selection wizard.

You now can move the Layers around via drag&drop or type in the x and y coordinate in the corresponding fields.

The "Layers Sorting" drag&drop list determines the Layers' z-index. This list specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

To display slider on homepage, go to Theme Options - Slider tab, select Revolution Slider, and paste below alias of your slider. Just how it's done on screenshot below:

If you want to display Revolution Slider on any other page, set settings on page like on this screenshot

If you want to show slider in any other place add to php file:

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

From the widgets panel:
Drag the "Revolution Slider" widget to the desired sidebar

From the post editor:
Insert the shortcode from the sliders table - Example: 

[rev_slider example1]

 

Post

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

Below Editor you'll see Layout box and Post options 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.

You can choose here post display type. There are 4 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 to thumbnnail will be used in widgets or in homepage "recent on blog" section, but it won't take space on your blog
  3. Show video - Instead of image you can put here link to video you want to feature. It will be than used in post using oEmbed ( more info here http://codex.wordpress.org/Embeds ) which supports more than 15 video services with most popular like  YouTube or Vimeo
  4. Show gallery - It will create simple Flexslider gallery from all photos you've uploaded to post.

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

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:

Template name Description
Home page Full width page with slider selected in Theme Options
Full width page page without sidebar
Portfolio page 2 columns page to list portfolio items in 2 columns
Portfolio page 3 columns page to list portfolio items in 3 columns
Portfolio page 4 columns page to list portfolio items in 4 columns
Flexslider full width Full width with flexslider
Flexslider page with sidebar Flexslider with sidebar
Revolution with sidebar Sidebar page with Revolution Slider, don't forget to put alias below
Revolution full width Full width page with Revolution Slider, don't forget to put alias below

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 700x473px, or 940px wide if you want them to be displayed in full width. Smaller images won't look good.

Here you can see options for portfolio item.

  • Subtitle if you want to add some subtitle to portfolio name, write it here
  • Portfolio Type You can select Gallery for slideshow with all images uploaded to portfolio, or Video with single video player
  • Link to Video If you have set Portfolio Type to Video, paste here URL to video you want to display. It uses oEmbed so most of popular services are supported
  • Full width content Standard layout of portfolio item is 12 columns wide slider + 4 columns wide content, check this checkbox to have 16 columns slider + 16 columns content
  • Excludes photos from slider By default portfolio slider displayes all photos added to item, but you can exclude here photos you don't want to appear by simply clicking them, they should be than highlighted with blue border

Incredible 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] Text [headline]

This will create H4 tag styled for nice start of paragraph. Use it a lot as it gives nice feel to content.

Incredible 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]
                            
Options
  • width "sixteen" (default), "fifteen", "fourteen", (..), "two", "one"
  • place "first" (default), "center", "last", "none"

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]
                            
Options
  • url where button will link
  • size "medium" (default), "small"
  • color "yellow" (default), "blue", "red", "green", "black", "gray"
  • iconcolor "white","black"
  • icon glyphicon name
  • popuptitle Title of popup
  • popuptext Content of popup, if both are present it will display popup when user hovers over 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]
                            
Options
  • type "error", "notice", "warning", "success"
[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="yellow" url="#"] Read More [/button][/notice]

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

[feature color="gray" 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] 
                                
Options
  • type "star_list", "check_list", "plus_list", "minus_list", "star_list", "arrow_list", "square_list", "circle_list", "cross_list"

Also available from TinyMCE gives you option to use nice list bullets.

[pureslideshow] URL_To_Photo1;URL_To_Photo2 [/pureslideshow]
                                

You can use simple flexslider gallery to show your photos, for best effect they should be the same size, just add URL to each photo and ";" at the end of each.

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

If you want to make list of social icons in one row, please add them in

[social_icons]

container.

[breadcrumbs] 
                                

Just add [breadcrumbs] to display current position in page structure. You can also turn them on

Pricing tables are not available currently from TinyMCE editor.

Sample code for Pricing table:

[pricing_table style="info-list" ]
<ul>
    <li>14 Day Free Trial</li>
    <li>User Limit</li>
    <li>Disc Limit</li>
    <li>Transfer</li>
    <li>Subdomain</li>
    <li>Custom Email</li>
    <li>SSL Security</li>
</ul>
[/pricing_table][pricing_table header="Standard" price="$9.99" per="per month" style="light" ]
<ul>
    <li data-feature="14 Day Free Trial">Yes</li>
    <li data-feature="User Limit">15</li>
    <li data-feature="Disc Limit">10 GB</li>
    <li data-feature="Transfer">100 GB</li>
    <li data-feature="Subdomain">5</li>
    <li data-feature="Custom Email">[pricing_check]</li>
    <li data-feature="SSL Security">[pricing_check check="no"]</li>
</ul>
<a href="#">Sign Up</a>[/pricing_table][pricing_table header="Premium" price="$29.99" per="per month" style="border-fix" ]
<ul>
    <li data-feature="14 Day Free Trial">Yes</li>
    <li data-feature="User Limit">30</li>
    <li data-feature="Disc Limit">20 GB</li>
    <li data-feature="Transfer">200 GB</li>
    <li data-feature="Subdomain">10</li>
    <li data-feature="Custom Email">[pricing_check]</li>
    <li data-feature="SSL Security">[pricing_check]</li>
</ul>
<a href="#">Sign Up</a>[/pricing_table][pricing_table header="Professional" price="$69.99" per="per month" style="featured" ]
<ul>
    <li data-feature="14 Day Free Trial">Yes</li>
    <li data-feature="User Limit">60</li>
    <li data-feature="Disc Limit">40 GB</li>
    <li data-feature="Transfer">400 GB</li>
    <li data-feature="Subdomain">20</li>
    <li data-feature="Custom Email">[pricing_check]</li>
    <li data-feature="SSL Security">[pricing_check]</li>
</ul>
<a href="#">Sign Up</a>[/pricing_table][pricing_table header="Maximum" price="$99.99" per="per month" style="" ]
<ul>
    <li data-feature="14 Day Free Trial">Yes</li>
    <li data-feature="User Limit">100</li>
    <li data-feature="Disc Limit">80 GB</li>
    <li data-feature="Transfer">800 GB</li>
    <li data-feature="Subdomain">40</li>
    <li data-feature="Custom Email">[pricing_check]</li>
    <li data-feature="SSL Security">[pricing_check]</li>
</ul>
<a href="#">Sign Up</a>[/pricing_table]
                        

Here's one regular column:

[pricing_table header="Standard" price="$9.99" per="per month" style="light" ]
<ul>
    <li data-feature="14 Day Free Trial">Yes</li>
    <li data-feature="User Limit">15</li>
    <li data-feature="Disc Limit">10 GB</li>
    <li data-feature="Transfer">100 GB</li>
    <li data-feature="Subdomain">5</li>
    <li data-feature="Custom Email">[pricing_check]</li>
    <li data-feature="SSL Security">[pricing_check check="no"]</li>
</ul>
<a href="#">Sign Up</a>[/pricing_table]
                        

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

Look also at list containg feature desription, each LI has "data-feature" with coresponding "feature" from 1st column, it's important to add this or tables won't work on Mobile devices.

Available styles are

  1. light
  2. featured
  3. border-fix
  4. info-list

For YES/NO symbols use

[pricing_check]
[pricing_check check="no"]
[team photo="http://www.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="3"]

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_blog number="3" title="Recent posts"]

You can display with this shortcode recent posts from your blog

  • IncredibleWP Followers Widget
    Add your feedburner and twitter ID to display number of your followers
  • IncredibleWP Popular Posts
    Displays tabbed widget with popular and recent posts. Popular posts are available if you'll use GD Star Rating plugin
  • IncredibleWP Recent Posts
    Displays recent posts list with thumbnails
  • IncredibleWP Twitter Widget
    Latest posts from your Twitter
  • IncredibleWP Flickr
    Displays photos from Flickr

Options panel can be found under Appearance - Theme Options, it is based on amazing OptionsTree plugin.

First tab - Slider

Second tab - General

Third tab - Colors

You need to select Yes in Enable Colors to be able to change Footer colors, some of them can be changed without this settings. Next to each field is default color so you can easily go back. For more customization options go to the last section

Fourth tab - 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.

Fifth tab - 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.

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"] 
Use it on a page you want to have contact form.

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 'incredible/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


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.