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.
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 some dummy content to your site to help you get started with the theme .
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 Adding 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.
2.3 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
For one page menu, you could override default menu with sections (rows) title when creating one page. have a look at the following figures for more information:
Repeat above steps for the other sections you wish to use as anchor menu item.
After done setting the section, scroll to Page Settings and enable one page mode, don't forget to set the page template 100% width for one page.
2.4 Setting up the sidebars.
By default ,Theme comes with pre-defined sidebars ( Eg: Main 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.
2.5 Setting up the Homepage & Blog page (posts page).
You can easily use a static page as a homepage . just go to Settings -> Reading. Have a look at the below figure.
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 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.
3.1 General Settings
Configure your site logo, site title/description and the other general settings.
3.2 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:
- Boxed (narrow) layout
- 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)
- Scrollfix Main menu ( Fix the main menu bar on scrolling)
- Social Sharing buttons (Displays right below Hero Banner/Posts/Page title)
- Music Player ( Site music player which displays on the right of main navigation menu )
- Music files (Add/Remove songs from Music Player)
- Music Autoplay
- Footer Layout (Preview)
- Footer columns (Number of columns in footer widgets area)
- Couple Tweets (Displays before Footer area. You will need to enter Access token and Consumer keys under Subscribe & Connect -> API for retrieving tweets.) (Preview)
- Bride Twitter Username
- Groom Twitter Username
- Footer Logo (Preview)
- Footer Messages (Right below Footer logo)
- Footer Social Media Links (Enter links under Subscribe & Connect -> Connect)
- Footer credit info (Preview)
3.2.4 Hero Banner
Where you config the hero banner for Front Page (It only shows up on Front Page only) including:
- Bride Name
- Groom Name
- Couple image
- Hero Slider
- Hero Slider images
- Hero Timer
- Wedding Date
- Wedding Time
- Show Wedding Date/Time as Live Timer or Static Date
- Type of live Timer: Countdow or Countup, for instance, in our demo use count up for married page to count the number of days since event occurs.
- Hero Message
- Message: A small text before/after the Hero live timer
3.3 Blog Settings
- Exclude Categories from Default Blog page (Page for posts)
- Excerpt output
- Excerpt length for default blog archive
- Pagination style: numeric or direction navigation
- Show/hide Read more button (Preview)
- Blog Style (Timline or Classic)
- Post meta info
3.3.1 Single Post
The following section can be hidden or shown on single post
- Narrow style for fullwidth layout
- Featured image (Post thumnbnail)
- Author Meta info.
- Comment box
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, h4, h5, h6 (Default for all headings)
- Body font
- Hero Banner
- Couple First Name
- Couple last Name
- 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
3.4.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.4.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.
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.
3.5 Styling Options
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.
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
The following rule will affect to Main Menu Nav
- Active Menu item image
- Header Background
- Content Background
- Footer Background Options - General Background for footer area including footer widgets and footer copyright info.
- Footer Widgets Background
- Footer Copyright info. Background Color
3.6 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
3.7 Advanced Settings
Add your site favorite icon (favicon), Apple icons, Windows icons.
3.7.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.
- 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.
3.8 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
- 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
5Using 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)
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 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.
5.3 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.4 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.
5.5.1 YT Impressive like
This plugin will add a like button on every single post. After activating, you could find an option in -> Blog Settings -> Post meta info, just check to Like Button
5.5.2 YT Simple Post Views Tracker
This plugin will Track and Display number of post view. After activating, you could find an option in -> Blog Settings -> Post meta info, just check to View counter
5.5.3 YT Sidebar Generator
This plugin will create unlimited sidebars. After installing and activated, you could create as many sidebar as you want in Admin Sidebar -> Appearance -> Sidebars, then you're able to choose your custom sidebar in page settings when creating/editing page! Don't forget to put some widgets you wish to display in custom sidebar in Appearance -> Widget and look for the sidebar you've just created!
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.
For more information about localizing WordPress theme, refer to this article on smashingmagazine.
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
6.1 Setting up RSVP form
6.2 Using Theme Elements with Visual Composer
6.3 Setting up the whole site
7 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
7.2 Wordpress plugin
- 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.
- Lineicons http://designmodo.com/linecons-free/
- Font Awesome http://fortawesome.github.io/Font-Awesome/
- freepik http://freepik.com
- findicons http://findicons.com
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.