class="align-right" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2011/07/featured-wordpress.jpg?54167" alt="custom post types in wordpress"/>Last time I showed you how to
title="How To Make Your Own Events Listing Using Custom Post Types [WordPress]" href="http://www.makeuseof.com/tag/events-listing-custom-post-types-wordpress/">create a simple events listing using perhaps the most powerful feature of WordPress 3.0 – custom post types. After some requests to develop this further, today we’ll be creating a product review database to tie together everything we’ve learnt so far.
You’ll be able to maintain a separate list of products using custom post types, each with an associated image, as well as some meta-info such as price, rating, specifications – and we’ll finish it all off with a way to display them in a sidebar widget and an index page.Sounds good? Read on.
Requirements:
You’ll need a working WordPress 3.0+ self hosted install, and this will make use of extensive PHP coding. I’ll give you the code, but you’ll need to be relatively comfortable with PHP and XHTML to adjust variable names to your needs or change the style. If you need a quick beginners course on CSS and XHTML, may I suggest our wonderful free
href="http://www.makeuseof.com/pages/download-learn-to-speak-internet-your-guide-to-xhtml">beginners guide to download. I’d also suggest you use a cleanly coded but basic theme – the default Twenty-Ten or Twenty-Eleven theme is actually quite complicated to edit, so try this first on something simpler before trying to integrate with that.
href="http://www.makeuseof.com/tag/events-listing-custom-post-types-wordpress/">Create Post Types
If you read last weeks tutorial, you should be somewhat familiar with creating a custom post type in WordPress. Copy and paste
href="http://pastebin.com/bVLNagJT">this base code into a new plugin, activate it, and begin adding some new products so we have a dataset to work with. (Note: If you’d rather just download the complete and full code now without trying to add things along the way,
href="http://pastebin.com/g1zYiZN5">use this finished code instead. You can still follow along with the tutorial and customize it as we go)
class="aligncenter" style="border: 0pt none;" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2011/07/customposttype.png?54167" alt="custom post types in wordpress" width="170" height="111" />
It’s also wise to decide now what kind of meta-info you want to associate with each product. A database of digital cameras for instance might need:
- Retail Price
- Resolution
- HD Video
- Purchase Link
- Rating
Rather than adding this info directly to the description of the product (the ‘post content’), we’re going to create custom fields to hold this info. On the add product screen, make sure you’ve enabled custom fields, then create a new field for each info set. You’ll only need to create new fields once – the next product you add you’ll be able to select the name of the custom field from the drop down box. Don’t forget to add a featured image, as well be using this to display alongside the info product later on.
Single Product Template
If you try to view one of your products now, you’ll probably get a 404 – Not Found error. To fix that, head into the permalinks settings of WordPress and just hit Save Settings once. Now when you view one of your new product entries, depending on your theme, you might see something a little plain. The title and description text are there, but what about all our custom meta info and the image?
To customize the single product views, we’ll need to customize a new template file called single-products.php – do this by duplicating your existing single.php so we have the groundwork in place and aren’t starting from scratch.
class="aligncenter" style="border: 0pt none;" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2011/07/single-productsphp.jpg?54167" alt="custom post types" width="177" height="122" />
At this point, I’m going to make a very small change to the line that displays “Written by (author) on (date)”, so instead it just reads “Added to the database on (date)”. This is just so I can be sure template is working, and refreshing the single product page should show this change instantly.
Now, to add the featured post image we attached to the product, this one line should do it (I included style info too, in case you need it). I’ve posted the
href="http://pastebin.com/5ZiKHFrg">full code to my own single-products.php here, but remember it’s unique to my theme so simply copying that into your own theme directory may produce unexpected results.
class="aligncenter" style="border: 0pt none;" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2011/07/code-2-thumbnail.png?54167" alt="custom post types" width="510" height="35" />
The simplest way to add the meta info anywhere is to use:
class="aligncenter" style="border: 0pt none;" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2011/07/code-3-meta.png?54167" alt="custom post types" width="199" height="37" />
…but this will only give us a very basic output list of key-value pairs. In order to do anything more complicated with the returned values (such as display a star-rating graphic), you need to grab all the values then iterate over them. [
href="http://pastebin.com/PteVKCVc">View the code here]:
class="aligncenter" style="border: 0pt none;" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2011/07/code-4-custom-field-iteration.png?54167" alt="how to custom post types" width="500" height="331" />
In the example above, I’m checking each custom field name (the $key) to see if it’s called ‘Level’. If it is called level, instead of just echoing the value of the field back, I’m displaying a different graphical element based on the content. For any other custom fields, I’m echoing the value as it is, along with the name of the field (which is exactly what the_meta() does). Now my single product page looks like this:
class="aligncenter" style="border: 0pt none;" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2011/07/single-product-view.jpg?54167" alt="how to custom post types" width="580" height="395" />
I’m going to leave it there for single product views, as it really depends upon your own theme and what you want to achieve with it. For now, let’s move onto a sidebar widget to display… the 3 highest ranked products in the database?
Widget
To do this, I’ve slightly adjusted the code I gave you before in the post
href="http://www.makeuseof.com/tag/how-to-create-wordpress-widgets/">How to Write a Basic WordPress Widget, but instead of showing a single random post, I’ve adjusted it with the following [
href="http://pastebin.com/kNAgkekH">view the full code here]:
class="aligncenter" style="border: 0pt none;" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2011/07/code-5-widget.png?54167" alt="how to custom post types" width="580" height="169" />
This will give me 3 posts laid out similar to the example screenshot below. If you’re not seeing any of your products displayed, check very carefully the section that says &meta_key=Rating to make sure you actually have a meta key of that name. Notice how I also chose to display the meta info associated with that product along with the featured thumbnail, but you can edit that particular code block to show whatever you like.
class="aligncenter" style="border: 0pt none;" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2011/07/widget.jpg?54167" alt="" width="300" height="300" />
Product Archives or Listing
Finally, I also wanted to make an index/archives page, so that visiting http://yourdomain.com/products/ would show a simple list of all the products, similar to a blog index. The basic excerpt + post thumbnails style I showed you how to make in the
title="How To Jazz Up Your WordPress By Adding Featured Images" href="http://www.makeuseof.com/tag/jazz-wordpress-blog-adding-featured-images/">How To Add Post Thumbnails To Your Theme article was mostly sufficient, but in order to customize it I duplicated the archive.php file in my theme and renamed it archive-products.php.
If you don’t already have an archives page, just duplicate index.php and rename it to archive-products.php. Again, by adjusting the article meta-info line and adding a call to the the_meta() somewhere, I got this:
class="aligncenter" style="border: 0pt none;" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2011/07/archives-and-widget.jpg?54167" alt="custom post types in wordpress" width="580" height="406" />
Obviously, it looks a bit silly with both the archives and sidebar, and it could do with a bit more style adjustment, but I’ll leave that up to you!
That’s it from me today. You can view the
href="http://pastebin.com/g1zYiZN5">complete full code online here – just copy and paste or download the entire thing into a file called products.php, and place it in your plugins directory. You should be able to potentially expand your WordPress blog into a database of anything now! It’s difficult to answer individual problems you might be having, but do please post in the comments if you’d like some help or would like to show your appreciation – a tweet or Facebook like would very much be appreciated, or even a mention on your blog if you decide to implement this. Thanks for reading, and don’t forget all the other
href="http://www.makeuseof.com/service/wordpress-tutorials/">WordPress tutorials we have!
/>
/> Hey Facebookers, make sure to join
href="http://www.facebook.com/makeuseof" target="_blank">MakeUseOf on Facebook and get access to some exclusve stuff. Over 105,000 fans already!
/>
href="http://www.makeuseof.com/tag/product-review-database-wordpress-custom-post-types-custom-fields-featured-images-widgets/">Make A Product Review Database With WordPress: Custom Post Types, Custom Fields, Featured Images & Widgets! is a post from:
href="http://www.makeuseof.com">MakeUseOf
More articles about:
href="http://www.makeuseof.com/tags/blogging-tips/" title="blogging tips" rel="tag">blogging tips,
href="http://www.makeuseof.com/tags/coding/" title="coding" rel="tag">coding,
href="http://www.makeuseof.com/tags/custom-post-types/" title="custom post types" rel="tag">custom post types,
href="http://www.makeuseof.com/tags/database/" title="database" rel="tag">database,
href="http://www.makeuseof.com/tags/event-listing/" title="event listing" rel="tag">event listing,
href="http://www.makeuseof.com/tags/php/" title="php" rel="tag">php,
href="http://www.makeuseof.com/tags/widgets/" title="widgets" rel="tag">widgets,
href="http://www.makeuseof.com/tags/wordpress/" title="wordpress" rel="tag">wordpress
/>
Similar articles:
class="st-related-posts">
href="http://www.makeuseof.com/tag/pull-publish-user-information-wordpress/" title="How To Pull & Publish User Information For An Author Bio Section [WordPress] (July 20, 2011)">How To Pull & Publish User Information For An Author Bio Section [WordPress] (2 comments …)
href="http://www.makeuseof.com/tag/jazz-wordpress-blog-adding-featured-images/" title="How To Jazz Up Your WordPress By Adding Featured Images (May 13, 2011)">How To Jazz Up Your WordPress By Adding Featured Images (11 comments …)
href="http://www.makeuseof.com/tag/how-to-create-wordpress-widgets/" title="How To Create Your Own Basic WordPress Widgets (May 20, 2011)">How To Create Your Own Basic WordPress Widgets (17 comments …)
href="http://www.makeuseof.com/tag/add-automatic-footer-wordpress-posts/" title="How To Add An Automatic Author Footer To WordPress Posts (September 9, 2010)">How To Add An Automatic Author Footer To WordPress Posts (4 comments …)
href="http://www.makeuseof.com/tag/wordpress-3-hidden-gems-jetpack-plugin-suite-wordpress-app-updated/" title="WordPress: 3 More Hidden Gems In The Jetpack Plugin Suite, & The WordPress App Is Updated! (May 29, 2011)">WordPress: 3 More Hidden Gems In The Jetpack Plugin Suite, & The WordPress App Is Updated! (1 comments …)
View full post on MakeUseOf
