Alpha Theme Documentation

This file has the writen documentation for the Alpha WordPress Theme. For video instructions please checkout the Alpha section on the Knowledgebase. Please read the documentation before seeking support. Thanks!

Theme Support

First of all I would like to thank you for purchasing this theme and you continuted support as a WPExplorer customer. Before going through the documentation of the theme I wanted to let you know that this theme does include support via the ticket site located at WPThemeHelp.com which we own and operate for WPExplorer customers only.

Important: Theme support is provided to help with any issues, such as bugs or incompatabilities of the theme purchased as well as any futher explanation of a function if you have not quite understood something here in the documentation file. Theme support does not include any sort of customizations for you or your client, so please try and refrain from opening tickets with these requests. Thanks!

Theme Requirements

In order to run this theme you should have the latest version of Wordpress (3.4+) installed on your self-hosted WordPress installation. The theme requires PHP5+ and uses new features available only to WP 3.3+ users.

Adding Icon Font - Please Do Before Installing

Due to certain legal restrictions at the momment I have been notifed that including fonts into themes for sale is currently not allowed. So you must do so on your own so that your site will looks as beautiful as my demo. Luckly it's very easy!

Adding the Icon Fonts

*** Watch the video guide
  • Visit Font Awesome
  • Download the latest version of the font

  • Extract
  • Open the extracted folder
  • Locate the fonts folder
  • Copy all files
  • Extract the theme you purchased
  • Browse to the theme's folder - upload/theme-name/
  • Paste the copied fonts in the font's folder

Video Instructions

Can't figure it out?

can't get them working? Contact me via my ThemeForest profile page so I can help you out!

Installing The Theme

You'll want to install this theme just like any other WordPress theme, either by uploading the main theme folder via FTP (unzipped) or the zipped file via the Wordpress theme upload section

Using FTP

  • Log into your site via FTP
  • Browse to your folder located at wp-content/themes
  • Upload the MAIN theme folder. This is the folder located inside the "upload" folder in the zip file that you downloaded from Themeforest.
  • Log Into Wordpress and go to Apperance --> Themes
  • Find the theme and click to activate

Using Wordpress

  • Log into your WP dashboard
  • Browse to Apperance --> Themes
  • Click to "add new" and then follow the instructions on the screen
  • When it askes to select a file find the zipped theme folder located in the "upload" folder in the zip downloaded from Themeforest.

Video
http://www.wpthemehelp.com/knowledgebase/installing-your-premium-themeforest-wordpress-theme/

Uploading The Sample Data

This theme includes a sample.xml data file which will allow you to upload some dummy content to your site to help you get started with the theme.

  • Unzip the folder you downloaded from themeforest
  • Browse to the folder called "SampleData"
  • Find the sample-data.xml file
  • Log into WordPress
  • Go to Tools --> Import
  • Click on "WordPress"
  • If you don't have it already, install the plugin. Once done, return to the previous screen
  • Click to select your file
  • Choose the "sample-data.xml" file located previously

Video
http://www.wpthemehelp.com/knowledgebase/uploading-your-xml-sample-data/

Theme Settings Panel

This theme includes it's own administration panel that will allow you to change many aspects of the theme such as the logo, color scheme, portfolio options...etc.

To access the theme settings panel simply...

  • Log into your WordPress dashboard
  • Go to Apperance --> Theme Options

Note: Before you go editing your admin panel take a look at the section below on setting up the homepage

Custom Post Types

This theme comes with some powerful custom post types that makes adding content to your site a breeze. In the image below you can see where your custom post types are located. The Highlights are for the homepage only while the rest are for other sections of your site.

Setting Up Your Homepage

If you are NOT using a static page as your home and want your homepage to look like the one in the demo, make sure under "Settings --> Reading". The "Front page displays" "Your latest posts ".

Homepage Modules

The homepage is fully custommizable via the theme panel. If you go to Apperance --> Theme Options and click on the home tab you can see all the homepage options. Easily move the modules around to enable/disable them as well as customize via the available fields/options. 5 custom modules can be used to add extra content and HTML via the custom fields in that admin tab. And to use the homepage widgets make the sure module is enabled then go to your regular widgets area - Apperance > Widgets to add them.

Important: You're homepage modules should look just like the image below. If they do not, scroll down and click the theme panel's reset button.

Homepage Widgets

Below you'll find the code I use in the 3 homepage text widgets in my demo

This theme makes use of the latest WP menu system.

  • Go To Apperance --> Menu
  • Create A New Menu by clicking the little + tab
  • Add your menu items by selecting them on the left side
  • Choose your menu location. This theme includes 3 menu locations: one for the top bar, one for the main navigation and one in the footer.

Adding A Home Button

Adding a home button to your site is really easy. Simply go to the "pages" section on the left and click the "ALL" tab. The first option should be to add a home link

Adding Icons To Your Menu Items

Adding icons is super easy. All you need to do is use the icon font shortcode as shown in the image below. The icon name you can get from the giant list of font icons from Font Awesome. When adding your icon shortcode just copy the name from that site but without the "icon-" part at the front.

Adding Sliders

Adding sliders to your site just got a whole lot easier! Click on the image below to see the full screenshot which walks you through the sections of a creating and using sliders.

Note: Adding An Image

When adding an image to a slider make sure that the full-width style is selected and then click insert into post to insert the image URL into the field

Creating A Portfolio Page

Adding Portfolio Items

Before adding your portfolio template you should make sure you've added some portfolio items! To do so click on the portfolio tab on the left side of WP dashboard and select add new. Then add your post content, fill out your options, set your featured image and publish. Please see the image below for some further guidance!

Hint 1: Use the default WordPress "excerpt" field for adding custom excerpts to your portfolio entries.

Hint 2: Remember featured images should be at least 450px by 450px for the entries.

Hint 3: Use the slider if you want to add images, images that link to other sites, videos, or images with video lightbox at the top of your post. The slider is also useful if you need a different images on the post then the smaller featured image.

What is this??

If you see something like the image below (slider arrows floating randomwly) it's because you don't have any slides but your featured image is active. To fix simply disable the slider or if you want the slider, add some slides to it!

Adding The Portfolio Page

Now that you have some portfolio items setup, it's time to create the page template to showcase your beautiful work. Simply go to Pages and create a new one. Then refer to the screenshot below for adding page templates.

Creating A Services Page

The services in this theme work just like regular pages. Nothing complex about them. Simply click on Services-> Add new and add your service. You can view these pages just like a regular page or you could also show them in tabs like on my demo using the services page template.

Hint 1: You can set featured images for the services that will show up on the service tabs template. These are 680px wide but can be any height.

Hint 2: When adding sliders to the service tabs try and avoid using the flexSlider "smooth height" option. It seems to be buggy with the Tabs UI in certain browsers.


Adding the page template

Simply go to Pages and create a new one. Then refer to the screenshot below for adding page templates.

Adding Staff Members

Adding staff members is a lot like adding regular posts, simply go to the staff tab on the side of the dashboard and click add new. Here you can add a description for the staff member. Nothing too fancy here. Just make sure to set your featured image! And also you can use the WordPress excerpt field for custom excerpts for the entries.


Creating A Staff page

Simply go to Pages and create a new one. Then refer to the screenshot below for adding page templates.

Creating A FAQs Page

Adding faqs

  • Log into Wordpress
  • Click on "FAQs" --> "Ad New"
  • Enter the question in the title.
  • Add the answer in the post content
  • Add a category if you wish
  • Set your FAQ icon (optional)
  • Click Publish

Creating A FAQs page

Simply go to Pages and create a new one. Then refer to the screenshot below for adding page templates.

Galleries

Adding A Post Gallery

This theme comes with a unique gallery shortcode that you can use for showing a all the image attachments from a post. The shortcode is available in the shortcode inserter and also explained below in the shortcodes section below.

These galleries can be added on any page or post. Enjoy!


[wpex_gallery columns="3" exclude="1,2,3,4"]
Options:
  • columns: 2,3,4,5,6
  • exclude: The ID of images you wish to exclude

Creating The Blog Page

  • Log into Wordpress
  • Add a new page
  • Select The Blog Page template
  • Publish
  • All your blog posts will show up automatically

The theme has a built-in shortcodes editor which you can access via a button in the post editor as shown in the image below, however, if you want to add them manually, I've added the shortcodes reference list below the image.



Shortcodes Reference List

HR (divider)

[hr style=solid-line margin_top="35px" margin_bottom=""]
Options:
  • style: dashed-line, double-line, dotted-line, solid-line, none
  • margin_top: top margin in pixels
  • margin_bottom: bottom margin in pixels

Alerts

[alert color=red title="" align=""]Your Text[/alert]
Options:
  • color: red, green, blue, yellow
  • align: none, left, right
  • title: a title value

Buttons

[button color="pink" url="#" target=""]Button Text[/button]
Options:
  • color: black, blue, brown, light-gray, gold, gray, green, orange, pink, purple, red, teal
  • target (optional): blank, self

Font Icon

[font_icon icon="arrowup" margin_top="0" margin_bottom="0" margin_right="10px" margin_left="0"]
Options:
  • type: arrowup, arrowdown, arrowleft, arrowright, approve, add, remove, log, calendar, chat, loop, search, mail, move, edit, pin, reload, rss, tag, user, clock, settings, comment, fork, like, favorite, key,home, lick, unlock...see all types on Font Awesome
  • target (optional): blank, self
  • Hint The Icon font shortcodes can be used in buttons, alerts, content, widgets and even the menu.

Social Icon

[social service="twitter" url="#" target="blank"]
Options:
  • service: behance, dribbble, envato, evernote, facebook, flickr, forrst, github, google, googleplus, gowalla, icloud, linkedin, paypal, pinterest, quora, rss, skype, tumblr, twitter, vimeo, wordpress, youtube
  • target (optional): blank, self

Gallery (shows post image attachments)

[wpex_gallery columns="3" exclude="1,2,3,4"]
Options:
  • columns: 2,3,4,5,6
  • exclude: The ID of images you wish to exclude

Testimonial

[testimonial by="Happy Customer"]testimonial content[/testimonial]
Options:
  • by: name of the person who said the testimonial

Accordion

[accordion][accordion_section title="Section 1"]Sample Content Accordion 1[/accordion_section][accordion_section title="Section 2"]Sample Accordion Content 2[/accordion_section][/accordion]

Toggle

[toggle title="This Is Your Toggle Title"]Sample Toggle Content[/toggle]

Tabs

[tabgroup][tab title="Tab 1"]Sample Tab 1 Content[/tab] [tab title="Tab 2"]Sample Tab 2 Content[/tab][/tabgroup]

Pricing Table

[pricing_table][pricing column="2" title="Standard" price="$99" price_extra="Optional Extra text" button_url="#" button_text="order" button_color="green"]Your Features In here[/pricing]
Options:
  • column: 2,3,4
  • price: Your price
  • price_extra: Extra text below pricing button
  • button_url: URL for your pricing button
  • button_text: Button text
  • button_color: black, blue, brown, light-gray, gold, gray, green, orange, pink, purple, red, teal

Google Map

[googlemap title="Add Your Custom Title" location="Ad Your Address" zoom="10" height="300"]
Options:
  • title: A title used in the tooltip
  • location: The address location for the map
  • zoom: Map zoom value
  • height: Enter a height - this is a pixel value but the "px" is not necessary

Normal Columns

[column size="half" position="first"]Your Content[/column]
Options:
  • size: half, third, fourth
  • positon: first, inner, last
  • offset: two-third, three-fourth

If you experience any floating issues with the columns, use the [clear] shortcode after your last column to clear the floats.

Adding A Contact Form

This theme doesn't have a built-in contact form, but it does have included styles for the Contact Form 7 Plugin. So I would highly recommend using that plugin. Of course any should work.

Translating The Theme

This section can help you translate the entire theme. If you just want to change the front-end text see the Translations tab in the theme panel.



This theme has been localized and it includes a .po and .mo file so you can translate the theme to your own language.

Step 1: Copy Default.po File

Located in the "lang" folder of the theme is a file called default.po. Copy this file to your desktop for editing.

Step 2: Edit Default.po File

Open the .po file using a program like PoEdit.

Click on the text to edit and enter your translation in the bottom box

Step 3: Save Default.po File

Next you have to save your .po file using the naming convention is based on the language code (e.g. pt for Portuguese) followed by the country code (e.g. _BR for Brazil). So, the Brazilian Portuguese file would be called pt_BR.po.

When saing your .po it will automatically create a new .mo file for you, with the same naming convention ( so using the example above, the file would be called pt_BR.mo

Step 4: Upload New Files

Upload the .po and .mo files you just created to your /lang folder so they are in the same directory as the default.po and default.mo

Step 5: Edit Your WP-Config File

The last step is to tell WordPress what languange to show

Open your wp-config.php file in a text editor and search for:

define ('WPLANG', '');

Edit this line according to the .mo file you've just downloaded, e.g. for the Portuguese spoken in Brazil you must add: 

define ('WPLANG', 'pt_BR');

Resources Used

The following resources where used in the development of this theme: