How to Add a Banner to a WordPress Template


WordPress is an open-source service designed to make creating websites and blogs easier and simpler. In addition, WordPress offers free hosting services for user blogs and websites, in addition to the ability to customize the theme of its website. One of the ways you can customize your WordPress is to add your own custom banner at the top of the page, also known as a header banner. WordPress has designed the process to be quick and simple, requiring only a few clicks to get a custom image headlining your blog.

  • Open your Web browser and navigate to WordPress' website ( Sign into your blog or website user account.

  • Click on your blog or website's dashboard and select "Appearance," followed by "Header." Be aware that if these options aren't present, your currently selected theme doesn't support custom header banners. You will need to select a different theme to create a custom banner.

  • Click on the "Browse" button in the Header menu to begin looking through your computer's files and folders. Select the image you want to use and click "OK."

  • Click on "Upload" to upload the image into WordPress.

  • Highlight the area of the image you want to use, making sure to keep it within the box of broken lines. This is a cropping box, and everything outside of the lines will be cut from the image. When finished positioning, click on "Crop and Publish" to add the image to your WordPress blog or website, with the title of your blog or website over-top.

Tips & Warnings

  • WordPress only supports JPG, GIF and PNG image formats. Other formats will not work on WordPress and must be converted before uploading.
  • If you want to avoid cropping, size the image to fit ahead of time. If the image is 760 pixels wide by 200 pixels tall, WordPress will accept it immediately without any need to crop.
  • Using image editing software like Adobe Photoshop or GIMP to edit your banner can give a little extra personal flair. You can also use it to add fonts not supported by WordPress, since it will actually be part of the image and not an overlay.
  • To disable WordPress' text overlay on your header banner, go to the "Appearance" menu, followed by "Header." Click on "Hide Text" and then "Save Changes" to eliminate the overlay.
  • Any image that isn't edited to the WordPress size will require cropping upon upload. After cropping, the file will be saved to WordPress as a JPG image. This can result in loss of quality, the addition of JPG artifact errors and will immediately turn all transparent sections black, as JPG does not support transparency. If you don't want loss of quality or transparency, size the file to the WordPress specifications listed above and save them as GIF or PNG format images.

Related Searches


Promoted By Zergnet



You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!