Advertisement
WordPress

The Anatomy of GamePress - Part 1 (Updated)

by

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:

$(document).ready(function() { 
    $('.features > ul').tabs({ fx: { opacity: 'toggle' }, event: 'mouseover' }).tabs('rotate', 5000);
});

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:

<?php query_posts("cat=$gp_features_cat&showposts=3&orderby=date&order=desc");
while (have_posts()) : the_post(); ?>

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:

<? $postimg = get_post_meta($post->ID, 'postimg',true); ?>
<? if($postimg) { ?><img src="<? echo $postimg; ?>" alt="" class="pimage" /><? } ?>

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:

<?php query_posts("offset=$gp_latest_headlines");
while (have_posts()) : the_post(); ?>

$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:

<? $release = get_post_meta($post->ID, 'release',true); ?>

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

<? if($release) { ?>
    <p><strong>Release:</strong> <? echo $release; ?></p>
<? } ?>

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.


Related Posts
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Releasing Your ThemeCreating wordpress theme from html 400
    If you've been following this series you now have a working WordPress theme. Your theme has a number of template files, including a page template and an archive template, and also has featured image support.Read More…
  • Code
    Theme Development
    Custom Controls in the Theme CustomizerTheme customizer custom control 400
    In the last article, we explored the advanced controls available in the Theme Customizer, and how to implement them. We’re going to look at how to create our own custom control, allowing you to choose which Category of Posts are displayed on the home page. To get started, download version 0.6.0 of our Theme Customizer Example.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML: Creating an Archive TemplateCreating wordpress theme from html 400
    If you've been working your way through this series, you now have a functioning theme with two page templates. The steps I've demonstrated to this point are: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file creating template files for static pages. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML - Creating a Page TemplateCreating wordpress theme from html 400
    So far in this series, I've shown you how to create a fully functioning WordPress theme from static HTML. We've covered the following steps: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file. At the moment, your theme only has one template file for displaying content—the index.php file. A powerful feature of WordPress is the ability to use template files for different kinds of content.Read More…
  • Code
    Plugins
    An Introduction to Theming WooCommerce for WordPressWoocommerce
    WooCommerce is a popular eCommerce platform for WordPress that is being rapidly developed by WooThemes. In this article, I'm going to guide you through the fundamentals of theming for WooCommerce.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Adding a LoopCreating wordpress theme from html 400
    In the first three parts of this series, you learned how to prepare static HTML for WordPress and to create a theme by splitting your HTML file into a set of template files and editing the stylesheet. You then uploaded your theme to WordPress and activated it. The theme still isn't displaying any content you add via the WordPress admin however; to do that you need to add a loop to your template files.Read More…