customize WordPress theme

How To Customize WordPress Theme Header and Background

This is an exciting WordPress tutorial because I am going to show you how to customize WordPress theme header and background. Specifically,  I am going to demonstrate how to customize the header and the background of the Twenty Twelve theme, one of the default themes you’ll find in the themes dashboard of your new WordPress blog.

In the previous WordPress theme tutorial, I mentioned that your new blog comes with 4 themes. I explained why I don’t like the default theme of a newly installed blog. I also showed you how to switch the default theme to Twenty Twelve.

In today’s tutorial on how to customize WordPress theme I am going to use the default theme Twenty Twelve. I will be using this theme in all the WordPress tutorials that will follow .

How To Customize WordPress Theme Twenty Twelve

In this section, you’ll learn how to customize the overall look of your blog. We will customize the Header and the Background of your blog. In the following WordPress tutorial, I will show you how to customize the sidebar of your blog.

The first step is to click on Appearance of your WordPress Dashboard to expand the menu.

Image 1. Access To Theme Customizing Options

customize header
You have 3 options in the Appearance menu: Customize, Header and Background. The Customize option offers a general look at all customizing options and Header and Background options give you an expanded view of these two specific option. We’ll just click on Customize and expand it as we need it.

I. Customizing  Header of Twenty Twelve Theme

There are several ways to customize header of the theme

  1. Leave the Title and the Tagline as is and only change the color of the text
  2. Add a header image and allow the Title and the Tagline of your site to be displayed on the header
  3. Add a header image (with the site’s name in the image) and disallow display of your blog name within the customizing options

We will go through all three options.

â–º1st Option – Changing only the color of your Title and Tagline

 Image 2. Changing Title and Tagline Colors

customize header colors
In the custom setting (after you clicked “Customize” in “Appearance”), click on “Colors” and in the Header Text Color option click on “Select Color”. After you click “Select Color” you will get an expanded color palette where you can choose the color of your Title and Tagline

Image 3. Using Color Palette

changing title and tag line color

In the color palette settings choose the color which you like. You can add a hex color you know you want to use (in this case I used #593c87 to get the purple color I wanted). You can move the circle within the palette to arrive at different colors. Use the bar on the right hand side to get a different shade of your chosen color.

Once you choose the color click Save and Publish.

Notice that both the Title and the Tagline are the same color. You do not have a choice of having them in different colors as some more complex themes will give you. But this is good enough.

â–º2nd Option – Add a header image and allow the name of your site to be displayed on the header

In this example I am going to add a header and I will allow the Title and the Tagline to show on the header. I will leave the color of the text purple.

All I have to do is upload the header to the theme.

Just to sidetrack a bit, because I don’t want you to stress too much about images. The best place to get free images that you can use for any purpose without a license, is Pixabay. There you can freely download images to your computer. You can use any number of free image editors (for example, Paint on PC) to cut the image to size.

Image 4. Adding Image To Header

adding header image

In the “Customize Dashboard”, click on “Header” to expand the window. Click on add image. You will be adding the image from your computer. The recommended size of your image is 960 (size of your blog) x 250 pixels. I find 250 height too much. I made my image to be only 175 pixels high.

When you click on the “Add new image” button, you will be taken to your blog’s Media Library. In a later WordPress tutorial I will explain Media Library in detail. Right now don’t worry about it and just follow my instructions, please.

Image. 5 Adding Header Image

media libraryClick on Select Files. You will be asked to browse your computer to find the image you want to upload. Choose the image from your computer. (Click on the image in your computer files and then click Open, to upload it to Media Library). You can use jpg, png or gif, but I find jpg takes the least amount of space.

Image 6. Adding Header To media Library

adding header to media library
Your uploaded image will immediately show on the Media Library screen you are at. On the right hand side you will see the image plus a few input fields. The only field, I suggest you worry about, is the Alt Text. This is what search engines, which cannot “read” images, see. Make sure to use a keyword which is specific to the task or the topic of your site, to fill it in. I will again explain this in much more detail, so now I just ask you to trust. Below is an example.

For example, if my site is about flowers, I labeled the image on my computer as “flower-header”. The alt text is flower header. For Blogging Spree site the header image on my computer is labeled as blogging-spree-header. The Alt text is Blogging Spree header.

Once you are done filling the Alt Text, click on “Select Crop”. You will be taken to a cropping screen. You will have a choice whether you want to crop your image or skip cropping. You may or may not choose to crop your image.

After you make your decision about cropping you will be brought back to the Customize dashboard. All you have to do, is to Save and Publish and your new header will show on your blog.

Image 7. Save Newly Installed Header

customize header screen

Image 8. Newly Installed Header On The Blog

image added to header
As far as I see it this is not a conventional header, but rather a sub-header, since the header, in fact, is the space where your Title and your Tagline appear. It does look pretty, though, and you may decide to leave it this way or follow the next header option. I prefer the latter option because I don’t want to take too much space of my blog’s head space (the space above the fold on a computer).

Note: There is an interesting feature related to this option. On the Header Customization page you can upload several images to your header area and you can have them rotate. So when you refresh your browser you will see a different image. The instructions are on the Header Customization page and they are simple to follow.

â–º3rd Option – Add a header image (with the site’s name in the image) and disallow display of your blog name within the customizing options

For this option follow the exact steps as for  adding an image to your header, except for a minor change in the Customize Dashboard. In the Dashboard, click on “Site Title & Tagline. In the expanded window untick the option to display title and tagline.

Image 9. Disallow Title and Tagline display

customize header remove title

Below is an example of a demo site with a header that has a title within the header. (Title and Tagline have been disallowed)

Image 10. Header Without Title and Tagline

demo site no title selcted

This option is especially important if you are uploading a logo to your header. You would not want to show the title of your site twice.

If you decide to upload only a logo to your site, you can do that too. You would upload the logo the same way as you would upload the header image. In the cropping option of the Media Library, just crop your logo to size you want. It takes a little bit of fiddling with but it is doable.

II. Customizing  Background of Twenty Twelve Theme

Now that you have a pretty header and/or title in place you need to change the color of the background your blog sits on. That will be done in the Background Customization window in your Customization dashboard.

Please note that you also have an option to add a background image, but in this WordPress tutorial, we will only change the color of the background. Adding background images does not always work.

To change the color of your blog’s background, click on colors in the Customization dashboard. Then click on the “select Color” button to choose the color of the background from the color palette (see Image 3. above, if you need a refresher).

Image 11. Changing Background Color

choosing background color

For the demo blog I used the same color as the color of the title, #593cB7, the deep purple to match the colors of the flowers.

Image 12. Colored Background

background color purple

Changing background colors of your blog is really simple, as you can see. As a matter of fact, changing the header in Twenty Twelve theme is simple as well. It can be as easily done for all the default WordPress theme, so you can choose any one of the 4 default themes that come with your blog, if you wish.

Note: For the WordPress Tutorial demos, I have actually changed the look of the demo site. I’d like to show you a sample below for consistency, as you go through the tutorials. You can actually see it live here…

Image 13. WordPress Tutorial Demo Site

background color of theme

Now that you know how to customize WordPress theme Twenty Twelve, nothing stands in your way to make your site look unique and compatible with the message your blog projects. Keep me posted on how it is going!


millionaire's brain ad


, , , , , , ,

Comments are closed.