01. AT&T Inc.

This is an ideal example of how a subtle upgrade can make a huge difference.

02. BP Garage

A completely different direction and modern feel. A huge improvement!

03. Sprint

Looking at the old sprint logo it’s obvious a re-design was needed.

04.  Mindshare

A great find via Brand New. Great use of colours & typography.

05. Mustang 2010

The current 2009 Logo, compared to 2010. Subtle improvements, but wow so much more aggression! Source: AutoBlog.

06. Adobe Photoshop CS4

Adobe has come a long way in a short time, I like the way things are going.

07. Discovery Channel

Probably one of my favourites. Really love the placement of elements.

08. Fanta

The old can really does look dated compared to the new look.

09. Johnsons Baby

Not one of the obvious choices, but I love the softer approach.

10. Fiat Bravo

Yeah that’s right, a car made it into the list. A great example of a successful redesign, and Fiat’s recent sales figures prove it. Plus I drive this car, so a very biased choice!

11. Steinlager

I hate lager, but if you presented me with this… It’d be rude to say no.

12. Applebee’s

Great example of a redesign where the concept stays similar but the execution is on a completely different level.

13. Firefox / Firebird

A name change, and a great leap forward. Time really is a healer.

14. QVC

A huge Brand, and a major revamp. And a much needed one.

15. Vauxhall

A UK car maker with a new, more prominent identity. I like the old one, its clean and not much is wrong with it. But the new logo reflects more on a new company direction and style of their cars.

16. MSNBC

A fresher look, more open and less in your face. Works well I’d say!

17. Ford

Yep, more cars related stuff. But a much deserved mention here.

18. Ford Fiesta

Sticking with Ford, their new style Fiesta really is a beauty.

19. The BBC

One of the most recognizable UK brands, good job it looks great then.

20. Direct TV

The same concept, shape and fonts. Just better.

21. Barack Obama

What a difference a year makes. The 2007 site compared to the ‘08. Probably one of the best website re-designs around right now.

22. Grooveshark

David Pache, this guy knows how to redesign a brand identity.

23. BusinessWeek

Simpler, Bolder, Cleaner. A successful redesign in my book.

24. Viget Labs

It is amazing how far we’ve all come in terms of web design in just a few years, Viget is a great example of this.

25. Toys”R”Us

A much more playful typeface and colour scheme. I found this via a great article on Logo Design Love: 10 Sucessful Logo redesigns.

26. Seat Leon

The old model wasn’t hideous, it’s only after you see the new model you start to believe it is. A truly amazing revamp, hats off to Seat design team!

27. N Design Studio

How to flip your website into an iconic design, courtesy of Nick La.

28. The BBC website

Words cannot describe how much I hated the old design. The new site really is something for the BBC to be proud of.

29. WordPress.org

A much more engaging and approachable design from WordPress.

30. Microsoft

Making something out of nothing, and doing it well. Microsoft.

31. MailChimp

I dare you to find a better looking mascot. A huge improvement, but a much needed one I must say, the new chimp really does have that “cute-factor”

32. CNET

A subtle update, and you know I love subtle. Beautiful end result.

33. Wembley Stadium

When updating something so Iconic, you need to make something just as iconic. I’d say a job well done on this one.

34. Apple iPod

Advanced technologies and production methods sure do look good.

35. The Simpsons

Right? Now you’re including cartoons… This list is crazy! Maybe so, but this has to go down as the redesign I’m most glad of.

36. XBOX

A new direction with the XBOX design, colours shapes etc are a huge leap in the right direction.

37. Design Shard

With a growing blog it’s important to design for the needs of your visitors. Max does a great job here on Design Shard.

38. KFC

Colonel Sanders is looking better in his old age. A cleaner look.

39. Walmart

A more modern feel to a logo which was showing its age.

40. Envato

A sleeker looking logo really can help kick off your re-branding.

41. Best Buy

A logo which is more fitting to the company & its products.

42. Macmillan

A great bold move by MacMillan Cancer care charity, but one that works really well and a very recognizable brand now.

43. Holiday Inn

Quite possibly my favourite, something about this is just so welcoming. Which is good for a Hotel company right!

44. British Telecom

I have no idea what that guy is blowing into, and I don’t want to know. Needless to say the new logo represents a more dynamic company, with more to offer than just horn blowing.

45. Vicks

The old logo very possibly was made in MS Word. You’d struggle to make the new one in Word, so I like it!

46. Fuel Your Creativity

Adelle really has put a lot of thought into her new logo, and it really has paid off. The new logo has a much more lasting impact.

47. Amazon

For an online store like Amazon the old logo didn’t really fit. The updated version looks better in both web and print.

48. Virgin Media

Not really a redesign, more of a buy-out and brand build. Never-the less it was a refreshing moment for customers like myself!

49. Macbook Pro

Top to bottom glass front, one solid aluminium base and you’ve got yourself a pretty Macbook Pro.

50. HP

I’ve not actually seen this used anywhere but adverts. But I really like it!

Sources of Information

Below is some of the sites and blogs I used for research on this post, along the way I found some great resources and inspirations.

Brand New

Without doubt a lot of these have already been covered by Brand New, a wonderful project by UnderConsideration which I urge you all to add to your RSS feed and start to follow. The content really is amazing, and if you love the logo’s I’ve featured above you’ll love it for sure.

Logo Design Love

As I’ve already mentioned there is a fantastic post on Logo Design Love which you might also find interesting “10 Sucessful Logo redesigns“. The logo design Love website is well worth checking out for various posts on Logos and Brands on a regular basis.

Identity Works

Another great resource which documents the process of various redesigns and their goals from 1998 onwards was Identity Works. A really great site to explore and find out about the history of the brand identities.

Further Reading

After all of these great examples of a successful redesign you may be feeling in the mood to give your website, blog or logo etc a redesign. But it is important you think carefully before rushing into a redesign, this wonderful article by Steven Snell looks over 21 Factors to Consider Before a Redesign and really does give some sensible advice and tips for anyone looking to freshen up their design.

Demo & Info

That’s right, we’ve worked on a Joomla Theme. Although we love WordPress we realize it’s not everybodies’ first choice of CMS. So we felt it was only fair to make something just as pretty as our WordPress themes for the Joomla people.

The result, Hallmark, a premium Joomla theme ideal for running news/magazine sites – or your own personal blog. We’ve even included a custom styled comments system, something which is optional but really is pretty and can help add that extra bit of interactivity to your website.

Theme Description

The focus here was on clean simple slick lines, and soft gradient effects and lighting, while maintaining a very open and light feel to the theme allowing a lot of content to be visible on the front page, without making it look too busy. We’ve done a lot of customizing with Joomla to maximize it’s abilities. And feel there is now plenty more to offer which most Joomla themes don’t include.

Theme Details

Layout

The first thing that you notice is a blog like layout at the top, which makes this ideal for the blogger who chooses to use Joomla. As we scroll down we can see there is more of a Magazine style layout with a lot of content that is easily accessible. We’ve also made the pagination look pretty with the next and previous pages with the page count looking very clean.

Comments

One of the areas I think most Joomla themes are lacking is with interactivity and comment. We’ve custom styled a popular Joomla comments plugin, which comes with the Theme which you can use to transform the comments area into something a lot prettier and easier to use.

Further information

The theme is only available exclusively through Theme Forest. Sign up process is very easy and you can sign up, and have the theme purchased in only a matter of minutes. The price of this wonderful theme is currently only at $30, and as you can see you are getting a lot of theme, for very little money. See the Hallmark info page and leave a comment there, or below and let us know what you think.

Everyone knows that WordPress is one of the most, if not the most, popular blogging systems on the internet today. With its out of the box features, plugins, and great theming community, its no wonder WordPress has been accepted as today’s standard. However, sometimes you just want to add a little more.

It seems the latest fad to hit the WordPress scene is adding thumbnails into a blog post. This is fairly easy to do with some knowledge of custom fields, but can be a little complicated if your client is new to WordPress, or blogging.

Luckily, WordPress has a solution for us. We are going to use a little something called add_meta_box.

Note: This tutorial requires both knowledge of WordPress, as well as PHP.

I shared a link in a comment that WordPress has a little tutorial for this on their site. However, it is a little incomplete, and leaves a little to be desired. So, let’s get started making our own!

Examples of Usage

To see how you can use custom write panels take a look at these couple of examples, or click the image below.

functions.php

Please excuse the indention of the code. The WordPress plugin does not like my tabs.

All of the code we are about to add will be put in functions.php. This file is included automatically in the Theme, so anything we put in here can be used throughout the theme.

To make this expandable for the future, we are going to declare all of our information in an array. This way, we can add some information to the array, and it will be automatically added to our Admin Panel.

Information Array

/*
Plugin Name: Custom Write Panel
Plugin URI: http://wefunction.com/2008/10/tutorial-create-custom-write-panels-in-wordpress
Description: Allows custom fields to be added to the WordPress Post Page
Version: 1.0
Author: Spencer
Author URI: http://wefunction.com
/* ----------------------------------------------*/

$new_meta_boxes =
array(

);

Inside of that array, we are going to add more arrays which will hold the information of the new meta box.

$new_meta_boxes =
array(
"image" => array(
"name" => "image",
"std" => "",
"title" => "Image",
"description" => "Using the \"<em>Add an Image</em>\" button, upload an image and paste the URL here.")
);

The array is pretty self explanatory. The first value is the name of field, after that would be a standard value (in this case, it is blank, but this would be useful to store default information), and then the Title of the meta_box, ending with the description.

There are 3 functions that will be the backbone here. Let’s go ahead and declare those now:

function new_meta_boxes() {

}

function create_meta_box() {

}

function save_postdata( $post_id ) {

}

Creating the Fields

Lets work on function new_meta_boxes().

This is the function where we are going to build the actual HTML inputs. We first need declare a few variables as global. We will then be able to access them inside the function. We need to be able to access the $post variable, as well as $new_meta_boxes (our array.)

function new_meta_boxes() {
global $post, $new_meta_boxes;
}

Because all of our information is in an array, we need to loop through it all, and create an input box for each one:

function new_meta_boxes() {
global $post, $new_meta_boxes;

foreach($new_meta_boxes as $meta_box) {

}

Next we need to figure out a default value for the inputs. We can do this by checking the get_post_meta WordPress function.

function new_meta_boxes() {
global $post, $new_meta_boxes;

foreach($new_meta_boxes as $meta_box) {
$meta_box_value = get_post_meta($post->ID, $meta_box['name'].'_value', true);

if($meta_box_value == "")
$meta_box_value = $meta_box['std'];
}

This is some pretty simple PHP. We define $meta_box_value, and set it equal to get_post_meta. Next, we check to see if our variable == "" (equals nothing) meaning no data has been previously entered. If nothing has been entered, we set the $meta_box_value equal to the std value we defined in the array

Time to start building the inputs. First off, we are going to create a hidden field that we will use to verify the data later on.

echo'<input type="hidden" name="'.$meta_box['name'].'_noncename" id="'.$meta_box['name'].'_noncename" value="'.wp_create_nonce( plugin_basename(__FILE__) ).'" />';

Now we can echo the title of our Custom Input:

echo'<h2>'.$meta_box['title'].'</h2>';

Next our actual input box. This gets the value of $meta_box_value we worked out earlier.

echo'<input type="text" name="'.$meta_box['name'].'_value" value="'.$meta_box_value.'" size="55" /><br />';

Finally, just add our little description we defined in the array

echo'<p><label for="'.$meta_box['name'].'_value">'.$meta_box['description'].'</label></p>';

(All of that is still in our function new_meta_boxes() function.)

Make it Meta!

Our next function, function create_meta_box(), will actually create each of the meta boxes. We are going to be using WordPress’s add_meta_box

function create_meta_box() {
if ( function_exists('add_meta_box') ) {
add_meta_box( 'new-meta-boxes', 'Custom Post Settings', 'new_meta_boxes', 'post', 'normal', 'high' );
}
}

if ( function_exists('add_meta_box') ) { is important because this function did not exist in versions of WordPress before version 2.5. You need to on at least version 2.5 before this will work.

From WordPress.org, the function works like this:

<?php add_meta_box('id', 'title', 'callback', 'page', 'context', 'priority'); ?>

callback is the most important. That is calling our function (new_meta_boxes). context decides whether or not this field should display on the “Write > Post” page, or the “Write > Page” page. You can read more about the parameters on the WordPress site

Saving the Data

Now here’s the important part, and the part where WordPress.org is pretty vague. This function will save our data.

function save_postdata( $post_id ) {
global $post, $new_meta_boxes;

foreach($new_meta_boxes as $meta_box) {

}
}

This is our function, and we’ve started off with including a few variables. Again, we need to include $post so we have the ID of the WordPress post. Also, we have to include the $new_meta_box array, as we will loop through it again.

This next bit (inside of the foreach loop), will verify that the data we are receiving is genuine.

// Verify
if ( !wp_verify_nonce( $_POST[$meta_box['name'].'_noncename'], plugin_basename(__FILE__) )) {
return $post_id;
}

if ( 'page' == $_POST['post_type'] ) {
if ( !current_user_can( 'edit_page', $post_id ))
return $post_id;
} else {
if ( !current_user_can( 'edit_post', $post_id ))
return $post_id;
}

No we are going to define a variable that will get the data out of our fields.

$data = $_POST[$meta_box['name'].'_value'];

It gets the $_POST data from our fields we created in the previous functions.

Now the last thing to do is to decide what to do with the new data. To keep WordPress from creating a new database entry each time, a few checks need to be made. First, we try and get any information with the same key and post id. If it returns empty, we know this custom field has not been added before. So, lets add it.

if(get_post_meta($post_id, $meta_box['name'].'_value') == "")
add_post_meta($post_id, $meta_box['name'].'_value', $data, true);

Next, we check to see if the new data in the field is different from any old data. If it is, we simply update the field.

elseif($data != get_post_meta($post_id, $meta_box['name'].'_value', true))
update_post_meta($post_id, $meta_box['name'].'_value', $data);

The last thing to do is delete one, if the field is left empty. This will keep our database free of any blank entries.

elseif($data == "")
delete_post_meta($post_id, $meta_box['name'].'_value', get_post_meta($post_id, $meta_box['name'].'_value', true));

Now, to actually make things work, we need to “hook” WordPress. We can do this by using add_action. This simply adds our functions to a specific area of WordPress. In our case, we need to hook the admin_menu, as well as when the post is saved, save_post.

add_action('admin_menu', 'create_meta_box');
add_action('save_post', 'save_postdata');

Our Final Code

/*
Plugin Name: Custom Write Panel
Plugin URI: http://wefunction.com/2008/10/tutorial-create-custom-write-panels-in-wordpress
Description: Allows custom fields to be added to the WordPress Post Page
Version: 1.0
Author: Spencer
Author URI: http://wefunction.com
/* ----------------------------------------------*/

$new_meta_boxes =
array(
"image" => array(
"name" => "image",
"std" => "",
"title" => "Image",
"description" => "Using the \"<em>Add an Image</em>\" button, upload an image and paste the URL here.")
);

function new_meta_boxes() {
global $post, $new_meta_boxes;

foreach($new_meta_boxes as $meta_box) {
$meta_box_value = get_post_meta($post->ID, $meta_box['name'].'_value', true);

if($meta_box_value == "")
$meta_box_value = $meta_box['std'];

echo'<input type="hidden" name="'.$meta_box['name'].'_noncename" id="'.$meta_box['name'].'_noncename" value="'.wp_create_nonce( plugin_basename(__FILE__) ).'" />';

echo'<h2>'.$meta_box['title'].'</h2>';

echo'<input type="text" name="'.$meta_box['name'].'_value" value="'.$meta_box_value.'" size="55" /><br />';

echo'<p><label for="'.$meta_box['name'].'_value">'.$meta_box['description'].'</label></p>';
}
}

function create_meta_box() {
global $theme_name;
if ( function_exists('add_meta_box') ) {
add_meta_box( 'new-meta-boxes', 'Brazen Post Settings', 'new_meta_boxes', 'post', 'normal', 'high' );
}
}

function save_postdata( $post_id ) {
global $post, $new_meta_boxes;

foreach($new_meta_boxes as $meta_box) {
// Verify
if ( !wp_verify_nonce( $_POST[$meta_box['name'].'_noncename'], plugin_basename(__FILE__) )) {
return $post_id;
}

if ( 'page' == $_POST['post_type'] ) {
if ( !current_user_can( 'edit_page', $post_id ))
return $post_id;
} else {
if ( !current_user_can( 'edit_post', $post_id ))
return $post_id;
}

$data = $_POST[$meta_box['name'].'_value'];

if(get_post_meta($post_id, $meta_box['name'].'_value') == "")
add_post_meta($post_id, $meta_box['name'].'_value', $data, true);
elseif($data != get_post_meta($post_id, $meta_box['name'].'_value', true))
update_post_meta($post_id, $meta_box['name'].'_value', $data);
elseif($data == "")
delete_post_meta($post_id, $meta_box['name'].'_value', get_post_meta($post_id, $meta_box['name'].'_value', true));
}
}

add_action('admin_menu', 'create_meta_box');
add_action('save_post', 'save_postdata');

Implementation

Now I bet you are wondering “now how the heck do I get information?!” Well, it’s quite simple really. You do it the same way you would for a normal custom field. We’ve been using the function already in the tutorial, get_post_meta().

So, just open up one of your theme files where you want the custom data to appear. First, let’s check to see if there is anything entered for this post. Because if there isn’t, we shouldn’t show anything (in this case, it would result in a broken image.)

<?php
if(get_post_meta($post->ID, "image_value", $single = true) != "") :
?>

Now the actual image:

<img src="<?php echo get_post_meta($post->ID, "image_value", $single = true); ?>" alt="<?php the_title(); ?>" />

And to end our if statement:

<?php
endif;
?>

Conclusion

As you can see, customizing WordPress is not an easy task. However, it pays off in the long run. By streamlining the User-Interface of adding custom data, you can help make your life, as well as your clients life a whole lot easier.

If you have any questions about the code above, or the tutorial in general, please do not hesitate to leave a comment below. I will do my best to help answer any questions that may arise.

Another collaboration between ourselves and WooThemes, the result: this stunning theme with optional layouts. We’ve realized, that while a lot of people no doubt love magazine style themes – there are still a lot of people who would like the option of having something a little more personal. So here you have it!

As always with WooThemes there is a range of colours to chose from, and a really easy to manage back end, which means whichever layout you chose – it’s always easy enough to manage.

Theme Description

OpenAir is designed to have a very sort and open feel to them, with soft subtle gradients and border with great use of white space to give a spacious and elegant feel to your content. We’ve set the theme around a grid based layout so that information can easily be seen and read throughout.

Theme Details

Navigation

We’ve made navigation very easy and well presented through the theme. At the top you have any links/pages you’d like. And along the other navigation/tabs we have a list of categories. Making it very easy for you to browse through the categories, and to see which category you are in at any given time.

Post Info & Related Posts

Related posts are a great way of encouraging exploration to your website. And we’re used to seeing them hidden away in posts or at the end of posts, but why not have them on the front page next to a post? They are easily accessible now next to any post.

Grid Layout

Grids are undoubtedly a great way of displaying a lot of information, in a easy to browse and manage way. OpenAir makes great use of grids in this way to display older posts in a much more attractive way.

Download & Demo

Download & Details |  Demo |  Blog Post

Use the links above o read more about the theme and to experience it for yourself. We’ve had a few releases on WooThemes and are really proud to be working along side some great guys. Not only do they provide great looking themes, but if you purchase a theme you’ll no doubt be impressed with their support forums and custom back-end theme options. And right now they are running a 3 for 1 deal on all of there themes, Including this one.

A while ago we had the pleasure of working with DreamTemple for a WordPress Theme which they’ve given away for free on Smashing Magazine. That means you can get this beautiful and unique theme for free, from the king of freebies Smashing Magazine.

We’re very happy to once again have some of our work featured on such a wonderful resource, and are working on another free theme which will be also be released on Smashing Magazine.

Theme Details

Details and Subtle Touches

As always we’ve added many subtle background effects and textures, the beautiful dark wood texture contrasted with the clean open paper background on which the content lies. We’ve managed to make something which remains very spacious and clean when it comes to the content, even though it sits on top of something very decorative and grungy.

Colour Changes

As a added extra touch, we’ve created some additional schemes which you can easily switch through by clicking any one of the colour tabs on the side of the theme. This will change the colour of the links throughout the page. We were going to have a completely new theme for each tab, but the colours never looked as good as they do right now, so we felt it would be better to retain the quality of the original and just have the links change colour.

Traditional Blog Layout

Although Magazine styles are great (well I still think so at least) – we’re just as happy to see more and more personal blog layouts coming back. The truth is, not every blog needs to have a magazine layout, so we’re glad to have been able to offering something for those of you who prefer something which is more personal.

Once again, we’d like to thank DreamTemplate for working with us on this theme and Smashing Magazine for releasing the theme and their great support.

Download & Demo

Download & Details |  Demo

More details and information is available on the link above, also you can check out the live demo to see the theme fully working. And as the theme is free you’ve got no reason not to try it out. The PSD file is also available for download, make sure you check the download & details link for that. Thanks, let me know what you think.

This set of free characters is ideal for adding a little personality into your designs. With a variety of actions and poses to chose from you can easily adapt them into your designs anywhere you feel needs it.

Inject a little fun into your dull and boring help pages, emphasize a feature or a button on your page, add a little hint or tip on your page coming from one of the characters, use them to show off or present your portfolio items… Basically you can use them for anything, we don’t mind. All we ask is that you link back to this page if at all possible, but it’s not a requirement.

Created by Pasquale D’Silva

We’ve worked with Pasquale before on our Twitter Illustration in a previous post, but we really love his style so wanted to work with him again on something which we would use, but also something that we could share with you guys.

We highly recommend you check out his work via his blog @ darkmotion.com because he truly is one of the most talented and professional people you will ever come across, so if you did like this character set, and perhaps want something a little more unique and something created just for you give him a shout.

The Full Set

Here is the complete set – we’ve gone for quality and usefulness, trying to create poses that could be used in a lot of many different ways, and for many different things, take a look below!

Show us what You’ve done

If you do download these and use them it would be cool to see them in action, leave a link in the post below and let us know what you think of them. And if these go down well we should be seeing some more like this in the future.

Download the Character Pack

The files are in .eps format perfect for scaling. You will need to unzip the pack at first, then you will find the files inside. Enjoy!

Download Function Character Pack | 309.8 kb | .zip

Creating a website is no easy task. WordPress is an easy solution for creating a Blog, but sometimes something a little more, in terms of functionality, is needed. After trying many other platforms, I have found WordPress to be the easiest to use. Because of it’s wide array of themes, great plugin system, and easy to use administration system, WordPress takes the cake. Using a Custom Write Panel, Custom Options, and manipulating the theme files, the possibilities are almost endless. In This post we have a few ways you can transform your plain WordPress powered Blog into an easy-to-manage Internet Identity.

The Layout

There are a few things that even the novice WordPress user can do. You can work straight out of your admin panel for a quick solution, or if you are feeling adventurous, editing some theme files can help produce a fresh new structure for your site.

Static Homepage

Anyone who has explored the WordPress admin panel has probably seen the options required for this, but may have not known what they do. WordPress has a built in feature which allows for the Blog owner to select a published page to show up as their default homepage, and select a separate page to list the blog posts. This is great if you want your visitors to see a static page first (ex. About Me page), before they go on and view the blog posts.

You first need to select the page which will show first. Just select any page from the drop-down list that has content on it. Next, you will need to select a blank (but published) page to show the blog posts on. Just create a page like you would normally, adding a title (ex. Blog), but no content. Select that page from second option’s drop-down

home.php

WordPress has another built in feature (it seems they love to make our lives easier) that allows for a completely custom homepage. If your homepage has a different layout from your blog, you can create a separate file, and have that loaded as your homepage. As seen in the template hierarchy, WordPress first checks to see if a home.php file exists. If so, it will load that instead of index.php.

So by creating a file named home.php, filling it with whatever you would like, and uploading it into your theme’s root folder, you are able to create a separate homepage. By utilizing the Loop, this is a great way to show only certain posts when the guest first views the site.

Note: All HTML Markup is based on the WordPress Default Theme.

<?php get_header(); ?>

<div id="content" class="narrowcolumn">

<h2>Welcome!</h2>

<p>This can be a custom part of the <code>home.php</code>, just a little custom welcome text. You can check out some of our latest <b>News Posts</b> below.</p>

This should all look pretty familiar if you have any experience working with WordPress themes. First, I’ve included the header.php file with the get_header(); function. Then just some basic HTML Markup that includes a welcome message at the top of the page.

<h2>News Posts</h2>

<ol>

<?php query_posts( 'cat=60' ); if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>

<?php endwhile; ?>

<?php else : ?>

<li>There are no new posts in this category.</li>

<?php endif; ?>

</ol>

Here is where we are going to list our latest Blog posts. It is just a basic loop, except for one minor difference:

<?php query_posts( 'cat=60' ); ?>

query_posts can be used to modify a WordPress loop. I’ve modified this loop to only show one category, in my case, a news category.

The last part of our home.php:

</div>

<?php include_once( TEMPLATEPATH . '/sidebar-homepage.php' ); ?>

<?php get_footer(); ?>

The last difference is the way I include a sidebar. By using an include_once(), I can include a different sidebar in our home.php. You can use a Include Tag to include a separate file. In the same directory as your theme files, create a file you would like to include in your sidebar.

Live Examples

WooThemes

Custom Page Templates

Like using a home.php, using a Custom Page Template is useful for creating unique pages that do not fall under the same layout as your main blog. However, custom Page Templates allow for any page to be custom, not just the homepage. The best part about them, is they are super easy to make.

If I wanted my “About Me” page to include a different sidebar then the rest of my blog, and perhaps the Search Form above it, there is a very easy way to go about this. In your theme’s directory, just create a file called about.php

<?php
/*
Template Name: About
*/
?>

That is the most important part. WordPress will read the top of the file and realize that this file is supposed to be used as a Page Template. Below that, you can add whatever code you like. There are two ways of doing it. You can add static content to your post, or add the Loop again, so the content is retrieved from WordPress. Here is an example of the latter:

<?php
/*
Template Name: About
*/
?>

Live Example:

Cushy by WooThemes

Conditional Tags

Let’s face it. Viewing the same style pages eventually get’s a little mundane. If you’re looking for a way to spice up your site, or just show different information on certain pages, there are a few ways to do it. Conditional Tags as well as custom pages allow for the ultimate control. Below are just a few scenarios:

If you are not currently viewing a Page, show the sidebar. If you are on a Page, do not show the sidebar.

<?php if( !is_page() ) : ?>
<?php get_sidebar(); ?>
<?php endif; ?>

If you are on the homepage, get a special footer file. If not, show the normal one. This could be used to show more information about your company or site when the visitor first views the site.

<?php if( is_home() ) : ?>
<?php include (TEMPLATEPATH . "/footer-info.php"); ?>
<?php else : ?>
<?php get_footer(); ?>
<?php endif; ?>

For a full list of Conditional Tags, check out the Codex.

The Loop

The Loop. The Loop. The infamous loop. The Loop can be a wonderful thing, or a scary one. It all depends on how you approach it. I’m going to show you a more advanced way of using a Loop, because you can find some great info on the Loop on the WordPress site.

Creating a Gallery Site

Creating a gallery can be great for a portfolio site, a “best web gallery” site, or anything that requires showing some images of stuff.

The code and/or information below assumes you have successfully setup Custom Write Panels

The basic structure for a gallery type site is simple. Create the post adding the necessary information, and list the posts in the gallery page. To start off, make sure you have added the following Custom Write Panels.

• Image
• Website

These are the only ones needed to create a simple gallery, but of course it can be easily modified to fit any of your needs. The next part would be to create the actual Gallery page. This can be done using a Custom Page template.

<?php
/*
Template Name: Gallery
*/
?>

<?php get_header(); ?>

<?php get_footer(); ?>

Now it’s time to add the loop (in between get_header(); and get_footer();) which will show our posts.

<div id="content" class="widecolumn">

<?php query_posts( 'category_name=Gallery' ); if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<?php endwhile; ?>

<?php endif; ?>

</div>

You will of course need to change category_name=Gallery to the name of your category.

For now, I’m just going to do the basic markup. No styling or anything, just so you can get how the the code will be set up. First, we’ll do our gallery item’s title like normal:

<h2><?php the_title(); ?></h2>

Now the cool part. Using a great script called TimThumb we can dynamically create thumbnails of any size. Download the source, and upload it into your theme’s folder under thumb.php

Download TimThumb

Now we’ll start a link so the thumbnail is clickable.

<a href="<?php echo get_post_meta( $post->ID, "website_value", true ); ?>" title="<?php the_title(); ?>">

I’m setting the URL to be equal to the value entered in our custom field.

Next the image: This gets the value of the image field, and applies the TimThumb code, setting the thumbnail to 100×100px.

<img src="<?php bloginfo( 'template_directory' ); ?>/thumb.php?src=<?php echo get_post_meta( $post->ID, "image_value", true ); ?>&amp;w=100&amp;amp;amp;amp;amp;h=100&amp;amp;amp;amp;amp;zc=1" alt="<?php the_title(); ?>" />

And end the link:

</a>

The last part would be to show the description of the website. We can do that by showing an excerpt of the post body.

<?php the_excerpt(); ?>

That’s it for our gallery.php. Now it’s time to activate the Gallery page. In your WordPress admin panel, go to Write > Page. Create a new page with a title of “Gallery.” Leave the body blank, and apply our Page Template

Now, create a post with the correct information, and visit your gallery page. It should list all of your information! Of course, the gallery.php is a very simple, minimalistic page; but it functions.

Note: If your thumbnails are not showing up, please make sure you created a folder named “cache” in your theme’s directory, and it is writable.

Custom Loops

Sometimes you may find yourself needing to use more then one loop. However, an important note on the WordPress codex tell us that instead of using query_posts like we did in our gallery system (it was okay there, because it was the main, and only loop, in our page), we need to use something called WP_Query();. This can be used to fetch any posts, and best of all, it uses the same parameters are query_posts.

First, we need to define a variable as a new query. Then we take that variable, and apply some parameters to it:

<?php $latest = new WP_Query(); $latest->query( 'showposts=10&amp;amp;amp;amp;amp;cat=-63' ); ?>

Next, we simply loop through the results just like we would with a normal loop.

<?php while ($latest->have_posts()) : $latest->the_post(); ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
<?php endwhile; ?>

Like I said, you can use any of the Parameters, making this a great tool to grab posts from certain categories and displaying them around your site.

Social Networking

With the amount of social networking sites, topsites, and tons of ways to spread the word about your articles and blog posts, there has to be an easier way to submit them. By adding links to the bottom of your posts, you can get users to submit your articles for you!

Site RSS

<a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>"><?php _e('<abbr title="Really Simple Syndication">Subscribe</abbr>'); ?></a>

Stumble Upon

<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" title="Submit to StumbleUpon">StumbleUpon</a>

Digg

<a href="http://digg.com/submit?phase=2&amp;url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>&amp;bodytext=<?php the_excerpt() ?>" title="Digg this story">Digg this</a>

Del.ic.ious

<a href="http://del.ic.ious/post?url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>" class="delicious" title="Add to Del.icio.us">Del.icio.us</a>

Design Float

<a href="http://www.designfloat.com/submit.php?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>">Float This</a>

Mixx

<a href="http://www.mixx.com/submit?page_url=<?php the_permalink(); ?>">Mixx</a>

Obviously there are tons more. All you have to do is figure out what variables the submit page takes to fill in the fields, and then create the URL dynamically. Here is a list of some variables you can use.

• the_title(); – The Post Title
• the_permalink(); – The Post’s URL
• the_excerpt(); – A small portion of the article

Conclusion

There are a million ways you can customize and expand your WordPress powered site. I’ve touched on a few, but of course, there are many more. If you are interested in learning a different aspect of WordPress, please leave a comment and let me know. I’ll leave you know with some great WordPress powered sites, that you may or may not have known ran WordPress.

Resources

• WordPress Codex – Coding for WordPress
• WPCandy – Articles, Tutorials, and Resources
• We Love WP – WordPress Powered Website
• Intersquash – iPhoneize Your Website (Great for WP)
• Web Designer Wall – WP Tutorials
• WooThemes – Premium WordPress themes.
• WordPress Lessons – Tutorials via WP.org
• ThemeForest – Premium WordPress Themes
• WP Designer – Creating a Full WordPress site
• Lorelle on WordPerss – WordPress Resources
• WordPress.com – Get a Free Blog
• WP CMS – WordPress CMS Modifications

WordPress Powered Sites

CNN Blogs

Best Web Gallery

Fuel Your Creativity

Number 10.co.uk

Outlaw Design Blog

Ahh yes, the Design Community. I love it! This is the topic of a recent guest post I wrote over at MyInkBlog. Below is an extract from the article, but you can read the full the article here. Please leave your feedback and comments on the actual post rather than here.

Why I love the Design Community & Industry

Choosing what career path you wish to take is one of the biggest decisions you will ever make in your life. And people take a lot of things into consideration when choosing their job, but did you ever stop and think about what the community around your job choice might be like, and how that could effect your choice.

Without doubt the Design community is one of the most unique industries to be a part of, what other profession would you see professionals going out of their way to make a tutorial of how to do something and make it public for all of their “competitors” to read and learn from. It’s a strange logic, but one that makes sense and ultimately creates a community and industry that is always moving forward and evolving together.

I’ve put together a list of my top 10 reasons why the design community is such an amazing and diverse place, and why I love being a part of it.  *The links & examples I give are only there to support my points, and are not the main focus of the article.

01. Freebies

A word which a lot of people love to hear, it is something which you find a lot of in the design community. Giving something away for free to other designers to help them improve their own work and profession is rare in many other jobs. But in the design community designers love creating things for other designers and giving top quality products away for free.

Here are some of my top Freebie Picks:

Silk Icons

Function Icon Set (128 Free Icons)

Agregado: A Free WordPress Theme

30 Sites to Download Free Stock and Royalty Free Images

Tutorial9: Dirty Spray Brushes

02. Sharing Information & Knowledge

The design community is very geared towards making the industry and community better, this explains why it’s very easy to find yourself getting involved in the design community, and start learning some tricks of the trade in all aspects of the industry. There’s tutorials on all sorts, everything from finding clients & managing your work to creating big elaborate graphic design pieces and tutorials going into great detail on all aspects of web design & development. Being part of a community that is so willing to share tips tricks and information is quite a privilege, and while the information is out there it would be silly not to take advantage of it, there is always something you can pick up from any tutorial (even if the end result isn’t always mind-blowing)

Great examples to show what I mean:

Tutorial9

PSDTuts

PSDFan

VECTORTuts

Photoshop Star

All of these not only have a great focus on tutorial and education, but there is also a great community around them, providing feedback and allowing other people to share further tips and techniques. So for me, tutorial sites are quite an important part of the design community.

Read the Full Article

Coninue reading the full article >

To celebrate the launch of Theme Forest and our new theme Evo, we’re giving away 5 sets of $25 credit to be used on any theme on the site. Find out more at the end of the post.

The theme is ideal for either being used straight out of the box, or brilliant for being customized. It wouldn’t be hard to stamp your own personality onto this clean and sleek magazine theme.  We’re very happy to have the theme available among so many brilliant themes on Theme Forest. Check it out and let us know what you think, for your chance to win $25 Credit.

We were asked by Collis a while ago if we could create a couple of themes for his (then upcoming) new project Theme Forest. We jumped at the opportunity, and by his comments he seems pretty happy. It was a great pleasure for working with such a genuinely nice guy, and despite some complications, problems and delays (due to issues out of our control) he was very understanding and patient.

Theme Description

A cool, sleek theme with the focus on content. There is a large featured post area which is ideal for showing off some crisp photographgy/portfolio items or some amazing imagery that you can find to compliment your article. It really encourages you to find that perfect image to go with your content and keep your readers interested.

Theme Details

Layout

The layout puts the initial focus onto the most recent item, below that we have made use of the 960 Grid System to give the older news a more appealing look and making them easier to browse. The blocks of news below allow for a lot of content to be displayed without looking too busy. Check the live demo to see what I mean.

Navigation

The Navigation is fully dynamic and looks great, as you can see. The colours throughout the site are very easy on the eye and clean, it also makes the whole thing quite easy to customize. And at only $30 it is a great theme to use as it is, or to build upon.

Typography

As always we made sure that the titles were nice and large, clear and easy to read. The beautiful Georgia font came into play for the titles yet again. We felt that it really worked well with the layout and overall feel of the design. Although we love the fonts, we imagine that you could experiment with a few other fonts and colours if you wanted to, to really make the theme your own.

Win $25 Credit for Theme Forest

We are giving away 5 packs of $25 credit to be used on any Theme Forest template. First of all sign-up to Theme Forest using the banner below, and then enter the competition by doing the following:

How to Enter

Simple. Just post a comment about the theme, or about Theme Forest and let us know what you think of either the theme, or Theme Forest, or both. 5 random answers will be chosen to win the prizes, but all feedback will be useful for both us and Theme Forest staff.

Demo & Info

First off, I’d just like to introduce myself. My name is Spencer, and I am the lead developer here at Function. I’m the guy that takes Liam’s awesome designs, and turns them into working sites.

Liam had this design laying around, and I knew I couldn’t let it go to waste. So, I’ve spent the last week or so, coding and perfecting this theme. The theme is great right out of the box, ready to be used by anyone or very easily customized.

Theme Description

A light theme, with a nice contrasting background, this design is sure to help present any amount of content. A unique sideblog area allows you to easily post small updates, or “micro-blogs.”

Theme Details

Custom Admin Panel

In an effort to make this theme more user friendly, a custom backend has been implemented straight into WordPress! This will allow you to change things like the header color, tracking codes, ad space, Sideblog options, and other features!

Multiple Color Themes

In the previously mentioned custom admin panel, you can choose between a green (default), blue, or red header color. All the colors work great with each other, and provide just another thing to make your website even more unique.

Custom Write Panel

This theme features subtitles, as well as post images. Normally, you would need to go through messy custom fields to add these extra features, but with a custom admin panel its super easy! Add the information just like you add the title of the post. You can learn all about it in the very detailed README included.

Get it Today

Check out ThemeForest to get it today! The price is currently at $25, an absolute bargain. If you don’t yet have an account for Theme Forest sign up using the banner below.