New child theme for Genesis and your WP-e-Commerce music store
Hi team. I’m pleased to announce that our friend and colleague Dee Teal aka the Web Princess aka Genesis Theme creator extraordinaire has developed an e-Commerce Genesis child theme called myTunes that works hand in hand with the WP-e-Commerce Plugin. The myTunes theme has been developed based on feedback from people in the music industry and has been built to help people sell music online.
For those of you that already own the MP3 Music player Plugin and would like to test out this theme then you will need to grab an update of the music player to enjoy the new theme / style, of course if you don’t have the latest version it will still work with any version of our music player.
Below is a tutorial on how to recreate our test site look and set up your own, you can change and add settings at your desecration but its a good idea to follow the tutorial first.
We have made this slightly easier for you by providing a button to automatically set the recommended WP-e-Commerce Presentation page settings – Select this option from the myTunes theme settings and half the tutorial is already completed for you!!
Setting up your myTunes music theme:
To start, make sure you’ve got WordPress set up with the following
- WordPress – (Free from http://wordpress.org)
- Genesis Framework (premium theme framework available from Studiopress)
- WP Ecommerce plugin (free from the WordPress Repository)
- WP Ecommerce Gold-Cart (premium plugin from Get Shopped) – (activate the Gold Cart Plugin in via Dashboard » Store Upgrades)
- WP Ecommerce MP3 Player (premium plugin from Get Shopped)
- Also compatible with Shadowbox js Plugin (free plugin from the WordPress Repository)
Once you have everything installed and activated here’s what you need to do in order to replicate the theme demo.
Genesis Specific Settings
Genesis Settings default to having the Primary Navigation selected – the myTunes theme doesn’t require this as the menu is all set in the widget area so I generally turn it off… though doing so, or not, doesn’t actually affect anything.
myTunes Specific Settings
All the settings on this page are optional. It’s here that you can specify where your facebook/twitter/google sharing links show up (pages or posts or both). It also allows you to link to Facebook/Twitter/LastFM and to your RSS feed (automatic) to keep listeners up to date with your latest releases. Finally there are WP e-Commerce settings that give you the option to populate the optimum settings above select yes to save yourself time! (resets the settings on your WP e-Commerce Presentation Page).
Changing the favicon.ico
Create a new favicon in your favourite image editor and name it favicon.ico. Upload it to the theme directory and overwrite the existing one – refresh your page – if changes aren’t reflected immediately, clear your cache and refresh your page again.
WordPress Specific Settings
Set the site Permalinks to
Custom Header Image
myTunes theme supports the custom header (for logo images) feature – these settings are managed in Appearance » Header
Create the basic pages
- Home – choose page template ‘Default Template’
- Bio (optional) – choose page template ‘Default Template’
- Blog (optional) – choose page template ‘Blog Template’
- Video (optional) – choose page template ‘Default Template’
- Change the name of the Products Page (Created automatically by WP e-Commerce) to All Music
Create Product Categories
- 1x for each album
- 1x for Merchandise (optional) – slug = merchandise
Go To Settings » Reading » and set – Front page displays a static page – choose Home
If Blog functionality is required and blog page already created, adjust the same settings in Reading to assign posts to your blog page
Go To Appearance » Menus
Create a main menu for the first menu section – I called mine – main – and added the following pages
Home, Biography (basically, the about page), Blog, All Music
In order for the various custom icons in the published menu to appear, individual menu items need CSS Classes assigned.
(Actually, this is one of the advanced features of WordPress so possibly won’t be visible in your Menu Settings, here’s how you find them.)
In Screen Options choose CSS Classes from the ‘Show Advanced Menu Properties’ section.
Now adjust the settings for each menu item as follows – while your page names/slugs may be different, it’s important to use the outlined (below) CSS classes because the individually styled icons are specific to these CSS Classes.
- home = home
- blog = blog
- bio = about
- video = video
- product page (called All Music in the Demo) = products
- merchandise = merchandise
Create a second menu for Merchandise. Include on this, the product category – merchandise (optional) and the video page (also optional).
Because Merchandise is a WPEC Product Category it won’t show in the usual category list – again, hit up the Screen Options and add Product Categories from the available ‘show on screen’ options.
Note: (Categories/Albums get added via the Product Category widget, not needed in Menu)
In the widgets section use the following settings.
Header Right Widget
Add Shopping Cart Widget
Header Centre Widget
Primary Sidebar Widget
Add the Search Widget - at this point you could use the default site search in this position and use the advanced search option in WP e-Commerce presentation for your product search section. Depends really on how many non e-commerce pages you have and whether they require search functionality… otherwise WP e-Commerce Live Search is otherwise suitable.
Add Custom Menu – Select the (main) menu you created in the Custom Menu step – no need to add a title.
Add Product Categories Widget – I gave it a title of albums for this demo – and chose the categories (albums) we created earlier. I elected not to include Merchandise in this category list.
Add Custom Menu – use the (merchandise) menu created in the Custom Menu step – no need to add a title.
WP Ecommerce Settings
Hint: To skip the WP-e-Commerce product page settings select to use the recommended default in your myTunes setting page
Choose Settings » Store » Presentation.
Go through this page adjusting as follows
Button Type: Add To Cart
Hide “Add to cart” button: No
I have No selected for all the Product Setting options, these are at your discretion.
Product Page Settings
Product Display: List View
Grid view settings: 4 Products Per Row
Show images only Not Selected
Display Variations Not Selected
Display Description Selected
Display Add to Cart Button Selected
Display More Details Button Not Selected
Show list of categories Yes
Select what product category you want to display on the products page: Show all products
Sort Product By: Time Uploaded
Show Breadcrumbs: No
Product Groups/Products Display: Product Groups Only
Show Subcategory Products in Parent Category: No
Show Search: No
Replace Page Title With Product/Category Name: Yes
Display Featured Product above Product Pages: No
Shopping Cart Settings
Cart Location: Widget
Display “+ Postage & Tax”: No
Product Category Settings
Show Product Category Description: No
Show Product Category Thumbnails: Yes
Show Product Count per Product Category: No
Use Category Grid View: Yes
Default Product Thumbnail Size: 120×120
Default Product Group Thumbnail Size: 148×148
Single Product Image Size: 250×250
Crop Thumbnails: No
Show Thumbnails: Yes
Use Lightbox Effect for product images: Yes/No You may use either of the bundled lightbox plugins – in which case, select Yes or if you wish to use Shadowbox JS choose no and install and activated that plugin.
Lightbox script to use: Colorbox/Thickbox – your choice; however, the demo site uses Shadowbox.
Show Thumbnail Gallery: Yes
Gallery Thumbnail Image Size: 120×120
Other settings for Pagination/Comments at your discretion
Jplayer (MP3 Music Player) Settings
Products » - jPlayer
Choose Style myTunes for the Mp3 Player
Display Mode: Widget
There are full page screenshots of both the WPEC Settings and the Genesis Settings available Below