Jarvis WordPress Theme

Transcription

1 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. Page 1 of 24

2 1. Getting Started Installation Configure Settings [Mandatory] Permalinks Installing Demo Data Setting up the Front page and Blog Setting up Front Page Setting up Blog Creating Front page Sections Creating Home Section Creating Normal Sections Creating Parallax Sections Creating Portfolio Section Creating Contact Section Creating Separate Pages Navigation Menu and including sections in the Front page Home Variations Quote or Circular Quote Text Slider Subscribe Form Full Screen Slider Revolution Slider Background Video Setting up the Portfolio Adding Portfolio Items Adding Images Adding Video 16 Page 2 of 24

3 1.8.4 Adding Project Details Theme Options General Options Home Settings Menu Settings Portfolio Settings Contact Settings Footer Settings Blog Settings Twitter Settings Typography Social Sharing Backup Options 20 3 Custom Widgets and Shortcodes Custom Widgets Custom Video Widget Custom Flickr Photos Widget Custom Latest Tweets Widget Custom Blog Widget Shortcodes Column Shortcodes 22 Page 3 of 24

4 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 Installation To install the theme, first download the themeforest files and unzip it. Inside the extracted folder, you will find a folder by name upload. Open that folder and use the file jarvis_wp.zip to install in the wordpress. 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 /wp-content/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 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. Page 4 of 24

5 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 file. A popup window will be opened, now browse and select the demo xml file provided inside the download folder inside package/demodata 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: 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: Page 5 of 24

6 If you haven t applied these settings above, your frontpage sections will not be displayed 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. 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. One Front Page is set, you need to create all the required pages and create a menu in Appearance > Menus and assign it to primary navigation menu at the bottom and save it. This will create you onepage theme perfectly. 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: Creating Home Section Home section should be the first section of the Front page. It supports Revolution Slider, Full Screen Slider, Background video, Full Width Content and Boxed Content. Page 6 of 24

7 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". Next, Set a featured image. Featured will be taken as the background image for your parallax section. Now click on "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: Note: 1. There should be only one Home Section and it should be placed as the first section in the Primary NavigatiMenu. 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 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: Page 7 of 24

8 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. 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 Creating Parallax Section To create a Parallax 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, 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" Creating Portfolio Section To create a Portfolio 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 Page 8 of 24

9 the "Page Settings" metabox, Select "Assign Current page as Portfolio Section" and click Publish. Your section is now created. 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: Creating Contact Section Page 9 of 24

10 To create a Contact 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 Settings" metabox, Select "Assign Current page as Contact Section" and click Publish. Your section is now created. Before creating a Contact section, make sure you've customized the Contact settings inside the Theme Options Creating Separate Pages Page 10 of 24

11 To create a Separate pages, 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, check the "Open as Separate page" and Do not select anything for "Assign Current page as" and click Publish. Your page is now created. 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 Quote Text, Circular Quote, Home Text slider: Quote text, Text Slider and Circular Quotes are 3 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 of Full Width Content". Page 11 of 24

12 Can be assigned to "Regular with Padding" or "Full Screen" if you are using "Home Variations" shortcodes. Now goto Homepage you've created. Click on Edit Page. Now use the Shortcode, Home Variations-> Home Quote or Home Circular Quote. 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". Make Sure the Assign Current page as is set to Home Section 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". Page 12 of 24

13 1.7.3 Subscribe Form: Step 1: install the MailChimp for WP plugin as we provided inside the theme. Step 2: open the plugin and add you mailchimp API. Step 3: After that, go to third tab "Form Settings" and check yes on Use form functionality? Step 4: Now, Paste the form code we provided you in theme documentation in page 12 inside the textarea box in form settings and save it. Below that is a shortcode displayed saying. [mc4wp-form] Copy that and paste it in home page and save it. Go to theme options and select boxed content for home settings and save it. Your subscribe form is ready. If you want to use it in any of the parallax section, use the same shortcode in the content box of parallax pages. Sample Markup Code: <div> <input type="text" name="name" value="" placeholder="your name" /> <input type=" " id="mc4wp_f%n%_ " name=" " required placeholder="your address" /> <input type="submit" value="sign up" /> </div> Full Screen Slider: Page 13 of 24

14 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. To use the Full Screen Slider as your Home Section, Your Settings should appear like this. Create you are slides here. These slides are applied for only Full Screen slider which will be used for Home Section 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. Page 14 of 24

15 You should have at least one slider. 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: Now, goto Home section page, Select your Revolution Slider you've created in the metabox and Publish the page. In this case, I've created Slider with name"home Revolution Slider" Background Video Support: Page 15 of 24

16 To use Background Video, navigate to Appearance > Theme Options > Home Settings and select Home Section Type as Video. Now Select the video type you want. For either youtube video or vimeo, when you view the video, copy Link from the address link and paste it in the ield given in theme options Ex: Same with the vimeo tooyour settings should look as below: Give your Youtube/Vimeo URL here. Check to enable video looping for both vimeo and youtube. Check to mute video. 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 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. Page 16 of 24

17 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 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 URL" textarea box. You do not need to use the embed code or the page URL, just the video ID Adding Project Meta Page 17 of 24

18 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 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. Page 18 of 24

19 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. 2.4 Portfolio Settings Portfolio settings include, Enabling filter, AJAX Portfolio. Selecting the type of layout for Portfolio single items. Page 19 of 24

20 Portfolio Single Layout Type 2.5 Contact Settings Here you can set all the details which are to be included inside the contact section of the page 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 Twitter Settings To make the twitter shortcode work inside the parallax sections. You need to configure the Twitter API keys here Typography Here you can set your Typography options for the website. Title settings are same as the H1 heading settings. Page 20 of 24

21 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 Social Sharing Provide the links for the social platform for which you want to be appeared in the Footer 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 Custom Video Widget 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 Custom Flickr Photos Widget Page 21 of 24

22 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 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: 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 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. Page 22 of 24

23 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] [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. :) Page 23 of 24

24 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: Mail: Other items: Page 24 of 24