A very basic screenshot of how the main page looks
How to turn a normal WordPress installation into a working online shop (without too many tears)
Loads of people I know would like to set up shop online, and either don't have the time or money to have a designer / programmer come in and do the job for them. I was helping someone do exactly this, and I thought I would share the technique with everyone.
(Trust me to pick something difficult-ish to work on as my first contribution to the WordPress universe!)
Update (29 September 2006): Wow. I did not expect all this attention. Thanks for the comments on digg and other sites, both positive and negative. Read my bloog entry for more of my thoughts, if you care.
This assumes some familiarity with HTML and CSS, and access to graphics manipulation programmes and FTP (I use The GIMP and DeluxeFTP respectively.) It will be pretty tough to do if you're a complete newbie to HTML and CSS.
If you've not used WordPress before, now is the time to be dazzled by the famous five-minute install. Download the .zip file and follow the installation instructions. If you have any problems with the installation, do not hesitate to search the official support forum.
There is one plugin you must download and activate: Custom Query String. If you want to accept Paypal on your site, you'll need to follow the instructions for WordPress Paypal Integration.
(I totally forgot to note earlier: you can't view Quicktags if you use Safari.)
There are some optional plugins that may make your life easier: Paged Comment Editing, Spam Karma, WP-Contact Form (or the one with spam protection), and to be really hip and with it, the Widgets plugin (find some useful widgets on WordPress Widgets). More on widgets later.
Since I have used PNG files, I would highly recommend using the PNG transparency fix (JavaScript option) by Bob Osola in the installation. Follow the installation instructions - I would upload the .js include file to the root directory, and include this text between your <head> and </head> tags:
<!--[if lt IE 7.]> <script defer type="text/javascript" src="http://www.YOURWEBADDRESS.com/pngfix.js"></script> <![endif]-->
Next, download WP Shop (widget-friendly) (no widgets), unzip it (if you're using the no widgets theme you should rename the folder to wp-shop), and upload the entire wp-shop folder to wp-content/themes. Log in to WordPress, and click on Presentation. You can activate the theme there.
What the h*^% are Widgets?
Widgets are things to make the admin's life easier. It doesn't require any coding knowledge to change your sidebar around if you've got the Widgets plugin (and a few widgets) installed. I'm personally too anal retentive to want to use widgets. I would recommend using the non-Widgets theme, but I included a Widgets-friendly theme so I don't look too out of it. Making it work for you How to create your categories Rename the default category to News (Manage -> Categories -> Edit). You do want a news category that updates your customers, don't you? Create as many parent and child categories as you want. Please take note of the category ID number after you create a parent category, we're going to need it next. Log into your FTP account, then go to wp-content/themes/wp-shop/ and download the category-2.php file. Make a copy of the file and name it category-[ID number of new category without these brackets], and upload it to the wp-shop/ folder. For every parent category, create a new png image, with the same name as the category (eg. Bracelets.png, see the demo image for size restrictions) and upload it to the wp-shop/ folder. Go to Options -> CQS in your WordPress admin panel. Select the name of the parent category from the dropdown list in the second row of options (it says Category), type 4 in the number of posts, and click the 'Add' button. If you are creating a new child category, just do it in Manage -> Categories and remember to select the appropriate Parent category. You don't have to fiddle around with this one at all, it will be sorted out automatically. How to create Pages To add Pages (e.g. About, Shipping, Contact): To create a new page, go to Write -> Page. I am assuming you want a contact form. See the plugin's documentation (linked above) for how to insert the form in a Page. Posting products to your new WordPress-powered shop To make a post in the News section: To make a post in product categories: I would recommend this format:
Simply click Write, make sure your 'News' category is selected on the right hand side, and post away!
Click Write -> select the category (on the right hand side) -> write a title (usually your product name) -> write your post (see below)<div align="center"><img src="yourimageurlhere" width="inpixels" height="inpixels" alt="alternatetexthere" /> [then a line break]
[Click on the Paypal button in your Quicktags and follow the instructions, and the code should be inserted here]</div> [then two line breaks]
Product description, colours, specs, price, etc. Whatever you want to say about your product!
Below the 'Post' space is the image upload space, and below that again is the 'Optional excerpt' space, which we will be using for displaying your products in the index and category pages.
I would recommend this format:
<img src="yourimagethumbnailurlhere" width="inpixels" height="inpixels" alt="alternatetexthere" align="left" />Brief description to pique interest here
[The 'Details' link is generated automatically, you don't need to do anything]
Uploading images:
I have used the following file names for your default images, located in your theme folder (wp-shop/): tiled.png, title.png, news.png, intro.png. Please stick to these names as you create your own images because they are coded into the theme templates. Please pay attention to the maximum image widths!
I'm going to presume that you have a products or gallery folder that will store your product images on the server. Upload all your product images to that folder. Please, in particular, remember to create a thumbnail so we can use it in the Optional excerpt field. As you can probably tell, the height of the thumbnail and amount of text you put in the Optional excerpt with determine how tall your box is going to be on the index and category pages. If you want them to be of uniform height, you must keep track of the height of your images, and how much you want to say (obviously). I would recommend a thumbnail size of 100x100px.
(I included item.jpg and item-thumb.jpg files so you can see what the maximum product image sizes are - you don't need to upload these to the theme folder.)
If you don't know how to insert an image into WordPress, please see my recommended format above.
Changing the colours of the theme
I have used very simple colours for the default layout. If you're not keen on them at all, change the colours in the CSS file (in the shop/ folder, which is extensively commented). Try this Colour palette creator if you're stuck for inspiration.
Other sites that may help you with images used for designing your graphics:
Stock.xchng
Morguefile
Flickr Stock repository group
For tiled backgrounds:
Squidfingers
Bloggrounds
I'm not guaranteeing that this theme and technique will work in all cases, I discovered it worked for this particular installation I did, and so hope it can help others. If you used it and appreciate the work I've done, please consider sending a donation my way. Every dollar helps!