Formation Pro Documentation

Greetings! Bellow you will find complete documentation for Formation Pro.

General Information - Top

First of all, we want to say thank you! We're very grateful that you have chosen our theme for your website. We will do everything we can to provide you the best support possible. Feel free ask us if you need more help.

Video Tutorials - Top

Below is a list of our videos, they are provided to give you extra help with setting up and customizing this theme.

FAQ - Top

Below are some of our more common support questions.

Is there a way I can add my own CSS touches?
Definitely! We have included a "Custom CSS" textarea admin page. You can find this page here: "Appearance/Custom CSS". Add styles here to override any of the default styles.
Runthrough of Custom CSS
Can I use my own exact color instead of one of the color schemes?
You sure can! If you access the "Apprearance/Customizer" then navigate to Site Settings/Colors you will be able to select the exact color you need.

Sources and Credits - Top

This theme takes advantage of these generous tools:

Getting Started - Top

In this section we will go over the process of setting up WordPress environment, next I will show you how to install and activate your brand new theme. Finally you will learn how to setup all of the key features of Formationpro theme.

Preparing Wordpress - Top

If you already have WordPress installed on your server just skip to the next section. If you haven't yet installed WordPress on your server, here you will find a complete guide on this topic. Just follow the steps and you will be ready in no time with a WordPress website.

Installation and Theme Activation - Top

Each WordPress Theme can be installed in two ways: via ftp client or through the admin panel:

Installing Theme via WordPress Admin Panel (recommended):
  1. open the wp-admin panel (navigate through web browser to the folder where you have installed the WordPress e.g www.your_domain.com/wp-admin/),
  2. login to your wp-admin panel, then from the main menu sidebar, choose 'Appearance -> Themes',
  3. at the top click 'Install Themes' tab,
  4. under the header click the 'Upload' link,
  5. you will be redirected to upload form, click the 'choose file' button and navigate to and select the Formationpro.zip file you downloaded from us then click 'open',
  6. once the theme is done uploading it will automatically install,
  7. after the installation you will be able to activate the theme to do this click the "blue" activation link.
Installing WordPress Theme via FTP client:
  1. unzip the 'Formationpro.zip'
  2. connect to your server,
  3. navigate to the folder where your WordPress is installed,
  4. drill down to /wp-content/themes/,
  5. upload the 'Formationpro' unzipped folder into the 'themes' directory (the path will look like this: wp-content/themes/Formationpro),
  6. On your web browser navigate to your wordpress installed website admin section e.g www.your_domain.com/wp-admin
  7. login to your wp-admin panel, then from the main menu sidebar, choose 'Appearance -> Themes',
  8. find the 'Formationpro' theme and click the 'Activate' button next to it.
  9. You have now installed and activated Formation Pro theme!

Formation Pro supports custom menu and you can set it by using the following steps.

  1. Go to Appearance->Menus.
  2. If you have no menu's created you will see the following sentence "Edit your menu below, or create a new menu.". Use that link to create your menu.
  3. Give your menu a suitable name and click the "Create menu" button.
  4. Within the "Edit Menus" tab you have the tools to build your menu. Be sure the menu name is the one you just created.
  5. Start adding pages, links and categories from the left panel by selectin the checkboxes and clicking the "Add to menu" button.
  6. Once you have some menu items added you can click+hold on a menu item and drag it into the position you want it to appear.
  7. Once your happy with the menu items and their position, click the "save menu" button and view the results on the front-end of the site.

Video Tutorial - Create Custom Menus

If your looking to achieve a visual effect on the menu with icons next to the menu name use follow the instructions below.

  1. Visit Font-Awesome and navigate to the icon your interested in and open its detail page.
  2. Copy the snippet of code that looks like the screenshot below.
  3. font-awesome screenshot
  4. Go to your Menu admin and expand the menu element your interest in and paste the snippet before the link title.
  5. Menu Icon Paste screenshot

Setup Formationpro like the demo - Top

If you want to setup your theme to look like the Formation Pro demo from TemplateExpress please follow this guide, it should take up to 5 minutes.

  1. In your sites Admin section, navigate to 'Tools -> Import' and select Wordpress from the list of links.
  2. You may have to install the Wordpress Importer if you've not used this function before. If so click the Blue 'Install Now' button and follow the instructions
  3. Once you have the Wordpress Importer working you will see an upload tool. We have included an xml file inside the download file in a folder called "demo_content".
  4. upload xml file in that folder
  5. Answer following questions as required. Be sure to check the Import Attachments checkbox to ensure you see the demo images.

Customizing Sidebar & Footer with widgets - Top

After installing the theme, your sidebars will be empty or have default widgets. These can be populated using the following steps:

  1. From main Admin Dashboard go to Appearance -> Widgets.
  2. You can drag and drop widgets into the relevent Widget containers.
  3. You can change position of each widget by clicking and holding on the widget title then drag it into position.
  4. Formation Pro includes some extra widget areas in the footer and the left-sidebar templates. These can be populated using the same steps as above.

Video Tutorial - Adding some widgets

Recommended Image Sizes - Top

Here we suggest image dimensions to make your experience with Formation Pro great!

These are just recommendations and there is some flexibility with sizes.

Font Settings - Top

Formation Theme includes access to Google Font Library to customize most sections of the site.

  1. Navigate to Appearance -> Fonts
  2. Select a font for the main body
  3. Select a font for the main Headers
  4. Save Changes
Google Font selector

Custom Site Settings - Top

Quick Video running through most Custom settings


Change Site Title & Tagline

  1. Navigate to Appearance -> Customize
  2. Expand "Site Settings" Panel
  3. Expand "Site Title & Tagline"
  4. Change the text for Site Title or Tagline or even hide the both
  5. Press "Save and Publish"

Upload Logo & Favicons

Formation Pro gives you the ability to upload custom logo, retina version, Favicon and Apple App Icon.

  1. Navigate to Appearance -> Customize
  2. Expand "Site Settings" Panel
  3. Expand "Site Logo or Favicon & App Icons"
  4. Upload the images to the relevent fields (consult reccomended sizes)
  5. Press "Save and Publish"

Custom Header Image

Formation Pro gives you the ability to upload a header image that will display throughout the site.

  1. Navigate to Appearance -> Customize
  2. Expand "Site Settings" Panel
  3. Expand "Header Image"
  4. click "Add New Image" and upload an image (consult reccomended sizes)
  5. Press "Save and Publish"

Background Image

Formation Pro has the option for you to add a background image. You could use a texture or a fullsize photo.

  1. Navigate to Appearance -> Customize
  2. Expand "Site Settings" Panel
  3. Expand "Background Image"
  4. click "Select Image" and upload an image
  5. There are further options for titling the image and positioning it.
  6. Press "Save and Publish"

Header Contact Details

Get your contact details in the header showing them throughout your site.

  1. Navigate to Appearance -> Customize
  2. Expand "Site Settings" Panel
  3. Expand "Header Contact Details"
  4. Options:
    • Telephone
    • Mobile
    • Email
    • Address
  5. Add your contact details. Note: adding to many may look bad in the header.
  6. Press "Save and Publish"

Add Social Media account links to header

We have loads of social media accounts you can add to the header as small icon links.

  1. Navigate to Appearance -> Customize
  2. Expand "Site Settings" Panel
  3. Expand "Social Media Accounts"
  4. Add the full url into the desired social media account. e.g. https://twitter.com/templateexpress
  5. Press "Save and Publish"

If you fancy changing the copyright information to our own company then there is a feature for this. Infact if you want to hide the copyright bar altogether you can do that too.

  1. Navigate to Appearance -> Customize
  2. Expand "Site Settings" Panel
  3. Expand "Footer Settings"
  4. You can change the copyright information in the textbox (accepted HTML tags a, strong).
  5. Use the checkboxes to hide the widget area or the copyright bar.
  6. Press "Save and Publish"

Pick a pre-built color scheme

With Formation Pro we have included several pre-build styles to pick from.

  1. Navigate to Appearance -> Customize
  2. Expand "Site Settings" Panel
  3. Expand "Color Scheme"
  4. Select one of the pre-built color schemes (default = red).
  5. Press "Save and Publish"

Need your own colors

If our pre-built color styles aren't for you, we have included a tool to let you pick your own color.

  1. Navigate to Appearance -> Customize
  2. Expand "Site Settings" Panel
  3. Expand "Colors"
  4. mark the checkbox to override the pre-built color schemes.
  5. Pick your color from the main color picker.
  6. Press "Save and Publish"

Custom Homepage Settings - Top

There are lots of options within this section for you to create a personal homepage. Control layout, hide and show elements add a slider and much more...

Setup Homepage


Setup Custom Homepage

  1. Create new page or use existing page
  2. Select "Custom Homepage" from the Template dropdown option Custom Homepage Setup
  3. Save page
  4. Go to "Settings -> Reading"
  5. In the Front page displays section mark the "Static page" button and select your page from the Front page dropdown. Custom Homepage Setup
  6. Save and check the homepage on the live site and you should see the custom homepage template in action.

Control Slider

We have included the option for a slider on the Custom Homepage. The slider is fed by your posts and their featured images. You can turn off the slider, pick posts to show from a particular category and limit the amount of slides.

  1. Navigate to Appearance -> Customize
  2. Expand "Homepage Settings" Panel
  3. Expand "Homepage Slider" section
  4. Mark the checkbox to hide the slider.
  5. Select from a particular category to display posts from or leave it on "- select -" to include all.
  6. Change the number of the slides from the number field.
  7. Press "Save and Publish"

Promotional Bar

On the custom homepage you may want to draw attention to campaign or particular page. This is what the "Featured Promo Bar" is perfect for. Add some text and a link, simple!

  1. Navigate to Appearance -> Customize
  2. Expand "Homepage Settings" Panel
  3. Expand "Featured Promo Bar" section
  4. Add relevent text to the fields
  5. Make sure the URL is the full http path.
  6. Press "Save and Publish"

Service Section

You can display the services you provide or draw attention to something with these three useful boxes.

  1. Navigate to Appearance -> Customize
  2. Expand "Homepage Settings" Panel
  3. Expand "Service Section Settings" section
  4. Change the Title and or Hide the whole section
  5. Add content to the three boxes. Expand each "Service Box (One, two, three)" section
    1. Upload image to add spice to the box
    2. Add some header and body text
    3. Add a full http URL for each box
  • Press "Save and Publish"
  • Recent posts Section

    You can display the services you provide or draw attention to something with these three useful boxes.

    1. Navigate to Appearance -> Customize
    2. Expand "Homepage Settings" Panel
    3. Expand "Recent Posts Section Settings" section
    4. Change the Title and or Hide the whole section
    5. Press "Save and Publish"

    Testimonial Section

    You can add customer testimonials to the homepage with this section.

    1. From the main menu open the "Testimonials" page.
    2. click the add new button at the top of the page and fill in the details.
    3. Add as many testimonials as you like, but you can only show one at a time.
    4. Keep a note of the testimonial ID you want to use, (its number part of the testimonial title)
    5. Navigate to Appearance -> Customize
    6. Expand "Homepage Settings" Panel
    7. Expand "Testimonials Section Settings" section
    8. Make your required changes and paste your noted id in the ID field
    9. Press "Save and Publish"

    Partners Section

    You can display the partners logos you work with or draw attention to something with these four small useful boxes.

    1. Navigate to Appearance -> Customize
    2. Expand "Homepage Settings" Panel
    3. Expand "Partners Section Settings" section
    4. Change the Title and or Hide the whole section
    5. Add content to the four boxes. Expand each "Partners Logos (One, two, three, four)" section
      1. Upload a company logo
      2. Add the full http URL
  • Press "Save and Publish"
  • Creating an Authors page - Top

    From Version 2.1.1 we now allow you to control which users are displayed.

    1. Create new page or use existing page
    2. Select "Display Authors" from the Template dropdown option
    3. This will now display a page with all users you have registered on your site and their profiles.
    4. Formation Pro also allows you to hand pick the user profiles you want to show.
    5. You will need to gather the user id's you interested in and there are plenty of free plugins available to show this, otherwise I've included instruction below on how to gather these id's
      1. You will need to note down some id's so having a pencil and paper will be handy
      2. Navigate to Users -> All Users
      3. Hover your mouse over the username your intrested in and you should see a user_id in the link displayed at the bottom of the screen (suggested browser=Chrome).
      4. Finding user Ids
      5. Note down all the id's
    6. Now navigate to Appearance -> Customizer
    7. Expand the "Authors Template Settings" Section
    8. Paste the id's from the users you want to display seperated by commas e.g 2,3,5,12,48
    9. Click "Save & Publish"
    10. Navigate to Authors page on the front end and you should see your changes

    Short video showing you how to create a custom authors page

    Creating a Contact Page - Top

    Formation Pro includes a Contact Page Template If you need a simple contact form on your site.

    1. Create new page or use existing page
    2. Select "Contact Page" from the Template dropdown option
    3. This will now display a page with a contact form displayed below page content.
    4. The contact form will send forms to the email address set in Settings -> General
    image showing email address set in Settings/General




    Once again, thank you so much for purchasing this theme. As we said at the beginning, we are glad to help you if you have any questions relating this theme. No guarantees, but we'll do our best to assist. If you have any suggestions on how to improve our themes or documentation please share them!

    Note: we will be improving and adding to the premium version more often than the free version.

    Template Express