Why ThemeForest?

Because they’re paying me. I was approached by the owner of the Envato network a few months back who offered to commission me to develop 5 themes for WordPress that would be released on ThemeForest. With no restrictions placed on our agreement and with the prospect of still retaining revenue generated from my theme sales, it would have been silly to pass this up. The bottom line is that I get to roll out a handful of themes at very reasonable prices – something I’ve wanted to do for as long as I can remember. It always comes down to time, and my lack thereof. This is the perfect arrangement that allows me to get the passive income training rolling.

Black Aperture

My first theme caters to one of my favourite hobbies, video games. Black Aperture is a news and reviews theme that comes packed with a nifty options panel for basic customization out of the box, among other goodies. As you may have guessed, the name is a throwback to one of my all-time personal favourites, Half-Life 2. Black Mesa. Aperture Science. Get it? Good! Moving on…

Falling Back on Trends

Normally, I like to consider myself a “think outside of the box” kind of guy. But when it comes to creating something that needs to appeal to the masses, I bench my personal preferences and gut intuitions and start tapping into current trends.

For starters, gaming sites seem to inherit a dark colour scheme. I’m not talking just publications, but official game sites as well. I knew dark was the way to go with this and literally started with a black canvas. With this being my first theme release for ThemeForest , I knew it was going to take longer than the rest, so multiple colour schemes were out of the question. Instead, I opted for a neutral layout with a customizable accent colour. This would give the user a bit of freedom without having to tap into the CSS themselves. But of course, if someone would like to jump in and start making drastic changes, there’s no stopping them. And I welcome it, actually.

Gorgeous Featured Posts Showcase

I don’t know about you, but I’m pretty tired of the typical featured posts slideshow that every other website is sporting these days. I wanted to allow people to feature content, but needed to take a new approach to this popular method of displaying features. There is no slideshow – just three big square(ish) images with some nice effects overlayed and a title and tagline, also overlayed. Images are resized dynamically, so the author just has to meet the minimum size requirements.

Super Simple Reviews

Posting reviews with a set criteria isn’t the easiest task. I never bothered with criteria on my blog, but I do use custom fields to display the box art and 5-start rating. Similarly, I’ve done this for Black Aperture, but implemented a much more elegant solution than simply using custom fields.

When posting a review, you enter your title and main content just as you normally would. But under the main text area, there’s a new box called Additional Information which houses the review criteria, and images used through-out the site.

On the front-end, reviews are displayed unique from other posts in a few ways. For starters, when reading a review, you’ll notice a nice big area at the top which houses the box art, rating, and criteria.

Reviews are styled differently in post indexes as well. The thumbnail image is replaced by a smaller version of the box art and rating, and both are aligned to the left inside a grey box. Unlike the thumbnail which is floating right with a dropshadow.

If This, Else That

When it comes to general theme releases, there are a lot more things to take into consideration. I really have no idea how people are going to use my themes, and which parts they have no interest in. With Black Aperture, I included things like the social buttons in the header which may or may not be of use. Every unique bit like these buttons are wrapped in a conditional statement which tells the theme to only display them if there’s content entered. Same goes for image thumbnails in posts, even. If there’s no path entered for the post image, the thumbnail container doesn’t show up at all. I feel that this is a very important step to ensure my themes are easily implemented. The last thing I want, is for someone who has just purchased a theme to become frustrated while trying to remove an unneeded feature.

Much of Black Aperture is controlled from a settings panel within WP-Admin. From there, you can change the accent colour, remove the left sidebar entirely, construct the main navigation bar, and even manage ads.

Other Uses

I know many of my readers have their own blogs already and will have no use for Black Aperture as a theme. But perhaps as a learning tool? When you purchase Black Aperture, you have my source files for the entire project, including the original PSD . So if you’re wondering how I did something, or would like to use some of the code for your own work, it might be worth the $25.

Next Up

I’ve already begun working on my second theme. This one entitled Spectre, which is a reference to the fantastic sci-fi RPG game, Mass Effect. The original colour scheme I worked on reminded me of the armor your character wears at the beginning of the game. Spectre has an entirely different focus, and is aimed at the web professional. It’s a portfolio/showcase theme that will be based on the innards of Black Aperture, but you wouldn’t know that from looking at it. Expect Spectre to hit ThemeForest later this week, or early next. You can always follow me on Twitter if you don’t want to miss it.

For the Newcomers…

A little about me and why you should come and see my presentation. I’ve been building sites exclusively on WordPress for over 4 years now. I work as a lone freelance designer/developer and handle projects from start to finish. From conceptual design mocks, right through to WordPress development. Over the years, I’ve built many different types of sites on WordPress , ranging in size from personal blogs to major label recording artists and some of the largest online publications. In other words, I’ve covered a lot of bases and know what I’m talking about… when it comes to WordPress, at least.

What I’m Speaking About

It was actually kind of tough to narrow it down to a single topic, as I mentioned earlier. I took this as a good sign, though. As it means I have plenty I’m comfortable sharing with others. But the topic I decided on is; Pushing WordPress to its Limits – Making the Most of Core Functionality. The summary I wrote for the WordCamp website is as follows…

I’m going to discuss advance uses of core functionality, and making the most of WordPress’ built-in functionality. From custom fields to query_posts, and conditional tags to the links manager. Some of which will be demonstrated using my own blog, and some recent client projects I’ve launched that are built on WP.

In my presentation, I’m going to use some sites I’ve developed to demonstrate some of the more advanced uses of core functionality and hopefully get people thinking about ways they can incorporate my methods into their own work.

Come On Out!

As far as web conferences go, WordCamp is crazy affordable and is shaping up quite nicely. Take a look at the speaker list to see who else is presenting, and if my topic isn’t of interest, perhaps someone else’s will be? Aside from getting my feet wet as a speaker, I’m really looking forward to getting out and meeting some of my peers in the field. It should be a great weekend for networking as well as learning some new tricks with our favourite web software. Come on out and say hello, hang out, and get your learn on!

Let me introduce you to THiCK. The WooThemes guys gave me free reign on all fronts, with only a small list of specifications to meet – all of which I would have included anyhow. So really, THiCK is pretty damn close to what I would have produced had this been my own project.

THiCK is a beast of a theme! It’s catered towards personal blog authors and packs a pile of features right out of the box, thanks to a number of a custom widgets created by the team at WooThemes. From a design standpoint, it’s extremely flexible. There are 2 main styles (clean and grunge) and a main colour scheme for each (light and dark). From there, you can choose from 5 variant colour schemes that change headings and links through-out the blog. There’s also 2 different header layouts that can be selected from the admin. THiCK is built on the 960 Grid System and the original PSDs are included in the bundle, so customizing further should be a breeze.

I’d like to thank the guys at WooThemes for the opportunity to finally get around to something I’ve pushed to the back-burner far too many times. It was an absolute pleasure working with them over the course of our 3 week stint, and something I would recommend to any fellow designers who might be curious to how a collaboration like this would work.

And finally, my involvement in this project was on the design and XHTML/CSS. WordPress development was handled entirely by WooThemes. I haven’t actually got my hands on the finished product, and am quite curious to see how they handled things like the lifestream and media streams. I should also point out that I’ve noticed a couple minor CSS bugs since I handed the templates off. I’ve already started a conversation with Adii on this topic and will see about getting them sorted out ASAP.

I’m very interested to hear what people have to say about the theme in general, and how it’s been released (via WooThemes). Do you think this is something I should consider doing on a regular basis?

Meet WicketPixie

Named after his two dogs Wicket and Pixie, this WordPress theme pushes the boundaries in more than one direction. At first glance, it might look pretty ordinary. But what’s under the hood is anything but ordinary.

Sources

The bulk of the development went into the Source Manager. Built from the ground up by Chris J. Davis, the Source Manager gives you the ability to catalog all of the social networks you take part in. The data is gathered via RSS feeds and stored in the WordPress database. Once a Source has been added, a widget is automatically created that displays the most recent 5 items. You can place the widgets in one of the 6 dynamic sidebars which make up the right side of the theme. One widget in particular called My Profiles, is a compiled list of all of your sources. Sorted by name and listed with the source’s favicon, which is fetched and stored on your server.

Activity Stream

But that’s not the only use for Sources. One of the options when adding a source, is “Include in Activity Stream?” The Activity Stream grabs the content stored in the database and displays it in typical lifestream fashion. The difference here, is with the content being pulled from the database, your Activity Stream is archived from the date the first source was created. Typically, lifestreams only grab whatever data is available in RSS feeds, which is normally 10-20 items per feed. WicketPixie’s Activity Stream is paginated, with 50 items per page.

Faves

Aggregating your own content is great, but Chris also wanted to display recent items from his favourite sites. Faves is a quick and dirty aggregator that lets you do just that. To create a Fave, only the title of the site and the feed URL are entered. From there, the most recent 5 items are displayed for each feed. And just like Sources, the favicon is grabbed as well. Faves can be sorted quickly via an auto-populated dropdown menu which is displayed for logged in users.

Design Customization

One downside of using a theme, is that it’s hard for your site to stand out in the crowd. While you can’t give it a complete visually overhaul from the WP-Admin, we’ve packed in a handful of design options that let the user quickly and easily change the background image, how it’s positioned, and if it scrolls with the page or is fixed at the top. Wolfgang Bartelme agreed to let us bundle his gorgeous Solid Wood wallpaper with the theme, and there are four variations to choose from. Also, font families and colours can be changed across the board by using the built-in colour picker, or entering a hex value. Of course, if you want to really customize the design, you can dive right into the hand-coded CSS and start hacking away.

More to Come

I’ve actually only given you a quick overview of the theme and it’s capabilities. It can really do a lot out of the box, and judging by the response on Chris’ blog already, this is the sort of thing people have been waiting for. I can’t take the credit for coming up with the concept, but I’m very proud of the final product Chris J. Davis and I were able to fabricate from Chris’ vision. There’s no exact date for a public release yet, but Chris has mentioned in the next few weeks. So I would assume by July at the latest. Stay tuned to his blog for an official release.

And for those interested in learning more about WicketPixie and want to see it in action, check out Chris’ screencast.

First and foremost, none of this would be possible without the ever flexible, super simplified publishing tool that is WordPress. Well, it might be possible on other platforms, but it sure as hell wouldn’t have been as easy. I’ve used Moveable Type for a couple projects and I can honestly say their template system is a total nightmare that I wouldn’t wish upon anyone. The template system introduced in WordPress 1.5 is the best thing since sliced bread. I won’t go into detail on the various templates as there are already several good resources on that topic – the WordPress Codex is a fine point of reference, but Chris J Davis does a great job of breaking it down in language anyone can understand. I will mention one template that a lot of people don’t seem to know about. That being the home page template – home.php.

If you’ve clicked-thru to any of the sub pages on my site, you surely noticed the home page is a custom template and features content that can only be found in that one location. Believe it or not, this is super easy to pull-off. When you add home.php to your template directory, it automatically becomes the template for your home page/index.

I knew from the get-go that I only wanted to display the most recent post up front. I don’t remember how I discovered this (wasn’t able to find the source by Googling), but adding a simple variable in the header include of the home template accomplished this.

Replaced

<?php get_header(); ?>

with…

<?php get_header(); query_posts('posts_per_page=1'); ?>

Obviously, you can change the number of post_per_page to whatever you want. This will override the default value you’ve set in Options>Reading. I truncate the post using the <!–more–> function in order to keep all of the columns close to equal heights.

The Portfolio section is hard coded in home.php, so I’ll just skip over that.

There are several ways to display a linkroll on your site. I tried out a few of the social bookmarking type sites like Delicious and Digg, but decided I would rather stick with the WP link manager. Mainly because I don’t care to archive this content. It’s purpose is to deliver short term, time sensitive information that isn’t worthy of a full post, but still something I’d like to share. After setting up a category for Quick Bits, I used the

get_links

template tag to display them.

<?php get_links(7, '<div class="home-quickbits-item"><h2>', '</p></div>', '</h2><p>', false, '_id', true, false, 5, false); ?>

For reference, the attributes are as follows…

<?php get_links(category, 'before', 'after', 'between', show_images, 'order', show_description, show_rating, limit, show_updated); ?>

To display the most recent posts I’m using one of the infamous coffee2code plugins – Customizable Post Listings. The ’1′ at the end is the number of posts to exclude. Since it’s set up to display by date, that prevents the most recent post from being duplicated in this list.

<?php c2c_get_recent_posts(5, "<li>%post_URL% <span class='tidbits-date'>(%post_date%)</span></li>", "", "date", "DESC", 1); ?>

Although there is a Customizable Comment Listings plugin, I’m actually using a plug called Recent Comments for my recent comments section. This plugin is configured through the Options menu within WordPress.

The two gaming link sections are both using the WP links manager and I once again used the get_links tag to display them.

<?php get_links(2, '<li>', '</li>', '', false, 'name', false, false, 5, false); ?>
<?php get_links(6, '<li>', '</span></li>', ' <span class="tidbits-date">', false, 'name', true, false, 3, false); ?>

Lastly, the music section aka Rocking My Socks is (you guessed it) produced by the WP links manager. This time, it’s a little different because there’s an image involved, although the template tag is pretty close to the others.

<?php get_links(8, '<p>', '</p>', '', true, 'name', false, false, 9, false); ?>

The CSS controls the placement of each album cover, and of course, the

:hover

border change.

#tidbits-music p {
	float: left;
	width: 65px;
	height: 65px;
	margin: 0 1px 1px;
	border: 2px solid #000;
}
#tidbits-music p:hover {
	border: 2px solid #fff;
}

I will admit, it’s a bit tedious having to create album covers but I simply didn’t want to put another list in the bottom portion of the site. I might end up changing this in future. I’m open to suggestions – drop a comment or an email any time!

Lastly, the Flickr feed which is a site-wide element is using a plugin by Dave from eightface simply called flickrRSS. One thing that was a bit of a choir was finding out my Flickr user id. I discovered from a forum post, that it can be obtained from your Flickr RSS feed url. I had to modify it a bit to get the thumbnails the exact size I needed.

Well, that covers the basics of the homepage – how I manage the content and how it’s displayed. Part 2 of this series will go over some of the CSS techniques I used. Specially, the div hover link classes and how they work in different browsers. Make sure you check back for that, or better yet, subscribe to my feed so you don’t miss a beat.