Flare WordPress Theme - Documentation

Flare WordPress Theme - Documentation

Created: 03/03/2012By: bring the pixel teamEmail: [email protected]

Thank you for purchasing our Flare WordPress Theme. If you have any questions that are beyond the scope of this help file, pleasefeel 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 amore general question relating to our themes you might consider visiting our support forum.

Thanks so much!

Table of Contents1. Introduction2. Installation3. Important Notes4. General Setup

5. Homepage & Subpages Setup6. Posts Setup7. Works Setup8. Shortcodes9. Widgets

10. Theme Folder Structure11. CSS files12. Javascripts13. PSD files14. Sources and Credits15. Routines

Introduction

Theme Areas

The Flare Theme is divided into the 6 independent areas.

1. the Preheader (optional)2. the Header3. the Precontent (optional, different for every single page)4. the Content5. the Prefooter (optional)6. the Footer

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

http://www.novapdf.com

http://www.novapdf.com/

InstallationAfter unzipping the file downloaded from ThemeForest you should see the following folder structure:

Demo Content - demo content and theme options in XML filesDocumentation - theme documentation in the HTML formatflare - theme files - in case you want to upload the theme through the FTPflare-child - child theme files - in case you want to upload the child theme through the FTPLicensing - theme licenseResources - PSD files and other resources




flare.zip - zipped theme files - in case you want to upload the theme through the WordPress adminflare-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 Flarefolder, not the whole pack. If you want to know more about the installation process, check out the WordPress Codex InstallingWordPress.

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 everythingworks.Keep in mind that you should perform import procedure only on a fresh | new WordPress installation.

Import content

1. Go to the WordPress Admin › Tools › Import2. Click "WordPress" import system3. Upload the "content.xml" file from the "Demo Content" folder4. 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:




1. Go to the WordPress Admin › Appearance › Import Theme Options2. Upload the "theme-options.xml" file from the "Demo Content" folder3. 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, whenthe parent theme is updated, your modifications are preserved. You don't have to create your own child theme, just use the one fromthe 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, lesstheme 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 logoSet up the Navigation MenusSet up the Preheader Theme AreaSet up the Prefooter Theme Area

You should




Set up the Feeds

You can

Customize the look of your site

Homepage & Subpages Setup

Homepage

Create the homepageAdd a slider to the Precontent Theme AreaAdd some text to the Precontent Theme AreaHide commentsHide/show various page elementsAssign 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 AreaAdd some text to the Precontent Theme AreaAssign a custom sidebarHide commentsHide/show various page elementsAssign 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 Menu2. Add some categories | tags3. 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 Page5. Configure the default look & feel of all post archive pages6. Configure the default look & feel of all single post pages7. 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 templateAssign a custom sidebarCustomize the mediabox - a part of a template, that displays entry attachmentsHide/show various page elementsAssign 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 thefollowing ways:

Open the entry in the same window - default behaviourOpen the featured media in a new windowOpen the featured media in a lightboxDon't link




Works SetupThe Theme comes with a custom post type for works. It means, that regular blog entries are separated from works. You can notice itby 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 WordPresscategories | 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 Menu2. Add some work categories | tags3. 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 Page5. Configure the default look & feel of all work archive pages6. Configure the default look & feel of all single work pages7. 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 templateChange a number of maximum entries to displayAssign a custom sidebarHide/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 templateAssign a custom sidebarCustomize the mediabox - a part of a template, that displays entry attachmentsHide/show various page elementsAssign 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 thefollowing ways:

Open the entry in the same window - default behaviourOpen the featured media in a new windowOpen the featured media in a lightboxDon't link

Custom ShortcodesThe 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 littletool provides a user friendly interface for all shortcodes and code snippets.




Custom WigdetsThe 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 TabBTP Contact Form - a widget alternative for the [contact_form] shortcodeBTP Twitter - a widget alternative for the [twitter] shortcodeBTP Custom Pages - a widget alternative for the [custom_pages] shortcodeBTP Related Pages - a widget alternative for the [related_pages] shortcodeBTP Custom Posts - a widget alternative for the [custom_posts] shortcodeBTP Popular Posts - a widget alternative for the [popular_posts] shortcodeBTP Recent Posts - a widget alternative for the [recent_posts] shortcodeBTP Related Posts - a widget alternative for the [related_posts] shortcodeBTP Custom Works - a widget alternative for the [custom_works] shortcodeBTP Popular Works - a widget alternative for the [popular_works] shortcodeBTP Recent Works - a widget alternative for the [recent_works] shortcodeBTP Related Works - a widget alternative for the [related_works] shortcode

Theme Folder Structurecss - stylesheets for the Flare Themeframework - BringThePixel mini-framework for WordPress Themesimages - images for the Flare Themejs - javascripts for the Flare Themelanguages - .POT translation template file for the Flare Theme.Read more about translating themes at WordPress Codexlib - 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. Byusing a general reset styles, we can work round this.

General Styles

The main css file main.css is separated into sections:

BASE Reset Tools




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 youfind 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.

JavascriptsExcept 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 arebased on it.

PSD filesWe've included following PSDs with the Flare Theme:

homepageglobal elements (like audio player)

Sources and CreditsWhen creating the Flare Theme or the preview version for ThemeForest, we've used following resources:

Photos, images & icons

Photos from photodunePhotos from dreamstimeThe Ultimate Free Web Designer’s Icon Set81 Pixel perfect Social Media IconsIconSweets 2




Javascripts

jQuery - Javascript frameworkjQuery Easing Plugin - advance easing optionsjQuery Metadata Plugin - extracting metadata data attributehoverIntent jQuery Plug-in - determining the user's hover intenthtml5shiv - HTML5 IE enabling scriptjQuery prettyPhoto Plugin - lightbox for images, videos, YouTubejPlayer - The jQuery HTML5 Audio / Video LibraryCufon - font replacement scriptjQuery Rangeinput @ jQuery TOOLS - HTML5 range input for humansFlexSlider - jQuery Responsive SliderRespond.js - A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

Miscellaneous

Titillium font - open source fontLato - open source fontColaborate 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 imageinstead:

1. Upload your logo image into the Media Library2. Copy the "File URL" of the uploaded file3. Go to the WordPress Admin › Appearance › Theme Options › General Tab › Main Subtab4. Paste the "File URL" into the "Logo" input field5. 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?




1. Go to the WordPress Admin › Appearance › Menus2. 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 SubtabFrom the "Preheader layout" option select a non-empty column layout.SaveThe first column will then display preheader-1 sidebar, the second column will display preheader-2 sidebar and so on. To assignsome 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 SubtabFrom the "Prefooter layout" option select a non-empty column layout.SaveThe first column will then display preheader-1 sidebar, the second column will display preheader-2 sidebar and so on. To assignsome 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 › FeedsTab › Main Subtab

Flare Theme displays feeds next to the Primary Navigation, but you can also use feeds in other places by using [feeds] shortode orBTP Feeds Widget.

Customize the look of your site

Use Theme Options:

1. Go to the WordPress Admin › Appearance › Theme Options › Style TabCustomize image sizes (also the slider size) from the Images SubtabCustomize fonts from the Fonts SubtabChange the preheader layout, customize the preheader colors from the Preheader SubtabCustomize the header colors, the logo margins, the search-form margins from the Content Subtab




Customize the content colors from the Content SubtabChange the prefooter layout, customize the prefooter colors from the Prefooter SubtabChange 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 themeis updated, your modifications are preserved.

1. Go to the WordPress Admin › Appearance › Editor2. From the right side choose the "style.css"3. Put your CSS rules into the editor4. 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. Add new page in WordPress Admin › Pages › Add New2. Go to the WordPress Admin › Appearance › Theme Options › Pages Tab › Home Tab3. Select your previously created page from the "Home Page" dropdown menu4. Save

How to create a home page similar to the ones from the preview installation of the Flare Theme?

1. When editing the home page content open up the Shortcode Generator by clicking on the "[/]" icon.2. From the "Select Item" dropdown menu select one of the predefined snippets under the " HOME PAGE SNIPPETS" group.3. Insert it into the editor.4. 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" dropdown3. 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.


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" dropdown3. 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 works. Also it will be added to the breadcrumbs navigation when appriopriate.


Configure the default look & feel of archive pages

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

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

Configure the default look & feel of single entry pages

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

From now on, all single entry pages will inherit those default values. Keep in mind, that you can still override some values for anindividual 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 singleentry 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 entry2. 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" metabox1. Click the "Set featured image" link or the featured image itself if it exists2. A popup window should open3. Upload some image4. 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" input6. Click "Use as featured image" or "Save all changes" if you are editing the featured image7. 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 newwindow.

To open the featured image or some custom link in a lightbox:


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" metabox1. Click the "Set featured image" link or the featured image itself if it exists2. A popup window should open3. Upload some image4. 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 video6. Click "Use as featured image" or "Save all changes" if you are editing the featured image7. 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.




To disable linking


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" metabox1. Click the "Set featured image" link or the featured image itself if it exists2. A popup window should open3. Upload some image4. 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 image6. 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. Go to the WordPress Admin › Flex Sliders2. Create a new slider (remember about filling in the title and adding some slides)3. Now go to the edit screen of your choosen page and scroll down to the "Single Page Elements" metabox4. Choose your previosly created slider from the "Slider" dropdown menu




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 page2. In the content editor, wrap some text with the [precontent] shortcode3. 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 tag2. From the "Template" option click the image which symbolizes your desired template3. Save

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

1. Go to the WordPress Admin › Appearance › Theme Options › Misc Tab › Sidebars Subtab2. 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. Save4. Go to the WordPress Admin › Appearance › Widgets and add some widgets to this sidebar5. Then, when editing a single entry, a category or a tag, select this newly created sidebar from the "Primary sidebar" dropdown6. 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 tag2. Fill in the "Entries per page" option with your desired number3. 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 nothingcycleslider - displays only image attachments. It tries to open an attachment alternative link (if provided) in a lightbox or in anew window.nivoslider - displays only image attachments. It tries to open an attachment alternative link (if provided) in a lightbox or in a newwindow.

You can customize the mediabox in the following way:

1. Go to the edit screen of a single entry2. From the "Mediabox" dropdown, select your desired choice3. Save

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

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

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

Managing Relation Tags




The relation tags are not displayed anywhere - use them to relate different content (posts, pages, etc.), so that you can benefit fromspecial 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. Assign the r-home tag to your home page.2. Assign the r-home tag to some blog posts.3. Insert the [related_posts] shortcode into the content editor, when editing the home page.4. Save changes and all related posts will be on your home page.

SummaryOnce 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 ourbest 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




Documents

Flare WordPress Theme - Documentation