Home » Community Themes » New child theme for Genesis and your WP-e-Commerce music store

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.

This theme fully integrates with Gold Cart and the MP3 Music player - both of which are required to recreate the complete look of the theme.

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

Of course you can view a demo here and the myTunes child theme can be downloaded from here.

Setting up your myTunes music theme:

To start, make sure you’ve got WordPress set up with the following

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
/%category%/%post-name%/
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

Reading Settings
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
Custom Menus
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.

Et Voilà!

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)

Widgets

In the widgets section use the following settings.

Header Right Widget
Add Shopping Cart Widget

Header Centre Widget
Jplayer 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

Presentation
Choose Settings » Store » Presentation.

Go through this page adjusting as follows

Button Settings

Button Type: Add To Cart

Hide “Add to cart” button: No

Product Settings

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
Thumbnail Settings
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

Resources

There are full page screenshots of both the WPEC Settings and the Genesis Settings available Below

- Genesis Settings
- WP e-Commerce Settings
- Download myTunes Genesis e-Commerce Theme


7 Responses to New child theme for Genesis and your WP-e-Commerce music store


  1. JonathanBlanco December 17, 2011 at 1:40 am

    Thanks. I have been hoping for a Genesis framework child theme that works well with wp-e-commerce.

    Is there any reason I shouldn’t use for a non-music shopping site and without the mp3 player?

  2. Mychelle December 19, 2011 at 3:25 pm

    Hi there,

    You can try this theme but it has been styled and setup to work with the music player and a list view.

    However stay tunned we are bringing out a default WP-e-Commerce child theme for genesis any day now.

    It might be more what your after :)

  3. JonathanBlanco December 21, 2011 at 3:53 am

    Oh Joy!

    Hurry please! You will really make my Christmas merry. We want to go live in the first week of the new year. We only have one product so it’ s not to much of a stretch. :-)

    Genesis Rocks!

    • Solange April 13, 2012 at 11:35 pm

      For giving your ucrtomess great experience when they use your site, you should make sure that you never leave unanswered emails for more than 48 hours, or your customer is gone.

  4. Greg Kerstin March 16, 2012 at 9:31 pm

    I am happy to play around with your new child theme. Please view this page as shadowbox was removed from the WP Repo… http://sivel.net/2011/12/shadowbox-js-plugin-pulled-from-the-wordpress-org-repository/

  5. Alex May 29, 2012 at 12:25 pm

    Does this easily support multiple file formats, such as FLAC and MP3 ?

    • Mychelle May 30, 2012 at 1:33 pm

      Hi Alex,
      Thanks for getting in touch the J player plugin will only play mp3 file formats for the song previews.
      As for WP e-Commerce and the downloadable file attached to the product.., it might not support all of these music file types. However you can always zip the album of the tracks and assign them to the product that way.
      Thanks
      Michelle