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.
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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Dan Harper
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
this is a nice study…. well done
Very nice animation at the end ;o)
Sweet, im looking forward to more of these. =]
That is one killer WordPress theme. It’s just amazing what could be accomplished with WordPress. BTW thanks for the tut. :)
Spore rocks :)
Great wordpress tut! More wordpress please :)
Hey – your using my Hand Of Sean font :D
Nice tut. Thanks
Awesome wordpress theme and thanks for the tut!
I just used up 700k downloading that silly gif!
What the hell is this!? Come on NETTUTS! Why have you sunk to advertising themes! Seriously WTF!?
I really really hope Dan harper didn’t get paid $150 for this! It’s just advertising! (Where is the “tutorial” aspect in this!?)
Seriously NETTUTS … WTF?!?
Hmmm I like this themes.
@james CHILL MAN….
I don’t think he intends to tell us how he did it step by step, otherwise the theme will just be duplicated instead of being sold at themeforest, and I think he did specify that this is to, and I quote “focus on several key areas of the theme which seem to be some of the major selling points.”and “include examples of any important code used and provide links to various tutorials detailing similar techniques.”
So for me this is useful, mainly because he did use WordPress’ features to the extent of coming up with a lot of things that was never really intended to be used in the way he did it. So that’s something worth learning.
Looking forward to the next post!
I have a question about the custom fields. Do I have to remember the “key” of these custom fields every time I want to write an article? Or does this keys get prefilled into the custom fields?
Very nice theme and great practices on coding for wordpress. I’m struggling around multiple side bars which is have some odd effects on some widgets. You have a lot of features I would like to try to implement on my site. Cheers!
Nice article, and nice template too :)
Thanks for the comments!
@Sean: It’s a great font! Definitely one of my favourites. Thanks :)
@James: Jeffrey asked me to write this. It’s part of their on-going promotion of ThemeForest here at NETTUTS.
@Tobi: Once you’ve used a custom field once, WordPress will remember it and add it to a drop-down list.
I’m not having a go at you Dan – Your work is great – as evident from the number of sales! :)
I just think websites like NETTUTS are at their best when they put content before commercial gain – I’m not implying this isn’t good content…
I know NETTUTS is part of the envato network and they need to make money blah blah! … but NETTUTS should be putting it’s users before itself! just IMO..
James – I would hardly say that this is purely a promotion article. Many people were impressed with Dan’s theme and wanted to know how he implemented some of the features. So, I asked him to write two articles for us.
It works out for everyone. We get some cross promotion between TF and NT. Dan gets some promotion for his site. And the readers learn how to implement similar features.
Dan doesn’t go into huge detail…but he definitely explains some of the key points and includes link references…like a roundup.
Remember James, if we can’t promote our sister sites and make more money, then we ultimately can’t pay great developers like yourself to write for us. So, it’s a bit of a trade-off.
Jeffrey :)
Nice theme… it’s not a NETTUT (net tutorial) though. It’s a showcase.
Cool tut my favorite was the flash free carosel (good spelling is for losers)
I hate flash // usability problem no one on a iPhone ore anyone else for that matter can access it with out the latest flash player. P.S I don’t like flash
Awesome! Great tut :D
I’m really digging the features slider. Anyway we can get a tutorial on how to make one?
Very nice theme and it somehow reminds me all other themes for wordpress.
I didnt see any innovative idea but just a copy of 4-5 different premium wordpress themes.
But as I am a wordpress developer, I know how this works so it sounds easy for me. Although its a cool theme overall.
Thank you.
Roshan
Freelance Developer
http://www.instantshift.com
@Jonathan.
Its a jquery sligeshow/image gallery. You can find its free version on many website and I think NETTUTS also have it.
Roshan
Freelance Developer
http://www.instantshift.com
This tut is really good. It has many case-study to learn. Thanks!
Excellent article, very well explained! I never really learned anything new but this did open my eyes of what wordpress is capable of achieving and how the actual template was developed. Can’t wait for part 2.
I personally love it when someone who’s made a commercial theme shares their techniques. It’s not just promoting it’s good promoting by giving back something. Great job Dan.
One thing irks me though every time I see the feature post image implemented through a custom field. While that’s OK it has the down side that it’s not so easy to maintain for less technical admins. They need to be able to use ftp or something to put the image in the right place, know WP paths etc, size it correctly…
It’s possible to use the media manager built in the editor to upload the feature image as well as images for the post itself. The upside is that you also get two different thumbs for free. If you set the thumb size in your Misc options, you can tailor that thumb to be the mid-sized one for example. In addition to the thumb, you also get a title for the alt and title tags from the attachment meta. Then in the featured post code you’d just grab the the first attachment by order and display the mid size image in the featured image spot. If you have multiple images for the post, you can always make sure to order the image attachments for the post. Of course you can create your own rules around which thumb to show or even the full size image.
If you really want to get fancy, you can use some dynamic image resizing PHP code and create your own thumbs for various sections on the fly. For example you have the post in the features section, you want a large size preview, then if you’re displaying the post in a category or archive list you can use the small thumb, also if you’re highlighting the latest article in a category at the top of the page, you can make a custom size thumb for that too…
Ok, I’ve gone off a tangent here… hope it’s useful to anyone :)… Maybe that’s some material for a NETTUTS tutorial :)…
Great Posting :)
Nice tut, i am new to wordpress, so any tips are great!!
The only thing is i am having trouble linking to images, i am using the default images folder, located within my theme, and i wondered if someone could tell me what the url would be for that?
Thanks
Interesting insight into some of the more advanced features of the theme. Many thanks for sharing.
Just perfect, useful anatomy
Thanks for sharing
uff… absolutely top class
Just curious. I myself am running a game review blog, and I’m currently working on a new look for the site. I was wondering how, under “Latest Reviews”, do you get the platform to show up next to the review title?
Is that also done with custom fields?
Yes it is. There’s a custom field named ‘console’ for reviews & previews.
This is a nice theme for themeforest. Good Job Dan!
Nice theme, but some comments about the theme as a slow bandwidth user ;)
this theme dosent have a chaching methode, so the rotating banner takes much time to load, may be becouse of of jQuery (Jus kidding) but same thing can be done with simple DOM,
You guys are using jQuery and making a bad name for it, try to make smooth animations in those areas as well as with jquery
any way, Im nota QA Guy, just take those point as a simple user comment
Thank you
M.A.Yoosuf
http://yoosuf.awardspace.com/
After hovering the thumbnaisl in features part, slideshow stops . How can we make it to continue to auto play after hovering the thumbnails?
Thanks! This is going to help me a lot when I redesign my site again…definitely adds a lot more depth to WordPress.
@ Abras
Change
.tabs(‘rotate’, 5000);
to
.tabs(‘rotate’, 5000, true);
That will make it so the tabs keep rotating, even after the user has clicked one.
no it is now. i tried it but nothing changed.
using custom fields to display post images is cheap and makes it all cumbersome to use. For 40 bucks I expect a function to automatically extract a certain image from the media gallery …
Considering your post, this is a nice analysis of a theme most people with a little WP knowledge can whip up themselves. Thanks!
I’ve been looking for a way to include feature pics. Thankyou.
It’s very detail for me………