Designing and Placing a Custom Banner

One element common to almost all WordPress sites is the banner. The banner is like your trademark; it lets your viewer know they’ve arrived. Making or modifying a banner is easy, as is installing it into your theme.

First, you will need a quality image editor. If you haven’t invested in an over the shelf software package, try Paint.NET. It’s free, and has nearly all the features of the expensive image editing programs. Once you’re in Paint.NET or your editor of choice, you will need your base image or background. To avoid royalty fees, use a service like With it, you purchase credits which can in turn be used to buy images. Most small images used in a banner cost around three credits, or just under US $3. Simply downloading an image from Google may be construed as copyright infringement or intellectual property theft.

Now that you have your image, you will need to create your template. It’s up to you the size, but somewhere around 800×200 pixels is a good start. Now, go back to your original image and crop it so you have the desired portion. Copy and paste it into the new banner template, and move it until you are satisfied. Wash, rinse, and repeat with other images and backgrounds until you are satisfied. You may also, obviously, add text and animations if you so desire. When you’ve finished, save your image as a .gif or .jpeg.

Now, to place the banner in your theme! Access your WordPress theme in whichever manner suits you, and find your way to the \wp-content\themes folder. Replace the existing “banner” file with the new one, and reload your page. Presto! Your beautiful new banner should show up as expected. If it requires modification, which it probably will, just stretch, shrink, skew, or otherwise change the image in your editor and save the file again. It may take some experimentation, but it will be well worth it in the end.

Last, we leave you with a few quick tips on banners. Keep them low-contrast, or in other words blend them with your site. Use at least one image and some text, but avoid an all-text or all-graphic banner. Keep animations to a minimum, if you really must have them at all. Last, make your banner match your business theme; as we mentioned in earlier blogs, all design elements should mesh together on your site.

Of course, if you find your design projects are taking too long you could always look for a website design company to take some of the load off!

Good luck, and feel free to post any questions to the comments!

One Response to “Designing and Placing a Custom Banner”

  1. Brad Dalton

    I normally use MS picture Manager but will try paint now. Looks like its a lot more user friendly than Adobe Photoshop


Leave a Reply