As most of my readers are aware, I co-authored Professional WordPress Plugin Development with Brad Williams and Ozh Richard. We decided against making a dedicated Web site for the book because it would eat into our time doing cool stuff with WordPress. Instead, we decided to market the book through our own sites and communities we’re involved in.

I wanted to do something special on this site for the book. Our decision provided a great opportunity for me to apply a couple of chapters from the book in a real-world scenario.

In this post, I’ll cover how I created a product page for Pro WP Plugin Development. This was my first real step into this area of Web design, so this is just as much as learning experience for me as it will be for you.

The rules

Before designing the page, I had a few restrictions I wanted to enforce. These rules were put in place to make creating and updating the product page as simple as possible. Basically, I didn’t want to set myself up for a ton of work in the future.

• The HTML for my regular WordPress theme header and footer must be used. Any custom HTML can only be located within the post content.
• I could not use a custom page template as this might require future updating if I changed themes.
• Book testimonials and reviews must be easy to update when I wanted to add new ones.
• The URL for the page must be short and easy to remember. You know, so folks can easily share it via Twitter.

Creating the design

I cracked open my copy of Photoshop and went to work. The tough part was fitting tons of information onto a single page in an easy-to-absorb manner. It’s easy to go overboard, but I had to limit myself to selling the product. I decided on a three-column design that worked out well for the information I wanted to have on the page.

I won’t walk you through the steps of laying out a page in Photoshop, but I will provide you with a few tips I learned along the way while designing the page.

• What are you selling? Make sure actually tell the reader what the product is. Yes, this seems like a no-brainer, but I saw several product pages while researching that didn’t tell me anything about the product.
• Call to action: The call to action should be noticeable. I created a big, orange “Buy Now” button. I’m hoping that grabs a few people’s attention.
• Screenshot: Provide a screenshot of the product. This is the first thing I placed on the page.
• Options: Give the buyer some options if you can. I listed several prominent online stores to purchase the book.
• Product feedback: Provide user feedback. I used a combination of testimonials and photos that people have shared.
• KISS: Keep the main information short and sweet. I wrote a couple of short paragraphs about the book near the top of the page. I added more detailed information later for readers that wanted to know more.

A marketing expert could probably provide 1,001 techniques that are better than this, but I wanted my page to represent my personal style and what I think a good product page would look like.

Creating the page in WordPress

Once I finished mocking up the initial design in Photoshop, I had to create the page on the site. Remember, I had a few rules I was forcing myself to follow, so I had to think outside the box a little.

The first step was to create the HTML and CSS for the page. The HTML was simply added to the WordPress post editor.

Since I wasn’t creating a custom template, I needed a way to disable my sidebar. Luckily, the Hybrid Core framework (used here and in all my themes) provides a feature called “Theme Layouts.” This feature allowed me to select a one-column layout for the page, disabling my sidebar. With a quick click of the mouse from the post editing screen, it was taken care of.

I needed my CSS to load only on the product page. Therefore, I needed to replace my normal theme’s style.css file with a custom one. Once again, the Hybrid Core framework came to the rescue with its “Post Stylesheets” feature, which allowed me to simply type the name of the custom stylesheet while on the post editing screen.

That’s all there was to creating the page. The custom HTML was handled entirely in the post editor, which required nothing more than a few <div> elements for the columns.

Making use of the product

I did mention that I used some techniques from the book, right? I used two features that had entire chapters dedicated to them.

• Chapter 6: Extending Posts: I created a custom post type called testimonial to allow me to easily add new testimonials. I also added the post_tag taxonomy to it and made use of a custom metadata. I managed to use all three major sections of the chapter: post types, taxonomies, and metadata.
• Chapter 10: The Shortcode API: I created a custom shortcode called [testimonials-plugindevbook], which displays 10 random testimonials tagged with “Pro WP Plugin Development.”

My product page was done

I’m sure many of you were looking for a full-blown code tutorial, but I wanted to share my experience with you rather than a bunch of code. I wanted to provide a look at the other side of the development process that I go through every day: planning. The code is the easy part. The tough part is laying out the structure of the entire project.

I hope this article gives you a few ideas for your upcoming projects. Feel free to leave your experiences about product-page design in the comments.