Hello

Thank you for purchasing our theme.

If you cannot find the answer here, sign up our support board.

IMPORTANT

Support is offered exclusively on our Dedicated Support Board not ThemeForest comments section neither via email.

Getting Started

To install this theme you must have a working version of WordPress already installed. For information regarding the installation of the WordPress platform, please see the WordPress Codex - http://codex.wordpress.org/Installing_WordPress

Theme Installation

You'll want to install this theme just like any other WordPress theme, either by uploading the main theme folder via FTP (unzipped) or the zipped file via the Wordpress theme upload section. Make sure you located the main theme folder from the downloaded zip file and that you are not uploading the entire zip with all the documentation, sample data, etc.

WordPress Installation

  1. Goto Appearance > Themes
  2. Click Add New
  3. Click Upload Theme
  4. Navigate to find the Jade.zip file on your computer and click Install Now
  5. Wait while the theme is uploaded and installed.
  6. Go to Appearance > Themes and activate it.
  7. Then you will get a notification to activate the required plugins. Please install all required plugins before using the theme.
  8. Done (:

Are You Sure You Want To Do This?

If you get the "Are You Sure You Want To Do This" message when installing Jade.zip file via WordPress, it means you have an upload file size limit. Install the theme via FTP if this happens, or call your hosting company and ask them to increase the limit.

FTP Installation

  1. Log into your site via FTP
  2. Browse to your folder located at wp-content/themes
  3. Unzip the Jade.zip folder and upload only the extracted Jade folder to your server
  4. Log Into Wordpress and go to Appearance > Themes
  5. Find the Jade and click to activate
  6. Then you will get a notification to activate the required plugins. Please install all required plugins before using the theme.
  7. Done (:

Theme Options

Jade comes with tons of styling / customization options. When you need to customize some part (header, logo, footer, menu, typography,...) on Jade just go Theme Options menu in your WordPress Dashboard. Those options are global and will be effect all pages in your theme.


Also, you can assign some theme options on pages one-by-one. When you adding/editing pages just check boxes under Custom Options and click Update When page refresh you can see following options under WordPress Editor metabox.

Demo Content

You can import demo contents in two ways; All Demo Content or Individual Demo Content

1- Importing All Demo Content

IMPORTANT!

You need to install and make active following plugins before start this step, which comes with theme.

all_demo_content.xml located in Demo Content folder

  1. Go to Tools > Import in your WordPress admin area
  2. Choose WordPress from list
    • Install plugin if not exist.
  3. Select all_demo_content.xml and upload.
  4. When import is completed you should have all demo contents (Layouts, Projects, Galleries, ..)

ABOUT DEMO CONTENT

  • Navigation menus: Go to Appearance > Menu to set your menu locations.
  • Footer Content: Demo content does not contains widgets, it means your footer will be blank.
    1. Column: You can find Demo Footer Column One codes on here than you can use with Text widget.
    2. Column: Just drag & drop :MET Twitter Widget More Info
    3. Column: Go Contact menu and copy contact form shortcode, which is labeled Footer Contact than use with Text widget.
  • Demo Images/Photos: Our demo images are not included because those are license stock photos that are not allowed to be shared. Instead we include placeholder images in their place.
  • Page Content Looks Empty at WordPress Editor? Jade works with Live Composer plugin for creating page contents. This mean all page elements stored on plugins meta field. So, its normal. You can find detailed information in Live Composer section for editing layout contents.
  • Revolution Slider Error: Slider with alias **** not found? Layout sliders not included on xml file, please take a look IMPORTING DEMO SLIDERS section below.

IMPORTING DEMO SLIDERS

All demo sliders included on 02.Demo Content/02-2. Revolution Slider folder.

  • Go Revolution Slider plugin page
  • Click green Import Slider button
  • Chose .zip file from 02-2. Revolution Slider folder
  • Than just click blue Import Slider button
  • Done!

2- Individual Demo Content

Individual Demo Content only contains "Branch Layouts" modules, not posts, events or projects.

  1. Go 02.Demo Content/02-1. Layouts folder
  2. Open some layout file with your favorite text editor
  3. Select and Copy all content inside text file
    • Windows: CTRL + A than CTRL + C
    • OS X: CMD + A than CMD + C
  4. Go WordPress admin
  5. Create new blank page
  6. Disable comments (recomended - optional) (?)
  7. Publish
  8. Visit new page
  9. Activate Live Composer
  10. Click bookmark icon from bottom left
  11. Click red IMPORT button
  12. Paste layout codes into popup textarea
  13. Finally, click green IMPORT button

How to apply demo layout options/styles for all pages?(optional)

When you import demo contents using method one or two, color schemes and layout options will be valid only on layouts page. But, if you make decision to use some demo layout for entire site, you can use global layout data files with few steps!


  1. Go 02.Demo Content/02-3. Theme Options folder
  2. Open some layout file (layout_name.json) with your favorite text editor
  3. Select and Copy all content inside text file
    • Windows: CTRL + A than CTRL + C
    • OS X: CMD + A than CMD + C
  4. Go WordPress admin
  5. Go Theme Options > Import / Export
  6. Click Import from file button
  7. Paste option codes into textarea
  8. Than click Import button.

The Header

There are 5 unique Header Layouts available on Jade Theme. You can change header layout just one-click and also a lot of styling options added to customizing the header for your purpose.


Quick tips for customizing The Header;

#1 - Change the header layout globally
Go to Theme Options > Header Options than choose some layout under Header Layout
#2 - Enabling custom header options for specific page
  1. Go to Pages
  2. Create new page or Edit some page
  3. Check Header box under Page Options > Custom Options
  4. Publish / Update page.
  5. Then Header Options metabox will appear under page content.
  6. Choose your header options than click Update button.
#3 - Disabling header for specific page
  1. First, be sure to complete tip #2 properly
  2. Check Disable Header box to Yes
  3. Click Update button.
#4 - Customizing header for specific page
  1. First, be sure to complete tip #2 properly
  2. Use following customization options under Header Options
    For example;
    1. Disabling header
    2. Switching header layout
    3. Using another menu
    4. Enabling sticky header
    5. Uploading custom logo
    6. and more..
  3. Click Update button.

Customization Options Available!

Go to Theme Options > Sidenav Options > Sidenav Styling

The Footer

 

4 Layouts available for Jade, you can change footer layouts on Theme Options also you can change or disable footer for specific page when editing page.

Footer Layout 1 supports widgetized columns that can display widgets in 1-4 columns. Widgets add various content or features to your site. They can be added, removed, and rearranged in the WordPress Administration Appearance > Widgets panel.

Footer Options Available!

Jade offers a lot of footer options. They are located in Theme Options > Footer Options

Customization Options Available!

Jade also offers a lot of footer styling options. They are located in Theme Options > Footer Options > Footer Styling

The Sidenav

Sidenav layout type is perfect choice to creating portfolio or personal pages! You can enable sidenav layout just few clicks, also a lot of customization options available for making unique sidenav pages.

There is two ways to enable sidenav layout;

1 - Enable sidenav globally

Go to Theme Options > Sidenav Options than switch Enable Side Navigation to ON

2 - Enable sidenav for specific page

  1. Go to Pages
  2. Create new page or Edit some page
  3. Check Sidenav box under Page Options > Custom Options
  4. Publish / Update page.
  5. Than select Sidenav Status to ON under Sidenav Options metabox.

Customization Options Available!

Go to Theme Options > Sidenav Options > Sidenav Styling

Fullscreen Scrolling Pages

Most creative way to showcase your company profile or personal works!


Enabling "Fullscreen Scrolling" Layout

  1. Go to Pages
  2. Create new page or Edit some page
  3. Check Fullscreen Scrolling box under Page Options > Custom Options
  4. Publish / Update page.
  5. Than select Fullscreen Scrolling Status to ON under Fullscreen Scrolling Options metabox.

Creating "Fullscreen Scrolling" Content

We implement fullscreen layout functionalty with Live Composer, so that mean you can create fullscreen pages like a regular page with Live Composer.

Simple Logic: Each row on Live Composer acts as section.
  1. First, be sure to fullscreen scrolling options enabled
  2. Click View Page
  3. Activate Live Composer
  4. Create full-width Modules Area to add a new section
  5. Click cog icon to enable row options.
  6. Set row background Color or Image (Optional)
  7. Use composer modules to create your row content.
  8. Click Confirm
  9. Click Publish Changes

One Page Layout

Creating one page layouts on Jade Theme super easy-to-setup!
Create your unique one page layouts in 3 there step.


1- Creating "One Page" Sections
  1. Create a new page using Live Composer like regular.
  2. Click cog icon to enable row options.
  3. Scroll end of row options to find CUSTOM ID input.
  4. Set unique CUSTOM ID for each row in your page.
2- Setting up "One Page" Scrolling Menu
  1. Go WordPress Admin > Appearance > Menus
  2. Create a new menu.
  3. Add new menu item using Links type from left;
    • Set URL like: #CUSTOM ID
    • Set Link Text for section title.
  4. Repeat 6th step for each rows
3- Selecting new menu
  1. Go WordPress Admin > Pages
  2. Edit your page, which is created in step 1
  3. Check Header box under Page Options > Custom Options
  4. Update page.
  5. Then Header Options metabox will appear under page content.
  6. Select your menu from Header Menu option
  7. Update page.

Setting Up Menu

Jade supports custom WordPress menus, with multiple levels of dropdown support for the main navigation.

  • Main Navigation Used for the main navigation bar in the header, supports all header layouts.
  • Top Navigation Used for the secondary navigation bar in the top of the header. Header 1 does not support this menu.
  • Footer Navigation Used for the bottom left side of your footer.

Menu Options

Jade offers menu customization options. They are located in Theme Options > Navigation Options


Setup A New Menu

  1. Go to Appearance > Menus section of your admin.
  2. Click the Create A New Menu link to make a new menu. Enter the name then hit the Create Menu button.
  3. To add a menu item, select one of your created pages on the left hand side and click Add to Menu You can also add all kinds of different posts from the left side.
  4. To add a custom menu item, enter a custom name and link into the Links box.
  5. Manage your menus by using the drag and drop functionality. To create a dropdown menu, simply drag a menu item below and slightly to the right of another menu item and it will lock into place and create a dropdown section.
  6. After setting up your menu, scroll down to the bottom of the page to assign the menu to one of the 3 locations in the Theme Locations box.
  7. Once its all done, make sure you click the Save button.

Setting Up Homepage

  1. Goto Settings > Reading
  2. Select A Static Page option
  3. Choose the page you want as your home page from the dropdown list.
  4. Click Save Changes

Setting Up Blog Page

  1. Goto Pages > Add New
  2. Create a new empty page, named Blog or something
  3. Goto Settings > Reading
  4. Select A Static Page option
  5. Choose the created page named Blog
  6. Click Save Changes

Blog Options Available!

Jade offers a lot of blog options. They are located in Theme Options > Blog

Post Formats

Jade supports the use of different post formats in order to change the appearance of your content. The theme supports standard, aside, image, gallery, video, link, quote and audio formats.

Standart Post Format

This format functions just as you would expect any other typical post, the appearance of your content is not altered.

Image Post Format

To use the image post format, just assign a featured image. Your featured image image will be shown, any other content will not. Images should be a minimum width of 770px by any height. Also you can change cropping options under MEDIA SIZING OPTIONS

Slider Post Format

To use the slider post format, select Slider from the Media Settings metabox and insert your content as normal. You will find an additional options under SLIDER OPTIONS metabox. Press the Select or Upload Images button, choose your images from your computer or WordPress media library, and press Select. There are no further steps, all images uploaded will automatically show in your slider. You can upload an unlimited number of images. Images should be a minimum width of 770px by any height.

oEmbed(Youtube,Vimdeo,..) Post Format

oEmbed option is best for video embeds, like youtube or vimeo. Also oEmbed supports a lot of websites. Just select oEmbed named Content Media? row and insert desired url named oEmbed Link input.

Self Hosted Audio Post Format

To use the self hosted audio post format, select HTML5 Audio named Content Media? row and insert your content as normal. You will find an additional field named HTML5 Media File used to upload your audio(.mp3) file. You may also provide a poster image via Featured Image

Self Hosted Video Post Format

To use the self hosted video post format, select HTML5 Video named Content Media? row and insert your content as normal. You will find an additional field named HTML5 Media File used to upload your video(.mp4) file. You may also provide a poster image via Featured Image

Aside Post Format

To use the quote post format, select aside from the format select menu and insert your content as normal. Your post content will be shown, your post title will not.

Quote Post Format

To use the quote post format, select quote from the format select menu and insert your content like <blockquote>example text</blockquote> Your post title will be used as the quote source.

Setting Up Portfolio

A lot of portfolio listing elements included on Live Composer, just create regular page and activate Live Composer. You can create and customize listing pages using portfolio listing elements under MET - Post Grids element category.

Creating Portfolio Items

  • Go to Projects in your WordPress admin.
  • Click on Add Project to make a new portfolio item.
  • There are two ways for creating portfolio item content;
    • Create portfolio item just like regular blog post, you can use Media Settings also.
    • Or, create portfolio item without content and publish your new portfolio item first and use Live Composer for making uniqe portfolio item content. Also you can use Live Composer templates for pre-made portfolio item layouts.

Setting Up The Twitter API

For all twitter elements in Jade theme, you need to complete this step.

  1. Go https://dev.twitter.com/apps and sign in with your twitter account.
  2. Click on the Create A New Application button.
  3. Fill out the required fields. The name and description can be anything, it does not have to be a certain name. You can leave the Callback URL field empty.
  4. After creating the app, click Create My Access Token button to generate the necessary codes.
  5. Then you will see all 4 items you need; consumer key, consumer secret, access token, access token secret.
  6. Go Theme Options > Twitter API and fill fields with your keys.
  7. Now you can use all theme elements and widgets.

(mc) Shortcode Builder

Jade offers awesome Shortcode Builder with elegant and easy-to-use interface!

It is not possible to use Live Composer modules inside of text blocks but elements like button, list, dropcaps usually should be within text, so we made visual shortcode builder for that. You can use Visual Shortcode builder to create those kind of elements in text based contents.

You can use our shortcode builder on Live Composer's WordPress editor. Like Text module or Pricing Tables

(mc) Mega Menu

Jade comes with unique mega menu solution!

Mega DropdownLatest PostsCategorized PostsHTML & ShortcodesWidgetsIcon Selector & Upload



Mega Dropdown





Mega Dropdown - Link Columns





Categorized Posts





Latest Posts





HTML





Shortcodes





Widgets





Icon Picker

Live Composer

Entire theme elements included on Live Composer and all elements has a lot of customization and styling options.

Live Composer for Pages

If you're logged in as administrator and you visit a page on your website you will be seeing a green button ( Activate Editor ) in the bottom right corner. Clicking that button will reopen the page in Live Composer Mode.

When you're in the Live Composer Mode there will be a red button ( Disable Editor ) in the same place where the button for activation was. Clicking that button brings you back to the regular page view.

When you're done creating/editing a page you will need to publish the changes by clicking the "Publish Changes" button which is positioned in the bottom right corner as well.

Live Composer for Posts ( Post Templates )

The Post Templates feature allows you to create a template for each post type ( blog, projects, downloads, galleries ) which will then be used when showing the single page of that post type ( ex. a blog post, gallery, project ).

If a post type does not have a specific template created, the regular single post template from the theme ( single.php ) will be used to show the content for the posts of that post type.

Creating A Post Template

Go to the WordPress admin, in the main menu you will see Templates, click to Add New. Everything is the same as when adding a post/page except these 3 options ( check screenshot bellow )

They're all explained there so no need to do it here as well. When you publish the template click "View Template" button. From there everything's the same as when using the Live Composer to create a page.

The only difference between creating a page with LC and creating a template with LC is that when creating a template there are a few more modules available ( title, comments, thumbnail... )


Choosing a Template

All posts will use the default template ( the template that has "Type" set to "Default") for their post type, but you can also set some posts to use a different template ( a template that has "Type" set to "Regular" ).

If you go to edit a post ( blog or download or whichever ) you will see a "Template" option ( check screenshot bellow ). That is where you choose which template should that post use when being viewed.

Interactive Tutorials

We have made a set of interactive tutorials that explain how it all works much better than words and pictures could, you can start from a specific one but if it's your first time then it's best to start from the first one:

WooCommerce (Shop)

Jade is compatible with WooCommerce and includes full design integration as well. To getting started with creating your online shop, you need to install the free WooCommerce Plugin.

If you already install demo content or planing to install, skip installation step.

Installing WooCommerce & Setting Up Default Pages

  • Go to your Plugins section of your WordPress admin and click on the Add New button at the top of the page.
  • Enter WooCommerce in the search field and choose the first one named WooCommerce – excelling eCommerce and click on Install Now
  • WooCommerce will install, then click the Activate Plugin link
  • You will then see a WooCommerce Purple Notficication Bar at the top of the plugin page. Click the Install WooComemrce Pages button in the purple bar to install all the default pages
  • WooCommerce automatically creates the necessary pages. If you need to reassign the pages to different WooCommerce page designations, you can do so in the WooCommerce settings page.
Setting up Product Image Sizes

  1. Go WooCommerce -> Settings
  2. Catalog Images:        270x270 [✓] Hard Crop
  3. Sigle Product Image: 300x300 [✓] Hard Crop
  4. Product Thumbnails: 82x82     [✓] Hard Crop
  5. Install Regenerate Thumbnails plugin, and regenerate thumbnails.

WooCommerce Options Available!

Jade offers a lot of WooCommerce options. They are located in Theme Options > WooCommerce

For more information, please take a look WooCommerce documentation

Translation

Translation files included on Jade, you can simply translate the theme into your language on WordPress admin.

Please follow;

  • You need to install and active Loco Translate plugin.
  • Go Loco Translate -> Manage translations
  • Find Jade theme under Themes section
  • Click New language link
  • Select your language from list
  • Click Start translating button
  • Select translation strings and translate
  • Than click Save button to translate your language

For more information, please take a look Plugin's documentation

Child Theme (Advanced)

IMPORTANT

If you are only looking to perform simple CSS changes to Jade theme, then you can use the Custom CSS box in Theme Options instead of creating a child theme. For more in-depth changes that require editing php files, a child theme must be used.

Why You Should Be Using Child Themes

Creating a child theme when performing adjustments to your theme’s code can save you a lot of future headache. Child themes allow you to make changes without affecting the original theme’s code, which makes it easy to update your parent theme without erasing your changes. By creating a child theme, you create a separate set of files that you can use to customize the theme without affecting the original theme at all. Not only does this make updating easier, it also makes sure that you will never ruin your original theme as you are never actually modifying the files. You can always turn off your child theme and fall back on the original.

Activating Jade's Child Theme

Uploading and activating a child theme is no different than a normal theme, simply upload it via the Appearances > Themes page in your WordPress Dashboard and activate it. Before you upload it, you must first ZIP it. Mac and Windows both have native ZIP functionality. Make sure that Jade's parent theme is also uploaded.

Modifying Style CSS

@import should not be used to import the parent stylesheet into the child theme. The correct method is to use wp_enqueue_style() to enqueue the parent stylesheet. We already create correct files for you, just open child theme's style.css with your favorite editor and add your codes after following place.

  • The child theme’s stylesheet is included after the parent theme's and styles will therefore override those in the parent theme’s stylesheet.
  • If your wordpress is running in multi-site mode, you may need to switch to the network admin dashboard, then themes, then click network enable. Then you switch to regular admin dashboard and the above step to activate your child theme should be present

Modifiying Theme Files

If you want to change more than just the stylesheet, your child theme can override any file in the parent theme: simply include a file of the same name in the child theme directory, and it will override the equivalent file in the parent theme directory when your site loads. For instance, if you want to change the PHP code for the site header, you can include a header.php in your child theme's directory, and that file will be used instead of the parent theme's header.php. You can also include files in the child theme that are not included in the parent theme. For instance, you might want to create a more specific template than is found in your parent theme, such as a template for a specific page or category archive. See the Template Hierarchy for more information about how WordPress decides what template to use.

Using functions.php

Unlike style.css, the functions.php of a child theme does not override its counterpart from the parent. Instead, it is loaded in addition to the parent’s functions.php. (Specifically, it is loaded right before the parent’s file.)

In that way, the functions.php of a child theme provides a smart, trouble-free method of modifying the functionality of a parent theme. Say that you want to add a PHP function to your theme. The fastest way would be to open its functions.php file and put the function there. But that’s not smart: The next time your theme is updated, your function will disappear. But there is an alternative way which is the smart way: you can create a child theme, add a functions.php file in it, and add your function to that file. The function will do the exact same job from there too, with the advantage that it will not be affected by future updates of the parent theme. Do not copy the full content of functions.php of the parent theme into functions.php in the child theme.

The structure of functions.php is simple: An opening PHP tag at the top, and below it, your bits of PHP. In it you can put as many or as few functions as you wish. The example below shows an elementary functions.php file that does one simple thing: Adds a favicon link to the head element of HTML pages.

In that way, the functions.php of a child theme provides a smart, trouble-free method of modifying the functionality of a parent theme. Say that you want to add a PHP function to your theme. The fastest way would be to open its functions.php file and put the function there. But that’s not smart: The next time your theme is updated, your function will disappear. But there is an alternative way which is the smart way: you can create a child theme, add a functions.php file in it, and add your function to that file. The function will do the exact same job from there too, with the advantage that it will not be affected by future updates of the parent theme. Do not copy the full content of functions.php of the parent theme into functions.php in the child theme.

Referencing / Including Files in Your Child Theme

When you need to include files that reside within your child theme's directory structure, you will use get_stylesheet_directory(). Because the parent template's style.css is replaced by your child theme's style.css, and your style.css resides in the root of your child theme's subdirectory, get_stylesheet_directory() points to your child theme's directory (not the parent theme's directory).

Here's an example, using require_once, that shows how you can use get_stylesheet_directory when referencing a file stored within your child theme's directory structure.

require_once( get_stylesheet_directory() . '/my_included_file.php' );


Sources

Tips

Useful quick tips for learning the Jade theme elements and options.

How to find "Post ID" for elements

For some cases you can need Post ID on LiveComposer or somewhere, we add new column for Post ID on WordPress admin post listing pages.

  • Go to WordPress Admin
  • Click post type(posts,projects,galleries,..) from left menu
  • Find following post from list
  • Copy The ID from end of the row
  • Paste following input

How to disable comments

  • Go to WordPress Admin
  • Click post type(posts,pages,projects,..) from left menu
  • Find following post/page from list than click Edit
  • Click Screen Options tab from top right
  • Check Discussion box if not checked.
  • Scroll-down
  • You need to see metabox named Discussion
  • Un-Check Allow comments.
  • Also you can disable trackbacks and pingbacks on this box.

How to create parallax rows

Enable Live Composer (?) than follow;

  1. Click cog icon for row options.
  2. Upload or select your parallax image.
  3. Select "Parallax" option.
  4. Confirm your changes.