The question often comes up about adding a logo to the header in the WordPress default twenty eleven theme, in this post we will look at one way we can achieve this.

In the twenty eleven theme there is no place holder for a logo, the layout of the header has the Blog Name and Blog Description above a large header image, what we will do is to create a header image that has a logo and a text image.

Header Images

In the Admin > Appearance > Headers we can upload a custom header, the size of the header will be cropped to 1000px * 288px on upload, so if we tried to upload just our logo then WordPress would chop this to 1000px * 288px, this would stretch and distort our logo

The way we work around this limitation is to create a blank header and add our logo and text in the position we want then for our website.

Tools

To create a header image we need an image editing package, packages like Adobe PhotoShop are quite expensive and if we are not designing graphics on a regular basis we only want a cheap option, in the support of Open Source products this tutorial will use the free package Gimp for our examples, Gimp is downloadable for both Windows and the MAC OS

Before we start we will have also acquired a Logo, the logo in this tutorial was licenced from Istock Photo for 5 credits, the text was generated for free at CoolText.com, now we have all the part we need we can get started.

The Solid Header

If we do not have a background image on our website we can just create a solid header and add our logo and text, before we create our header we resized our logo in Gimp to less than the header height.

We have two logos one has a solid white background the second has a transparent layer applied to knock out the white leaving a transparent background, you will see this later in the post.

We create a new image and set the width to 1000px and the height to 288px

Now we have our header canvas to add out logo and text to, we just open the folder and drag the logo image to the canvas

Using the arrow keys we can move the logo across the canvas to the position we want to display it.

Next we can add additional images or use the text tool to add text, add shapes or any other image effects we want, when we have finished we save the layout in the Gimp format.

Once we have our template saved, we need to Save As (export) in the *.png format to be uploaded in WordPress, we expand the Select File Type and select the PNG Option.

Uploading the Header

To upload our header we go to our WordPress website and login as admin, then from Admin > Appearance > Headers, we upload our header image.

As we have our website name in the header we hide the title and description

Save the header and view our new header on our website, here we can see our sample header.

Transparent Header (Dark Option)

Some of us might be using the dark theme option in twenty eleven (Appearance > Theme Options), the white background on the header will not suit this theme, so we will need a transparent header, and images with transparent backgrounds.

We create a header as in the steps above then we select the menu options, Layer > Transparency > Add Alpha Channel

We select the highlighted wand icon, click in the white area and press delete on our keyboads, this will create a mask and remove the selected color, this we would do on all images like the logo.

Now we have a transparent background we can add our other elements just like before, saving the Gimp Project before saving as png

If we upload our new png the Appearance > Headers and save, then add a background or Appearance > Theme Options > Dark Theme and save, then visit our website.

We hope this will help you to create a header image for your WordPress twenty eleven website.