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.

Important: You better to hit Options Reset at the bottom of Theme Options Panel after activing the theme at first time.

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
    • Main
    • Others (If available)
  • sample-theme-options-data.txt
  • sample-sidebars.txt
  • sample-widgets.wie

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.

  1. Import Dummy data (this xml file contains Menus, Pages, Comments, Posts Custom fields or Custom post types )
  2. Import Theme Options data ( sample settings for Theme Options)
  3. Import Sidebars Data (Sample Sidebars for Widgets)
  4. 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.

General Settings

Configure your site logo, site title/description and the other general settings. By default the theme uses site title as plain text logo

Interface Settings

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:

 

Overall

  • 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)

Header

  • 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

  • Footer Layout (Preview)
  • Footer columns (Number of columns in footer widgets area)
  • Footer credit info (Preview)

Blog Settings

General

  • 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)

Single Post

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

  • Archive Content/sidebar Layout
  • Archive Post Layout

Typography

Setting typography on your site, adding Google Font, Upload Custom fonts

Elements:

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
  • Header
    • Main menu
    • Main menu child level
  • Content
    • Entry title (Main Archive page)
    • Single Page/Post title
    • Sidebar widget's Headings
    • Home Brick Entry title
  • Footer
    • Footer Headings
    • Footer Elements

Google Font:

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.

  1. On Theme Options Menu Click Typography -> Google Font
  2. and Enable Google font.
  3. 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.

Custom Font:

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:

https://www.youtube.com/watch?v=xsM0mejkypw

 

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.

Styling Options

Customize Your site, changing background, color..

Overall

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.
Elements Color Schemes
  • 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

Header

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

  • Content Background

Footer

  • Footer Widgets Background
  • Footer Copyright info. Background Color

Woocommerce

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:

 

https://www.youtube.com/watch?v=VizGvKjWMCA

  • 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

API

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.

Connect

Configure your site's social media links (Preview)

Advanced Settings

Icons

Add your site favorite icon (favicon), Apple icons, Windows icons.

Login Area

Configure login area.

  • Change admin login logo
  • Link Color
  • Background

Maintenance

Take your site offline for the Maintenance, set the Lauch date for the coundown timer.

Ads Manager

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

Misc.

  • 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.

Backup Options

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.


Using Widget

There the following widgets came with the theme you can use to display content on sidebar

Ajax Posts by Category

Settings

Display Posts by category using Ajax

Output

Posts with thumbnail

Settings

Display Posts in various styles

Output

Smart Tabby widget

Settings

Allow you to place the other widget inside a tab

Note: this feature only works in wordpress backend -> Appearance -> Widgets

Output

Ads Full

Settings

Allow you to place large ads block to sidebar

Output

Ads 125

Settings

A set of 125px (width) advertisements

Output

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:

  • Button
  • Column
  • Alert box
  • Label
  • Progress bars
  • Panel
  • List Group
  • Google Maps
  • Post list
  • Slider
  • Tabs
  • Accordion

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!

For more information about localizing WordPress theme, refer to this article on smashingmagazine and this on wordpress codex page

 

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.


Tutorials

Header

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

Social networks

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

Setting

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

Create new menu

 

Default Menu with dropdown

-Add menu items to your menu by selecting from Posts/Pages/Categories or even a custom link

1.Default Dropdown
2.Output

Default Megamenu

Here is how it looks:

1.First add parent menu item (Features) and enable default mega menu from dropdown
2.Add Column and set column size
3.Add menu items for columns

News by Category Megamenu

1.Config news mega menu:

In below figure, we will add category social media as a parent and enable News by category mega menu from dropdown Mega menu

Add Menu item

2.Add descendant categories for news mega menu

3.Last step:

Set theme location

Screencast

https://www.youtube.com/watch?v=w0w4ehsmTzU

 

News ticker

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.

 

Hero Banner

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.

Content Area

Blog/Archive

Post Layout

To change post layout for Blog you could navigate to Theme Options -> Blog Settings -> General -> Blog Post Layout. We have two choices like these:

Default Layout

Classic layout

For archive pages such as category or tag, you could change the layout for posts in Theme Options -> Blog Settings -> Archive -> Archive Post Layout

Post Meta

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:

Style 1

Style 1:

Style 2

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.

Page Navigation

Two choices: Direction nav and Pagination nav

You could change in Theme options -> Blog Settings -> General

Accent Color for category tag

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.

Single Post

The following blocks are displayed after single post content, you could hide/show specific blocks in Theme Options -> Blog Settings -> Single

Sidebars/Widgets

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

https://www.youtube.com/watch?v=vS8D0aeVlbk

 

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.

 

More

Ads Manager

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

https://www.youtube.com/watch?v=iA38r-pmy_c

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

Here's an example of vertical posts block:

Horizontal posts block

OK, let's create a custom homepage
1.Just create a page and click this button to use pagebuilder

2. Cick this button to add a nested row

3.Popup window will show up, Just select row

4.Something will look like this:

You could change number of columns for that row (blue marked). Next, we will add post block element to colum.

5.Follow below step to add Posts Block

6.Popup settings for posts block will show up and look like the following figure, just select block style, direction, categories or tags...

Final result:

Creating an Infinite Home page

https://www.youtube.com/watch?v=niF4tUt_GT0

 


Resources & Credits

The following resources were used to create the theme.

Javascript

 

Wordpress plugin

 

  • 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.

Fonts

 

Icon

 

Photos

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.