To purchase a copy of this WordPress theme please see here: http://themeforest.net/item/kids-toys-wordpress-shop-theme/154848
Table of Contents
- CSS and Customization
- Font Face – Special Font
- Setting up the Home Page
- Setting up the Contact Page
- Sidebar Images
- Setting up the Shop
- Setting up the Main Menu
- WordPress widgets
- PSD files
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-v2.1.zip that comes in your download. Click “Install Now”.
Then click on Appearance > Options: ThemeForest to complete the installation.
B) CSS and Customization: – top
The theme comes with an easy Cusomization tool available from Appearance > Customize. Here are the available options:
The CSS for this template is in the main wordpress theme stylesheet file called style.css – edit this file for advanced changes that are not available through the interface. A moderate level of web development skill is required to edit CSS files.
Each section of these stylesheets is separated by comments to make it easier for you to change where needed.
C) Font - top
To change the special fonts used on the website please go to Appearance > Customize from the WordPress backend. Here are the available font style and size options:
D) WordPress Home Page – top
Setting up the wordpress home page is easy. Follow these steps:
- Click Pages > Add New
- Create a page called “Home”
- In the “Page Template” option choose “No title”
- Insert your banner image into the page ( click here to download the sample banner image, as seen on the demo home page)
- Under the banner type in some welcome text.
- Type the WooCommerce shortcode: [recent_products per_page="4" columns="4"] to get a list of recent products.
- Type the shortcode: [latest_posts number="5"] to get a list of the 5 most recent blog posts on the home page.
- Choose the “Template” as “No title” and save the page.
- Go to Settings > Reading
- Choose the “static page” option, and then select “Home” from the home page. Save the settings.
- Visit your home page and test.
E) WordPress Contact Page – top
The contact page allows your customers to email you through the website. The contact form is handed by the Contact-Form-7 plugin. Please ensure this plugin is installed (it should be installed automatically when the theme is installed).
- Create a new form by going to the “Contact” menu on the left of WordPress backend
- Fill in the contact form settings
- Copy the short code (eg: [contact-form-7 id="68" title="Contact form 1"] )
- Create a new page called “Contact”
- Paste the above shortcode onto this page.
- Use the Google Map shortcode to create a map of your location, here is an example google map shortcode that can be copied and pasted:
- [google_map address="Gold Coast, Australia" height=400 enlarge_button=1]Our Studio:
1 Smith Street,
F) How the shop works – top
This theme supports the WooCommerce shopping cart plugin. WooCommerce should install automatically upon theme installation, however if it doesn’t then you can go to http://www.woothemes.com/woocommerce/ and install it manually.
Help and support for using WooCommerce (and its many thousands of features) can be found on the WooCommerce website: http://www.woothemes.com/woocommerce/
G) Sidebar Images - top
This theme uses the image-widget plugin to display images in the sidebar area. This plugin should install by default when the theme is activated (if it doesn’t install automatically, install it from here).
This is what the widget will do, display images in the sidebar:
To set this up please go to Appearance > Widgets and drag the “Image Widget” over into one of the Sidebar Columns and fill in the details as per the below screenshot:
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!)
I) Full Width Page and Page Templates - top
When creating a page you will have the “Template” option on the right. The “No title” template will not output a title at the top of the page (useful for the home page where you want the top banner image to be the first thing on the page).
To create a full width page you will want to “hide” the sidebar. Please go to the page and choose the “Left/Right Column” menu from the top, then choose “Position” and choose “Hidden” (see screenshot below for more details)
J) Widgets and Sidebars – top
Click on Appearance > Widgets. Here you can click/drag the desired widgets into the widget areas on the right.
To control which widget area displays on which page (and if it should display on the left or right of a page) please navigate to the page and choose the option from the top, like so:
I) PSD Files – top
I’ve included some photoshop files with this theme:
- Home – The main layout
- About – Example of an inside page
- Contact – Form & contact information
- Bottom Scene – modify this design and save as a transparent png
- 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.
- First simply make the changes in photoshop
- Turn on the slices (view > show > slices) they appear as blue boxes
- 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.
- You may need to hide some of the backgrounds and text when saving certain images. Use the existing images as a guide.
- 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.
- Logo font: http://www.dafont.com/atomico.font
- Title Font: http://www.dafont.com/emma-sophia.font
- clouds: http://benblogged.com/?p=54
- star bursts: http://www.freevectors.net/details/3D+Vector+Stars
- hand prints: http://www.iheartvector.com/2009/07/16/hand-vector-pack/
- splatters: http://www.vecteezy.com/vf/33-Splats-and-Hatchings
- Palm tree: http://www.freevectors.net/details/Warm+Christmas
- Sun http://www.freevectorstock.com/113-Happy-Dolphins-Vector-vector
- Birds: http://benblogged.com/?p=131
- Rainbow: http://aramisdream.deviantart.com/art/Starry-Night-105216462
- Boat: http://cemagraphics.deviantart.com/art/Sailingship-Icon-96460904
- Dolphins: http://www.freevectorstock.com/113-Happy-Dolphins-Vector-vector
- Lighthouse: http://thesunshadow.deviantart.com/art/Vector-Stock-Pack-Number-One-66971668
- Starfish, Bubbles, Fish with teeth: http://www.freevectors.net/details/Acuactic1
- Blue fish: http://www.vecteezy.com/vf/771-Blue-Fish
- Octopus: http://vector4free.com/vectors/id/5
- Fish silhouettes: http://www.blog.spoongraphics.co.uk/freebies/free-vector-pack-safari-and-zoo-animals
- Blue Monster: http://www.blog.spoongraphics.co.uk/freebies/free-cute-furry-monster-icons-for-mac-pc-and-web
- Sunrays: http://www.freevectors.net/details/Summer+Landscape
- Mushrooms: http://www.freevectors.net/details/Cosmic+Dream
- Frog: http://www.tutorial9.net/resources/cute-critters-free-icon-pack/
- Blue Pattern: http://www.freevectors.net/details/Sky+Dream+Background
- Red Plane: http://babasse.deviantart.com/art/Old-School-79460710
- Yellow pattern: http://vectorsdesign.blogspot.com/2009/09/50-free-business-card-templates.html
- Contact Icons: http://famfamfam.com/lab/icons/silk/
- Green Basket: http://pixel-mixer.com/
- Plus icon: http://wefunction.com/2008/07/function-free-icon-set/
- Tick icon: http://pixel-mixer.com/
- Bear in trolley: http://www.vectorsonfire.com/icons-misc/ecommerce-set-vector-ai/
- Blimp: http://www.iheartvector.com/2008/05/05/blimp-vector/
- Blue Birds: http://www.designfreebies.org/free-vectors/free-vector-twitter-follow-me-badges/
- Flag shape: http://www.iheartvector.com/2008/08/22/banner-vector/
Sand theme bottom:
- surf boards: http://www.freevector.com/surfboards/
- sand castle: http://www.iconspedia.com/icon/sand-castle-16702.html
- little girl: http://www.pinkmoustache.net/social-vector-kids/
- 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
- Happy family 1:http://www.sxc.hu/browse.phtml?f=view&id=1076538
- Happy Family 2:http://www.sxc.hu/browse.phtml?f=view&id=1075968
- Baby eating car: http://www.flickr.com/photos/iboy/3238835144/in/set-72157617942003148/
- Child trolley: http://www.flickr.com/photos/iboy/3633999040/in/set-72157617942003148/
- 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/
- Boy Bubbles: http://www.flickr.com/photos/davidreber/3553345222/
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.