Welcome to this WordPress beginner’s guide. You are about to join thousands of other webmasters who have used this book to build their own WordPress websites, from scratch, even if they were complete beginners!
Before we start, let’s make one thing quite clear. This book is deliberately short. That’s because I want to take you through the basics of building your own website in the quickest manner possible.
I want you to learn speedily without getting distracted by non-essentials or trivia. Sure, you can buy a 1,000-page bumper WordPress guide that will turn you into a world-authority(!) but it won’t help you get online any quicker.
What I will promise you is that, if you follow along the lessons in this book, do exactly as I tell you (yes, Ma’am!), step by step, then you’ll end up with your very own website that you built yourself, even if this is the first time you have ever ventured into the online world.
Why should I build my own website when I can easily get online for free?
Having your own web presence is now pretty much essential in today’s online world. Even teenagers have their own pages on sites such as Facebook and the many other social networks. But the problem is that these free site-building services can come and go, change the rules without notice, and impose restrictions. Some free services can shut your site down if they don’t approve of your content.
Many will clutter up your site with trashy ads and your free site can disappear overnight if the service goes bust or gets taken over. And they offer little or no technical support when you really need it.
So why should I build my own website on my own domain?
The answer is that, with your own privately registered domain and hosting account, YOU own and control the website, not anybody else. You can put whatever you like on your site (within the bounds of legality) and no-one can tell you otherwise. You are your own boss.
And, with your own website, you can build your own distinctive ‘brand’, whether you are a business or a community group, an individual, or whatever… You can make your site look and behave how you like, whether for e-commerce, or for publicity purposes, as an information resource – or just a personal blog.
Your domain becomes your very own exclusive web address, your own piece of online virtual ‘real estate’ that plays its part in publicizing your mission or message.
These days, if you don’t have your own online web presence, you are invisible. You can print your domain address on your business cards, add it to your email signature and quote in all your offline literature. Your own website on your own domain gives you identity, visibility and, indeed, status.
But don’t I need a professional web designer to make a good job of building a website?
No, definitely not! This used to be the case in the early days of the Internet because only a few tech-savvy geeks knew and understood the computer language (HTML) that translated your words and pictures into the code that browsers understand.
But as the technology has advanced, so have the tools to build websites become more accessible. WordPress is one of these tools and WordPress is the subject of this book.
What if I’m not a technical wizard – will I understand all the jargon about web-building?
With this book you don’t need to know any jargon or gobbledygook – I explain it all in plain English as we go along. As you use the system it will begin to click into place and you’ll understand what you need to know and what you don’t.
If you can use a word processor you can build your own WordPress website – it’s that simple – I promise!
How much will it cost to do it all myself?
Peanuts. The only thing you absolutely have to spend money on is web hosting and you can get this for a few dollars a month.
For less than $10 per month you can get your web hosting account from one of the top hosting companies on the planet.
Of course you can spend money on other tools and services if you want, but, for a simple website that you build yourself you really don’t need to spend any more money than that.
What Is WordPress?
WordPress is a powerful (and free!) package of software that sits in the background on your web server (the remote computer where your domain is hosted) and performs all the technical processing that delivers your content to your visitor on their local computer. Once WordPress is installed on your domain you don’t need to do anything to make it work. It just sits there and performs its magic entirely behind the scenes.
Once the hangout of hobbyists and bloggers, WordPress has now evolved into a powerful and sophisticated web platform that supports a host of features both for professional and do-it-yourself webmasters.
The terms ‘blog’ and ‘website’ are now effectively synonymous as far as our usage of WordPress is concerned. Pundits use the two terms interchangeably because the technology platform behind both is exactly the same.
WordPress is now actually used by some of the major players on the Internet as a complete Content Management System (CMS). Think CNN, The New York Times, About.com, the White House, US Post Office, and Ford Motors – they all make use of WordPress.
And, in addition to the experts, millions of ordinary people and small businesses around the world also use WordPress as their platform of choice to get a presence on the web.
What’s so special about WordPress?
WordPress is FREE and open-source . WordPress is stable and maintained by an army of experts. WordPress contains numerous behind-the-scenes features that make creating your own website a breeze. WordPress is wonderful, but it has a reputation for being difficult. This is, in part, due to the documentation.
WordPress was originally written by programmers, for programmers, and the instructions (‘codex’, as it’s termed) are often written in tech-speak and seem to assume that you know what they are talking about in the first place. This has improved in recent versions, but it can still be a challenge if you are not a fully paid-up techie.
I know all this. I’m a computer programmer myself. I actually am a techie (and proud of it!) but I can also write plain English. In this tutorial, I just concentrate on the basic essentials of WordPress and ignore all the complications that you don’t need to know when you’re first starting out.
How To Use This Tutorial
The best way to use this tutorial is to sit down at your PC with this book beside you and follow each lesson, step by step.
Because WordPress is now so sophisticated and flexible, it can sometimes be difficult for newcomers to see the wood from the trees. So I have broken this tutorial down into two levels:
- Quick Start Guide
- In-Depth Guide.
The Quick Start Guide, covering Lessons 1 – 8, is intended to get you up and running, building your own WordPress website, mostly using the default settings, and avoiding as many of the technicalities as possible.
When you have completed lessons 1 – 8 you will have a basic, working website that you can continue to build and use without any further tweaking. For many people, this is all they may ever need.
The In-Depth Guide takes you further than just the basics and introduces some of the more sophisticated and functional options that WordPress provides to help you make your website more efficient and unique. Lessons 9 – 20 take the basic website that you built in the Quick Start Guide and help you develop it on to become a feature-rich resource, tailored for your purposes.
Register Your Domain And Sign Up For Web Hosting
This is the first step to getting your own web presence. But if you already have a domain and hosting account you can skip this lesson and go on to Lesson 2.
As I’ve already stated, this is the first and only place in this tutorial where you will need to spend any money. Having a reliable company to host your website is an essential investment and it doesn’t cost mega-bucks. Once you have your hosting account set up you can forget all about the very complex communications technology needed to support your website because you’re paying somebody to provide it for you. And, I promise you, if you go with the web hosting company that I recommend, you will get a very good deal indeed.
If you have never done any of this before and you’re a bit intimidated by all the jargon and tech-speak, don’t panic. There is a mass of incomprehensible gobbledygook associated with web hosting and Internet technology but the good news is that you don’t need to understand nor care about most of it. Let me take you by the hand and I will explain just what you do need to know as we go along. To coin a cliché, it’s not rocket science. Trust me.
When you’ve completed this lesson you will have taken your first giant leap into the online world of web-building…
Choose Your Domain
OK, to begin, you need to decide on a domain. Your domain name is your unique web address and it’s what people will type into their browser to reach your website. So it’s a good idea to make it a name that’s easy to remember and easy to spell and that tells people what your website is all about. So what sort of domain name should you have?
It is better to have a domain like ‘keepingchickens.com’ rather than ‘xyz101.com’ because it spells out to the world precisely what your site is about. But your domain could be your own name or nickname, or your business name or maybe a slogan that describes your mission.
The .com extension is the most universally recognized suffix to a domain name, but you could also have .net or .org, the latter especially if you are a non-business organization. The .net extension can be handy if the .com version of your domain is already taken. And there’s also .us, .co, .biz, .info (and more) if you want to look different. Plus, there are the country-specific domain name extensions such as .uk, .au, .de – it’s your call.
You can register your chosen domain at the same time as you sign up for web hosting.
Sign Up For Web Hosting
The hosting company that I recommend for WordPress websites is Hostgator. They have an awesome reputation for reliability and customer service and they also offer very competitive pricing. And they have the added advantage.
that they provide a handy script for automatically installing WordPress on your domain.
This is really useful and will save you a lot of time.
Hostgator offers several hosting plans and you can sign up for periods of between 1 month and 3 years. If you sign up for 1 month you will pay your hosting fees monthly. If you sign up for 1 year you will pay your hosting fees annually. As you might expect, the longer you sign up for, the cheaper it becomes. And you can pay via credit/debit card or PayPal.
So, to set up your WordPress hosting with Hostgator, go to https://www.hostgator.com/ (Figure 1.1) and click on ‘View Web Hosting Plans’ Now you have to choose which hosting plan you want.
- The’ Hatchling’ is the very cheapest plan, allowing you to host just one domain on the service.
- The ‘Baby’ plan is essentially the same service as the Hatchling but with the Baby you can host an unlimited number of domains on the same account without paying any extra.
This is for you to decide. If you decide to start off with Hatchling, you can upgrade to Baby if you want to at some time in the future.
Hostgator has a habit of offering amazing discounts on their services and these may vary from time to time. But if you quote the coupon code ‘WORDPRESS2GO’ Hostgator will know that you are a reader of this book and they will give you the maximum possible discount available at the time!
So, choose either the ‘Hatchling’ or ‘Baby’ plan and click on ‘Order Now’. Enter your chosen domain name and don’t forget to enter WORDPRESS2GO as the coupon code.
Then follow the prompts to complete the purchase process. I recommend that you select privacy protection for your domain because this hides your identity from spammers.
You’ve got your domain and a hosting account. When you’ve signed up with Hostgator, check your email. You’ll receive an email from them with your account sign-in and password. It’s a good idea to keep this email (or even print it out) so that you have a record of your hosting details.
For security reasons Hostgator may want to telephone you after you register to verify that you are the person who opened the account, so please provide them with an easily accessible phone number. (Or they might ask you to call them).
Don’t worry; they won’t try to sell you anything: all they want is to know that the account was opened by you (or with your permission) and that you are a real person and not a robot. This step is essential before you can access your account and get started.
Install WordPress On Your Domain
What we’re going to do now is install the WordPress software on your domain and hosting account. The good news is that you only have to do this once, so just get through this step and you’re on your way to a great website!
I have given instructions here for Hostgator. If you have a hosting account with another provider, check whether they have the cPanel (stands for ‘control panel’) interface. If so, this set of instructions will likely apply to your host, too.
If you are with a different host and they don’t have cPanel, ask their Technical Support for instructions on how to install WordPress.
Install WordPress With ‘Quickinstall’
If you’re still with me, log in to Hostgator with the username and password that they emailed to you. You will be passed on to the cPanel interface (Figure 2.1). This is where you access all the resources and services that Hostgator provides for you.
Scroll down this page until you see the section headed ‘Software/Services’ (Figure 2.2).
Click on ‘QuickInstall’ and then on the ‘WordPress’ link under ‘Blog Software’.
Then click ‘Continue’ and you’ll see a screen like the one in Figure 2.3. Enter the name of your domain alongside ‘http://’ and then enter your email, the title of your website and your first and last name. This is the minimum information WordPress needs to create a website. You can change any of this information later. Then click ‘Install Now!’ and wait for the script to finish.
Then it’s done. WordPress is installed on your domain – easy peasy! Check your email to get your WordPress username and password.
If all this went well, congratulations – you can now skip to the next lesson.
Install WordPress With ‘Fantastico’
If you don’t have access to QuickInstall you can use the other tool called ‘Fantasico’ to install WordPress automatically. There are several versions of this tool so what you see may vary slightly from what I am showing you here, but most of it is self-explanatory.
First, click on the icon labeled ‘Fantastico’. You’ll see this screen in Figure 2.4:
Click on ‘WordPress’ in the left panel. Then on the next screen click ‘New Installation’.
Click on your domain name in the drop-down box and then enter your administrator-username and password (can be anything but remember what you typed!), nickname, email address, site name and description. You can change any of these entries later when you log in to your WordPress website. Then click on the ‘Install WordPress’ button. Wait for a short while and it’s done!
Check your email for a confirmation that WordPress has been installed on your domain and save this (or print it out) for security purposes.
Congratulations! When you’ve completed this lesson you have an empty WordPress website on your domain just waiting for you to make it your own!
How To Log In And Out Of WordPress
Now let’s deal with a few of the basics and begin with logging into and out of WordPress.
Whenever you want to work on your website you need to login into WordPress by typing the following into your browser:
http://yourdomain.com/wp-admin (where ‘yourdomain.com’ is your actual domain name. In my case this is keepingchickens.net)
You’ll see the familiar WordPress login screen as in Figure 3.1:
Enter the username and password that you were given when you installed WordPress and click ‘Log In’. It’s a good idea to bookmark this login because you’ll be using it a lot.
If you have a computer-generated password you can change this to something else after we get started. As soon as you feel familiar enough with the WordPress dashboard, go to Lesson 17 and that will explain how to change the log-in password.
When you first log in, you’ll be passed to the Dashboard (Figure 3.2) which is where all the action starts:
The top of the screen is all about ‘Jetpack’ which is one of WordPress’ latest gizmos which we are not going to use in this tutorial and which we’ll deactivate later. So ignore that for the time being.
The welcome messages shown on this screen vary from time so don’t worry if the body of your screen looks a little bit different from this.
If you see ‘Welcome to WordPress’ box, you can click ‘Dismiss’ in the top right corner of the box because we’re not going to use that, either.
What we are really interested in at this stage is the vertical menu down the left-hand side of the screen headed ‘Dashboard’, which is where all the behind-the-scenes action takes place.
We’re going to be using this set of dashboard drop-down menus to access the inner workings of WordPress to build a website. Whenever I say ‘from the dashboard…’ I will be directing you to click on one of these left-side menu items. I will explain each one that you need to use as we go along.
Just a quick digression here. The WordPress development team has an on-going mission to improve and expand its capabilities and they release new versions of the software at regular intervals.
So when you log into your site and see a message above the dashboard saying that a new release of WordPress is available, it’s OK to click to update the software.
Just follow the prompts and the update will overwrite the version you currently use. You
usually don’t need to do anything else but you should check out whether there are new features that you might take advantage of. There will typically be something announced in the body of the dashboard and you can also check out www.wordpress.org for news on the latest release.
And, if you are with Hostgator, they now run an automatic WordPress update whenever a new version is released. They don’t always do this immediately but if you don’t update your WordPress installation, Hostgator will do it behind the scenes by default.
View Your Website As The World Sees It
Anytime you want to see what your site currently looks like, from the dashboard, hover your mouse over the site title up in the top left corner of the screen and click ‘Visit Site’. The whole site will be displayed and you can view it as a visitor will see it. You will have to click the back button to get back to the dashboard.
Log Out Of WordPress
To log out of WordPress, look at the top right corner of the screen where it says ‘Howdy …’, hover your mouse over this and click ‘Log Out’ on the drop-down menu. WordPress logs you out of your website but leaves the log-on box on the screen in case you want to go back in.
What about all the other incomprehensible stuff I can see in the body of the dashboard screen?
You can ignore most of it for now, but when you get your website up and going you will find one or two of the panels quite useful. The ‘Right Now’ panel gives you an up-to-date summary of the status of your website and we’ll come to the QuickPress Panel in Lesson 7.
If you really don’t want to see the geeky ‘WordPress Blog’ or ‘Other WordPress News’ (or any other dashboard panel) then click on ‘Screen Options’ on the top right of the screen and uncheck these items. They will then disappear.
And, if you want, you can rearrange the panels on the dashboard by clicking and dragging them up and down.
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.
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.
First Steps To A Perfect Website
There’s one final job to do before you can start to create a website that is all your own and that’s to do a bit of housekeeping and configuration. You need to do this basic setting up so that you clear out the sample content and configure WordPress to work the way you want it.
At this stage don’t worry if the details look unfamiliar and puzzling, just follow along and do it and it will all make sense eventually, I promise.
This won’t take long and then we can get on with the interesting stuff.
Delete The Junk (Sample Content)
For every new installation, WordPress provides some sample content which you don’t really need and which we’re going to delete.
When you look at your site you’ll see that WordPress has provided the following items on the site:
- Recent comments: Mr WordPress on Hello world!
- Recent posts: Hello world!
- Sample Page
We’re going to delete all that and start again. So, from the dashboard, Click on ‘Comments’. You’ll see the comment displayed as in Figure 5.1:
Now, hover your mouse over ‘Mr WordPress’ and a command line will magically appear underneath the comment. Click on ‘Trash’ and, hey presto, the comment’s gone.
Next, from the dashboard, click ‘Posts’. You’ll see the ‘Hello world’ box appear. Again, hover your mouse over it and click ‘Trash’. That’s gone, too.
Finally, from the dashboard, click ‘Pages’. You’ll see ‘Sample Page’ displayed. Hover and trash that, too.
Finally, we’ll get rid of a few plugins that we don’t need.
From the dashboard, click on ‘Plugins’ and you’ll see an item for Jetpack. Click ‘Deactivate’ and that will make it disappear.
And do the same with ‘Hello Dolly’. Delete this plugin and delete all the files. (Hello Dolly is a left-over from the WordPress blogging days and is of no use to us).
We’ll deal more with Plugins in Lesson 15 but, for now, that’s all you need to do.
Configure WordPress To Behave How You Want
Finally, here’s where we check out a few settings to be sure that WordPress is going to behave as we want. Again, don’t worry if you don’t understand all of this – just do it…
From the dashboard, click on ‘Settings’, ‘Permalinks’. Under ‘Common Settings’ click the radio button ‘Post name’ if it is not already clicked. Then hit ‘Save Changes’.
Now you have to decide whether you want to allow your visitors to leave comments on your website. This has become a mixed blessing these days because the comments box has become a magnet for spammers and this can be a considerable nuisance. So, I advise you think carefully about whether you really do want to allow visitors to leave comments.
If you do allow visitors to add comments to your pages, by default, a comment box will automatically be displayed at the foot of each page. You have the option of moderating these comments but, if approved, the comments then become an integral part of your website.
To block comments, from the dashboard, go to ‘Settings’, ‘Discussion’ and uncheck ‘Allow people to post comments on new articles’. Then scroll down and click on ‘Save Changes’. That’s all you have to do on this page because now all the other settings will be ignored.
However, if you do want comments to appear on your site, check out Lesson 16 where I recommend how to deal with them.
Now you’ve got a completely empty WordPress website ready and waiting for you to populate with your own stuff. And the good news is that, once you have completed Lessons 1 – 5, you don’t need to any of this work ever again.
Add Your First WordPress Page
Now, before we begin this lesson, let me just give a brief outline of how you should use ‘Pages’ as opposed to ‘Posts’, which we will get into in Lesson 7.
Pages are intended to be the ‘static’ elements of your website, containing content that you always want to be available to your visitors and which, typically, are accessible via a tab on the horizontal menu bar. Think of this as the ‘backbone’ information. You would typically have an ‘About Us’ page, possibly a ‘Welcome’ page, preferably a ‘Contact Us’ page and, along with that, a ‘Privacy’ page. Pages do not change very much and you may only need one or two pages.
Most serious websites will have an ‘About’ page and I recommend that you, too, put up an ‘About’ page, because it will enhance the credibility of your site.
Add An ‘About’ Page
Log in to your WordPress website and from the dashboard, click on ‘Pages’, ‘Add New’.
Figure 6.1 shows what you’ll see:
Enter ‘About Us’ (or something equivalent) in the top blank box where you can see the cursor flashing. Then, in the blank box headed by the ‘Visual’ tab, type some text that describes you or your website or your business. Don’t copy and paste the text from somewhere else just yet (I’ll tell you why later in this lesson) – just manually type in some text so that you can see how this all hangs together. As you type you’ll see that the words wrap round, just like a word processor. If you hit ‘Enter’, you’ll get a new paragraph. Just keep typing until you’ve got enough text to play around with. Don’t worry about how perfect it is, you can edit the page later.
After you’ve entered a bit of text it’s a good idea to click on ‘Save Draft’. This is handy when you are setting up a complicated page because it enables you to save your work when you get something right and return to the last draft if (when!) you foul it up at a later stage. I encourage you to use this feature, especially while you are learning. A page saved only in draft is not yet visible to anyone except you.
Now look at the icons on the toolbar above the text, as shown in Figure 6.2. You’ll probably recognize them from other regular text-processing programs that you use.
You can see bold, italic, strikeout, bullets, etc. If two rows of icons don’t show, click on the far right icon on the top row and the second row will toggle into view.
The best way to find out what functions these icons represent is to hover your mouse over each of them and then experiment with them. If you hover your mouse over an icon you’ll see an explanation of what its purpose is.
The way these (mostly) work is that you select some text, click on an icon and you’ll see that change take place. In most cases the operation of these icons is self-explanatory and so I won’t include a lot of unnecessary detail here but will let you play around and explore them for yourself. No changes will be made to your website until you click on ‘Save Draft’ or ‘Publish’.
I encourage you to try out the blockquote, spellchecker and links.
To add a link to text in a web page, select a few words in your text where you want the link to appear. You will notice that the little ‘chain’ icon becomes live and, when you click on that, a small pop-up dialogue will appear prompting you to enter the target URL of the link. See Figure 6.3:
The text you selected then becomes a ‘hot link’ which, when the user clicks on it, will take them to another page, either within your website or to another site.
To see the results of your changes, click on the ‘Preview’ button over on the top right of the page. You’ll then see the web page displayed exactly how it will look on your website.
This ‘preview’ view will usually open in a new tab in your browser. When you’ve checked the page over you can close the tab and return to the page where you set it up.
Now, before you publish your page, there is one more feature that you need to check out.
The Twenty Twelve theme offers you three different templates for your page layout:
- Front Page
- Full-width No Sidebar
These are accessible from the ‘Page Attributes’, ‘Template’ drop-down box. Try these out one by one and choose the template you want for this page.
When the page is formatted as you want it, you can click ‘Publish’ and the page will be added to your site for the world to see. You should also notice that WordPress has magically added the page tab to the menu bar above your site header, which is where it should belong.
I now encourage you to think about and add as many pages as relevant to your site. As you add each page you are gradually filling out your site and making it your own!
If your website will consist of a small, finite number of pages then you might be tempted to leave it at that and not make use of posts. But that could severely limit the effectiveness of your website, particularly in relation to search engine optimization (SEO). Posts have a number of very useful features that Pages don’t have.
Before we go on to the next lesson, here’s the useful tip I promised you to help when copying and pasting text:
How To Copy And Paste Text The Right Way
As you can imagine, it is often easier and quicker to type up your website text offline, in a word-processor such as Microsoft Word or a text-processor like NotePad. But, be aware, just copying and pasting right into the text box on the WordPress page can have unintended consequences.
This is because, when you copy text from your computer to your clipboard, your operating system will often copy not only the text but also the formatting (including fonts) as well. Microsoft Word contains a lot of complicated formatting behind the scenes and this can confuse WordPress because it wants to format the text according to the theme you have chosen and copying unwanted formatting can make it appear all screwy.
So, type up your text offline however you want and copy it to your clipboard as usual. Then, when you get into your WordPress page, click on one of the two little ‘T’ or ‘W’ icons in the toolbar (‘Paste as Plain Text’ or ‘Paste From Word’) and a pop-up window will appear:
Paste your text into this box, click ‘Insert’ and the text will drop in just like you typed it. This feature applies both to both Pages and Posts.
And there’s one more feature that you might like to take advantage of: Parent and Child pages.
Making Use Of Parent Pages And Child Pages
If you have already published at least one page you will see that, under ‘Page Attributes’, you have the option of selecting a previously published page to be the parent of the one you are currently adding or editing. This means that you can have a hierarchy of pages that you can nest to several levels. If you are planning on building a website with many pages ranging over a wide range of topics this is a feature you might want to use. Parent/child pages appear as such in drop-down navigation menus and can be an easy way of creating a hierarchical structure to steer users around your site.
I want to stop anyone from seeing my website while I’m still setting it up. How do I do that?
As a webmaster, you need to be aware that the prospective audience for your website is both human and robot (search engines). In practice, your website will get few, if any, visitors in the early days and, because of that, I wouldn’t fret too much about who can see what.
Ultimately, you will want both humans and robots to flock to your website but, if you really do want to block both of these types until you are ready, you can create an ‘Under Construction’ page. This page displays to visitors while you get on with setting up the site behind the scenes.
Create An ‘Under Construction’ Page
The easiest way to do this is to use a plugin called ‘Under Construction’. I deal with how to add plugins in Lesson 15, so come back here when you’ve completed that lesson.
After you’ve installed the plugin, from the dashboard, click ‘Settings’, ‘Under Construction’. Set ‘Activate or Deactivate’ to ‘on’, and leave all the other settings as default. Then click ‘Save Changes’. This now places an Under Construction page between you and your visitors. You won’t be able to see this page while you are logged into your website yourself so log out and just view the domain URL if you want to see what it looks like.
To prevent the search engines from looking at your setting up efforts, from the dashboard, go to ‘Settings’, ‘Reading’ and check the box labeled ‘Discourage search engines from indexing this site’. Then click ‘Save Changes’. This will tell Google (and the other search engines) that you don’t want them to ‘crawl’ your site to put it in their search results – yet.
And don’t forget to undo all of this when you are ready to launch your website! What if I want to change something on a page after I’ve published it?
Simple. From the dashboard, go to ‘Pages’, ‘All Pages’, and you’ll see all the pages you’ve already published, listed out in date order. Hover your mouse over the page you want to edit and click on the ‘Edit’ command that pops up. This will take you back to the original page where you can make whatever changes what you want. Then click ‘Update’. That’s all you have to do. You can edit a page as often as you like.
Add Your First WordPress Post
You have now added one or more Pages to your website and these provide the static, background information to tell the world about you and your website. Now it’s time to start adding content in the form of Posts, which is what will become a more on-going process as you build your website over time.
You will, I hope, be relieved to hear that adding posts is almost the same as adding pages. So I’m not going to repeat all the stuff in Lesson 6. To add a post, just follow the same instructions, substituting the word ‘post’ for the word ‘page’ and you’ll get there.
The Essential Difference Between Posts And Pages
What I’m going to do in this lesson is point out a few of the differences between posts and pages which might help you make up your mind how the two different types of entries can contribute to your website.
Posts are designed to be a more chronological, dynamic way to present content to your visitors. In the olden days, when WordPress was used primarily for blogging, each post would become the latest in the blogger’s stream of news/comments/events. (…’Emily laid one egg today but dear old Jane seems to be getting broody again’…) The latest post would occupy the top position on the page and earlier posts would scroll down beneath it.
Suppose you wanted to have a website where you displayed topical information, or some sort of journal, or news, you’d want to make use of posts. Typically, a website that uses posts also has some static pages (as above) but the Post content includes a series of entries that you add to on a regular basis and which adds further, timely content to the website.
But the real power of Posts is that they also have handy features called ‘categories’ and ‘tags’ which I will now explain.
How To Make Use Of Categories And Tags
As you will learn, posts don’t have to appear on the front page of your website (see Lesson 13). You could have your ‘Welcome’ page as the front page and, in your sidebar,
you could have a series of navigation links filtering your posts by category.
Categories are a way to classify your content into topics so that your visitors can access all the posts you have written on a particular subject. To take my chicken site as an example, I could write a number of posts on broad categories such as ‘chicken food’, ‘chicken houses’, ‘breeds of chicken’ etc.
As I write each post, I would choose one or more appropriate categories for the subject matter. This would then automatically provide a filter of all the posts in the same category so that my visitors can easily find their way through the site without having to read posts on topics that don’t interest them.
If you know what categories you are going to use you can set them up in advance. From the dashboard, go to ‘Posts’, ‘Categories’ and add them there. But you can also add categories as you go by adding a new category at the time you add a post, as shown in Figure 7.1.
Tags are a looser way of categorizing your material that will help the search engines associate certain keywords with your posts. Every time you add a post you should add two or three tags which contain keywords or phrases to help the search engines classify your site. And one way to use the tags you have coded is to have a ‘tag cloud’ in your sidebar. I’ll show you how to do that in the next lesson.
Before I leave the subject of posts, let me share another neat feature of WordPress: the ability to pre- and post-date entries.
How To Go Back (Or Forward) In Time
If you simply want your post to be dated at the date and time you published it then just leave it. But if you want to backdate an entry, you can change the date of publication to a prior date.
Just above the ‘Publish’ button, where it says ‘Publish immediately’, click on ‘Edit’ and you can change the date and time to whatever you want. Change the date/time as shown in Figure 7.2 and click on ‘OK’. That’s the date/time that will appear on your website.
And, hey, you can even schedule WordPress to publish a post at some date/time in the future. Just change the date (as in Figure 7.2) to a date in the future, click ‘OK’ and ‘Schedule’. WordPress will hold the post until that date/time occurs and then it will automatically publish it as if you had hit the button yourself. Magic!
As we have seen, there is a shortcut you can use to add new posts. From the dashboard, look at the box marked ‘QuickPress’, as shown in Figure 7.3.
You can quickly add a new post with title, text, tags and even a picture and publish this immediately.
So, now you can begin adding Posts to your website, complete with categories and tags, continuing to add them until you have the range of content you need to display a full and rich website.
Next, we’re going into the final lesson of the Quick Start Guide where I’ll show you how to use Widgets to enhance your WordPress website.
All About Widgets
Now that you have your website loaded up with some content, it’s time to add a few refinements to make your site appear useful and well-designed. You can do this by inserting widgets in the sidebar of your website.
What are ‘widgets’? Widgets are very handy little chunks of functionality that perform common tasks. You, the webmaster, choose which widgets you want to use to perform additional tasks to improve your website’s appearance and performance.
Examples of widgets include:
- List of categories in your website
- Links to your latest posts
- Custom menus
All these widgets are clickable hotlinks that guide your visitors around your website.
As you can see in Figure 8.1, I have put into the sidebar of keepingchickens.net the Categories, Recent Posts, Archives and Tag Cloud widgets. It’s up to you what you use on your site because, as you can see, there are a lot of widgets to choose from.
One of the primary functions of widgets is to provide different ways of navigating your site. But you can also add text widgets that not only display text but which can contain computer code. We’ll cover these text widgets in Lesson 11.
The number and position of the widgets you can use will depend on the theme you are using. The Twenty Twelve theme allows you to insert widgets into your sidebar and, optionally, in up to two footer areas across the bottom of a static front page.
Other themes may allow you to put widgets in your header area or at the bottom of individual pages.
Here’s how to set up widgets:
From the dashboard, click on ‘Appearance’, ‘Widgets’. The ‘Widgets’ screen is shown in Figure 8.2:
Add Some Sidebar Widgets
In the previous lesson we discussed using categories when writing posts. You can group all your posts into categories by placing a ‘Categories’ widget in your sidebar. When a visitor clicks on a category they will be shown only your latest posts in this category – they won’t see posts in other categories that do not interest them.
The really neat thing about this widget is that it all works completely automatically. You don’t have to do anything except to code your posts with the required category: WordPress takes care of all the sorting and filtering for you and the widget will update automatically.
I encourage you to experiment for yourself and see what the widgets fit in with your ideas for your own site.
To insert a widget into the sidebar simply click and drag it from the main body of the screen to the ‘Main Sidebar’ box over on the right. When you do this, a ‘Save’ button will pop up and all you have to do is click that and you’re done. You will see that there are often options with widgets and you can usually insert your own titles. When you have saved a widget, click ‘Close’.
If you want to rearrange the order of the widgets in the sidebar simply drag and drop them, up and down, until you have them as you want. You don’t even need to save the sidebar: it stays as you last left it!
Please note that widgets won’t work unless you have already set up the content that you want to display. For example, a ‘Recent Posts’ widget won’t display anything until you have actually added some posts to your website.
The easiest way for you to find out what widgets can do for your website it to experiment. Play around by clicking and dragging widgets into the Sidebar and Footer Areas and see how it looks. You can add and delete widgets as much as you wish.
Delete Unwanted Widgets
If you want to delete a widget from your sidebar, simply click on it and then click ‘Delete’ and it will disappear. You can always add the widget back in again if you change your mind.
Can I have different sidebar widgets on every page?
By default, WordPress will display the same widgets on the sidebar of every post or page. There is a good reason for this: it provides a consistent visual ‘map’ of your site to your visitors so that they can more easily find their way around regardless of where they browse.
But some themes do enable you to design more than one sidebar and then choose how and when to display them, so this is not cast in stone.
If your theme doesn’t provide this and you have a good reason for wanting to display different widgets in the sidebar on different pages of your website, there is a useful plugin called ‘Custom Sidebars’ that you can use to achieve this. Plugins are covered in Lesson 15.
Add Images To Your WordPress Website
WordPress has some very powerful and flexible ways of handling media on a website and, in this lesson, we are going to look at several ways of doing so First, some background information. WordPress provides a folder within your website called the ‘Media Library’ (Figure 9.1) which can contain images, documents, downloadable files etc. This is the depository of all of the images (and other media) that you have uploaded for use in your website.
Media files are labeled either ‘Attached’ or ‘Unattached’, depending on whether or not you have actually used the media by linking to it from one of your posts or pages.
Adding a picture into a post or page to illustrate your text is one way of making your webpage look attractive and relevant. If you upload the picture when adding a post or page WordPress automatically loads it into the Media Library and it becomes an ‘attached’ image.
If you want to add an image for use later, you can upload it directly into the Media Library as an ‘unattached’ image and then call it whenever you want it.
To add an image to a page or post, you need to have the image file stored on your computer as a JPEG, GIF or PNG file type, sized in pixels that will fit on your page and generally less than 8 megabytes in size.
WordPress is quite flexible in handling images and will happily resize your picture to fit the available space in a post or page. But it’s worth just checking out the default settings for image sizes because your website will look more professional if you present your images in consistent shapes and sizes.
To do this, from the dashboard, go to ‘Settings’, ‘Media’ (Figure 9.2) and check out the pixel dimensions that WordPress will use when displaying your pictures. The standard ‘medium’ size is maximum 300 pixels height and width. If your theme is wider than about 1000 pixels you may want to increase this to 400 or 500 pixels to display your images larger.
If you change the Media Settings be aware that the settings will apply only to images you insert after this: WordPress won’t retrospectively apply the settings to any images you have already inserted on posts or pages.
Add A Picture To A Post Or Page
To add an image to a post or page, first click on the point in your text where you want the image to appear. This can be anywhere within the text: right at the beginning, or in the middle of a text block or after the end. The image will be embedded exactly at the point you select here.
Then click on the button labeled ‘Add Media’. A pop-up box appears, prompting you to locate the file you want to upload. You’ll see that there are two tabs, ‘Upload Files’ and ‘Media Library’. Click on ‘Upload Files’ if this is not already displayed.
As you can see from Figure 9.3, you can actually drag and drop the file(s) you want to insert but I’ll demonstrate the alternative, which is to upload from your computer.
Click on ‘Select Files’ and navigate to where you have stored the image on your computer. Click on the file you want to upload, and then click ‘Open’. A screen as in Figure 9.4 appears:
Here you can see that the screen displays all the images I have already uploaded to my Media Library, with the latest one checked on the left and the ‘Attachment Details’ for the latest image on the right.
Now you can enter the title of the image, optionally a caption, alt text (alternative text to display on devices that don’t display images) and description. Entering descriptive details in these boxes will help the search engines index and classify your images and relate them to the text that you enter in your posts and pages.
Beneath this is the ‘Attachment Display Settings’. Here you can specify the alignment of the image – left, right, center or none. I encourage you to experiment with alignments because you can get some very striking effects with the right image in the right place.
You will also see that there is a ‘Link To’ box. This is where the visitor would be taken if they clicked on the image. You can change this link to anything you like: if this was a product you were selling you might replace this with a link to your order page.
If you leave the ‘Link URL’ unchanged and the visitor clicks on the image they will see a full-pixel version of the image on their screen. If you don’t want the image to be a link then click on ‘None’.
Finally, you can choose the size of the image within the post or page. Your options here are determined by the settings you specified earlier in this lesson. Again, experiment with this to get the effects that you want for your website.
Then click on ‘Insert into Post’ and Figure 9.5 shows what the page will look like:
Add A Media File To The Media Library
Sometimes you will want to add an image (or some other media) to be displayed somewhere on your website other than a post or a page. In that case, you need to upload it to the Media Library before you can use it.
For example, I have a graphic file on my computer that is actually a little banner that I want to place in my sidebar to advertise a product that I want to promote on my website. I will cover how get the image into the sidebar in Lesson 11 but here I’ll briefly show you how to upload the image to the Media Library:
From the dashboard, click on ‘Media’ / ‘Add New’.
Click on ‘Select Files’ and upload the image as before.
As before, it is good practice to enter a title, alternate text and description, which will help with SEO (see Lesson 18) then click on ‘Save all changes’. That’s it. The file is now stored on your WordPress Media Library, ready for when you need it.
Add A Featured Image
This is a relatively new WordPress facility which lets you associate an image with a post or page. At the time of writing, featured images are not used in every theme and different themes use them in different ways. However, Twenty Twelve does use featured images and this is how to use them:
Essentially, the featured image facility in Twenty Twelve enables you to insert an image above the post/page title and below the header image (if present) and site title. If you do not have a header image for your site and you upload a similar-sized image (960px x 250px) as a featured image to a post or page, it will effectively become the header for that post/page only.
In the screen where you add or update a post or page, you will see at the bottom of the right-hand menu a box labeled ‘Featured Image’. Click ‘Set featured image’ and you will be taken to a screen similar to the ones illustrated above, where you can either upload an image or use one from your Media Library. Click on ‘Set featured image’ and you will see the image thumbnail appear on your post/page. That’s all – save/update your post/page but do not insert the same image into your post/page or it will display twice!
When you view the page you will see your image at the top.
Add A Picture Gallery
If you are a photographer or an artist or anyone who wants to display a lot of pictures, you might want to add a gallery of pictures to a page or post. A ‘gallery’ is a way of displaying thumbnails of images on a page in a rectangular grid and when a visitor clicks on an image they can see it full size.
In this case, it is preferable to prepare the images first on your own computer, so that they are all the same orientation and size (in pixel dimensions). That way the gallery display will look professional.
Before adding a gallery you should decide what size you want to display thumbnail images. By default, the thumbnails will be 150 pixels x 150 pixels. But you can change this by going from the dashboard to ‘Settings’, ‘Media’. This will display the Media Settings screen and you can change the dimensions of how WordPress will display thumbnail images on your site.
Then, from the page or post where you want to display the gallery, click on the ‘Add Media’ button as before, but this time select multiple files to upload. You will see WordPress upload them one at a time to the Media Library.
Make sure that all the pictures you want are checked and then click ‘Create Gallery’ over on the top left of the screen. Then click ‘Create a new gallery’ in the bottom right of the box, then ‘Insert Gallery’. The big blue gallery icon will be displayed. You can add text before or after this icon.
Then Save or Publish your post or page and you can then view the page to see the gallery, as in Figure 9.6:
As you can imagine from what you’ve seen, there are actually a great many options for displaying images and other media in WordPress, some of which are rather specialized and would be of interest to people like photographers and graphic artists etc.
Also, there are a number of very fancy plugins you can use to display images in a slideshow or gallery that go way beyond the basic facilities shown here. And some themes offer a ‘slider’ function that can include some very dramatic effects.