How to Customize WordPress Header: Background Color, Font Size, and Image

Total
0
Shares
WordPress Header Modifications

New WordPress users often require assistance with customizing their website header. This includes tasks such as changing the background color and image, adjusting the font size and style, and making various other modifications to enhance the site’s appearance. This comprehensive guide is divided into sections, each addressing a specific aspect of header customization. Choose the section below that corresponds to the help you need.

1. Change WordPress Theme Header Colors

The default WordPress theme is highly popular and serves as the foundation for numerous subsequent themes. Modifying the color of the default theme header offers a means to maintain a clean and minimal appearance while achieving uniqueness. To alter the background color of any theme’s header, follow this method. In case of any issues, please share them in the comments section.

Steps to Change Theme Header Background Color

To change the header background color of the WordPress theme, follow the following steps.

  1. Click Appearance and then the Header sub-menu.
  2. There are five options as shown below in this submenu.
  3.  The gradient header is made up of three colors, font, upper, and lower. Clicking the corresponding tabs to choose a color can easily change these colors. Click Revert to change it back to the default blue color.
  4.  The Advanced tab allows for even more fine-tuning by specifying a hex color code. To find a hex color code you can Google hex colors and find the codes for the colors you want.
  5. After you find the hex color code you want simply copy and paste it into the corresponding areas in the Advanced tab and click Update Header.

View your site to see if you like the new look, if not just go back and keep trying.

Changing the header colors of the default WordPress theme is an easy way to customize WordPress without going through the hassle of searching for new and different themes.

2. How To Change WordPress Header Font Size and Color?

To change the font in the header of a WordPress blog theme, you need to edit specific files. However, the code to be edited may differ across themes. Here are the steps to modify the font size in the header.

Step 1: Begin by making your WordPress theme’s files writable. This can be done by adjusting the permissions in your hosting account. I recommend connecting to your hosting account via an FTP client and navigating to the theme. Change the permissions of the entire theme’s folder and its files to 777. Alternatively, you can change one file at a time using the control panel of your hosting account. The path to the theme is the blogs directory, followed by wp-content/themes/your-theme. It is also possible to make the entire themes folder writable.

Step 2: Within the WordPress dashboard, navigate to Appearance and select Editor. Most theme editing tasks are performed in the style.css file, while other files merely display the settings specified in the stylesheet. Note that there may be exceptions, but they are not covered in this WordPress guide.

WAIT!!! Prior to editing, make sure to copy the file contents and paste them into a text file like Notepad for safekeeping. If you make errors, you can restore the original by pasting it back in. Remember, this is crucial, and I am not responsible for any consequences to your WordPress blog.

The files associated with your active theme are located on the right side of the Theme Editor. To change the font of the header, you can edit the header.php file. Although editing this file is not necessary, it contains clues about what the header is requesting from the theme’s stylesheet. Here is the code from the header file in the default theme.

https://gist.github.com/wpcount/f915d074f858f64a5f9ad80a282ca327#file-header-php

The code within the <h1> tags is the clue that displays the blog name. The blog name in the header is styled by the <h1> tags, and the description is retrieved from <div class=”description”>. Now that we know the styling of these two items, we can modify the style.css file to change their display. Keep in mind that this is specific to the WordPress default theme, and you should refer to your theme’s header file to find the relevant code. In most cases, the <h1> tags display the blog name, but the “description” or “Tagline” could have a different name.

Now click the themes style.css file on the right side of the Theme Editor and look for the code from the header file. In this case, it is

https://gist.github.com/wpcount/f915d074f858f64a5f9ad80a282ca327#file-style-css

If you want to change the color additional styles can be added like this:

https://gist.github.com/wpcount/f915d074f858f64a5f9ad80a282ca327#file-styles-css

The h1 code and description can now be modified to a larger size or aligned differently, such as left, right, or center.

To change the font color, add this code color: #666666; and replace the color code number with your preference. Apply your changes and click Update File. Refresh your browser to see the updates. There are numerous CSS styles available in a stylesheet, which cannot all be listed in this post. For CSS color codes, refer to

Make your changes and click Update File, then refresh your browser to admire your work. There are numerous CSS styles that can be applied to the text in a stylesheet, too many to include in this post.

3. How To Change or Add WordPress Header Image

Changing or adding a new header image to a WordPress theme is among the initial modifications users often wish to make to alter the appearance of their WordPress blog. Changing a WordPress header image is simpler than adding one to a theme that lacks it. Due to the varying coding of themes, it is difficult to provide precise instructions for each one. However, here are the fundamental steps.

If your theme already has a header image, changing it can be easy but there are a few things to consider. First, determine what image or images your theme is using and how it is displayed. The ideal scenario for changing a header image is when the theme uses one large header image. However, some WordPress themes may use multiple images for the header, a small repeated image, or even a larger image that serves as both the header and background image for another part of the theme. These situations can be challenging if you have limited knowledge of working with WordPress themes. Start by finding out if your theme uses a header image.

First, determine whether your theme utilizes any images and how they are displayed. Ideally, you should have a theme that uses a single large header image. However, certain WordPress themes may employ multiple header images, a small repetitive image, or even a larger image that serves as both the header and background for another aspect of the theme. Dealing with these situations can be challenging if you have limited experience with WordPress themes. Therefore, your primary task is to identify whether your theme includes a header image or not.

You can easily determine if your WordPress theme has a header image by using Firefox instead of Internet Explorer as your web browser. Load the front side of your WordPress blog in Firefox, not the dashboard, and right-click on the header area. If the menu offers the option “View Background Image,” select it to view the actual header image. The address bar will display the path and name of the header image. Right-click on the header image itself and choose “Properties” to obtain the size and type of the image. If you do not see the “View Background Image” option or the displayed image does not resemble your header, try different areas of the header.

For users of IE, switch to Firefox! However, if you insist on using Internet Explorer, you will find several options when you right-click the header, such as Save Background As and Copy Background. Select Save Background As and open it on your computer using image editing software to obtain the information.

You can also refer to the theme’s stylesheet (style.css) to locate the current header image. I will explain how to change the header image below.

Ensure your new header is equal to or smaller than your current header image. Note that I cannot provide guidance on resizing or creating header images in this post or the comment section below. For more information specific to your case, please utilize Google.

Upload the new image to your themes image folder. I recommend giving the new header image a short name without spaces. Remember when you right-clicked the image to find its name in the address bar? Well, that also indicates the location of the actual image, which is usually in the themes image folder as shown:  YourSite.com/blog/wp-content/themes/ThemeName/images/header.gif

After uploading the new header to the themes images folder, you must update the theme’s stylesheet (style.css) to reference the new header image. This is an alternative method to locate the header image.

Open the Theme Editor menu in the WordPress dashboard and click on the stylesheet to load it. Locate code that resembles this:

#header{
width: 100%;
height: 100%;
background: #253B86 url(‘images/header.jpg’) no-repeat left;
}

The example above specifies the width, height, background color (#253B86), and the path or URL of the header image file. Before editing this file, you may need to change its file permissions in your hosting account to 777. Creating a backup of these files is highly recommended before making any edits. Once you have uploaded the new header image file, simply update the file by changing the file name. Please note that while it is possible to specify another absolute URL to the header image using the full URL like http://www.SomeSite.com/image.gif, it is strongly advised to host and control the image yourself rather than relying on a third-party site that may delete the specified file.

Change the file name to the newly uploaded header and click Update File. Note: you can specify another absolute URL to the header image using the full URL like http://www.SomeSite.com/image.gif, but I recommend hosting and controlling the image yourself rather than relying on a site that may delete the file.

To add a header image, follow these steps: upload the image and add the code for the background color. Then, include this part: url(‘images/header.jpg’) no-repeat left. You may need to adjust the positioning, size, or other settings for proper alignment. If successful, the new header image will be displayed on your WordPress blog.

We only provide a basic explanation of changing or adding a WordPress header image. However, there are more complex scenarios such as using multiple or repeated images, or adding an image to a header that currently doesn’t have one. You might also need to modify the blog’s title and description in the header. Additionally, your theme may require changes to the header.php file. It’s clear why I didn’t want to write this post – there are numerous variables and it can be either straightforward or difficult. If you prefer someone else to handle the task, my fees are reasonable. Simply visit the Contact page on the footer menu or email me at jazib@wparena.com.

4. How to Make Custom Header Image/Logo Clickable

Now that you have successfully changed the header image of your choice, you want to make it clickable.

It may seem simple, but there are factors to consider, such as the new image’s size. Ensure it fits well and is proportionate on your WordPress blog. However, this will be discussed in a separate post. Changing the header image may cover the linked blog name and prevent visitors from clicking it to return to the main blog page.

The fix is quite simple on the WordPress default theme. Open the themes header.php file. and look for the following code near the bottom.

<div id=”page”>

<div id=”header”>
<div id=”headerimg”>
<h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>
<div class=”description”><?php

Now insert the code below the page and header id, and replace the red URL with the URL of your blog.

<div class=”header” onclick=”location.href=’ Blogs URL Here.com‘;”
style=”cursor: pointer;”></div>

The code should look like this:

<div id=”page”>
<div class=”header” onclick=”location.href=’http://www.YourBlogsURLHere.com’;”
style=”cursor: pointer;”></div>
<div id=”header”>
<div id=”headerimg”>
<h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>

Now your whole WordPress header image will be linked to your main blog’s URL or the blog’s home page.

Conclude

Modifying the WordPress header can be accomplished easily by making minor adjustments to styles and HTML. I have provided comprehensive information on WordPress header modification, but if you require assistance with specific aspects of WordPress headers, please leave a comment below.

16 comments
  1. I am old and do not understand what you are telling me about how to change the font color for the title of my blog. I have selected a purple(ish) background, but the title keeps showing green. I would like for it to be white. Could you please help me change it so that I can get on to the business of writing?

      1. Hi Kim,
        Thanks for the comment. You can put this code in your stylesheet and it will work.
        For White Title Color use

        .site-title a {color: #fff;}

        For Black Title color

        .site-title a {color: #000;}
        				
  2. After working with an incompetent website “professional” who started me off with a bare-bones, FREE WP template and, without my knowledge, changed the “hosting URL” to another domain name, I’ve found myself in a situation where GoDaddy deleted our “main” website in error. I paid them to “restore” it (if you want to call it that) and am now left with a site onto which our logo cannot be uploaded – yikes!! I cannot locate a “Logo” or “Header” option in any of the menus and really don’t want to be messing with the code.
    Is there any other way to get a logo uploaded to our site until such time I decide to upgrade to a new template? Or, should I just bite the bullet and start all over with a new template (assuming the logo and header features will be available)?

  3. Hello, I am using yoast for my WordPress site. I used to remove my website name from heading, it doesn’t look good to me. But in search results it is showing my website name in heading. Please suggest how to remove website name from heading.

  4. Hi,

    I work with a WordPress theme, called Alizee.
    I would like to make a frame for the letters of the site-title. I can not find any CSS code to it. Is it possible?
    The letters of the site-title are white and I would like to create a frame for each letter separately in color black.

    I appraciate your help!

  5. Hi I have a header picture for every page except the homepage is different. The text behind the picture shows up as black and I want it to show up as white because the background image is dark and the words don’t show up very good and it looks unprofessional. I inspected the code and came up with this

    About

    I go to additional CSS and I can change it to style=color:ffffff and it accepts that as code but it says there’s an error for the h3 class=”page-title” and I’m unsure what to edit that to?

  6. I uploaded an image for use as header image in Bravada theme in WordPress. (I tried JPG and PNG.) I had edited the image by altering the color of the background in one corner. The image loaded, but with a completely different color to the color I had used! Is there anything I can do to make sure that the correct color appears?

Leave a Reply

Your email address will not be published. Required fields are marked *

Sign Up for Our Newsletters

Get notified of the best deals on our WordPress themes.

You May Also Like