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.
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.
<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.
<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.
<meta name="description" content="devlounge, code, help, etc" /> <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.
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!
Want an avatar? Get a gravatar! • You can link to this comment
Awesome, just setting up my WP site now, good tips!
Want an avatar? Get a gravatar! • You can link to this comment
Great article AJ!
Keep more content coming in!
Want an avatar? Get a gravatar! • You can link to this comment
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.
Want an avatar? Get a gravatar! • You can link to this comment
I love this site. Good work…
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.
Want an avatar? Get a gravatar! • You can link to this comment
Great article – looking forward to the next installment!
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!
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?
Want an avatar? Get a gravatar! • You can link to this comment
Thanks! This was very helpful in getting me started customizing WP.
Want an avatar? Get a gravatar! • You can link to this comment
BRAVO! Clearly stated! Thank you so much for helpin’ me out!!
Want an avatar? Get a gravatar! • You can link to this comment
Great Article. Thanks for the tips
Want an avatar? Get a gravatar! • You can link to this comment
Your tips had really worked for me thanks a lot.