WordPress To Go - How To Build A WordPress Website On Your Own Domain, From Scratch, Even If You Are A Complete Beginner (2013)

QUICK START GUIDE - YOUR OWN WEBSITE IN 8 EASY LESSONS

Lesson 4. The Design Of Your Wordpress Website

Right then - here’s where it starts to get interesting…

The visual appearance of a WordPress website is governed by a design template called a ‘theme’. The theme determines the overall appearance and layout of the site, the color scheme, the fonts, and the style - in fact, the whole overall look and feel of the site. Think of it as a ‘skin’.

One of the wonders of WordPress is that you can change the theme of your site with a few clicks of the mouse and everything will (usually) click into place with a brand-new visual style.

The default theme provided by WordPress on new installations is the minimalist ‘Twenty Twelve’ theme, which is what is illustrated below.

Figure 4.1 shows what my Chicken Keeping website looks like straight out of the box:

This is the default look and style of Twenty Twelve and I admit that it doesn’t look very interesting as yet - but I’m about to change all that.

I’m going to recommend that you stick with this theme to start with as it will be easier to follow the lessons if you do. If you want to, you can change it later when you know what you are doing.

In this lesson I’ll show you how to tweak Twenty Twelve so that you can explore for yourself the options that this theme provides.

Sketch Out A Blueprint For Your Website

Before going much further, it would be a good idea for you to sketch out on paper roughly what you want your website to look like and how you want it to behave so that, as we work through the tutorial, you can be putting your design into practice.

Figure 4.2 shows the outline of a typical website and one that Twenty Twelve follows:

What you need to sketch out is what you want to go where and approximately what you want your site to look like.

At this stage, I suggest you design the layout of your website to be as simple as possible because, if you can live with the simple Twenty Twelve WordPress layout for now, you will find it quicker to build your own site.

The Twenty Twelve architecture provides many of the typical features that are found on most websites:

· The header is at the top of the page and this can be an image, or a block of text, or both. The text would consist of the site title with an optional extra tagline. The header normally appears at the top of every page.

· Below the title is the ‘menu’ which is a horizontal bar containing tabs which link to the various pages in your website. Twenty Twelve actually puts the menu above the header but many themes put it below.

· The main body of each page contains an article (page or post) with a title at the top. The body of the article can contain text or images or a mixture of both.

· The sidebar on the right side of the page contains ‘widgets’ (see Lesson 8) which typically contain navigational links to guide the user to other parts of your website. Widgets can also contain text or images.

· The footer is at the bottom of the page. The footer is optional and can also contain widgets.

It often helps to start by deciding what you want your front page to look like. Is this going to be a static ‘splash’ page introducing your organization or company? Or do you want a blog-type site where the first thing your visitors will see is your latest news or opinion?

What page links do you want to go across the top horizontal menu bar? Again, this will usually remain the same as users click from page to page.

Now think about the header. Do you want a header image? Do you want to upload your own graphic or logo?

What do you want to see in the sidebar? Note that the sidebar is generally used to provide navigation to other parts of your website (or maybe other websites).

Do you want to use footers and, if so, what do you want in them?

As you can probably appreciate, the more work you can do at this stage to plan the layout of your website, the easier and quicker it will be to actually build it.

At this stage your WordPress website is empty except for the sample content (‘Hello world!’) that WordPress inserts automatically. We’ll be deleting that stuff in the next lesson. For now, we’ll focus on some of the things you can do to begin making Twenty Twelve look and feel the way you want.

So, log in to your website’s dashboard (see Lesson 3) and follow along with me:

Add A Site Title

From the dashboard, go to ‘Appearance’, ‘Themes’ and, for Twenty Twelve, you’ll see ‘Customize’, ‘Header’ and ‘Background’ as options. (Ignore Widgets and Menus because these will come into future lessons).

Click on ‘Customize’ and you’ll see some drop-down menus on the left side. Now click on ‘Site Title & Tagline’. Here you’ll enter the title and tagline of your website that will be displayed at the top of every page.

Enter whatever is appropriate for your website (you can change it later if necessary) and click on the blue ‘Save and Publish’ button at the top left as in Figure 4.3.

You can see that this text will now appear in the header of every page of your site.

Select A Color Scheme

Now click on ‘Colors’. As you can see, you can change the Header Text color - the color of the text you just typed in. If you have a color-scheme in mind for your website you can begin to make it take shape here. Play around with the color palette box to select the color you want.

In the same dialogue box you can also change the background color. This is set by default to a bluish-gray color but you can change it to whatever fits in with your ideas. I’m going to change my background to black (#000000), because I think it will help my content to stand out on the user’s screen. But you can choose whatever color suits your plan - or white (#FFFFFF) if you want to keep it plain and simple. When done, click on the blue ‘Save and Publish’ button at the top left.

Add A Background Image

As you can see, there is also a ‘Background Image’ dialogue where you can upload an image instead of having a plain background color. The background image will display in the empty area around and outside the page borders. Whatever graphic you use will repeat itself across, around and behind your web pages.

If you are going to create a particularly jazzy site where the design graphics are an integral part of the image you wish to portray then you might want to explore this option.

I tend not to use background images because I think they can make the screen look too cluttered and can distract the user from reading my sparkling prose(!) - but the facility is there if you want to use it.

Add A Header Image

If you want your site to have a header image you can upload it here. The Twenty Twelve theme does not provide any inbuilt header images and, by default, will not display one. But if you have a graphic that you want to display across your website as a header you can either resize it to 960 pixels width by 250 pixels height on your computer, or upload a graphic of any other size and crop it within this screen. (Ignore the references to the ‘Media Library’ for now because we will be coming on to that in Lesson 9).

To upload an image, click on the ‘Browse’ button and navigate to the image on your computer. Then click on ‘Open’ and ‘Upload’. If the image is not 960 x 250 pixels you will be given the opportunity to crop it here. Then scroll down and click on ‘Save Changes’. You might want to note here that you can upload a series of header graphics and tell WordPress to display a different header on each page. This could be a great idea if you want a particularly visual-looking website…

I uploaded a header graphic to my demo site and Figure 4.4 shows what the site now looks like:

Can you see how the site is beginning to take shape? A few simple tweaks will enable you to begin making your site look how you want.

I suggest that you experiment with all the options in this lesson to see how you can change the theme to make it look suitable for the sort of website you want to build. Anything you change here will be effective immediately but you can change things as often as you like, so nothing is cast in stone.

When you’ve finished customizing your settings, click on the ‘Close’ button in the top left and this will uncover the dashboard menu items down the left side of the screen.

I’m going to illustrate the rest of the tutorial by using this theme and it will make it easier for you to follow if I keep it as simple as this. And for the sake of further simplicity I have removed the header image above because it will make the illustrations in this tutorial easier to follow.

I will leave my demo website http://1.keepingchickens.net up on the Internet so that you can go in and browse it to see what it looks like after completing this tutorial. (Please note that I know little to nothing about actually keeping chickens so I ask you to cut me a bit of slack on the content…)

FAQ

I can’t decide what I want my website to look like! How can I get started?

One way of getting some creative ideas is simply to look at other websites. Find a website that you like the look of and have a good browse around. Note the color scheme and the fonts. Check out the header. See how the site navigation works. How does the site use pictures? Does the site have ads?

Note what you like (and don’t like) and see whether you can organize your ideas into a simple structure for your own site. Warning - do not copy other websites or you could be in trouble. And don’t get too complicated to begin with. As your site evolves you can add more bells and whistles but when you are starting out the KISS (‘Keep It Simple Stupid’) principle certainly applies!