Jade
ALL-Purpose WordPress Theme
ALL-Purpose WordPress Theme
Thank you for purchasing our theme.
If you cannot find the answer here, sign up our support board.
Support is offered exclusively on our Dedicated Support Board not ThemeForest comments section neither via email.
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
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.
Appearance > Themes
Add New
Upload Theme
Jade.zip
file on your computer and click Install Now
Appearance > Themes
and activate it.(:
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.
wp-content/themes
Jade.zip
folder and upload only the extracted Jade
folder to your serverAppearance > Themes
(:
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.
You can import demo contents in two ways; All Demo Content or Individual Demo Content
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
Tools > Import
in your WordPress admin areaWordPress
from list
all_demo_content.xml
and upload.Appearance
> Menu
to set your menu locations.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.IMPORTING DEMO SLIDERS
section below.All demo sliders included on 02.Demo Content/02-2. Revolution Slider
folder.
Revolution Slider
plugin page02-2. Revolution Slider
folderIndividual Demo Content only contains "Branch Layouts" modules, not posts, events or projects.
02.Demo Content/02-1. Layouts
folderIMPORT
buttonIMPORT
buttonWhen 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!
02.Demo Content/02-3. Theme Options
folderTheme Options
> Import / Export
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;
Theme Options
> Header Options
than choose some layout under Header LayoutPages
Page Options
> Custom Options
Header Options
metabox will appear under page content.Header Options
Go to Theme Options
> Sidenav Options
> Sidenav Styling
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.
Jade offers a lot of footer options. They are located in Theme Options
> Footer Options
Jade also offers a lot of footer styling options. They are located in Theme Options
> Footer Options
> Footer Styling
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;
Go to Theme Options
> Sidenav Options
than switch Enable Side Navigation to ON
Pages
Page Options
> Custom Options
Sidenav Options
metabox.Go to Theme Options
> Sidenav Options
> Sidenav Styling
Most creative way to showcase your company profile or personal works!
Pages
Page Options
> Custom Options
Fullscreen Scrolling Options
metabox.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.
Creating one page layouts on Jade Theme super easy-to-setup!
Create your unique one page layouts in 3 there step.
WordPress Admin
> Appearance
> Menus
Links
type from left;
WordPress Admin
> Pages
Page Options
> Custom Options
Header Options
metabox will appear under page content.Jade supports custom WordPress menus, with multiple levels of dropdown support for the main navigation.
Jade offers menu customization options. They are located in Theme Options
> Navigation Options
Appearance
> Menus
section of your admin.Create A New Menu
link to make a new menu. Enter the name then hit the Create Menu
button.Add to Menu
You can also add all kinds of different posts from the left side.Links
box.Theme Locations
box.Save
button.Settings
> Reading
A Static Page
optionSave Changes
Pages
> Add New
Blog
or somethingSettings
> Reading
A Static Page
optionBlog
Save Changes
Jade offers a lot of blog options. They are located in Theme Options
> Blog
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.
This format functions just as you would expect any other typical post, the appearance of your content is not altered.
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
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 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.
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
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
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.
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.
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.
Projects
in your WordPress admin.Add Project
to make a new portfolio item.Media Settings
also.Live Composer
for making uniqe portfolio item content. Also you can use Live Composer
templates for pre-made portfolio item layouts.For all twitter elements in Jade theme, you need to complete this step.
Create A New Application
button.Theme Options
> Twitter API
and fill fields with your keys.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
Jade comes with unique mega menu solution!
●Mega Dropdown
●Latest Posts
●Categorized Posts
●HTML & Shortcodes
●Widgets
●Icon Selector & Upload
Entire theme elements included on Live Composer and all elements has a lot of customization and styling options.
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.
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.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... )
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.
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:
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.
Plugins
section of your WordPress admin and click on the Add New
button at the top of the page.WooCommerce
in the search field and choose the first one named WooCommerce – excelling eCommerce
and click on Install Now
Activate Plugin
linkInstall WooComemrce Pages
button in the purple bar to install all the default pagesWooCommerce
-> Settings
Jade offers a lot of WooCommerce options. They are located in Theme Options
> WooCommerce
For more information, please take a look WooCommerce documentation
Translation files included on Jade, you can simply translate the theme into your language on WordPress admin.
Loco Translate
plugin.Loco Translate
-> Manage translations
Themes
sectionNew language
linkStart translating
buttonSave
button to translate your languageFor more information, please take a look Plugin's documentation
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.
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.
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.
@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.
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.
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.
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' );
Useful quick tips for learning the Jade theme elements and options.
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.
Edit
Screen Options
tab from top rightDiscussion
box if not checked.Discussion
Allow comments.
trackbacks and pingbacks
on this box.