Awesome Theme Documentation v1.1

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. Thanks so much!

Theme Structure

Awesome Premium WordPress Theme contains:

  • admin/
    • css/
      • color-picker.min.css
      • optionsframework.css
    • images/
    • js/
      • colorpicker.js
      • color-picker.min.js
      • iris.min.js
      • of-medialibrary-uploader.js
      • options-custom.js
    • options-framework.php
    • options-interface.php
    • options-medialibrary-uploader.php
    • options-sanitize.php
  • envato-wordpress-toolkit-library/
    • class-envato-protected-api.php
    • class-envato-wordpress-theme-upgrader.php
  • functions/
    • ajax-post.php
    • enqueue.php
    • header-functions.php
    • hook.php
    • meta-boxes.php
    • meta-page.php
    • meta-portfolio.php
    • meta-pricetable.php
    • meta-slider.php
    • meta-team-member.php
    • post-type.php
    • theme-functions.php
    • widget-tabbed-content.php
    • widget-twitter.php
  • home-templates/
    • about.php
    • blog.php
    • contact.php
    • features.php
    • portfolio.php
    • services.php
  • images/
  • includes/
    • js/
      • ajax.js
      • ajax-post.js
      • awesome-cform.js
      • custom.js
      • fitmap.js
      • fluidvids.min.js
      • jquery.cookie.js
      • jquery.easing.1.3.js
      • jquery.header.custom.js
      • jquery.idTabs.min.js
      • jquery.meanmenu.js
      • jquery.nav.js
      • jquery.onebyone.min.js
      • jquery.quicksand.filter.js
      • jquery.quicksand.js
      • jquery.scrollTo.js
      • jquery.touchwipe.min.js
      • modernizr.custom.js
      • onepagenav.js
      • runonload.js
    • contact-form.php
    • flex-slider.php
    • one-by-one-slider.php
    • price-table.php
  • languages/
  • page-templates/
    • about.php
    • blog.php
    • contact.php
    • features.php
    • portfolio.php
    • services.php
  • stylesheets/
    • skin/
      • images/
      • blue.css
      • green.css
      • orange.css
      • red.css
      • violet.css
    • admin-styles.css
    • animate.css
    • flexslider.css
    • jquery.onebyone.css
    • meanmenu.css
    • post-ajax.css
    • responsive.css
  • 404.php
  • archive.php
  • author.php
  • comment-form.php
  • comments.php
  • custom-navmenu.php
  • dummy.xml
  • footer.php
  • function.php
  • header.php
  • home-blog.php
  • home-blog-loop.php
  • home-blog-loop-ajax.php
  • home-contact.php
  • home-portfolio.php
  • home-sidebar.php
  • home-slider.php
  • index.php
  • navmenu.php
  • navmenu.php
  • options.php
  • page.php
  • portfolio-frontpage.php
  • regular-frontpage.php
  • screenshot.png
  • search.php
  • searchform.php
  • single-sidebar.php
  • single.php
  • style.css
Back to top

A) Installation

Installation Via FTP Client Software:

  1. Unzip the theme package awesome.zip
  2. Upload unzipped 'awesome' to the '/wp-content/themes/' directory using your favorite FTP client software
  3. Login to your WordPress admin dashboard, go to Appearance > Themes
  4. Click 'Activate' link below 'awesome' thumbnail
  5. Enjoy!

Installation Via WordPress Dashboard

  1. Login to your WordPress admin dashboard
  2. From your Admin page (Dashboard), use the menu to select Themes -> Add New
  3. Then click on `Install Themes` at the top
  4. Click the 'Upload' button to open the theme uploader
  5. Upload the 'awesome.zip'
  6. Click 'Activate'
  7. Enjoy!

Importing Dummy Content

Dummy content is located in a file called dummy.xml which is located in the "Awesome" theme directory. Below are steps how to install dummy data content:

  1. From the WordPress admin area, go to Tools > Import > WordPress.

    Importing Dummy Content - 1
    Importing Dummy Content - 1
  2. If you do not have the WordPress importer installed you will be prompted to install the importer, activate plugin and run importer.

    Importing Dummy Content - 2
    Importing Dummy Content - 2
  3. Then, in the "Choose a file from your computer", click Choose file and select dummy.xml located in awesome theme directory. Then Upload file and import

    Importing Dummy Content - 3
    Importing Dummy Content - 3
  4. You can create new user with login name or assign posts to an existing user. Give check at "Download and import file attachments. Then click Submit button.

    Importing Dummy Content - 4
    Importing Dummy Content - 4
  5. Now dummy data is being imported, wait until finish. Do not reload page during importing dummy content.
Back to top

B) Theme Overview

Theme Overview
Theme Overview

Awesome WordPress Theme is not like other general WordPress themes which have it's own front page.

At Awesome you must build front page as instructed in following steps after overviewing Awesome's theme options.

Awesome Theme Options

Awesome premium WordPress theme comes with Theme Options where you can display certain informations, select color sceme, or even do slider settings. After you had done installation go to Appearace > Theme Options.

Theme Options
Theme Options

Then do settings which are grouped in General, Home Settings, Slider, Contact, Team Members, and Miscellaneous. Those setting groups are explained below:

General

  • Select skin
  • Define Google fonts
  • Favicon
  • Logo
  • Archive style
  • Footer credit
  • Company informations:
    • Company name
    • Address
    • Secondary address
    • State name, country name
    • Map (Google map embed code)
    • Tagline
    • Description
    • Image
  • Social Media
    • Twitter
    • Facebook
    • Flickr
    • RSS

Home Settings

From Home Settings you can select frontpage template (Regular and Portfolio Template) and enable/disable AJAX load for blog post content. Awesome has two template options, Regular and Portfolio layout. Regular template means your frontpage will diplay blogposts regularly. Blog posts are displayed in reverse chronological order (the most recent post appears first). Portfolio Template means your frontpage displays specific sections including your portfolio.

Regular Layout
Awesome Regular Layout
Regular Layout
Awesome Regular Layout

Multi Sliders

Here you can set one the slider type of two:

  1. One by One Slider
  2. Flex Slider

Contact

  • Quick Contact
    • Email
    • Phone
  • More Contact Details
    • Phone number 1
    • Phone number 2
    • Email address 1
    • Email address 2
  • Contact Form
    • Email Admin

Team Members

  • Name
  • Position
  • Phone
  • Short Biography
  • Profile Picture
  • Twitter Profile URL
  • Facebook Profile URL
  • Flickr Profile URL

Miscellaneous

  • Motto
  • Purchase Teaser Head
  • Purchase Teaser Content
  • Purchase Button Name
  • Purchase Button URL
  • Social Share Buttons (displayed in single and page):
    • Facebook
    • Twtter
    • Google+
    • Pinterest
Back to top

Building Slider

Slider
Slider

Here are steps how to build slider:

  1. Go to Slides > Add New.
  2. Fill the title, do setting in slider content, and set featured image. To make it clear, see the screenshot below.
Add Slider
Add Slider
Back to top

Building Company Overview

Company Overview
Company Overview

Company overview is divided becomes five parts:

  1. Skills
  2. Motto
  3. Purchase Teaser
  4. Purchase Button
  5. Applications

Now, let's setting them up!

1. Setting up skill

  1. Go to Skills > Add New.
  2. Type skill title and set skill image in "Featured Image" box. See the screenshot below.
Add Skill
Add Skill

2. Setting up motto

  1. Go to Theme Options > Miscellaneous.
  2. Then type your company motto in field is provided.
Company's Motto Field
Company's Motto Field

3. Setting purchase teaser

  1. Go to Theme Options > Miscellaneous.
  2. Then type your purchase teaser texts in "Purchase Teaser Head" and "Purchase Teaser Content".
Purchase Teaser
Purchase Teaser Fields

4. Setting purchase button

  1. Go to Theme Options > Miscellaneous.
  2. Then set your purchase button screen name and target URL.
Purchase Button Setting
Purchase Button Setting

5. Setting application

  1. Go to Applications > Add New.
  2. Fill the title, desctiption, and set application image.
Add Application
Add Application
Back to top

C) Building Pages Section

Home page section contains: About Us, Portfolio, Services, Blog, Features, and Contact section. Those sections are displayed in portfolio frontpage layout. Whenever you build them, automatically you build both section and menu. You do not need to setup custom menus via Apperance > Menus. If you have a custom menu had set up before, it will be replaced automatically.

Here are the easy steps how to set them up:

#1. Building "About Us" Section:

About Us Section
About Us Section

About section is divided become three parts:

  1. Page title, page tagline, and page content
  2. Company's tagline, company's description, and company's image
  3. Team members

Now, let's setting them up!

1. Setting up Page title, page tagline, and page content:

  1. Go to Pages > Add New.
  2. Write your company title, description, and tagline.
  3. Display in portfolio frontpage: Yes. Template: About Us.
  4. Click Publish button.
Add About Us page
Create "About Us" section

2. Setting up company's tagline, description, and image:

  1. Go to Theme Options > General.
  2. In "About Your Company" section, fill/upload: Tagline, Description, and Image.
  3. Click Save Options button.

3. Setting up team members.

  1. Go to Team Members > Team Add New.
  2. Fill the member details as in the screenshot below.
Add New Team Member
Add New "Team Member"
Back to top

#2. Building "Portfolio" Section:

Portfolio Section
Portfolio Section

Portfolio section is divided becomes two parts.

  1. Title and tagline
  2. Portfolio items

Now, let's set them up!

1. Setting up title and tagline:

  1. Go to Pages > Add New.
  2. Write your portfolio title (i.e. "Portfolio" no quotation mark) and tagline.
  3. Leave blank the TINYMCE editor.
  4. Display in portfolio frontpage: Yes. Template: Portfolio.
  5. Click Publish button.
Add About Us page
Create "Portfolio" section

2. Setting up portfolio items:

  1. Go to Portfolios > Add New.
  2. Fill the portfolio title, description, and portfolio extra informations.
  3. Create/pick category in "Portfolio Categories" box.
  4. Set your featured image in "Featured Image" box.
Back to top

#3. Building "Services" Section:

Services Section
Services Section

Services section is divided becomes two parts.

  1. Title and tagline
  2. Service items

Now, let's set them up!

1. Setting up title and tagline:

  1. Go to Pages > Add New.
  2. Write your service title (i.e. "Services" no quotation mark) and tagline.
  3. Leave blank the TINYMCE editor.
  4. Display in portfolio frontpage: Yes. Template: Services.
  5. Click Publish button.
Add New Services page
Create "Services" Section

2. Setting up service items:

  1. Go to Services > Add New.
  2. Fill the title, and portfolio extra informations of your service item.
  3. Set your featured image in "Featured Image" box.
Back to top

#4. Building "Blog" Section:

Blog Section
Blog Section

Blog section is divided becomes four parts:

  1. Section title and tagline
  2. Blog posts
  3. Regular widget
  4. Tabbed widget

Now, let's set them up!

1. Setting up section title and tagline:

  1. Go to Pages > Add New
  2. Write your blog title (i.e. "Blog" no quotation mark) and tagline.
  3. Leave blank the TINYMCE editor.
  4. Display in portfolio frontpage: Yes. Template: Blog.
  5. Click Publish button.
Add New Blog page
Create "Blog" Section

2. Setting up blog posts:

You can build this as easy as you create regular blog posts. Go to Posts > Add New.

3. Setting up regular widgets:

You can build this as easy as you create regular widgets. Go to Appearance > Widgets. Then drag-drop available widgets to Home Sidebars.

Home Sidebar
Home Sidebar

4. Setting up the tabbed widget:

Go to Appearance > Widgets. Select the widget instance named "Awesome: Tabbed Contents". Drag in into provided sidebar area in the right side of your screen. Do the settings as you want.

Tabbed Widget
Tabbed Widget

5. Setting up the latest tweets widget:

Go to Appearance > Widgets. Select the widget instance named "Awesome: Latest Tweets". Drag in into provided sidebar area in the right side of your screen. Specify the title, Twitter user name, and number of tweets you want to display.

Latest Tweets Widget
Latest Tweets Widget
Back to top

#5. Building "Features" Section:

Features
Features Section

Features section is divided become three parts:

  1. Title and tagline.
  2. Shortcodes.
  3. Price-tables.

Now, let's set them up!

1. Setting up title and tagline.

  1. Go to Pages > Add New.
  2. Write your title (i.e. "Features" no quotation mark), and tagline. See the screenshot is given number below.
  3. Display in portfolio frontpage: Yes. Template: Features.
  4. Click Publish button.
Add New Features page
Create "Features" Section

2. Setting up shortcodes

Awesome come with six shortcodes. You can use those shortcodes in post editor to create unique post elements (contents) we have provided. Awesome's shortcodes are located under Minimal Theme logo in TINYMCE editor.

Shortcodes
Shortcodes

The function of each shortcodes are very explanatory.

  1. Alerts: Create alert boxes.
  2. Buttons: Create buttons.
  3. Columns: Create columns.
  4. Lists: Create listed items.
  5. Horizontal Line: Create horizontal line.
  6. Clear: Create hidden div element as clearer to prevent mess appearance after creating shortcodes.

Creating allert shortcode

  • Click Awesome's shortcode icon > Select Alerts.
  • In the shortcode popup which appeared, select alert type.
  • Then type your alert text.
  • Click Insert Shortcode.
Alert Shortcode Popup
Alert Shortcode Setting Popup
Back to top

#6. Building "Contact" Section:

Contact Section
Contact Section

Contact section is divided becomes four parts:

  1. Title, tagline, and contact details.
  2. Company name, address, phone and email contacts.
  3. Map direction.
  4. Contact form.

Now, let's set them up!

1. Setting up contact title, tagline, and contact details:

  1. Go to Pages > Add New
  2. Write your service title (i.e. "Contact" no quotation mark), tagline, and contact details in post editor.
  3. Display in portfolio frontpage: Yes. Template: Contact.
  4. Click Publish button.
Add New Contact page
Create "Contact" section

2. Company name, address, phone and email contacts

  1. Go to Theme Options > Contact.
  2. Fill input fields are given numbers as in the screenshot below.
  3. Click Save Options button.
Contact Options
Contact Options

3. Map direction

  1. Go to Theme Options > General
  2. Scroll down your screen until you find map section (textarea field). See the screenshoot below, the map embed field is given number 1.
  3. Place your Google Map embed code right there.
  4. Click Save Options button.
Add Map Direction
Map embed code field

4. Contact form

  • Creating contact form
    1. Go to Pages > Add New.
    2. Do settings as in the screenshot below. Create contact form
      Create contact form
  • Assigning admin's email
    1. Go to Theme Options > Contact.
    2. Fill input field is given number as in the screenshot below.
    3. Click Save Options button.
    Assign Admin Email
    Assign admin email
Back to top

One-page menu navigation is a special feature of Awesome theme. By activating this, user can jump to particlar pages/sections in frontpage (if you active portfolio template). You can easily create one-page menu navigation via Custom Menus. Go to Appearance > Menus.

The screenshot below is one-page menu setting in our demo theme. You can follow this to create your own.

Create One-Page Menu
One-Page Menu Setting

One-page menu navigation has relation to pages which you display in portfolio template. So you have to create Custom Links (#4). Fill the URL field with "#page-slug" with no quotation marks. You can get the page slug whenever you create page.

Back to top

E) Translation

Requirement: Make sure you have the WordPress installation in your language version.

For translating Awesome theme in your language, do these steps:

  1. Install Poedit software.
  2. Open awesome.mo file (Located in language folder of awesome theme).

    Open catalogue
    Open catalogue
    Open awesome.mo
    Open awesome.mo
  3. Start translating line by line
    Translating line by line
    Translating line by line
    • Select the line which you want to translate.
    • See the source text in box 2.
    • Write the translation in box 3.
  4. Save as, replace the file name into your language code (example: es_ES.po for Espana). See the complete list of languange codes here. Save as
    Replacing the file name
Back to top