real estate blog lab

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

Header Branding

I know some people are really into “Branding” and it is all the rage these past few years. When I first heard the term living in Tucson I thought they were talking about cows and roundups. I think it was 5 years ago when “branding” became a buzz word, much like “Green” is now. The header is the perfect and most desirable place on your blog to show your brand.

On my blogs I have chosen to make the subject of the blog the brand. The Oro Valley Real Estate Blog has a header image of Oro Valley. The same is true of the Tucson AZ Real Estate Blog it has an image of Tucson.

Yes, I know I should put links to those blogs with the anchor text, but I keep saying “It isn’t all about SEO”.

The Tucson Real Estate News blog is the one with the rotating header and it displays images in and around Tucson; at the moment it is wildflowers and sunsets. But this could change, and I’ve already cycled some images out of the rotation and added a couple of new ones.

It is up to you what you want to display in your header file, maybe you don’t want an image in there at all. Maybe you want a color background and just text to keep the header to a minimum and give you more room for posts. It is up to you.

However, please don’t reject a possible theme because it doesn’t have an image when you want one or it does and you don’t want one. It is not that hard to modify the CSS to add or subtract an image in the header.

The theme I just modified had no header image, but I knew I could add one. (the same is true of sidebars, it is easy to take one away, not as easy to add one and it all depends on the code and CSS styles as to how easy or hard it is to modify).

Inside the Header

One of the files that almost always needs a little adjusting is the Header file. You will see it in the list to the Right when in the theme editor.

The code of the title of your blog is one of the most important pieces of code. Many bloggers change themes and never notice the code for displaying the title of the blog on the browser isn’t displayed the way it was before.

If you have ever done a google search (yes, I’m saying that tongue in cheek) you will notice the title of the page/post is indexed and plays a part in the search engines. If you want to expand the influence of your pages and post and cast a wider net you won’t have all your title tags appear the same.

When doing site searches I find so many sites that have exactly the same title for every single page “Bust Town Real Estate” nothing varies. Do they place well for “Bust Town Real Estate”? most of the time they don’t.

I want the title to be structures with the Title of the Blog Post followed by a dash space dash and the title of the blog. Since I put keywords in the title they are translated to the front of the Title and the name of the blog follows.

Here is a good title structure.

<title>
<?php wp_title(“”); ?>
<?php if(wp_title(” “, false)) { echo ” – “; } ?>
Your Blog Name Here
</title>

Again, I know there is a way to code it so the blog title is displayed without typing it in. But I don’t do much with php and we try and provide solutions anybody can do simply. That said, if someone has the code for doing this I’ll be glad to have it for future theme changes.

This is not the title of the blog displayed in the header it is the title displayed at the top of the browser, just in case there is any confusion about what title we are talking about.

Some will display the blog description from the setup options page in the header along with the blog title and URL.

Site Search Box in Header

One thing I see more and more of and I like is the search box in the header. If a search engine brings me to the home page there is a good chance the person doing the search will bounce right off your site and back to the search results. However, more people are becoming savvy in their search routines and if there is a search box place where it is easily spotted they will repeat the search phrase in the search box and find what they are looking for in the first place. I think a site search box in the header could reduce your bounce rate.

I rely on the All-In-One-SEO plug-in to provide the meta tag structure for the header file tags.

• I check the header.php to see how it is structured.
• A check of the CSS to see how the Header file is styled and if I want to make any changes to the header size, meaning width and height. I often will do this and add an image to the header.
• I check to see if how the h1 h2 and h3 tags are associated with the header and blog title. This is found in the CSS style sheet and not usually in the header.php itself, but it can be in there. There should only be 1 h1 tag and only 1 h2 tag to a page. Some theme authors experiment with these tags and forget to set them to a “production” value. I’ve found a couple of themes with 2 h1 tags in the header or multiple h2 tags there and in the post titles. You don’t want a new theme to change those header tags for all your content to something that isn’t considered a standard.

Header Size

I want it visually attractive to the eye, but I don’t want it taking up too much of the prime real estate in the browser. Currently I’m leaning toward 1000 for a width and somewhere between 200 and 250 for height.

Keeping The Header Visually Interesting

I’ve recently modified a blog theme which lead to this series of posts. One of the things I did was add the Rotating Header Image Plug-in. I have a directory of images which are sized to the header space provided and the plug-in allows you to set how often it will rotate the images. I like it to change often so I have it set to 1 minute. It doesn’t change till a page is refreshed, the readers aren’t interrupted by an image change while they are reading, just when they click to the next post or page.

You get to decide what your header will contain and what it will look like.

• Eye Candy for the reader
• Brand Identification
• Text only
• quick navigation

Prominent Links in the Header

I’ll leave you with one more idea for the header. On the Oro Valley blog I have several search pages which make it quick and easy to search for home by subdivisions and by price. I placed direct links to those pages/posts in the header. They are displayed right under the blog title. When you first open the blog these links are easy to spot, even if you were looking for something else that brought you to the blog, those search links are right there on top.

There are other page links in the top nav which is a part of the header, this is common on many blogs these days, but putting links directly in the header is something you do by pasting the link and anchor text directly into the header file itself.

The Header of a blog is usually easy to modify and customize making it unique. It is personally challenging to me to customize it to the point even the theme author wouldn’t recognize it if they saw it. Remember we are doing all of this in our workshop. We are backing up files as we make changes we like and we are having fun customizing our new theme.

The best way to become comfortable with modifying and navigating around header code, or any theme code for that matter, is to download themes you find interesting and start looking at the code in the various files. Find a Site search in a header, copy that code snippet, find meta tag code you want copy it. Take these snippets and add them to your customization routine. Save them for future changes and new theme modifications.  I’ve been using Google Notebook to keep my code snippets.

Enjoy the Journey learn a lot and at the end of the process you can take pride in creating your own customized look for your blog.