Feature
Post

Category
Code

Customizing Wordpress: Headers

Wordpress Customization Series Introduction

Over the next few weeks, Devlounge will chronicle all customization elements of wordpress, from headers, to layout, and even what plugins you need to have. By the end of the series, you'll be on your way to using harvesting all of the power of Wordpress, to do much more than a blog.

It All Gets Started:

Sometimes, headers become lost as an way of customization for wordpress. But in many ways, your wordpress header can be the kickstarter of your blog, in both terms of search placement, and display for every wordpress based page.

Understand It's Purpose - Header.php

The Wordpress Header is, by default, generated dynamically, with such things as the blog title and description, theme name, author, and stylesheet url. Usually, you'd prefer to keep these settings untouched, as it ensures that stylesheets will work correctly with your blog, and everything will flow right. But, in order for your blog to stand out, small tweaks to the header can make all the difference.

Output Better Titles

By default, Wordpress outputs titles as "blog name - description - page/post title". While in most cases this would be fine, there comes a time when you may want to change the page title to your own. Maybe you want all pages to have just the site name, or, you'd like to remove the description tagline. These edits are extremely easy to make, but first timers who know basic html become nervous when they see php being used to generate the title tag.

Wordpress Title Tag

Looking at the php tags for the first time, you'll find it's easy to see the meanings behind them. In the Wordpress Default's theme header.php, you'll come across the title tags being filed with the tags from the screenshot above. So, what does it all mean? In between the title tags is php code calling for information from the Wordpress Options, Options tab, where you specify the blog name and description. The next few php requests check to see if the page is a single page or part of the archives, and then assigns them with the corresponding name, usually "blog name - page or post title".

So, how do you get around this? Start off by deleting everything between the title tages, so only the opening and closing tags remain. Next, you can enter the page title as you wish, for example, My Site. If you plan to include what page you're on, you may want to include a space after your title, followed by a hyphen, space, and then the approriate php code. In this case you'd take all of the php code after the php tag containing "blog info" is closed.

You'll now have a title that's been customized, and doesn't rely on the Wordpress Options to generate it. This gives you the ability to include your own slogan, and not include page and post titles at all if you'd like to keep them out.

Adding Style to Your Sheets

Another benefit of editing the header is the ability to assign alternative style sheets, such as custom stylesheets for Printing, which normal wordpress headers would not have. Adding an alternative style sheet is easy, and it only requires one line of code, pointing to the location of your print style.

HTML:
  1. <title>Hello <php code></title>

Setup A Common Header

Since all theme files call for both the header and the footer (Index, Page, Single, Archives, Etc), the header is a great place to setup parts of your design which will repeat on every page, for example, a graphical banner and navigation. In the Wordpress Default Theme, there are some quick stylesheet classes and allow for easy changing of elements such as a header background color and image. The actual page design begins after the stylesheet ends, following the body. Underneath the opening body tag, you can begin adding elements that you'll want to be located on every single page.

HTML:
  1. <body><div id="page">

Meta Your Blog

Another thing Wordpress leaves out which is essential to earning blog popularity is metadata, such as keywords, descriptions, etc. These can be easily added, by adding just a few lines of code and filling in your best choice of keywords and site description. This will greatly increase your rank of search engines, and benefit your blog in the long run.

HTML:
  1. <meta name="description" content="devlounge, code, help, etc" />
  2. <meta name="keywords" content="site, blog, content" />

Up Next

Next week, we break down early layout techniques, and get you started with turning your blog into your own. Over the next few weeks, I'll also be bringing you Advanced Layouting, Customizing the Sidebar, Making the Footer leave a better print, and Plugins you need to have.

  1. By Phil Renaud posted on May 2, 2006 at 10:13 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    hey, great article - I was just working on revamping a friend’s blog in wordpress (first time using WP, so it should be a challenge), and this is going to be a big help. Great work!

  2. By Bradley D posted on May 3, 2006 at 12:18 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Awesome, just setting up my WP site now, good tips!

  3. By Prashant posted on May 6, 2006 at 4:54 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Great article AJ!

    Keep more content coming in!

  4. By Chris Hunt posted on May 19, 2006 at 6:05 am
    Want an avatar? Get a gravatar! • You can link to this comment

    filling in your best choice of keywords and site description [...] will greatly increase your rank of search engines

    Not in 2006 it won’t! Search engines haven’t paid any attention to meta keywords for ages. The description is occasionally used to describe the site in search results, so put a proper sentence in there instead of keyword-stuffing.
    Apart from that, a good article. I’m about to dip my toe into the Wordpress pool for the first time, so I’m sure I’ll find this series useful.

  5. By cliffton posted on May 26, 2006 at 11:32 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I love this site. Good work…

  6. By Liz posted on June 2, 2006 at 6:40 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I have been playing around a little with the mets tags and the descriptions on a few blogs that I have been working on for a client. This site - in german but pretty easy to figure out - has three plugins that make it a breeze to edit the meta description and keywords on each post and page, as well as allow you to decide which posts and pages should have no follows. Download the plugins to your wp-content/plugins folder and then activate them in the WordPress admin area under the Plugin tab and voila they will show as an extra entry box in your write page write post areas. http://www.bitcycle.de/wordpress/plugins/btc-meta/2/

    I am still working on finding something that will allow me to customise the title tags for each page in the same way.

  7. By Anthony posted on August 30, 2006 at 6:10 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Great article - looking forward to the next installment!

  8. By Friedclyde posted on October 12, 2006 at 3:31 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Thank you for this! I was seraching for a site that actually helped me customize a theme according to my site but this is helpful for a start!

  9. By isaac posted on March 14, 2007 at 6:46 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    How do you add the Navigational buttons in the header.
    Also is there a 980px width version of this theme?
    Also is this widget ready?

  10. By Holly Fortenberry posted on October 30, 2007 at 8:44 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks! This was very helpful in getting me started customizing WP.

  11. By Nate posted on April 12, 2008 at 9:54 am
    Want an avatar? Get a gravatar! • You can link to this comment

    BRAVO! Clearly stated! Thank you so much for helpin’ me out!!

  12. By kyle posted on October 27, 2008 at 9:30 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Great Article. Thanks for the tips

  13. TrackbackWordPress Station » Blog Archive » Series: Theme DesignModifying your WordPress Layout - Building My EmpireDevlounge | Devlounge 2006: Posts and Numbers

    Your words are your own, so be nice and helpful if you can. If this is the first time you're posting a comment, it might go into moderation. Don't worry, it's not lost, so there's no need to repost it! We accept clean XHTML in comments, but don't overdo it please.