Tutorials
Adding a header logo to a theme
Many themes do have the ability to add a logo from the Admin Panel or Dashboard, but many don’t. It’s not a failing, it could just be that the designer of the theme thought it looked better with text in the header, so that’s how they made it. Happily, that doesn’t mean you can’t add a logo (mostly), but it does mean you’ll need to hand-carve a little… And, of course, George is happy to lead you through the process.
OK, so what’s to be done? Firstly, you’ll need to have FTP access to your theme files on your server. If you’re not sure of the FTP thing, take a look here. Good to go? Excellent. Using the server side of your FTP program, navigate down to the theme folder. We’ll use Greyzed as an example, and then the folder will be wp-content/themes/greyzed. Copy the file named header.php to the local side of your FTP program, say to your desktop. You can minimise the FTP window now. Finally, rename the local copy of the file to something like header-backup.php.
Now, open header-backup.php in a plain text editor, like Notepad, or something similar, and immediately save the file as header.php to your desktop again. You now have two copies of the file, with different names, i.e. a backup…And you’re editing the copy that you’ll later upload back to the server. Great!
Let’s look at your logo file for a moment. Again, we’re going to use Greyzed as an example. Looking at the space available in the header, we can see that the image shouldn’t be larger than 500 pixels wide and 130 pixels tall. Of course, your measurements may vary, depending on the theme. We created a fancy font logo, with a transparent background, as an example. It’s worth mentioning that, since the image aligns with the top of the page, we added some space above it, to position the text properly. 70 pixels, to be exact, so our image was 200 pixels high. This could also have been accomplished with CSS positioning, but we want to keep this simple.
We’d suggest a JPEG or PNG file, and we’d also suggest that you value small file size, over absolute quality. We’ll leave it up to you to create your logo file within those parameters. So let’s say you have your file ready and it’s all perfectly sized and quality’d. Fire up your web-browser, and navigate across to your blog’s Admin Panel. Select Media in the left pane, and go ahead and upload your image to the Media Library. Once that’s done, hover over the entry for your file in the Media listing, in the right pane, and click on the Edit link that appears below your file. The detail page for your image file appears, and down at the bottom of the details, you’ll notice an field named File URL. We’re going to need that URL, so select it and copy to the clipboard (right-click and select copy, or Ctrl-C, or Cmd-C, whichever is appropriate for your machine).
Good progress. Let’s go back to the header.php file that you have open in your plain text editor. Looking down from the top of the file, past all the head stuff, you’ll find the section which starts with the body tag. It’ll look something like this:
The bit we’re interested in, is in the div with the id=”header”. See it? Good.
So, let’s look at the “header” div. What does that code mean? The first line uses a WordPress PHP function to get the title of the blog, as you’ve entered it in the Dashboard, in Settings | General | Site Title. The title is then wrapped in in an anchor tag, with a link to the home page of the blog, so that when your readers click on the blog title in the header, they’re taken back to the home page of the blog. Smart, huh?
The second line uses another WordPress PHP function to get the tagline of the blog, as you’ve entered it in the Dashboard, in Settings | General | Tagline. Don’t let any of this code-speak faze you, the explanation is just so to satisfy your curiosity, and so that the editing we’re about to do will make sense.
What we’re going to do, is to replace the function that fetches the blog title with a link to your logo image. So here’s what the code needs to look like. The URL, http://localhost/efrog.co.za/wp-content/uploads/2011/06/greyzed4.png , should be replaced with the image file URL that you copied to the clipboard earlier.
bloginfoOnce you’ve done that, you can save the file. It’s name should still be header.php. Now, usng your FTP program, upload that file to your website, into the theme folder, in our case, wp-content/themes/greyzed. Your FTP program should ask if you want to overwrite the existing file, and you should answer “yes”. You have a backup of that file, in case anything goes wrong. Now open your website, and hit refresh (f5, ctrl-f5, cmd-f5, view | reload, whatever is right for your browser/operating system..), and voila! This is what ours looks like:
