Step 3: Templates, Header Image and Background Color


Choosing a Theme

If you’re following these lessons in order, you now have your domain name, you’ve set up a cheap hosting account, and you’ve installed WordPress. You now have a website, but it doesn’t look the way you want it to. Before you write any posts or pages, let’s get the site looking good by customizing your site. To do that, we need to get to the dashboard.

When you installed WordPress on your site, I suggested that you request an email that includes your username and password. Go find the email now, and click on the Admin URL link. It will point to yourdomain.com/wp-admin

You will see a login screen. Type in your username and password, and you’ll get to the dashboard. It may look a bit intimidating, but we’ll go through the bits one at a time.

There are thousands of themes built for WordPress. The default template that used to come with the WordPress installation was a bit lame, but the new default template looks nice, and it comes with screens that let you easily customize it so it won’t look like a “default” template.

  • Disclaimer I now use the premium Thesis theme on all my sites, both for SEO purposes and because it keeps me from wasting hours looking at all the cool free templates that are available. That’s why the page you’re looking at now doesn’t have the same look as the test site I built for these lessons, which you’ll see in the images below.  Thesis really isn’t for beginners, though, so I suggest you stick with the default template for now.

If you prefer to look at the available free themes, click on the Appearance tab on the left sidebar of your dashboard, then choose Themes.

Your Website Templates

Your Website Templates

Click on the Install Themes tab, and start choosing different options. Warning – you can get lost for hours trying to find the theme that fits your preconceived notion of how you want your website to look.

If you want a look that’s a bit fancier than you can get from a free template, but you don’t want to design your own (not recommended unless you’re a real pro with the Thesis system), check out Elegant Themes. They aren’t free, but you do get access to any of the themes they design and you can try out all of them, if you want to. Some of their themes are a bit complicated to use – if you’re first starting out, I really suggest that you stick with the theme that came with your WordPress installation. You can always change it later, if you want to.

So for now, let’s use the default template and snazz it up with a bit of customization. If you use another template, it may not have the custom header screen shown below.

Changing the Header Graphic on the Default WordPress Theme

The first thing you probably want to do is to change the header photo at the top of your site. On the left hand column under Appearance you see a link that says Header Click on it, and you find this page:

Change Your Custom Header Graphic

Change Your Custom Header Graphic

If you own a photo-editing program, you want to create your image with a resolution of 72 pixels per inch, and crop to the size shown above, 940 x 198 pixels.

You want all of your photos and images to be set at a resolution of 72 pixels per inch, because that’s all that’s needed by a computer screen. A resolution larger than that will just slow down your site. Photos that come straight out of your camera are way too large for a website.

Image Editing Programs

If you don’t have Photoshop or another photo editing program already on your computer, I recommend PhotoPlus by Serif. The version I bought is X3, and it looks like Amazon.com is selling it now for $29.99. The newer X4 version might be a whole bunch better, (I haven’t checked it out), but the X3 version does everything I was ever able to make Photoshop do – and the Adobe product costs around $400. I’m not saying PhotoPlus is better than Photoshop – but the Serif program costs way less, and it can create graphics that look good on a computer screen, like all the screen shots you see on this site.

Another option, if all you want is a nice-looking header and you won’t be adding anyother images to your posts or pages is XHeader. The program is free, although they’ll try to sell you the pro version. The program was designed primarily for Internet Marketers, so the images included in the program might not be exactly what you need for your own site. I played with it for a few minutes, but I didn’t find the button for changing the size of the image – it must be there somewhere.

Before searching for new editing software, make sure you don’t already have a program on your computer. If you have a digital camera, they almost always come with an image editing program – and a manual to help you figure out how to use it.

Finding Images for Your Website

Make sure you don’t steal an image from another website or from the Google image search – everything that appears on a website belongs to the person who first created and published it. That means that if you swipe someone else’s work, and they find out about it, they can make a complaint to your hosting company and get your site shut down. Besides, it’s not nice.

If you don’t have a photo that would work for your header graphic, you can find free or low-cost images from the following sources:

If you use an image from one of the sources shown above, be sure you read their TOS page so you know what rights come with the images. You’ll still need an image editing program, of course, in order to make your selected image the right size.

Once you have a header graphic you like, go to the Header screen, click the Browse button, and choose your image file. Now click the Open button, and then Upload.

Choosing Your Custom Header Image

Choosing Your Custom Header Image

Once the image is uploaded to your server, you’ll see your new header image on the Header screen. Be sure you also click on the name of your site at the top of the Dashboard and check to see if you like the way your image looks. When I added an image to the test site I built for these lessons, my custom image had a light background behind the dog. When I checked it on the site, it looked bad with the black stripes the default template adds above and below the header. I edited the image, uploaded a new one, and the final result looks like this:

New Header Graphic for Default WordPress Theme

New Header Graphic for Default WordPress Theme

Changing the Background Color

To change the background color – the color that surrounds the pages of your site – click on the Background link under the Appearance tab. You can use an image for the background, or choose a color with the color selector tool. The test site shown above uses a yellow-tan for the background, which I chose because it coordinates with the header image, without being too overwhelming. And because I just happen to like it.

If you want, you can leave the background white.

Changing the Background Color on the Default WordPress Template

Changing the Background Color on the Default WordPress Template

Free Tools for Choosing Colors

Two free color-related tools that I use all the time while designing websites:

  • ColorPic, which allows you to grab a color off the computer screen. This works really well when you want the background color to coordinate with a header photo. That’s how I found the background color for my test site.
  • ColorSchemer Gallery, which lets you type in the name of a color, and then shows you the color combinations that members have sent in.

In the next lesson I’ll go over some of the other options you’ll find on your Dashboard to customize your site’s sidebar widgets and permalinks (you don’t need to know what those words mean quite yet – you will shortly), and after that I’ll talk about the plugins I always use to increase the functionality of the site, or help the search engines find it more easily. After that, you’ll be ready to start writing your first pages and posts.

Facebooktwittergoogle_plusredditmail

{ 2 comments }

Carean Kaso January 23, 2014 at 9:20 am

Hi Jonni,
I am an artist who was inspired by your website tutorial to try to create a simple website. Last week I purchased my domain name, a hostgator hosting account, uploaded the WP platform, and bought Serif Photoplus X3. (This was all done through your links so you’d get the credit). The problem is, I’m really, really stuck. I can’t even upload a header photo that works. I have discovered the version of Photoplus I bought no longer offers technical support. And I simply do not understand how the WP dashboard works.

What would you suggest I do? If you are going to recommend that I hire someone, can you give me any guidance on what to look for in a web designer, and how much I can expect to pay? I am on a tight budget but
now that I’ve invested in this, I want to see it through.

Thank you for any help,
Carean

Jonni January 23, 2014 at 11:39 am

Hi Carean. I’ve been using PhotoPlus for quite a while, so I might be able to help you with this problem. What file type are you using when you save your image? Are you editing the image to the size shown on the Header uploading page?

Comments on this entry are closed.