Blog, the magazine. » Design http://www.blogthemagazine.com In regular, bite-sized chunks Wed, 26 Mar 2008 17:15:25 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 How To: Custom Headers in WordPress Themes http://www.blogthemagazine.com/issue-2/how-to-custom-headers-in-wordpress-themes.html http://www.blogthemagazine.com/issue-2/how-to-custom-headers-in-wordpress-themes.html#comments Wed, 26 Mar 2008 00:05:25 +0000 Simon http://www.blogthemagazine.com/issue-2/how-to-custom-headers-in-wordpress-themes.html We all love WordPress.  It’s streets ahead of its rivals in the blogging platform stakes and with good reason.  While some of its competitors fumbled around trying to create a business model that allowed them to charge for releases (only to have to revert back to “open source”, tail between their legs), the WordPress folk just got on with improving the platform and building an active community of users and contributors.  One of the strengths of WordPress is the ease with which themes can be developed.  The so called Template Tags give theme authors access to a wide array of data deep within WordPress, safe in the knowledge that they aren’t accessing the database directly.

In addition to the Template Tags, there are also some nice little extras.  One of which is the ability add custom headers to your theme.  This really comes into its own when you are considering releasing a theme out into the wider world.  It gives users of your theme a really simple way to add custom images to their header and crop them appropriately, all through a nice, usable, front end.  While this functionality has been around for a while, since at least version 2.1, it’s not terribly well documented.  So I’ve knocked up this quick guide to using custom headers in WordPress themes.  If you’ve got any questions or improvement, please drop them in the comments.

WordPress Custom Headings

The Basics

The general approach to custom headers assumes that there’s a space in your template that contains a header.  And this space can be styled fairly specifically through css.  To show you what I mean by this, I’ve copied out a very simple theme page below.  This includes space for a header which can easily be styled through CSS thanks to the use of a div with the id of “header”.

<?php wp_head(); ?>
<html>
<head>
    <link rel="stylesheet" href="
<?php bloginfo('template_url'); ?>
/style.css" type="text/css" media="screen, projection" />
    <title>Blog Title</title>
</head>
<body>
    <div id="header">
        <h1><a href="#"><?php bloginfo('title'); ?></a></h1>
        <p id="desc"><?php bloginfo('description'); ?></p>
    </div><!--  End #header -->
   </body>
</html>

As you can see, the basics of a template file.  What the custom header will do is hijack the CSS that controls the heading.  Essentially it will do two things.  Firstly is can apply a background image to the div, and secondly it can control the color and visibility of the text that appears in the div.  These options will appear in a new “Header Image and Color” area in the WordPress admin in the Presentation (Design in version 2.5) area.

The Mechanics

As you can image, writing the code for uploading and cropping images isn’t straight forward.  Thankfully all the hard work is handled by the WordPress API.  All we have to do is make sure our theme supports it.  We’ve already covered the part of our theme that allows all the magic to happen, but how about the admin options?  How do we make those available?

As with other theme related options, the calls to the WordPress API happen in your functions.php file.  It’s all really simple.  First of all we define some default styles for our heading area.  Then we write two pieces of CSS.  One that styles the header in the blog, and one that styles the header in the admin interface.  This CSS has to be written such that it can be dropped straight into the HEAD area of your template, so make sure it’s wrapped in appropriate STYLE tags.

These style snippets need to be assigned to two separate functions.  The functions don’t need to so anything other than output the style snippets, but you can include PHP code within them, so feel free to go mad with as much convoluted logic as you see fit. A few things you must do, however, is to set the background-image to be “header_image()” and set the dimensions to be the same as your defaults.  You should also check to make sure you hide text if that option is chosen (display: none) and set the color to any chosen by the user.  You also need to be aware that while you can choose your classes and ids in the theme, you have to use the ids “headimg” and “desc” for the admin style. “headimg” is the surrounding div while “desc” is the id of a div that contains the site’s description.

These two functions are then called in the add_custom_image_header function, which is the key to accessing the custom header API.  If this all sounds a bit complicated, I’ve included a simple implementation below which should point you in the right direction.  I’ve commented it as much as possible.

 <?php
//  Set some default values
define('HEADER_TEXTCOLOR', 'fff'); //  Default text color
define('HEADER_IMAGE', '%s/default.jpg'); // %s is theme dir uri, set a default image
define('HEADER_IMAGE_WIDTH', 500); //  Default image width is actually the div's height
define('HEADER_IMAGE_HEIGHT', 150);  // Same for height

function header_style() {
    //  This function defines the style for the theme
    //  You can change these selectors to match your theme
?>
<style type="text/css">
#header{
    background: url(<?php header_image() ?>) no-repeat;
    height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
    width:<?php echo HEADER_IMAGE_WIDTH; ?>px;
    padding:0 0 0 18px;
    font-family: Arial;
}
#header h1 {
    padding-top:50px;
    margin: 0;
}
<?php
//  Has the text been hidden?
//  If so, set display to equal none
if ( 'blank' == get_header_textcolor() ) { ?>
#header h1, #header #desc {
    display: none;
}
<?php } else {
    //  Otherwise, set the color to be the user selected one
    ?>
#header h1 a, #desc {
    color:#<?php header_textcolor() ?>;
}
<?php } ?>
</style>
<?php
}
function admin_header_style() {
    //  This function styles the admin page
?>
<style type="text/css">
#headimg{
    background: url(<?php header_image() ?>) no-repeat;
    height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
    width:<?php echo HEADER_IMAGE_WIDTH; ?>px;
      padding:0 0 0 18px;
    font-family: arial;
}
#headimg h1{
    padding-top:50px;
    margin: 0;
}
#headimg h1 a, #desc{
    color:#<?php header_textcolor() ?>;
    text-decoration: none;
    border-bottom: none;
}
#desc {
    padding-top: 15px;
    margin-right: 30px;
}
<?php if ( 'blank' == get_header_textcolor() ) { ?>
#headimg h1, #headimg #desc {
    display: none;
}
#headimg h1 a, #headimg #desc {
    color:#<?php echo HEADER_TEXTCOLOR ?>;
}
<?php } ?>
</style>
<?php
}
/*  This is the key function call, it communicates with the API
    and adds the options to the admin menu.  You pass the names of your
    two styling functions, first the one that styles the theme, then
    the one that styles the admin page*/
add_custom_image_header('header_style', 'admin_header_style');
?>

Using It

Once you’ve done the hard work of setting it all up, actually using it to change the header is very, very, simple.  You effectively have four options.  You can hide the text, change the text colour, revert to the original settings or upload (and crop) a new background image.  If you change the color, you’re given a nice color picker to help you out.

The following is a worked example, using WordPress 2.5.  Pre 2.5 may look a bit different, but the functionality doesn’t differ.

Step 1

We start out, using the theme page posted above, we have the following header.

The starting point

Step 2

We go into the admin interface, and get the following screen.

Custom Heading Options

Step 3

We hide the text, and it’s immediately reflected in the admin interface.  Note that it won’t be reflected in the theme until it’s been saved.

Heading with the text hidden

Step 4

We upload a new image that is larger than the default size we set earlier.  WordPress knows this so it allows us to crop the image.

The New Heading Image being Cropped

Step 5

The new (incredibly classy) header is shown in the admin area, and in the theme.

The new Heading image in the admin interfaceThe new Heading image in the Theme

Summary

I hope you enjoyed this lengthy guide.  Let us know if you end up using it in a theme. I think it’s a must if you plan on openly releasing a theme to the public.

For more information on custom headers, see this post by Boren, one of the WordPress contributors.

]]> http://www.blogthemagazine.com/issue-2/how-to-custom-headers-in-wordpress-themes.html/feed 11 Blog Design Basics – Readability http://www.blogthemagazine.com/issue-1/blog-design-basics-readability.html http://www.blogthemagazine.com/issue-1/blog-design-basics-readability.html#comments Sun, 02 Mar 2008 01:56:09 +0000 Simon http://www.blogthemagazine.com/issue-1/blog-design-basics-readability.html Blogs come in all shapes and sizes.  Some of the designs out there today are really breathtaking, the attention to detail and creativity, mind-boggling.  Tools such as Wordpress enable this creativity to be released to an unsuspecting world.

But with this great ability to be creative also comes pitfalls and dangers.  While creating interest in your blog is good, and a way of pulling in new visitors, creating a blog that misses the aspects visitors expect is a particularly effective way to lose them.

This series covers some fundamental aspects of blog design that really are crucial.  And the first subject is…

Readability

A while back I launched a redesign of one of my blogs.  I boldly went for a white text on black background scheme and promptly received numerous complaints from regular and new visitors alike.  Clearly there was a problem, and it was a big one.

The main complaint was that the blog was now difficult to read.  An unforgivable sin for any blog.  I remedied the situation as quickly as possible.  In my attempt to stand out from the crowd, I’d alienated a large section of my audience.

Readability is a fairly simple thing to get right.  To demonstrate the difference between good readability and bad readability, I’ve written the same piece of text twice below applying different principals to each.

Readability Example

There are a number of things at play here, so let’s go through them.

Alignment

While not immediately obvious in the above example due to the relatively small amount of text, the alignment is different for the two paragraphs of text.  The one on the left is “Left Aligned’ while the one on the right is “Justified”.

The main difference is that a Justified block of text has different sized spaces between the words.  This breaks the natural flow of the text and makes it more difficult to read.  The flip side of this is that Justified text typically looks nicer, it also gives the impression of more structured, complete piece of work.  Hence it tends to be used in print media, despite studies indicating that Justified text is harder to read.

Kerning

Kerning itself is an art-form.  Kerning is the spacing between letters, and can have a great impact on readability.  The difficulty comes from ensuring the letters are close enough together for readers to follow the general shape of the word, but not too close so that letters merge into one.  A problem that’s recently been called Keming.

To understand the importance of kerning on readability you have to understand that in order to read quickly, the vast majority of people skim across passages of text.  Using mostly the first and last letters in conjunction with its general shape to “read” it.  Very rarely does every letter in a word get read.  Therefore it is important that words look like words.  Their length and the positioning of letters within them is very important.

In the example above, the kerning is normal on the left hand side but very compressed on the right.  In my opinion, it is this alone that makes the biggest difference to readability.

Line Spacing / Line Height

I remember, back in the day, being ordered to use double line spacing when writing my final year dissertation.  The reason?  Readability.  When you’ve got to read through a 300+ page document, the little things really make a big difference.  I didn’t really understand just how big a difference line spacing made to readability until I printed out the document and proof read it.

For most web pages and blogs, double line spacing is excessive and can actually hurt readability.  I’d certainly recommend going for between 120 and 150& line spacing for optimum screen readability.

Color Scheme

While things such as color schemes always ultimately come down to personal taste and preferences, it’s generally harder to read white text on a black background than the other way round.  I believe this is nicely demonstrated by the example above.

As a general rule, you want high contrast text but not necessarily very high contrast.  Black on white tends to be popular, for obvious reasons, a dark grey on white works just as well whilst providing a nice aesthetic.  What you do need to be wary of, however, is text that is in too low contrast to the background as well as text across a busy or distracting background.

Other Considerations

There are other elements that impact on readability that I haven’t covered in the example but are just as important.

  • Font / Typeface – Again something that comes down to personal taste but there are a few guidelines to follow.  Typically sans-serif fonts work best on screen, serif fonts when printing.  Use a font that contains what you would describe as “typical” lettering.  You also need to ensure the font you’ve chosen works at the size you intend to use it.  The biggest hurdle here is where you are using a particularly small size.  In these cases, something like Silkscreen is a pretty safe bet.   Suffice to say you should go for popular fonts that the majority of your users are likely to have installed and ensure you have adequate fall backs.
  • Breaks and Sections – As with all good writing, make sure your text is broken up into paragraphs and sections wherever possible.  There’s nothing more daunting as a reader than a massive section of unbroken text.
  • Text Size – Following on from the point about fonts, the size of text is very important.  Too big and it can become un-manageable for the reader, too small and it can become difficult to distinguish words and letters.
  • Width – Not often spoken about, but the width of text should be kept to something around 80 characters.  Less if you are aiming your content at a less literate audience.

Hopefully you’ve now got an understanding of what affects readability on the web, specifically on blogs.  is there anything you’d add to this list?

]]> http://www.blogthemagazine.com/issue-1/blog-design-basics-readability.html/feed 2