Skip to content

Child Care Creative – WordPress Theme Documentation

“Child Care Creative”

Created: 14/06/2010
Updated: 25/09/2014
By: dtbaker
Download Child Care Creative WordPress Theme here: http://themeforest.net/item/child-care-creative-shop-and-kids-theme/158011
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via our support forum by clicking here. Thanks so much!

Table of Contents

  1. Installation
  2. Default Content
  3. CSS
  4. Font Face – Special Font
  5. Setting up the Home Page
  6. Setting up the Contact Page
  7. Setting up the Main Menu
  8. WordPress widgets
  9. Code Navigation
  10. Feature Modification
  11. PSD files
  12. Credits

WordPress Installation – top

Watch the updated installation video by clicking here:

Installing the theme is easy. Purchase a copy of the theme from ThemeForest, then go to you Downloads page, then click the “Download” button and choose “Installable WordPress ZIP file” and save that ZIP file to your desktop. Login to your wordpress blog, click the “Appearance” tab, click the “Themes” tab, click the “Install Themes” tab, click the “Upload” button, click “Browse” to select the ZIP file you just downloaded. Click “Install Now”. Once the theme is installed you will be asked to install the recommended plugins. Follow the prompts as per the video. Install and activate the plugins.

Important: Once the theme is uploaded and installed, click on the new “Options: Envato” menu item underneath “Appearance” and enter your License Purchase Code which is available in the “Download > License Certificate” option.


Default Content: – top

This theme comes with default content. As per the video, please go to Appearance > Default Content and follow the prompts. This is a very quick process and will result in a theme that matches the demo site. If you have any trouble setting up the default content then please send us a support ticket and we can assist.


CSS: – top

The CSS for this template is all in two files. The main CSS file is called style.css, and the other stylesheet is just for the shop, called style.woocommerce.css. Each section of these stylesheets is separated by comments to make it easier for you to change where needed.


Font Face – Special Fonts – top

This site is setup to use Cufon and Google fonts. You can change these font options in the “Appearance” > “Options: Font” area. Try out the different available fonts to see which you like best.


Home Page – top

Setting up the wordpress home page is easy. Simply go to the “Settings” » “Reading” and select static page as home page, then select your Home page from the drop down list. You do not need to select a blog page from the drop down list. Then go to your home page and edit it, on the right select the “Home Page” template from the drop down list. All done!


Home Page Slider – top

As per the video, go to Appearance > Widgets and drag the ‘Home Page Slider’ widget to the ‘Home Slider’ sidebar on the right. From the drop down list choose a page that has a normal wordpress image gallery on it. The images in this wordpress gallery will display as your slider. Follow the instructions in the widget for more details.


WordPress Contact Page – top

This theme works with the free popular Contact Form 7 plugin. Create a page called “Contact Us” and then add your Contact Form 7 shortcode to the page. You can configure the contact form 7 options by clicking on “Plugins” and then choosing “Settings” under Contact Form 7


WordPress Main Menu – top

The menu in this theme is controlled by standard WordPress menus. Please go to the “Appearance” > “Menus” tab to setup the menu. Consult wordpress documentation on how to setup a menu.


Widgets – top

Click on Appearance > Widgets. There is a “Contact Us” widget there. This will display contact details in a sidebar.

Example of the included contact us widget:


Code Navigation – top

This is an outline of what each file in the theme folder does:

  • /css/nivo-slider.css – CSS file for the main slider as seen on the demo home page.
  • /css/flexslider.css – CSS file for the alternative slider as seen on the alt slider demo page.
  • /images/ – this folder contains all the graphics used in the design. The easiest/quickest way to adjust the design is to open an existing image from this folder in PhotoShop and replace it with a new one the same size.  More advanced changes can be made in the provided PhotoShop files however this may require more advanced web development skills.
  • /includes/googlefonts.txt – this contains a list of all available Google Fonts that can be used in this theme
  • /js/ – this folder contains javascript files used in the theme (flexslider, nivoslider and Sunshine Poppy Cufon font file)
  • /plugins/ – this folder contains the default plugins that come with this theme (currently only Widget Area Manager) which are installed by default on theme activation
  • /shortcodes/ – this folder contains the code for the 4 available shortcodes: banner, fancy_post, google_map and note – these are shown on the shortcode demo page.
  • /widgets/ – this folder contains the code for the 4 available custom widget areas: contact us, home page slider, opening hours and social icons
  • /404.php – displayed when a page cannot be found on the website, example.
  • /archive.php – displayed when on a date archive page on the blog, example.
  • /category.php – displayed when viewing a blog category, example.
  • /class-tgm-plugin-activation.php – used to automatically install plugins on theme activation, don’t edit this file.
  • /comments.php – this handles the comments at the bottom of pages. Individual comment entries are displayed using child_care_creative_comment() within functions.php
  • /content.php – this outputs the individual blog summary entries, example.
  • /content-page.php – this controls the output of an individual page, example.
  • /content-single.php – this controls the output of an individual blog post, example.
  • /default_content.xml – this is the default content used when setting up the demo content.
  • /dtbaker.fonts.php – this file is used to download the latest Google Fonts into the theme
  • /dtbaker.shortcodes.php – this file loads available shortcodes from the /shortcodes/ folder
  • /dtbaker.theme_options.php – handles saving the theme options and loading the demo content
  • /dtbaker.theme_options_default.php – loading the demo content into the theme
  • /dtbaker.theme_options_envato.php –  saving license code for automatic theme updates /dtbaker.theme_options_font.php –  controlling the font under Appearance > Fonts /dtbaker.theme_options_logo.php – controlling the logo under Appearance > Logo
  • /dtbaker.theme_update.php – handles automatic theme updates
  • /editor-style.css – stylesheet used in the text editor
  • /footer.php – the footer of the website is displayed here
  • /functions.php – this is the core functions file of the theme. It handles things like: enquing stylesheets and javascript files, adding the gallery style, loading translations, setting up the menu, setting the thumbnail width/height, tweaking the widget calendar title, page/post navigation links, the comment layout, and loading TGM to automatically install widgets on theme activation
  • /functions.woocommerce.php – special functions for woocommerce support
  • /header.php – controls the header of the website and the menu generation
  • /image.php – displayed when viewing an individual image
  • /index.php – controls the main blog page layout, example.
  • /page.php – controls individual page layouts (in conjunction with content-page.php), example.
  • /search.php – shows search results, example.
  • /single.php – controls invididual blog page layouts (in conjuction with content-singe.php), example.
  • /style.css – main stylesheet for the blog
  • /style.media.css – responsive stylesheet
  • /style.normalize.css – special normalize/reset stylesheet – don’t edit this one
  • /style.woocommerce.css – special woocommerce styles
  • /tag.php – displayed when viewing a blog post tab
  • /template-home.php – used on the home page, select “Home” from the page template sidebar.

Feature Modification – top

Here are some instructions on more advanced feature modifications. If you are a web developer and need assistance with a custom change please send us a support ticket. We are unable to perform custom modifications for you but we can point you to the right file that needs changing.

Changing the Header graphics:

The header graphics (tree/grass) is made up of 3 images, these are: TreeCircles and Grass The easiest way to edit these files is to open the desired image in Photoshop, change it and then upload it over the top of the old image in the theme images/ folder.

Changing the footer graphics:

The footer graphics (grass, trees, flowers and bee)


PSD Files – top

I’ve included seven photoshop files with this theme:

  1. Home – The main layout
  2. Products – listing of products for sale
  3. Product Full – layout for the full information about a product
  4. About – Example of an inside page
  5. Contact – Form & contact information
  6. Bottom Scene – modify this design and save as a transparent png
  7. Tiling wave – modify this design and save as a jpg

The photoshop files contains clearly named folders for each part of the website.

How to edit & replace images:

The Photoshop documents have the slices required to build the layout. Pay special attention to the images that are saved as PNG, these ones need to be transparent and have nothing behind them when you save.

  1. First simply make the changes in photoshop
  2. Turn on the slices (view > show > slices) they appear as blue boxes
  3. Some slice boxes overlap, you can move slices into the background or bring them to the foreground using the slice options in the top left of the tool bar.
  4. You may need to hide some of the backgrounds and text when saving certain images. Use the existing images as a guide.
  5. To export the images go to: File > Save for Web, click on the slice you want to export and click save at the bottom of the screen, all the correct image settings will already be there, overwrite the originals in the images folder.

Sources and Credits – top

I’ve used the following images, icons or other files as listed.

Fonts:

  • Logo font: Sunshine Poppy: http://www.dafont.com/sunshine-poppy.font
  • Extra font: I used Trebuchet MS & Arial for the standard text.

Java Script:

Vectors:

  • red bird: http://www.vecteezy.com/Birds-Animals/7897-chicken
  • tree: http://www.webdesignhot.com/free-vector-graphics/wish-tree-vector-illustration/
  • people: http://www.vecteezy.com/Nature/5009-green-planet-with-lovely-people
  • grass & flowers: http://www.vectoropenstock.com/301-Easter-BUNNY-vector
  • sign post: http://www.vectoropenstock.com/1849-Wooden-direction-arrows-on-the-crossroads-vector
  • teddy: http://www.claricegomes.ca/freebies.php
  • leaf pattern: http://www.vecteezy.com/Patterns/753-Peacock-Vanity
  • mushrooms: http://www.freevectors.net/details/Cosmic+Dream
  • bee: http://www.vecteezy.com/Holiday-Seasonal/5637-Shamrocks-and-Queen-Bee
  • trees: http://www.vectorvaco.com/green-leaves-vector-1/
  • ball, puzzle & car: http://www.vectoropenstock.com/467-funny-toys-vector

Photos:

  • Boy sandpit: http://www.flickr.com/photos/42834622@N00/4635146128/
  • kids class: http://www.flickr.com/photos/73645804@N00/2908834853/
  • boy painting: http://www.flickr.com/photos/42834622@N00/4854788118/
  • painting: http://www.flickr.com/photos/25891376@N00/3603491639/
  • Ball pit: http://www.sxc.hu/browse.phtml?f=view&id=545663
  • Crayons: http://www.sxc.hu/photo/1205334
  • Xylophone: http://www.sxc.hu/photo/476129
  • Red car: http://www.flickr.com/photos/toy_cars/34166458/
  • Connectors: http://www.flickr.com/photos/kikisdad/164584074/in/set-72157594161995544/
  • Book: http://www.flickr.com/photos/remysharp/3918985965/
  • Stacking: http://www.flickr.com/photos/28096801@N05/3887321518/
  • Duckies: http://www.flickr.com/photos/aidanmorgan/4204877203/

Once again, thank you so much for purchasing this theme. As I said at the beginning, I’d be glad to help you if you have any questions relating to this theme. No guarantees, but I’ll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the “Item Discussion” section.

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

© dtbaker.net