Happy Kids - Premium Children WordPress Theme

# Happy Kids

## Premium Children WordPress Theme

- Created: 03/30/2013
- latest Update: 07/18/2015
- Theme version: 3.3.0
- Manual version: 3.0.1
- By: Creative Web Solutions
- Email: support@cwsthemes.com

Thank you very much for your purchase. This guide will walk you through every aspect of setting up your new website. If you ever have any questions, please kindly send us e-mail. You can also follow us on Twitter and Themeforest to keep track of all our theme updates and future themes.

WooCommerce! Please note, in case of importing WooCommerce demo content, don't forget to regenerate thumbnails so that all your product images would look the same as shown on our demo site. The default size of all product images is 200 x 200px.

### Theme Installation

Installing your new theme is an easy process. The steps bellow will guide you through:

1. Download the ZIP package from Themeforest Dashboard and Unzip it.
2. Inside you will find the file named `happykids.zip`.
3. Log in into your Wordpress Dashboard and click `Appearance > Themes` tab.
4. Next click the `Install Themes` button, then click `Upload`.
5. Click `Browse` and locate the above mentioned happykids.zip, click `Install Now`.
6. After the theme has been installed click `Activate Theme` , your new theme is set up and ready!
7. If you prefer to manually upload the theme via FTP you should unpack happykids.zip into `Happy Kids` folder and transfer this folder into /wp-content/themes directory on your FTP, so your FTP path should be /wp-content/themes/.

### One Click Demo Import

Save your time! One click demo import content is already implemented into this theme!

1. Activate your theme.
2. Install all the bundled plugins.
   Click "Begin installing plugins":

   Choose all pluins, select "Install" and click "Apply" button:

   Here's installation result message:

   Now you should activate the plugins:

   To begin importing demo content click Tools -> Import -> CWS Demo Importer:

   Click the "Start demo content importing" button. Please note, if you wish to import the woocommerce demo content, install the plugin first.

   The import results should look like this:

   That's all, your demo content is setup and the site is ready to use.
3. Final step is to import Revolution Slider demo content:
   Click "Revolution Slider" -> "Import Slider":

   Slect the dummy file and click "Import Slider" button:

   Result should be like this:

All done! Your website should look the same as the demo one!

### Theme Customization

Our theme supports child-themes and includes a child theme (called "happykids-child") in the package.
If you plan to customize any page template, stylesheet or any other theme files we highly recommend that you use a child theme.

A child theme is a theme that inherits the functionality of another theme, called the parent theme. Child themes allow you to modify, or add to the functionality of that parent theme. A child theme is the best, safest, and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes. Instead of modifying the theme files directly, you can use a child theme and override within.

Child theme usage gives you a lot of advantages:

- Safe theme updates
- Easy to Extend
- Fallback Safe
- and much more

There's a nice article explaining when you should use a child theme.

### Options Panel

Happy Kids comes with a very powerful, intuitive and very easy-to-use Theme Options panel. You can access the options panel by logging into the WordPress dashboard and clicking the "HappyKids" tab, located under the "Settings" tab. With the help of our Options Panel you can customize our theme's look and functionality according to your needs. Settings like logo, color scheme, patterns, page layouts, typography, social links and many other options are easily setup with its help.

Here's a brief preview of the panel's options:

- General Settings - here you can upload logo and favicon, add Google analytic and tracking code

- Display Options - various menu options and settings, like main menu positioning, widgets look, breadcrumbs etc.

- Styling Options - this tab helps you to customize look and feel of your new website. Here you can choose the right color scheme, patterns, background etc.

- Layout Options - assignment of default page, footer, benefits, sidebars and new sidebar generations.

- HomePage - here you can customize your homepage settings: slider type, benefits area, slogan.

- Fonts - this section gives you the opportunity to customize your theme's font type, color, size, weight etc.

- Translations - custom translator, which will help you edit some website titles which are not editable, using a standard WordPress methods.

- Socials - everything about social accounts of your website.

### Content Management

Content management of our theme is divided into two parts: CWS Builder and Shortcode Generator.

- CWS Builder - we build this plugin so you can create a visual grid of your page and fill it with the needed content. Drag and drop, cloning of its design blocks and assigning specific to each block setting are among its features. Design blocks are divided into two groups - rows and modules. Currently Text, Tabs, Accordions modules are supported.
- Shortcode Generator - our theme utilizes a very powerful and easy-to-use shortcode generator. It will help you to generate various content and insert it into your website.

These two modules work fine with each other and you can insert any shortcode into a grid cell, created by the CWS Builder:

### Portfolio

Portfolio Setup

Happy Kids theme comes with various portfolio pages. All thumbnail images are automatically resized according to one of the following page layouts:

- 4 Columns
- 3 Columns
- 2 Columns
- With Sidebar
- With Double Sidebars
- Full-width

Here are instructions for creating a portfolio page:

1. First, let's create a Portfolio category that will be used for your portfolio items. Any category can serve as a filter, so you have to create some categories if you plan to create a filtered gallery.
2. Log into your Wordpress dashboard and click Portfolio > Categories.
3. Enter a category name and click Add New Category.
4. Now you are ready to start creating portfolio items. Click Portfolio > Add Portfolio Item.
5. Name this item and make a brief description in the content section.
6. Assign a "featured image". If you want to override the popup image which you've just set as featured, you should fill in the "Custom URL" field. The popup item can be an image, youtube video, flash movie or iFrame. Here are samples to show how these URL's should look:
   - Image: http://www.yourdomain.com/wp-content/uploads/project1.jpg
   - YouTube: http://www.youtube.com/embed/L9szn1QQfas?autoplay=1
   - Flash: http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf?width=792&height=294
   - Vimeo: http://player.vimeo.com/video/8245346
   - iFrame: http://www.apple.com?iframe=true&width=850&height=500
7. Now insert the URL for the popup item (see examples above) into the 'Custom URL' field. If you leave it empty, the featured image will be used as a popup.
8. Check the "Use direct URL instead of the popup" checkbox in case you'd like to open the URL on a new page.
9. Repeat those steps for creating as many portfolio items as you wish.
10. The next step is to create a new Portfolio Page which will show your portfolio items you just created. Click Pages > Add New and insert the portfolio shortcode using Shortcode Generator into the content.
11. Now you can select the sidebar position located at the bottom of the page and save your changes.
12. That's all, your portfolio page is ready!

### Slider

Our theme uses a very powerful Revolution Slider plugin. The slider's documentation may be found here.

### Contact Page Setup

Happy Kids is fully compatible with a list of popular plugins, with which help you can build any contact form, widget, or google map.
The list of the plugins is described bellow:

- Contact Form 7
- Really Simple CAPTCHA
- WP Flexible Map By WebAware

Our demo contact page was build with the help of the above plugins.

### Social Networks Setup

With the help of our Theme Options panel you can add any social network as you wish. Image bellow describes the way you can do it:

In case you don't know where to find the Twitter API keys and tokens, the steps bellow will help you create them:

Twitter Setup

- The first thing that you will need is a Twitter account. Note that the account that you create need not be the one that you are retrieving status updates (tweets) from.
- Go to https://apps.twitter.com and login with your developer account, or your new, regular account. If you are doing the latter, Twitter will automatically create a developer account for you from your regular one.
- Hover over your username (upper right) and click "My Applications".
- Click "Create a new application" and enter the necessary information. For the "Callback URL", enter the URL of the website on which you will be using this plugin. NOTE: the "Callback URL" is optional and is only necessary if you plan to use callbacks.
- Once your Application has been created, click on "Create my access token", at the bottom of the "Details" tab on the application's page.
- 6. Now, when you have all of the necessary keys, secrets and tokens necessary for using Twitter plugin, open the "Socials" tab within your Options Panel and fill in the required fields located under "Twitter App Credentials" section.

That's all, your twitter setting are ready to use.

### Multi Language Setup

Our theme supports WPML plugin (wpml.org) with its help you can easily translate your website into any language you wish. In case you need to translate your website, you should install the plugin and activate it. Then you can customize the flag position and its look, save your settings and the flag appear on your website:

### WooCommerce Setup

Our theme supports WooCommerce plugin, so you can just install and activate the plugin to start using your shop.

Please note, in case of importing the demo content for WooCommerce, don't forget to regenerate thumbnails so that all your product images would look the same as shown on our demo site. The default size of all product images is 200 x 200px.

### JavaScript

This Theme is bundled with the following Javascript files.

1. jquery.fancybox.js. Refer to the author's documentation for additional notes on how to use it.
2. owl.carousel.min.js Refer to the author's documentation for additional notes on how to use it.
3. jquery.mousewheel-3.0.6.pack.js Refer to the author's documentation for additional notes on how to use it.
4. isotope.pkgd.min.js Refer to the author's documentation for additional notes on how to use it.
5. jquery.retina.js Refer to the author's documentation for additional notes on how to use it.

### Sources and Credits

In our work we've used the following resources:

- jQuery Plugin: Fancybox - http://fancybox.net
- jQuery Plugin: Twitter(tweet.js) - http://www.queness.com/post/8567/create-a-dead-simple-twitter-feed-with-jquery
- Theme Options Framework - http://reduxframework.com/
- Maps - Maps.Google.com used in live demo

Once again, thank you so much for purchasing our Theme. We'll be glad to help you in case of having any questions relating to it. We'll do our best to assist and help.