Sunny Kids WordPress Theme

sunny-kids-childrens-kids-wordpress-theme

Author: dtbaker
Last Update: 21st April 2013
Tested with: WordPress 3.5.1
Tested plugins: WooCommerce 2.0.8 + WidgetAreaManager 1.53 + Contact Form 7 v3.4
View online demo: click here
Download theme: click here
Support forum: click here

Demo Content: sunnykidswordpresstheme.wordpress.2013-06-25.xml

sunny-kids-childrens-play-centre-family-theme

Theme Documentation:

Installing the theme:

  1. Purchase the theme from ThemeForest.net
  2. Click on your Downloads page
  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 Sunny 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.

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

download_screenshot

Automatic Theme Updates (recommended!)

  1. To receive automatic updates (new features, fixes, etc..) please go to Appearance > Options: Envato
  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.
  4. When new updates are released they will appear under Appearance > Themes

Creating a Child Theme for customisations (optional)

  • 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

Setup the home page and the blog page:

  1. Create a new page called “Home”, type some content on this page, save the page.
  2. Create a new page called “Blog”, type some content on this page, save the page.
  3. Go to Settings > Reading and choose the “static page” option.
  4. From the drop down choose the new “Home” and “Blog” pages respectively.
  5. Please see below for setting up the home page slider.

Installing the online shop (WooCommerce)

  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/

Change the logo:

  1. Login to wordpress and view your home page.
  2. Hover over the main menu and choose “Customize” :
    sunny-kids-customize-menu
  3. The website Cuatomizer will appear on the left hand side, click on the Logo option:
    sunny-kids-logo-change
  4. In the logo text box you can type in your company name (eg: My Company) use the special ‘<br>’ code to make a new line. Alternatively if you have a logo image please click on the logo image button and upload your logo. Please make sure the logo is resized correctly (eg: in photoshop) before uploading it to the website.
  5. You can change the logo spacing from the top/left of the website page to make your logo fit perfectly.
  6. If you do upload a logo image, please make sure the value in “Logo Image Width” matches the width of your uploaded image for best results.

Create the home page slider:

  1. Create a new page called “Slider” and save it blank (you can make this a ‘private’ page if you like)
  2. Go to appearance > widgets and drag the “Home Page Slider” widget to the “Home Slider” widget area on the right.
  3. Select the “Slider” page from the drop down list.
  4. Click “Save”
  5. Click the “Manage Slider Images” button that appears
  6. Further step by step instructions will appear on the page (basically just create a gallery on the “Slider” page and these images will display on the Home Slider)

sunny-kids-slider-widget sunny-kids-slider-page

Setting up the top right phone number:

  1. Go to Appearance > Widgets
  2. Drag the “Text” widget over to the “Header Widgets #1″ box on the right
  3. In the “Title:” box type “PH: 1300 555 555″
  4. In the “Text:” box type “Open 7 Days”
  5. Click save.

Theme Customisation Options:

There are many built in customisation options with this theme. Change most theme colors and images without editing a single line of code. Below are screenshots showing all the theme customisation options. To access this menu please go to Appearance > Themes and choose the “Customise” link under Sunny Kids theme:

theme-customisation-logo This is a screenshot showing the available logo and header configuration options.
theme-customisation-font-family-styles-google-font This is a screenshot showing the available Google Font selections.
theme-customisation-font-colors This is a screenshot showing the available Text and Link Color options.
theme-customisation-colors This is a screenshot showing various theme Color options.
theme-customisation-background-images-and-colors This is a screenshot showing background color and background image configuration options.

 

Change the sidebars/widget areas:

The sidebar position is easy to change using a “Left/Right Column” menu item that becomes available once logging into WordPress. You can very easily change the sidebar position from Left, Right or Hidden on any page of the website:

sidebar_animation

Here is a closer screenshot showing how easy it is to change the position of the sidebar on this page, or set the new default for sidebars on all pages. Choose the sidebar position as Hidden to make a full width page.

sunny_kids_widget_area_left_right

To control which widgets display please go to Appearance > Widgets then drag & drop widgets to the corresponding widget areas on the right hand side.

Change the footer design:

  1. Navigate to the page you wish to change (eg: the home page)
  2. Select the “footer” menu from the top
  3. Select the “Large” “Small” or “Hidden” options, like this:
    sunny-kids-footer-large
    sunny-kids-footer-small
    sunny-kids-footer-none
  4. See advanced area below for more footer customisation options.

Setting up the contact page (with contact form and google map):

  1. Install the free plugin: Contact Form 7
  2. Click on the “Contact” menu item on the left
  3. Copy the “shortcode” that is displayed on this page, it will look something like this:
    [contact-form-7 id="130" title="Contact form 1"]
  4. Create a new Page called “Contact Us”
  5. Paste this shortcode onto the new page.
  6. Press enter a few times to create some new lines under the contact form, and type “Our Location:”
  7. Then enter the Google Map shortcode (adjust to suit your address)
    [google_map address="Gold Coast, Australia" height=400 enlarge_button=1]Our Studio:First Floor,1 Smith Street,Gold Coast,Australia[/google_map]
  8. Save the page and preview the page to ensure it works.

Set up the main menu:

  1. Go to Appearance > Menu and create a new menu called “Main Menu”.
  2. On the left hand side tick which pages you want to appear in the menu and click “Add to menu”
  3. Drag & Drop the menu items around to suit your needs.
  4. This menu supports a single level of drop downs, so you can have sub menus under the main menu items (see demo for example).
  5. On the left select “Main Menu” as the “Main Menu” location and click “Save”.
  6. Your menu will now appear along the top of every page.
  7. (repeat the above process for the optional “Footer Menu” location and that menu will appear down the bottom right corner, handy for Contact Us or Privacy links)

Shortcodes:

Available shortcodes can be seen in the online demo here: http://sunny-kids-wordpress-theme.dtbaker.net/shortcodes/ These are:

  • [banner title=”Test Banner” link=”Click Here” linkhref=”/”]Example of banner text[/banner]
  • [fancy_posts columns=”2″ category=”kids-wordpress-themes” max=2]
  • [google_map address=”Gold Coast, Australia” height=400 enlarge_button=1]Our Studio:First Floor,1 Smith Street,Gold Coast,Australia[/google_map]

Responsive Design:

This theme comes with a basic responsive design stylesheet. This means the screen will shrink when viewing the website on a smaller device. You can disable this feature by going to Customize and choose “Disabled” in the Responsive drop down list.

Disabling responsive will make the website display like a normal big website when viewing from the phone. Some people prefer this option.

sunny-kids-responsive-screenshot-demo

Resources / Images:

These demonstration images are used in the online demo. Please click on each image to purchase the image from PhotoDune if you wish to use them in your final website:

Groups IMG_9287.JPG

Reading IMG_6680.JPG

Outdoor Play IMG_6318.JPG

Creative Writing IMG_4080.JPG

Art & Craft IMG_3006.JPG

Demo IMG_7807.JPG
Test Test GS1A0607.JPG

Slideshow _DSC0109.JPG

Children children.JPG

Education Childrens.JPG

Advanced editing:

The css files are:

  • style.css (general styles)
  • style.blog.css (blog layout is controlled here)
  • style.comments.css (blog comment layout is controlled here)
  • style.media.css (responsive media queries are here)
  • style.woocommerce.css (some tweaks for woocommerce layout)
  • style.wpcf7.css (some tweaks for the contact form 7 plugin layout)
  • dtbaker.theme_options.php (advanced: the dynamic CSS with theme colors selected from the Theme Customizer is generated from this file).

The footer background images can be adjusted through the theme customiser.

  • if adjusting the height of these images, please also adjust the corresponding CSS rules in style.css for #footer_decal and #footer_decal.small (line 50 of css)

Top/Left/Right background images, feel free to change these using photoshop to suit your project needs:

  • images/background_leaves_middle.png
  • images/background_leaves_left.png
  • images/background_leaves_right.png
dtbakerSunny Kids WordPress Theme