7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Code
  2. WordPress

WordPress: Beginner to Master, Part 6

Scroll to top
Read Time: 13 mins

Throughout this six-part beginner-to-master series, we'll be using the advanced features of WordPress to create our own portfolio & blog, complete with an options page, multiple styles and support for the new WordPress 2.7 features. Today we'll tie everything together.

In the final part of WordPress Week, we're creating a basic custom widget before finishing off by giving Innovation a bit of plastic-surgery with an alternative colour-scheme.

Also available in this series:

  1. WordPress: Beginner to Master, Part 1
  2. WordPress: Beginner to Master, Part 2
  3. WordPress: Beginner to Master, Part 3
  4. WordPress: Beginner to Master, Part 4
  5. WordPress: Beginner to Master, Part 5
  6. WordPress: Beginner to Master, Part 6

Jump to a Section

Loose Ends

There are still several text elements we haven't yet styled and therefore don't look right, such as image captions, blockquote, pre, code and address.

Add the following to style.css:

And this into deepblue.css:


A Custom Widget

We're going to make a widget (below) which will display the five latest blog posts – with the first attatched image for the post being resized and used as the preview image.

It is designed to be used on the homepage's widget area.

The widget is esentially a custom WordPress Loop called from a function which turns it into a widget.

Inside the /inc/ folder create a file named bloglist-widget.php and start it with the following:

The entire loop is being wrapped in a new function recentblogposts() (you may name it whatever you like). On the next two lines we register two objects as 'global' – this allows us to access WordPress' database ($wpdb) and post ($post) classes inside the widget. Following that we include the var.php file.


A normal custom loop, with the portfolio category excluded, limited to five posts and caller_get_posts=1 is a new parameter in WP 2.7 which sets the loop to ignore old 'Stickied' posts.

Now it gets interesting:

The above code searches the database to retrieve the URL of the first attatched image for the current post, and places it inside $image. Note that the image must be attatched and not linked from somewhere else.

See another post I wrote using this code on the ThemeForest Blog: "Image Resizing with WordPress".

If an attatched image was found, it is parsed through the TimThumb script to be 50x50px in size. The post title & date is then displayed aswell.

The loop and function are then closed:

Next, the widget is made compatible with the template by wrapping it in the $before_widget and $after_widget tags defined in the template:

Finally, the register_sidebar_widget() function is used to register the widget in the Dashboard. 'Recent Blog Posts' will be the name of the widget used inside the dashboard.

Inside functions.php add the following to include the new widget in the template:

In the Dashboard, open Appearance -> Widgets and drop the 'Recent Blog Posts' (not to be confused with the WordPress-default 'Recent Posts') widget into the 'Homepage Bottom' area:

Styling the Widget

The styling is pretty simple. The image is floated to the side, and the size & weight of the text is altered. Add this to style.css:

And add some colour to the links when hovered in deepblue.css:

That's it! As you've learnt, creating a very basic widget is as easy as wrapping a normal custom loop inside a widget function. :)


Internet Explorer – The Devil's Child

I'd like to start by apologising that we have to spoil this last part of the series in dealing with Internet Explorer's problems; but it's a browser still in quite high use and it's our duty to accomodate for those evil people using it.

We'll deal with IE7 first, and then with IE6's problems after.

Inside the /inc/ folder create a new folder named /css/ and inside it, two files: ie.css and ie6.css. These two files will be included in the header in a IE conditional statement. Add the following directly before the jQuery javascript files are included in the <head> section of header.php:

These IE Conditional Statements ensure that the ie.css file is only included in versions of Internet Explorer lower than IE8; and ie6.css is also used in versions lower than IE7.

The first problem is in the comments section, where IE7 doesn't seem to be dealing with the font-sizes in the same way as other browsers, and making each threaded comment become smaller than it's parent comment:

Add the following into ie.css to set the font-size in comments in pixels (as opposed to the em's being used in the main stylesheet):

One more problem: the search form & headers in the sidebar have decided they'd rather like a 15px text-indent:

Just drop in the following to force it back:

Now to the IE6 issues. The first and most obvious, is that the navigation bar's background doesn't work since it's a transparent PNG:

There are several IE6 PNG fixes available, I'll be using DD_belatedPNG. Save the .js file into the /inc/ folder.

Directly below your other IE conditional statements in header.php add: (be sure to edit the .js file name if yours isn't named DD_belatedPNG_0.0.7a-min.js)

Inside DD_belatedPNG.fix() we pass two arguements. These are simply the CSS selectors of the elements to apply the PNG fix to.

Add to ie6.css to fix a few problems with the homepage's widget area and we're done:

Plastic Surgery

All our effort of seperating colour styles from the rest of our CSS was to make it easier to create alternate colour schemes selectable from the options page. In this final section of the series, Innovation is going under the knife with the redspace scheme:

Inside the /styles/ folder, make a new folder named /redspace/ and inside, copy in the search.png and bullet.gif files from the /deepblue/ folder.

Also make a copy of deepblue.css as redspace.css.

Save the following three images into the /redspace/ folder as bg.jpg, trans.png and transred.png respectively:

It's now as simple as just swapping out the blue colour codes with red ones in redspace.css:

From the Dashboard, open the Innovation options page, and select redspace.css from the 'Colour Scheme' option – the page has already scanned the /styles/ folder and listed the .css files in there.

Hit apply, and we're finished!



Throughout this series you have learnt a number of skills required to power all kinds of sites with the WordPress system! Most of Innovation's files can be reused on your new projects to help speed up your development process.

Download the source files from this part, and theres one extra (more basic) colour scheme available – SoftLight:

Need help with Innovation? Want to share your new colour-schemes? Go to danharper.me/innovation/ and click the Forums link.

Thanks for reading and I really hope you found this series useful!

- Dan


Hungry for more?

Loving WordPress? Need more? I've compiled a quick round-up of some of my favourite WordPress resources.

Rockstar WordPress Designer

During the course of the book you'll build THREE WordPress themes, a blog, a portfolio site and a general site with menus and submenus. Each theme demonstrates different aspects of WordPress theming.

Read More

WordPress for Designers

You asked, and we responded! Due to high demand, we're launching a new video series that will run alongside the "Diving into PHP" screencasts. It is our hope that these two series, viewed back-to-back, will turn you into a dynamite PHP/WordPress designer.

Visit Series

WordPress Codex

Theme development, the codex is clear and well written documentation. Coming from the creators of WordPress, you can't go wrong following its instructions.

Visit Codex

CSS-Tricks WordPress Series

A video screencast series on Designing for WordPress. It is a three-part series which covers downloading and installing WordPress on a server all the way to a completed theme.

Visit Series


Your Visual Resource for All Things WordPress.

Visit Site

Create WordPress Themes From Scratch

I'm going to show you how to create a wordpress theme from scratch in these 3 parts of tutorial series. I will cover from Structuring, designing in Photoshop, slicing, coding into fully css based html, and finally wordpress implementation.

Visit Series

NETTUTS » WordPress

Obvious, but if you need some extra WordPress reading, look through the past tutorials!

Visit Site

WordPress Context Includes

The great thing about WordPress is that it doesn't limit how content is displayed, but provides a 'framework' of ways to do so. Even better, it's possible to change the display according to the content.

Visit Tutorial

The Flexibility of WordPress

The flexibility offered by the WordPress engine is phenomenal - being able to publish anything from a basic blog to a forum, from a web showcase to a corporate CMS site! Here we take a look at some of the great ways WordPress has been used so far.

Visit Article

The Anatomy of GamePress

We take a look at how a popular premium WordPress theme takes advantage of WordPress' advanced functions to create a template really pushing what WordPress is capable of!

Visit Article

Anatomy of a WordPress Plugin

WordPress is well known for its amazing collection of free plugins. There is one for almost every need you can think of, from backing up your WordPress installation to asking for a cup of coffee or fighting spam.

Visit Article

Create a Custom WordPress Plugin From Scratch

This tutorial will describe the implementation of a Wordpress plugin starting from scratch. The plugin will connect to an external OSCommerce database and display random products on your Wordpress site. It also implements a configuration page for the Wordpress admin panel.

Visit Tutorial


'WordPress Hacks' covers the world surrounding WordPress, including the latest WordPress hacks, news, tips, tricks, and how-to's of the popular open source blogging software.

Visit Site


A new blog to post replies to WordPress questions, and quick but very usefull recipes about my favorite blogging platform.

Visit Site


First step to success is to realise that whatever problem you have, someone else is bound to have had it before. A simple Google search will provide you a solution to most of the bumps in the road you come across when developing for WordPress.

Visit Site

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.