Using WordPress to Build a Website
In this course you will learn how to;
Create and manage a test server
Install the WordPress software
Change it’s function from a blog to a website
Configure a WordPress site
Add pages and content
Add dynamic content via widgets
Install themes to enhance the look of your website
Create a custom contact form

We will demonstrate how to create and manage a test server to
install and configure a WordPress site on a local PC. For the
purposes of this course all the demonstrations will be carried
out on this test server, although the lessons could be
completed on a fully functioning web server.
In the next lesson we will download and install the XAMPP
software. This will be used to create a test web server on
which we will host our WordPress test site.

XAMPP INSTALL
In this tutorial you will use XAMPP to create a test web
server, which will be used to host the WordPress test site.
XAMPP is an easy to install Apache distribution containing
MySQL, PHP and Perl. XAMPP is really very easy to install
and to use – just download, extract and start. At the moment
there are four XAMPP distributions:

XAMPP for Linux
XAMPP for Windows
XAMPP for Mac OS X
XAMPP for Solaris
For the purposes of this course, this installation will be carried
out on a Windows7 pc. If you are installing on Windows7
please note the User Access Control needs to be deactivated,
as this can limit the functionality of XAMPP. Installation
instructions for all other Operating Systems can be found at
http://www.apachefriends.org/en/xampp.html, where you will
also go to download the XAMPP software. Once the
installation of XAMPP is completed the rest of the course will
be carried out using a web browser (Firefox) so will be
identical for all operating systems.
Go to http://www.apachefriends.org/en/xampp-windows.html
and scroll down the page and find the Windows installer.
Click the installer to start the download. The download
continues. When the download has completed Double click
the installer package. Click Run. Select Language and click
OK. Click OK. Click Next. Select Destination folder and click
Next. Select Install Apache and MYSQL as service. This
will enable Apache and MYSQL to start with the operating
system automatically, after shutdowns or reboots. Click
Install. The installation continues this may take sometime.
Click Finish to complete the installation.
Apache requires port 80, if this is in use the port can be
changed. This will be shown later in the course. Installer
checks necessary ports:
Apache requires port 80
MYSQL requires port 3306
Click Allow access for Windows Firewall, note this for
private networks. The MYSQL service is started. Click OK to
continue. Click Yes to start the XAMPP Control Panel.
XAMPP control panel shows both Apache and MYSQL
running.
In a web browser type localhost. XAMPP splash screen
appears select language. XAMPP Welcome screen confirms
installation was successful.
In the next lesson we will perform some configuration on the
XAMPP install, in order to make it more secure. We will also
configure a blank database for our WordPress installation.

XAMPP Configuration
XAMPP is not meant for developers in a development
environment not production use. XAMPP is configured to be
as open as possible and in a production environment it could
be problematic. In this lesson we will look at some
configuration options to make XAMPP more secure. We will
also create an empty database which will be required later for
the WordPress software install.

In a web browser type localhost, Click PHPinfo. Make a note
of the loaded configuration file in case you need to make any
changes to the php file, in the future. Select Security. Click
http://localhost/security/xamppsecurity.php We need to assign
a password for MYSQL to secure all database access. Fill in
password and repeat then click Password changing. Password
change was successful. We now need to assign a user and
password for the Xampp directory and click Make safe the
XAMPP directory. The XAMPP directory is now protected.

PHPMYADMIN
Now we have secured both the XAMPP folder and assigned a
password for MYSQL database access. We will now use
phpMyAdmin to create a new blank database for the
WordPress install, this database is considered to be blank
because we will not be creating any tables inside this database.
All the tables and initial data will be created automatically by
the installer.
In a web browser type localhost, Type the username and
password. Click OK. Click phpMyAdmin. Type the username
and password. Click Go. Click Databases. In the Create new
database box type WordPress, you can give this database any
name just remember the name for the later WordPress install.
Click Create. Database has been created.
Now logout. For security never leave PHPMYADMIN
logged in as anyone can access your databases.

XAMPP Folder
We will now look at the actual XAMPP folder, in this folder
are the sub folders for the XAMPP install. These include the
Apache folder for the server configuration, if for example
during the XAMPP setup Apache server cannot started due to
port 80 being used, you can specify a different port for
Apache to run on. For example we could attach port 8080 to
Apache, if you do change the default port (80), you would
need to specify that port when opening the page in a web
browser example
http://localhost:8080
http://localhost:8080/wordpress
Also in the XAMPP folder is the htdocs folder which is the
default home folder for the Apache server, we will later place
our downloaded WordPress files in this folder.
Open the XAMPP folder. Open the Apache folder. Open the
conf folder. Double click httpd.conf. Select select a program
from a list of installed programs and click OK. Select Notepad
and click OK. Scroll down to the Listen entries. File shows
Apache is listening for requests on it’s default port 80. If you
need to alter this port edit the port number. Remember to do
file and save and restart Apache server if it is running, you can
do this from the XAMPP control panel.
Open the htdocs folder. This is the home folder for Apache,
where we will place the WordPress folder in the next lesson.
In the next lesson we will download the WordPress software
and place it in the Htdocs folder. We will then perform the
installation of WordPress using the blank database created in
this lesson.

WordPress Install
In this lesson we will download and install WordPress on the
test server, we created in the previous lessons. This could also
be applied to an online hosted server, where you would need
to upload the WordPress software to your website home
folder. If your chosen web host offers a one click script
installer parts of this lesson will still be of interest. One click
installers will normally set up the WordPress database, begin
the installation automatically and configure the server to run
WordPress.

To start the lesson open a web browser and go to http://
www.wordpress.org
On the WordPress home page click download WordPress this
will be the latest version available. Click Download
WordPress. Click OK to save the file. The download has
completed the file now needs to be decompressed. Right click
the file. Select Extract to .. Open the decompressed folder.
Right click the WordPress folder. Click Copy. Right click
anywhere in the XAMPP>htdocs folder and click Paste. The
WordPress folder will be copied into the htdocs folder. The
WordPress folder has been copied, we now need to open a
web browser to start the WordPress install. Type in localhost/
wordpress and press enter. Click Create a Configuration file.
Configuration file has been created click Let’s Go to continue.
Fill in the details for the MySQL database connection.
Username, Password and click Submit. Click Run the Install.
Fill in Site Title. Fill in Password. Email address. Click Install
WordPress. Install complete click Log in.
Fill in your username and password. Click Log in. Log in will
take you to the back end of your website to see how the new
site looks right click the site title. Click Open link in New Tab.
Click the new tab. The front end of the new site, it is beneficial
to have the site open in two tabs Front end and back end. As
you can switch from one to the other to see how changes
effect your site in real time.
In the next lesson we will look at the components of the sites
back end (the dashboard).

WordPress Dashboard
In this lesson we will look at the components that make up the
dashboard of the sites backend. These components are used to
manage the sites content, pages and configuration.

Right Now
Various stats, such as how many posts, pages and comments
do you have on your site? The version of WordPress and the
theme you are using.
Recent Comments
If you enable comments on your pages and blog posts, then
this will list recent comments and allow you to quickly
approve them.
Incoming Links
Sites that are linking to your site?
Quickpress
If your website is a blog, you can quickly add a post here.
Recent Drafts
If you’ve been working on posts or pages, you can quickly
return to recent draft versions.
WordPress Blog
Information and news from the world of WordPress
Other WordPress News
Further WordPress news.
Plugins
These provide additional features and functionality to your
site.
Dashboard Menu
Updates for WordPress, themes and Plugins will appear
automatically listed here. We will deal with how to perform
updates in a later lesson.
Posts Menu
Displays all posts from here you can add new posts, add
categories and tags. Categories and tags can be used to filter
searches on your site.
Media Menu
Displays all the media available on your website that is stored
in your library. Media can be images, videos or sounds.
Links Menu
A set of links can displayed on your website and this menu
item will display those already created.
Pages Menu
Displays all pages on your site, published or drafts and where
you add new pages.
Comments Menu
When you access the list of comments you can see all
comments, pending comments (i.e. those not yet live),
approved comments, spam and trashed comments.
Appearance Menu
This menu item will be explained in a later lesson, for now
just understand that this is used to control the look of the sites
front end.
Plugins Menu
Plugins allow you to extend the functionality of WordPress.
This will be covered in a later lesson. As with the Upgrades,
you are also shown here if there are any upgrades available.
Users Menu
Shows all site users, if you permit people to sign up to your
site they will displayed here and their role. From here you can
also access From here you can also access Your Profile where
you can change your admin password if needed.
Tools Menu
All available tools some plugins may add to this menu.
Settings Menu
Shows all site settings, we will cover most of this in later
lessons. From here you can change items for example site title,
change from blog to website, whether to allow comments on
your site. Change date format and permalink settings.
In the next lesson we will convert WordPress from its default
blog format to a website. We will then create a static front page
and set this as the sites home page. After this we will remove
the default pages and comments turning the site from the
default blog format to a website.

Blog to Website
In this lesson we will convert WordPress from its default blog
format to a website. Firstly we will log into the site’s backend,
change the default setting of allowing comments. We will then
create a static front page and set this as the sites home page.
After this we will remove the default pages and comments
turning the site from the default blog format to a website, you
can add the blog format back later by specifying a page for
posts.

Click Settings. Click Discussion. Uncheck Allow people to
post comments on new articles. Scroll down the page. Click
Save Changes.
Click Pages. Click Add New. Enter title Welcome. Click
Publish. Now we have a Welcome page, click Settings. Click
Reading. Select A static page. Click Front Page. Select
Welcome page. Click Save Changes. Right Click Site Title.
Click Open Link in a New Tab. The sites new home page,
note although the page was titled Welcome it is in the menu as
Home. Next we need to remove the default Sample Page and
Posts, return to the site’s backend.
Click Pages, move mouse cursor onto sample page. Click
Pages, move mouse cursor onto sample page. Click Trash.
Click Posts. Move mouse cursor onto Hello world. Click
Trash. Now we have removed the default Sample Page and
Posts, return to the site’s frontend. The sites home page, with
just the home page in the menu.
In the next lesson we will look at installing a new theme to
change the appearance of the website.

Themes
In this lesson we will look at changing from the installed
default WordPress theme too a new theme. Changing and
adding themes can be done in two ways, 1: using the built in
theme editor. 2: Downloading a theme from the internet and
installing it.

WordPress themes are widely available on the internet both
free and paid for (Premium) these themes cover a wide variety
of features and layouts. The themes we will use during this
lesson will be the Weaver theme and the Greentech theme
(which was downloaded from the internet). Downloaded
themes should be in a Zip format, WordPress will
automatically uncompress all the files during the install
process. Firstly we need to login to our site.
Click Appearance. Here we can see the current and any
available themes. Click Install Themes. Type Weaver in the
search box. Click Search. Click Install. Click Install Now. The
Weaver theme has been installed, Click Preview.
Click Activate. Weaver is now the current theme.
T

WordPress themes are widely available on the internet both
free and paid for (Premium) these themes cover a wide variety
of features and layouts. The themes we will use during this
lesson will be the Weaver theme and the Greentech theme
(which was downloaded from the internet). Downloaded
themes should be in a Zip format, WordPress will
automatically uncompress all the files during the install
process. Firstly we need to login to our site.
Click Appearance. Here we can see the current and any
available themes. Click Install Themes. Type Weaver in the
search box. Click Search. Click Install. Click Install Now. The
Weaver theme has been installed, Click Preview.
Click Activate. Weaver is now the current theme.

WordPress themes are widely available on the internet both
free and paid for (Premium) these themes cover a wide variety
of features and layouts. The themes we will use during this
lesson will be the Weaver theme and the Greentech theme
(which was downloaded from the internet). Downloaded
themes should be in a Zip format, WordPress will
automatically uncompress all the files during the install
process. Firstly we need to login to our site.
Click Appearance. Here we can see the current and any
available themes. Click Install Themes. Type Weaver in the
search box. Click Search. Click Install. Click Install Now. The
Weaver theme has been installed, Click Preview.
Click Activate. Weaver is now the current theme.
T

Themes
We have changed the site theme from the default to the weaver
theme. We will now install the greentech theme which was
downloaded earlier and stored on the local pc. To do this we
will again use the theme editor but this time instead of using
the search facility, we will use the upload facility. The majority
of themes you can download will be small zip files which can
be handled by the upload facility.
Click Install Themes. Click Upload. Click Browse. Select
greentech. Click Open. Click Install Now. Theme has installed
click Preview.
Site Preview click X to close this view. Click Activate.
Greentech is now the current theme. Note the admin toolbar at
the top of the site, this is only visible to the admin when you
are logged in. Now return to the site’s backend.
We will now change the site theme back to Weaver click the
weaver preview. Click Activate. Weaver is now the current
theme.
In this lesson we have looked at two methods of installing
themes on your WordPress site. Nearly all themes that you
will install have options to customise that theme built in, so
with these options you can make your site truly unique.
Customising themes will be covered later in the course. In the
next lesson we will add pages to the site and order those pages
on the menu.

Adding Pages
In this lesson we will look at adding pages to the site, we will
also look at ordering those pages on the menu. Although in a
previous lesson we added the welcome (home) page, we will
look at the page options the Weaver theme offers and adding
pages to a dropdown menu. Firstly we need to login to the
site’s backend.

Click Pages. Click Add New. Enter Page Title. Title About Us
entered, before we click Publish lets look at the page attributes.
Parent drop down we will look at later. Template drop down
gives us options for different page layouts from the default 1
sidebar right hand side through sidebar left or right. To 1
column no sidebar a good option for gallery page allows full
page width for images. For more detailed descriptions look in
appearance> weaver 2010>help
Order (default is 0) is where the page appears in the menu, the
home page will always appear first. Although we are about to
publish this page with an Order of 0 it will not move the home
page. This may not be true of all templates so always check the
site after you publish a new page. Click Publish and go to the
site’s front page to view changes.
The new page appears on the menu in the expected order. Note
you may need to refresh the browser to update the view. Now
return to the backend to add more pages. Click Add New.
Enter Page Title. Change the page Order to 1, and click
Publish. This page we will be assigned as a child of an
existing page and create a dropdown menu. Enter Page Title
and click Parent dropdown. Select Services. Note we have not
changed the order as this will be the first item in the new
menu. Click Publish.
Click Services. The new page has been added to the dropdown
menu. We are about to add this new page, we will not change
the order for this page. Click Publish then view the site. Note
the new page is placed on the menu in the 0 position
alphabetical. It should appear after services, return to the
backend to correct this position. Change the page order to 2.
and click Update. Page has been updated click View Page.
The page is now moved to the correct position on the menu.
In this lesson we have learnt to add pages to the site and create
dropdown menus. In the next lesson we will look at adding
content to the pages, this content will be basic text and
pictures. Though once you learnt to add the basic content it is
not that difficult to add video and other media.

Adding Content
In this lesson we will look at adding content to the pages, this
content will be basic text and pictures. We will look at the built
in WordPress text editor, though you can add a more advanced
text editor if required just search for text editor plugins. We
will also look at adding links to both internal and external
content. Though once you learnt to add the basic content it is
not that difficult to add video and other media.

The Editor
the Upload /Insert buttons for Pictures, Video, Sounds and
Media.
the text buttons for Bold, italics, strikethrough, bullet
points, quotes and text position.
the buttons for adding links, more tag, spellchecker, full
screen view and display kitchen sink (more editor options).
Displaying all editor options underline, text colour, paste
options, remove formatting, add special characters, undo
and redo.
An example of basic text entry, click insert picture icon. Click
Browse. Click the picture to be inserted. Click Open. Click
Upload. Note there may be a limit on the size of the file you
can upload, it is always a good idea to keep file sizes as small
as possible this will help your web page load time. Picture
uploaded you can edit the image or add alternate text, caption
or description. Alignment and size can be adjusted, adding a
picture at the thumbnail size (150×150) will keep all your
images at a consistent size through out the site. Here we have
aligned the picture to left of the text. The link URL can be used
to link this image to other content internal or external. Click
Insert into post. The image has been inserted. Clicking the
image you will be able to delete or access the edit options
again. Select Right to realign the image. Click Update. Image
now aligned to the right of the text.
We will now create a link to an internal page on the site.
Highlight Contact Us. Then click Link icon. Click Link to
existing content. Select Contact Us. Click Add Link. Click
Update, then open site to check the link works. Click the link
text. The link is working, we will now return to the backend
and redirect this link to an external site.
Again highlight the link text and click the link icon. We will
change this link to http://www.bbc.co.uk. Note always start
links with http. Tick the box Open link in a new window/tab.
This will ensure if someone clicks a link to an external site
your site will remain open also. Click Add Link and remember
to update the page before checking the link. Click the link text.
The external link works and note your site remains open in
another tab.

Adding Content
Next we will look at the editors copy and paste option,
although you can simply copy and paste directly into the page.
The paste from word option does help to retain the formatting
applied by Word. For this example we have created a simple
table in Word then we will copy it and paste it into the page.
In Word highlight the entire table. Right click the +. Select
Copy. Click the paste from word icon. Press CTRL+V on the
keyboard. Click Insert. The table has been added, Click
Update. The table added to the web page. Highlight some text
and click on the font colour icon. Select font Colour.
Click HTML tab to view the page in the code view. The
HTML view of the page, you can directly enter code into the
page. Page view with our text in a different colour applied.
In this lesson we have looked at adding content to our web
pages, we have covered the basics of entering text and
inserting images. In the next lesson we will look at adding
plugins to the site to enable more dynamic content. Plugins can
be added to the site as widgets which will appear in the
sidebars or as enhancements to for example the text editor.
There are numerous plugins available for the WordPress
system, we will look at adding a translation plug-in to make
the site accessible in many languages and a plug-in to create a
custom contact form.

Plugins
In this lesson we will look at adding plugins to the site to
enable more dynamic content. Plugins can be added to the site
as widgets which will appear in the sidebars or as
enhancements to for example the text editor.

There are numerous plugins available for the WordPress
system, we will look at adding a translation plug-in called
GTranslate to make the site accessible in many languages and
a plug-in to create a custom contact form. The contact form
plugin we will use is called Cforms which you can download
for free at http://www.deliciousdays.com/cforms-plugin/
Click Plugins. Click Add New. Type Gtranslate in the search
box. Click Search Plugins. Click Details on gtrans. Click
Install Now. The Plugin has been installed, click Activate
Plugin. Click Installed Plugins. Click Appearance. Click
Widgets. The installed Weaver theme has many widget areas,
we will use the primary area. Click to expand. The Primary
area contains the default widgets these can be removed if not
required. Simply expand the widget and click Delete. Now
drag and drop the gtrans widget to the primary area. Fill in title
for this widget. Click Save. Site front-end with translation
widget in place click select language. Select Language. Turkish
language selected. The page translated to Turkish. Click Show
original to return the site to English. Click the X to close the
translation widget. Site with a Facebook Like plugin added.

Contact Form
We will now install the cforms software to create a custom
contact form, the software can be downloaded from http://
www.deliciousdays.com/cforms-plugin/ . Although this
software can be added as a widget in the sidebar, we will add
the form to the contact us page. In this lesson we will create a
new form and demonstrate how to alter the fieldsets and
change the look of the form. Cforms contact form is very
customisable and in this lesson we will show just some of the
many options, so once you have learnt the basics please carry
on and explore the software to gain a better understanding of
it’s capabilities.
Click Plugins. Click Add New. Click Upload. Click Browse.
Click cforms. Click Open. Click Install Now. Click Activate
Plugin. Click cforms11. Rename the default form to Contact
us. Click the Edit icon on My Fieldset. Change the name to
Address. Click to OK. Select field type Multiple lines of text.
Click Update Settings. Remember to do this after all changes.
The fieldset has been altered, but we need to reorder it. Hover
the mouse over the order number then click and drag to the
new position. Remember to click Update Settings. Click the
Edit icon on the website fieldset. Change the field label to
Telephone and delete the default value. Click to OK.
Remember to update settings. Click Pages. Click Contact Us
Page. Cforms has added it’s own icon in the editor for easy
insertion of forms. Click cforms icon. Select form to be
inserted and click Insert. To check the appearance of the form
update the page and switch to the site front end.
The form has been added, return to the backend and we will
change the appearance of the form. Click Styling. Select a
theme file and click Select style. Switch to the front end to see
how the style looks. Form with new style applied. In this
lesson we have learnt to add plugins and display them in the
widget area as well as in pages. In the next lesson we will
learn how to update the WordPress software and apply
updates to plugins and themes.

Updates
In this lesson we will look at updating the WordPress
software and applying updates to plugins and themes.
Occasionally updates to software are released, these could be
bug fixes, new features or enhancements. Fortunately
WordPress makes it very easy to handle these update as the
vast majority can be done automatically with no site
downtime.

Click Updates. Click Update Now. Update will be
downloaded and applied. The update has been applied. Click
Updates. Click Select All and then Update Themes. Themes
updated correctly, now click Updates. Select and update
Plugins. Plugin update completed, click Pages. One of the
features of the new update, new media uploader.
With all updating there is a risk that something will go wrong,
even if it is not an update. Hardware failure, virus or spyware
infection are all causes for concern about how to quickly get a
site back on line. First line of defence has to be a backup
strategy WordPress has many plugins that deal with backups
but consider some important features you may need.
Backs up everything site content and databases.
Will perform scheduled backups.
Will backup for off site storage, always important to have
off site copy in case of server failure.
Easy backup and restore features.
You may find you will require to have more than one plugin
enabled to get all the required features.
We would suggest a google search for WordPress backup or
search plugins in the site’s backend. Your hosting company
may offer Backups which ever solution you choose, make
sure you have one in place for your own safety.

Domain Names and Hosting
Now we have completed the course on building a website
using WordPress. We now need to look at publishing the
website to the internet.

Domain Names and Hosting
Now we have completed the course on building a website
using WordPress. We now need to look at publishing the
website to the internet.

In order to complete this we will need two things firstly we
need to register a domain name and then find a hosting
company for the website. As the preceding course has dealt
with creating a website in WordPress we should perhaps look
for a hosting company that specialises in WordPress hosting.
Although we can actually buy a domain name from any
domain name registering company, it is perhaps a good idea to
find a company that will both host and register a domain name.