Jarvis WordPress Theme - RocknRolla Designs » We...

of 23

Jarvis WordPress Theme

By Rocknrolla Designs

A how-to guide and general information to help

you get the most out of your new theme.

Firstly, a huge thanks for purchasing this theme, your support is truly

appreciated!

This document covers the installation and use of this theme and often reveals answers

to common problems and issues - I encourage you to read this document thoroughly if

you are experiencing any difficulties. If you have any questions that are beyond the

scope of this document, feel free to pose them in the dedicated support forum.

http://goo.gl/NiChL

of 23

1. Getting Started 4

1.1 Installation 4

1.2 Configure Settings [Mandatory] 4

1.2.1 Permalinks 4

1.3 Installing Demo Data 4

1.4 Setting up the Front page and Blog 5

1.4.1 Setting up Front Page 5

1.4.2 Setting up Blog 5

1.5 Creating Front page Sections 6

1.5.1 Creating Home Section 6

1.5.2 Creating Normal Sections 7

1.5.3 Creating Parallax Sections 8

1.5.4 Creating Portfolio Section 8

1.5.5 Creating Contact Section 9

1.5.6 Creating Separate Pages 10

1.6 Navigation Menu and including sections in the Front page 11

1.7 Home Variations 11

1.7.1 Quote or Circular Quote 11

1.7.2 Text Slider 12

1.7.3 Subscribe Form 12

1.7.4 Full Screen Slider 13

1.7.5 Revolution Slider 14

1.7.6 Background Video 15

1.8 Setting up the Portfolio 16

1.8.1 Adding Portfolio Items 16

1.8.2 Adding Images 16

1.8.3 Adding Video 16

of 23

1.8.4 Adding Project Details 17

2. Theme Options 17

2.1 General Options 18

2.2 Home Settings 18

2.3 Menu Settings 18

2.4 Portfolio Settings 19

2.5 Contact Settings 19

2.6 Footer Settings 19

2.7 Blog Settings 19

2.8 Twitter Settings 19

2.9 Typography 20

2.10 Social Sharing 20

2.11 Backup Options 20

3 Custom Widgets and Shortcodes 20

3.1 Custom Widgets 20

3.1.1 Custom Video Widget 20

3.1.2 Custom Flickr Photos Widget 21

3.1.3 Custom Latest Tweets Widget 21

3.1.4 Custom Blog Widget 22

3.2 Shortcodes 22

3.2.1 Column Shortcodes 22

of 23

1. Getting Started

To install this theme you must have a working version of WordPress already installed.

For information in regard to installing the WordPress platform, please see the

WordPress Codex - http://codex.wordpress.org/Installing_WordPress

1.1 Installation

When you are ready to install a theme, you must first upload the theme files and then

activate the theme itself. The theme files can be uploaded in two ways:

FTP Upload: Using your FTP program, upload the non-zipped theme folder into

the /wpcontent/themes/folder on your server.

WordPress Upload: Navigate to Appearance > Add New Themes > Upload. Go to

browse, and select the zipped theme folder. Hit “Install Now” and the theme will

be uploaded and installed.

Once the theme is uploaded, you need to activate it. Go to Appearance > Themes and

activate your chosen theme.

1.2 Configure Settings [Mandatory]

After Theme Setup, you need to configure the below settings. These settings are

mandatory.

1.2.1 Setting up Permalinks:

Navigate to Settings > Permalinks. Under “Common Settings” select “post name”. Now

click on “Save Changes”.

Caution: You may experience Site Load problems if you don’t configure the above

settings.

1.3 Installing Demo Data

To install demo data content, Navigate to Tools -> Import. You will be given with a list of

options. Click on “WordPress”, a popup will display if you haven’t got importer plugin

installed. Then Click “Install Now”. You will be redirected to a page, Click on “Choose

http://codex.wordpress.org/Installing_WordPress

of 23

file”. A popup window will be opened, now browse and select the demo xml file

provided inside the download folder and click on “Upload File and Import”.

The importing will take some time if you’ve selected to import “Download and Import

File attachments”. Now, your site is installed with the demo content.

1.4 Setting up Front Page and Blog:

1.4.1 Setting up Front Page

Before setting up the Frontpage, let me tell you that Front page and Home Section are

different. Home section is the the first section in the Frontpage where as Frontpage is

where all your sections will be displayed. This is different from the Home Section.

To set up the Frontpage, you must first create a new page with no content inside it, you

can do so by navigating to Pages > Add New. You can give this page a title of

“Frontpage”. Under the page attributes section, Select "Page template as Front Page

Template" and Click “Publish”.

Once you have created your new page, Goto Settings->Reading. Select “A static page”

and assign the “Frontpage” for “Front Page:”

If you haven’t applied these settings above, your frontpage sections will not be

displayed.

1.4.2 Setting up Blog:

To set up the blog, you must create a new page, you can do so by navigating to Pages >

Add New. You can give this page a title of “blog” yet you do not have to include any

content. Click “Publish”.

of 23

Once you have created your new page, Goto Settings->Reading. Select “A static page”

and assign the “blog” for “Posts Page:”

Your blog index is now created and can be viewed by visiting the page you just

published.

1.5 Creating Front page Sections

Front page sections are all the sections which will be displayed in the Front page. There

are four types of sections:

1.5.1 Creating Home Section

Home section should be the first section of the Front page. It supports Revolution

Slider, Full Screen Slider, Background video and many more.

To create a Home Section, create a new page, you can do so by navigating to Pages > Add

New. You can give this page a title you do not have to include any content. Under the

page attributes section the page template must be set to "Default Template" and Under

the "Page Settings" metabox, Select "Assign Current page as" as "Home Section" and

click “Publish”.

Your Home Section is now created, next you need to configure the home section with

content. We've included many Home variations. You can refer to 1.7 on how to

customize the home sections.

The settings must be as follows:

of 23

Note:

1. There should be only one Home Section and it should be placed as the first

section in the Primary Menu.

2. Check 1.8 Home Section Variation on how to customize your Home Section

to Revolution Slider or Full Screen Slider or Background Video or Any other

variations.

1.5.2 Creating Normal Section

To create a Normal Sections, create a new page, you can do so by navigating to Pages >

Add New. You can give this page a title you do not have to include any content. Under

the "Page Settings" metabox, Do not select anything for "Assign Current page as" and

click “Publish”. Your settings should be as follows:

Your section is now created. Normal sections comes with White background and Dark

Background. If you want to customize this, goto Theme Options->General settings and

check Enable Dark skin for the theme.

Make sure you uncheck this box if you want to appear

it in the Frontpage.

Check this box if you want to exclude

the section from the navigation menu.

Do not select anything here, if you

want a Normal section.

of 23

1.5.3 Creating Parallax Section

To create a Parallax Sections, create a new page, you can do so by navigating to Pages >


the "Page Settings" metabox, Select "Parallax Section" for "Assign Current page as".

Your settings should be as follows:

Next, Set a featured image. Featured will be taken as the background image for your

parallax section. Now click on "Publish".

Your parallax section is now created. Parallax sections has its limitations in height.

So you can't have more content inside the parallax section. Also only parallax

sections support the background image.

1.5.4 Creating Portfolio Section

To create a Portfolio Section, create a new page, you can do so by navigating to Pages >


the "Page Settings" metabox, Select "Assign Current page as Portfolio Section" and click

“Publish”. Your section is now created.

of 23

Before creating a Portfolio section, make sure you've added Portfolio items via Custom

Post type. More info on how to add Portfolio items refer to 1.8

You can customize the portfolio settings in Theme Options:

1.5.5 Creating Contact Section

To create a Contact Section, create a new page, you can do so by navigating to Pages >


the "Page Settings" metabox, Select "Assign Current page as Contact Section" and click

“Publish”. Your section is now created.

of 23

Before creating a Contact section, make sure you've customized the Contact settings

inside the Theme Options.

1.5.6 Creating Separate Pages

To create a Separate pages, create a new page, you can do so by navigating to Pages >


the "Page Settings" metabox, check the "Open as Separate page" and Do not select

anything for "Assign Current page as" and click “Publish”. Your page is now created.

of 23

Note: Parallax Sections, Contact Section, Portfolio Section doesn't support separate

pages. You can only have normal content in Separate pages.

2) All the pages which you have unchecked the "Open as Separate pages" as considered

as "Front page" sections which can be included and ordered via Appearance->Menus

1.6 Navigation Menu and Including sections in the Frontpage

Once you have built and saved your pages and sections, Goto Appearance->Menus, Add

all the pages which you want to be displayed in the Menu as well as the Front Page.

Pages which are unchecked with “Open as Separate Page” are included in the

Frontpage as sections. The sections in the Front Page are appeared in the same order of

the Menu. The pages which are checked with "Open as separate page" are appeared

as links in the menu.

1.7 Homepage Variations

1.7.1 Quote Text, Circular Quote:

Quote text and Circular Quotes are two bold styled home variations. To use them first

you need to navigate to Appearance->Theme Options->Home Settings. Now goto

"Home Section Settings" and configure "Home Layout Type to Regular With Padding or

Full Screen" and "Home Section Content Type to Boxed Content".

Now goto Homepage you've created. Click on Edit Page. Now use the Shortcode, Home

Variations-> Home Quote or Home Circular Quote.

Can be assigned to "Regular

with Padding" or "Full

Screen" if you are using

"Home Variations"

shortcodes.

of 23

1.7.2 Text Slider:

To use Home Text Slider in the Home Section, Use the "Home Text Slider" shortcode as

shown above. Now goto Appearance->Theme Options->Home Settings. Select "Home

Layout Type to Full Screen" and "Home Section Content Type to FullWidth Content".

1.7.3 Subscribe Form:

Install Mailchimp for WP after setting up the theme activation. Now click on “Mailchimp

for WP” in the dashboard menus, Under API Settings, give your API Key and Save the

Changes.

Make Sure the Assign Current page

as is set to Home Section

Click on Home Circular

Quote or Home Quote to

use the shortcode. Publish

it.

For Home Text Slider, you

need to set "Home Section

Content Type" to "Full

Width Content".

of 23

Now goto “Form Settings”, here your "Lists" will be displayed if your API key is coorect.

Now, select the “Mailchimp List” and create your own Form markup or use the Sample

Markup Code below. Save Changes and Use the shortcode in home section or any other

parallax sections.

Sample Markup Code:

1.7.4 Full Screen Slider:

The homepage features a Full screen slider into which you can insert your own content.

Navigate to Appearance > Theme Options > Home Settings and select "Home Layout

Type as Full Screen" and “Home Section Content Type as Full Screen Slider”. You can

add new slides to the slider from “HOME FULL SCREEN SLIDER OPTIONS” and upload

an image from your computer. You can choose to set description and a link URL for each

slide or leave blank to show the image without a description or link. Repeat this process

until you have created all of your slides and click “Save all Changes”.

<div>

<input type="text" name="name" value="" placeholder="Your name" />

<input type="email" id="mc4wp_f%N%_email" name="email" required

placeholder="Your email address" />

<input type="submit" value="Sign up" />

</div>

To use the Full Screen Slider

as your Home Section,

Your Settings should appear

like this.

of 23

1.7.5 Revolution Slider:

To use Revolution Slider, First you need to create a Slider. Goto Revolution Slider and

click on Create new Slider. You can find the documentation on how to use "Revolution

Slider" in the download folder.

Next, navigate to Appearance > Theme Options > Home Settings and select "Home

Layout Type as Regular" and “Home Section Content Type as Revolution Slider”. Your

Settings should appear as below:

You should have at least one

slider.

Create you are slides here.

These slides are applied for

only Full Screen slider which

will be used for Home

Section.

of 23

Now, goto Home section page, Select your Revolution Slider you've created in the

metabox and Publish the page.

1.7.6 Background Video Support:

To use Background Video, navigate to Appearance > Theme Options > Home Settings

and select "Home Layout Type as Full Screen" and “Home Section Content Type as

Video”. Now add a YouTube video link at the below.

Your settings should look as below:

Give your Youtube Link here.

In this case, I've created Slider with

name"Home Revolution Slider"

of 23

1.8 Setting up the Portfolio

To set up the Portfolio section, you must create a new page, you can do so by

navigating to Pages > Add New. You can give this page a title of “portfolio” yet you do

not have to include any content. Under the "Page Settings" metabox, Select "Assign

Current page as" as "Portfolio Section" and click “Publish”. The main portfolio section

can now be viewed in the FrontPage.

1.8.1 Adding Portfolio Items

To add a new portfolio item, navigate to Portfolio > Add New. Here you can add a brief

description of the project, an excerpt, assign various categories and set featured images.

1.8.2 Adding Gallery Portfolio

You will need to upload various images to each portfolio item for it to display correctly.

Each portfolio item can display a slider. To upload images, look for "Project Image

Slides" metabox, click on select files, now browse your computer for the “Images” and

upload. You can create a thumbnail for each project which can be uploaded via the

featured image.

1.8.3 Adding Video

Each portfolio item can display either a self hosted video or video embedded from

YouTube or Vimeo. Look for Project Video metabox, to add a video from either Vimeo or

YouTube, select video type then, simply copy and paste the ID of the video under "Video

of 23

URL" textarea box. You do not need to use the embed code or the page URL, just the

video ID.

1.8.4 Adding Project Meta

To add the client details, project link and other details. Scroll for "Project Details"

metabox and fill up the details.

Note: It is important to note that in order for the filtering functionality to work

correctly, you must assign atleast one category to each portfolio item.

2) Theme Options

The theme comes packed with features that control the layout and extend the

functionality of WordPress. This section will document those features and how to use

them successfully.

The theme comes with a simple to use administration panel. You can access it by

navigating to Appearance > Theme Options. The theme options are conveniently spread

of 23

over a number of tabs and each tab contains the options that pertain to a particular area

of the theme.

2.1 General Settings

As the label suggests, these general options allow you to configure your site setup.

Accent Color, Logo and Favicon Options, Custom CSS, Google Analytics or Custom JS are

handled here. You can also customize the Light/Dark skin by checking the box.

2.2 Home Settings

Jarvis comes with many Home variations. These variations can be handled or

customized by modifying the options under Home settings.

You can set Home type to Fullscreen, Regular, or Regular with Padding. You can enable

or disable the Home Logo.

2.3 Menu Settings

The Navigation menu can be customized with navigation link color, the link hover color,

your navigation type and it's styling and the positioning.

Menu can be Light, Dark, Colored or

Transparent.

You can set the Menu position here. It

can be at the top, bottom or outside

the Home section

Menu typography settings are handled

here.

of 23

2.4 Portfolio Settings

Portfolio settings include, Enabling filter, AJAX Portfolio. Selecting the type of layout for

Portfolio single items.

2.5 Contact Settings

Here you can set all the details which are to be included inside the contact section of the

page.

2. 6 Footer Settings

Here you can set all the details which are to be included inside the footer section of the

page.

2.7 Blog Settings

Here you can set all the options related to the blog, blog-single, and archive pages.

Styling of the blog single and archive pages are also included in this section.

2. 8 Twitter Settings

To make the twitter shortcode work inside the parallax sections. You need to configure

the Twitter API keys here.

Portfolio Single Layout Type

of 23

2. 9 Typography

Here you can set your Typography options for the website. Title settings are same as the

H1 heading settings.

To disable the page titles border design, check the "Keep a classic section title".

"Section subtitle font" customizes the typography styling for subtitles of sections.

2. 10 Social Sharing

Provide the links for the social platform for which you want to be appeared in the

Footer

2. 11 Backup Options

This theme also allows you to backup your theme options data and you know it’s always

good to make a backup before you make any big changes.

3. Custom Widgets and Shortcodes

The theme comes with custom widgets that can be used to configure how your site

displays content - they can be found under Appearance > Widgets.

3.1 Custom Widgets

3.1.1 Custom Video Widget

of 23

This widget allows you to configure and display a single video. The widget requires the

user to input video embed code taken from either Vimeo, YouTube, or other video

sharing sites and can display a short description if required.

3.1.2 Custom Flickr Photos Widget

This widget allows you to configure and display Flickr photos from a user’s

photostream.

Title: Title of the widget

Flickr ID: The Flickr ID of the group or user’s photos you wish to display. You

can find out your Flickr ID at idGettr.com

Number of Photos: Choose the number of photos to display

3.1.3 Custom Latest Tweets Widget

This widget allows you to configure and display your latest Twitter tweets.

With the recent Twitter API changes, it is necessary to create a Twitter App first with

your account to make the twitter widget work.

1) First, you need to follow the link below and sign in to your twitter account:

http://dev.twitter.com/apps. Here, you need to create an app.

2) Click on the "Create new application" button.

3) Fill up the details inside the fields, Enter Captcha, Agree the terms and Click

on Proceed.

4) Now your application will be created. For now your provided with the

"Consumer Key" and "Consumer Secret key"

5) Scroll down to the bottom and click on "Create Access Token". Revisit the

page after few mins and you can see that you’re now given with the "Access

Token" and "Access Token Secret" keys.

Caution: Do not share these keys with anyone.

Now you can use the widget under Appearance -> Widgets. Grab the Rocknrolla: Twitter

Widget. Fill up the below details to use this widget.

Title: Title of the widget

http://idgettr.com/

http://dev.twitter.com/apps

of 23

Consumer Key, Consumer Secret Key, Access Token Key, Access Token

Secret Key: These keys are found in the app you've created.

Twitter ID: The username of the user’s tweets you wish to display e.g. envato

Number of tweets: Choose the number of tweets to display.

3.1.4 Recent Portfolio widget

This widget allows you to show your latest blog posts in widgetised areas. You can

configure the title and number of portfolio items to display.

3.2 Shortcodes

The theme comes pre-packed with a number of shortcodes allowing you to add styled

content to your site with little effort. Conveniently, the available shortcodes have been

included in a one-click menu. When creating a page or post, click the black “R” icon in

the tinymce editor to reveal a list of shortcodes. Choose the functionality you wish to

include and click on it.

The content for some shortcodes can be split into multiple columns. For example, the

option “One Half” from the shortcode panel will insert the necessary code to split the

content into two. Now you can add shortcodes like Team Member, Tabs, Testimonials,

etc.

Important: You must end each set of columns with a “last” option such as “One Half

Last”.

[one_half] Insert you content here [/one_half]

of 23

[one_half_last] Insert you content here [/one_half_last]

Use the wide range of the features and elements available with the theme to make your

site more creative and appealing. :)

Again, thank you for purchasing this theme!

If you have any questions that are beyond the scope of this document,

feel free to pose them in the dedicated support forum.

Forum: http://support.rocknrolladesigns.com

Mail: [email protected]

Other items: http://goo.gl/NiChL

http://support.rocknrolladesigns.com/

http://goo.gl/NiChL

Jarvis WordPress Theme - RocknRolla Designs » We...

Documents

Transcript of Jarvis WordPress Theme - RocknRolla Designs » We...