Introduction
This documentation is last updated on 7 June 2017.
Thank you for purchasing Enfant WordPress Theme. If you have any question that is beyond the scope of this documentation, please feel free to create a support ticket using Our Support Site.
Disclaimer:
We offer premium support for our theme customers. Our support covers all Enfant Theme core features and included plugins. We followed WordPress industry standards when coding Enfant so adding extra plugins should be easy although we cannot guarantee our themes will work properly with all third party plugins and server environments. If you plan on adding numerous plugins to this theme then please note, we cannot facilitate support for any conflicts that might arise with this theme's default functionality. Enfant WordPress theme is presented as it is.
ThemeForest Item Purchase Code to Signup on Support Site
Please visit this knowledge base article to learn about how to get item purchase code from ThemeForest to signup on our support site.
If you like this theme, please support us by rating this theme with 5 stars (How to rate?)
Install Theme
In start you must have a working version of WordPress already installed. Please make sure your folders have the the right access permission. For information in regard to installing the WordPress CMS, please see the WordPress Codex Installing WordPress
Once you have a working of version of WordPress, you need to download All Files and Documentation from ThemeForest and extract the downloaded zip to get various files including enfant.zip and enfant-child.zip.
Install Theme Via WordPress Dashboard
- Go to 'Appearance > Themes' section
- Click 'Add New' and select the 'Upload Theme' option
- Choose the enfant.zip file and press 'Install Now'
- Do the same with the child theme enfant-child.zip (upload and install)
- Once the child theme is uploaded you need to activate the child theme
It is better to use child theme as if you need to modify anything you modify in child theme only. This way you can easily update your parent theme whenever new update becomes available on ThemeForest. You can read more about child theme from here.
If you face any problem during upload through dashboard, please upload the theme using FTP as guided below.
Install Theme Via FTP
- Access your hosting server using an ftp client like FileZilla
- Go to the 'wp-content/themes' folder of your WordPress installation
- Extract the enfant.zip file and put the enfant folder in 'wp-content/themes/' folder
- Extract the enfant-child.zip file and put the enfant-child folder in 'wp-content/themes/' folder
- Go to 'WordPress Dashboard > Appearance > Themes' section to activate the child theme
Install Plugins
After you have installed and activated the theme, there'll be a list of recommended plugins at the top of the WordPress dashboard. Please install recommended plugins.
If you already hide it out, you can go to 'Appearance > Install Plugins' section instead.
So, you need to install first and then activate these all plugins as demonstrated below.
Install All at Once
Activate All at Once
This is what you should see when all done
Import Demo Contents
One click demo importer will add all its contents like pages, posts, custom post types, widgets and their contents. It will also set the Primary Menu and Homepage for you. You will still have to do 2 small imports to make your website complete (Revolution Slider and Essential Grid data ... we provide their data too) but let's take things step by step.
Go to the WordPress Admin > Appearance > Import Demo Data and choose the demo you want to import as displayed in image below.
We'll import for example the "Primary School" Demo Data. Please do not refresh the page until the import is complete.
Once the demo data has been imported you can deactivate this plugin as recommened in the picture too
Your website homepahe should look now like this
Next we'll import Revolution Slider. Please note that we provide all 3 sliders. (Primary School, Kindergarten and Music School). If you imported the demo data for Primary School now you should import the slider for Primary School too. Sliders files can be found in ThemeForest package under the Import-Data folder. Choose your slider and import it as below. (E.g: We'll import slider-enfant-primary-school.zip)
Your homepage should contain the slider too after you imported the slider.
Next we'll import the Essential Grid Data (this contains Gallery Grids, Blog Grids and more). You will find the import file in the same folder you found the slider. The name of this import file is essential_grid.json. To import this do the following:
Import Everything
That's all! You have completed the import process. At this point you have all the content within your site.
Credits / Demo Content
A few words about resources included with this theme
Icons
Icons you can find in Font Icons section (Flaticon) are an integral part of the Theme, please do not use it separately for other purposes.
ImagesPremium images you can use along with this Theme without asking permission are included in downloadable package
Premium images only for live preview purposes can be found on depositphotos.com. We do not provide them in the package on ThemeForest. They are meant to be used only in the demo preview on http://demo.zoutula.com/
Configure Sidebars
To set up the sidebars you have to drag and drop the wanted widgets in corresponding sidebar
predefined areas.
Go to Appearance > Widgets and just drag and drop the widgets you want in the sidebars you want. Set the widget title and you have your sidebars ready in minutes. Please note that some widgets are meant to be placed in corresponding sidebar areas. If you would like to follow our demo design please check the image below and see how we've placed the widgets.
Configure Permalink Settings
To configure permalink settings visit WordPress Admin > Settings >
Permalinks and configure it as displayed in image below. For copy/paste reason we add here the structure too: /%category%/%postname%/ Do not forget to save the changes.
Set Up General Theme Features
All customizations done in this theme are done via 'Customizer'. You will be able to test your changes before make them permanent.
To set up all this features go to WordPress Admin > Appearance > Customize and configure the related options. Hopefully all the options are easy to understand. Do not forget to save any changes you would like to go live with them.
General Settings
In this area you can set website layout (boxed/full width), main font, accent font and Google Maps API Key, Search button, Cart button, Back to Top button and more ...
Site Identity
Picture below is self descriptive about settings in this area
Header
In this area you can configure: logo, logo@2x for retina display, logo width, background color for the header area, menu color, menu hover color.
Footer
Picture below is self descriptive about settings in this area
Social Links
Picture below is self descriptive about settings in this area. If you empty any field the corresponding icon will be hidden.
Staff, Courses, Events, Blog, Shop
In this areas you will be able to set the sidebar for the respective area and also number of items displayed
Colors
In this area you can theme colors. You have 2 important colors (Theme First and Theme Second) used in different places. You can also set color for: details, links, pagination, lines
Header Image
In this area you can set header images for categories and pages. You can also set the header background color and titles color in the header area.
Additional CSS
In this area you can add your own quick CSS rules.
Set Up Woocommerce
Settings regarding the WooCommerce Store are located in the "Customizer Area". Note that Woocommerce shop links will work only if you are setting them before.
To set up all store sidebar go to WordPress Admin > Appearance > Customize and configure the related options. Hopefully all the options are easy to understand. Do not forget to save any changes you would like to go live with them.
WooCommrce Pages Setup
This will setup general things and also will create default WooCommerce pages. More information about things you need to take in cosideration when you setup your store can be found here: WooCommerce Onboarding Wizard
Set Up Visual Composer
Go to WordPress Admin > Visual Composer > Role Manager
By default Visual Composer lets you edit pages only
To be able to modify any posts, custom posts like member, course, event you should make the following changes in Roles Manager tab.
Save the changes after.
Add Member
In case of imported XML the this type of content already exists. You only need to change it to fit your needs.
Go to WordPress Admin > Staff > Add New- Provide member name
- Enter the member contents or just copy/past one of the predefined member post and change the existing content.
- Provide the featured image. The image should be a 600x840 if possible or a bigger image but with the same proportions.
- Provide excerpt for post, this will be used on staff listing page
- Add custom fields content see image below
- The custom post uses in listing the following custom fields: enfant_staff_member_facebook, enfant_staff_member_twitter, enfant_staff_member_linkedin, enfant_staff_position
- Publish the post once it is ready.
Add Course
In case of imported XML the this type of content already exists. You only need to change it to fit your needs.
Go to WordPress Admin > Courses > Add New- Provide the course name
- Enter the text contents about course
- Provide the featured image.
- Provide the course related information. Some custom fields should be filled with data ( enfant_course_description as below. You can add as many lines as you want.
- Publish/Update the course post once it is ready.
<div><span>Age Group</span> 5-8 Years</div>
<div><span> Class Size</span> 15 Students</div>
Add Event
In case of imported XML the this type of content already exists. You only need to change it to fit your needs.
Go to WordPress Admin > Events > Add New- Provide the event name
- Provide the event date
- Provide the event duration
Along with the events taxonomy an event custom post can be used with our VC custom element for grids and used in any page like here:
Title Element
This element will help you add titles/subtitles everywhere you want. You can set the following:
- Text to be used as title
- Tag that will wrap the element Eg. h1, h2 etc
- Line height of the element. If not set it will go on theme default.
- Style. This will let you choose the font to be used. (main or accent) This element has the advantage that in case you change the theme Main Font your titles that usees the Main Font will follow your new font without the need of any other changes.
- Align (left/center/right)
- Color
You will find this element used in our pages like below:
On frontend this element will look like this:
Divider Element
This element will help you divide items and set hierarchies. You can set the following:
- Style.
- Align (left/center/right)
- Color
You will find this element used in our pages like below:
On frontend this element will look like this:
Announcement Element
This element will help you add appealing announcements. You can set the following:
- Icon
- Icon Color
- Icon Background Color
- Title
- Subtitle
- Text Color (title and subtitle)
- Buton Link
- Buton Style
You will find this element used in our pages like below:
On frontend this element will look like this:
Counter Element
This element will help you add nice countdown boxes. It will help emphasize things your business achieved. You can set the following:
- Icon
- Number
- Description
- Text Color (description and number)
- Icon Color
You will find this element used in our pages like below:
On frontend this element will look like this:
Package Element
This element will help you add nice upgrades to your main pricing plan packages. In case your business has a lot of options this element will help you make your customers better understand what to choose. You can set the following:
- Title
- Subtitle
- Text Color
- Bullet background color
- Bullet text color
- Price (with currency) you can prepend/append your currency as your country specific
You will find this element used in our pages like below:
On frontend this element will look like this:
Countdown Element
This element will help you set a countdown. If you have future events you will be able to emphasize them easily. We use it on homepage for "First School Day" and also on Events pages. You must set the countdown date in the following format only Sep 23, 2018 12:14:20
You can set the following:
- Date
- Show days columns
- Show hours columns
- Show minutes columns
- Show seconds columns
- Color (for all the above)
You will find this element used in our pages like below:
On frontend this element will look like this:
Grid Element
This element will help you add an events grid everywhere you want. Keep in mind that will show only events you set in future. You can set:
- Post type (For now events. If you want to make a grid with any other post type use VC default grid or build yours with Essential Grid which is included)
- Number of items to display
- Order by
- Order (asc/desc)
- Order by Event Date
You will find this element used in our pages like below:
On frontend this element will look like this:
Subscriber Element
This element will let you add a form to subscribe to your MailChimp list. You only need to link your site with MailChimp via an API Key provided by MailChimp and the included plugin MailChimp for WP will know to fetch your MailChimp account for list and so on. Your subscribers will be kept in the MailChimp account so you can later on get in touch with theme through marketing campaigns or informative emails.
- Icon
- Icon Color
- Text
- Title Color
- Subscribe form ID(This should be created within MailChimp for WP tab)
You will find this element used in our pages like below:
On frontend this element will look like this:
Steps Element
This element will help you create the enrollment process or any other process that can be achieved in steps.
On parent element you will be able to set slider loop, navigation display and autoplay.
On each step you can set:
- Step number
- Step color
- Step title
- Step description
You will find this element used in our pages like below:
On frontend this element will look like this:
Map Element
This element will help you create extremely wonderful maps. All maps can be customized using a free configuration from
https://snazzymaps.com/ where you can choose from hundreds of predefined maps. To work properly please set your google key in Customizer > General Settings.
On this element you can set the following:
- Coordinates in the following format 53.491782, -2.265462
- Map width
- Map height
- Map zoom
- Map controls
- Map scroll function (enable/disable)
- Pin image
- Custom style of your map (https://snazzymaps.com/)
You will find this element used in our pages like below:
On frontend this element will look like this:
Pricing Plan Element
This element will help you create your base pricing plans. You have available 3 distinct styles and you can switch between anytime.
Keep in mind that you can combine this with the Package Element to create advanced offres for your customers.
On this element you can set the following:
- Style
- Title
- Subtitle
- Description
- Price
- Currency
- Unit of time
- Color for Description
- Main Color
- Accent Color
- Header text color
- Plan background color
- Link for the button (maybe to a woocommerce product if you wnat your customers to pay online for services)
You will find this element used in our pages like below:
On frontend this element will look like this:
Testimonials Element
This element will help you create your testimonials area. Just add your testimonials and they will display nice in your site.
On parent element you have the choice to enable disable navigation arrows, dots navigation, autoplay and loop
On this element you can set the following:
- Title Color
- Image before title (start quote)
- Image after title (ending quote)
- Description color
- Author Image border color
- Title
- Description (this supports HTML)
You will find this element used in our pages like below:
On frontend this element will look like this:
Font Icons
You may use any of the icon fonts below in any context of this theme. They are already loaded as font. Icons below are used in different contexts like: menu icons, post icons, list bullets etc.
Translating The Theme
This theme is translation ready but the support of RTL languages is not available for now.- For translation to only one language please provide the POT files to your translators. Once they are ready you should get back a PO/MO file. Use them in the child theme and replace the PO/MO files there with the new ones. This way you are safe when your theme is updated and your translation files remains untouched in child theme folder even if the theme is updated.
- For translation to multiple languages you can use WPML Plugin
Quick Modify CSS
You can make quick CSS changes in the Admin > Appearance > Customize > Additional CSS
Hire Customization Services
If you need some additional features or want modification in existing theme features then you can contact theme customization service providers like http://psdtohtmlwp.com/ or https://codeable.io/ or http://werkpress.com/