Creating Custom Image Headers in WordPress

November 6, 2007

Following on from our highly successful Subject Leaders’ Meeting last termlet, many of you asked “How do I get my school logo into my blog’s header?” – or similar. If you want to replace WordPress’s headers with one of your own like we have, then here’s what you need to do.

Firstly, using a paint program design your header. Set up the image size to be 760 x 200 pixels (look for Page Setup in the File menu, or look for Attributes in the image menu). Once you’ve created your eye-catching header save it as a .jpg file.

In WordPress, login and go to Site Admin and then select Presentation followed by Custom Image Header. Upload your newly created image using the upload tool.

You should now see your header, but you’re also likely to see your Blog’s name and tag line written over the top. This is because your header is effectively a background and WordPress still insists on putting your Blog’s header text over the top. This may or may not fit in with your image.

If you want to hide the Blog’s tag line, click on the Hide Text button below the header.

To hide the Blog’s Title, go to Color Header (next to Custom Image Header) and click the Advanced tab below the header. You then have a Toggle Text Display button. Click that to turn the text off.

You should now have a just your image showing in your header. Remember to save your changes at each stage. If you want to restore everything back to how it was, click on Restore Original Header on the Custom Image Header screen.

Finally, Freewebpageheaders.com has some…, guess what? Free web page headers! They might not be exactly the right size (800×200 instead of 760 x 200), but they more than make up for it quality. You can use them under the Creative Commons Attribution Noncommercial licence.