I always intend to write about how I build things around WPCandy, but when the time comes it doesn’t always happen. I fully intended to write about the creation and development of the Pros section, but then I didn’t. I started working on the discussion board, which in turn I never wrote about either. Around that time work began on The WPCandy Quarterly, which was only just announced the other day. Today, I’m determined to write about the building of the Quarterly micro-site at wpcandy.com/quarterly before moving on to any other projects.

When planning things out, I knew that I wanted to keep a trend going with the Quarterly that I had started with Pros and the forum: keeping everything on this domain, and simply adding new sections to the site. I’ve been avoiding subdomains and brand new sites for some time, really for the sake of simplicity and because I prefer the way it looks within the site. So I set about creating a micro-site just for The WPCandy Quarterly, which I’ll walk you through in this post.

In this post you can expect a smattering of code snippets, a good deal of me explaining my weird website preferences, and of course some bouncing between functions.php files and functionality plugins.

Planning the addition to the site

I knew the Quarterly would need its own landing page, as well as a specific page for each issue. This way discussions around specific issues and articles could easily be linked up, and it would be simple for anyone to jump back through back issues. At the same time, I knew I would need a shopping cart to manage the billing, shipping, and checkout process.

Each issue of the Quarterly would need a description and issue photos, as well as a listing of the authors and (ideally) the articles that they contributed. So I’ll want to be able to not only associate posts on the site with an issue, but eventually discussions on the forum as well.

Just to be clear, then, in this post we’ll be:

1. setting up a new section of the site for the Quarterly and
2. setting up basic shopping cart functionality.

Setting up the Quarterly issue pages

The requirements for this section of the site demand — as you might expect — a custom post type. The PHP I’m using is below:

This PHP went into my functionality plugin, since of course I’ll want it to stick around when I switch themes.

Notice that I defined an archive for this post type so I can include a special archive template to display them. This is important, since I’ll be using this template to make the Quarterly section of the site entirely unique.

I’m also enabling the post tags taxonomy, for a reason that I’ll explain in a minute.

With the post type in place, and a quick visit to the Permalinks Settings page on the Dashboard to get the URLs working, I could visit wpcandy.com/quarterly and any specific issue at /quarterly/issue-0x. As you might imagine, though, at the time those pages looked just like any other page on WPCandy, which of course wouldn’t do. I created the archive-wpcandy_issue.php and single-wpcandy_issue.php templates, but of course those were still using the same styles and scripts from the rest of the site.

In order to clear the palette, so to speak, I added a few new lines to my functions.php file. In this case I’m dealing with the presentation layer, and not the functionality, so there’s no reason to resort to a functionality plugin.

This is what I set out to do. If viewing a Quarterly archive or single page:

1. remove the core site styles, and any plugin styles that won’t be used,
2. remove the core Javascript, ana again those added by plugins that won’t be used,
3. add back the styles and (and maybe scripts) specific to the Quarterly.

By doing this, I’m creating a sort of theme-within-a-theme. Sort of. I can now use a simple, smaller, and very specific stylesheet just for the Quarterly section, leaving my main site CSS file untouched.

In order to do that, here’s what I used:

I added this to my theme’s functions file, since it’s specific to the theme I’m currently using.

Now I have a clean slate to work from, which is exactly what I did. I styled the navigation, the issue post type content, and the special section with the list of contributors to a specific issue.

Oh right, the contributors section. Here’s how I did that.

Listing the contributors to an issue

In all likelihood, at some point in the future Quarterly articles will end up on the blog. Not right away, of course, but eventually. So the first thing I did was create draft posts (standard posts, not the issue post type posts) authored by each of the Quarterly contributors. For each of them I also tagged them with a Quarterly issue-specific post tag. I made sure the issue post they belong to also included the same tag.

Then I added the query below to my templates:

This I added to the Quarterly-specific loop, which was called into each of my two new template files so I wouldn’t repeat myself.

And that, along with some CSS, created this:

I now have a simple, elegant way to list the contributors with each issue. It will be easy to link up these article titles to their posts, too, since they’re already querying the drafts themselves from WordPress. With a bit of CSS, I now have a method of displaying issue contributors that I can use and reuse.

Setting up the shopping cart functionality

If I were only in need of a simple digital purchase I likely wouldn’t bother with a full shopping cart setup. Paid Pros accounts (which I lovingly call Sweet Pros) are, after all, simply a PayPal subscription created using a Gravity Forms signup form. However the Quarterly is a physical product, which necessitates a more complete shopping cart experience. Having a shopping cart on the site is also helpful, since it makes the process of adding additional physical products to the site in the future a lot simpler.

I toyed around with just about every e-commerce plugin out there before ultimately deciding on WP e-Commerce. To be honest I was thoroughly impressed by each plugin that I tried out, and my final decision was WP e-Commerce primarily because it has been around for so long.

Before now, my only extended experience with the WP e-Commerce plugin was years ago, around 2008 or so; it wasn’t a very pleasant experience at all. I’m happy to say it’s much better now, and the setup was pretty much seamless.

The Quarterly section of the site is separate from the shop for a few reasons. One, I want to have the flexibility of controlling the URLs, layout, and elements within the Quarterly micro-site. If I knew the Quarterly would be the only physical product I’d ever sell in the store, then perhaps I would have relied on that entirely. But I don’t know that, so the shopping cart (or WPCandy Shoppe) is separate from the Quarterly site.

This separation wasn’t a big deal, since simple shortcodes are available with the WP e-Commerce plugin to add specific purchase buttons to any section of your site. I used these within the pages of the Quarterly site to create a nice transition from micro-site to cart and checkout.

At least, I think it’s pretty slick.

Additional thoughts on WordPress and e-commerce

It will certainly be worthwhile to spend more time surveying e-commerce options and reviewing them more fully in the future, but in the meantime I thought I’d offer up a few thoughts. One comment I have that applies to all of the e-commerce plugins I tried out is this: the initial setup process is quite overwhelming. During my toying process I set up the basic Quarterly sales items and process for each plugin on a testing location. Without exception, each plugin presented me with options I never ended up needing, or didn’t even care about. I realize that WPCandy’s shopping cart needs aren’t as complicated as some, but that made me wish for a simplified setup process even more.

It would be great to see these plugins take more of a “decisions over options” approach. When that isn’t possible, stashing less vital options in an advanced section would lessen the initial impact of a screen full of checkboxes and dropdowns.

Easily the most delightful part of the e-commerce setup, for me, was using BraveNewCode’s Piggy plugin to enable purchase notifications to my phone. The setup was simple, it integrates well, and I love being notified of sales. It was an easy $25 to spend, and I would recommend anyone using an e-commerce plugin (it integrates with a number of them) check it out.

Reflecting on the development process

I’m much happier with the development of this addition to the site than any other addition I’ve done. I approached it intelligently (for me at least) and completed the development in an efficient and future-thinking way. I wish that I had developed Pros in as clean a fashion, and will definitely revisit the methods I used when I launch Pros 2.0.

What do you think? Have you used any of these techniques before, or do you have even better ways of pulling this off? Oh, and while I’m asking questions: have you pre-ordered your copy of the Quarterly yet?