Custom Header With Logo and Text – WordPress – Theme Twenty Twelve

screenshot of header imageHow to Create a Custom Logo, Combine It With a Custom Header Image or Text and Upload It

The steps for creating a custom logo and custom header image and uploading them in WordPress Twenty Twelve is similar to doing this in other themes but there are some differences.

Header Size Can Be Wide or Narrow

The header is listed as 960 pixels by 250 pixels but you do not need to make the header this high unless you wish to do that. These days people are trending to using narrower headers because it makes more of the content of the website show up above the fold.

Above the fold means the part of the webpage that shows up on the screen without any scrolling. This term comes from reading a newspaper that is folded in half so only the top part shows above the fold.

Today web visitors are browsing more rapidly than ever and they may only visually check the part of the site that shows without bothering to scroll. This means you might want to make the header image narrower so it does not take up as much room.

Header Trends

The trend is to often try to make most or all of the homepage showing above the fold with links across the top for people to use to jump to the rest of the site. You can also put a large button that is an easy target for people to click to enter the rest of the site.

Now let’s start creating a logo with a title for the custom header image. To go with the trends we can make it a narrow header instead of the large or huge ones we have often seen. Of course if a large header suits the purpose of your site then of course make it bigger than the narrow one we will make here.

Steps to Create a Custom Logo and Custom Header Image

1. Graphics Software: Use your favorite graphics and images software. For this demonstration we will use the free, easy software called Picasa.
2. Images: Find an image you would like to add to a custom header. This image could be an illustration or photo or a free logo that can get from many of the sites offering these. Click on it in Picasa.
3. Click “Hold” Button: In the lower part of the screen click the green Hold button to hold it in the “tray” in the lower left of the screen.
4. Click Create: Click on Create in the menu across the top and then on Collage.
5. Select or Manually Enter Length and Height of Header: In the screen that opens you will see a box on the left where you can select or create a custom size for the collage that will actually be the header.
6. Custom Header Size: Click to create a custom size. For instance, create a header that is 960 pixels across and only 100 pixels wide so it will be a narrow header that does not take up too much height on the front page.
7. Click and Resize Image: Click on the image you chose and drag the handles to resize it so it’s small enough to fit on the header. Drag it to the area where you wish to have it.
8. Header Background Color: Click to choose a color for the background of the header.
9. Click to Create the Collage.
10. Save the Header Image: Now under File in the menu across the top click to Save that header image.
11. Select Header in “Picasa Library”: In the Picasa library double click on the new collage or header.
12. Text Tools and Editing Tools Screen: A screen with tools for Cutting, Text and other Tools for Special Effects will open up.
13. Creating the Logo:  Create a logo with the image you uploaded or use the Text Tool to create a text logo. Use the site name if it’s short or the initials. You can also use free logos that are available on the internet.
14. Adding Header Text: Add some text to describe what the site is about.
15. Special Effects Editing: Experiment with the special effects tools to be creative.
16. Collages on top of Collages: You can also create a collage, add text and logos, and save that and then use it as an image on another collage to create a frame or layered effect.
17. Save Header: Save the header on your desktop.
18. Dashboard, Appearance, Headers, Upload: Go to the Dashboard for your site and go to Appearance and Headers.
19. Upload Header: Upload the header and then drag the dotted line to be sure it includes the whole header and does not cut it off.
20. Header Title or Tagline: On the header page you can choose whether to also have the title and tagline show. If this information is included in the text on the header then the title might not need to show. You can also click to choose a custom color for the title and tag line.
21. Save Header: Click Save and go to the front end of your site to see how it looks for the public. You can always go back and edit the collage header in Picasa if you decide to make some changes.

22.  Multiple Headers: You can upload multiple headers and click to put a dot in the radio button for “Random” headers.  This will cause different headers to show on different pages of the site.  As visitors click around the site the headers change.  Some of the popular sites on the internet use multiple headers.  

Published by

Kristi Marie Gott

Kristi Marie Gott is the webmaster for StudioMediaCam. She was an award winning computer support tech for a Fortune 500 company. Her computer and software education was at California Polytechnic University at San Luis Obispo, Cailfornia. She has a college degree in computers and has college and university certificates in html5, css3, SEO, Creating Webpages, Writing and Marketing Ebooks, WordPress and in tutoring at the college level. She continues to attend online classes.