In this post, I showed you how to use Adobe Photoshop to make your own kubrickheader.jpg file for the default WordPress theme, so you could replace the boring old blue graphic with something a bit snazzier.
There’s just one problem with my method: by default, WordPress will still want to display the blog name and tagline over the graphic. Although you can change the color of the text via the “Custom Header” applet in the Admin panel, this is not always the way you’d want to go about it. You cannot easily change the font, nor can you easily change the placement of the text. So sometimes your cool graphic gets “cluttered” with your blog’s name and tagline.
You could always go to Customer Header > Advanced and click the “Toggle Display Text” option, but this presents another problem: once you do this, the text will disappear, but the header graphic will no longer be clickable. So if someone comes to a specific page on your site via a search engine, they won’t be able to simply click the header graphic to go to your home page – they’ll have to manually edit the address bar back to your home page. And that’s just not satisfactory. What’s more, most people that are familiar with Photoshop would probably rather use the text tools included with the app to make their own text in the font, color, place and style of their choosing.
So how can you remove the default text from a WordPress blog, but make the header still clickable? It’s actually pretty easy. Just follow these simple steps and you’ll be on your way.
Note that several of the steps below are optional, but I’ve done it this way for a good reason. Read the directions thoroughly before you start messing with your site. I’ll discuss why I did it the way I did at the end of the article.
1) If you haven’t started mucking about with the default theme, use an FTP client to download the wp-content > themes > default directory from your site to your desktop. Alternately, you could download a fresh copy of WordPress and extract the wp-content > themes > default directory to your desktop.
2) Rename the “default” folder to something else (I’ll use “jim” in my example).
3) Open the newly renamed folder and open the STYLE.CSS file with a favorite text editor like Notepad. Change the value of “Theme Name” from “WordPress Default” to something else. I’ll use “Jim’s Theme” in my example. Save the file.
4) Open the HEADER.PHP file your text editor. Scroll to the bottom of the document and change this:
to this:
where “yoururl.com” is the address of your website. You can also change the value of “title=” from “home” to whatever you’d like; this will be the text that appears when visitors hover their mouse over your header graphic, and it also serves at the ALT-TEXT for the image, so it’s better not to leave it blank.
5) Save the changes, then copy your personalized kubrickheader.jpg file to the images directory in the “jim” folder, overwriting the default one.
6) Use an FTP client to upload the “jim” folder to your site in the wp-content > themes folder.
7) Log in to the WordPress admin panel and choose your newly edited theme!
(Note: if you have previously toggled the header text via Custom Header > Advanced > Toggle Text Display, make sure to toggle it back, or else the header won’t be clickable.)
Basically, what I did was copy the default Kubrick theme and edited the copy. The reason for doing this is twofold: first, using a copy of the theme means I’ll still have my default theme available in case I do something silly or stupid with the code. This way I;ll always have the default version I can fall back on. Secondly, using a copy means that the changes you make to your theme won’t be overwritten the next time you upgrade WordPress.
Step #2 is necessary so that my new theme won’t overwrite the existing default theme. Step #3 is necessary because it allows you to easily identify your new theme in the Appearance > Themes section of the Admin Panel.
You could just as easily log in to your WordPress site and change the HEADER.PHP file using the built-in WP editor, but I made the changes this way for the reasons listed above.