If you are new to WordPress, you'd better to learn how to use WordPress first before using the theme at WordPress Docs.
1Installing 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.
2Import 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-data.xml (aka dummy data)
- Theme Options Data
- Typographies ( This directory contains predefined font combinations )
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 )
2.1 How to Import the sample data?
- You can find the sample-data.xml file inside theme package.
- 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 the sample-data.xml
- Click upload file and import,
- Wait a few seconds .
2.2 Importing sample Theme Option settings
Copying the content in option-settings.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.
2.3 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 WP Custom Sidebars, 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 sidebars-data.txt to field Sidebars data and hit Import Data. Existed sidebars won't be removed, just new sidebars will be added.
2.4 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.
2.5 Finish the rest of the configuration
2.5.1 Setting Menus
Now go to Apperance -> Menus , Click Manage Locations tab and assign menus to predefined locations by the theme
Remember to hit Save
2.6 Setting up the Homepage & Blog page (posts page).
Hero Banner only shows on Posts pages, if you have fresh installation of WordPress, no need to change anything in Reading Settings !
After done all of above steps, you could regenerate thumbnails with plugin Regenerate thumbnails.
3Using 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 Theme name or you can navigate through the shortcut link (Y) from admin menu . Discover it and continue to the next steps.
First, Have a look at Site Visualization Blocks before checking out Theme Options:
3.1 General Settings
Configure your site logo, site title/description and the other general settings such as default layout ( sidebar on the left or right), number of footer columns...ect.
There are some options like:
- Logo types
- Plain text site title + site description
- Image logo
- Image logo + site description
- Custom Logo (Where to upload image logo for the site)
- Boxed (narrow) layout
- Default Layout aka Main 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)
- Sidebar width
- Header Style (There are four styles supported by the theme)
- Top bar menu
- Left Top Bar
- Scrollfix Main menu ( Sticky main menu bar when scrolling)
- Social links Position ( You can display you social media links on top menu bar or main menu bar, you can also hide theme)
- Search (Global search in Main menu)
- Footer Instagram Feed (16 instagram feed display right before Footer area)
- Footer Layout (Full: Footer widgets + Footer credits, Half: Footer widgets, Small: Only footer credits)
- Footer columns (Number of columns in footer widgets area)
- Footer credits info
3.1.4 Hero Banner
There are five styles of Hero Banner for you:
- Default ( Static Post)
- 2 Static Posts
- Carousel Slider
- Bricks 1x2
- Bricks 2x3
3.2 Blog Settings
Post Layout (3 styles )
- Grid ( 3 items per line when page layout is fullwidth)
- Exclude Categories from Default Blog page (Page for posts)
- Ignore Sticky Posts on Posts page
- Hide Post thumbnail of Formats (You could hide post thumbnail for specific post format you dont want to show up, this option applies to Default Post Layout)
- Excerpt output (Choose the way you handle the excerpt of articles on Posts page, manually using more tag (or using custom excerpt field separately ) to split apart of content as excerpt or let the theme split excerpt automatically)
- Excerpt length for default blog archive
- Pagination style: numeric or direction navigation.
- Show/hide Read more button
- Show/hide Share buttons (three small icons Twitter, Facebook and Pinterest) (also shows at the top left of single article)
- Show/hide Post format icon. This option only applies to Post Layout Grid
- Post meta info
Preview of Post on main page:
3.2.2 Single Post
- Layout (Overwrite default layout)
- Hide Post thumbnail of Formats (Specify which which post formats you don't want to show the post thumbnail (featured image))
- Related articles (Three related articles at the top of single post, retrieve by same tags)
- Share Buttons (Right below the post content)
- Manage blocks after single post (This option allows you to show/hide/reorder blocks after single post content such as You might also like, Next/Prev Posts Navigation, Author Meta info, Comment area)
Preview of single post:
3.2.3 Archive pages (category, author, tag...)
- Layout (Change page layout for archive)
- Post Layout ( three styles of post layout as in Main blog)
Setting typographies 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. There are some examples of Font Conbinations inside the download page, you could import via Theme Options -> Backup and Restore.
Keep hovering over the dropdowns for more information.
- Headings h1, h2, h3, h4, h5, h6 (Default for all headings)
- Body font
- Top Bar
- Main Menu
- Main menu child level
- Alternative font ->( This option will apply to category meta info and selector .alt-font )
- Sidebar widget's Headings
- Footer Headings
- Footer Elements
- Footer Credit
3.3.2 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.
- 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.
3.3.3 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 or download at here
Inside the webfont package, you could find .EOT, .TTF, .SVG, .WOFF, just upload over media uploader and specify right files for required fields, choose name, font weight and font style, like the following figure:
After done, hit save and refresh to update font family for typography options in Elements then you will be able to pick custom font.
Category meta info is a custom font named Journal, you can download webfont here for free.
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.
3.4 Styling Options
Customize Your site, changing background, color for elements such as text color, link color, menu link color..
Configure Styling rule for overall elements.
- Built-in Skins (Change site color schemes)
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
- Body Background Color for Boxed Style only apply when you turn on Boxed-layout
The following rule will affect to Top Main Menu Nav & Top Secondary Nav Menu
- Header Background
- Top Menu colors
- Main Menu colors
- Content Background
- Content colors
- Sidebar colors
- Footer Widgets Background
- Footer Widgets colors
- Footer Copyright info. Background
- Footer Credit colors
The theme supports selling products using Woocommerce Plugin, this Option Panel will control an appearance of Shop page, single Product page... ect.
- Product per page ( Main shop page ) - The number of product item on Main Product archive page
- Mini cart (on Main Menu)
- Single product tabs
- Related product ( Single product )
- Add to cart button ( Product archives )
- Sale badge (Product archives)
For more information of Woocommerce, check out plugin's author documentation
3.7 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 those display on the top of site (Main Menu or top menu and Social Media Links Widget)
3.8 Advanced Settings
Add your site favorite icon (favicon), Apple icons, Windows icons.
3.8.2 Login Area
Configure login area.
- Change admin login logo
- Link Color
Take your site offline for the Maintenance, set the Lauch date for the coundown timer.
3.8.4 Ads Manager
Configure advertising banners on you site
Turn off Media auto-resizer by theme to resize mannually from Setting -> Media. Adding Custom Code to Header/Footer, eg: Google Analytics (or other) tracking code.
3.9 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.
There the following widgets came with the theme you can use to display content on sidebar
Posts with thumbnail
Display Posts in various styles
Smart Tabby widget
Allow you to place the other widget inside a tab
Allow you to place large ads block to sidebar
A set of 125px (width) advertisements
And these widgets
- Social Media Links (Widget displays social media links using links from theme options -> Subscribe & Connect -> Connect )
- Instagram Feed - Set of instagram images from your IG
- 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
5 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 the theme)
5.1 Using Jetpack plugins.
5.1.1 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
5.1.2 Tiled Galleries
Tiled Galleries module from Jetpack allows you to add multiple style of galleries, you need to active it in Settins under Jetpack menu on admin sidebar ( just like infinite scroll ). Learn more about
using this module here
Also checkout the whole documentation of Jetpack here
5.2 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.
5.3 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.
5.5 Using Theme's plugins
After installing the theme, you need to install necessary plugins for the theme from admin notices.
5.5.1 YT Impressive like
This plugin will add a like button on every single post.
5.5.2 YT Simple Post Views Tracker
This plugin will Track and Display number of post view.
5.5.3 YT Sidebar Generator
This plugin will create unlimited sidebars.
5.5.4 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:
6Translating 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.
Please checkout our youtube channel for more screencast tutorials!
Get to know YeahFramework!
- Installing WordPress theme
- Import Dummy data
- Import/Backup/Restore Theme Options data
- Creating Menu and manage Theme Locations
- Setting up Front page and post page
- Using Widgets
- Using Post Formats
- Using Sidebar Generator
- Using Shortcodes Generator
Creating a Post
Using theme widgets
Playing with theme options
8 Resources & Credits
The following resources were used to create the theme.
- jQuery - http://jquery.com/
- FlexSlider - http://www.woothemes.com/flexslider/
- jquery.fitvid http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
- jQuery Cookies https://github.com/carhartl/jquery-cookie
- Bootstrap http://getbootstrap.com/
- tipsy https://github.com/jaz303/tipsy
8.2 Wordpress plugin
- Jetpack by WordPress.com http://wordpress.org/extend/plugins/jetpack/
- Contact Form 7 http://contactform7.com/
- W3 Total Cache
- WP Super Cache
- 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.