Boutique Kids version 1.23.11 by dtbaker

Buy Now

Admin Demo

Get Support

item_preview

Theme Installation

Please watch this instructional video showing how to install this WordPress theme and setup default content:

Below are the step by step instructions:

  1. Purchase the theme from ThemeForest.net
  2. After purchasing go to your Downloads page ( http://themeforest.net/downloads )
  3. Click on the Download button and choose the Installable WordPress file option and save this ZIP file to your desktop.
  4. Login to WordPress Dashboard.
  5. Go to Appearance > Themes > Install Themes
  6. Click the Upload tab
  7. Choose the downloaded ZIP file from your desktop and click upload
  8. Choose the ‘Activate’ option after upload
  9. Follow the Setup Wizard prompts (see video for example)
  10. (if you need to run the setup wizard again please go to Appearance > Setup Wizard)

Here is a screenshot showing step by step instructions for downloading and installing the WordPress theme:

download_screenshot

Child Theme Customizations (optional)

Elementor Page Builder

This theme uses the Elementor page builder. Elementor is a very powerful and very good WordPress page builder. Using Elementor will help you design amazing looking pages very quickly and easily.

Help with the Elementor page builder:

Upgrading to Elementor Pro

This theme comes with the Free version of Elementor. It is already extremely powerful, but you can take it to the next level by purchasing the 3rd party Pro version. For a small extra fee you get access to great new features such as: Form Builders, Slides, Portfolio, Global Widgets, Custom CSS, Pro Pre-Made Templates, WooCommerce addons, Flip Box, Masonry Layout, Share Buttons and much more.

To find out more and to purchase Elementor Pro please click here: https://elementor.com/

Responsive Layout

This theme is enabled with responsive CSS layouts so that it displays nicely on mobile devices. If you wish to disable this responsive feature please go to Appearance > Customize > Page Layout

responsive-layout

Customizing Theme Colors, Fonts and Other Options

Customization is done easily via the Appearance > Customize menu. Here you can change colors and font styles for the ensite website, and preview them before they go live.

Most of the settings are under the "Typography" menu.

Other changes can be performed in CSS files. Install the "Child Theme" (see above) and then edit the child theme style.css file. You can edit this file via FTP or via Appearance > Editor menu.

Advanced Customization: if you need assistance with advanced customizations then please hire someone from Envato Studio (look in the WordPress category)

Home Page Slider

Here are instructions on creating the slider (as seen on the home page of the demo).

  1. Create a new page in WordPress
  2. Click the “Add Media” button at the top
  3. Choose “Create Gallery” on the left
  4. Select (or upload) your gallery images (the ideal image size is 697px by 300px)
  5. Click the “Create New Gallery” button
  6. Change “Link To” as “Media File”
  7. Change “Image Size” to “Original Size”
  8. Change “Gallery Type” to “Flex Image Slider”
  9. Click on each gallery image and enter a “Title” and a “Caption” (these will display on the slider)
  10. Click the “Insert Gallery” button
  11. Save the page and view it to check it works.

This is how the slider will appear in the backend editor (so you can easily see all the photos and captions in one place) – click the Edit icon to edit the slider images (as above).

This is how the slider will appear in the front end published page:

 

Advanced settings for the flexslider can be made by editing the flexslider/flexslider.css and the flexslider init options can be changed in the dtbaker.gallery.php file on about line 350:

<script type="text/javascript" charset="utf-8">
  jQuery(window).load(function() {
    jQuery('.flexslider').flexslider({
       controlNav:false
    });
  });
</script>

Shortcodes

Shortcodes can be easily inserted with the "Insert" button on the WordPress text editor toolbar. There are a number of included shortcodes:

Fancy Banner:

Inserting the fancy banner is very easy. Simply click the “Banner” button on the editor toolbar and you get an easy to use popup that allows you to insert the shorcode.
This is what the shortcode looks like on the front end published page:
This is what it looks like in the editor:

This is what happens when you click the edit button on the fancy banner (very easy to use!)

Line:

There are three types of fancy lines: hearts, birds and circle. To insert a line simply click the “Line” button within the editor (the “Circle” line has an option to insert a very short word such as “Sale” or “Map” to display ontop of the little circle).

Icon Boxes:

Icon boxes are available by clicking the “Icon” button on the editor toolbar.

Google Map:

Example of a map can be seen on the Contact Page demo.

Create a photo gallery or simple image slider

Here are instructions on creating the fancy gallery with 3 images (as seen on the home page of the demo).

  1. Create a new page in WordPress
  2. Click the “Add Media” button at the top
  3. Choose “Create Gallery” on the left
  4. Select (or upload) your gallery images (the ideal image size is 160px by 140px)
  5. Click the “Create New Gallery” button
  6. Change “Link To” as “Media File”
  7. Change “Image Size” to “Original Size”
  8. Change “Gallery Type” to “Styled Gallery Buttons”
  9. Click on each gallery image and enter a “Title” and a “Caption” (these will display on the fancy boxes)
  10. Click the “Insert Gallery” button
  11. Save the page and view it to check it works.

This is how the fancy gallery will appear in the backend editor (so you can easily see all the photos and captions in one place) – click the Edit icon to edit the images (as above).

This is how the fancy gallery will appear in the backend editor (so you can easily see all the photos and captions in one place) – click the Edit icon to edit the images (as above).

An example of available galleries is here: http://boutique-kids.dtbaker.net/examples/gallery/

Setup the Contact Page

(not required if you have setup default content as above)

  1. Make sure the Contact Form 7 plugin is installed
  2. Login as admin and choose "Contacts" menu on the left.
  3. Open the default "Contact Form 1" and make any changes as neccessary.
  4. Copy the shortcode (it will look something like [[contact-form-7 title="Contact form 1″]] )
  5. Create a new page called "Contact", type the words "Please fill in the form below to contact us" and paste in the shortcode from before.
  6. Save the page and check the contact form works (ie: do you receive an email from it?)
  7. Click edit page again and add a map using the google map shortcode (more details below under shortcode)

Setup the Main Menu

(not required if you have setup default content as above)

Go to Appearance > Menu and follow the standard WordPress menu creation process.
Detailed instructions on creating a menu are located on the WordPress website here: http://codex.wordpress.org/WordPress_Menu_User_Guide

Installing the online shop (WooCommerce)

  1. If you wish to sell products please install WooCommerce (this should happen during the installation wizard)
  2. Go to WooCommerce > Settings and configure your preferences
  3. Further details about installing and using WooCommerce are available here:
    http://docs.woothemes.com/document/woocommerce/
  4. Further help and support for using WooCommerce is available here:
    http://www.woothemes.com/woocommerce/

Background Images / Colors

Note: some graphical elements have been designed to only work with the default background image. So a change of background image may cause some inside design elements to not look nice. Additional graphical modifications may need to be made after changing the default background.

  1. If you wish to change the default background image:
  2. Go to Appearance > Background
  3. Go to "Choose an Image from your Computer" and choose the background image you would like to use.
  4. Adjust the colors and background settings to suit your needs.

Insert Styled Image

This theme comes with a really cool and unique styled image selector. When inserting an image to a page/post you have the option to choose the image style. See this video for an example:

Columns

Adding columns to your page is very easy. Simply edit the page/post and click the "Columns" button. See this video for an example:

Columns can also be styled, choose the style from the drop down list.

Included Widgets

Widget Decorations

You can change the background color of any Widget within this theme using the easy drop down menu in Appearance > Widgets.
Hint: use the “default” background option for footer widgets.

There are 5 widget background options, as seen here:

Here are the settings used in the main widget sidebar area (as seen in the demo). Thsese should be loaded in by default if the default content instructions above are followed:

Header Options

Under Appearance > Customize > Page Layout > “Page Header Mode” there are three options to control the page header styles.

  1. Underline (default) displays the headers like this:

  2. Fancy Border displays the headers like this:

    (you can change the background color from “Other Colors” > “Background Fancy Header”, such as this:)

  3. Plain displays the headers like this:

Widgets Positions / Sidebars

The Widgets and Sidebars in this theme are handled by the “Widget Area Manager” plugin.
To view all available widget areas (header/sidebar/footer) please see the demo.

Please note: the header widget area (5 drop down boxes) is very restricted, making any changes to this area to include different looking widgets will most likely require advanced css and website editing knowledge. It is only designed to contain the 5 drop down boxes as shown in the live demo. 

You can change the position of some of the widget areas using the “Left/Right Column”, “Header” and “Footer” menu items displayed in the admin bar:

Changing these options does the following:

 

Translations

Please try installing the free plugin called Loco Translate. Once installed go to the Loco Translate menu, then choose Themes, then choose the theme, then click "New Language" and follow the prompts.

Alternatively, the WordPress POT file for this theme is available in the /languages/ folder of the theme zip file. Instructions on translating WordPress themes with POT file are available here: https://poedit.net/wordpress

WPML + RTL Support

This theme is compatible with WPML and RTL languages. Here is a screenshot of the WPML settings used when installing the plugin. For more details and support please head over to https://wpml.org/

RTL Support, here is an example of the theme translated into Hebrew using the WPML plugin:

To get WooCommerce working with Multiple Languages or Currencies please install the free “WooCommerce Multilingual” plugin. Then go to WPML > WooCommerce and setup the currencies and conversion rates here:

More details here: http://wpml.org/documentation/related-projects/woocommerce-multilingual/multi-currency-support-woocommerce/

Updating

Please follow this exact process when updating the theme

  1. Go to the Envato Market menu in the WordPress backend (install the plugin if not there already)
  2. Click settings tab
  3. Click the "login with oAuth" button down the bottom (if you do not see this button, stop here and follow the "get a token" instructions on the Envato settings page)
  4. Approve the update permissions
  5. Go to Appearance > Themes and click "Update" button for your theme
  6. Click Dashboard menu
  7. If you see a notice at the top of the page, click the "Begin Updating Plugins" menu button and follow the prompts

NOTICE: If the above process doesn't work, or you get a Download package not available message, please download the dtbaker-updater.zip plugin and install it to your WordPress site (Plugins > Add New > Upload). Then try the above update process.

A video showing this process is available below:

Photoshop Files

Photoshop files are available from this special URL after purchasing this theme: http://dtbaker.net/files/envato/resources/. Please login with your Envato account to access the latest version of the purchased resources.

Advanced Editing

Please consider using a Child Theme for any changes. This will help stop theme updates overwriting your customisations.

Resources

icons: https://www.gosquared.com/resources/165-vector-icons/

icons: http://garcya.us/135-free-vector-icons/
Swirls background: https://www.vectoropenstock.com/vectors/preview/68546/curly-swirl-decorative-ornament

Swirl detail: Nymphette Font: http://www.dafont.com/nymphette.font

Birds: drawn

Sales bag: drawn

ribbon: http://all-free-download.com/free-vector/vector-banner/banners_pattern_58680.html

Sign hanger: http://www.webdesignhot.com/free-vector-graphics/vintage-signboard-vector-set-1/
*Fonts:

Lobster: https://www.google.com/fonts/specimen/Lobster

Lora: https://www.google.com/fonts/specimen/Lora

photos:

girl: http://photodune.net/item/child-girl-wearing-white-hat/2772766

Boy: http://photodune.net/item/cute-preschool-boy/7996204

smiling woman – http://photodune.net/item/confident-woman-smiling/5679414

happy man – http://photodune.net/item/happy-young-man/7237088

woman curly hair – http://photodune.net/item/portrait-of-woman/418079

woman brown coat – http://photodune.net/item/woman/9012723

woman white shirt http://photodune.net/item/woman/1798785

girl dandilion – http://photodune.net/item/sunny-day/3789098

child – superhero – http://photodune.net/item/superhero-kid/5945789

toy plane – http://photodune.net/item/happy-kid-playing-with-toy-airplane/7090617

Changelog

Here is a list of theme changes: