Installing the Theme
There are 2 ways to install wordpress theme :upload un-zipped theme via FTP and zipped file directly by using wordpress theme installer .
You have to setup Wordpress first. (download it at : link)
1. Upload via FTP
- Log into your site via FTP . (if you don't have any FTP program you can use FileZilla )
- Browse to your folder located at yoursite.com/wp-content/themes
- Upload the un-zipped theme folder
- Login to Wordpress, in Left Menu go to Apperance -> Themes
- Find & Active the theme
2. Upload via Wordpress
- Login to Wordpress
- go to Apperance -> Themes
- you will see Install Theme tabs. click Add New then Upload.
- Click choose file, browse to theme zipped theme file , click Install and wait for a seccond.
- Active the theme after done installing.
We recommend you to use child theme (required paren theme installed ) because it is quite handy, custom-functions.php is already located inside allows you to place custom functions so you won't get messed with you customizations when new update comes out.
Import and Setup Sample Data
The theme comes with Sample data (just like the theme preview) that allow you to create dummy content to your site to help you get started with the theme .
- Sample Dummy Data
- Others (If available)
Before starting to import sample data, make sure you have installed and activated the theme, necessary plugins those come with the theme (inside the downloaded package and recommended by the theme after activating) , and the following steps to have expecting result.
- Import Dummy data (this xml file contains Menus, Pages, Comments, Posts Custom fields or Custom post types )
- Import Theme Options data ( sample settings for Theme Options)
- Import Sidebars Data (Sample Sidebars for Widgets)
- Import Widgets data ( Sample widgets which display in pages/posts sidebar or at Footer Widget Area )
How to Import the sample data?
- You can find XML files inside theme package -> Dummy Data.
- Login to Wordpress , in Left Menu go to Tools -> Import
- Choose Wordpress, if the plugin haven't not been installed , the popup window will show up and just click Install Now.
- click Activate Plugin & Run Importer
- Click choose and browse to XML file
- Click upload file and import,
- Wait a few seconds .
Importing sample Theme Option settings
Copying the content in sample-theme-options-data.txt and paste it into Theme Options -> Backup & Restore -> Transfer Theme Options Data then hit Import Options.
The theme contains sample font combinatios as well, you could import through Transfer Theme Options Data field :) on typography fields will be changed.
Importing sidebars data
By default ,Theme comes with pre-defined sidebars ( Eg: Default sidebar (main), and Footer sidebars... ect ) but you can create unlimited sidebars for each page, this will be introduced in the next Steps.
After installed YT Sidebar Generator (included inside Main package), you could create unlimited sidebars for pages or import/transfer created sidebars. When creating new page, you could specific sidebar you want to display with that page.
To import Sample Sidebars data, please navigate via: Appearance -> Sidebars. then copy data from sample-sidebars.txt to field Sidebars data and hit Import Data. Existed sidebars won't be removed, just new sidebars will be added.
Importing Sample Widgets
After activating the theme, you'll be asked to install Widget Importer & Exporter, this plugin will help you to mport and export widgets easily via Menu Tools -> Widget Importer & Exporter. Simply browse to sample-widgets.wie included in Downloaded package/Sample Data then hit import and you will be able to modify /reorder widgets the way you wish.
Note that, default widgets in Fresh WordPress Installation won't be removed, you could manually remove it after importing the widgets data.
Finish the rest of the configuration
Setting up the menu!
Now go to Apperance -> Menus , Click Manage Locations tab and assign menus to predefined locations by the theme
Remember to hit Save
Setting up the sidebars.
By default ,Theme comes with pre-defined sidebars ( Eg: Default sidebar (main), Forum sidebar, and Footer sidebars... ect ) but you can create unlimited sidebars for each page, this will be introduced in the next Steps. And now go to Apperance -> Widgets . you can drag widgets to the sidebars you want to display on.
Setting up the Homepage & Blog page (posts page).
You can easily use a static page as a homepage, just go to Settings -> Reading to specifiy front page option. in this case, we use default setting, Posts page will be front page.
If you don't use custom home page (custom layout using pagebuilder), just specify the front page.
Using Theme Options
This theme comes with a Powerful Theme options that will allow you to customize your site to the way you love, like change Skin, Styling, Typography, Menu type...etc
Now go to Admin backend and look for menu item with icon like Apperance -> Theme Options or you can navigate to it by clicking the shortcut link (Y) from admin menu . Discover it and continue to the next steps.
Configure your site logo, site title/description and the other general settings. By default the theme uses site title as plain text logo
Interface setting options allow you to setting the default layout like sidebar on the left or right, number of footer columns...ect.
There are some options like:
- Boxed (narrow) layout
- Large display layout (wide layout for large display with high resolutions )
- Site Max width - inner container width
- Default Content/sidebar Layout (Set the default layout for Blog page (Page for posts), Archive, Single Page, Default page template)
- Page comment box ( automatically hide comment box on all pages)
- Hide/show main sidebar or sub sidebar on small screen sizes.
Hero Banner (Moved to theme options panel since 2.0 )
- Hero Banner layout
- Shuffle posts - Show the hero banner posts randomly
- Brick Gap size - Set the size for hero brick gaps, 4 options: Large, Medium, Small or No gap
- Brick content alignment
- Hero Banner style - Change the overlay style for hero bricks, mixed, dark gradient, or by category accent color
- Animation type - Appearance Effects for hero banner
- Categories - Retrieve posts by categories (Just keep typing and you'll be suggested)
- Tagged In - Retrieve posts by tags
- Exclude Categories - Exclude posts by categories
- Exclude Categories - Exclude posts by tags
- Order - Descending or Ascending
- Order by - Order Posts by date, title, or number of comments
- Number of posts (This only applies to Carousel Slider)
- Exclude post format - Exclude posts by format (link or video)
- Exclude hero posts from blog - (Exclude hero posts from Main blog loop)
- Top bar menu ( this theme support top bar menu, you need to turn this on to show the top bar menu) (Preview)
- Scrollfix Main menu ( Sticky menu when scrolling)
- News Mega Request type ( Usual HTTP method and Ajax technique)
- Social links Position ( You can display you social media links on top menu bar or main menu bar, you can also hide theme)
- Site Search box type (on Main menu)
- Modal search box type (choose between ajax request and regular http request)
- Config Site News Ticker query criteria ( right below the main navigation menu )
- Footer Layout (Preview)
- Footer columns (Number of columns in footer widgets area)
- Footer credit info (Preview)
- Exclude Categories from Default Blog page (Page for posts)
- Excerpt output
- Excerpt length for default blog archive
- Pagination style: numeric or direction navigation (Preview)
- Show/hide Read more button (Preview)
- Show/hide Post format icons (Preview)
- Post meta info (Preview)
The following section can be hidden or shown on single post
- Single Content/sidebar Layout
- Featured image
- Author Info
- Comment box
- Related articles (Preview)
- You might also like section (Preview)
- Archive Content/sidebar Layout
- Archive Post Layout
Setting typography on your site, adding Google Font, Upload Custom fonts
All configurations for headings (set the line heigh, font size, font family, font style, color), element on your site.
- Headings h1, h2, h3, h3, h5, h6 (Default for all headings)
- Body font
- Main menu
- Main menu child level
- Entry title (Main Archive page)
- Single Page/Post title
- Sidebar widget's Headings
- Home Brick Entry title
- Footer Headings
- Footer Elements
The theme was built intelligently. It will put available fonts from Google Web font Library to the dropdowns in Elements for you to choose, and only load selected fonts from Typography -> Elements -> elements's Font-family. so no need to bother about the site's loading speed. Nice huh ?.
Select character subsets specific to your language.
to turn on google font, follow the following steps.
- On Theme Options Menu Click Typography -> Google Font and Enable Google font.
- Hit Save & Refresh, wait a second and go back to Typography -> Elements, now your font have been added to font family dropdown for you. go to Elements under Typography and start setting up your site's typography.
Also, you can add your own custom fonts those are not available in Google Web Font by generate/download from www.fontsquirrel.com. in this example, we will use Novecento wide webfont from Fontspring, you need to register to download a package for free.
Watch the following screencast for adding custom font to theme options:
Note: Custom fonts seperate font styles to many files, so you have to upload font styles seperately if you want to support old browser such as Internet Explorer 8.
Customize Your site, changing background, color..
Configure Styling rule for overall elements.
- Built-in Skins (Change site color schemes)
- Body Background Color for Boxed Style only apply when you turn on Boxed-layout in Interface Settings.
- Primary color ( Accent color of your site, this will overwrite the Built-in Skins color)
- Secondary color (for secondary button, footer background, heading color)
- Text color
- Custom CSS - Add custom css via Theme Options quickly
The following rule will affect to Top Main Menu Nav & Top Secondary Nav Menu
- Header Background
- Header color style - This option will handle an appearance of text (color) on header to deal nicely with background.
- Content Background
- Footer Widgets Background
- Footer Copyright info. Background Color
The theme supports selling products using Woocommerce Plugin, this Option Panel will control an appearance of Shop page, single Product page... ect.
Check out an overview of Shop:
- Product per page ( Main shop page ) - The number of product item on Main Product archive page
- Mini cart (on Main Menu) (Preview)
- Single product tabs (Preview)
- Related product ( Single product )
- Add to cart button ( Product archives ) (Preview)
- Sale badge (Product archives) (Preview)
For more information of Woocommerce, check out plugin's author documentation
Subscribe and Connect
Where you setup API for needed authentications for third party services such as Mailchimp Subscription form or Twitter Widgets. Follow the description on every option to get your api.
Since Twitter API v1.1 , they required authentication for requesting to the API to get tweets. If you use Twitter feed (latest tweets) widget and Twitter profile, you have to create your application and enter secret keys to those fields.
Configure your site's social media links (Preview)
Add your site favorite icon (favicon), Apple icons, Windows icons.
Configure login area.
- Change admin login logo
- Link Color
Take your site offline for the Maintenance, set the Lauch date for the coundown timer.
Configure advertising banners on you site, there are the following postions:
- After Header
- Before footer
- Before single post
- Between single post (automatically insert ads to the middle of post content)
- After single post
- Turn off Media auto-resizer by theme to resize mannually from Setting -> Media.
- Overwrite default media gallery shortcode.
- Adding Custom Code to Header/Footer, eg: Google Analytics (or other) tracking code.
In this option you can backup the Theme Options settings, this is helpful if you moving your site to new server or something like that. just copy and paste the text in Transfer Theme Options Data field to new text file and save it. Restore by pasting it into that field and hit Import Options.
There the following widgets came with the theme you can use to display content on sidebar
Ajax Posts by Category
Display Posts by category using Ajax
Posts with thumbnail
Display Posts in various styles
Smart Tabby widget
Allow you to place the other widget inside a tab
Note: this feature only works in wordpress backend -> Appearance -> Widgets
Allow you to place large ads block to sidebar
A set of 125px (width) advertisements
And these widgets
- Category's descendants-A list or dropdown of a single category's descendants.
- Facebook Fan page-Display your Facebook fan page
- Child pages-A widget that displays your child pages menu
- Flickr Photos-Display Flickr photos.
- MailChimp Subscription form-Display Mailchimp subscription form
- Twitter Feeds-Display your latest tweets.
- Twitter Profile-Display your Twitter Profile
Using 3rd party plugins
For more information about what plugins we have used, please see Resources and Credits at the bottom of this documentation. (You will be asked to install necessary plugins after activated Sparkle)
Using Jetpack infinite scroll.
As you can see, we have infinite scroll feature on Home page (Actually Posts page). To have this same on your site, you need to install Jetpack then connect to WordPress and now you are able to use infinite scroll by activating this module in Settings under Jetpack menu on admin sidebar.
Next, go to Settings -> Reading to for setting up infinite scroll to loads posts automatically or manually (load on click)
Note: Make sure you are followed instruction on setting up Posts page in section #2.5 so everything will work properly
Using review function.
To use review function, you need to install WP Review, then add a post and choose review styles such as Star, Point or Percent.
Using live blog feature.
To use your post as live blog, you need to install LiveBlog, after activating, go edit/add a post and enable Liveblog on that post, save then switch to front-end to start liveblogging.
Adding a contact form
To add a contact form, you need to have Contact Form 7 installed and activated.
let's create a new contact from by clicking Add new under Contact menu on Admin sidebar. after saving, just copy contact form shortcode to Contact page or Text widget or anywhere you want to display.
for more information on using Contact form 7, reference here.
Using Theme's plugins
After installing the theme, you need to install necessary plugins for the theme from Downloaded Package/Plugins.
YT Impressive like
This plugin will add a like button on every single post. After activating, you also have to enable Likes go to Theme Options Panel -> Hide Post meta info
YT Simple Post Views Tracker
This plugin will Track and Display number of post view.
YT Sidebar Generator
This plugin will allow you to create unlimited sidebars for you to choose when creating page!
YT Shortcode Generator
This plugin will allow you to create layout by using row and column shortcode, adding google map...
There are some shortcodes like:
- Alert box
- Progress bars
- List Group
- Google Maps
- Post list
Click here for a demonstration.
To add the shortcode. go create a page/post and you'll see shortcode button right above the editor:
Translating the theme
Comes with .PO/.MO files, you could translate the theme to the other languages using PO Editor.
You could find these file inside parent theme directory/languages/
To translate the theme to your languague, follow the following steps:
1. Before starting, please download a copy of PO Editor for free from the above link and install.
2. Duplicate localization files (.po and .mo), and rename to your language code and country code you want to translate:
For instance, primary language of the theme is en_US, if you want to translate to British English, your code will be en_GB, here is the sample list:
- Deutsch - de_DE
- Español - es_ES
- Português - pt_PT
3. Open .po file you've just created, and navigate to Properties.. under Catalog menu from PO Editor, you will see this popup window:
Config the infomation of the new translation file and change to your language -> OK.
And you can start translating from now:
Remember to save after translating!
Finish the last step by going to General Settings from WordPress admin sidebar -> Settings and change your language, switch to front end to check if new language has been loaded or not!
The theme does support WPML as well in order you build a multilingual sites. This premium plugin allows you to translate pages/posts/menus... almost everything.
The theme uses theme options data individually for each language, this means you can change styles, colors for different languages, import/export/modify options settings easily. After installed WPML, and finished the configurations. you can navigate to theme options panel through admin menu, theme options panel will load settings for requested language automatically, as you can see in the following figure:
Default language (aka Primary language) won't have language code after the theme name in theme options panel header.
Checkout WPML documentation for more infomation.
All settings for Header of the site can be found in Theme options -> Interface Settings -> Header.
For styles, see Theme options -> Styling Options -> Header
For typography, see Theme options -> Typography -> Header
Add your logo in Theme options -> General Settings -> Custom Logo.
If you wish to use text logo, just turn on Plain Text Logo
First you need to choose where on the header to want to display social networks, on Top bar or Main menu bar in Interface Settings -> Header -> Social links Position
To add your urls, please navigate to Subscribe & connect -> Connect
The them provide you two choices of design for search, Default Dropdown and Modal popup. For modal popup search, supports ajax/regular request. You could find option for search in Theme options -> Interface Settings -> Site Search box type
Top Navigation Menu
You need to create new menu (let call it top menu) in Appearance -> Menus.
Also make sure top bar is enabled in Theme Options -> Interface Settings -> Header -> Top bar menu
Note that this menu location doesn't support submenu
Main Navigation Menu
This tutorial will help you to add/config main menu such as:
- Default Menu with dropdown
- Default Megamenu
- Add a column of submenu
- Add a widget to megamenu
- News Megamenu by category :
- First we need to create new Menu: Navigate to menu Appearance -> Menus -> and create new menu
Default Menu with dropdown
-Add menu items to your menu by selecting from Posts/Pages/Categories or even a custom link
Here is how it looks:
News by Category Megamenu
In below figure, we will add category social media as a parent and enable News by category mega menu from dropdown Mega menu
Set theme location
As you can see in our demo, News ticker is right below Main navigation, looks like this:
To enable this area, navigate to Theme options -> Header -> Site News ticker. You also have options (such as Title, Categories, tags, order, order by, number of posts... ) to change the query criteria for news tickers.
This is how hero banner looks like on demo, and it only shows on Front page or posts page.
comes with 6 layouts like these:
You could change your favorite layout in Theme Options -> Interface Settings -> Hero Banner..
There are some options like Shuffle posts, brick gap size, brick content alignment, brick style, animation, and options to specify categories, tags you want the hero to retrieve posts from.
To change post layout for Blog you could navigate to Theme Options -> Blog Settings -> General -> Blog Post Layout. We have two choices like these:
For archive pages such as category or tag, you could change the layout for posts in Theme Options -> Blog Settings -> Archive -> Archive Post Layout
If you wish to hide specific post meta infos, you can find an option in Theme Options -> Blog Settings -> General -> Hide Post meta info, some of them available in specific Post Meta Info style.
We have two post meta styles:
Above is how it look in single post.
In Blog/archive social button and share counter won't show. Counter will retrieve number of supported services automatically.
Two choices: Direction nav and Pagination nav
You could change in Theme options -> Blog Settings -> General
Make sure you have installed recommended plugins including WP Term Colors
To change category tag color, just edit category and pick color:
Save and you are done.
The following blocks are displayed after single post content, you could hide/show specific blocks in Theme Options -> Blog Settings -> Single
This tutorial will demonstrate how to create a new sidebar, using theme widgets.
By default, the theme has predefined sidebar positions such as Main sidebar, Sub sidebar or Footer sidebar...You can create unlimited sidebars using our provided plugin.
Make sure YT Sidebar Generator is installed and activated.
Demo site uses double sidebars on the right for home page, sub sidebar is always smaller than main sidebar as you can see in above figure.
1. Create new sidebar in Menu Appearance -> Sidebars. if you wish to change the layout for blog page, please navigate to Theme options panel -> Blog -> General
2. Create a new page, select layout and set choose sidebar to use from page settings
3. Add widgets for sidebar by navigating to Appearance -> Widgets. In the following figure, we will add search widget to My Sidebar
OK, Let's see the result
This tutorial will show you how to config footer, add widget to footer.
Have a look at the following figure.
We have three footer layouts as mentioned before.
Just navigate to Theme Options -> Interface Settings -> Footer to set the layout, change footer columns for footer widgets area or update footer credit.
Adding a page
When you create/edit a page, you will see this box:
By default, the theme will use content/sidebar layout in Interface Settings -> General -> Default Content/sidebar Layout for pages, so when if you wish to override the content layout for a page, just change it from Page Settings panel.
The theme support different ad positions such as after header, before footer, before post content, between post content, and after post content...
You could add you own ad code to Theme Options -> Advanced Settings -> Ads Manager, support shortcode and raw html.
Creating custom home page using Shortcode generator
Creating custom home page using Visual Composer
Make sure visual composer has been installed and activated.
The theme has custom post block element for Visual Composer to help you create custom layout for home page
You could change number of columns for that row (blue marked). Next, we will add post block element to colum.
Creating an Infinite Home page
Resources & Credits
The following resources were used to create the theme.
- jQuery - http://jquery.com/
- FlexSlider - http://www.woothemes.com/flexslider/
- hoverIntent r6 - http://cherne.net/brian/resources/jquery.hoverIntent.html
- jquery.fitvid http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
- imagesloaded https://github.com/desandro/imagesloaded
- jQuery Cookies https://github.com/carhartl/jquery-cookie
- Bootstrap http://getbootstrap.com/
- tipsy https://github.com/jaz303/tipsy
- Jetpack by WordPress.com http://wordpress.org/extend/plugins/jetpack/
- Contact Form 7 http://contactform7.com/
- bbPress http://bbpress.org/
- W3 Total Cache
- WP Super Cache
- WP Review https://wordpress.org/plugins/wp-review/
- Regenerate Thumbnails https://wordpress.org/plugins/regenerate-thumbnails/
- YT Impressive like button (Yeah, i like this) by wpthms.
- YT Shortcode Generator by wpthms.
- YT Sidebar Generator by wpthms.
- YT Simple Post Views Tracker by wpthms.
Note: Most of images from demo are licensed under Creative commons for demo purpose only, some of them are stock photos (paid photo) and are not included in package. If you want to use those images, please respect the author's rights by buying them (stockphoto) or crediting the author. You could also find the image credit in every post from the demo.