If you aren't reading this in your reader this Post is Stolen From: Real Estate Blog Lab Theme Graphics Bake Them Remake Them

Graphics are the little touches that make your theme special

Graphics is another place you can really change the look and feel of a blog theme. In case you didn’t know you can replace or tweak those graphics used to trim out a theme. Closely associated with the style.php are the images for the theme. Here to is where you can work some magic to make the theme your own. I often change the images associated with things like buttons, blockquotes, RSS, Dividers, (sidebars, body, header, footer, etc.). The images are stored in a directory inside the theme folder; usually img or images.

Theme graphics can be changed

This is probably the first real directory I open once I download and unzip a theme. I can learn a lot about a blog by looking at the image folder contents.

I will often make a screen shot of this folder opened so I can see the images and their file names. This does two things for me:

1. When I’m reading through the CSS Stylesheet I can see what images are being used where which helps me get a better mental image of what is going on in the theme.
2. I make a list of the ones I want to keep, the ones I want to delete and create my own, the ones I want to modify just a bit.

Then while going through the style.php learning the layout in CSS I make note of those image files and where they are called in the formatting of the blog.  You can make some small changes and additions to these graphic files creating some dramatic changes in the look of your blog.  It is a quick and fairly easy way to customize the theme to your personal taste.

Adding a Header Image

If I’m going to be adding a header image to the theme and one doesn’t exist I’ll put it here or install the rotating image header plugin.

If you are adding a header image to a theme that has one, it is pretty easy to replace if you keep the same dimensions as the one originally with the theme.

As you get more comfortable with CSS Style sheets you will find it easy to add a header image to any theme and even change the size of the theme width to accomodate your image.

Here there is a fine line to be walked.  I’ll cover Header Images in a separate post.

If you aren't reading this in your reader this Post is Stolen From: Real Estate Blog Lab Theme CSS Style Sheet

Where the Magic Happens

Learning how to work with CSS (Cascading Style Sheets) is like learning to drive a stick shift. If you can edit and modify CSS style sheets you can drive anything. If I find a theme that has “good bones” I can usually modify it to appear in the browser the way I want it to.

• No header image, I can do that
• Header size change, I can do that
• One sidebar instead of two
• Right sidebar instead of left
• You name it.

This is where the magic happens in theme design. If you don’t know anything about CSS you will be destined to point and shoot themes.

I’ve never had a computer class. I’ve learned by looking at code and reading books. I can tell CSS style.php files that are well laid out and the ones that aren’t. No matter how much I like a theme, if the CSS file is a mess to interpret, I move on. Recently, I did just that, I tweaked for two days, learned a few things, and in the end moved on.

It is in analyzing the CSS you learn about how the Theme handles everything. The browser’s “View Source” (IE) or “View Page Source” (FF) is the Rosetta Stone to the CSS. Study this on one tab with the CSS open on another and you will break the code. Write down the class divs and what the container structure hierarchy looks like.

Most CSS style.php files are broken down into the basic elements for the theme.

• General Formating of Tags
• Code to handle Images (this is often left out)
• Styling of the various parts of the blog (Header, Footer, Containers, Content, comments, sidebars, etc.)

Here is where the fun begins and a little frustration as well. I’ll tell you right up front I’m not a CSS guru by any step of the imagination. Much of what I do is:

• try it,
• save it,
• switch tabs,
• F5,
• switch tabs,
• undo it.
• try something else.

To keep it simple I only work on one part at a time. I’ll make changes to the fonts. Then move on to the Header. Once it looks good I back up the file. Now changes and additions to the Footer, etc. Using this simple procedure and the try it, save it, list above I can move through the process of modifying the CSS to make the blog look the way I want.

I’ve suggested before but will say it again here, when you get a change you really like, back up the style.php and FTP that copy down to your computer. It will save you a lot of frustration if later on you make changes to the CSS that corrupt this file. If you do, you have a backup ready.

All along the way, I back up this file to my computer. I might make as many as 10 backups as I proceed using the method described.

Tags in CSS

I’ve debated about including this here since it is handled in the CSS, but it is important and can greatly help or hinder your blog or web site in the search engines.  This is another one of those things where viewing the source in the browers is very important.  Note how H1, H2, H3, etc tags are handled.  More on this in a separate post to follow.

Learning CSS is Worth the Effort

CSS is one of the most fun and most frustrating parts of theme modification.  Pick up  a good book or hit some basic websites for an introduction to CSS.  It might seem daunting at first, the same way driving a stick shift takes time and a few jerky starts.  When it clicks, it clicks and you won’t look back.  Great blogs and websites are built with CSS.  You don’t just want it to look good in the browser you want it to look good to the search engine bots.

Well structured CSS will be an express lane for search engines.  Poorly coded sites using tables or poorly structured CSS is like creating Construction Zones with detours for detours.

If you aren't reading this in your reader this Post is Stolen From: Real Estate Blog Lab Modifying The Theme Header File

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.

If you aren't reading this in your reader this Post is Stolen From: Real Estate Blog Lab The Theme Footer Where The Sneaky Stuff Resides

Footer General Blog Information

The place to start when picking a new theme is at the bottom. One of the most overlooked elements of a theme is the footer. The footer is one of the first files I check when selecting a theme. It is a common practice for the footer to be the location for Copyright, the theme’s name and a link to the creator of the theme. The WP version is often included in the text.

Footer Sneaky Stuff or Where the Shenanigans Live

Some themes will tell you right up front they are free to use but have sponsored links embedded in the theme. The place these link typically exist are in the footer.

• I want to know where this theme is sending links to.
• I don’t want my blog linked to any “bad neighborhoods”.
• I don’t want any hidden text in the footer (black-hat SEO that will bring you a penalty)
• I don’t want an excessive number of links in the footer either.

Typically when I find this I move on. Once in a while I find a theme so engaging I will remove the footer, build one of my own and give credit where it is due, but if it is linked to bad neighborhoods or practices blackhat SEO which could be detrimental to me and my business. The best thing to do is skip this theme and author and move on.

I recently encountered a theme author giving away themes but with the stipulation you had to leave the footer intact. The code for the footer was encrypted and when you looked at the theme in the browser all appeared to be on the up and up; link back to the theme and theme author. But contained in the footer was white text on a white background with links to a highly suspect business. It appeared almost all this authors themes were the same.

Checking the Code and Theme Flow

You can not modify a theme easily and in some cases not at all if you don’t look at the code. This is how I found the hidden text and links in the footer code mentioned above. When looking at the Demo Site, or after installing the theme on your test site all you have to do is Look at the source code. In IE this is right click and “View Source” in Firefox it is right click and “View Page Source“. this will show you the code behind the browser. You will use this over and over again when modifying CSS and checking to see how the blog is structured to display in the browser.

When picking that new theme you should check the footer first, check the code using the view source and then decide if you can live with those links on every page of your blog. Personally, I think you already know, I don’t like sponsored link blog themes. I’m very happy to provide links to the author of the blog. I’m also not shy about saying the theme has been modified by me. This isn’t to brag or say “Look what I did” it is to let anyone know that is looking for a theme like yours that going to this theme link in the footer isn’t going to get you to a theme that looks like mine.

If you make significant changes to the theme it is perfectly acceptable to add “modified” at the bottom.

Start with the footer, it is a real waste of time to put a lot of work into modifying a theme then get to the footer file and find out you can’t live with links and practices in the theme footer. Once you know the theme has a clean bottom and it is the one you want to spend time modifying then we move on to what we want to modify and add to the footer.

Real Estate Blog Footer

For a Real Estate blog I think there should also be a couple of things added.

1. Fair Housing Logo
2. Information Deemed Reliable But Not Guaranteed

Those are what I call CYA additions.

Blog Tracking Codes

This is the best place to put your tracking code for such things as:

• Google Analytics
• Hittail
• Woopra
• Any Statistical Tracking Program

The Footer appears on every page and is easy to navigate and add those java scripts that tracking sites like you to add.

This is also one of the thinks that goes on our checklist.

• Check To be sure you copy these codes from your old theme to the new.

If you forget to add these codes to your new theme, you will suddenly see there are no stats because you forgot to add the tracking codes to the footer.php file of the new theme.

The Wordpress Theme Editor

This has always been one of my favorite parts of Wordpress. I like the theme editor. The theme files to the right, the available themes on top. To me it is intuitive and easy to navigate.

Workflow Nugget: It doesn’t matter if you are using IE or Firefox you should use a tab browser. To make changes to themes I open one tab with the theme editor and one tab with the blog as it appear when opened on the web. Instead of making changes, clicking view site then back to make additional changes I make a change, save, click the other tab, F5 to refresh and tab back to make further changes. This will speed up the process of tweaking your theme especially when it comes to changing the CSS Style sheet.

Using the Wordpress Theme Editor it is easy to copy code from one theme to another. On the Theme Editor page there is a drop down box with all the themes you have in your Theme Directory. You can edit or copy code from any of these theme without having to activate the theme. I love this feature of the Wordpress theme editor. It is a quick and easy way to transfer tracking codes or other footer modifications and additions you have on your current theme to the new one.

Starting out with a good footer for a foundation and know you have a clean bottom is always a good place to start when selecting and modifying a theme.

If you aren't reading this in your reader this Post is Stolen From: Real Estate Blog Lab Getting our Theme Tweaking Workshop Ready

One thing I’ve learned over the years it is get the proper tools to do the job right. Setting up a good workshop for Tweaking Themes is a great idea and worth the investment in time to setup. If your blog is a business blog you especially want to take this step to assure you aren’t in danger flowing away your blog while making changes to it. The workshop is safe. You can make changes, corrections, additions and if you accidentally blow up the blog all you have to do is clear a little smoke and start over. Now let’s look at some tools and process we want available to us in the shop.

Creating a test database from your live site

Another thing I’ve learned about picking a new theme you can’t go by the demo site to determine how a theme is going to function in the blogosphere.

I can’t tell you how many themes I’ve looked at in Demo and thought they looked pretty good only to try and test install them and find they won’t work in the real world. I tried a new magazine style theme last week that was getting a lot of good reviews. When I installed the theme I found out it worked fine as long as you had not title longer than 30 characters and no categories with more than 20. Anything longer than that, it was a mess. As long as blog posts had small images and were not longer than 100 words it worked pretty well, but the formatting broke horribly unless kept in those very narrow parameters. You want a robust theme, A well tested theme, A theme that has been really run through its paces and found to be stable.

The best way to do this is to copy your existing blog database to a new database and setup your testing workshop based on that database. It will be just like your live blog to that point. When you install the test copy of Wordpress you will set the wp-config.php file to the copy database.

How Do I Make a Copy of My Database

This one is easy. I’ve already written about this process in a post on upgrading from an early version of MYSQL to a newer version. Follow the steps in that post and you have created your test database. Restore your WordPress Database From Mysql 4 to Mysql 5

Avoiding Duplicate Content

I figure someone is already to jump on the Duplicate Content issue. I don’t think it is an issue, but to keep it from being a non-issue do this:

When you install wordpress it asks if you want to keep this blog private or share it with the search engines. Have you ever thought that a strange question? Why in the world would I want to hid my blog from the search engines? Now you know. Choose that option and your test blog is never going to create a duplicate content issue.

Creating a test blog site for tweaking your theme

I always have a test blog setup where I can try out new themes and see how they look. All you have to do is create a directory on your host site and copy the WordPress files to it. put the wp-config file in that directory which points to your test database.

If you use the custom permalink structure which I recommend /%category%/%postname%/ you should set that up as soon as you go live with the blog. One thing to be aware of when using this permalink structure on a directory which is under another blog. It might take a while for the DSN to get it figured out this is not associated with the parent directory it is a blog of its own. This is not an issue if you have a domain name you set this up under. But, if setting it up under an existing blog url it might look a little strange for a few hours. Because of this I will often do the install and set the permalink structure as the last thing at night then start working on the new site in the morning.

It is never a good idea to be tweaking a blog that is live. Yes, you can do it, but at your own peril. As mentioned above it is easy to use a test database as well for this site. You will get a better picture of how your exact content is going to look inside the skin of this new theme.

CSS Where the Magic Happens

A good quick reference to CSS would be another handy tool to have in your workshop. Almost every theme requires some CSS Tweaking and have a handy guide to syntax makes the process easier. CSS is where the magic happens.

A Little PHP for Seasoning

The only PHP I know comes from studying theme code in existing themes. It might be a good idea to have a quick reference to PHP syntax as well if you are uncomfortable with making changes to the code. Since I always have a copy of theme I’ve uploaded if I blow away one of the PHP files I simply FTP the original file up to the site again.

One final note associated with the workshop and best practices. Create an empty theme directory on your PC as you make changes to the various files FTP those files back to your PC. I can’t tell you how many times I get to working away, making changes, loving the results and make one final little tweak and blow up the file. And I only had the original file to restore. ALL my changes were gone. Now when I get a file looking like I want it to, even if it isn’t done yet I will back it up to my PC so I can restore it and don’t have to start from scratch again.

Finally, I have no idea who’s workshop is pictured above, but it doesn’t look like much work gets done there, mostly stuff gets stored and stacked for possibly future work. Yeah, Okay, it’s my workshop and so far this year all I’ve done is take a picture of it. As soon as the summer heat is over I’ve got to get that cleaned up. Wait, I think I said that last year. . .

If you aren't reading this in your reader this Post is Stolen From: Real Estate Blog Lab Launching A New Theme

Creating a Checklist for the New Theme Process.

• You are starting your first Wordpress Blog.
• You are bored with your old theme and you want a new look and feel.
• You just upgraded your Wordpress from version .07 to 2.5.1 and your theme doesn’t work anymore.
• You have to get a new compatible theme and fast.
• You are starting a new Blog but you don’t want it to look like your existing one. You think: “I need a new theme”.

There are any number of reasons you want or need a new theme for your blog. Some themes limit functionality and some are not easy to upgrade or customize. The reason for change isn’t as important as the process you go through to successfully change the theme of your blog.

We will be delving into the theme changing process in a series of post which will look at individual aspects of implementing a new theme and creating a checklist for the process so you don’t leave anything out or in that will come back to haunt you.

I recently did an theme change so this process is fresh in my mind at the moment. I have a rough checklist that is kept in the most unsecured place possible, in my head. As usual I’ll be using this series as a personal notebook for theme changes in the future. When complete we should have a checklist process for launching a new theme or creating an entirely new one.

I’ll be looking for input along the way. There are a lot of great RE bloggers out there tweaking themes to make them their own with plenty of helpful hints we can add to the checklist and process.

Theme Changing A Blog – Taking Baby Steps

The entire process might appear to be a bit daunting. But, if we break the process down into manageable baby steps (to borrow a term from “What About Bob”) we will tame this process know what to look for when picking a theme in the future. I’m always scouting for new themes to tweak.

If you are ready, lets have some fun. The first step to building a new theme for our blog is to have a great workshop with the tools we need to do the job. This is where we will start with “Getting our Theme Tweaking Workshop Ready.”