“Kids Toys” Wordpress Documentation by “Hayley Crook (dtbaker)” v1.0

“Kids Toys”

Created: 14/06/2010
By: Hayley Crook
Email: themeforest@blueteddy.com.au

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Table of Contents

  1. Installation
  2. CSS
  3. Font Face - Special Font
  4. Setting up the Home Page
  5. Setting up the Contact Page
  6. How the Shop works
  7. Setting up the Shop
  8. Setting up the Main Menu
  9. Email Newsletter
  10. Wordpress widgets
  11. PSD files
  12. Credits

A) Wordpress Installation - top

Installing the theme is easy. 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 a file. Select the zip file kids_toys_theme.zip that comes in your download. Click "Install Now".

Important: Once the theme is uploaded and installed, click on the new "Options: Home Page" menu item underneath "Appearance" to complete the installation.

I also strongly recommend you install the re-captcha plugin for wordpress (available here: http://wordpress.org/extend/plugins/wp-recaptcha/) this will give you re-captcha spam prevention on the contact page, the product review page, and the product ask-a-question page.

B) CSS: - top

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

C) Font Face - Special Fonts - top

You will notice the menu and titles on the website uses a non-standard font called "Emma Sophia". You can find out more information about this font by going to this website: http://www.dafont.com/emma-sophia.font

D) Wordpress Home Page - top

Setting up the wordpress home page is easy. Simply go to the "Appearance" » "Options: Home Page" are in your Wordpress admin console. Here you will be able to upload a new PNG logo for the top of your website, along with controlling all the banners and where they link to from the Home Page. You can use the provided PSD files to create your own similar banners to the ones we provided.

You can also control how many "latest posts" to display on the home page by entering a number into the box.

E) Wordpress Contact Page - top

The contact page allows your customers to email you through the website. The settings page allows you to enter (optional) SMTP details for email delivery incase your web provider has normal php mail() issues.

On this page you can also enter the email address that contact form will be delivered to. You can enter multiple email addresses here separated by a comma (,) if you wish the form to go to more than 1 person.

F) How the shop works - top

The simple wordpress shop is a perfect way to get a shop up and running with minimal effort. This shop allows you to add products to your website in different categories. The products can have photos, a description, and a number of price options (eg: Green shirt is different price to a Blue shirt).

When the shop is enabled customers will be able to add products to their shopping cart. Once a product is in the shopping cart the user can "check out" and proceed to enter their details. This shop does not allow people to register as a member. This makes the checkout process faster.

Once an order is placed, a copy of the order is emailed to you as administration, and a copy of the order is emailed to the customer who entered their details.

This simple shop does not keep a copy of the order details in a database anywhere. You will need to keep track of orders via email.

There are some additional features for the shop that you can enable. Such as "product reviews" which are like wordpress comments, people can leave a review of the product and you can approve it like a normal comment. There is also a "share this" link so people can share the product on facebook or via email. There is also an "ask a question" area which emails a question about the product directly to you.

G) Wordpress Shop - top

The shop is enabled by default. All shop related optinos are under "Appearance" » "Options: Shop" in the wordpress control panel. You can disable the shop from here if you would like to use this theme without a shop.

All the options on this page are pretty self explanatory, simply change the values to suit your needs and click the "Save Changes" button.

If you do not wish to use one of the payment options just delete the settings for that payment option.

The emails that are sent through the shop will use the same SMTP details configured above if you set them.

H) 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. (note: you can use custom shop categories in this menu as well!)

H) Newsletter - top

The newsletter plugin (http://codecanyon.net/item/wordpress-email-newsletter-plugin/149180) comes with this wordpress theme. Please visit the newsletter support forum if you have any questions: http://dtbaker.com.au/support-forum/categories/wordpress-newsletter-plugin.

Go to plugins, click add, click upload, and upload the wp3newsletter_plugin.1.2.zip file. Once it's uploaded, click activate. Then click on the 'Newsletter' tab on the left and follow the steps.

To adjust the kids toys newsletter template, look in this folder: wp-content/plugins/wp3newsletter/ext/templates/KidsToys/

Specifically you might want to adjust this newsletter header image: wp-content/plugins/wp3newsletter/ext/templates/KidsToys/images/newsletter_header.jpg

J) Widgets - top

Click on Appearance > Widgets. There is a "Product Categories" widget there. This will display categories from your shop.

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

J) Sources and Credits - top

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

Fonts:

Vectors:

Stock Photos:

 

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.

dtbaker

Go To Table of Contents