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.
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.
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.
We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.
Code disclaimer information
If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.
All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.
These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.
All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.
Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.
This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.