How to Build a Custom WP e-Commerce Theme (Part 1)

Wednesday, 25 August 2010 03:00

If you have ever tried to create an E-Commerce shop with WordPress, I am sure you know WP e-Commerce. If you are a beginner and don’t know that much about it, I will suggest you to read this tutorial so that we are good to start the complex development. In this article I will show [...]

You can preview the theme here or download djavu-shop work in progress theme here.

Tutorial Requirements

This tutorial assumes you are fairly comfortable using the following languages

Html
CSS
jQuery
PHP
Wordpress

What will we learn in this tutorial?

Creating a WP e-Commerce Theme
Brief introduction to Wp e-Commerce file relationship
A dynamic accordion slider (using jQuery Kwicks) that uses the company categories as content
Playing with CSS3 to add a nice touch

Preview of our WP e-Commerce Theme

The theme I’m working on is named Djavu-shop. The main feature of this theme is it’s accordion slide on top of the products. This accordion displays the available categories and/or brands. Sliding over the accordion will bring a brief description of the category. A click on the link will display all the products of this category or brand.

A few fancy effects such as the buttons and shadows are made with CSS3.This tutorial is the first part of a suite of tutorials. For the first part we will only focus on the product page (see picture above).

Anatomy of a WP e-Commerce theme

Before getting stuck into the build process, it’s important to know how WP e-Commerce themes work. Open the default theme (wordpress-directory)/wp-content/plugins/ wp-e-commerce/themes/default), you’ll notice that it’s all contained in a folder, and there’s around 9 core files. Note the default theme is always loaded! Your theme only overrides the default theme behavior. In our theme we will include more files which allow extra customization.

Here’s an overview of the main files you’ll be working with:
cart_widget.php // Cart widget to be displayed on the sidebar for example category_widget.php // Displays a widget with the categories and brands given in WP e-Commerce default.css // Stylesheet of WP e-commerce. Original file is always loaded! functions.php // grid_view.php // images/ // Folder containing WP e-Commerce related images list_view.php // products_page.php // Page where all products are displayed, per category, brand, etc… shopping_cart_page.php // It’s the checkout page. Where the client puts his name, address etc… single_product.php // Description of a product
Each of these files then contains a series of PHP template tags. These tags tell WP e-Commerce where to insert the dynamic content. A good example is the <?php echo wpsc_the_product_title (); ?> tag, which will display your product title (or name if it is more understandable).A catalog of all available template tags are here . Probably you will find a tag that will do exactly what you want or if it is WordPress related try the WordPress Codex.

Create a new theme out of the default

The best way to start creating your own theme is to make a copy of the original theme. The default theme is in (wordpress-directory)/wp-content/plugins/ wp-e-commerce/themes/default. Duplicate the “default” folder and call it “djavu-shop”. After this open the new created theme folder and rename the default.css file to djavu-shop.css. Delete everything inside your css file (!) and put the following code inside of it.

<code>/*Theme Name: Djavu-Shop Theme
Theme URI: http://www.djavupixel.com
Description: Just another WP-e-commerce theme
Version: 0.2
Author: Leonel Hilario
Author URI: http://www.djavupixel.com*/</code>

Login to your wp-admin section and browse to Store>Settings>Presentation page, click on the drop-down list and djavu-shop theme should be in the list. Select it and save changes.
Create a “js” folder inside our theme. We will put some JavaScript inside. Download jQuery kwicks and put “jquery.kwicks-1.5.1.pack.js” on the js folder created before.
In this tutorial we will only work with djavu-shop.css and products_page.php. The next tutorials will focus on other files.

Reminder

Inside the “djavu-shop” folder you should have the following files:
cart_widget.php category_widget.php djavu-shop.css functions.php grid_view.php images/ js/ list_view.php products_page.php shopping_cart_page.php single_product.php

Preparing WP e-Commerce for our theme

Add 4 categories in WP e-Commerce

Login into your WordPress account and then click on Store>Categories. For this example we will create 4 categories “MacBook Pro”, “iMac”, “iPod Touch” and “iPhone”. Add a small description and a picture to all categories! In our example we need 4 pictures of at least 320 pixel width and 320 pixel height (for this tutorial I used 4 pictures of 576×320). Here below is an example screenshot and here you can download the pictures.

For the lazy one like me here are the products descriptions:

MacBook Pro: The fastest, most powerful MacBook Pro ever. Three Times.
iMac: The ultimate all-in-one. Turbocharged.
iPod Touch: A great portable game player.
iPhone 4: This changes everything. Again.

Configure presentation settings

Just copy the same settings as in the picture below. Please note that this picture is tall. Click on the image to open the full size

Let’s start building our theme!

Open products_page.php and go to line 35 it you be “<ul class=’wpsc_categories’>“. Delete line 35 to 48, just before the endif. Here we will add Kwicks for jQuery which is an accordion slider.

Here is the PHP/HTML code:

<code><ul class='kwicks'>
<?php wpsc_start_category_query(array('category_group'=>get_option('wpsc_default_category'), 'show_thumbnails'=> get_option('show_category_thumbnails'))); ?>
<li>
<div class="kwicks_inner">
<div class="image"><?php wpsc_print_category_image(); ?></div>
<div class="caption-title transparent_class">
<?php wpsc_print_category_name();?>
</div>
<div class="caption transparent_class">
<a href="<?php wpsc_print_category_url();?>" class="wpsc_category_link"><?php wpsc_print_category_name();?></a>
<?php if(get_option('wpsc_category_description')) :?>
<?php wpsc_print_category_description("<div class='wpsc_subcategory'>", "</div>"); ?>
<?php endif;?>
</div>
</div>
</li>
<?php wpsc_end_category_query(); ?>
</ul></code>

We created an unordered list and inside of it we put we kwicks_inner class. Inside we put the picture as we think it is more flexible than putting it on the CSS. In class caption-title we put the title of the category. On mouse over the class caption will be displayed which contains the title and the small description that we entered before (see Preparing WP e-Commerce for our theme). Now open djavu-shop.css and paste this CSS code:

wpsc_print_category_image() prints the category image unscaled
wpsc_print_category_name() prints the title of the category
wpsc_print_category_description is the description we gave before to this category
wpsc_print_category_url() link to the category content


<code>/* Product Page - The accordion (kwicks) effect on top of page */</code>

<code> </code>

<code>.kwicks {
list-style: none;
position: relative;
margin: 0;
padding: 0;
border: 1px solid #ddd;
box-shadow: 2px 2px 5px #ddd;
-moz-box-shadow: 2px 2px 5px #ddd;
-webkit-box-shadow: 2px 2px 5px #ddd;
}</code>

<code> </code>

<code>#content #products_page_container ul{
margin: 0;
padding: 0;
}

.kwicks li{
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
}

.kwicks li{
float: left;
width: 160px;
height: 320px;
margin-right: 5px;
}

.kwicks li a {
color: #fff;
}

.kwicks .kwicks_inner {
width: 320px;
}

.kwicks .image {
width: 90px;
height: 240px;
float: left;
}

.kwicks .caption-title {
background-color:#333333;
color:#CCCCCC;
float:left;
font-size:16px;
margin:40px 0 0 16px;
padding:3px 0 3px 16px;
text-align:left;
width:100%;
}

.kwicks .caption {
display: none;
text-align: center;
width: 320px;
height: 80px;
color: #ccc;
font-size: 16px;
float: right;
/* Playing with CSS - Adding some transparency */
background-color: #333;
}

.kwicks li.active .caption {
display: block;
}

.kwicks li.active .caption-title {
display: none;
}

</code>

<code>.transparent_class {
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}</code>

So this was a bit of code. As you may read we added a few CSS shadows. The .kicks li.active class is fired when a mouse passes over the accordion. Here we hide the .caption-title to show the .caption which contains the title and description of this category. For more information about Kwicks please read the well documented page or if you want to try other nice effects.

Now we hase the HTML and CSS code and here is the JavaScript code that will create all the magic:

<code><script src="<?php echo $djavu_theme_url ?>/js/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.kwicks').kwicks({
max : 320,
spacing : 0
});
});
</script></code>

Note that you can put this at the top oder bottom of the page. I would recommend at the bottom of the page so that the layout loads faster.

Conclusion

This may look a bit difficult at first sight, but it’s not and it is the first part of a series of tutorials. Make a temporary install of WP e-Commerce and fill it with dummy content this will really help understanding how WP e-Commerce works and will also help to find errors. In our next tutorial we will focus on more general parts of the design as I am working on it ;-)

Preview the theme | Download files

Further Discussion

Have some thoughts of this theme? Give them to me, I’d love to hear them. This is as much a proof of concept as it is a tutorial. It introduces basic html, css, jQuery, PHP and the WP e-Commerce plugin. I’m sure there will be people out there who will feel that a perfect e-commerce start page is something else. If so, what would you do?