Kids WordPress Theme

Detailed Documentation

Created: May 22rd, 2017
Latest Update: May 25th, 2017
By: lunartheme
Email: lunarthemex@gmail.com

For support please check out our Lunartheme SUPPORT

INTRODUCTION

We would like to thank you for purchasing Kids! We are sure that you have made an excellent choice in selecting it. You have also agreed that this item is unique among tons of Premium WordPress themes. Before getting started, please make sure that you check out our Kids WordPress Theme documentation files. We offer all kinds of useful information that you need to use for your purchased item. Besides, Knowledgebase, Articles, Forum Search in our Free support center are available for you to fully satisfy your questions. Thank you, we hope you enjoy our theme. Kids can only be used with WordPress and we assume that you already have WordPress installed and ready to go. If you haven't, please follow the below WordPress information section to see our section on WordPress to help you get started.

Kids is an extraordinary WordPress theme which is crafted for baby fashion stores & other related niche sites. This brilliant design is fine-tuned the smallest elements to ensure a free-from-flaws template which is suited for all eCommerce store websites for selling kid products.

To install this theme, you must have a working version of WordPress already installed. If you need help with installing WordPress, follow the instructions in WordPress Codex. Below are all the useful links for WordPress users:

WordPress general - General information about WordPress and how to install it on your server
First steps with WordPress - A detailed document with many topics about how to begin WordPress
WordPress FAQs - Providing answers to the most popular questions about WordPress

To use Kids, your server must be running WordPress 4.3 or higher, PHP5.5 or higher, and mysql 5 or higher. Below is a list of items you should ensure your host can comply with.

Please make sure that your server has the minimum requirements to run WordPress at least
Always check to ensure that you have updated the latest version of WordPress
You can download the latest version of WordPress from offical WordPress from offical website
Always create secure passwords for FTP and Database

THEME INSTALLATION

To install Kids you must have a working version of WordPress already installed. Make sure your installed Wordpress version is 4.3 or higher. You also need to have PHP 5.5 or higher versions and MySQL 5.0 to function correctly. If you need help installing WordPress, follow the instructions in WordPress Codex.

When you purchase Kids, you need to download our theme package from Themeforest.

Extract our full package and you will see all files and folders, including 02 .zip files and 03 folders. Below is a full list of everything that is included when you download our theme, along with a short description of each item.

Kids.zip - This is the theme file you need to add to install theme
Kids-child.zip - The child theme for users who want to make code changes
Plugins folder - Contains the necessary plugins used for Kids theme

Kids-shortcodes.zip - A plugin which includes all shortcodes for theme and helps you build your own pages
js_composer.zip - Visual Composer - the most popular page builder for WordPress
Revslider.zip - The Revolution Slider which creates beautiful image sliders for your site

Documentation folder - Contains document providing you basic guides to use Kids theme
Sample-Data folder - Contains 01 .xml file and 01 .zip file

Kids.wordpress.xml - Includes all dummy data
Home-Kids.zip - Includes Revolution Slider setting data of Homepage

Please follow these steps below and you can completely install Kids in a few minutes.

Step 1: Log into your WordPress Admin

Step 2: Go to Appearance >>> Themes >>> Add new

Step 3: Click on Upload Theme >>> Choose File, choose Kids.zip

Step 4: Click on Install now button and then wait while the theme being uploaded and installed

Step 5: Finally, click the Activate link

1. Are You Sure You Want To Do This?

If you get the “Are You Sure You Want To Do This” message when installing Kids via WordPress, it means you have an upload file size limit. Install Kids via FTP if this happens, or call your hosting company and ask them to increase the limit.

2. Upload size limit

If you get this message when you install our theme on localhost, here are solutions for you:

Through php.ini file

Step 1 - Find the php.ini file on your host

Step 2 - Find the following lines and adjust the value. We suggest to change the upload file limit to 10M

Through function.php

You may add the below mentioned code in the functions.php file of your theme

@ini_set( 'upload_max_size' , '64M' );
@ini_set( 'post_max_size', '64M');
@ini_set( 'max_execution_time', '300' );

Through .htaccess method

You may try modifying the existing .htaccess file in the root directory or creating a new one.

Add the following code in the existing or new .htacess file:

php_value upload_max_filesize 64M
php_value post_max_size 64M
php_value max_execution_time 300
php_value max_input_time 300

Step 1 – Log into your hosting via an FTP software

Step 2 – Unzip the Kids.zip file, and ONLY use the extracted Kids theme folder

Step 3 – Upload the extracted Kids theme folder into /wp-content/themes/

Step 4 – Log into your WordPress Dashboard, go to Appearance >>> Themes

Step 5 – Click Activate link to enable Kids theme

INSTALL DEMO DATA

There are also 02 different ways to help you import Kids demo content. However, each way has its own purposes which are worth noticing:

Import All Demo Content: If you want to import OUR entire demo data using one click demo, all YOUR current data will be dissappeared. So, before implementing this step, start backup your database to ensure all the important information will be reserved

Import Manual Demo Content: If you choose to import manually some data from other websites, usually you have to import an XML file (called Sample Data and included in our package)

Please note these important Items about The Demo Content

Images - Our demo images are not included because they are licensed stock items that are not allowed to be shared. So, they will be modified by placeholders. You need to contact the authors to get permission in case you want to use them for your commercial or non-commercial projects.

Below are the detailed guides for each method:

The easiest way to import our demo content is to use our One Click Importer. To import our demo content, please see the steps below.

The first way:

Step 1: Log into your WordPress Dashboard

Step 2: Go to Kids >>> Kids Welcome

Step 3: Scroll to bottom, you will see Sample Data tab, click on Install to install sample data

Step 4: The process of importing dummy content may take some minutes, do not interrupt/cancel the importing process

Step 5: You can see Plugins Required tab and Plugins Recommended tab. These tabs include the required plugins or the recommended plugins

Unyson plugin: A free drag & drop framework comes with a bunch of built in extensions that will help you develop premium themes fast & easy

Visual Composer: The most popular page builder for WordPress

Kids-shortcodes: A plugin including all shortcodes for theme which helps you build your own pages

Kids Toolkit: Including Kids core modules and functions

Revolution Slider: The Revolution Slider which creates beautiful image sliders for your site

WooCommerce: An e-commerce toolkit that helps you sell anything beautifully

YITH WooCommerce Wishlist: YITH WooCommerce Wishlist allows you to add Wishlist functionality to your e-commerce

Instagram Feed: Beautifully clean display, customizable, and responsive Instagram feeds

Contact form 7: Just another contact form plugin. Simple but flexible

Step 6: Done! You can go to visit your site

The second way:

Step 1: Log into your WordPress Dashboard

Step 2: Go to Tool >>> Demo Content Install, click on Install to install sample data

Step 3: The process of importing dummy content may take some minutes, do not interrupt/cancel the importing process

Step 4: Done! You can go to visit your site

This is the second way for you to import our demo content. Continue reading below information to learn how to manually import demo content.

Check The Following Plugins Before Import

Unyson plugin: A free drag & drop framework that comes with a bunch of built in extensions that will help you develop premium themes fast & easy

Visual Composer: The most popular page builder for WordPress

Kids-shortcodes: A plugin including all shortcodes for theme which helps you build your own pages

Kids Toolkit: Including Kids core modules and functions

Those are required plugins to use this theme, besides there are some recommended plugins including Revolution Slider, Contact Form 7, Instagram Feed, WooCommerce and YITH WooCommerce Wishlist.

How to Install Plugins

The first way

Once you activate Kids, you will see a notification message to install and activate the required and recommended plugins.

Step 1: Click on Begin installing plugins

Step 2: Select All plugins >>> Install, then click on Apply

Step 3: Click Activate to enable the plugins you want to use

The second way

Once you activate Kids, navigate to Kids Welcome to install these required and recommended plugins

Step 1: Navigate to Kids >>> Kids Welcome

Step 2: Click on Plugins Required, then click on Install to start install these required plugins

Step 3: Click on Plugins Recommended, then click on Install to start install these recommended plugins

Where To Find Demo Files

Before moving straight to the point, there are some notes worth checking:

Make sure you have installed all recommended plugins before importing sample data
In /Sample Data/ folder of our package, you can find 01 .xlm file which are:

Kids.wordpress.xml All Data - sample demo data of some pages from our demo
Home-Kids.zip Revolution Slider Settings of Homepage

The import process may take several minutes due to large data and your server capacity. If your server setting "Max Execution Time" is too low, increase it (as your hosting provider). Please do not close the browser until it finishes. If it fails, you can run this process again until seeing the "Success Message".
Demo Images are not installed due to copyrighted licenses.
If you have to run the process more than once, menu items may be duplicated. Just go to Appearance >>> Menus and edit/delete Menu items.
Feature images are not imported (We use licensed photos on our demo page). Instead you will see placeholder images.

How To Import XML Files

To install sample data, please following these steps below:

Step 0 - Make sure you have installed Kids theme and all required & recommended plugins

Step 1 - Go to Tools >>> Import, then click on "Install now" in WordPress and wait until installation is finished

Step 2 - After having been completely installed, continue to click on Run Importer

Step 3 - Click on "Choose File" button and import Kids-wordpress-import.xml file. Do not cancel the importing process

Step 4 - When you see the message "All done. Have fun!", it means the import process is done. Note: you may need to re-import the second time if the data is large

And now you finished!

Step 5 - Now you have to set Homepage, Menu, Widgets for your site

NOTE: You can get the .xml file by going to Tools >>> Export >>> Choose file and click "Download Export File". In the screenshot above, we have exported all content demo data. Then we got the file named "content-export.xml"

How To Import Revolution Slider

To install revolution slider, please follow these steps below:

Step 1: First, go to Revolution Slider >>> Import Slider

Step 2: Choose .zip file to upload and import. Click on "Import Slider" to finish!

Step 3: In case you want to export slider from a website, you can go to Revolution Slider, then hover to the slide that you might want to export data. Click on the down arrow sign >>> Export Slider

HOW TO

These are necessary steps for you to setup your site.

1. Upload Logo

To upload your logo, navigate to Theme Settings. Then follow the steps below:

Step 1: Log into your WordPress Dashboard

Step 2: Go to Appearance >>> Theme Settings >>> Header Setting

Step 3: On Header Setting tab, you will see Logo settings. There are 02 logo types for you to select, either Text logo (like the image) or Image logo. For Text logo, you can customize content and select options for logo typography

Step 4: If you want to use Image logo, please click on the button and upload jpg, jpeg, png or gif image for best performance

Step 5: If you want to make retina logo, you can use a big logo (2x times your regular logo dimension)

Step 6: There are also options to adjust logo width. This allows you to fine tune the placement of your logo

Step 7: Click on Save all changes and see them on front-end

2. Upload Favicon

To upload your favion, navigate to Theme Settings, then follow the steps below:

Step 1: Go to Appearance >>> Theme Settings >>> General Setting

Step 2: Scroll to the bottom of page - Favicon section
Favicon is a small icon image at the topbar of your browser. The size should be a 512x512px png image.

1. How To Create A Menu

Follow the below steps to create a new menu:

Step 1: Log into the WordPress Dashboard

Step 2: Go to Appearance >>> Menus , then click on Create a new menu at the top of page

Step 3: Enter the name for your menu in the Menu Name box

Step 4: Click on Create Menu button

Your menu is created, now you can add pages for menu.

2. How To Add Pages To Your Menu

You can choose pages to add to your menu in Pages section in the left corner. Besides, you also can add posts, custom links or categories to menu.

Step 1: Click on Pages section on the left

Step 2: Select View All to see all published pages on your site

Step 3: Select pages you want to add to menu by check the box and click on Add to Menu

Step 4: If you want to add items to menu by using custom link, click on Custom link, fill URL link and Link text, then click on Add to Menu

Step 5: To create sub-menu of the parent menu, just drag and drop items to the right side a distance compared with the parent menu

Step 6: Click on Save menu button once you have added all items you want to menu

Step 7: You have to assign your menu to the location you want

3. How To Assign A Menu To a Location

After created a menu, you have to assign it to one of the pre-defined locations. Follow the below steps to assign a menu to a Location:

Step 1: Go to Appearance >>> Menus and click on Manage Location

Step 2: Assign each Theme Location with a menu, you can assign a menu to several Theme Locations

Step 3: Click on Save Changes button

Menu is displayed on front-end

4. How To Create Mega Menu

Kids supports Mega Menu feature. The Mega Menus are available for the first level items of menu in "Main Menu" area. Follow the steps below to create a Mega Menu:

Step 1: Only first level items can enable the Mega Menu. Click the arrow icon ▼ next to any parent level menu item to expand the option box

Step 2: Check the box "Enable Mega Menu"

Step 3: Now you need to add child items for the first level item. To make sub-menu, drag and drop the menu item to the right, like the image below

Step 4: Now, you need to add child items for the second level items, drag and drop the menu item to the right, like the image below

Step 5: Click on Save Changes button

1. How To Add A New Post

To create a new post, follow the below steps:

Step 1: Log into your WordPress Dashboard

Step 2: Go to Blog Posts >>> Add new

Step 3: Enter your post title and contents in the text editor

Step 4: You need to select post format, category and add tags

Step 5: Upload a featured image for your post

Step 6: Scroll down to Post options box, you will need to setup some options about layout, metadata, format. Please check check Post Options for more information

Step 7: Click on Publish post

2. How To Add A Gallery Post

To create a gallery post, follow the below steps:

Step 1: Log into your WordPress Dashboard

Step 2: Go to Blog Posts >>> Add new

Step 3: Enter your post title and contents in the text editor

Step 4: You need to select "Gallery" post format, select category and add tags

Step 6: Scroll down to Post options box, click on Post format tab, you will see Gallery format and some other options

Step 7: Click on Add to gallery to select and upload images you want in the gallery

Step 8: Setup some options for your gallery:

Upload Gallery: Add images, audio, video... from gallery.

Gallery auto play: Yes or No. If you choose Yes, your gallery will play in auto. Default is No.

Fade animation: Yes or No. If you choose Yes, your gallery will have fade animation. Default is No.

Gallery speed: Customize the speed. Default is 300.

Gallery pagination: Show or Hide. If you choose Show, your gallery will be paginated. Default is Hide

Gallery navigation: Show or Hide. If you choose Show, your post will have gallery navigation. Default is Hide.

Step 9: Upload a featured image for your post

Step 10: Click on Publish post

3. How To Add A Video Post

To create a video post, follow the below steps:

Step 1: Log into your WordPress Dashboard

Step 2: Go to Blog Posts >>> Add new

Step 3: Enter your post title and contents in the text editor

Step 4: You need to select "Video" post format, select category and add tags

Step 6: Scroll down to Post options box, click on Post format tab, you will see Video source and video URL

Step 8: Setup some options for your video:

Video source: Select video source: video link, upload local file, video embed code

Video URL: You can only add link from Vimeo and Youtube

Step 9: Upload a featured image for your post

Step 10: Click on Publish post

4. How To Add An Audio Post

To create an audio post, follow the below steps:

Step 1: Log into your WordPress Dashboard

Step 2: Go to Blog Posts >>> Add new

Step 3: Enter your post title and contents in the text editor

Step 4: You need to select "Audio" post format, select category and add tags

Step 6: Scroll down to Post options box, click on Post format tab, you will see Audio source and SoundCloud URL

Step 8: Setup some options for your audio:

Audio source: Select audio source: Soundcloud link or upload local file

SoundCloud format URL: Insert Soundcloud link or link audio from other websites (option for format "Link" only, please fill in full http:// address).

Step 9: Upload a featured image for your post

Step 10: Click on Publish post

5. How To Add A Quote Post

To create an quote post, follow the below steps:

Step 1: Log into your WordPress Dashboard

Step 2: Go to Blog Posts >>> Add new

Step 3: Enter your post title and contents in the text editor

Step 4: You need to select "Quote" post format, select category and add tags

Step 6: Scroll down to Post options box, click on Post format tab, you will see Quote

Step 8: Setup some options for your audio:

Quote author: Fill the author name of the quote

Author quote URL: Add author link

Quote content: Fill the quote

Step 9: Upload a featured image for your post

Step 10: Click on Publish post

1. How To Create A Blog Page with Categories

Step 1: Log into your WordPress Admin

Step 2: Go to Blog Posts >>> Categories

Step 3: You will see all categories of posts you have created

Step 4: Click on any category you want. For example "Blog Grid". Here you can select Column such as 2, 3 or 4 columns, choose Blog styles including Large, Masonry, Grid, Medium for your blog listing

Step 5: Set up titlebar for blog page

Step 6: Click on UPDATE category

2. How To Setup Blog Category Page

To setup for your blog page, please go to Theme Settings and follow the below steps. All the changes that have been made in this 'Blog' section of Theme Settings will effect the entire website. That means if you make any adjustments in a certain page, it will overwrite options in Theme Settings.

Step 1: Log into your WordPress Admin

Step 2: Go to Appearance >>> Theme Settings

Step 3: Click on Blogs Setting tab, you will see blog setting options

Step 4: In Blog layout there will be options for you to setup layout, sidebar, style for blog

Blog style: There are 3 styles including large, grid, masonry

Content or excerpt: select to display content or excerpt on the blog

Excerpt length: The number of displayed excerpt words

Infinite scroll: You can use Pagination number to navigate to the next page

Categories filter: Show or hide

Title link: You can show or hide title link

Post date: Enable to show published date information

Number of Comments: Show the number of comments

Author: Show the name of author

Readmore link: Show the read more button

Step 6: Finally, Save changes

Front-end setttings

Blog Large

Blog Grid

Blog Masonry

To create a homepage, please follow the below steps:

Step 0: Make sure you created two new pages in WordPress (under Pages >>> Add new), and publish them. For example, we will call these “Home” (for the front, or Home, page) and “Blog”

Step 1: Go to Settings >>> Reading in your WordPress Admin

Step 2: Set "Front page displays" to a "Static Page"

Step 3: In Front Page, choose a page which will be your homepage and select a page for posts page

Step 4: Save changes

Sample Codes For Homepages

We provide you 02 emo pages, each comes with different style and purpose:

Homepage

You can insert the following code into the back-end's visual section:

[vc_row][vc_column][rev_slider alias="home_1"][/vc_column][/vc_row][vc_row full_width="stretch_row" equal_height="yes" content_placement="middle" css=".vc_custom_1495448071188{background-color: #ffffff !important;}"][vc_column width="1/2"][kids_service][kids_service_item kids_service_item_id="basr_885856704" title="Where does it come from?" img="1874"]It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed[/kids_service_item][kids_service_item kids_service_item_id="basr_350151699" title="Where does it come from?" img="1874"]It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed[/kids_service_item][kids_service_item kids_service_item_id="basr_1598538187" title="Where does it come from?" img="1874"]It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed[/kids_service_item][/kids_service][kids_empty_space kids_empty_space_id="basr_1652190797" height_desk_top="84px"][/vc_column][vc_column width="1/2"][vc_single_image image="1870" img_size="full" alignment="center"][kids_heading kids_heading_id="basr_458242979" title="On the birthday of the store !" h="custom" font_size="28px"][/kids_heading][vc_column_text]It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed[/vc_column_text][kids_button kids_button_id="basr_2132464084" align="center" btn_text="View more" btn_link="#"][/vc_column][/vc_row][vc_row][vc_column][kids_wc_listing kids_wc_listing_id="basr_1370599257" column="columns-3-2"][kids_wc_listing_item kids_wc_listing_item_id="basr_1001050867" cat_id="210"][kids_wc_listing_item kids_wc_listing_item_id="basr_2063276266" cat_id="227"][kids_wc_listing_item kids_wc_listing_item_id="basr_297945873" cat_id="209"][/kids_wc_listing][/vc_column][/vc_row][vc_row full_width="stretch_row" equal_height="yes" content_placement="middle" css=".vc_custom_1495447119787{background-color: #ffffff !important;}" el_id="section-banner-1"][vc_column width="1/2"][kids_empty_space kids_empty_space_id="basr_912778614" height_desk_top="96px"][vc_single_image image="1879" img_size="full"][/vc_column][vc_column width="1/2"][vc_column_text]
<p style="font-size: 22px; text-align: left; text-decoration: underline;"><strong>New Arrivals</strong></p>
[/vc_column_text][kids_empty_space kids_empty_space_id="basr_161350550" height_desk_top="17px"][kids_heading kids_heading_id="basr_94268418" title="Robots come {br}from the {{future}}" align="text-left" letter_spacing="0.1" hightlight_color="#2d8f9e"][/kids_heading][kids_empty_space kids_empty_space_id="basr_1064163742" height_desk_top="15px"][vc_column_text]
<p style="text-align: left; line-height: 173%;">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed</p>
[/vc_column_text][kids_empty_space kids_empty_space_id="basr_1165521779" height_desk_top="44px"][kids_button kids_button_id="basr_920091732" align="center" btn_text="View colection" btn_link="#"][/vc_column][/vc_row][vc_row full_width="stretch_row" equal_height="yes" content_placement="middle" css=".vc_custom_1495447130049{background-color: #ffffff !important;}" el_id="section-banner-2"][vc_column width="1/2"][vc_single_image image="1880" img_size="full"][/vc_column][vc_column width="1/2"][vc_column_text]
<p style="font-size: 22px; text-align: left; text-decoration: underline;"><strong>New Arrivals</strong></p>
[/vc_column_text][kids_empty_space kids_empty_space_id="basr_1145520616" height_desk_top="17px"][kids_heading kids_heading_id="basr_1309563306" title="Robot {br}{{dinosaurs}}" align="text-left" letter_spacing="0.1" hightlight_color="#fd403e"][/kids_heading][kids_empty_space kids_empty_space_id="basr_1046990492" height_desk_top="15px"][vc_column_text]
<p style="text-align: left; line-height: 173%;">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed</p>
[/vc_column_text][kids_empty_space kids_empty_space_id="basr_1830285727" height_desk_top="44px"][kids_button kids_button_id="basr_1062652595" align="center" btn_text="View colection" btn_link="#"][/vc_column][/vc_row][vc_row full_width="stretch_row" css=".vc_custom_1495447986202{background-color: #ffffff !important;}"][vc_column][kids_empty_space kids_empty_space_id="basr_131453937" height_desk_top="83px"][/vc_column][/vc_row]

Below is an example of WordPress theme with direct instruction for every section. This captures some main components in contributing a web page:

Search: You can also add more icons to Top Navigation such as Text Editor, Social, Widgets, Canvas Sidebar, Woocommerce Cart, Logo and Custom Menu by navigating to Theme Settings >>> Header Setting. Then scroll down to "Middle Header Section"
Primary/Main Menu: In order to change all the title in the main menu, you can go to Appearance >>> Menus (More information)
Logo: You can change logo by navigating Appearance >>> Theme Settings >>> Header Setting. Then scroll down to 'Logo' section (More information)
Page Content:This section of a web page plays the most important role partly because it contains visual block, content, image, video which are built by shortcodes in Visual composers or codes. It also occupies the largest part in a web page
Footer:Web page footer content most often conveys technical information. You can customize it by navigating to Theme Settings >>> Footer (More information)
Copyright text:This copyright text is in the footer of web page. You can go to Appearance >>> Theme Settings >>> Footer. Then scroll down to the 'Footer copyright text'
Social Accounts: To customize all the social links in page bottom, you can go to Appearance >>> Theme Settings >>> Your social then change the links

To install revolution slider, please follow the steps below:

Step 1: First, go to Revolution Slider >>> Import Slider

Step 2: Choose .zip file to upload and import. Click "Import Slider" to finish!

Step 3: In case you want to export slider from a website, you can go to Revolution Slider. Then hover to the slide that you might want to export data. Click on the down arrow sign >>> Export Slider

With Drag & Drop header builder, Kids will help you create these stunning headers in minutes.

What is Header Builder?

Header Builder is a unique Kids add-on allowing you to modify website header using visual drag & drop builder. Follow the steps below to know more details about Header Builder and how to create a new header.

Go to Kids >>> Header Builder

Header Drag & Drop Editor

In Layout Elements of the editor there are sections (Top header, Middle header, Bottom header) and columns. Every section represents website header area, which has its own settings and colors. Top and Bottom areas are optional. Every column represents a container for header elements with the corresponding position (e.g. right columns will display its elements at the right side of your website header). You just need to double-click or drag & drop sections or columns, they will be moved in the below.

You can add a new element into any column via Content Elements tab. You can see all available elements:

You can move, edit or delete every element (hover mouse cursor on it to see the options):

Header Elements

Header elements are flexible pre-built elements which can be placed into the header. Every header element has its own settings.

Logo Setting: Logo element shows any custom logo from Media Library. To edit Logo, hover mouse on logo element to see "pencil" button

Nav Setting: Navigation element shows main menu, which is set on Appearance >>> Menus. You can place only one Main Menu element into your header

Header Buttons Setting: Header Button element shows button. You can choose button type, add custom icon, select alignment, font size, item color, item hover color

Search: Search button shows search field. You can add search button into your header
Off-canvas sidebar: Off-Canvas sidebar is sidebar that can slide in and slide out of the page from both left and right to show all widgets in front-end page
Cart: Cart element is available only when WooCommerce plugin is activated. You can set cart icon and its size into your header

HTML Setting: HTML element allows to place any custom code in the header. Note that added code will be located inside
element

Header Settings

Header settings are affected on header appearance on all website pages by default. There are the following options:

Fixed Header: Fixed Header is the header that is always visible to users even when users scroll down (That means it will stay fixed to the top of the screen, whether you are scrolling or not). Turn YES if you want to enable.
Absolute Header: Absolute header means that the header will stay fixed to the top of screen, but if you scroll down, the header won't be visible.
Smart Sticky: Turn ON to enable smart sticky menu, it will always stay in your page when scrolling to the top and disappear when scrolling down.
Mobile Logo Image: Upload your logo here, 2x version is recommended for retina and smartphone display.
Logo width: Enter your logo width in px.

Header Template

Header template is a pre-defined layout of header elements. Using a header template is a good start to create your own website header.

Please note: When you apply any header template, all of your current header elements and settings will be overwritten.

HOW TO SET UP HEADER STYLE IN Theme Settings

All the changes that have been made in this 'Header' section of Theme Settings will effect the entire website. That means if you make any adjustments in a certain page, it will overwrite options in Theme Settings.

Step 1: Go to Appearance >>> Theme Settings >>> Header Setting

Step 2: Click on Default Header. You can select one of 4 predefined header types. The one you selected will be applied to all pages on your site

Step 3: Logo type: There are 02 logo types: Text and Image

Text logo:

Text logo content: Fill in the text you want to
Logo typography: Select font, font size, font weight and font color for your text logo
Letter Spacing (px): Fill in the value (px)

Image logo:

Upload logo: You need to upload image file from your computer
Retina logo: If you want to make retina logo, you can use a big logo (2x times your regular logo dimension)

Step 4: You can also adjust Logo margin top, right, bottom, left

HOW TO SET UP HEADER STYLE IN PAGE OPTIONS

To select header style for a specific page, go to the back-end of that page, then scroll to Page options, there will be Header style section for you to select. Follow the below steps to know more details:

Header 1

Front-end settings

To setup the top header, follow the steps below:

Step 1: Log into your WordPress Admin

Step 2: After created a new page, scroll to Page Layouts >>> Header style

Step 3: You only need to select Header 1 like the above image

Step 4: Note: You will have to upload logo and create a main menu

Step 5: Publish page and see front-end

Kids allows you to create unlimited number of sidebars. You can set each page with a different sidebar of your choice. Follow the next steps to learn how to set up your sidebar.

Step 0: Make sure that you install and activate Custom sidebars plugin

Step 1: Go to Appearance >>> Widgets

Step 2: Click on Add new sidebar to create a new sidebar, fill the name of sidebar you want

Step 3: Drag widgets into your sidebar and customize each widget

Step 4: In order that sidebar you have created is shown on individual page/post, follow these steps:

Open the post/page in WP admin
Scroll until you see Sidebar Picker on the right
You will see options to select the position of sidebar: Default, left or right sidebar, two sidebars or no sidebar
After that, select sidebar you have created in Appearance >>> Widgets in the below fields
Update or publish your page/post

With Footer Builder, Kids will help you create these different footers in minutes.

What is Footer Builder?

Footer Builder is a unique Kids add-on which allows you to modify website footer using Visual Composer. Follow the below steps to know more details about Footer Builder and how to create a new footer.

Enable Visual Composer

Step 1: Go to Visual Composer >>> Role Manager and check the box "footer_builder"
Step 2: Now you can set up your footer using Visual Composer! Please check Row (Visual Composer) for more information.

FILL WIDGETS FOR FOOTER

To fill widgets for Footer, follow the steps below:

Step 1: Navigate to Appearance >>> Widgets

Step 2: You will see sidebars which are footer 1, footer 2, footer 3, footer 4, footer bottom. Drag widgets you want into each footer

Step 3: You can set up Footer in Theme Settings, see the below sections to know more details

HOW TO SETUP FOOTER IN Theme Settings

All the changes that have been made in this 'Footer' section of Theme Settings will effect the entire website. That means if you make any adjustments in a certain page, it will overwrite options in Theme Settings.

To setup Footer, follow the steps below:

Step 1: Navigate to Appearance >>> Theme Settings >>> Footer tab to display Footer options

Step 2: If you want to show "Go to top button", you only need to turn ON. Then, select sidebar layout for your footer including 1, 2, 3 or 4 columns

Step 3: After that, you need to Choose main footer layout like our demo image

Footer Styles

FEATURES

Sure that you have installed Unyson plugin - A free drag & drop framework that comes with a bunch of built in extensions that will help you develop premium themes fast & easy. To customize the appearance of your site, go to Appearance >>> Theme Settings to configure. Below is the detail of how to use those functions.

General settings

Step 1: Navigate to Appearance >>> Theme Settings >>> General settings

Step 2: Show or Hide Breadcrumb

Step 3: You can show/hide logo for default login page by uploading logo for page

Step 4: You also can show/hide page loader

Step 5: For Header code, Footer Code, custom CSS you can enter custom CSS or fill Google Analytics tracking code

Step 6: Finally, Save changes

Icons

Favicon - Favicon is a small icon image at the topbar of your browser.

Layout

Step 1: Navigate to Appearance >>> Theme Settings >>> Layout

Step 2: Layout tab in Theme Settings is where you can customize content width. You can choose content width in the range from 940px to 1200px

Step 3: Finally, Save changes

Blog

This is all settings for blog category page. All the changes that have been made in this 'Blog' section of Theme Settings will effect the entire blog category page. It means if you make any adjustments in a category certain page, it will overwrite options in Theme Settings.

Step 1: Navigate to Appearance >>> Theme Settings >>> Blog

Step 2: Select options for blog category page in blog options section

Blog style: There are 3 styles including large, grid, masonry
Content or excerpt: Select to display content or excerpt on the blog category page
Excerpt length: The number of displayed excerpt words
Infinite scroll: You can use Pagination number to navigate to the next page
Category filter: Turn ON to show category filter
Title link: You can show or hide title link
Post date: Enable to show published date information
Number of Comments: Show the number of comments
Category: Show or hide "category" on blog category page
"Readmore" link: Show the readmore button

Step 3: You can set up options for titlebar of blog category page

Step 4: Finally, Save changes

Blog category page

Front-end setttings

Blog Masonry

Blog Grid

Titlebar settings

You can select show or hide titlebar for single product and set up some meta information for titlebar.

You can enter 404 title, custom text, upload 404 image you want to show when users go to 404 page. Check ON to display subscribe newsletter form. But you need to install newsletter plugin.

Social

Step 1: Navigate to Appearance >>> Theme Settings >>> Your social

Step 2: Social Tab in Theme Settings is where you insert custom social media links you want to display. If you want to display Facebook icon, Twitter icon or Google+ icon in header or footer, you need to insert the URL of your Facebook, Twitter and Google+ in the corresponding field.

Step 3: To display icon title when you hover icons, you only need to turn On in the icon title field

Sharing Button

Step 1: Navigate to Appearance >>> Theme Settings >>> Social sharing setting

Step 2: Social share Tab in Theme Settings is where you will turn on or turn off the share of your social. For example, if you turn on "Facebook share", your reader can share your information on their facebook; if not, this function will be disabled

Step 3: To display icon title when you hover icons, you only need to turn ON in the icon title field

Page Layout

Choose header type: There is 01 header type for you to choose.

Choose footer type: There is 01 footer type for you to choose.

Page Title Bar

Page Titlebar: If you don't want to fill in the title name above, you can customize your page titlebar here. Beside some simple options, you can notice some special options in Grid:

Title bar: Show or hide title bar. Default is show
Titlebar layout: Choose from justify or center for alignment of elements on titlebar
Titlebar font size: Set the size of your text in title area
Top Padding and Bottom Padding: It is a line at the top or bottom of your title area, which is different from padding of content
Background image: Select image from "Media" or your computer. The size of image should be 1920x300px. Set your background image position among 9 available positions
Background color: Set your color in title area
Background image position: Set the position of image background from position list. Default is left top
Background zoom effect: True or False. If you choose True, your background will have zoom effect. Otherwise, set False. Default is False
Background parallax: True or False. If you choose True, your background will have nice paralax effect in title bar
Title opacity: Adjust the opacity of titlebar

Shadow opacity: Shadow makes a dark area for titlebar here, highlighting your titlebar name. This is the setting to adjust the opacity of titlebar
Overlay opacity: An effect cover the surface of titlebar area with a coating. This is the setting to adjust the opacity of overlay
Clipmask opacity: This is the setting to adjust opacity of clipmask, an effect cleaves scope of title into small squares

Custom title content: You can create your content for title area instead of filling the title name above, which is the same as customizing post content: you can add image, media or use shortcodes

Blog

You can select a specific category of posts for page. This feature only supports for blog page template.

Blog categories: You can select specific categories of posts for page
Blog style: There are 3 blog styles: Grid, Large, Masonry
Number of columns: You can select the number of columns for page: 2, 3, 4 or 5 columns
Post per page: Enter the number of posts you want to show in each page

Post Format

Customize Post format if you choose one of these formats "video, audio, link, quote, gallery":

For format "video", you have some options:

Video url: you can only add link from Vimeo and Youtube
Video source: select video source: video link, upload local file, video embed code

For format "audio", you have some options:

Audio source: select audio source: Soundcloud link or upload local file
Link: insert Soundcloud link, or link audio from other websites (option for format "Link" only, please fill in full http:// address)

For format "quote", you have some options:

Quote author: fill the author name of the quote
Author quote url: add author link
Quote content: fill the quote

For format "gallery", you have some options:

Gallery auto play: Yes or No. If you choose Yes, your gallery will play in auto. Default is No.
Fade animation: Yes or No. If you choose Yes, your gallery will have fade animation. Default is No.
Gallery speed: Customize the speed. Default is 300.
Gallery pagination: Show or Hide. If you choose Show, your gallery will be paginated. Default is Hide
Gallery navigation: Show or Hide. If you choose Show, your post will have gallery navigation. Default is Hide.

You can use row to add elements, shortcodes and build your own pages.

Activate Row

Step 1: Log into your WordPress Admin

Step 2: Click on Pages >>> Add new page

Step 3: Click on Backend Editor

Add Row and Use Row Layout

Step 1: After you activated the backend editor, click Add element

Step 2: Select Row

Step 3: You can edit Row by clicking to pencil icon (in our example we use row with 2 columns filled with text block)

Step 4: To change the Row layout (the number of columns) you need to click the second Icon from the left then select a layout or custom to make your own

Edit Elements

To edit Row, Column or Element, you need to click the Pencil icon.

Duplicate Elements

To duplicate Row, Column or Element, you need to click the Pages icon.

Remove Elements

To remove Row, Column or Element, you need to click the Trash box icon.

Row Settings

General options - When you edit row, you can edit general optipons.

Row stretch: How to make full width or full height row?

Stretch row: Stretches row, but leave content in previous width
Stretch row and content: Leaves default Bootstrap paddings of 15 pixels on the left and right side of row
Stretch row and content without spaces: Remove default Bootstrap padding of 15 pixels as well

Note: If WordPress theme uses overflow hidden in markup it may result in inappropriate row stretching.

Columns gap: The gap will be introduced between all columns within this row. Default value of gap is set to 0
Full height row: If checked row will be set to full height
Equal height row: If checked columns will be set to equal height
Content position: Top, middle, bottom
Use video background: If checked, video will be used as row background, then you can insert Youtube link

Design options - When you edit row, you can edit the design optipons

Row has a default Bottom Margin of 35 pixel, you may want to set it to 0 if you don't want to have bottom space

You can set bottom padding to your column

CHILD THEME

Kids comes with a Child Theme. Simply install Kids-Child.zip like a regular WordPress theme.

What is 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 create a child theme and override within.

Why Use A Child Theme?

There are a few reasons why you would want to use a child theme:

A WordPress child theme allows you to apply custom code changes to your site. Using a child theme ensures that all of your customizations will not be overwritten even when you update the parent theme.
If you modify code directly from a parent theme, then update the parent theme, your changes will be lost. Always use a child theme if you are modifying core code.

Reference: Child Theme_codex

FONT ICONS

Follow these steps to know how to add different icons fonts to Kids:

Step 1: Copy the icon fonts following the link: theme root / framework / k2ticon / inc / font. An icons fonts standard includes 4 files: your_font.eot, your_font.svg, your_font.ttf and your_font.woff

Step 2: Open file as link: root theme / framework / k2ticon / css / style.css to inform font-face and the whole css class for the new font (Note to change the path to adapt). For example:

@font-face {

font-family: " your_font ";

src: url("../inc/font/ your_font.eot");

src: url("../inc/font/ your_font.eot#iefix") format("embedded-opentype"),

url("../inc/font/ your_font.woff") format("woff"),

url("../inc/font/ your_font.ttf") format("truetype"),

url("../inc/font/ your_font.svg") format("svg");

font-weight: normal;

font-style: normal;

}

.icon-1 { content: “” }

.icon-2 { content: “” }

….

Step 3: Open file as the direction: theme root / framework / k2ticon / inc/ list.php and find line 729 to add new class of the new icon fonts

‘your_font ‘ => array(

‘icon-1’,

‘icon-2,

‘icon-3’

…

)

Step 4: Open file as the direction: theme root / framework / k2ticon / js / generator.js and find line 56, duplicate line 56-59 and then paste down

if ( selectedIcons == ‘your_font-icons-list' ) {

listIcons.hide();

jQuery( 'ul. your_font -icon-list' ).show();

}

Step 5: Open file as the direction: theme root / framework / k2ticon / k2ticon.php, find line 80 to paste the code down

Step 6: Done! See the results!

Note: You can replace "your_font" by your own name

FINALLY

Thank you for reading!

We hope you can create the best website with Kids.

One again, thank you so much for using Kids. As we said at the beginning, we'd be glad to help you if you have any questions relating to this theme. No guarantees, but we will do our best to assist. If you have a more general question relating to the theme, don't hesitant to contact us via email: lunarthemex@gmail.com or submit ticket via Forum.

Please take a screenshot photo with descriptions about your problem. More details about your problem help us to figure it out easier and respond to you sooner.

*******************************************************Note*********************************************************************

SCOPE OF SUPPORT

Our support covers getting setup, trouble using any features and any bug fixes that may arise. Unfortunately we cannot provide support for customizations or 3rd party plugins. If you need help with customizations of your theme, please contact us with your requirement. Our technical team will help you with some fees.

SUPPORT SCHEDULE

Our working time is 8:30am - 5:30pm from Monday to Friday (GMT+7). So if you email us or submit ticket besides this time, we are truly sorry that we are not able to respond you soon. We will try to reply you as fast as we can. Especially if you email or submit ticket at the weekend, please be patient and we will respond to you right when we are back on Monday.

Support forum

CONTACT

Reference WordPress support (installation, development):

Learn to HTML, CSS, PHP, Javascript, etc

Kids WordPress Theme

Detailed Documentation

INTRODUCTION

General

Who Kids Is For

WordPress information

Requirement for Kids

THEME INSTALLATION

What's Included

How to Install Kids via WordPress

Common Theme Installation Errors

How to Install Kids via FTP

INSTALL DEMO DATA

Please note these important Items about The Demo Content

Import All Demo Content

The first way:

The second way:

Import Manual Demo Content

Check The Following Plugins Before Import

How to Install Plugins

Where To Find Demo Files

How To Import XML Files

How To Import Revolution Slider

HOW TO

Upload Logo & Favicon

1. Upload Logo

2. Upload Favicon

Menu Settings

1. How To Create A Menu

2. How To Add Pages To Your Menu

3. How To Assign A Menu To a Location

4. How To Create Mega Menu

How To Create Posts

1. How To Add A New Post

2. How To Add A Gallery Post

3. How To Add A Video Post

4. How To Add An Audio Post

5. How To Add A Quote Post

Create Blog Page

1. How To Create A Blog Page with Categories

2. How To Setup Blog Category Page

Setting Homepage

Sample Codes For Homepages

Revolution Slider Settings

Header Builder

What is Header Builder?

Header Drag & Drop Editor

Header Elements

Header Settings

Header Template

HOW TO SET UP HEADER STYLE IN Theme Settings

HOW TO SET UP HEADER STYLE IN PAGE OPTIONS

Header 1

Create Custom Sidebar

Footer Builder

What is Footer Builder?

Enable Visual Composer

FILL WIDGETS FOR FOOTER

HOW TO SETUP FOOTER IN Theme Settings

FEATURES

Theme Settings

General settings

Icons

Layout

Blog

Titlebar settings

Social

Sharing Button

Page Options

Page Layout

Page Title Bar

Blog

Post Options

Post Format

Row (Visual Composer)

Activate Row

Add Row and Use Row Layout

Edit Elements

Duplicate Elements

Remove Elements