Help File

4. Setting Up The Theme

Homepage

Go to Settings -> Reading and make sure the Your latest posts option is selected.
Go to Appearance -> Theme Options -> Homepage Settings to control the tabs and posts displayed on the homepage.
Go to Appearance -> Theme Options -> Slider Settings to set up the slider on the homepage.

Slider

Go to Slides -> Add New to add a slide to the slider.
Scroll down to the Slide Settings panel below the main writing text box and enter your slide image URL in the Image URL text field (enter a relative URL such as wp-content/uploads/imagename.jpg instead of http://mydomain.com/wp-content/uploads/imagename.jpg).
Enter your page, image or video URL that you want the slide to link to in the Slide URL text field.
On the right-hand side you can add your slide to a category from the Slider Categories panel.
Go Appearance -> Theme Options -> Slider Settings and select a category from the Slider Category dropdown menu or leave it set to All.
You can also control a variety of other slider options from this page.

Carousel Slider

Go to Slides -> Add New to add a slide to the slider.
Scroll down to the Slide Settings panel below the main writing text box and enter your slide image URL in the Image URL text field (enter a relative URL such as wp-content/uploads/imagename.jpg instead of http://mydomain.com/wp-content/uploads/imagename.jpg).
Enter your page, image or video URL that you want the slide to link to in the Slide URL text field.
On the right-hand side you can add your slide to a category from the Slider Categories panel.
Go Appearance -> Theme Options -> Homepage Settings and select a category from the Carousel Category dropdown menu or leave it set to All.

Galleries

Go to Galleries -> Add New to create a gallery page.
Scroll down to the Gallery Settings panel below the main writing text box and click the "Upload Images" button to upload all the images you want to add to this gallery page.
If you want to display your images over a number of pages you should check the Disable Automatic Insertion option.
After you've uploaded your images, click the "View Images" button so you can insert a gallery shortcode into the page.
Next add the  tag after your gallery shortcode and publish/update your gallery page.
Now go to Galleries -> Add New to create another gallery page, upload your images and take note of the gallery page ID.
Now go back to your other gallery page and add a new gallery shortcode after the  tag with the ID of the new gallery page e.g. [gallery id="54"] so it looks like this:

[gallery]

<!--nextpage-->

[gallery id="54"]

To add lightbox support to the gallery shortcode add the following options itemtag="div" and link="file" like so [gallery itemtag="div" link="file"].
To load a custom URL for each image when uploading your images add your URL in the Description text box.

Blog Page Template

Go to Pages -> Add New, give the page a title.
On the right-hand side in the Page Attributes panel select the Blog page template from the Template drop down menu.
Scroll down to the Page Settings panel below the main writing text box and in the Blog Template Settings section enter your blog category IDs in the Category IDs field (go to Posts -> Categories and get the IDs from the ID column).
Make sure all the posts you want to display on this blog page are assigned to one or more of the category IDs you entered or leave the field blank to display all posts.

Redirect Page Template

The redirect template allows you to direct pages to external websites.
Go to Pages -> Add New, give the page a title and then enter the website URL in the main post textbox e.g. http://google.com
On the right-hand side in the Page Attributes panel select the Redirect page template from the Template drop down menu.
Now when you click the link to this page in the navigation or sliders it will open up http://www.google.com.

Navigation

Go to Appearance -> Menus to set up your header and footer navigation menu.
Click the + button and create two menus.
On the left-hand side from the Theme Locations panel select your menus from the Header Navigation and Footer Navigation drop down menus.

If you cannot see the portfolio categories on your navigation, click the Screen Options button in the top right corner of the page and check the Portfolio Categories option.

Shortcodes

This theme comes with several shortcodes. Shortcodes are pieces of code that can be inserted directly into your main text box on posts, pages and portfolio items to add certain content easily such as videos and dividers.

Click the Visual tab at the top of the main text box on any post, page or portfolio item.
Click the GP button to open the shortcode window.
From the shortcode drop down menu select a shortcode, which will automatically be inserted into the main text box.
You can view the full range of options for all the shortcodes from the following page.

Customising The Background

Go to Appearance -> Background to add your own background colour or upload your own background image.

Contact Page

Go to Pages -> Add New to create a new page.
Insert the contact form shortcode into the main text box e.g. [contact email="youremail@address.com"].
Replace youremail@address.com with your own email address.
If your contact form is not working click here.

Sidebars/Widgets

Go to Appearance -> Sidebars, click the Add Sidebar link and give your new sidebar a name.
Now go to any post, page or portfolio item and scroll down to the settings panel.
Now select one of your sidebars from the Sidebar drop down menu.
Go to Appearance -> Widgets and drag and drop widgets from the Available Widgets panel over the to your sidebar widget panels on the right.
This theme comes with the following custom widgets:
- GP Custom Content: Display custom content such as Google ads, flash and javascript.
- GP Recent Comments: Displays recent comments with avatars and comment excerpts.
- GP Mini Slider: A mini slider that displays your posts/pages.
- GP Featured Posts: Display posts in a variety of ways.

Customising Theme Design

You will probably want to customise the design of the theme. This may involve editing the HTML in the php files (theme structure) and the CSS in the style sheets (theme design). If you are not familiar with HTML and/or CSS you will want to hire a developer to modify the theme for you. You can contact one of my developers from here. If they are unavailable you will have to look elsewhere such as FreelanceSwitch.

Go to Appearance -> Theme Options -> CSS Settings and in the Custom CSS text box you can add your own CSS code to style the theme.
The CSS code you add to this text box will overwrite the default styling of the theme.
The benefit of adding your CSS code to the Custom CSS text box rather than editing the style sheets is that when theme updates are released your style modifications will not be overwritten.
For example, to edit the link and link hover colours you would add the following to the Custom CSS text box:

a {
color: #ff0000;
}

a:hover: {
color: #000000;
}

To change the colour of the post heading text you would add:

h2 a {
color: #ff0000;
}

In order to style the theme you need to know the name of the HTML elements you want to restyle. To get the names you should use the Firebug add-on in Firefox (recommended) or the built-in developer tools in Chrome or Internet Explorer 8+. All you then need to do is right click on a particular section of the web page and it will tell you what styling tags are controlling it and what files the styling tags are located in. If you're not sure how to use Firebug (or other developer tools) follow the tutorial here.

Translation

Open the language.php file located at juggernaut-theme/juggernaut/lib/inc.
Locate the lines of text you wish to translate or edit and then save the file.
Now upload the modified file via FTP in place of the old file.
If you use characters that are not displaying correctly on your website try changing the character encoding of the language.php, by default it should be set to UTF-8.

Using The Lightbox

Gallery Shortcode

To enable the lightbox on the [gallery] shortcode add itemtag="div" link="file" to the shortcode, like so:

[gallery itemtag="div" link="file" columns="3"]

Manual Use

To use the image or video pop up effect on any content add rel="prettyPhoto" to your links as follows:

<a href="http://example.com/imagename.jpg" rel="prettyPhoto"><img src="http://example.com/imagename.jpg" alt="" /></a>
	
<a href="file=http://www.example.com/video.flv&image=http://www.example.com/image.jpg" rel="prettyPhoto[pp_gal]">Text Link</a>

If you want to group items in the lightbox add [pp_gal] to the link e.g. rel="prettyPhoto[pp_gal]".
You can add the following files to the lightbox, using the following formats:
- YouTube: http://youtu.be/Sw-H3FoV2lc
- Vimeo: http://vimeo.com/8245346
- QuickTime: http://www.example.com/video.mov?width=780&height=418
- External Site: http://www.twitter.com?iframe=true&width=400&height=200

Disabling The Lightbox Script

To disable the lightbox script that comes with this theme open juggernaut-theme/juggernaut/lib/scripts/custom.php and find and remove:

jQuery(document).ready(function(){

	jQuery("div.gallery-item .gallery-icon a").attr("rel", "prettyPhoto[gallery]");
	
	jQuery("a[rel^='prettyPhoto']").prettyPhoto({
		theme: 'facebook'
	});

});

5. Troubleshooting & FAQs

It says the theme is broken or missing a style sheet?

If after installing the theme it says it is broken or the style sheet is missing see http://wiki.envato.com/buying/support-buying/solving-broken-theme-issues.

Why are my images not displaying on the site?

This theme uses a script called TimThumb to resize and crop images. Here is a list of the most common problems encountered and their solutions:

What path are you using for your images?
In most cases using the full path to your image should work. For example, you would input http://www.mydomain/wp-content/uploads/image.jpg (or whatever the path to your image is). However, some hosts do not allow the use of http://www. at the beginning of a URL. In this case you should use the relative path to your image, and remove your domain from the URL. In the above case, assuming your site is hosted in the in the root folder, the path to your image would just be: wp-content/uploads/image.jpg.

Are the images hosted on your domain?
By default all images must be hosted on the same domain as your WordPress theme. To use images from another domain open the timthumb-config.php file in a text editor located at juggernaut-theme/juggernaut/lib/scripts and add your domains to the allowed list, for example:

$ALLOWED_SITES = array (
'domain.com',
'website.com',
'myexample.com'
);

Does your cache folder have the correct permissions?
You need to give your cache folder located at juggernaut-theme/juggernaut/lib/scripts/cache/ full permissions. In most cases this is "777" but it may vary depending on where you are hosted (such as HostGator). If 777 does not work, try 755. It is recommended that you contact your host about what permissions to use if you are not sure. Settings permissions is also known as CHMODing, and can be done using most FTP programs and hosting control panels.

Does your server have the GD library compiled with its version of PHP?
This script requires the GD library to be installed. If your images are not working, check with your host to make sure that you have it.

Does your server have mod_security settings that are impeding the scripts functionality?
Some servers may have mod_security settings that will stop the script from working. You should always contact your host if you are having problems to make sure they do not have settings enabled that would stop the script from working.

If none of these suggestions work, right-click on one of the images on your website that is not working and then copy and paste the URL into the browser. You should get an error message. Contact your website host and refer them to this URL and error message.

I get a Page Not Found error when I click the page numbers?

You are probably receiving this error message because you are using a custom permalink structure without a forward slash at the end of your permalink. To fix this issue go to your Settings -> Permalinks and in the Custom Structure field add a trailing slash at the end of your permalink e.g. /%category%/%postname%/. You may need to save this page twice for the settings to be correctly changed.

How do I remove the comments section from pages?

Go to Pages -> All Pages and edit the desired pages. In the top right corner of the page click the Screen Options button and make sure the Discussion box is checked. Now scroll down the page and locate the discussion panel and uncheck the Allow comments box.

I do not receive emails from the contact form?

The are several reasons why you may not be receiving the emails:

Your emails are being sent to your spam/junk mail folder
You have entered the wrong email address in the contact form shortcode
Your web host does not allow you to send emails from the same address your are receiving the emails to
Your web host does not support PHPMail, you will need to contact them about this or switch hosts (I recommend DreamHosts)
Your web host (in most cases GoDaddy) does not allow contact forms to send emails to certain email providers (e.g. yahoo.com, hotmail.com etc), you will need to contact them about this or switch hosts (I recommend DreamHosts)

How do users add avatars (images) to their profiles?

WordPress uses Gravatar to add avatars (user images). Register a free account at Gravatar.com, associate it with the email you're using on your WordPress site and upload your avatar image. Now go back to your site and within a short amount of time your avatar will show up in your comments, profile page etc. If you want people to upload an avatar from your own site instead, use a plugin such as Add Local Avatar.

How do I install a new cufon font?

Go to http://cufon.shoqolate.com/generate/ and upload your font (e.g. OTF/TFF file). Check the The EULAs of these fonts allow Web Embedding box. Once you've selected the desired glyphs, check the I acknowledge and accept these terms box and click Let's do this! to generate your cufon font file. Now open header.php and find:

<script>Cufon.replace

Just before this add your font file like so:

<script src="http://domain.com/wp-content/themes/themename/js/fonts/nevis_700.font.js"></script>

<script>Cufon.replace

Make sure you have Cufon and/or the default Cufon font enabled under Appearance -> Theme Options -> Font Settings.

The cufon font does support characters from my language?

You will need to create your own cufon font file so it supports your characters. Go to http://cufon.shoqolate.com/generate and upload the desired font from the juggernaut-theme/help/lib/files folder. Check the The EULAs of these fonts allow Web Embedding box. Now select the glyphs you want to include (choose the glyphs that support your characters). Now check the I acknowledge and accept these terms box and click Let's do this! to generate your cufon font file. Now upload your cufon file to juggernaut-theme/juggernaut/js/fonts overwriting the old cufon file. If your cufon file does not overwrite the old file (it may be a new font) please see the question above.

What size is the slider?

The accordion slider is 670px in width by 360px in height. The fade slider is 980px in width by 360px in height.

Help File: Juggernaut

Table of Contents

1. Installation

Downloading from ThemeForest

Uploading The Theme

Activating The Theme

Theme Options

2. Demo Content

3. Updating The Theme