Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

WordPress: Beginner to Master, Part 6

by
Gift

Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.

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:

 
p.wp-caption-text { 
    font-size: 0.8em; 
    font-style: italic; 
} 
 
blockquote { 
    font-size: 0.9em; 
    margin: 15px 0 15px 15px; 
    padding: 0 15px; 
} 
 
pre { 
    font-family: "Courier New", Courier, monospace; 
    font-size: 0.9em; 
    margin: 10px 0 20px 0; 
} 
 
code { 
    background-color: #efefef; 
    color: #000; 
    font-family: "Courier New", Courier, monospace; 
    font-size: 1em; 
    margin: 0 3px; 
    padding: 0 3px; 
} 
 
address { 
    font-size: 0.9em; 
    font-family: Georgia, "Times New Roman", Times, serif; 
    line-height: 1.5em; 
    margin-bottom: 15px; 
}

And this into deepblue.css:

 
p.wp-caption-text { 
    color: #555; 
} 
 
blockquote { 
    border-left: 2px solid #e3e8ed; 
}

 


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:

 
<?php 
 
function recentblogposts() { 
    global $wpdb; 
    global $post; 
    require(TEMPLATEPATH . '/var.php'); ?> 
 
    <h2>From The Blog</h2> 
    <ul class="bloglist">

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.

Next:

 
<?php query_posts("cat=-$ts_portfolio_cat&showposts=5&caller_get_posts=1"); 
while(have_posts()) : the_post(); ?>

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:

 
<?php 
$image = ""; 
 
$queryattach = "SELECT guid FROM " . $wpdb->posts . " WHERE post_parent = '" . $post->ID . 
"' AND post_type = 'attachment' ORDER BY `post_date` ASC LIMIT 0,1"; 
 
$post_attachments = $wpdb->get_results("$queryattach"); 
 
if ($post_attachments) { 
	$image = $post_attachments[0]->guid; 
} 
?>

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".

 
<li><a href="<?php the_permalink(); ?>"> 
 
    <?php if($image) { ?> 
        <img src="<?php bloginfo('template_directory'); ?>/inc/thumb.php 
        ?src=<?php echo $image; ?>&amp;w=50&amp;h=50" alt="" /> 
    <?php } ?> 
 
    <span class="posttitle"><?php the_title(); ?></span> <span class="postdate"><?php the_time('F jS Y') ?></span> 
 
</a><div class="clear" /></li>

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:

 
    <?php endwhile; ?> 
    </ul> 
 
<?php 
} ?>

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

 
<?php 
function widget_recentblogposts($args) { 
	extract($args, EXTR_SKIP); 
	echo $before_widget; 
	recentblogposts(); 
	echo $after_widget; 
} 
?>

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.

 
<?php 
register_sidebar_widget('Recent Blog Posts', 'widget_recentblogposts'); 
?>

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

 
include(TEMPLATEPATH . "/inc/bloglist-widget.php");

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:

 
ul.bloglist { 
    margin: 0; 
    } 
	 
ul.bloglist li { 
    clear: both; 
    font-size: 1em; 
    line-height: 1.3em; 
    list-style: none; 
    margin-bottom: 17px; 
    overflow: hidden; 
    } 
	 
ul.bloglist li img { 
    border: none; 
    float: left; 
    margin-right: 7px; 
    } 
	 
ul.bloglist li .posttitle, ul.bloglist li .postdate { 
    display: block; 
    font-size: 0.9em; 
    } 
 
ul.bloglist li .posttitle { 
    font-weight: bold; 
    margin-top: 2px; 
    } 
	 
ul.bloglist li .postdate { 
    font-size: 0.8em; 
    font-style: italic; 
    font-weight: normal; 
    } 
 
ul.bloglist li a:link, ul.bloglist li a:visited { 
    display: block; 
    padding: 2px; 
    overflow: hidden; 
    } 
	 
ul.bloglist li a:hover, ul.bloglist li a:active, ul.bloglist li a:focus { 
    text-decoration: none; 
    }

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

 
ul.bloglist li a:link, ul.bloglist li a:visited { 
    color: #333; 
    } 
	 
ul.bloglist li a:hover, ul.bloglist li a:active, ul.bloglist li a:focus { 
    background-color: #e3e8ed; 
    }

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:

 
<!--[if lt IE 8]> 
    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/inc/css/ie.css" type="text/css" media="screen" /> 
<![endif]--> 
 
<!--[if lt IE 7]> 
    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/inc/css/ie6.css" type="text/css" media="screen" /> 
<![endif]-->

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

 
.commentlist cite, .commentlist span { 
    font-size: 14px; 
    float: left; 
    padding-right: 4px; 
} 
 
.commentlist p { 
    font-size: 13px; 
    line-height: 16px; 
} 
 
.commentmetadata { 
    font-size: 13px; 
    line-height: 14px; 
} 
	 
.commentlist .reply { 
    font-size: 13px; 
}

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:

 
#sidebar ul li * { 
    text-indent: -15px; 
} 
 
#sidebar ul li ul * { 
    text-indent: 0; 
}

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)

 
<!--[if IE 6]> 
<script src="<?php bloginfo('template_directory'); ?>/inc/DD_belatedPNG_0.0.7a-min.js"></script> 
<script> 
    DD_belatedPNG.fix('#nav, li.current_page_item a'); 
</script> 
<![endif]-->

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:

 
.extras { 
    display: inline; 
} 
	 
ul.bloglist li a:hover, ul.bloglist li a:active, ul.bloglist li a:focus { 
    background: none; 
    cursor: pointer; 
    text-decoration: underline; 
} 
	 
ul.bloglist li { 
    width: 300px; 
} 
	 
ul.twitter li.twitter-item { 
    float: left; 
    width: 260px; 
}

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:

 
/* Innovation red style - redspace.css */ 
 
body { 
    background: url("redspace/bg.jpg") repeat-x #140a05 0 top; 
    color: #333; 
} 
     
a:link, a:visited { 
    color: #941919; 
} 
 
#head h1 { 
    color: #fff; 
} 
     
#head h3 { 
    color: #c4acaa; 
} 
     
#nav { 
    background: url("redspace/trans.png") repeat; 
    border: 1px solid #5b2022; 
} 
     
#nav ul li a:link, #nav ul li a:visited { 
    color: #b99e94; 
} 
     
#nav ul li.current_page_item a:link, #nav ul li.current_page_item a:visited { 
    background: url("redspace/transred.png") repeat; 
    color: #cdb9b2; 
} 
     
#nav ul li a:hover, #nav ul li a:active, #nav ul li a:focus { 
    color: #cdb9b2; 
} 
 
#content { 
    background-color: #f9f9f3; 
    border: 1px solid #5b2022; 
    border-top: none; 
} 
 
.work a:link img, .work a:visited img { 
    border: 5px solid #f2e9ea; 
} 
     
.work a:hover img, .work a:active img, .work a:focus img { 
    border: 5px solid #8d4846; 
} 
     
.work a:link, .work a:visited { 
    color: #333; 
} 
 
ul.twitter li.twitter-item { 
    background-color: #f6f5ed; 
    border: 1px solid #eae9de; 
} 
     
.flickr a:link img, .flickr a:visited img { 
    border: 3px solid #f2e9ea; 
} 
     
.flickr a:hover img, .flickr a:active img, .flick a:focus img { 
    border: 3px solid #8d4846; 
} 
     
.blogpost, .worksearch { 
    border-bottom: 1px solid #e8e3c8; 
} 
 
h2 a:link, h2 a:visited { 
    color: #333; 
} 
     
ul.meta li { 
    border-left: 1px solid #e3e8ed; 
} 
 
#sidebar ul li#search form #s { 
    background: url("redspace/search.png") no-repeat right #f6f6ec; 
    border: 1px solid #E8E3C8; 
} 
     
#sidebar ul li#search form #s:focus { 
    border: 1px solid #dad4b6; 
} 
     
#sidebar ul li ul { 
    background-color: #f6f6ec; 
    border: 1px solid #E8E3C8; 
} 
     
#sidebar ul li ul li { 
    list-style: url("redspace/bullet.gif"); 
} 
     
#sidebar ul li a:link, #sidebar ul li a:visited { 
    color: #333; 
} 
 
p.footer { 
    color: #554740; 
} 
     
p.footer a:link, p.footer a:visited { 
    color: #554740; 
    border-bottom: 1px dashed; 
} 
     
p.footer a:hover { 
    border-bottom: 1px solid; 
    text-decoration: none; 
} 
 
/* Comment List */ 
.commentlist li .avatar {  
    border: 2px solid #f2e9ea; 
} 
 
.commentlist cite a:link, .commentlist cite a:visited { 
    color: #333; 
} 
     
.commentlist .commentmetadata a:link:first-child, .commentlist .commentmetadata a:visited:first-child { 
    color: #333; 
} 
 
.thread-alt { 
    background-color: #F6F6EC; 
} 
     
.thread-even { 
    background-color: #F9F9F3; 
} 
     
.depth-1 { 
    border: 1px solid #E8E3C8; 
} 
 
.even, .alt { 
    border-left: 1px solid #E8E3C8; 
} 
 
input, textarea { 
    background-color: #F6F6EC; 
    border: 1px solid #E8E3C8; 
} 
     
input:focus, textarea:focus { 
    border: 1px solid #dad4b6; 
} 
     
p.wp-caption-text { 
    color: #555; 
} 
 
blockquote { 
    border-left: 2px solid #e3e8ed; 
} 
 
ul.bloglist li a:link, ul.bloglist li a:visited { 
    color: #333; 
} 
     
ul.bloglist li a:hover, ul.bloglist li a:active, ul.bloglist li a:focus { 
    background-color: #f2e9ea; 
}

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!


 


Summary

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


WordPress.tv

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


WPHacks.com

'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


WpRecipes.com

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

Visit Site


Google

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

Advertisement