1.creative-kids-responsive-wordpress-theme-with-animation

Author: dtbaker
Created: 1st November 2013
Tested with: WordPress 3.7.1
Tested plugins: WooCommerce 2.0.18 + WidgetAreaManager 1.53 + Contact Form 7 v3.4 + Social Icons by Fairhead Creative + Column Shortcodes v0.6.1 + W3 Total Cache v0.9.3
View online demo: click here
Download theme: click here
Support forum: click here

Theme Documentation

[line]

Installing the theme:

New: we have a Screencast Video showing how easy it is to install this theme, click here to view:

https://vimeo.com/78887330

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 Pulp 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

[line]

Installing the default content so it looks like the demo site:

(this step is also covered in the video screecast linked above: https://vimeo.com/78887330 )

You can optionally install the default content so the theme looks exactly like the demo site ( http://pulp.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.

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
    Note: when activating WooCommerce please do not click the “Install WooCommerce Pages” button. If you have, please go to Pages and delete: “Cart, Checkout, Checkout – Pay, Order Received, My Account, Change Password, Edit My Address, Logout, Lost Password, View Order, Shop” otherwise you will end up with duplicate pages after installing the default content.
  3. Go to Tools > Import and choose the “WordPress” option (if it asks you to install the plugin, then yes, install the WordPress import plugin first)
  4. Locate the pulp-default-content.xml file from within the theme zip file (or just click here to download it)
  5. Upload this file to the WordPress importer

To install the default widgets, menu and other settings:

  1. Go to Appearance > Default Content
  2. Choose the options and click the 2nd button

To install the WooCommerce settings (do this last, after the other ones are finished)

  • Go to Appearance > Default Content
  • Choose the options and click the 2nd button

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: http://dtbaker.net/envato/support-ticket/

[line]

Automatic Theme Updates (recommended!)

  1. To receive automatic updates (new features, fixes, etc..) please go to Appearance > Options: ThemeForest
  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

[line]

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

[line]

Responsive

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

pulp-responsive-screenshot-demo

[line]

Customizing the Theme Colors and Fonts:

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:

wordpress-theme-settings

[line]

Setup the Home Page and the Blog Page:

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

  1. Create a new page called “Home” and choose the “Home Page/No Title” template on the right.
  2. Insert a picture on the page and put the [[fancy_border]] shortcode around it, like this:
  3. Underneath this photo start typing your home page content (eg: Welcome to … ) and save the page.
  4. Create a new blank page called “Blog”, save the page.
  5. Go to Settings > Reading and choose the “static page” option.
  6. From the drop down choose the new “Home” and “Blog” pages respectively.
  7. Please see below for setting up the home page slider.

[line]

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)

[line]

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

[line]

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/

[line]

Linking the WooCommerce shop to your Facebook Page

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.

[line]

Creating an Image Slideshow

An example of the included slideshow is available by clicking here. To create this gallery please follow these steps:

  1. Create a new page
  2. Click the “Add Media” button at the top left, just above the “Bold” and “Italic” buttons.
  3. Choose “Create Gallery” on the left
  4. Tick which photos you wish to have in the slider (or click Upload Files at the top to upload new photos)
  5. Once the desired photos are selected click the “Create a New Gallery” button down the bottom right
  6. Optional: type in a caption under each image, these captions will be displayed in a bar underneath each image as the slideshow progresses.
  7. In the “Image Size” choose the “Large Images” option
  8. In the “Slider” choose the “Yes Image Slider” option
  9. Click the Insert/Update Gallery button at the bottom right corner
  10. Save the page and view the page to see if it works.

[line]

Shortcodes:

  • Fancy Border:

    Place the [[fancy_border]] shortcode around content to give it a border, example:
  • 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. Here is an example of two columns of output, an example of columns can be seen on this page of the demo: http://pulp.dtbaker.net/home-page-1/home-page-design-3/
  • Line:
     
    Use the [[line]] shortcode to place a horizontal dotted line across the page, example can be seen here:
    http://pulp.dtbaker.net/home-page-1/home-page-design-3/
  • Latest Blog Posts:
     
    Use the [[fancy_post]] shortcode to display a list of recent blog posts on any page. Example can be seen here: http://pulp.dtbaker.net/home-page-1/home-page-design-3/
    [[fancy_posts max=4 category=optional-category-slug-here]]

  • Google Map:
     
    Use the [[google_map]] shortcode to display a map on any page. Example can be seen here: http://pulp.dtbaker.net/contact/
    [[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.

[line]

Included Widgets:

  • Opening Hours Widget:
    Useful for placing on the Contact Us page.
  • Social Icons Widget:
    Here are the social icons included within this widget:

 

[line]

Widget Background Colors:

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

[line]

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 this demo page: http://pulp.dtbaker.net/home-page-1/home-page-with-widgets/
or view the highlighted sections in the screenshot below:

img_527868092ad60

There are many possibilities for widget layouts within this theme, along with widget background colors:

animated-layout

 

To manage these widget areas please navigate to the front-end page you wish to change and look for the ‘Left/Right Column’, ‘Header’ and ‘Footer’ menu options at the top:

These menu items will allow you to change the position of widget areas (eg: Left, Right or Hidden) along with choosing which set of widgets to display on that page (from the Appearance > Widgets menu).

 

  • Header Area:
    You can turn the header widget area on by navigating to the page and selecting Header > Position > 3 Columns. This will display 3 columns of widgets at the top of the page. (The other option is ‘Full Width’ which displays a single column of widgets, handy if you have a very large widget that takes up the entire page).
    You can place any wordpress widget here from Appearance > Widgets.
  • 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 in the green area. This has the same options as the Header area.

[line]

Animation:

Various elements of the theme are setup to animate:

  • Background clouds: these jump when mouse hovers over them.
  • Menu sun: this animates on mouse over.
    animated-sun
  • Footer trees and clouds: these animate in a 3D pattern as the mouse cursor moves around.
  • Footer squirrel: this runs across the screen when scrolling down, it runs away when you click on it.
    squirrel-animate

[line]

Advanced Editing:

  • 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 this file if you need advanced custom elements.
    The file dtbaker.theme_options.php contains some of the defaul 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 pulp_comment() – this can be overridden with a child theme
  • Animated Background Elements: the elements in the animated background (eg: clouds, hot air balloon) are defined within the functions.php file, look for the below code on about line 50. If you wish to remove or add your own custom background elements please do so by modifying this PHP array. This array is passed to the front end and rendered via javascript to support the mouse hovering animation.
    $params['backgrounds'] = array(
  array(
    get_template_directory_uri().'/images/background_balloon.png', // image
    260, // px from top
    570, // px from middle
    108, // px image width
    141, // px image height
  ),
   ...

[line]