Frontline Theme Documentation

Premium WordPress Theme by @Richard_Tabor & @RadiumThemes

1. The Installation

1.1 Introduction

Frontline is a top-of-the-line responsive business, agency and corporate theme with powerful capabilities second to none. Complete with a multitude of post types (galleries, portfolios, FAQs, team members), full SEO integration, 14 custom widgets, custom backgrounds/slides and hundreds of other premium features.

1.2 The Package

Download the package from your ThemeForest downloads tab and open the “Frontline-Package.” Inside that package you will find the following files/folders:

  • a. Frontline folder
  • b. Documentation folder
  • c. Licensing folder
  • d. PSD folder
  • e. Screenshots folder
  • f. Frontline.zip

1.3 Installing the Theme

Log into your wordpress admin, which is typically www.yoururl/wp-login.php. Once you’re in, click on the Appearance tab and then click on Theme. Click on the “Install Theme”, which is located at the top of the page, and then click “Upload”. Locate the the file Frontline.zip (NOT the entire Frontline-Package that was downloaded from ThemeForest, just Frontline.zip) and upload the zipped file to WordPress. After the theme zip is finished uploading, activate the theme by pressing “activate”.

1.4 Theme Update Notifier

Every so often we release theme updates to squash little bugs and push new features out, upon requests that we hear often. Built into Frontline is a really neat Update Notification system to let you know when there's an update posted up on ThemeForest (automatic). You'll see a small notification in the WordPress Dashboard sidebar, which you can then click to view the changelog. To update, head on over to ThemeForest.com, click on the "Downloads" tab and re-download the theme. Then just upload the necessary files to your server via FTP. Image Title Here

The Update Notification System in action.

1.5 Theme Support

Need some help? Head over to the Purty Pixels Support Forum and we'll hook you up. Make sure you grab your purchase code from the theme License Certificate.

2. Using the Sliders

2.1 Slider Overview

Frontline is built with a multitude of sliders pre-installed and styled for direct use, which are developed with a shortcode method. To add a slider, click on the "Sliders / "Add New" link from the WordPress Dashboard, then select your slider type/options from the "Slider Settings" meta box on the right (under the Publish Button). Just upload your image and set the content you would like displayed (if applicable) and add more slides to your slideshow. There are two types of sliders included, the Flexslider and RefineSlide.

Image Title Here
Adding a Slideshow Shortcode in Frontline.

2.2 Slider Shortcodes

Once you're slider is all set (you can edit it later as well), hit "Publish", go to the "Sliders" Dashboard page and copy the shortcode generated for you. You may place that shortcode anywhere you want to output that slider.

3. Custom Post Types

3.1 The Gallery

We built a cool gallery image slider within the foundation of the Frontline theme. To take advantage of this feature, simply follow the steps listed out below to set up your Gallery Template:

  1. a. Make a new page via your WordPress Dashboard
  2. b. Choose the "Gallery Template" from the side frame
  3. c. You will notice a new frame appear, labeled "Template Settings"
  4. d. Within this frame, select the options you would like
  5. e. Set your custom background style/images
  6. f. Hit "Publish"


After your template is established, hit the "Add Gallery" link from either the WordPress Admin Dashboard or the Admin Bar at the top of your screen. This will make the actual galleries that will display on the Gallery Template you just built. Follow these steps to make your Gallery:

  1. a. Click "Add Gallery"
  2. b. Name the Gallery
  3. c. Add a small excerpt (in the Excerpt Meta Box)
  4. d. Add a description if you'd like
  5. e. Upload your photos
  6. f. Set your custom background style/images
  7. g. Upload a featured image
  8. h. Hit "Publish"


The recommended width for your gallery images is 940 pixels and the gallery handles auto-height, so the height of the images can vary without breaking anything. You may also add a description to each of the images (in the media uploaded) and that will display whenever the "Info" button is pressed on the gallery image.

3.2 Frequently Asked Questions Post Type

The FAQ format is a unique tool for you to easily add a FAQ page to your website. First you need to create a new page and set it as the FAQ Template (the same steps as creating any page).

After your FAQ Template is set, follow the steps below to implement create each FAQ:

  1. a. Click "Add FAQ"
  2. b. Add your FAQ Question in the title field
  3. c. Add your answer in the paragraph field below it
  4. d. Choose a FAQ Category/Group (organizes them)
  5. e. Hit "Publish"

3.3 Team Member Post Type

The Team Member Post Type is a cool addition to the Frontline theme. With it, you may easily input team member data to generate a quick and simple team page. Follow the steps below to create your team members page.
The recommended image size for the Team Member featured image is 220 x 136 pixels.

  1. a. Create your Page with the "Team Members" Template
  2. b. Click on "Add Member"
  3. c. Fill in the meta information (name, bio, featured image, starting date)
  4. d. Add in your social media links

3.4 Portfolio Post Type

To set up your portfolio, create a new page within the “Pages” > “Add New” menu, with the “Portfolio” Template applied. Next, choose the amount of columns that you'd like displayed (from the Template Settings panel on the top right).

After you've set up your template, the steps below will guide you through setting up your portfolio items.

  1. a. Navigate to the "Portfolio" tab on the WP Dashboard bar and click “Add New.”
  2. b. Choose a portfolio post type (Image, Slideshow, Video and Audio)
  3. c. You may assign skills (which is used to filter the portfolios)
  4. d. Locate the Featured Image Panel on the Porfolio editor page and click “Set Featured Image.”
  5. e. Add in any chosen meta data/description and hit "Publish"


To change the order in which your slider images are displayed on your website, go into the Slider interface (Dashboard > Slider) and click “Sort Slides.” Drag and place your slides in the order in which you want them to appear on the live site.

3.5 Portfolio Post Formats

  • a. Image / Slideshow Portfolio Post Type
    First select the “Slideshow” Portfolio Type (located in the Portfolio Detail Settings Panel, beneath the WordPress Editor). Then upload images either through the “Upload/Insert Media” icon at the top of the WordPress editor, or through the “Image Settings Panel.” The recommended width of the portfolio pieces is 694 pixels (height can be whatever you'd like it to be). You may view your slideshow images by checking the gallery within the image uploader.
  • b. Audio Portfolio Post Type
    To upload a audio portfolio post, ensure that you first select the “Audio” Portfolio Type (located in the Portfolio Detail Settings Panel, beneath the WordPress Editor). Then locate the Audio Settings Panel and insert the URL for your audio file. You may use URLs for .mp3, .oga and .ogg audio files.To upload an image, click on the default “Upload/Insert Media” icon at the top of the WordPress editor, copy the file URL and paste it in the “Poster Image” field of the Audio Settings (below the editor). The recommended image size is 658 x 403 pixels. Be sure to enter your image height in the “Poster Image Height” field.
  • c. Video Portfolio Post Type
    To upload a video portfolio post, ensure that you first select the “Video” Portfo- lio Type (located in the Portfolio Settings Panel, beneath the WordPress Editor). Ensure that you set the Video Height (located in the Video Settings, beneath the WordPress Editor.) The recommended height is 400 pixels.You may host videos and pull in their URLs for .m4v and .ogv video files. If you are using something other than a self hosted video, such as YouTube or Vimeo, paste the embed code here. The recommended width is 658 pixels.

4.Setting up the Blog

5.1 Creating your Blog Page

Create a new page within the “Pages” > “Add New” menu, with the “Default” Template applied. Name and publish the page. From within your dashboard, navigate to the “Settings” panel and click on “Reading.” From the corresponding “Posts Page” drop down, choose the page that you just created (that has the Default Template applied). Ensure that you save your changes.

Image Title Here
Setting up your Reading Settings for the Blog.

4.2 Adding a Blog Post

From within your WordPress dashboard navigate to the Posts tab along the side bar and click “Add New.” To add a custom excerpt, ensure the excerpt checkbox within the screen option is checked. (Top right of the blog page, near the Admin Bar)

4.3 Uploading Images

To upload an image, click on the default “Upload/Insert Media” icon at the top of the WordPress editor. The recommend width of the blog images is 642 pixels.

4.4 Blog Featured Images

To upload a featured image, locate the Featured Image Panel on the Porfolio editor page and click “Set Featured Image.” The recommended featured image size is 600 x 235 pixels.

*DO NOT click the “Insert Post” button within the image uploader. Click the “Save all changes” button instead.

4.5 Blog Post Formats

  • a. Gallery Blog Post Format
    First select the “Gallery” Post Format (located on the right side, beneath the "Publish" button). Then upload images through the “Upload/Insert Media” icon at the top of the WordPress editor. The recommend size of the images is 600 x 235 pixels , though you may have any height you'd like. You may view your slideshow images by checking the gallery within the image uploader.
  • b. Other Formats (Audio, Video, Aside, Link, Quote, ... )
    There are 10 different post formats within Frontline: standard, aside, gallery, link, image, quote, status, video, audio and chat. To modify your post format, you can find the selector right beneath the “Publish” button. Just select the one you would like, add in the data requested per that post (appears beneath the WordPress editor) and post away.

5. Sidebar Management

5.1 Widget Area Overview

There are 10 intense custom widgets built straight into the theme. We want you to have everything you need, straight out of the box, to build a spectacular website. Just select the one you would like use from the widget dashboard and put it into one of the default widget areas (or one that you added yourself).

5.2 Sidebar Locations

On most of the theme's pages (default templates, blog, team and FAQ) you have the option to choose whether or not you would like a sidebar present and the location of that sidebar (left or right). Just select the location of the sidebar (located beneath the WordPress Editor) and save it. If you have not set a new sidebar for that page, the default sidebar will take over.

Image Title Here
Selecting your sidebar location.

5.3 Sidebar How To

You can easily build an unlimited number of sidebars to use on whatever pages you'd like. You could even have a different sidebar on every page if you'd like. All you need to do is:

  • a. Go into your WordPress Dashboard
  • b. Go to Widgets/Sidebar Widget Areas
  • c. Name your widget area and define the rules (display location)
  • d. Save your widget area
  • e. You will then automatically see your sidebar generated in the Widget Dashboard

6. Custom Widgets

6.1 An Overview

There are 12 powerful custom widgets built straight into the theme. We want you to have everything you need, straight out of the box, to build a spectacular website. Just select the one you would like use from the widget dashboard and put it into one of the default widget areas (or one that you added yourself).

6.2 The Widgets in Detail

  • a. Testimonials Widget
    This custom widget can be applied via the Widget Panel as well. The widget generates up to three testimonials whereas you enter the name, company, image URL and associated testimonial.
  • b. Social API Counter Widget
    After entering your social links, this widget grabs the follower/subscriber count and links to the corresponding social media accounts. The widget is built to include facebook, twitter, rss and dribbble.
  • c. About Us Widget
    This widget adds an information area to your theme. Add in your introduction, contact details (phone, email, address), and opt in for a "Need Directions" field (which automatically pulls it's address from the address field).
  • d. Newsletter Widget
    This widget is designed to enable you to easily connect to your viewers via a newsletter by gathering their email addresses. Just add this widget to a sidebar on any page, title it, add a description if you'd like, and add in your newsletter subscribe code.
  • e. Quick Contact Widget
    This widget is yet another really flexible widget. It displays a contact form fitted to the footer, which has the capability to turn off/on multiple form fields. To use the widget, add it to either of the first 2 footer widget areas, add a title, and select which form fields you would like the widget to output.
  • f. Social Media Widget (20 Icons / 3 Styles)
    The social media widget extends the reach of your website and overall presence online. It's simple to use and even includes 3 different styles (selectable from within the widget). Simply add in your links, write an optional description, select your style and save.
  • g. Custom Images Widget (4 Sizes in 1 Widget)
    This custom widget generates a up to 6 images in 4 different sizes. Just add in your widget title, image size, optional description, and a image URL / link to display the images.
  • h. Recent Portfolio Widget
    This widget is designed to work in any of the sidebars throughout the theme. It pulls in your most recent portfolio posts (featured image and categories). You can set the number of posts that populate in the list, the widget title and a small description if you'd like.
  • i. Recent Gallery Widget
    This widget is designed to work in any of the sidebars throughout the theme as well. It pulls in your most recent gallery posts (featured image and excerpt). You can set the number of posts that populate in the list, the widget title and a small description if you'd like.
  • j. Flickr Widget
    This custom widget can be applied via the Widget Panel. You may add a title, insert your Flickr ID, set the number and type of photos you’d like to display, set the output as random or latest and even add a little descriptive message.
  • k. Custom Twitter "Latest Tweets" Widget
    Just drag it to the widget area of your choice, set your twitter name, the desired amount of tweets you’d like to pull in, and the button/text style you'd like. You can opt to have a link to your twitter account to, by putting some in the last field, such as “Follow Me.”
  • l. Custom Recent Posts Widget
    This widget can be applied via the Widget Panel and is built to be used in the sidebar areas in the theme. You can set how many posts that populates.

7. The Custom Shortcodes

7.1 Flexible Shortcode Generator

Seamlessly built into the WordPress editor is a simple-to-use shortcode generator. No more sifting through the detailed documentation to find a particular shortcode. Just simply press the icon and select your shortcode, which will prompt a pop-up with the meta fields.

Image Title Here
A shot of the Shortcode Generator included in this theme.

7.2 The Shortcodes

  • a. Portfolio/Gallery/Post/Page Carousel Shortcodes
    Easily display multiple carousels of the portfolio, gallery, posts and pages with just three simple clicks...on any page. Customize the corresponding title and "view more" link (on the right). It's one of the best shortcodes on the market.
  • b. Social Media Icon Shortcodes (20)
    Show some social love with these nifty icons. All you have to do is hit the social button in the WordPress editor, choose your desired icon, and drop in your link. There's 20 icons to choose from.
  • c. Tabbed Content Shortcode
    This shortcode can be accessed through the WP Editor to display your content in a tabbed layout.
  • d. Toggle Shortcodes
    Enter toggled text by selecting "Toggles" in the shortcode generator and entering the toggle title/content and state that you would like it to load as (open or closed)
  • e. Three State Buttons & Icon Buttons [NEEDS EDITING]
    We’ve included a powerful set of shortcode buttons in Frontline. Choose between squared/rounded buttons, 6 colors (not including the theme accent color default) and icon buttons.
  • f. Featured Area Shortcodes (Icons)
    There’s 18 built-in Featured Area shortcodes at your disposal. Select your icon then add your title/description. It’s easy, looks cool and is great to feature stuff (like services, skills, factoids and the like). The icons in the theme are by the talented Haziq Mir.
  • g. Pricing Tables
    Easily enter some pricing tables into your site by using this shortcode. All the fields are generated for you, just enter your information.
  • h. Call to Action
    Display a simple and effective CTA with this shortcode. Customize the style, tagline, button text & click-through link.
  • i. Highlight Action
    Highlight text just like this right here with the use of a simple shortcode. It's generated by the shortcode generator as well.
  • j. Three List Styles
    There are 3 list styles pre-styled in this theme. Easily pick and choose them with the generator.
  • k. Alert Notifications
    There are five variations of message notifications (default, note, info, alarm, success) and they can be inputted via the shortcode generator
  • l. Clientele Logos
    This shortcode displays a cool typical "clientele" area, though you may use it anyway you'd like. An example of this shortcode can be seen on the homepage of the theme demo.
  • m. Multiple Column Layouts
    There are all sorts of column capabilities included in the shortcode generator. It's easy to add new columns in any fashion that you'd like.
  • n. Three Drop Cap Styles
    There are all sorts of column capabilities included in the shortcode generator. It's easy to add new columns in any fashion that you'd like.

8. Custom Backgrounds

8.1 The Settings

Frontline has a powerful custom background capability to enable you full control of each page's background color, image(s), and patterns. The following options/settings are available on each page:

  • a. Upload Background Image(s)
  • b. Enable BackStretch
  • c. Background Color
  • d. Background Repeat Options
  • e. Background Position Options

8.2 BackStretch Background Slider

As you see in the primary demo, you have the option to select the BackStretch Background Slider for each and every page/post you make. This basically makes the uploaded background images full screen and they will rotate out (fading style) if you upload more than one image. All background images in the demo are 1414x1200 pixels (blurred effects are thrown in via Photoshop).

9. Mega Menu/Menus

9.1 Setting up the Menus

Frontline is packaged with two WordPress Menu locations, the top right of the window and the primary menu above the Page Title Bar. To set these locations, simply create two menus in the WordPress Menu Dashboard "Dashboard/Appearance/Menu/Add New" and set the theme locations for "Main Menu" and "Top Menu" on the menus page (top left).

9.2 Mega Menu

The Mega Menus in Frontline can handle up to four columns of data. To set up a menu, click the "Use as Mega Menu" check box on the menu item and list out drop down menu items below it. See the image below to see how the first column of the demo mega menu is set up. Simple enough.

Image Title Here
How a Mega Menu is set up (with a text description entry).

10. Theme Options Panel

10.1 General Settings

The General Settings is where the most of your customization comes from. You can choose one of theme styles from there, set the theme accent color, set your logo, upload your favicon and apple touch icon. Images uploaded using the Theme Options Panel will be located in the site/wp-content/uploads/rtw folder.

Image Title Here
A shot of the Theme Options Panel included in the Frontline Theme.

10.2 Page Settings

The Page Settings tab is focused on the content of showing/hideing tags on posts, showing which sharing buttons you would like on the single posts. Additionally, select which content you'd like to display on the archives page.

10.3 Social Icon Settings

This is the section where you can opt into placing your social media icons in the footer of the theme. Just insert your URL's/Usernames and the css/links will be generated accordingly. If you leave specific links empty they will not populate on your website.

10.4 Typography Settings

Select from the entire Google Fonts array of fonts, adjust the font weight, text shadow, style, transform properties, size, line height and letter spacing. All within the Typography Panel within the Theme Options. Just create a Selector Group (which is derived from the class/id of the typography you want to change and adjust it's settings.

10.5 SEO Settings

That’s right, there’s Search Engine Optimization built right into this theme. No more installing third-party SEO plugins, that may or may not function properly with your WordPress theme. With Frontline, it’s all here in one nifty bundle. The SEO Options even appear on each post or page, so you can take advantage of each search engine optimization opportunity possible. You’ll see, after reading the round-up below, the full breath and power of the SEO Settings woven into the core of Frontline:

  • a. Set your Homepage Title Layout
  • b. Enter your Homepage Meta Keywords/Phrases
  • c. Enter your Meta Description
  • d. Insert your Singular Meta Keywords and Description
  • e. Set your Page, Archive, Search Results, and Single Post Title Layouts
  • f. Specify a custom title separator
  • g. Enable/Disable Follow Meta Tags for all posts
  • h. Select which contexts are not indexed by search engines

10.6 Import/Export

Here you can export your theme code and even import theme options.

11. Theme Files & Sources

11.1 Templates

The Frontline Theme has 10 built in page templates. They are: Default, Gallery, Portfolio, FAQ, Team Members, Sitemap/Archives, Contact, Feedback Form, Support Form, Work Inquiry Form.

11.2 Javascript Files

11.3 Radium Themes

We're partnered with the wonderful folks at Radium Themes. Go check them out. Visit RadiumThemes

11.4 Patterns & Icons

11.5 Credentials