After being in business for over a decade they thought it was time for a new look for their aging website as well as a new logo to represent the company. After speaking with Robert it was very clear they wanted to target a more sophisticated audience with higher value vehicles to donate. They also wanted to capitalize on the green aspect of their industry. After all they are recycling older vehicles, whether that means refurbishing them and giving them a new life or scrapping them so the parts can be recycled. They also wanted to present themselves as an honest and trustworthy company due to the amount of fraud in their industry. They felt their old website was not doing that. In that regard, we made sure to incorporate customer testimonials from their many years in business and highlight them on every page of the website.

The new site is much more search engine friendly than their previous site. It utilizes Word Press as the content management system and incorporates several plugins to extend functionality. The “Auctions” page uses a custom plugin to allow them to upload a CSV file of their auction list and display it on the page in a clean and consistent manner. There is also a custom write panel for the “Charities” page to allow them to add, remove, and reorder the charities they work with. The new site is much easier for them to manage themselves and should last them several years. Enjoy the screenshots below and be sure to check out All Bay Vehicle Donations.

1. Replace the Word Press logo in the Administration Area

By default Word Press has a small Word Press icon in the upper left hand corner when you are logged in to the administration area. You can easily replace this icon with one of your own. All you need to do is add the following code to your functions.php file inside your theme directory.
<?php
add_action('admin_head', 'my_custom_logo');
function my_custom_logo() {
echo '
<style type="text/css">
#header-logo { background-image: url('.get_bloginfo('template_directory').'/path/yourlogo.png) !important; }
</style>
';
}
?>

One thing to keep in mind is that your image should be 32 × 32 pixels. Upload your logo to a location in your theme directory and change the path in the code above and you are good to go!

2. Customize Your Word Press Login Page

There is a very easy way to customize your Word Press login screen without hacking your Word Press installation files. By following these steps you can have a custom login screen and maintain your ability to upgrade your Word Press installation.

Step 1. Add the code below to your functions.php file. This code sets up your login page to use a custom stylesheet you specify. I call mine login.css.
<?php
function custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/login.css" />';
}
add_action('login_head', 'custom_login');
}
?>

Step 2. Create your custom stylesheet in your theme directory. The code below outlines the declarations you will need to include in this stylesheet. I’ve added comments to help you understand what each one does.

html {background:#F3F6FD url(img/body-bg.png) top center no-repeat;} /* Change the color or include an image for the background of the page. */
h1 a { /* This is the Word Press logo. Remember to update the height and width your image's dimensions. */
background:url(img/login-logo.png) 0 0 no-repeat; width:300px; height:73px;}
body.login {border-top-color:#fff;} /* This is the background color of the bar at the top of the page. */
.login p#backtoblog a:link, .login p#backtoblog a:visited {color:#3572b8;} /* Link styling for the text link in the bar at the top of the page */
.login p#backtoblog a:hover, .login p#backtoblog a:active {color:#484848;text-decoration:underline;} /* Rollover link effects in top bar */

That’s it! By implementing these two quick tips you can remove almost all of the Word Press branding inside the administration area and on your login page.

There’s no room for mistakes. Period.

And yet, I see these type of mistakes almost on a daily basis. Some are due to technology while others are simply human error. My response is simple. First, technology should never stand in the way or negatively impact business operations or messaging. Second, more than one person should always review or have some insight into the project and human errors should be fixed prior to being exposed to the public.

In this case, the error I am referring to is allowing your test page or development site to be indexed by the search engines and made available to the public in their results. I’ve tried to illustrate this with the screen capture below from Google. Let me explain what is in it and how I found it.

I was trying to track down an ex-colleague that I knew ran a freelance web development business. So, I hit Google and searched for his business name. The first two results were for his home page and his bio page on his website. The third result, however, was obviously a test page he had developed for one of his clients. There it was, sitting fat and pretty in the #3 spot on the first page of results for his business name. (Click to enlarge thumbnail. All identifiable information has been blurred out.)

Imagine if you were given this designer’s name as a referral and you popped online to find his site. What would you think about seeing his in-development project right there, live to the world? I would wonder if he would expose my project with the same carelessness and lack of regard.

That led me to do a search on the client’s name and product name. Again, the first two results showed the client’s website and the #3 spot had the web designer’s test page sitting there. Now indexing and ranking can happen overnight, but it is extremely rare for a page that is online for a very short time to show up in the top ten results. This had to of been there a while. I’ve checked it 3 times since the last week of April, with the last one being on May 30th. All 3 times I have received the same results. So not only has it been allowed to be indexed, but it has stayed there.

There are several ways to prevent this basic mistake that with a little more quality control on the part of the designer would make sure this kind of thing would never happen. At the very least it can be blocked with a robots meta tag that includes noindex. A second way would be to lock out the search engine robots with a robots.txt file. Third, you could put it behind a secure login via htpasswd. If you’re a developer reading this and you don’t know what any of those things mean, you can start by googling those terms.

Again, the bottom line is that stpuid web design mistakes like this should never, ever happen.