Flare WordPress Theme - Documentation

Created: 03/03/2012 By: bring the pixel team Email: bringthepixel@gmail.com Thank you for purchasing our Flare WordPress Theme. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here. We'd be glad to help you if you have any questions relating to this theme. No guarantees, but we'll do our best to assist. If you have a more general question relating to our themes you might consider visiting our support forum. Thanks so much!

Table of Contents
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. Introduction Installation Important Notes General Setup Homepage & Subpages Setup Posts Setup Works Setup Shortcodes Widgets Theme Folder Structure CSS files Javascripts PSD files Sources and Credits Routines

Introduction
Theme Areas
The Flare Theme is divided into the 6 independent areas. 1. 2. 3. 4. 5. 6. the Preheader (optional) the Header the Precontent (optional, different for every single page) the Content the Prefooter (optional) the Footer

Print to PDF without this message by purchasing novaPDF (http://www.novapdf.com/)

Installation
After unzipping the file downloaded from ThemeForest you should see the following folder structure: Demo Content - demo content and theme options in XML files Documentation - theme documentation in the HTML format flare - theme files - in case you want to upload the theme through the FTP flare-child - child theme files - in case you want to upload the child theme through the FTP Licensing - theme license Resources - PSD files and other resources
Print to PDF without this message by purchasing novaPDF (http://www.novapdf.com/)

flare.zip - zipped theme files - in case you want to upload the theme through the WordPress admin flare-child.zip - zipped child theme files - in case you want to upload the child theme through the WordPress admin

Install the Flare Theme as any other theme. Just make sure you upload to the 'wp-content/themes/ ' on your server only the Flare folder, not the whole pack. If you want to know more about the installation process, check out the WordPress Codex Installing WordPress. After activating the Flare Theme you will see some changes in the WordPress Admin. The most important are the Theme Options located in the WordPress Admin Appearance Theme Options.

Important Notes
Demo Content
The Theme comes with the Demo Content which you can import from an XML file. This way you can easily check how everything works. Keep in mind that you should perform import procedure only on a fresh | new WordPress installation. Import content 1. 2. 3. 4. Go to the WordPress Admin Tools Import Click "WordPress" import system Upload the "content.xml" file from the "Demo Content" folder Click "Upload file and import"

If you want to know more about the content import feature, check out the WordPress Codex Importing Content Import Theme Options After importing content you should also import Theme Options:
Print to PDF without this message by purchasing novaPDF (http://www.novapdf.com/)

1. Go to the WordPress Admin Appearance Import Theme Options 2. Upload the "theme-options.xml" file from the "Demo Content" folder 3. Click "Import XMl"

A Child Theme keeps your modifications safe

You will probably want to modify this theme somehow. We strongly recommend to use the Flare Child Theme then. That way, when the parent theme is updated, your modifications are preserved. You don't have to create your own child theme, just use the one from the zipped file downloaded from ThemeForest. Read more about Child Themes in the WordPress Codex

Use the Help Mode when building your site

The Help Mode provides useful, context-aware tips throughout the site. The Help Mode means easier theme maintenance , less theme documentation and faster learning curve . The Help Mode is visible only to users who have been assigned the administrator role, so regular site visitors won't see it. You can enable/disable the Help Mode in the WordPress Admin Appearance Theme Options General Main Tab.

Create unique slugs

Keep your category and tag slugs unique . This rule applies to every taxonomy: the post categories, the post tags, the work categories, the work tags, etc. So having a post category and a work category with the name "Marketing" is OK, but their slugs must be different, like "marketing" and "marketing-works".

General setup
You must before anything: Upload your logo Set up the Navigation Menus Set up the Preheader Theme Area Set up the Prefooter Theme Area You should
Print to PDF without this message by purchasing novaPDF (http://www.novapdf.com/)

Set up the Feeds You can Customize the look of your site

Homepage & Subpages Setup

Homepage
Create the homepage Add a slider to the Precontent Theme Area Add some text to the Precontent Theme Area Hide comments Hide/show various page elements Assign some relation tags

Customize an individual page

Not every single page must look the same. You can customize it in the following ways: Add a slider to the Precontent Theme Area Add some text to the Precontent Theme Area Assign a custom sidebar Hide comments Hide/show various page elements Assign some relation tags

Blog Setup
Basic Setup
These are the steps you should follow to basically set up the Blog site section: 1. Click on the "Posts" menu item from the WordPress Admin Menu 2. Add some categories | tags 3. Add some really simple posts - you will improve them later. (just fill in the title, provide some content, set the featured image and assign some categories | tags) 4. Create the Post Index Page 5. Configure the default look & feel of all post archive pages 6. Configure the default look & feel of all single post pages 7. Add the Post Index Page and categories to the navigation menus

Customize an individual post

On a single post page Not every single post page must look the same. You can customize it in the following ways: Change the template Assign a custom sidebar Customize the mediabox - a part of a template, that displays entry attachments Hide/show various page elements Assign some relation tags On index | archive pages & inside shortcodes | widgets Not every single post must be the same. You can make the entry title, the featured media and the button to behave in one of the following ways: Open the entry in the same window - default behaviour Open the featured media in a new window Open the featured media in a lightbox Don't link

Print to PDF without this message by purchasing novaPDF (http://www.novapdf.com/)

Works Setup
The Theme comes with a custom post type for works. It means, that regular blog entries are separated from works. You can notice it by looking at the main menu in the WordPress Admin. Besides the 'Posts' section, there is also the 'Works' section. You can organize your works with work categories | tags. Work categories | tags are built using custom taxonomy functionality, so they are separated from standard, built-in WordPress categories | tags.

Basic Setup
These are the steps you should follow to basically set up the Works site section: 1. Click on the "Works" menu item from the WordPress Admin Menu 2. Add some work categories | tags 3. Add some really simple works - you will improve them later. (just fill in the title, provide some content, set the featured image and assign some work categories | tags) 4. Create the Work Index Page 5. Configure the default look & feel of all work archive pages 6. Configure the default look & feel of all single work pages 7. Add the Work Index page and work categories to the navigation menus

Customize an individual work category | work tag

Not every work category or work tag must look the same. You can customize it in the following ways: Change a template Change a number of maximum entries to display Assign a custom sidebar Hide/show various page elements

Customize an individual work

On a single work page Not every single work page must look the same. You can customize it in the following ways: Change the template Assign a custom sidebar Customize the mediabox - a part of a template, that displays entry attachments Hide/show various page elements Assign some relation tags On index | archive pages & inside shortcodes | widgets Not every single work must be the same. You can make the entry title, the featured media and the button to behave in one of the following ways: Open the entry in the same window - default behaviour Open the featured media in a new window Open the featured media in a lightbox Don't link

Custom Shortcodes
The Flare Theme comes with many custom shortcodes you can use to spice up your content. When you're editing content in the Visual Mode, click the "[/]" icon (see image below) to open up the Shortcode Generator. This little tool provides a user friendly interface for all shortcodes and code snippets.

Print to PDF without this message by purchasing novaPDF (http://www.novapdf.com/)

Custom Wigdets
The Flare Theme comes with some custom widgets ready to use. All custom widgets names start with prefix BTP prefix BTP Feeds - display feeds defined in WordPress Admin Feeds Main Tab BTP Contact Form - a widget alternative for the [contact_form] shortcode BTP Twitter - a widget alternative for the [twitter] shortcode BTP Custom Pages - a widget alternative for the [custom_pages] shortcode BTP Related Pages - a widget alternative for the [related_pages] shortcode BTP Custom Posts - a widget alternative for the [custom_posts] shortcode BTP Popular Posts - a widget alternative for the [popular_posts] shortcode BTP Recent Posts - a widget alternative for the [recent_posts] shortcode BTP Related Posts - a widget alternative for the [related_posts] shortcode BTP Custom Works - a widget alternative for the [custom_works] shortcode BTP Popular Works - a widget alternative for the [popular_works] shortcode BTP Recent Works - a widget alternative for the [recent_works] shortcode BTP Related Works - a widget alternative for the [related_works] shortcode

Theme Folder Structure

css - stylesheets for the Flare Theme framework - BringThePixel mini-framework for WordPress Themes images - images for the Flare Theme js - javascripts for the Flare Theme languages - .POT translation template file for the Flare Theme. Read more about translating themes at WordPress Codex lib - Flare Theme specific files

CSS files
Reset Styles The first rules in main.css file are generic reset rules. Many browser interpret the default behavior of html elements differently. By using a general reset styles, we can work round this. General Styles The main css file main.css is separated into sections:
BASE Reset Tools

Print to PDF without this message by purchasing novaPDF (http://www.novapdf.com/)

DEFAULT STYLES Typography Images Tables Forms GLOBAL LAYOUT Structure Body section Preheader section Header section Precontent Content section Prefooter section Footer section PAGE SPECIFIC LAYOUT Home Posts Works Extra

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited. Sections are marked as follows:
/* ================================================================================================ /* =====>>> SAMPLE SECTION NAME <<<================================================================ /* ================================================================================================

Color Scheme Styles All color scheme stylesheets are located in the same folder as the "main.css" file. Their names start with the "scheme-" prefix, like "scheme-light.css" or "scheme-dark.css". Browser Specific Styles It is worth mentioning that there are special CSS files called ie7.css and ie8.css only for Interner Explorer 7,8 browsers.

Javascripts
Except plugin files, the Flare Theme uses only one the main.js file which calls some theme specific functions and initializes plugins. The main power behind this theme is the famous javascript framework jQuery. All plugins and theme specific functionalities are based on it.

PSD files
We've included following PSDs with the Flare Theme: homepage global elements (like audio player)

Sources and Credits

When creating the Flare Theme or the preview version for ThemeForest, we've used following resources:
Photos, images & icons

Photos from photodune Photos from dreamstime The Ultimate Free Web Designers Icon Set 81 Pixel perfect Social Media Icons IconSweets 2

Print to PDF without this message by purchasing novaPDF (http://www.novapdf.com/)

Javascripts

jQuery - Javascript framework jQuery Easing Plugin - advance easing options jQuery Metadata Plugin - extracting metadata data attribute hoverIntent jQuery Plug-in - determining the user's hover intent html5shiv - HTML5 IE enabling script jQuery prettyPhoto Plugin - lightbox for images, videos, YouTube jPlayer - The jQuery HTML5 Audio / Video Library Cufon - font replacement script jQuery Rangeinput @ jQuery TOOLS - HTML5 range input for humans FlexSlider - jQuery Responsive Slider Respond.js - A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)
Miscellaneous

Titillium font - open source font Lato - open source font Colaborate font

Routines
Setting Up the Logo
By default the Flare Theme displays the site title in the Header Theme Area. You can easily change this and display the logo image instead: 1. 2. 3. 4. 5. Upload your logo image into the Media Library Copy the "File URL" of the uploaded file Go to the WordPress Admin Appearance Theme Options General Tab Main Subtab Paste the "File URL" into the "Logo" input field Save

Setting Up the Navigation Menus

Flare Theme comes with two predefined menu locations: "Primary Navigation" and "Footer Navigation". Both are based on custom navigation menus functionality introduced in WordPress 3.0. How to set up a Navigation Menu?
Print to PDF without this message by purchasing novaPDF (http://www.novapdf.com/)

1. Go to the WordPress Admin Appearance Menus 2. Create a new menu. 3. Before adding menu items: make sure to configure screen options in the top-right section of the WordPress Admin. Some boxes can be hidden by default. 4. Start adding menu items from the boxes located on the left side. 5. Save menu. 6. Assign menu to one of the menu locations in the "Theme Locations" box on the left side. 7. Save.

If you want to know more about custom navigation menus, check out WordPress Codex chapter Appearance Menus SubPanel

Setting Up the Preheader

The preheader is a collapsible, widget-ready theme area above the header. How to enable the Preheader? Go to the WordPress Admin Appearance Theme Options Style Tab Preheader Subtab From the "Preheader layout" option select a non-empty column layout. Save The first column will then display preheader-1 sidebar, the second column will display preheader-2 sidebar and so on. To assign some widgets to these sidebars go to the Widgets section

Setting Up the Prefooter

The prefooter is a widget-ready theme area below the content and above the footer. How to enable the Prefooter? Go to the WordPress Admin Appearance Theme Options Style Tab Prefooter Subtab From the "Prefooter layout" option select a non-empty column layout. Save The first column will then display preheader-1 sidebar, the second column will display preheader-2 sidebar and so on. To assign some widgets to these sidebars go to the Widgets section

Setting Up the Feeds

Feeds are just icon-links to your social media profiles. You can set them in WordPress Admin Appearance Theme Options Feeds Tab Main Subtab Flare Theme displays feeds next to the Primary Navigation, but you can also use feeds in other places by using [feeds] shortode or BTP Feeds Widget.

Customize the look of your site

Use Theme Options: 1. Go to the WordPress Admin Appearance Theme Options Style Tab Customize image sizes (also the slider size) from the Images Subtab Customize fonts from the Fonts Subtab Change the preheader layout, customize the preheader colors from the Preheader Subtab Customize the header colors, the logo margins, the search-form margins from the Content Subtab
Print to PDF without this message by purchasing novaPDF (http://www.novapdf.com/)

Customize the content colors from the Content Subtab Change the prefooter layout, customize the prefooter colors from the Prefooter Subtab Change the footer layout, customize the footer colors from the Footer Subtab 2. Save Use the Flare Child Theme style.css file Sometimes Theme Options are not enough, then you should use the Flare Child Theme style.css file. That way, when the parent theme is updated, your modifications are preserved. 1. 2. 3. 4. Go to the WordPress Admin Appearance Editor From the right side choose the "style.css" Put your CSS rules into the editor Update file

Setting Up the Homepage

By default WordPress displays latest blog entries on the homepage. Of course you can change it easily. How to create a static home page? 1. 2. 3. 4. Add new page in WordPress Admin Pages Add New Go to the WordPress Admin Appearance Theme Options Pages Tab Home Tab Select your previously created page from the "Home Page" dropdown menu Save

How to create a home page similar to the ones from the preview installation of the Flare Theme? 1. 2. 3. 4. When editing the home page content open up the Shortcode Generator by clicking on the "[/]" icon. From the "Select Item" dropdown menu select one of the predefined snippets under the " HOME PAGE SNIPPETS" group. Insert it into the editor. Save

Probably you will want to add this page to the Navigation Menus

Hide Comments on a Page

When editing a page: 1. Make sure "Discussion" box is visible: configure your screen options in the top-right section of the WordPress Admin. Sometimes this box can be hidden. 2. Uncheck "Allow comments" and "Allow trackbacks and pingbacks on this page". 3. Save changes

Setting Up the Post Index Page (Blog Page)

1. After creating a regular page with whichever template, go to the WordPress Admin Appearance Theme Options Posts Tab Index Subtab 2. Select this page from the "Index Page" dropdown 3. Choose the template ( previous page template will be ignored ), decide which elements should be hidden or shown by default, etc. 4. Save From now on, this page will display all posts. Also it will be added to the breadcrumbs navigation when appriopriate. Probably you will want to add this page to the Navigation Menus

Setting Up the Work Index Page

1. After creating a regular page with whichever template, go to the WordPress Admin Appearance Theme Options Works Index tab 2. Select this page from the "Index Page" dropdown 3. Choose the template ( previous page template will be ignored ), decide which elements should be hidden or shown by default, etc. 4. Save

Print to PDF without this message by purchasing novaPDF (http://www.novapdf.com/)

From now on, this page will display all works. Also it will be added to the breadcrumbs navigation when appriopriate. Probably you will want to add this page to the Navigation Menus

Configure the default look & feel of archive pages

1. 2. 3. 4. Go to the WordPress Admin Appearance Theme Options Switch to the "Posts" or "Works" Tab and then click on the "Archive" Subtab Choose the default template, decide which elements should be hidden or shown by default, etc. Save

From now on, all archive pages will inherit those default values. Keep in mind, that you can still override some values for an individual category | tag page. You can do it, while editting a category | tag.

Configure the default look & feel of single entry pages

1. 2. 3. 4. Go to the WordPress Admin Appearance Theme Options Switch to the "Posts" or "Works" Tab and then click on the "Single" Subtab Choose the default template, decide which elements should be hidden or shown by default, etc. Save

From now on, all single entry pages will inherit those default values. Keep in mind, that you can still override some values for an individual entry. You can do it, while editting an entry.

Assign a custom linking method

By default, when displaying a collection of entries, clickable elements (the title, the featured media and the button) link to the single entry page. You can easily change it. To open the featured image or some custom link in a new window: 1. Go to the edit screen of a single entry 2. Scroll down to the "General" metabox 1. From the "title linking" dropdown choose "open the media in a new window" 2. From the "button_1 linking" dropdown choose "open the featured media in a new window" 3. Now move to the "Featured Image " metabox 1. Click the "Set featured image" link or the featured image itself if it exists 2. A popup window should open 3. Upload some image 4. From the "Alternative linking" dropdown choose "open the image or the alternative link in a new window" 5. You can fill in the "Alternative link" input 6. Click "Use as featured image" or "Save all changes" if you are editing the featured image 7. A popup window should close 4. Save Now the entry title, the featured media and the button should open the featured image (or the alternative link if provided) in a new window. To open the featured image or some custom link in a lightbox: 1. Go to the edit screen of a single entry 2. Scroll down to the "General" metabox 1. From the "title linking" dropdown choose "open the featured media in a lightbox" 2. From the "button_1 linking" dropdown choose "open the featured media in a lightbox" 3. Now move to the "Featured Image " metabox 1. Click the "Set featured image" link or the featured image itself if it exists 2. A popup window should open 3. Upload some image 4. From the "Alternative linking" dropdown choose "open the image or the alternative link in a lightbox" 5. You can fill in the "Alternative link" input - e.g. provide a link to a YouTube video 6. Click "Use as featured image" or "Save all changes" if you are editing the featured image 7. A popup window should close 4. Save Now the entry title, the featured media and the button should open the featured image (or the alternative link if provided) in a lightbox.

Print to PDF without this message by purchasing novaPDF (http://www.novapdf.com/)

To disable linking 1. Go to the edit screen of a single entry 2. Scroll down to the "General" metabox 1. From the "title linking" dropdown choose "don't link" 2. From the "button_1 linking" dropdown choose "don't link" 3. Now move to the "Featured Image " metabox 1. Click the "Set featured image" link or the featured image itself if it exists 2. A popup window should open 3. Upload some image 4. From the "Alternative linking" dropdown choose "don't link" 5. Click "Use as featured image" or "Save all changes" if you are editing the featured image 6. A popup window should close 4. Save

Add a slider to the Precontent Theme Area

The precontent is a theme area below the header and above the content. How to add a slider? 1. 2. 3. 4. Go to the WordPress Admin Flex Sliders Create a new slider (remember about filling in the title and adding some slides) Now go to the edit screen of your choosen page and scroll down to the "Single Page Elements" metabox Choose your previosly created slider from the "Slider" dropdown menu

Print to PDF without this message by purchasing novaPDF (http://www.novapdf.com/)

5. Save changes Keep in mindthat the default slider size is 960x360px. You can easily change it by going to the WordPress Admin Appearance Theme Options Style Tab Images Subtab

Add some text to the Precontent Theme Area

The precontent is a theme area below the header and above the content. How to add some text? 1. Go to the edit screen of your choosen page 2. In the content editor, wrap some text with the [precontent] shortcode 3. Save changes

Change the template of a single entry | category | tag page

1. Go to the edit screen of a single entry, a category or a tag 2. From the "Template" option click the image which symbolizes your desired template 3. Save

Assign a custom sidebar to a single entry | category | tag page

1. Go to the WordPress Admin Appearance Theme Options Misc Tab Sidebars Subtab 2. Create a new sidebar by adding a new line with a sidebar name to the "Manage sidebars" textarea. The Sidebar name can only consist of: lowercase letters, digits, underscores and hyphens. 3. Save 4. Go to the WordPress Admin Appearance Widgets and add some widgets to this sidebar 5. Then, when editing a single entry, a category or a tag, select this newly created sidebar from the "Primary sidebar" dropdown 6. Save

Change a number of maximum entries to display on a category | tag page

1. Go to the edit screen of a category or a tag 2. Fill in the "Entries per page" option with your desired number 3. Save

Customize the mediabox on a single entry page

The mediabox is a part of a template, that displays entry attachments. The following mediaboxes are available: list - displays image & audio attachments. It tries to embed an attachment alternative link (if provided) none - displays nothing cycleslider - displays only image attachments. It tries to open an attachment alternative link (if provided) in a lightbox or in a new window. nivoslider - displays only image attachments. It tries to open an attachment alternative link (if provided) in a lightbox or in a new window. You can customize the mediabox in the following way: 1. Go to the edit screen of a single entry 2. From the "Mediabox" dropdown, select your desired choice 3. Save

Hide/show various elements on a single entry | category | tag page

1. 2. 3. 4. Go to the edit screen of a single entry | category | tag page From the available dropdowns, select "hide" for all elements you want to definitely hide And select "show" for all elements you want to definitely show Save

Keep in mind that you should do it only for unusual entries | categories | tags. For all the other ones most of the available options should be leaved to their default (inherited) value.

Managing Relation Tags

Print to PDF without this message by purchasing novaPDF (http://www.novapdf.com/)

The relation tags are not displayed anywhere - use them to relate different content (posts, pages, etc.), so that you can benefit from special shortcodes ([related_posts], [related_pages], etc.) or widgets. It is strongly advised to prepend every relation tag with the r- prefix, to clearly differentiate these tags, thus keep their slugs unique. The relation tags are built using custom taxonomy functionality, so they are separated from the standard WordPress tags.

Here is a sample usage: 1. 2. 3. 4. Assign the r-home tag to your home page. Assign the r-home tag to some blog posts. Insert the [related_posts] shortcode into the content editor, when editing the home page. Save changes and all related posts will be on your home page.

Summary
Once again, thank you so much for purchasing Flare Theme. As we said at the beginning, we'd be glad to help you if you have any questions relating to this theme. No guarantees, but we'll do our best to assist. If you have a more general question relating to our themes you might consider visiting our support forum. bring the pixel team Go To the Table of Contents

Print to PDF without this message by purchasing novaPDF (http://www.novapdf.com/)