Advertisement
  1. Code
  2. WordPress
Code

The Anatomy of GamePress - Part 1 (Updated)

by
Languages:

GamePress is a "Gaming News & Reviews" theme for WordPress and currently one of the most popular themes at ThemeForest. It is the most advanced theme I've created so far, and really pushes what the WordPress engine can do!

Already read this article? Continue on to Part 2.

This two-part series will focus on several key areas of the theme which seem to be some of the major selling points. I will also include examples of any important code used and provide links to various tutorials detailing similar techniques.

Purchase GamePress from ThemeForest for $40

Homepage

Features Slider

At the top of the homepage is one of my favourite parts of the theme - the Features Slider. It is inspired by the Flash slider at GameSpot — except this is created with jQuery's Tabs plugin and CSS.

The code for creating this is basically a combination of my "Create A Tabbed Interface Using jQuery" tutorial here at NETTUTS (for the Tabs) and Chris Coyier's "Creating a Slick Auto-Playing Featured Content Slider" at CSS-Tricks (for over-laying text on an image).

In fact, the only jQuery code I wrote for this was:

Which will fade the area when a tab is hovered over. The tabs will also auto-rotate every five seconds - who needs Flash? ;)

Again, the actual WordPress code for pulling these posts from a 'Features' category is based upon code avaliable in my "Build a Featured Post Section for Wordpress" tutorial:

Latest Headlines

This section is basically what you'd see on any other WordPress theme. But there is also an image accompanying each post. This is achieved by making use of the 'Custom Fields' option when writing a post:

To create a post image with custom fields on your own theme, you can use the following code inside your WordPress Loop:

The above code checks whether a custom field with the Key of postimg exists for the current post, and if so inserts the link into an image tag alongside the rest of the post.

For more information on using custom fields, check out "WordPress Custom Fields" by Justin Tadlock; and you may also be interested in "5 Quick Ways To Enhance Your WordPress Theme" over at the ThemeForest Blog.

Older News

The Latest Headlines section displays a user-defined number of posts, and below itis a more basic list of 'older' posts:

This is achieved by offsetting the number of posts get, using the following code instead of your normal WordPress Loop:

$gp_latest_headlines is the number of posts listed in the Latest Headlines section.

You can do a lot with query_posts(), check out the WordPress Codex for the full documentation on it.

Reviews Page

One of the main features is the Reviews Page Template, which displays all the reviews in a list, but also 'expands' the first review to give more detail about it:

The meta-data of the first review (Format, Release, Rating etc.) is all retrieved from a number of Custom Fields in the post:

This is a perfect example of the numerous ways you can use Custom Fields - which are very easy to use in your own theme! For example, the following code is what's used to retrieve the release (date) field:

Of course, each field is entirely optional. If it wasn't filled in, it wont display:

We will look more into the Reviews & Previews templates in Part 2.

News Page

Another Page Template provided with GamePress creates a main News page very similar to the Latest Headlines section on the homepage. However, I faced one problem: "How do I include an archives area to help sort posts by date, category and tag?"
I didn't want to force the admin of the site to use a widget in the sidebar as I did not want GamePress to feel like a 'blog'.

After a lot of thought, I decided I needed some sort of 'Archives' section at the top of the News page. But, it took up too much valuable 'screen real-estate':

My solution was to only show the 'Archives' title-box, which when clicked, will cause the archive lists to slide out below. Notice that I also replaced the normal » in title-boxes to a + in order to add a subtle hint that the box is 'clickable'

Part Two

This article continues over on the ThemeForest Blog where we will look at:

  • Theme Options
  • Two Colour Schemes
  • Single Pages
  • Archives
  • Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.