How to Install WordPress Headers

WordPress Blog
By
M.A., SPHR - Social Media Trainer & Consultant

Are you looking for information on how to install a new WordPress header for your blog? Whether you have created your own header, or downloaded a header template that you purchased or found online for free, you have to get it installed before you can use it. Fortunately, installing a WordPress header is very simple. Follow the steps below, and you'll have your blog looking exactly the way you want in just minutes.

Installing A WordPress Header: Five Steps

Use these five steps to install a new WordPress header into your blog.

1. Upload new header image: Make sure the image for your new header is uploaded to the "images" directory within the WordPress folder on your website. Make note of the file name, because you will need it in step three.

2. Locate the header file: In the theme directory (/wp-content/themes/), find the file called "header.php." Download this file to a location where you can edit it.

3. Find code for existing header: Within the header.php file, look for the section as follows:

'''#header { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/wc_header.jpg") no-repeat bottom center; }

1. headerimg {

margin: 7px 9px 0; height: 192px; width: 740px; } '''

4. Replace old header image name: Replace the standard WordPress image file name with the name of the new image that you've uploaded to the images directory.

5. Save the changes: Once you have placed the correct header image file name in the code, you will need to save the header file.

Enjoy the New Look of Your Blog

Once you have followed these steps, the new header that you have selected will be visible in your blog. If you still see the old image when you open your blog again, you will need to do a hard refresh. Simply press Ctrl+F5 to clear the old version from your browser's cache.

Additional Header Installation Tips

It's important to note that when you edit the section for the header style, you may need to modify the image size defined in the "headerimg" section to match the original image if your new image isn't already the same size. Additionally, if you look through the styles.css file and look for the sections that start with #header you'll discover an entire list of properties that you can modify, such as background color, text font, padding, margins, and other formatting properties. Make sure to save a copy of this file before making changes, and then don't be afraid to experiment and learn what settings make your blog look perfect.

Post a comment