Guides

WordPress Header Background, Font, Title and Color Modifications

Pinterest LinkedIn Tumblr

WordPress newbies and amateurs often need help with their WordPress header customizations like changing header background color, altering header background image, changing header font size, modifying header title font and color and a lot more modifications to make their site beautiful and attractive. This guide will cover everything related to Header Modifications and is divided into parts. Click below on the section that you needs help with.

  1. How To Change WordPress Theme Header Background Color?
  2. How To Change WordPress Header Font Size and Color?
  3. How To Change Or Add A WordPress Header Image?
  4. How to Make Custom Header Image/Logo Clickable?

WordPress Header Modifications

1. Change WordPress Theme Header Colors

The default WordPress theme is probably the most popular and the base of many other themes that have been created after it. Changing the color of the default WordPress theme header is a way to keep a simple uncluttered look yet making it stand out and look different. You can apply the following trick to change any theme’s header background color and if found an issue, just write in the comments section below.

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 and 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.

Change WordPress Theme Header Color

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?

Changing the font in the header of WordPress blog theme can be done if you know what files to edit. However, the code to edit can (and will) vary in all themes. Here we will help you figure out what code your header is using to call for the blog name and description and how to edit it. Here are the following steps to change Header Font size.

Step 1: The first step is to make your WordPress theme’s files writable. To do that you must change the permissions in your hosting account. I suggest connecting to your hosting account with an FTP client and browse to the theme and change the permissions on the whole theme’s folder and all the files within it to 777. Otherwise, you may need to change one file at a time if doing so in the control panel of the hosting account. The path to the theme is the blogs directory then wp-content/themes/your-theme. You could just make the whole themes folder writable.

Step 2: From within the WordPress dashboard, click Appearance, then Editor. Almost all theme editing is done in the stylesheet (style.css) file, and all other files are just displaying the settings that are specified in the stylesheet. There are exceptions to this but beyond the scope of this WordPress guide.

WAIT!!! Before doing any editing, copy the contents of the file and paste it into a text file like Notepad for safe keeping before you attempt to edit it. If you screw things up you can paste the original back in to restore your file. Remember this is extremely important and I take no responsibility for what you may do to your WordPress blog!

On the right side of the Theme Editor are all the files associated with your active theme. Finding the correct code to edit to change the font of the header is in the header.php file. While you don’t need to edit this file the clues to what the header is calling for from the theme’s stylesheet can be found in the header.php file. Below is the code from the header file found in the default theme.

The code between the <h1> tags is the clue we are looking for that calls up the name of the blog. The blog name in the header is styled by the <h1> tags, and the description is being called from the <div class=”description”>. Now that we know what is styling these two items we can edit the style.css file to change the way these two items are displayed. Remember that this case is specific to the WordPress default theme and you need to look at your specific themes header file to determine what code you need to work with. In most cases, the <h1> tags call up the blog name but the “description” or “Tagline” can be called almost anything.

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

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

The h1 code and description can now be changed to a larger size or aligned differently, it can be aligned to the left, right or kept centered.

The font color can also be changed by adding this code color: #666666; and changing the color code number to your liking. Make your changes and click Update File, then look at your blog to admire your work. You may need to refresh your browser to see any changes. There are numerous CSS styles that can be applied to the text in a stylesheet, far too many to place in this post. For CSS color, codes check out

Make your changes and click Update File, then look at your blog to admire your work. You may need to refresh your browser to see any changes. There are numerous CSS styles that can be applied to the text in a stylesheet, far too many to place in this post.

3. How To Change or Add WordPress Header Image

Changing or adding a new header image to a WordPress theme is one of the first things most people want to do to change the look of their WordPress blog. Changing a WordPress header image is a little easier than adding one to a theme that has none. Since all themes are coded differently its hard to explain exactly how to do this for each one, but here are the basics.

If your theme already has a header image then changing can be pretty easy but there are a few things to consider first. First, you must determine what, if any, image or images your theme is using and how it is displayed. The best case scenario to change a header image is with the theme using one large header image. Some WordPress themes can be using multiple images for the header, using a small repeated image or even a larger image that is the header and background image for another part of the theme. These situations can be pretty tricky to work with if you have limited knowledge working with WordPress themes. The first thing to do is to determine what, if any header image your theme is using.

First, you must determine what, if any, image or images your theme is using and how it is displayed. The best case scenario to change a header image is with the theme using one large header image. Some WordPress themes can be using multiple images for the header, using a small repeated image or even a larger image that is the header and background image for another part of the theme. These situations can be pretty tricky to work with if you have limited knowledge working with WordPress themes. The first thing to do is to determine what, if any header image your theme is using.

The easiest way to determine if your WordPress theme is using a header image is yet another reason to use Firefox as your web browser instead of Internet Explorer. With your front side (not the dashboard) of your WordPress blog loaded in Firefox, simply right-click the header area of the blog. If a menu option is View Background Image then choose that and you will see the actual header image. In the address bar you will see the path to, and the name of the header image as well. Right click again on the actual header image and choose properties to get the actual size and type of the header image. If you don’t see the right click View Background Image option or see an image that doesn’t look like your header try different areas of the header.

For IE users, switch to Firefox! But if you must keep using Internet Explorer you will see a few options when you right click the header like Save Background As and Copy Background. Chose Save Background As and open it on your computer with your image editing software to get the information.

You can also look through the theme’s stylesheet (style.css) to find the themes current header image, and you can figure out how to do that below when I explain how to change the header image.

Make sure your new header is the same size, or smaller than your current header image. Please realize that I can’t get into resizing or creating header images in this post or the comment section below, that can get very involved so you are going to have to use Google for more about your particular case.

Now upload the new image to your themes image folder. I suggest naming the new header image something short like a header or new header with no spaces in it. Remember when you right clicked the image to find its name in the address bar? Well, that also tells you where the actual image is. It is almost always in the themes image folder like this:  YourSite.com/blog/wp-content/themes/ThemeName/images/header.gif

With the new header uploaded into the themes images folder next you need to change the theme’s stylesheet (style.css) to point to the new header image. This is also another way to find the header image.

In the WordPress dashboard open the Theme Editor menu, click the stylesheet to load it in the editor. Now look for code similar to this:

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

The example above is specifying the width, height, background color (#253B86) and finally 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. I strongly suggest you make or have a backup of these files before editing. Now just 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 strongly suggest that the image is hosted and controlled you and not on a site that can remove the specified file.

Now just 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 strongly suggest that the image is hosted and controlled you and not on a site that can remove the specified file.

If you don’t have a header image and want to add one follow the steps to upload a header image and after the code that specifies the background color add this part: url(‘images/header.jpg’) no-repeat left; You may need to play with the positioning, sizing or other settings to get it properly aligned. If all went right you now have the new header image showing on your WordPress blog.

We really just scratches the surface and tries to explain the easiest circumstance to change or add a WordPress header image. For example using multiple images, a repeated image or adding one that currently uses none can get quite involved. You may also need to add or remove the blogs title and description in the header. And then there is the chance that your theme is calling for the header in the actual header.php file! Wow, now I know why I never wanted to write this post, there can be so many variables involved and yours can be as easy as I explained or a big pain in the butt! If you just want someone to do it for you, my fees are very reasonable, just click the Contact page on the footer menu or send me an email.

4. How to Make Custom Header Image/Logo Clickable

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

Well, it sounds simple enough huh? Well not so fast. There a few things to consider, like the size of the new image. Make sure it fits and looks well proportioned on your WordPress blog. But all that will be for another post. This is kind of backward but after you change your header image it will usually cover the name of your blog that is linked to main blogs URL and now there is now way for your visitors to click it to get back 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 add the following code between the page and header id and change the red URL to your blogs URL.

<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 blogs home page.

Conclude

WordPress Header modifications can be a simple task if you pay little attention to some styles and HTML. I have tried to cover almost everything related to WordPress Header modification but if you need something specific for WordPress headers then let me know in the comments section below.

Editorial Staff

Editorial Staff at WPArena is a team of WordPress experts led by Jazib Zaman. Page maintained by Jazib Zaman.

13 Comments

  1. Editorial Staff

    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?

    • Editorial Staff

      It looks like all of the text in the right column is also green instead of white.

      • Editorial Staff
        Editorial Staff Reply

        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. Editorial Staff

    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. Editorial Staff

    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. Editorial Staff
    Digital Roy Academy Reply

    Hey!,

    It is really a great article. thanks for such a wonderful detailed explanation.

  5. Editorial Staff
    Digital Roy Academy Reply

    Hey!,
    Such a wonderful article, thanks for detailed explanation.

  6. Editorial Staff

    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!

  7. Editorial Staff
    Gajendra Singh Reply

    how to change my header image from background color.please can you help me how should i do this

Write A Comment

Pin It