Follow these steps to install the theme

• 1. Upload and install the storm.zip theme file
• 2. Upload and install the quform.zip plugin file
• 3. Set up the theme options
• 4. Set up the Quform options
• 5. (recommended) Install the Better WordPress Minify plugin

Each step is explained in more detail below.

1. Upload and install the storm.zip theme file

Installation inside WordPress

You should find a file named storm.zip inside the downloaded ThemeForest package. Log in to WordPress and follow the steps below.

• Go to Appearance → Themes
• Click the Install Themes tab
• Click Upload
• Click Browse and browse to the location of the storm.zip file and select it
• Click Install Now
• Once the theme has installed, click Activate

If for some reason you can't get this to work, follow the guide below for uploading via FTP.

Installation via FTP (click here to show section)

The final step is to make sure that /storm/cache/ directory is writeable, the theme will not function correctly if it's not. To check, visit the theme options panel by going to Appearance → Theme Options on the WordPress menu. If the cache directory is not writable you will get a warning message near the top of this page, with instructions on how to make it writeable. If you don't see a warning message, you don't need to do anything further.

2. Upload and install the quform.zip plugin file

Installation inside WordPress

You should find a file named quform.zip inside the downloaded ThemeForest package. Log in to WordPress and follow the steps below.

• Go to Plugins → Add New
• Click Upload
• Click Browse and browse to the location of the quform.zip file and select it
• Click Install Now
• Once the plugin has installed, click Activate
• You will now need to activate your Quform license to complete the install.

If for some reason you can't get this to work, follow the guide below for uploading via FTP.

Installation via FTP (click here to show section)

3. Set up the theme options

To get to the theme options panel go to Appearance → Theme Options. From here you can customize almost all aspects of your theme.

4. Set up the Quform plugin

We have included two two already configured forms for you to use, a contact form and a register form. To set these up, see the section below, Contact / register form setup.

5. (recommended) Install the Better WordPress Minify plugin

We strongly suggest installing this plugin. It will minify and combine your site JavaScript and CSS which will speed up your page loading time and reduce bandwidth usage. Follow the steps below to install this plugin.

• Inside WordPress go to Plugins → Add New
• In the Search box, enter Better WordPress Minify
• Click Install Now

Do not activate the plugin yet. To prevent any problems, develop your website first and activate the plugin when the site goes live. The plugin caches the CSS and JavaScript, so changes you make to your site may not appear because of this, so it's better to develop with the plugin deactivated.

If your site backgrounds stops working when using the Better WordPress Minify, you probably have the Suhosin security patch for PHP enabled, which doesn't allow long URLs. To fix this, add the following directive to your php.ini configuration file and restart your web server (ask you host if you don't know how).

suhosin.get.max_value_length = 2048

You can access the theme options panel by going to Appearance → Theme Options on the WordPress menu. You can change almost all aspects of your theme from here. Each option is documented with a description and tooltip to help you understand what it does. Most of the options are also explained in this document in the customization sections below.

You can customize page specific settings at the Storm Options metabox, which is below the post content when adding or editing a post or page.

You can customize portfolio item specific settings at the Portfolio Item Options metabox, which is below the post content when adding or editing a portfolio item.

Each form in the theme is configurable through the Quform plugin. To edit your existing forms, go to Quform → Forms on the WordPress menu. Hover the form you want to edit and click Edit. Help for the Quform plugin is available at Quform → Help on the WordPress menu.

The main theme stylesheet is at /storm/style.css if you need to make any changes or add new styles. However, you can also easily add CSS via the Theme Options Panel under Advanced → Custom CSS.

You will find the main PSD file in resources/storm.psd. This PSD has the design for the main pages and elements. Each page / section is in its own folder and may be hidden.

Find the folder in the layers panel that is named after the page and click eye icon. Every element is grouped neatly in their own folders. Hidden elements are in orange layers.

If you are looking for something specific and you can not find it in the main PhotoShop file then please contact us.

You can change the site logo in the theme options panel at Global → Logo. You can enter a full URL to your logo image or upload a custom logo by clicking the Upload button. We recommend your logo be no larger than approx 200px(w) or 85px(h). Remember the navigation bar has to fit inline with the logo, so there must be room for both.

Adjusting the logo position

In the Global → Logo section of Theme Options panel you will see Logo "top" position and Logo "left" position adjust these sizes to suit your logo.

Changing the logo link URL

You can change the page that your logo will link to, which may be useful if you have a landing page that you don't want to be your site home page.

Storm is compatible with the WordPress menu system. To change the navigation, go to Appearance → Menus on the WordPress menu. Create a new menu if you haven't already, you can call it anything e.g. Main. Once you've added the menu, on the top left of the page you will see a box named Theme Locations, select your new menu from the drop down and click Save.

Creating sub menus

When you have added menu items they are draggable, you can drag and drop the order of your main nav and if you require sub pages drag a menu item slighty to the right of it's parent, this will create a drop down under that main nav item.

Footer left column content

To change the footer left column content, in the theme options panel go to Footer → General and enter your own text or HTML into the box labelled Footer left column content.

Show/hide scroll to top button

To change this, in the theme options panel go to Footer → General and toggle the option "Top" link.

Making the footer fixed or absolute positon

By default the footer is Fixed position (always shown). You can change it to be Absolute position, which will make page content push the footer further down the page. To do this go to Footer → General in the theme options panel and change the option Footer position.

Changing the footer popup boxes

The footer popup boxes section is a widget area, to add a popup box simply add a widget to this area. Go to Appearance → Widgets on the WordPress menu. You will find a widget area named Footer Boxes on the right hand side. Drag a widget into this area. The widget title will determine what text will be shown in the footer for this box.

We have added some fonts for use with the Cufon script (also included). The fonts can be seen in the theme options panel, at Global → Fonts. Choose the required font by clicking on the font preview image. If you want to change what the font is applied to, scroll down to the CSS selectors option and change the existing CSS selectors to suit, any matching elements on the page will be replaced.

We have added support for some Google fonts that can be seen in the theme options panel, at Global → Fonts. Choose the required font by clicking on the font preview image. If you want to change what the font is applied to, scroll down to the CSS selectors option and change the existing CSS selectors to suit, any matching elements on the page will be replaced.

To add background images, go to the theme options panel (Appearance → Theme Options) then Background → Images. Click the Upload button and choose your images, you can select multiple images to upload more than one at the same time. We recommend that your background images are 1920x1080 pixels (w x h) and you should try to keep the file size as low as possible without sacraficing image quality, we have found that a file size of 300-500kb works fine for each image. You can make the image any size though and the background script will scale it to fit the browser window.

Background captions

You can set any background image to have a caption which will be shown when the website is in full screen mode. To set add a caption to an image, hover the uploaded image thumbnail and click the cog icon.

The background images can be sorted into a different order by dragging and dropping the thumbnail image into the required position. You can then proceed to configure the background image script, if required, with the other options on this page.

We have also added a background image uploader to the page metabox settings. When adding or editing a post or page, scroll down to the Storm Options metabox and go to the Background images setting. Follow the same instructions in the section above Adding background images to set it up.

To add background video, go to the theme options panel (Appearance → Theme Options) then Background → Video. At the Background video URL setting, enter a URL to a YouTube or Vimeo URL.

So that the video can be scaled properly in different browser window sizes, you should enter the dimensions of the video. If you went with the Vimeo video, this information will be fetched automatically after you enter the URL. For YouTube you will need to find the dimensions manually, follow the link in the option description for instructions.

We have also added a background video uploader to the page metabox settings. When adding or editing a post or page, scroll down to the Storm Options metabox and go to the Background video URL setting. Follow the same instructions in the section above Video background to set it up.

To add background audio, go to the theme options panel (Appearance → Theme Options) then Background → Audio. At the Background music setting, click Add a music track to add a track. In the track settings, give it a name, and upload your audio files. Either a .mp3 or .m4a file is required, uploading a .ogg version will increase browser support. You need to use the same chosen formats for every track you add. For example if you choose .m4a and .ogg for your first track, every other track should have both a .m4a and .ogg version.

We have also added a background audio uploader to the page metabox settings. When adding or editing a post or page, scroll down to the Storm Options metabox and go to the Music tracks setting. Follow the same instructions in the section above Audio background to set it up.

If you wish to have different background image settings than those set on Background → Images in the theme options panel, you will need to set up a filter hook PHP function that will modify them when a specific page is loaded. To do this you will need the unique post / page ID. To find your post / page ID, edit the post in WordPress and look in the address bar. Amongst other things it will have a section that looks like post=702, this number is the post ID. See the table below for available options and the examples below the table for how to use them.

Examples

This code should be entered into the wp-content/themes/storm/functions.php file.

Change the options for a single post

Replace POSTID in the code below with your post ID.

add_filter('tcr_singular-post-POSTID_background_options', 'storm_set_background_options');
            
function storm_set_background_options($options)
{
    $options['speed'] = 4000;
    $options['slideshow'] = false;
    $options['random'] = true;
    $options['lowQuality'] = true;
    
    return $options;
}

Change the options for a single page

Replace POSTID in the code below with your page ID.

add_filter('tcr_singular-page-POSTID_background_options', 'storm_set_background_options');
            
function storm_set_background_options($options)
{
    $options['speed'] = 4000;
    $options['slideshow'] = false;
    $options['random'] = true;
    $options['lowQuality'] = true;
    
    return $options;
}

Change some options for all pages

This filter will only affect viewing single pages, any other page on your site such as single posts or archives will maintain your settings from the theme options panel.

add_filter('tcr_singular-page_background_options', 'storm_set_background_options');
            
function storm_set_background_options($options)
{
    $options['speed'] = 8000;
    $options['slideshow'] = false;
    $options['bullets'] = false;
    $options['position'] = 'absolute';
    
    return $options;
}

Using multiple functions

PHP cannot have more than one function with the same name, if you try to use the same code to modify the settings for more than one page you will get a Fatal error. To avoid this you chould change second paramter to add_filter and the function name so that they are the same, but different to any existing function, for example:

add_filter('tcr_singular-page_background_options', 'storm_set_background_options_page');
            
function storm_set_background_options_page($options)
{
    $options['speed'] = 8000;
    $options['slideshow'] = false;
    $options['bullets'] = false;
    $options['position'] = 'absolute';
    
    return $options;
}

add_filter('tcr_singular-page-702_background_options', 'storm_set_background_options_702');
            
function storm_set_background_options_702($options)
{
    $options['speed'] = 4000;
    $options['slideshow'] = false;
    $options['random'] = true;
    $options['lowQuality'] = true;
    
    return $options;
}

We have added a page template called "Left Note Block" which is set up with a small content area. To create a page like this, add a new page in WordPress and at the right hand side there is a box named Page Attributes. Under Page Template choose Left Note Block.

You may need to also set up WordPress to have a static front page, instead of displaying your recent posts. To do this, see the section Set up a static homepage.

We have added a page template called "Intro Page" which has no header or content area. This is perfect for showing off your background images or video. To create a page like this, add a new page in WordPress and at the right hand side there is a box named Page Attributes. Under Page Template choose Intro Page. If you want the Skip intro button on the page to go to somewhere other than the homepage, enter the URL in the Skip intro URL in the page metabox settings.

You may need to also set up WordPress to have a static front page, instead of displaying your recent posts. To do this, see the section Set up a static homepage.

The setup of the portfolio is split into two parts.

• 1. Add your portfolio items and images
• 2. Add the portfolio shortcode to display the items

Each step is explained in more detail below.

1. Add your portfolio items and images

You should first decide if you want to use the sortable portfolio filter to allow users to filter the portfolio items by any category you create. If you want to use this you should first add your categories to save you having to edit each portfolio item again to assign it to a category, although these can be changed at any time. To add a portfolio category, go to Portfolio → Categories on the WordPress menu and add any categories to suit.

Next, you can start adding portfolio items. Go to Portfolio → Add New on the WordPress menu, give your item a title and content if necessary. The image that will be displayed for this portfolio item is be the Featured Image of the post. To add a featured image, click Set featured image on the bottom right hand side of the page.

Choose an image file from your computer and once it has uploaded, click Use as featured image at the bottom. Now, close the popup.

If you look below the post content area, you will find the Portfolio Item Options metabox. Here you can set various options for your portfolio item. The first option Type determines what will happen when a user clicks on the item in your portfolio.

• Image - clicking on the item will open the image in a lightbox (Fancybox) or full screen view (Serene)
• Video - clicking on the item will open a video in a lightbox (set the Video URL in the field below after choosing this option)
• Portfolio - clicking on the item will take you to the single portfolio item page
• Link - clicking on the item will take you to a specified URL

Once you've set up the options, assign the portflio item to a category by using the checkboxes at the Portfolio Categories box on the right hand side.

2. Add the portfolio shortcode to display the items

Create a page for your portfolio.

Note: if you are using pretty URL permalinks and your page has the slug portfolio, you will need to change the Portfolio rewrite slug in the theme options panel to something else, as it cannot be the same as one of your pages. To do this go to Portfolio → General in the theme options panel and change Portfolio rewrite slug to something else. This option corresponds to the part of the URL before the slug of the portfolio item when viewing a single portfolio item. The bold part in the following URL is the Portfolio rewrite slug: http://www.example.com/portfolio/my-portfolio-item

Now you should add a portfolio shortcode to the page content, above the content editor click the shortcodes button.

Choose Portfolio from the drop down menu. Decide on the settings for your portfolio then click Insert & Close to insert the shortcode. Save the page and you should now have a portfolio page. See also the Portfolio shortcode section for a detailed description of the options.

To embed video into a single portfolio item view simply paste the URL of the video into the content area. WordPress will automatically convert this into an embedded video.

You can change more portfolio settings and the full screen gallery settings in the theme options panel. Go to the Portfolio tab to do this.

If you wish to have different Serene settings than those set on Portfolio → Full Screen in the theme options panel, you will need to set up a filter hook PHP function that will modify them when a specific page is loaded. To do this you will need the unique post / page ID. See the table below for available options and the examples below the table for how to use them. To find your post / page ID, edit the post in WordPress and look in the address bar. Amongst other things it will have a section that looks like post=702, this number is the post ID.

Examples

This code should be entered into the wp-content/themes/storm/functions.php file.

Change the options for a single post

Replace POSTID in the code below with your post ID.

add_filter('tcr_singular-post-POSTID_serene_options', 'storm_set_serene_options');
            
function storm_set_serene_options($options)
{
    $options['speed'] = 4000;
    $options['slideshow'] = false;
    $options['lowQuality'] = true;
    
    return $options;
}

Change the options for a single page

Replace POSTID in the code below with your page ID.

add_filter('tcr_singular-page-POSTID_serene_options', 'storm_set_serene_options');
            
function storm_set_serene_options($options)
{
    $options['speed'] = 4000;
    $options['slideshow'] = false;
    $options['lowQuality'] = true;
    
    return $options;
}

Change some options for all pages

This filter will only affect viewing single pages, any other page on your site such as single posts or archives will maintain your settings from the theme options panel.

add_filter('tcr_singular-page_serene_options', 'storm_set_serene_options');
            
function storm_set_serene_options($options)
{
    $options['speed'] = 8000;
    $options['slideshow'] = false;
    $options['bullets'] = false;
    
    return $options;
}

Using multiple functions

PHP cannot have more than one function with the same name, if you try to use the same code to modify the settings for more than one page you will get a Fatal error. To avoid this you chould change second parameter to add_filter and the function name so that they are the same, but different to any existing function, for example:

add_filter('tcr_singular-page_serene_options', 'storm_set_serene_options_page');
            
function storm_set_serene_options_page($options)
{
    $options['speed'] = 8000;
    $options['slideshow'] = false;
    $options['bullets'] = false;
    
    return $options;
}

add_filter('tcr_singular-page-702_serene_options', 'storm_set_serene_options_702');
            
function storm_set_serene_options_702($options)
{
    $options['speed'] = 4000;
    $options['slideshow'] = false;
    $options['lowQuality'] = true;
    
    return $options;
}

You will need the Quform plugin installed to use the contact and register forms. We have included two already setup forms for you to use, a contact form and a register form, but you will need to import them first.

Import the form configuration

In the package downloaded from ThemeForest you will find two files in the resources/forms/ folder, these contain the form configuration data.

• quform.contact.txt
• quform.register.txt

To import the forms, go to Quform → Import on the WordPress menu. Copy and paste then content from one of text files and paste it into the text box on the page and click Import. Repeat this process for the other text file if you want to use the other form.

Set up the recipients of the email

The Quform plugin will send submitted form data to an email address, as well as save the data in your WordPress database. You will need to configure the recipient email address(es), to do this go to Quform → Forms, hover over one of the forms in the list and click Edit. In the form builder, go to Settings → Email, and enter your email address in the Recipients field. You can also access the submitted form data inside WordPress by going to Quform → Entries on the WordPress menu.

For help in using the Quform plugin you can browse through the settings and see the description and tooltips at them. You can also read the help section at Quform → Help on the WordPress menu.

Once the Quform plugin is installed you will need to activate the license.To do this:

• 1. Log in to ThemeForest and go to your Downloads tab
• 2. Next to the Storm theme, click Licence Certificate
• 3. Download the .txt license file
• 4. Inside the file, you'll see a line containing the text Item Purchase Code: abcde-abcde-abcde-abcde. This is your license key.
• 5. Inside WordPress go to Quform → Settings
• 6. At the Enter license key field, copy and paste your license key into the field and click Verify.

The plugin is now licensed. If you have any problems with this process, please contact us, details at the Support help section.

To create a contact page like in the demo, there are 2 things you must do.

• 1. Create a page using the "Contact Page" template
• 2. Configure your contact settings

Each step is explained in more detail below.

1. Create a page using the "Contact Page" template

We have added a page template called "Contact Page" which is set up to display contact details, a contact form and a map. To create a page like this, add a new page in WordPress and at the right hand side there is a box named Page Attributes. Under Page Template choose Contact Page.

2. Configure your contact settings

To configure your contact settings go to the theme options panel, then go to Contact → General. Fill out the fields with your settings and enter your map image or iframe HTML in the box.

You should have already imported the contact form as described in the . At the Contact page template form setting select "Contact Form" from the list. If it's not there, go to the How to install section and import the contact form, then come back and select the contact form.

The column shortcodes allow you to make column layouts within your page. The column widths are percentage based, so they will work in any size of containing element and can be nested. The last column in each row should use one of the shortcodes ending in _last. There are no options for this shortcode.

Examples

[one_half]Left column content[/one_half] [one_half_last]Right column content[/one_half_last]

The blog shortcode allows you to display posts. The options for this shortcode are shown below.

Examples

[blog]

[blog categories="7,30" show_title="0" show_meta="0" image_type="left" image_width="200" paging="1" max="6"]

The portfolio shortcode allows you to display portfolio items. The options for this shortcode are shown below.

Examples

[portfolio]

[portfolio columns="4" type="serene" categories="7,30" show_title="0" paging="1" max="6"]

Blockquote

The blockquote shortcode allows you to display a fancy full width quote. The content of your quote should be between the opening and closing shortcodes. The options for this shortcode are shown below.

Examples

[blockquote]Simplicity is the ultimate sophistication.[/blockquote]

[blockquote cite="Leonardo da Vinci" citelink="http://www.example.com"]Simplicity is the ultimate sophistication.[/blockquote]

Pullquotes

The pullquote shortcode allows you to display a fancy quote floated in your page content. The content of your quote should be between the opening and closing shortcodes. The options for this shortcode are shown below.

Examples

[pullquote]Simplicity is the ultimate sophistication.[/pullquote]

[pullquote align="right" cite="Leonardo da Vinci" citelink="http://www.example.com"]Simplicity is the ultimate sophistication.[/pullquote]

The box shortcode allows you to display a message box or other boxed content. The content of your box should be between the opening and closing shortcodes. The options for this shortcode are shown below.

Examples

[box]This is a basic box[/box]

[box type="success" width="300px" align="center"]Lorem ipsum dolor sit amet.[/box]

The button shortcode allows you to display breaks between content sections. The options for this shortcode are shown below.

Examples

[section_break]

[section_break type="big"]

The button shortcode allows you to display a clickable button. The button text should be between the opening and closing shortcodes. The options for this shortcode are shown below.

Examples

[button href="http://www.example.com"]Click me[/button]

[button href="http://www.example.com" style="style3" popup="1"]Click me[/button]

The list shortcode allows you to display a list of items. The list HTML should be between the opening and closing shortcodes. The options for this shortcode are shown below.

Example

[list style="tick" layout="inline"]<ul>
    <li>Example>/li>
    <li>Example>/li>
</ul>[/list]

The menu shortcode allows you to display a list of navigation links. The menu HTML should be between the opening and closing shortcodes. The options for this shortcode are shown below.

Example

[menu style="tick" layout="inline"]<ul>
    <li><a href="http://www.example.com">Example</a>>/li>
    <li><a href="http://www.example.com">Example</a>>/li>
</ul>[/menu]

The table shortcode allows you to display a styled table. The table HTML should be between the opening and closing shortcodes. The options for this shortcode are shown below.

Example

[table id="my_table" width="250px"]<table>
    <tr>
        <td>Column 1 heading</td>
        <td>Column 2 heading</td>
    </tr>
    <tr>
        <td>Cell 1-1</td>
        <td>Cell 1-2</td>
    </tr>
    <tr>
        <td>Cell 2-1</td>
        <td>Cell 2-2</td>
    </tr>
</table>[/table]

The dropcap shortcode allows you to display a character in dropcap format. The character should be between the opening and closing shortcodes. There are no options for this shortcode.

Example

[dropcap]A[/dropcap]

The tabs shortcode allows you to display tabbed content. The options for this shortcode are shown below.

Example

[tabs animation="sliding" width="400px"]
[tab title="Tab 1 title"]Tab 1 content[/tab]
[tab title="Tab 2 title"]Tab 2 content[/tab]
[/tabs]

The toggle shortcode allows you to display collapsing content. The options for this shortcode are shown below.

Example

[toggle width="400px"]
[toggle_content title="Toggle 1 title"]Toggle 1 content[/toggle_content]
[toggle_content title="Toggle 2 title"]Toggle 2 content[/toggle_content]
[/toggle]

The accordion shortcode allows you to display collapsing content groups where only one panel is shown at a time. The options for this shortcode are shown below.

Example

[accordion width="400px"]
[accordion_toggle title="Toggle 1 title"]Toggle 1 content[/accordion_toggle]
[accordion_toggle title="Toggle 2 title"]Toggle 2 content[/accordion_toggle]
[/accordion]

The cycle shortcode allows you to display cycling content slides. The options for this shortcode are shown below.

Example

[cycle fx="scrollHorz" speed_in="1000" speed_out="1000" timeout="5000" width="300" height="150"]
[cycle_slide]This is one slide[/cycle_slide]
[cycle_slide]<img src="example.png" alt="An image" />[/cycle_slide]
[/cycle]

The image shortcode allows you to display an image. The content between the opening and closing shortcode is the image URL. The options for this shortcode are shown below.

Examples

[image alt="My image"]http://www.example.com/image.png[/image]

[image alt="My image" width="200" height="150"]http://www.example.com/image.png[/image]

The image frame shortcode allows you to display a stylish frame around images. The img tag or [image] shortcode should go between the opening and closing shortcode. The options for this shortcode are shown below.

Examples

[image_frame type="style3"]<img src="http://www.example.com/image.png" alt="Image" />[/image_frame]

[image_frame type="style3"][image alt="My image"]http://www.example.com/image.png[/image][/image_frame]

The galleria shortcode allows you to display a gallery of images using the Galleria script. The options for this shortcode are shown below.

Example

[galleria transition="flash" lightbox="1" width="500"]
<img src="http://www.example.com/image1.png" alt="Image 1" />
<img src="http://www.example.com/image2.png" alt="Image 2" />
<img src="http://www.example.com/image3.png" alt="Image 3" />
[/galleria]

The fancy header shortcode allows you to display stylish headings. The options for this shortcode are shown below.

Example

[fancy_header type="style2"]My heading[/fancy_header]

The impact header shortcode allows you to display big impact headings. The text between the opening a closing shortcodes is the header text. The options for this shortcode are shown below.

Example

[impact_header type="heading-subheading-button" subheading="This is a subheading" button_text="Click me" button_link="http://www.example.com"]
    Heading text is here
[/impact_header]

The note block shortcode allows you to display a left/right aligned note block for content. The text/HTML between the opening a closing shortcodes is the content. The options for this shortcode are shown below.

Example

[note_block align="right"]
    <p>This is some content.</p>
[/note_block]

• Page Sidebar - the sidebar on pages
• Blog Sidebar - the sidebar on blog posts
• Portfolio Sidebar - the sidebar on porfolio item pages
• Footer Boxes - footer popup boxes

To add this widget, go to Appearance → Widgets on the WordPress menu and drag the widget with the title Storm - Shortcode to your widget area. You can use the built-in shortcode generator by clicking the icon. See the shortcodes section for more information about using shortcodes.

To add this widget, go to Appearance → Widgets on the WordPress menu and drag the widget with the title Storm - Contact Details to your widget area. You can enter the contact details for your website.

To add this widget, go to Appearance → Widgets on the WordPress menu and drag the widget with the title Storm - Facebook to your widget area. This widget will add a Facebook "Like Box", enter your settings in the fields.

To add this widget, go to Appearance → Widgets on the WordPress menu and drag the widget with the title Storm - Opening Times to your widget area. This widget will display opening times, enter your settings in the fields.

To add this widget, go to Appearance → Widgets on the WordPress menu and drag the widget with the title Storm - Popular Posts to your widget area. This widget will display a list of posts with the most comments, enter your settings in the fields.

To add this widget, go to Appearance → Widgets on the WordPress menu and drag the widget with the title Storm - Recent Posts to your widget area. This widget will display your most recent posts, enter your settings in the fields.

To add this widget, go to Appearance → Widgets on the WordPress menu and drag the widget with the title Storm - Related Posts to your widget area. This widget will display posts related to the post the user is viewing, enter your settings in the fields.

To add this widget, go to Appearance → Widgets on the WordPress menu and drag the widget with the title Storm - Social Icons to your widget area. This widget will display social icons with links to, enter your settings in the fields.

For the RSS feed you can enter the URL of your blog with ?feed=rss2 at the end, for example.

http://www.example.com/?feed=rss2

To add this widget, go to Appearance → Widgets on the WordPress menu and drag the widget with the title Storm - Twitter to your widget area. This widget will display a list of your recent tweets, enter your settings in the fields.

The theme has support for the WP-PageNavi plugin. Once you've installed the plugin, go to the WP-PageNavi plguin settings and untick Use pagenavi-css.css. We have included our own CSS with the theme to make the pagination look good. The theme will automatically detect that you have installed the plugin and use it where relevant.

You can add custom CSS inside the theme options panel at Advanced → Custom CSS.

Storm has one main stylesheet style.css in the theme root folder, you can make any adjustments in this file. The file is split into sections by numbered comments and the file has a table of contents at the top to help you find the right section. We recommend adding custom styles in section Custom at the very bottom of the CSS file.

You can add custom JavaScript inside the theme options panel at Advanced → Custom JS. Any code entered here is executed inside the function jQuery(document).ready(function($) { ... your code will be placed here ... });. So the DOM will be ready and you can access the jQuery option with the $ sign.

You can edit the theme JavaScript if required in the file js/scripts.js.

Each form in the plugin is configurable through the Quform plugin. To edit your existing forms, go to Quform → Forms on the WordPress menu. Hover the form you want to edit and click Edit. Help for the Quform plugin is available at Quform → Help on the WordPress menu.

The Cufon font files have a set number of supported characters when they are generated. We included a limited number of supported characters to keep the file size small. To add further characters you will need to re-generate the Cufon font file from the base font file. We have included the base font files in the resources/fonts/ folder for this purpose. Go to http://cufon.shoqolate.com/generate/, at the Regular typeface upload field, choose your base font file from the resources/fonts/ folder. Fill out the rest of the form, for the Include the following glyphs (if available) section, choose the extra characters you need. When we generated the fonts, the following options were ticked:

• Uppercase
• Lowercase
• Numerals
• Punctuation
• WordPress punctuation
• Basic Latin
• Latin-1 Supplement

So tick any extra options and click Let's do this!. Download the file once it's been generated, and upload the file to your site in the folder wp-content/themes/storm/fonts/ and replace the original file.

The Google fonts we've included are set to use the basic latin character set. If you want to support characters from other languages you'll need to modify the includes/framework.php file and specify which other subsets you want to use for your chosen font. In the file search for subset, you be taken to the subset for the first Google font, find the font you are using from the array below this. Modify the string 'latin' and add addtional subsets after this separated by a comma, the available subsets for each font are shown and were correct at the time of writing. Some fonts do not have any other subsets available. For example to add the Latin Extended subset to the Dosis font, make the change highlighted in the code below.

'dosis' => array(
    'type' => 'google',
    'name' => 'Dosis',
    'family' => 'Dosis',
    'subset' => 'latin,latin-ext' // also available: latin-ext
),

To add your own Cufon fonts so that you can select it in the options panel for use, there are a few things you need to do.

• 1. Convert your font to a Cufon font JavaScript file
• 2. Put your font JavaScript file into the fonts directory
• 3. Add a PHP function to add your new font to the system

Each step is explained in more detail below.

1. Convert your font to a Cufon font JavaScript file

Go to the Cufon website and upload your font. Fill out the rest of the form and submit it and download the file.

2. Put your font JavaScript file into the fonts directory

Upload the font file to the directory /wp-content/themes/storm/fonts/

3. Add a PHP function to add your new font to the system

Add the following code to the theme functions.php file and we'll then customize it for your specific font. The example below is for the PR Celtic Narrow font.

add_filter('tcr_fonts', 'mytheme_add_fonts', 10, 1);

function mytheme_add_fonts($fonts)
{
    $fonts['celtic_narrow'] = array(
        'type' => 'cufon',
        'name' => 'PR_Celtic_Narrow_400',
        'family' => 'PR Celtic Narrow'
    );

    return $fonts;
}

The highlighted parts should be changed as follows:

• Change celtic_narrow to a unique name for your font, lowercase and spaces changed to underscore, it can be anything.
• Change PR_Celtic_Narrow_400 to the name of the font file, everything before the .font.js part of the filename
• Change PR Celtic Narrow to the name of the font family, you can find this by opening your Cufon .font.js file in a text editor as shown in the image below.

Your font will now be available to choose in the theme options panel at Global → Fonts

To add your own Google fonts so that you can select it in the options panel for use, you will need to add a PHP function to add your new font to the system.

Add the following code to the theme functions.php file and we'll then customize it for your specific font. The example below is for the Life Savers font.

add_filter('tcr_fonts', 'mytheme_add_fonts', 10, 1);

function mytheme_add_fonts($fonts)
{
    $fonts['life_savers'] = array(
        'type' => 'google',
        'name' => 'Life+Savers',
        'family' => 'Life Savers',
        'subset' => 'latin'
    );

    return $fonts;
}

The highlighted parts should be changed as follows:

• Change life_savers to a unique name for your font, lowercase and spaces changed to underscore, it can be anything.
• Change Life+Savers to the name of the font in the CSS link href that is shown on the Google font page, see the image below.

  

• Change Life Savers to the name of the font family that is shown on the Google font page, as shown in the image below.

  

Your font will now be available to choose in the theme options panel at Global → Fonts

You will need to edit the file /storm/admin/includes/custom-css.php, you will see a large number of CSS selectors above the line with the code:

{color: ;}

Edit the CSS selectors to suit. You will then need to go to the theme options panel and press Save, this will update the cached custom CSS file with your changes.

In the theme stylesheet add the following CSS.

#fs-controls {
display: none !important;
}

In the theme stylesheet add the following CSS.

#video-controls {
display: none !important;
}

In the theme stylesheet add the following CSS.

#audio-controls {
display: none !important;
}

When using the portfolio shortcde you can specify how they are ordered, see the Portfolio shortcode section. By default they are ordered by menu_order which means you can manually specify the ordering when editing the portfolio item. To set the menu_order, when editing or adding a portfolio item you will see a box on the right hand side named Attributes.

Enter a number in the box under Order, this field will then be used to order the portfolio items when they are set to order by menu_order.

We have included an export of the preview site as an XML that you can use to quickly set up the same site. The export file is at resources/demo.xml. Inside WordPress, go to Tools → Import, click WordPress from the list and follow the steps to install the WordPress Importer plugin. You will end up at a page with a file upload field, choose the file resources/demo.xml from the Downloaded package and import it.

Another step you may need to perform is to set up the WordPress menu. Go to Appearance → Menus and in the top left of the page you will see a box named Theme Locations, select Main from the drop down and click Save.

Inside WordPress, go to Settings → Reading, at Front page displays choose A static page (select below). Choose the pages to be your Front page and Blog page. You will need to creates these pages first before you can select them here.

To set up random videos you will need to add a PHP function, it doesn't matter what you set in the theme options panel, we will override the settings in the PHP function. In the theme functions.php file, add the following code and modify it to suit.

add_filter('tcr_video', 'mytheme_random_video', 10, 1);

function mytheme_random_video($video)
{
    // Set up the list of available videos
    $videos = array(
        // Video #1:
        array(
            'url' => 'http://vimeo.com/45878034',
            'autostart' => true,
            'complete' => 'restart',
            'width' => 1920,
            'height' => 1080,
            'start' => 0
        ),
        // Video #2:
        array(
            'url' => 'http://vimeo.com/47015825',
            'autostart' => true,
            'complete' => 'restart',
            'width' => 1920,
            'height' => 1080,
            'start' => 0
        ),
        // Video #3:
        array(
            'url' => 'http://www.youtube.com/watch?v=T82LpzWEx7U',
            'autostart' => true,
            'complete' => 'restart',
            'width' => 640,
            'height' => 360,
            'start' => 0
        ),
    );

    // Return a random one
    return $videos[array_rand($videos)];
}

In this code we set up an array with the configuration for 3 videos, and return a random one. Each time the page is loaded a random video will be picked from this list. You can add more videos by adding another configuration array for another video. The configuration array for each video should be set up like so:

array(
    'url' => 'http://www.youtube.com/watch?v=T82LpzWEx7U', // The URL to the video
    'autostart' => true, // Start the video automatically, true or false
    'complete' => 'restart', // What to do when finished playing, 'none', 'hide', 'restart'
    'width' => 640, // The width of the original video (see below)
    'height' => 360, // The height of the original video (see below)
    'start' => 0 // The start position of the video in seconds
),

The width and height are used to scale the video accurately. Use the instructions below to find the dimensions for each video.

Find the width/height of the video (Vimeo)

The Storm theme has built in functionality to find the width/height of a Vimeo video. If you go to the theme options panel, then Background → Video. In the Video URL field, paste in the URL to your video then click off (blur) the field. The width and height of the video will appear in the Video dimensions. Navigate to another page without saving to avoid saving any permanent changes.

Find the width/height of the video (YouTube)

You will need to find the dimensions manually, If you go to the theme options panel, then Background → Video. In the Video dimensions field, see the description on the right hand side and click the link find the dimensions manually for instructions.

You can translate all frontend text from inside the theme options panel at the Translate → Translations tab. Enter your translation of the text on the right hand side into the text input field.

The theme includes two translation files, one for frontend strings (what visitors will see on your site) and one for backend strings (what admins will see when editing the theme options).

• /languages/storm.pot - for the frontend
• /admin/languages/storm_admin.pot - for the backend

You can translate either one or both if required. You can use these files along with translating software such as Poedit to translate the theme. Please follow the instructions below to translate the theme

What you will need

• Translation software to read .pot files and save translations as .mo files, we recommend Poedit
• The theme and translation files which you can find at /languages/storm.pot and /admin/languages/storm_admin.pot inside the theme files
• Your WordPress locale code which you can find at http://codex.wordpress.org/WordPress_in_Your_Language. After the section title of each language, in brackets, you'll find the locale code. For example:
  • For Polish the locale code is pl_PL
  • For Spanish the locale code is es_ES
  • For German the locale code is de_DE

Step 1

Download and install Poedit or a similar translation tool. Click here to go to the Poedit download page. Once you've installed Poedit, run the program. If this is your first time running Poedit, you'll be prompted to enter your name and email address. This information is added to the top of the translated files as the last translator. You can leave these blank if you'd rather not enter them. Press OK.

Step 2

On the Poedit menu, go to File then New catalog from .POT file. and open the file /languages/storm.pot if you are translating the frontend or /admin/languages/storm_admin.pot if you are translating the backend.

Step 3

A Settings dialog box will appear, fill out the information.

• Project name and version - this should be automatically filled out
• Team - set this to the name of your translation team or leave it blank
• Team's email address - set this to the email address of your translation team or leave it blank
• Language - select the language you intend to translate to
• Country - select the country of the above language
• Charset - select the character set of the translation or leave it at utf-8
• Source code charset - set it to utf-8
• Plural forms - IMPORTANT set this to the plural form setting for your language, you can find your plural form setting on this page

Step 4

You'll now be prompted to save the file as a .po file. You will need to change the filename to be the following.

• For frontend translations (storm.pot) the file name should be [LOCALE_CODE].po and saved into the /languages/ folder, for example:
  • For Polish, save the file as /languages/pl_PL.po
  • For Spanish, save the file as /languages/es_ES.po
  • For German, save the file as /languages/de_DE.po
• For backend translations (storm_admin.pot) the file name should be [LOCALE_CODE].po and saved into the /admin/languages/ folder, for example:
  • For Polish, save the file as /admin/languages/pl_PL.po
  • For Spanish, save the file as /admin/languages/es_ES.po
  • For German, save the file as /admin/languages/de_DE.po

Step 5

When the file loads, you should see the list of text strings needing translated. If you look at the bottom, you should see 2 boxes, one containing the text needing translated and an empty box below it. In the empty box, enter your translation.

You can use the shortcut key Ctrl + Down Arrow to jump to the next translation. If the translation is the same in both languages, you can right-click the string and select Copy original to translation field.

Continue this process until the translation is complete.

Unusual characters combinations (formatting placeholders)

If you have never done a translation before, you may notice some odd looking character combinations, such as %s \n \t %1$s, these are formatting placeholders and they should remain inside the translated string, in exactly the same position if possible. Also double quotes will have a backslash before them \" and they should remain this way in your translation.

Finding more information or context of a string

If you need to find out the context of a string so that you can accurately translate it, you can right-click it and under References, click one of the filenames, this will open the file and show where the string appears in the code. You may be able to figure it out from there.

Step 6

Save the file, Poedit should create another file ending in .mo in the same place as your .po file. So you should have two files that should be in the /languages/ folder, for frontend translations, or in the/admin/languages/ folder for backend translations:

• [LOCALE_CODE].po
• [LOCALE_CODE].mo

Step 7

If you haven't done so already, you should set up WordPress to use your locale. Open the file wp-config.php, found in the WordPress root folder. Find the line that looks like this:

define('WPLANG', '');

Inside the empty single quotes, enter your WordPress locale, for example:

define('WPLANG', 'pl_PL');

Once this step has been done, the theme should be translated inside WordPress, congratulations!

Share your translation?

ThemeCatcher invites you to share your translations with others. If you wouldn't mind contributing to make Storm an even more awesome theme, please send us your translated .mo and .po files to info@themecatcher.net. Thanks for contributing :)

The following third party scripts are used by this template.

• jQuery JavaScript library
• FancyBox
• Galleria
• jQuery Cookie
• HoverIntent
• Superfish
• Quicksand
• jQuery CSS Transform
• jQuery CSS Rotate Scale
• jQuery Tools Tabs
• jQuery Easing
• jQuery Actual
• jQuery Cycle
• Cufon
• qTip2
• jQuery Regexp Classes
• Timthumb
• jPlayer
• jQuery throttle / debounce
• In Field Labels
• Smooth Scroll
• jquery.slider
• Chosen
• jQuery Tweet
• Console Dummy
• Color Picker
• jQuery Tweet
• jQuery Tweet

The custom filter hooks can be used to modify specific parts of the theme on any specified context (see the Hook contexts section below). The syntax of the hook name is:

tcr_{context}_{tag}

You can use any of the tags in the table below for the {tag} part of the hook name, you can find the {context} you want in the Hook contexts section. See the examples below the table and it should hopefully make sense.

    'type' => 'cufon',
    'name' => 'Comfortaa',
    'family' => 'Comfortaa',
    'selector' => 'h1, h2, h3'
)

Examples

The code should be added to wp-content/themes/storm/functions.php

Change the layout on all archive pages

add_filter('tcr_archive_layout', 'tcr_set_archive_layout');
        
function tcr_set_archive_layout($layout)
{
    return 'full-width';
}

Change the featured image type for a single post (post ID 15)

add_filter('tcr_singular-post-15_blog_featured_image_type', 'tcr_set_post15_image_type');
        
function tcr_set_post15_image_type($type)
{
    return 'left';
}

Disable the sticky header on portfolio pages

add_filter('tcr_singular-portfolio_sticky_header', '__return_false');

The custom action hooks can be used to output content in specific parts of the theme on any specified context (see the Hook contexts section below). The syntax of the hook name is:

tcr_{context}_{tag}

You can use any of the tags in the table below for the {tag} part of the hook name, you can find the {context} you want in the Hook contexts section. See the examples below the table and it should hopefully make sense. You may want to look in header.php and footer.php to see exactly where the hooks are within the source.

Examples

Add a subscribe form content after all single posts

add_action('tcr_singular-post_after_content', 'tcr_add_subscribe_form');
        
function tcr_add_subscribe_form()
{
    if (function_exists('iphorm')) {
	    $output = '<h2>Thanks for reading, why not subscribe for updates?</h2>';
	    $output .= iphorm(2);
	    return $output;
    }
}

The contexts below can be used to change any of the above hooks in a lot of different sitations. The syntax of the hook name is:

tcr_{context}_{tag}

You can find {context} in the table below and {tag} from the two sections above.