Skip to content

Boutique Kids Creative – WordPress Theme Documentation

Notice: Updated documentation is available here: http://dtbaker.github.io/themes/boutique-kids/documentation/index.html 

 

 


 

 

 

item_preview-wordpress

Author: dtbaker
Created: 27th October 2014
Tested with: WordPress 4.0
Tested plugins: WooCommerce  2.1.2 + WidgetAreaManager 1.53 + Contact Form 7 v3.7.1 + Social Icons by Fairhead Creative + Column Shortcodes v0.6.6 + W3 Total Cache v0.9.4
WPML and RTL compatible
View online demo: click here
Download theme: click here

Theme Documentation

(expand all)

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

https://vimeo.com/110685919

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 and go to Appearance > Themes > Install Themes
  5. Click the Upload tab
  6. Choose the downloaded ZIP file from your desktop and click upload
  7. Go back to Appearance > Themes and click Activate on the Boutique Kids theme.
  8. Note: If you are prompted to install Widget Area Manager please follow the prompts. If for some reason this plugin does not install automatically please download it from here and install it like a normal plugin: click here. The Widget Area Manager is required for this theme to operate correctly. It will allow you to control the position of sidebars and what content to display in them.
  9. Continue below for setting up default content…

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

download_screenshot

( this step is also covered in the video screencast linked above )

You can optionally install the default content so the theme looks exactly like the demo site ( http://boutique-kids.dtbaker.net ).
Please only do this on a fresh new empty WordPress website – installing default content on an active existing website could cause problems, and the end result probably wont look like the demo.

default-wordpress-content-settings

If you wish to install the default content please follow these steps exactly:

  1. Install and activate the theme as mentioned above.
  2. Make sure all required plugins are installed and activated
  3. Go to Appearance > Default Content and follow the instructions

Done, your new WordPress website should now look identical to the live demo.
If it doesn’t or you need assistance please send us an email and we can happily help get you up and running: http://dtbaker.net/envato/support-ticket/

  1. To receive automatic updates (new features, fixes, etc..) please go to Appearance > Theme Updates
  2. Enter your item purchase code from ThemeForest (looks something like this 39d40592-12c0-1234-988b-123458cd736b )
  3. This code can be found in the “License Certificate” file on your ThemeForest download pages. (hint: click the download button and look for License in the dropdown)
  4. When new updates are released they will appear under Appearance > Themes

Update: Sample Child Theme Available here: boutique_child_theme1.1.zip

  • If you are familiar with WordPress theme customisations and you are planning on modifying this theme for your project then we highly recommend creating a “Child Theme” that contains your customisations.
  • This way when an update is released by us it will not overwrite any of your custom changes.
  • If you do not plan on editing any of the theme files (eg: css files, php code, background images) then you do not need to create a Child Theme.
  • You do not have to create a Child Theme, this is an non-required advanced step for those who have a moderate level of website editing skills.
  • Up to date instructions for creating a Child Theme are available here: http://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme

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-screenshot-demo

 

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.

Below are screenshots showing the available customization options:

theme-customisation-options

 

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).

flexslider-editor-wordpress-custom-mce-view

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

flexslider-editor-front-end-view

 

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>

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).

fancy-gallery-wordpress-custom-mce-view

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

fancy-gallery-wordpress-front-end-view

(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)

(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

  1. If you wish to sell products please install WooCommerce
  2. Go to Plugins > Add New and search for “WooCommerce”
  3. Click install
  4. After installation, click activate.
  5. Go to WooCommerce > Settings and configure your preferences
  6. Further details about installing and using WooCommerce are available here:
    http://docs.woothemes.com/document/woocommerce/
  7. Further help and support for using WooCommerce is available here:
    http://www.woothemes.com/woocommerce/

This theme comes with bonus Facebook WooCommerce Integration! This allows you to add a “Tab” to your Facebook Business Page like this:
Note: this only works if your website has an SSL certificate (ie: check that https://yourwebsite.com works first)

By adding a page tab you can get a custom shopping cart icon as shown in the below screenshot (this icon can be anything)

img_52798e39161b8

When users click on this icon they are taken to a special shop page showing all your products. Users can add products to their cart directly from Facebook and then checkout via your website

img_52798e4a9ff51

To install this plugin please look for the ‘plugins/woocommerce-facebook.zip‘ file located in the theme download zip file.
Contact us if you cannot locate this file.
Once you have this plugin file you can install it to WordPress by going to Plugins > Add New > Upload and follow the prompts.
After activating the plugin you will find a new menu under WooCommerce > Facebook – this has detailed instructions on setup.

Basically you want to go to https://developers.facebook.com/apps and create an app with settings similar to this:

img_5279862253545

 

If you have difficulties following the instructions located under WooCommerce > Facebook please contact us and we can assist.

  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.
    (the theme comes with 4 background image options, check the “backgrounds/” folder in the theme zip file for those images)
  4. Adjust the colors and background settings to suit your needs.

img_5450c3014d8ed

  • 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:shortcode-fancy-banner-1-frontend-view
    This is what it looks like in the editor:
    shortcode-fancy-banner-2-backend-mce-view
    This is what happens when you click the edit button on the fancy banner (very easy to use!)shortcode-fancy-banner-3-backend-mce-toolbar-button

  • 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).shortcode-line-types_heart-bird-and-circle
  • Icon Boxes:Icon boxes are available by clicking the “Icon” button on the editor toolbar.icon-boxes-shortcodes
  • Columns:

    click the little [ ] icon at the top just next to “Add Media”. That will give you quick access to all the possible column shortcodes and settings.column-shortcode
  • Google Map:
     
    Use the [[google_map]] shortcode to display a map on any page, or use the little MAP icon on the WordPress editor.
    Example of a map can be seen on the Contact Page demo.
    [[google_map address=”Sydney, Australia” height=400 enlarge_button=1]Our Studio:
    First Floor,
    1 Smith Street,
    Sydney, NSW,
    Australia[/google_map]]

  • Social Icons:

    The following social icons are included in this theme, these webicons were created by Webicons were created by Fairhead Crative and are available here: https://github.com/adamfairhead/webicons
    [webicon icon="aboutme"] [webicon icon="adn"] [webicon icon="android"] [webicon icon="apple"] [webicon icon="behance"] [webicon icon="bitbucket"] [webicon icon="blogger"] [webicon icon="branch"] [webicon icon="coderwall"] [webicon icon="creativecloud"] [webicon icon="dribbble"] [webicon icon="dropbox"] [webicon icon="evernote"] [webicon icon="f500px"] [webicon icon="facebook"] [webicon icon="fairheadcreative"] [webicon icon="flickr"] [webicon icon="foursquare"] [webicon icon="git"] [webicon icon="github"] [webicon icon="goodreads"] [webicon icon="google"] [webicon icon="googleplay"] [webicon icon="googleplus"] [webicon icon="hangouts"] [webicon icon="html5"] [webicon icon="icloud"] [webicon icon="indiegogo"] [webicon icon="instagram"] [webicon icon="instapaper"] [webicon icon="kickstarter"] [webicon icon="klout"] [webicon icon="lastfm"] [webicon icon="linkedin"] [webicon icon="mac"] [webicon icon="mail"] [webicon icon="medium"] [webicon icon="mercurial"] [webicon icon="mixi"] [webicon icon="msn"] [webicon icon="openid"] [webicon icon="orkut"] [webicon icon="picasa"] [webicon icon="pinterest"] [webicon icon="pocketapp"] [webicon icon="potluck"] [webicon icon="quora"] [webicon icon="rdio"] [webicon icon="reddit"] [webicon icon="renren"] [webicon icon="rss"] [webicon icon="skitch"] [webicon icon="skype"] [webicon icon="soundcloud"] [webicon icon="spotify"] [webicon icon="stackoverflow"] [webicon icon="stumbleupon"] [webicon icon="svn"] [webicon icon="tent"] [webicon icon="tripadvisor"] [webicon icon="tumblr"] [webicon icon="twitter"] [webicon icon="vimeo"] [webicon icon="weibo"] [webicon icon="windows"] [webicon icon="wordpress"] [webicon icon="xing"] [webicon icon="yahoo"] [webicon icon="yelp"] [webicon icon="youtube"] [webicon icon="youversion"] [webicon icon="zerply"]
    You can add these icons to any page add icons to any page using a [[webicon icon="facebook" link="http://facebook.com" size="small"]] shortcode.
  • Opening Hours Widget:
    Useful for placing on the Contact Us page.
  • Social Icons Widget:
    Here are the social icons included within this widget:
  • Google Map:
    Useful for the contact page or the footer widget area.google-map-widget

 

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:

widget-types-animation

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:

widget1-shop-sidebar-menu widget2-contact-us-box widget3-free-delivery-special-advertisement widget4-connect-social-icons widget5-information

 

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:

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:

widget-header-left-right-sidebar-control

Changing these options does the following:

[caption id="" align="aligncenter" width="455"]Sidebar widget area animation Sidebar widget area animation[/caption]

 

 

  • Header Area:
    You can turn the header widget area on by navigating to the page and selecting Header > Position > Visible. This will display the header widgets (5 drop down boxes) at the top of the page.
  • Left/Right Column:
    This is set to display on the right hand side of every page by default. You can change this on a page by page basis, or change the default options for that particular page type (eg: you can make all ‘Posts’ display a sidebar on the left by default).
  • Footer Area:
    This displays at the very bottom of the page.

The WordPress POT file for this theme is available here (zipped): boutique_wp.pot. Alternatively please try the WPML plugin for easy translations, details below:

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/

setting-up-wpml-1

 

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

RTL theme support

 

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/

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

  • Retina Graphics:
    • All graphics are provided in two versions. A larger 2x version is in the images/2x/ folder. These graphics are used on devices with retina displays (such as iPad) in order to provide a crisper viewing experience.
    • If you do edit any of the images/ please make sure to edit the corresponding larger image within the images/2x/ folder.
  • CSS Files:
    • A good way to override default theme CSS is to install a WordPress CSS plugin such as this one. This is a little easier than overwriting theme stylesheets for small changes.
    • Here are the list of css files and a description of what they do:
    • rtl.css – this controls RTL language styles (such as Hebrew) if you have an international audience.
    • style.blog.css – the blog layout page and individual blog pages
    • style.comments.css – the blog comments
    • style.content.css – the inside content area. Images, text, boxes.
    • style.custom.css – automatically generated, do not edit this file, see below dynamic stylesheet section for more details.
    • style.css – overall page styles (sidebars, header, footer)
    • style.editor.css – wordpress editor styles
    • style.ie.css – old IE styles
    • style.prettyPhoto.css – handles nice image popups in galleries
    • style.responsive.css – tablet and mobile responsive css layout rules
    • style.woocommerce.css – styles to override the default WooCommerce layout
    • style.wpcf7.css – override the default contact form settings
  • LESS Files:
    • There are some LESS files in the less/ folder that were used to generate the CSS files. If you are familiar with LESS then please feel free to use these files for editing the main CSS files. Otherwise simply edit the main CSS files and ignore the LESS files all together.
    • less/rtl.less – used to generate rtl.css
    • less/style.content.less – used to generate style.content.css
    • less/style.less – used to generate style.css
    • less/style.responsive.less – used to generate style.responsive.css
    • less/style.woocommerce.less – used to generate style.woocommerce.css
  • Dynamic stylesheet: style.custom.css 
    This stylesheet is created and overwritten every time you click save in the theme “Customize” area
    The file style.custom.php is used to generate the style.custom.css file, so feel free to modify the style.custom.php file if you need to change any of the automatically generated css rules.
    The file dtbaker.theme_options.php contains some of the default custom styles listed at the top. This file also controls the wordpress customizer options if you need to make changes there.
  • Comments: the comment layout is controlled from functions.php under the function boutique_comment() – this can be overridden with a child theme
  • 3 color boxes on home page, change image width:
    change the 70% in style.content.css to suit your needs:

     .entry-content .gallery-dtbaker-pretty .gallery-icon img{
       max-width: 70%;
     }
  • Header Hanging Boxes:
    • The 5 boxes in the header are controlled by widgets in the “Header Area”. To change these go to Appearance > Widgets.
    • To change the images used in the header boxes please edit the corresponding images, these are:
      hanger1.png, hanger2.png, hanger3.png, hanger4.png, hanger5.png :
  • Header Curved Lines:
    • The header is built using 4 graphics positioned via CSS. These are: main-top-left.png, main-top-right.png, main-top-centre.png and main-top-tile.png:
           
  • Menu Ribbon:
    • The ribbon is built with 3 images: menu-ribbon-left.png, menu-ribbon-right.png, menu-ribbon-tile.png:
        
  • If you would like to make an advanced change and cannot figure it out please send us an email. Although we are unable to perform any custom modifications for you we may be able to point you in the right direction. Changes outside of the “customize” area of this theme will require an advanced level of CSS, HTML and (possibly) PHP knowledge.

 

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

© dtbaker.net