Create Your Own Website Using WordPress in A Weekend

C r e at e
your own
Website
{ using
Wordpress }
In a weekend
X-WBWR-LVBK-001-005_US.indd 1 21/03/2013 16:42

C r e at e
your own
Website
{ using
Wordpress }
In a weekend
aLaNNaH Moore

table
Ghettoizatio
o f
Ghettoizatio Ghettoizatio
Ghettoizatio
CREATE YOUR OWN WEBSITE Ghettoizatio
Ghettoizatio
Ghettoizatio
Ghettoizatio
Ghettoizatio
GhettoizatioGhettoizatio
Ghettoizatio
USING WORDPRESS IN A WEEKEND Ghettoizatio
Ghettoizatio
Ghettoizatio
First published in the USA 2013 by Focal Press

Focal Press is an imprint of the Taylor & Francis Group,
an informa business
70 Blanchard Road, Suite 402, Burlington, MA 01803, USA
6 Why you need a website
Copyright © 2013 The Ilex Press Ltd. 7 How This Book Works
All rights reserved.
All images © their respective copyright holders.
1
This book was conceived, designed, and produced by
8 an Introduction to WordPress
Ilex Press Limited, 210 High Street, Lewes, BN7 2NS, UK
9 What makes WordPress a good choice?
Publisher: Alastair Campbell 10 WordPress.com or WordPress.org?
Creative Director: James Hollywell
Managing Editor: Nick Jones
12 The elements of a WordPress website
Senior Editor: Ellie Wilson
Commissioning Editor: Zara Larcombe 2
Art Director: Julie Weir
Designer: Simon Goggin 14 Your Domain and Hosting
Color Origination: Ivy Press Reprographics 15 Choosing a domain name
17 Registering a domain name
No part of this book may be reprinted or reproduced or
utilized in any form or by any electronic, mechanical, or 19 Choosing your hosting
other means, now known or hereafter invented, including 20 Linking your domain and hosting
photocopying and recording, or in any information storage
or retrieval system, without permission in writing from
the publishers. 3
Ghettoizatio
22 Planning Your Website Ghettoizatio
Notices:
Knowledge and best practice in this field are constantly 22 What kind of site are you planning to build?
changing. As new research and experience broaden our 24 What’s the purpose of your site?
understanding, changes in research methods, professional
practices, or medical treatment may become necessary.
25 What content do you need on your site?
29 Finding and using images
Practitioners and researchers must always rely on their 33 Video and audio
own experience and knowledge in evaluating and using
any information, methods, compounds, or experiments
described herein. In using such information or methods 4
they should be mindful of their own safety and the
34 SETTING UP
Ghettoizatio
Ghettoizatio WORDPRESS
Ghettoizatio
Ghettoizatio
Ghettoizatio
safety of others, including parties for whom they have
a professional responsibility. 34 The one-click install
36 Setting up using WordPress.com
Product or corporate names may be trademarks or
registered trademarks, and are used only for identification
and explanation without intent to infringe. 5
38 STEP-BY-STEP:Ghettoizatio
GhettoizatioGhettoizatio
Library of Congress Cataloging in Publication Data:
A catalog record for this book is available from the CREATING A BASIC MODEL
GhettoizatioGhettoizatio WEBSITE
Ghettoizatio
Ghettoizatio
Ghettoizatio
Library of Congress. 38 Introducing the default WordPress theme
“Twenty Twelve”
ISBN: 978-0-415-66268-0 (pbk)
ISBN: 978-0-203-38517-3 (ebk) 40 The live site and admin area
41 The admin area
Printed and bound in China
42 First steps
10 9 8 7 6 5 4 3 2 1 46 The header

C o n T E N T S
54 The background
55 Creating pages
56 Choosing your home page
57 Working with the text editor
60 Adding pages to the menu
62 Adding images to your site
67 Adding video and audio to your site
68 Your blog or news area
72 Your widgets
74 The plugins you need
81 Basic site completion checklist
6 9
82 SELLING FROM YOUR WEBSITE 1 28 YOUR LIVE SITE
83 Using Paypal 128 Growing your audience
84 Paypal buttons and shopping cart 132 Maintaining relationships with your visitors
135 Tracking your visitors
7 137 Search engine optimization (SEO)
88 EXPLORING THEMES 142 Integrating social media with your website
89 Free or premium?
90 How to choose a theme 10
92 Where to find themes 1 46 USEFUL THINGS TO KNOW
93 How to install a theme 146 Legal issues
94 Themes: Business 149 Maintaining your WordPress site
96 Themes: Portfolio 150 My site isn’t showing up in Google
98 Themes: Magazine/Blog 151 Working with other users
100 Themes: E-commerce 151 Getting help
152 WordPress in other languages
8 154 Adding functionality with plugins
102 IN FOCUS 155 Going further with WordPress
102 Business theme
109 Portfolio theme 156 Resources and glossary
114 Magazine theme 159 Index
120 E-commerce theme 160 Acknowledgments

Why you need a website
a n d w h at t h i s b o o k w i l l d o f o r yo u
Today, every small business and many individuals building. Every reader will be able to complete
need a website. Your website presents you or your their aim of getting their website set up online
business to the world. It is essential that it looks after just a few hours’ work. If you are already
professional and that it presents you as you want computer-savvy, you’ll find the book is full of
to be seen, because it may well be your first and pointers on how to develop your WordPress
only chance to create the right impression. website at a more advanced level.
Setting up a website doesn’t have to be Thanks to WordPress, creating a wonderful-looking

complicated, mystifying, or horribly expensive. website is within everybody’s reach. Whether you
In just a few hours, you can create something are a writer, an artist, an architect, or a gardener,
really professional that is exactly right for your whether you want to sell your products online
needs—and you can do it all yourself, without or simply air your views, you’ll find it easy to get
having to pay for professional help. yourself up and running online.
You do not need to have any specialist knowledge And you may even find you enjoy building your
to follow the steps in this book—it is written for website so much that you’ll want to dig in next
people who are new to the world of website weekend, too.

why you need a website /// HOW THIS BOOK WORKS
How this book works
A N D W H AT YO U W I L L N E E D I N A DVA N C E
This book functions a bit like a recipe book, with

the recipes varying from simple to complex. First,
B e fo re yo u start
we’ll cover the basic “ingredients” you’ll need before
you can actually begin; then we’ll go through all the To set up your website over a weekend, you’ll
elements you need to prepare a model website, need to prepare the following in advance.
which will act as the recipe or template for you to
> Register your domain name and set up your
create a website using WordPress. Here you will
website hosting (as explained in Chapter 2).
learn all the background and techniques you’ll
Several hours are sometimes needed to point
need when you go on to tackle a more complex
your domain name to your hosting, and some
variation of the fundamental recipe.
hosting packages require telephone validation.
For some readers, the basic template is all you’ll

> If you want to accept payment online using
need. The model website will make an excellent
PayPal (see Chapter 6), you’ll need to get your
showcase for a small business. If you are happy
PayPal account set up and verified in advance.
with this perfectly functional and attractive-looking
website, there may be no need for you to go further.
> Do you need to get professional photographs
taken (for example, of products you’ll be
However, you will still need to read on, because
selling)? If so, you’ll need to arrange this and
you’ll want to know some very important points
have the images to hand.
concerning your website once it is live, like how
to get people to visit it, and how to keep them
> Do you need to create a logo for your business
coming back.
to display on your website? You’ll also need to
have this ready to put on the site (see page 50).
For those who want to embark on something
more challenging, we’ll also explore the creative
> Read through the “Legal Issues” section on
possibilities of WordPress by looking at some more
page 146, and carry out a trademark check
sophisticated website setups specifically designed
if necessary. Make sure you have any other
for the different types of website you might want
permits you may need.
to create—e.g. business; art or photography portfolio;
magazine/blog; or e-commerce (online store).
We’ll also go into additional optional extras, such as

how to accept payment from your website, how to
extend the functionality that WordPress offers, and companion website:
how to tie the whole thing in with social media. http://www.createyourwebsiteinaweekend.com, where
you can check for updates and see working installations
So, it’s up to you how far you want to go in your of WordPress websites.
website-building adventure.

1
An introduction to WordPress
W H AT I S WO R D P R E S S ?
WordPress is a web-based system that can be used your internet browser (Internet Explorer, Safari,
for free by anyone to build a website—all you need or whatever it is you use), without having to know
to do is install it on your web host, which usually anything about programming or coding. It is ideal
takes just a few clicks, wait for a confirmation for people who are setting up small businesses
email, and away you go. and don’t want to spend a lot of money working
with a web designer in order to get online. And
That’s where the fun begins. WordPress is highly of course, if you set the whole thing up yourself,
customizable, and there are thousands of beautiful you can update the site as often as you want to.
templates (called “themes”) available to choose
from to create the look you want. Many of these There are two versions of WordPress you can
are free, but even the “premium” themes (that use. The simplest method is to set up a website
you have to pay for) are surprisingly inexpensive. that is hosted for you at WordPress.com. This is
an excellent way to get up and running quickly;
WordPress was originally created as a blogging however it does have its limitations (as outlined on
tool, but it has widened its reach vastly over the page 10). The “full” version of WordPress requires
past few years, and is now used to create all kinds you to have your own domain name and your own
of websites. It is the most widely used content hosting, but it offers you many more possibilities.
management system (CMS)—which is simply
a system that allows you, the website owner, to The full version is what we will be concentrating
easily log in, publish, and make changes through on in this book.

What makes wordPress
a n i n t r o d u C t i o n t o w o r d P r e s s / / / W H AT M A K E S W O R D P R E S S A G O O D C H O I C E ?
a Good ChoiCe?
WordPress gives you

control over your site Have you taken the WordPress 2012 survey yet? Search WordPress.org Go
You don’t have to be dependent on Home Showcase Themes Plugins Mobile About Docs Blog Forums Hosting Download
a webmaster to create or maintain Forums username or email password Log in (forgot?) Register
your site. You have complete control.

We’ve got a variety of resources to help you get the most out of Forums Topics Posts
WordPress. Your first stop should be our documentation, where Installation 21,492 153,484
you’ll find information on everything from installing WordPress —Problems with getting it running.
it’s easy to use for the first time to creating your own themes and plugins. How-To and Troubleshooting 322,711 1,097,689
—Once it’s running
It’s easy to update your website, Getting Started Resources

Themes and Templates 92,216 307,299
If you need help getting started with WordPress, try these articles. —XHTML and CSS
even if you’re not particularly ■
■
Welcome to the WordPress Support Forum
New to WordPress — Where to Start Plugins and Hacks 256,118 768,377
computer-savvy. ■ Frequently Asked Questions about Installing WordPress —Extensions and modifications
■ First Steps with WordPress

— Hacks 5,465 16,016
■ Writing Posts —For Plugin Coding and Core hacking discussion
Search the Support Forums WP-Advanced

it’s flexible
980 4,559
—Beyond Codex Questions
Enter a few words that describe the problem you’re having.
Multisite
WordPress can be used to create Search 8,574 55,944
—Problems running network of WordPress sites
Hot Topics
websites of all kinds: business sites, categories category Comments contact form 7 css database
Localhost Installs
—If WordPress is or will be installed on your computer
544 2,873
blogs, portfolios, magazine sites, error header Help image images page pages php plugin Your WordPress 11,413 39,551
plugins post posts RSS sidebar theme wordpress

—Strut your stuff.
e-commerce sites—you name it, Miscellaneous

—Almost everything else about WordPress.
19,089 60,703
WordPress can do it. Requests and Feedback 10,395 35,412

—Feature requests; criticism.
Alpha/Beta 1,934 9,464

—Discussion of development versions only
it offers themes
There are thousands of beautifully
designed, full-featured, high-quality Help is always at hand for WordPress users.
themes you can choose from, so
you’re bound to find a look that’s
just right for you. It’s also very easy
to change themes further down
the line if you need to.
it’s robust and secure

Any security holes are fixed with
frequent updates to the system.
it has a ready-made
suPPort community
Because so many people use it,
there is a huge support network
to fall back on if you ever need
any help.
WordPress is the most used CMS in the

world. There are over 58 million sites
using WordPress. WordPress is used all over the world, and in over 120 languages.

WORDPRESS.COM or WORDPRESS.ORG?
chapter 1
So that you can choose which

version of WordPress is right for Hosted: WordPress.com
you, we’re going to look at some of (For more on hosting see page 14)
the advantages and the downsides
of each. Before looking at the tables, P ROS CONS
read through the descriptions to It’s very quick and easy to set up. You have limited access to themes.
clarify the differences between WordPress.com offers you a good selection,
the two. but there are many, many more out there.
You also don’t have the option to upload a
WordPress.com is the version of custom theme if you ever want to use one
WordPress that is hosted for you.
(a theme you’ve had especially designed).
You don’t have to worry about any technical You can’t add plugins—extra components
WordPress.org is the version of
matters, such as security and backing up your that add to the scope of your site.
WordPress that you install on your site, as these are all taken care of for you.
own host, also known as “self-
hosted” WordPress. It’s referred to You will get some website traffic just from You can’t tweak the code if you ever need
as “WordPress.org” because that’s being part of the WordPress.com community. to (or get anyone else to tweak it for you).
the central website you go to in
order to download the software. There is no concern about your site ever going You have limited storage space.
(It’s likely you won’t actually have to down or being unavailable—but then again,
do this, though, since most hosting if you are using a quality host, this should
companies have an easy-install
never be an issue.
system that enables you to install
They sometimes put ads on your site,
it with just a click or two directly
and you have no control over this
from their control panel—we’ll go (unless you pay to remove them).
through this later.)
You can’t run your own ads on your site,
should you want to.
Costs
Free setup and hosting
Your own domain (mydomain.com instead of mysite.wordpress.com)—$13–$25/year
Optional paid-for themes—starting at $39 (once-only payment)
Optional “No-Ads” upgrade—$30/year
Other optional “upgrades” such as increasing your storage space—various prices
Switching to self-hosted at any point in the future (they’ll do it for you; some hosting
companies offer this service free when you switch over to them)—$129
10

an introduCtion to wordPress /// WORDPRESS.COM OR WORDPRESS.ORG?
self-Hosted: wordpress.org In a nutshell, WordPress.com represents
(For more on hosting see page 14)
a great choice if a blog is what you need
and you want to get up and running quickly.
P ros CoNs
If you want to create anything more complex
You can install whatever theme you like, free You have to handle the hosting yourself. with your site, or may wish to do so in the
or premium, from a selection of thousands. future, it’s best to dive into the self-hosted
version from the outset.
You can add plugins. You are responsible for all the upgrades
and backups yourself.
You can fiddle with the code if you need to The WordPress interface is fairly simple,
(or get someone else to). but you will have to acquire some technical
knowledge.
No limit to the amount of storage space

(you are only limited by the hosting package
you choose).
No ads (unless you want to run your own,

which you are able to do if you choose).
costs
Your own domain—around $10 a year (this may be included in your hosting package) Below left: WordPress.org—the home
Hosting—depends on your host; at its lowest, approximately $30 a year, more usually of the self-hosted version of the system.
around $100 a year
Optional paid-for theme—starting at $30 (a once-only payment) Below: WordPress.com—sign up here
to set up your hosted WordPress site.
Search WordPress.org Go
Showcase Themes Plugins Mobile Support Get Involved About Blog Hosting Download
WordPress is web software you can use to ceate a beautiful

Add New Post website or blog. We like to say that WordPress is both free
Refreshing Design and priceless at the same time. Sign up and start publishing now.
Share with the world,

Permalink: Edit
The core software is built by hundreds of community volunteers, and when
Add Media you’re ready for more there are thousands of plugins and themes available to Get Started
transform your site into almost anything you can imagine. Over 80 million
people have chosen WordPress to power the place on the web they call
your community, or
More polished and enjoyable than ever before.
“home”—we’d love you to join the family.
Already blogging? Sign in.
Watch a video your closest friends.
Ready to get started? Downlaod WordPress 3.5.1
Email or Username
Password
Remember me Help Sign in

WordPress Swag News From Our Blog It’s Easy As... WordPress Users
WordPress 3.5.1 Maintanance and Security Find a Web Host and get great hosting
Release while supporting WordPress at the
WordPress 3.5.1 is now available, Version 3.5.1 is Themes • Store • Features • News • Stats • Terms of Service • Privacy Policy • An A U T O M AT T I C App
same time.
the first maintenance release of 3.5, fixing 37
bugs. It is also a security release for all previous Download & Install WordPress with our
WordPress versions. For a full list of changes, famous 5-minute installation. Feel like a
consult the list of tickets and the changelog, rock star.
which include:Editor: Prevent certain HTML
elements from being unexpectedly removed or Read the Documentation and become a
11

The elements of a wordPress website
ChaPtEr 1
Before you start planning your website, it makes sense to

get familiar with the different elements of a site created There are WordPress themes designed for all kinds of websites—
using WordPress. see Chapter 7 for some examples of the range of designs available
to choose from. Here, we see a theme designed as a business/
What does a WordPress website look like? The chances creative portfolio. Many themes include separate layouts for the
are that you have seen many WordPress websites without home page and the blog page; others also include additional layouts,
realizing it, because the thousands of different themes such as the portfolio page layout you can see here.
available make them all look quite different.
1. the logo. Some sites alternatively have header text

at the top and/or a header image that stretches the
width of the site.
2. the menu.
3. Page text. Most business sites will choose to have
introductory text on their home page, but with all
WordPress sites, you can set it so that your blog or
news posts appear here instead, if yours is a more
blog-style or news-based site.
4. slider. Many themes feature a rotating image
slideshow, known as a slider, on the home page.
5. the footer. Most websites show a copyright notice
in the footer; some themes also allow you to put
widgets (see No. 9) in this area.
6. the background.
7. social media buttons.
8. the sidebar.
9. Widgets. Elements inside the sidebar (for example,
the titles of the latest blog or news posts) are
called widgets.
Portfolio page layout.
12

an introduCtion to wordPress /// THE ELEMENTS OF A WORDPRESS WEBSITE
1 2
8
4
6
5
The “Bigbang” theme by Brankic1979, Blog page layout.

available from ThemeForest; home page layout.
13

2 Your domain and hosting
deciding on a domain name and a host
Before you start building your website, there are the cost of your domain in their price, so
two things you need: depending on whom you choose for your host,
> a domain name you may not need to set the two up separately.
> hosting for your website
We’ll look at some places to register your domain
A domain is the web address of a website. For name on page 17.
example, Google’s domain name is www.google.com.
The second thing you will need is hosting for
For a self-hosted WordPress site, you will need your website. You can consider your hosting
to buy a domain name. If you use WordPress.com, company as the “landlord” of the plot of ground
you will be given an address that looks something in cyberspace on which you will construct your
like this: mysite.wordpress.com. Or you can purchase website.
your own domain and use it with your WordPress.
com site. I recommend you do this if you’re using It’s essential that your hosting company is
the hosted version, as having a website with reliable—your website should never be “down”
wordpress.com in it doesn’t look very professional. or unreachable, which can happen from time
to time with less-reliable hosting companies.
Domain names cost in the region of $10 a year,
and they can be purchased from a company called We’ll address how to choose a reliable host
a registrar (or, if you’re using WordPress.com, you suitable for your needs shortly. First, there
can purchase it through them at a cost of $18 [at are some things you should bear in mind
time of writing]). Some hosting companies include when choosing your domain name.
14

Choosing a DOMAIN
YOUR DOMAIN AND HOSTING /// CHOOSING A DOMAIN NAME

NAMe
You have three basic choices to make

when choosing your domain name.
These are:
> your brand or business name
> a search-engine-friendly name
> a more creative name
Personally, I’d always go for the brand

name, if it is available, over a search-
engine-friendly name, as that’s how
people will remember you.
A domain name should be:

> easy to spell, and easy to
pronounce (I’d avoid hyphens,
as you’ll need to spell it out on
the telephone)
> not too long—keep it short,
catchy, and memorable
> not too similar to your
competition’s domain name name . . . not to mention that you straight away to visitors that your
> very definitely not a violation will also end up sending a stream business is local. Until recently,
of someone else’s trademark of accidental traffic to the other the more unusual extensions such
(see page 146). .com website with the same name. as .me were a no-no for serious
business sites; today, they are more
Having said that, although .com frequently used, which indicates that
is usually preferable, there is an they are becoming more acceptable.
Which extension should exception: if you are not based The only time I would suggest using
you use—.com, .net, etc.? in the U.S., and you expect only one, however, is if you can come
A .com domain name is almost to do business in your country of up with a witty idea (see page 16)
always preferable. Choosing a .net residence, the country-specific that makes good use of it, in which
or a .org domain may seem like a version of the domain name may case it will be a positive asset to
great solution if the .com domain be a better choice as it will indicate your business.
you wanted is unavailable, but it will
almost certainly result in confusion.
The .com extension is so widely used
Your choices for the kind of domain you register are:
that many people will assume your
> the “classic” extensions of .com, .net, and .org
domain is a “dotcom,” and you will
> a country-specific extension, such as .co.uk, .it, .ie, or .es, etc.
most likely find yourself pointing out
> more unusual extensions, such as .tv, .biz, .mobi, .me, .co, etc.
the different extension specifically
each time you quote your domain
15

GettinG creative checkinG your
chapter 2
It is true that many .com domains domain name

have been taken. But there are Googling a domain name isn’t
plenty more out there if you can a reliable way of checking its
use a bit of imagination. It’s even availability. If there’s nothing
better if you are starting your on a site, it doesn’t mean that
business from scratch now, as you it is available—it might mean it T IP
can choose a brand name and just isn’t in use. Use a registrar
a domain at the same time, and like namecheap.com instead for
To find out who owns a domain already
then come up with something your research, or a tool such as registered, visit www.betterwhois.com.
truly unique and memorable. www.instantdomainsearch.com.
Domainsbot.com Namestation.com
Try these tools to help you come up with domain http://www.namestation.com

name ideas: http://www.nameboy.com
http://www.instantdomainsearch.com http://domai.nr
http://www.domainsbot.com http://www.dotomator.com
Here are a few ways you can come up with original > misspell words—Flickr, Digg, Goowy
brand/domain names: > change or add a letter to create variations on words—
> put two words together to create compounds— Zune, iPhone, iTunes
YouTube, Firefox, Facebook > add prefixes and suffixes—Friendster, Napster, Biznik
> use phrases—StumbleUpon, MySpace, SecondLife > invent words—Etsy, Odeo, Bebo
> use slogans—justdoit.com (Nike), haveityourway.com > use words from other languages—Rojo, Vox
(Burger King), powerofdreams.co.uk (Honda UK) > play around with unusual or country-specific
> combine parts of words—Microsoft, Farecast, extensions—del.icio.us, foot.ie, designm.ag
Wikipedia
16

Registering a DOMAIN NAMe
Before you register a domain name,

you need to choose your host (see
page 19)—if your hosting package
includes a domain name, you can
skip this section.
If you’re choosing a country-specific domain

name, check your hosting company can
register it for you. It may be that you’ll
need to register it separately.
It’s very important to choose a

reputable domain-name registrar.
Smaller companies can disappear,
and you may find your precious
domain name in the hands of
someone completely different.
Therefore, it’s best to go with one

of the bigger names in the field—
for example:
> www.namecheap.com
> www.godaddy.com
> www.gandi.net—which offers good
prices for country-specific domains
If you’re going to use WordPress.com,

you’ll register your domain directly
through them. We’ll see how this works
on page 37 when we go through the
setup of a WordPress.com blog. Namecheap.com and Godaddy.com—two reliable domain registrars.
17

chapter 2
Gandi.net—a good-value registrar, especially for country-specific domain names.
TIP BuyinG other extensions

In addition to the .com, you may also
Make sure you sign up for your domain with want to buy .net, .org, or any other
an email address you use regularly. You applicable country-specific version
will only receive reminders for renewal via of your domain to prevent anyone
this email address. It is also a good idea else getting hold of them. You may
to set a calendar reminder for a week or want to snap up the hyphenated
so before the date, just in case you miss version of your domain name as
the emails. You really don’t want well, if applicable.
to lose your domain.
DOmain anD hOsting packages

When registering your domain, it is likely you will be offered hosting by the registrar, and
possibly other services at the same time, such as email. My advice is to ignore these offers
and head to one of the dedicated hosting companies, such as those recommended on the
next page.
18

Choosing your HOSTING
You need to choose a web host We won’t go into the precise details
that has the following capabilities. of the different kinds of hosting here,
> It must be capable of running as “shared” hosting is probably all
PHP and MySQL (in order to you’ll ever need; however, if you do
run WordPress). need more information, you can refer
> It should feature a one-click to the hosting companies’ websites.
install for WordPress (to make the
installation as simple as possible).
> It must offer 24/7 technical support
(in case you ever have any issues).
> It must have a superb uptime Here are some recommended
record of 99–100 percent (meaning hosting companies:
your site will never be unavailable). DreamHost*
http://www.dreamhost.com
Your business—or your website— Bluehost
may grow, or you may want to build http://www.bluehost.com
other websites. MediaTemple
http://mediatemple.net
If that’s a possibility, you’ll want to HostGator
find a package that also includes: http://www.hostgator.com
> unlimited storage (so your site Webhostingpad
DreamHost—my personal recommendation due to
can grow as big as it needs to) http://www.webhostingpad.com
their superb uptime record and good customer service.
> unlimited bandwidth (so you (the cheapest I have come across)
can accommodate a stampede
of visitors) *DreamHostismyfavoritedue
> unlimited databases (allowing you totheirsuperbuptimerecord
to create additional WordPress andgoodcustomerservice.Its
sites if you want to) sharedhostingpackagehasall
> the possibility of hosting unlimited oftheextrafeaturesI’velisted
domains tolookoutfor.
> an unlimited number of email
addresses.
For most small-business needs,

“shared” hosting is perfectly One-click install
adequate. This merely means It’s essential you choose a web host that
sharing a server’s services with offers a one-click install. The manual
other customers (who you’ll never procedure is simple for someone more
be aware of). If you ever need experienced, but for a beginner, it’s an
Webhostingpad.com—the least
anything more sophisticated, it is a unnecessary headache you really don’t
expensive host found thus far.
simple matter to upgrade to a virtual want for your weekend website setup.
private server or dedicated hosting.
19

Linking your DOMAIN AND HOSTING
chapter 2
If you’ve chosen a hosting package

that includes a domain name, you’ll Hi, Alannah! (Member since May 2009) 13:45 PDT System Status Our Blog Support Wiki Newsletter
2
Discussion Forum Edit Profile Logout
be able to skip this section. However, Toolbox
Manage Account
Manage Domains Account Status
if your hosting company requires you Manage Domains Return to domain listing
Manage Email
Fully Hosted
to register a separate domain name,
MySQL Databases
(Upload your site to our servers and we’ll serve it up!)
One-Click Installs
Domain name
or if you have purchased a country- Main Menu
Domain to host:
Dream Host sub-domains are okay!
specific domain that your hosting Welcome Do you want the www in your URL? Leave it alone: Both http://www.example.com/ and http://example.com/will
cPanel Importer work.
company can’t supply you with, you Rewards Add WWW: Make http://example.com/ redirect to http://www.example.com/
Web Panel API Remove WWW: Make http://www.example.com/ redirect to http://example.com/
will need to register your domain and Backup Your Account

Users, Files, and Paths
Site Of The Month
sign up with a hosting company Run this domain under the user: alannah (on luthor)
Green Hosting
This affects which FTP account will have
The DreamHost Shop
access to the domain, as well as what
separately, and then link the two. Suggestions user PHP and CGI scripts will run as.
Donations (To You!)
Web directory: /home/username/
Partner Offers
Logs directory: /home/username/logs//http
Give to Charity
(can’t be changed)
Once that’s done, when your site Buy Gift Card
Domains
Web Options
visitors type your website address Manage Domains
Registrations
PHP mode: PHP 5.2.x FastCGI (default)
Extra Web Security?
into their internet browser, they’ll be

able to see whatever web page has
3 NS1.DREAMHOST.COM 66.33.206.206
been uploaded onto your hosting NS2.DREAMHOST.COM 208.96.10.221
space. For the moment, it will just be NS3.DREAMHOST.COM 66.33.216.216
a holding page, as you haven’t put
anything onto your website yet. General
5
Change Contacts
Here we will go through the steps Transfer DNS to Webhost
using Namecheap (domain registrar) Switch To DNS System v1
and Dreamhost (hosting company) Registrar Lock
as examples. For other companies, Auto-Renew
the principle will be the same, List Domain for Sale
although the layout of their TypoScan
websites will look different. Whois Business Listing
6 Use NameCheap Hosting DNS Servers

Specify Custom DNS Servers ( Your own DNS Servers )
1. NS1.DREAMHOST.COM
4.
5.
Add More Nameservers
Save Changes
20

YOUR DOMAIN AND HOSTING /// LINKING YOUR DOMAIN AND HOSTING
1. Log into your host. 4. N
ow, log into your domain require the lists of numbers, which
registrar’s website. are called IP addresses, but in this
2. In Dreamhost, go to Manage case, you are not asked for them.)
Domains > Add New Domain. Type 5. In Namecheap, click on the domain
your domain into the empty field name listed under “Your Domains.” 7. F
inally, click “Save Changes,”
next to “Domain to host” (there’s On the left-hand navigation, under and you’re done.
no need to touch anything else). “General,” click on “Transfer DNS
Scroll down a little and click the to Webhost.” You’ll know when your domain is
blue button that says “Fully host successfully linked to your hosting
this domain.” 6. Make sure the button next to company, because when you visit
“Specify Custom DNS Servers” your website, you’ll be able to see
3. O
nce you’ve clicked the blue is clicked. Paste in the three your host’s holding page. This may
button, copy these lines from the nameservers—the three rows happen almost instantaneously,
website. Paste them into a text file of the left-hand column that you or it may take a few hours.
on your computer to save them copied from Dreamhost—as shown
temporarily. opposite. (Other registrars may
How to point a domain to a website
If you have purchased additional Here’s how to do it, using Namecheap 4. C

onfigure the top two rows
domains—for example, a hyphenated as an example. (For other registrars, on the page exactly as below,
version of your domain name—in the principle will be similar, but the using your domain instead of
order to secure it, you will want to website won’t look the same.) “http://www.mydomain.com”
point it to the domain that will be
your main website. (You can skip this 5. S
croll down the page and
section if it doesn’t apply to you.) 1. Log into Namecheap. click the blue “Save Changes”
button. The change should
For example, if you have bought 2. G
o to My Account > Manage take effect within minutes.
my-domain.com and you want Domains. Click on the domain
anyone who visits my-domain.com name you want to point to your
to immediately be transferred to main website.
your main website at mydomain.
com, you will need to point 3. O
n the left-hand navigation, find
my-domain.com to mydomain.com. “All Host Records,” and click on it.
HOST NAME IP ADDRESS /URL RECORD TYPE MX PREF TTL
@ http://www.mydomain URL Redirect n/a 1800
www http://www.mydomain URL Redirect n/a 1800
21

3 Planning your website
Yo u ’ v e g ot yo u r d o m a i n a n d yo u r h o st i n g s e t u p. I t ’ s
n ow t i m e to p l a n t h e w e b s i t e yo u ’ r e a b o u t to b u i l d.
What kind of site are you

planning to build?
A business site (1) A portfolio site (2)
You may need just a few pages to present your Creatives, such as artists, designers, and
business and the services it provides, and perhaps photographers, will need to showcase their work
additionally give some information about projects online. There are dozens of beautiful themes
you’ve worked on or samples of previous work designed to display portfolios—turn to page 96
you’ve done. This kind of site is often referred to to see some examples, and on page 109 we’ll
as a “brochure” site. walk though the setup of such a site.
If this is the case, a simple website, such as the A magazine (or blog) site (3)
basic model site we will build together in Chapter 5, This covers both personal blogs and news or
may be all you require. However, if you’re planning magazine sites focused around a particular field
to create something that looks slicker or has a more of interest. Page 98 will give you a taster of some
corporate feel, you’ll want to look at the selection of the themes you can use, and on page 114, we
of business themes in “Exploring Themes” (Chapter will follow a step-by-step guide to the creation of
7), or use the chosen business theme we focus a site using one of my favorite themes (pictured).
on in Chapter 8. Looking ahead and visiting other
sites for comparison will help you clarify your
ideas while you’re at the initial planning stage.
22

An e-commerce site (4)
p l a n n i n g Y o u R W E b S i t E / / / W H AT K I N D O F S I T E A R E Y O U P L A N N I N G T O B U I L D ?
Are you going to be selling from your site? There are quite designed specifically as an online store. We’ll look at the
a few options for doing this, which are discussed in Chapter setup of one of these in detail on page 120.
6 (page 82). It makes sense to decide now on which one
you’re going to implement—it may be that you want to Many websites will, of course, be hybrids—for example,
choose a regular theme and just add payment buttons, a blog can be added to any kind of site, and business sites
or it may be that you want to kick off with a theme often contain a portfolio to showcase samples of work.
(1) “Modernize” by GoodLayers from ThemeForest. (2) “Portfolium” by WP Shower.
(3) “Structure Theme” by Organic Themes. (4) “Shelflife” by WooThemes.
23

What’s the purpose of
chapter 3
your site?
Every site has a purpose—usually WHO IS YOUR TARGET AUDIENCE?

more than one. Be clear on your Who is going to be visiting your site?
purpose or purposes are before you Is there a specific group of people,
start, as then you can make sure the and are they young, old, innovative,
layout and the content achieve these. conservative? It’s essential to have a
clear picture of your target audience,
Common purposes are: both when you are creating the
> to provide information content for your site and considering
> to promote a service how you want it to look. Colors, style,
> to sell products writing tone, what visitors want to
> to build an email list of people read about, or what they may need T IP
to whom you can market your to know about you will all be
products in future determined by who your target Pick a single particular person who fits
> to create a focal point for people audience is. the mold of the ideal visitor, and create
who share the same interest your website with that person specifically
> to present yourself as an expert in mind.
in your field
What’s the difference between

a blog and a website?
> A website is a general term
for a location you visit on
the internet.
> A blog can be part of a website,
or it can act as a standalone.
> A blog can be more personal,
and is more up-to-the-minute.
> A blog is a series of articles
or pieces of news relating to
somebody, a particular topic,
or the activities or news of
a business.
> Adding a blog to your website
is one way of keeping your site
dynamic; it also enables you
to interact with your visitors.
See page 134 for more reasons
to include a blog on your site.
24

What content do you need on
p l a n n i n g Y o u R W E b S i t E / / / W H AT ’ S T H E P U R P O S E O F Y O U R S I T E ? / / / W H AT C O N T E N T D O Y O U N E E D O N Y O U R S I T E ?
YouR SitE?
For a basic business website, you Home like to see on your home page. What
will probably need to include the The “Home” page is what your would convince you this was the
following pages (although you may website visitor will see first. Here right website to be on; that you had
choose to name them differently): you should let the visitor know found the right people to deal with?
clearly what it is you do and why Striking a decisive chord with your
> Home they should be dealing with you. ideal customer is your primary aim.
> About
> Services The text should not be too lengthy, Remember to check your spelling,
> Products and you should remember it is your grammar, and punctuation—it couldn’t
> Testimonials first—and possibly only—chance to be easier with a spell-checker—and
> Blog impress and engage your visitor, as ask someone to proofread your copy.
> Contact they are able to click away at any time. It’s so easy to avoid messing up your
first impression with glaring spelling
Put yourself in your ideal visitor’s or grammatical mistakes on your
shoes and imagine what you would home page.
TIP
Look at your competitors’ websites,

or people doing the same thing as you.
What content do they have on their sites?
How do they organize their information?
Take some time to surf around in your
area of interest.
Australian copywriter Vikki Maver’s website has a brilliantly clear home

page spelling out what she does and why the site visitor should hire her.
(http://www.refreshmarketing.com.au)
25

About
chapter 3
The “About” page provides more

information about you or your
business to visitors who want
to know more.
It could include:
> the people involved in the business
> how long the business has been
established
> the story behind the setting up
of the business
> your personal/professional
background
> the team
> photographs of you, or the team,
or other photographs of interest
> perhaps a “human touch” or a bit
of humor to remind the visitor
there are real people behind This restaurant “About” page gives background information to site
the text on the page visitors in a friendly and inviting manner. (http://grandbocca.com)
services
I’m not overly keen on the title
“Services” for a website, as it seems
rather dry and uninviting—I prefer
friendlier alternatives such as “Work
With Us,” but obviously those aren’t
always appropriate and “Services”
may be your only real option.
Whatever you choose to call it, the

“Services” area of your site needs
to give details about what it is you
do—the depth of detail is up to you.
Do you want to encourage people
to contact you to find out more,
or do you want all the details to be
provided on the web page? I don’t
recommend one strategy over the
other; it may be useful to see how
your competitors are presenting
their services. Titling the “Services” page of this Mexican web design company
“Qué ofrecemos?” (“What do we offer?”) sounds much more
inviting than “Services.” (http://sitiosguau.com)
26

Whether or not to include pricing
P L A N N i N G y o u r W e B s i t e / / / W H AT C O N T E N T D O Y O U N E E D O N Y O U R S I T E ?
details on your website is also an issue
that only you can decide. If in doubt,
you can test both options once your
site goes live and see if there is a
marked difference in results.
PRODUCTS
Similar to “Services,” this page title can
be very unengaging; an alternative
such as “Our New Designs” might
be more inviting.
TESTImONIAlS
There’s nothing that impresses people
more than testimonials from happy—
better still, ecstatic—customers. If
they are lukewarm, or don’t convey
enthusiasm simply because the
person doesn’t write particularly
well, don’t include them. Their job
is to sell you, and it has to be 100
percent convincing.
If it makes you blush to display a page

titled “Testimonials,” you could just call
it “Clients”—or include a small box at
the bottom of your page entitled,
“What clients have said,” which will
seem more discreet, but won’t be
overlooked. Some WordPress themes
include a testimonials function that
displays random testimonials on your
page or in your sidebar.
BlOG
Whether you call it “Blog,” or label
it something different like “News” or
“What’s Happening,” I can’t think of
a website that wouldn’t be enriched
by having a blog section built into
it. Regularly updated, it is a great way
to make your business look dynamic Client testimonials appear at the bottom of the web pages for this Texan holiday cabin
and bring projects you’re working website; labeled “feedback,” this is a nicely discreet way of integrating testimonials.
on to your visitors’ attention (see
(http://cabinsatsmithcreek.com)
page 134 for more).
27

contAct
chapter 3
It’s common to include a web form

on most websites so customers or
readers can contact you easily. Some
users are wary of web forms, however,
assuming that submitting their email
addresses through one will expose
them to spam. You should therefore
also include a visible email address
they can alternatively use (which
would be protected from spammers,
of course—we’ll explain how to do
that later). The visibility of your email
address also adds to your credibility,
which is less of an issue if your site is
a blog, but is essential if you are
selling from your website. Maple Leaf Music’s “Contact” page shows their telephone number, address, and email
address clearly (as well as providing a web form), and a link to a map and directions
are also provided. (http://www.mapleleafmusic.com)
You should also include a telephone
number on your contact page, if you
want people to be able to reach you
this way. Bricks-and-mortar businesses
should also include a real, physical Writing for the web
street address (not a P.O. box) to Writing for the web is different from writing for print. When crafting your
reinforce their status as an established, text, bear the following in mind.
credible, real-world entity. > People’s attention spans are shorter these days, and even more so when
reading onscreen—so don’t make it too wordy. Use headings and short,
otHer pAges You mAY neeD digestible paragraphs.
on Your site > Important points should be visible straight away.
> “Portfolio” (for creatives, > With the above in mind, the journalistic “inverted pyramid” style works
to showcase your works) well when writing your pages. Begin with the conclusion first, then the
> “Delivery Information” and “Returns supporting information.
Policy” (if your products require > People are impatient, so give them what they are looking for—your
physical shipping), and “Terms & contact details, maybe also your prices—without making them jump
Conditions” (if you’re selling online) through hoops to find it. Otherwise, they may click away.
> “Privacy Policy,” “Cookies,” etc. > Think of benefits, not features. Turn your copy round to make it
(see the “Legal Issues” section customer-centric: instead of describing the details of your service,
in Chapter 10) describe how it will help your customer.
> Include “calls to action”—make use of phrases such as: “click here,”
“contact me,” “sign up for my newsletter,” etc.
> Make sure your blog-post headings are enticing. Otherwise people
won’t click on them, and your posts won’t get read.
> You need to make sure your website text is keyword-rich so you’ll
be found in Google and the other search engines. (I’ll explain more
about this and SEO—search engine optimization—in Chapter 9.)
28

Finding and
planning YouR WEbSitE /// FINDING AND USING IMAGES

uSing imagES
PHOTOS FOOTAGE 01 70 38 75 24 English View Plans & Pricing
Search keywords or image ids...
Image Type Lightbox: Sketchbook

Photos
Whatever type of website you’re Illustrations

Vectors
building, you’ll need to include Orientation

Horizontal
Vertical
images. Even for the most serious Category

Any Category
business website, you’ll need some Exclude Keywords
visual interest to engage your visitors. Not These Words
Contributor Name
If you look at some commercial People
Editorial
websites, you’ll see that very often Color
Search Clear
an image is used to underline each
of the company’s or product’s unique
VIEW BY CATEGORY:
Abstract
Animals/Wildlife
selling points, whether this is done The Arts

Backgrounds/Textures
Beauty/Fashion
using a rotating header panel with Buildings/Landmarks

Business/Finance
Celebrities
writing on each of the image slides, Editorial

Education
Food and Drink
or simply pictures interspersed Healthcare/Medical

Holidays
Illustrations/Clip-Art
throughout the text. Industiral

Interiors
Miscellaneous
Model Released Only
Nature
Objects
You cAn use: Parks/Outdoor

People
Religion
> your own photos, either scanned, Science

Signs/Symbols
Sports/Recreation
or taken with a digital camera or Technology

Transportation
Vectors
cell phone Vintage
> photos from a stock-photo library, SUBSCRIBE NOW!

25-A-Day Subscriptions
Up to 750 hi-res downloads / month
which are very reasonable in cost 1 MONTH

$249
3 MONTHS
$709
Images On Demand
Download anytime for one year
1 HI-RES 5 HI-RES
Images for the web should be in
IMAGE IMAGES
$19 $49
Choose Your Subscription Plan >
.jpg (.jpeg), .png, or .gif format.
Some ideas of types of images you

can use for business websites are:
> conceptual photographs (for
example, skies, puzzles, keys,
a handshake, building blocks,
a soaring plane, a parachute,
smiling people—or your own,
more original, ideas)
> decorative photographs
(such as flowers, landscapes,
SHUTTERSTOCK STATS: 24,955,277 royalty-free stock images 88,129 new stock images added this week
or seascapes)
> pictures of the location or
Shutterstock.com Contact & Support Select a language Legal
the town where you’re based

Beautiful illustrations from Shutterstock, Inc. / Shutterstock.com.
(this could be local landmarks,
buildings, street scenes, etc.)
29

chapter 3
Some good places to get stock

photos for use on your site are:
http://www.istockphoto.com Create Your Own Website Using WordPress in a Weekend
Demo site using the Twenty Twelve theme
http://www.fotolia.com
http://www.shutterstock.com
HOME ABOUT FULL-WIDTH PAGE BLOG CONTACT
http://www.clipart.com*
*Thisoneworksoutasvery
inexpensiveifyoufigureout
Learn to build your own website
whatyouneedinadvance— This is a dummy website set up to accompany Chapter 5 of Create Your Own Website Using WordPress
you’reallowedupto250
in a Weekend.
imagesinaweekataflat
In this chapter of the book we see how the WordPress default theme “Twenty Twelve”, released as the
default theme as from December 2012, can be used to create a simple website for any kind of busi-
ness of personal site, or blog.
rateof$14.95,asattime
ofwriting.)
The header image for the WordPress “Twenty Twelve” theme is 960 pixels wide.
Consider using illustrations rather you either use an online photo-editor an image for your website header
than photographs (also available such as Pixlr (http://pixlr.com) or image, 960 pixels is the maximum
from stock-image sources)—they download Gimp, a free software for width you will need.
can look more individual. both Mac and PC. We’ll go through
each step of creating a custom If you’re purchasing stock photos
Get some ideas from other sites in header with Pixlr in Chapter 5. for the pages of your website, rather
your domain (whether you like or than the header image, you will be
dislike their choices), and also look Digital photographs are huge in able to buy small, or even extra-
at the images used in WordPress size. If your hosting package offers small, images. It is unlikely that your
themes (see page 90), as these you limited storage space, it may be photos will ever need to be wider
always incorporate dummy visuals. practical to reduce the size of your than 630 pixels, so choose a size
digital images before uploading that accommodates this easily.
Working on Your oWn pHotos them. Again, you can use Pixlr to do
You don’t need to buy special image- this. Open the photographs, reduce You won’t normally need to resize
editing software to create your site. the image size (by half, for example— your photographs before you upload
WordPress includes a built-in resizing, check the guidelines that follow them to the site; WordPress does
rotating, and cropping mechanism, to make sure you don’t reduce them this for you. The above sizing
and with the default theme we’ll use too much), and save them to your guideline is to bear in mind when
for the model website, you can crop computer before uploading them purchasing stock images or when
your photos for the header area to WordPress. reducing the size of images yourself,
through an easy-to-use interface. in order to save space on your site.
imAge size
However, you may need to work on Images for websites are measured in Do You neeD A logo
your images in order to create a pixels. To give you an idea, the header for Your site?
custom header image—perhaps one image of the WordPress “Twenty Not every website needs an actual
that incorporates your logo or your Twelve” theme is 960 pixels wide. logo. One way to brand yourself
business name. For this, I suggest So, when purchasing or preparing without using a logo is to choose
30

planning YouR WEbSitE /// FINDING AND USING IMAGES
TIP
If you’re selling products from your

website, consider getting professional
photos taken—it can make a big
difference as to how professional
your site looks.
a distinctive font and then use it for

your name or the site’s title on your
header panel—we’ll show you how
to do this in Chapter 5.
If you want to get a logo made,

instant online logo maker at http://buildabrand.com
try:
> buildabrand.com—This is
an online brand-builder that
lets you create and download
a logo on the spot. It’s a free
service, but if you want to use
the logo for your business cards
as well, or have it appear on
a transparent background to
overlay on a different-colored
header, you’ll need to pay $35.
> 99designs.com—You submit

your “design brief,” and then
let dozens of designers from
around the globe enter the
Custom-designed logos from http://99designs.com
competition to design your
logo. You pick the one you like
best, and if you don’t like any
of them, you simply get your
money back. (The process takes
a week, so this is something to Image copyrIght
think about beforehand.) They Don’t take photographs from other people’s
also have a “logo store” that you websites without their permission—you’re
can browse and choose a design not allowed to, there could be copyright
that they will then customize for issues, and you may find yourself slapped
you within 24 hours. with a lawsuit. Stock photos are so
inexpensive that it simply isn’t worth it.
31

chapter 3
“Gypsy Garden” by Jen Furlotte, available from http://pixelsandicecream.deviantart.com
“Lil Tree,” “Abstract,” and “Paper” by http://backgrounds.mysitemyway.com. A Google search for “free website backgrounds” will bring up
dozens of sites where you can get background designs like the ones above. (Remember to credit the designer, if this is required.)
bAckgrounD imAges might be suitable, but you may

places to fInd backgrounds
Most themes let you add images prefer a pattern, or something
http://www.patterncooler.com
to the background of your site; more sober for a business site. http://www.colourlovers.com
this is a very good way of adding http://www.backgroundlabs.com
individuality. For a blog-style site, http://subtlepatterns.com
one of your own photographs
32

Video and audio
PLANNING Y OU R W E B S IT E
Adding videos to your website is a Hosting your video on YouTube
very popular way of adding life to it. or Vimeo is also a great way of
In order to show a video on your site, attracting new clientele. THIRD-PARTY sites
it has to be hosted by a third-party
Content can easily be added to your site
from the following third-party sites:
site such as YouTube or Vimeo; once Audio can also be included in a
YouTube
hosted, WordPress makes it very easy similar way, although the result isn’t
Vimeo
to “embed” videos into your site so yet quite as smooth; we’ll look at
DailyMotion
that they actually appear on your including both video and audio in
Flickr (both videos and images)
own web page, rather than the Chapter 5.
SoundCloud (via a plugin)
visitor having to go to another
site to watch it.
You can easily incorporate videos on your website by hosting them on YouTube.
33

4 Setting up WordPress
You’ve planned out the website you’re going to build;
now it’s time start creating it. The first thing you need
to do is to set up WordPress.
The one-click install

These instructions refer to the setup of the self- install system, it will now be extremely easy
hosted version of WordPress; if you’re planning on to set up WordPress.
using WordPress.com, please see over the page.
Here is how to install WordPress on Dreamhost.
If you’ve followed the advice given previously and It will be a similar process with another host,
chosen one of the suggested hosting companies, although their one-click system may be
or an alternative hosting company with a one-click slightly different.
1. Log into Dreamhost. Go to Goodies > Username: You can change this if you like,
One-Click Installs on the left-hand menu. but it is fine to keep it as “admin.”
2. Scroll down the page a little and click on Password: As you like, but keep the details
“WordPress.” somewhere safe, as this will be the password
3. Click the blue box labeled “Custom Installation.” you use each time you log in.
4. Select your domain and click “Install it for me now!” Your email address: This will be the email address
5. Check your email and look for an email from where you’ll be informed of any updates to WordPress,
Dreamhost, which will arrive in just a few minutes. so make sure it is your main email address.
Click the first link in the email, underneath where Privacy: Uncheck the box, as you don’t want the
it says, “Please create an admin user at:” search engines to visit your site until it is ready;
6. On the web page, fill in the details as follows: we’ll come back to this in Chapter 5. Now click
Site Title: Your business name or the name of “Install WordPress.”
your website (this can be changed later). 7. You’re done! You can now log in.
34

S E T T I N G U P W O R D P R E S S / / / T H E O N E - C L I C K I N S TA L L
1 Goodies One-Click Installer 3
WordPress Version: 3.5
MySQL Databases Author: WordPress
WordPress is an open source content management system
(CMS), often used as a blog publishing application, powered
One-Click Installs byPHP and MySQL. It has many features including a plug-in
architecture and a template system. Used by over 12% of the
1,000,000 biggest websites, WordPress is the most popular
CMS in use today.
Subversion
Cron Jobs Average Rating (32 ratings)

Tags: Blog, CMS, Featured
Amazon CloudFront Custom Installation

DreamHost wiki page
Application Support page
Rate it
Flash Media
Custom One-Click Installer
Media Streaming 4
Install to: Select a domain
Jabber IM
Please be sure there are no files there now
Select Database: Automatically Create Database
Deluxe Install ?
Htaccess/WebDAV Install it for me now!
Block Spiders
Now.... 5
Google AdWords
1. Please create an admin user at:
Chartbeat Analytics http://www.alannahmoore.com/wp-admin/install.php
2 WordPress is a free web- 6

based software you can
use to create a website
or blog. Welcome
Welcome to the famous five minute WordPress installation process! You may want to browse the ReadMe
documentation at your leisure. Otherwise, just fill in the information below and you’ll be on your way to using
Blog, CMS, Featured the most extendable and powerful personal publishing platform in the world.
Information needed
Please provide the following information. Don’t worry, you can always change these settings later.
Site Title
Username admin
Usernames can have only alphanumeric characters, spaces, underscores, hyphens, periods and the @
symbol.
Password, twice
A password will be
MANUAL INSTALL automatically generated for

you if you leave this blank.
If you’ve chosen a webhost that does Strength indicator

Hint: The password should be at least seven characters long. To make it stronger, use upper and lower
not offer a one-click installation, you case letters, numbers and symbols like ! " ? $ % ^ & ) .
will have to carry out a manual install. Your E-mail

The software can be downloaded here: Double-check your email address before continuing.
http://wordpress.org/download. Follow Privacy Allow search engines to index this site.
the step-by-step instructions on the

WordPress.org website: http://codex. Install WordPress
wordpress.org/Installing_WordPress.
35

Setting up using WORDPREss.cOm
chapter 4
If you’re going to use the hosted

version of WordPress (WordPress. Log In Themes Support News Features Sign Up
com), your setup will be even easier, 1 Get started with WordPress.com by filling out this simple form:
and you’ll have your blog up and E-mail Address We’ll send you an email to activate your account,
so please triple-check that you’ve typed it
correctly.
running in just a few minutes.

Username Your username should be a minimum of four
characters and can only include lowercase letters
and numbers.
1. Go to http://wordpress.com, click Password Great passwords use upper and lower case
characters, numbers, and symbols like !"£$%^&(.
“Get Started,” and sign up. Note

Generate strong password
Hide
when choosing your blog name, Blog Address
.wordpress.com Free
Choose an address for your blog. You can change
the WordPress.com address later.
If you don’t want a blog you can signup for just a
you will be able to upgrade to your

username.
Thinking about upgrading? Grabbing the upgrade bundle on signup can save
own domain once you’ve signed up.

you some cash over buying upgrades at a later
Grab the WordPress Value Bundle and save some cash.
date.
Free Blog For more information on each upgrade, hover
over the name for an explanation of the feature.
Domain Name & Mapping
10GB Space Upgrade
It’s up to you whether you want to

No Ads
Custom Design
choose the “Value Bundle” at this Video Press
$99 instead of $166 Free
stage (an upgrade including a domain

per year
You agree to the fascinating

Upgrade Create Blog
terms of service by submitting
name, extra space, a “No Ads” option,

this form. Save 41%
custom design, and an HD video Create Your Own Website Using... Upgrade to Pro New Post Alannah
option); if you’re not certain just yet, 3 Dashboard
Home
Dashboard
Screen Option Help
Comments I’ve Made

Welcome to WordPress.com!
you can always do it later, saving the
Share Some helpful resources:
Site Stats Publish
You are now in your blog’s “dashboard” where you can write In your dashboard:
Akismet Stats
newposts and control lots of important settings and features. Welcome to WordPress.com Video
1 4
My Blogs Write a post
same money if you buy the whole Blogs I Follow
Store
Your dashboard address is only visible to you and it’s at:
wordpress2blog.wordpress.com/wp-admin/ Visual HTML
Status Draf
sibility:
General settings
Your profile
Need help getting started? Visit our zero-to-hero guide
Select your theme
bundle. Click either “Upgrade” or

Publish
Have any technical questions? documentation pages are
Posts Upgrades store: supercharge your blog
open 24/7
Move to Tra
Media Elsewhere:
“Create Blog” accordingly. Links

2 WordPress.tv
3
00:00 02:05 24/7 Support
Pages
Learn WordPress.com: Our zero-to-hero guide.
Comments
Remind Me Later Hide this screen
Feedbacks
2. Once you’ve signed up, check

Appearance
Tip: Update your about page so your readers can learn a bit about you. Hide
Users
Right Now QuickPress

your email inbox and click the
Tools
Settings Content Discussion Have you tried our new home page quick post form yet? Try it now 
Collapse menu 0 Posts 0 Comments
blue “Activate Blog” button in 1 Page

1 Category
0 Approved
0 Pending
Enter title here
Add Media
the email you receive. 0 Tags 0 Spam
3. WordPress will now ask you to

The WordPress.com administration gives you plenty of tips when you first log
follow a series of steps to help you
in to help you get started—a video, a “Zero to hero” guide, and links to support
get up and running with your blog, documentation (3).
but if you’re not ready to complete
any of the steps right now, that
isn’t a problem—just click “Next
Step;” you can come back to any your blog posts automatically find yourself at your WordPress “home
of these later on. You’ll be asked: on Facebook or Twitter) page.” From this area, you can read
i. Which topics you’d like to follow iii. To set up your blog title and other blog posts and check your blog
(other people’s blogs that you tagline; and choose your language stats; there is also a quick link to post
might be interested in reading) iv. To choose and customize a theme to your blog (“New Post,” top right),
ii. Whether to let the system find v. To create your first post. which you may find useful later, but
your friends’ WordPress blogs for now, to finish customizing and
(and at the same time choose When you’ve finished, or when you’ve setting up your blog, you’ll need to
whether you want to publish simply clicked through the steps, you’ll log into your administration area. Do
36

this by clicking “My Blogs” at the top
sEttinG UP WORDPREss /// SETTING UP USING WORDPRESS.COM

of the screen, and then “Blog Admin”
underneath the title of your blog. wordpresswalkthrough Upgrade To Pro New Post wordpresswalkthrough
1 Dashboard
Domains
Store
You are now inside your admin area Store

The main part of your blog URL is its domain. An example of a domain is “wordpress.com’. You can have your blog at any domain you control,
such as example.com, or set up a domain to automatically redirect visitors to your blog URL. Read more about it or enter a domain name below
My Upgrades and follow the prompts.
(see screenshot No. 3 opposite). Premium Themes
Domains
Please contact support if you wish to delete a registered domain.
Clicking the links at the top left of Posts

Add a Domain
http:// Add domain to blog
the screen will let you toggle back Media
and forth between your live site and

the admin area (1). The navigation on
the left-hand side will take you to the
different areas of the administration
(2). Clicking your user name at the
top right (4) will take you back to
your WordPress home page.
First steps
1. Domain—if your site is to carry any
weight, you must have your own
domain name. You may want to
familiarize yourself a little further
with the system before you commit;
when you are ready, go to Store >
Domains, and follow the instructions.
(Your domain can also be purchased
as part of the “Value Bundle.”)
2. Settings—Alter the title and
tagline of your site and set the Activate Live Preview Details
time zone on the Settings >
General page.
To help you choose your theme, WordPress offers you a “Live Preview” option that
3. Profile—Fill in details about lets you play around with the colors and the header, and with certain other elements
yourself at Users > My Profile. (depending on the theme), before you choose to go live with it.
4. Theme—If you skipped this step
during the setup, you can now
choose your theme by going to
Starting to blog
Appearance > Themes. You’ll find
1. Create your first post at Posts > Add New. (You’ll also want to delete
the customization options in the
the existing dummy post from the Posts > All Posts page.)
Appearance > Theme Options,
2. Create any pages you want to add to the site (for example, an “About”
Header and Background areas
page) in the Pages > New Page area.
(options vary theme to theme).
3. Add sidebar widgets (including Facebook and Twitter, if you use them)
by going to Appearance > Widgets.
4. Categorize your posts at Posts > Categories.
See the example site at http://create 5. Customize your menu at Appearance > Menus.
yourwebsiteinaweekend.wordpress.com 6. Check and reply to your comments in the “Comments” area.
37

5 Step-by-step:
creating a basic model website
You’ve planned your site and you’ve set up WordPress.
We’re now going to see how to create a basic website.
This walkthrough uses the WordPress default theme. website. Some of you may want to start
We can consider this a “starter recipe” from which immediately on something more complex; do
you can move on to more advanced setups once follow the walkthrough in its entirety, however,
you have mastered the basics. The current default as you will learn things here that you will need
theme has a clean, simple, and attractive design, to know later on, when customizing a more
and you may find this is the perfect theme for your complex template.
Introducing the default

WordPress theme “Twenty Twelve”
1. T
he title and tagline or header text. Here is where 5. Footer widgets. This isn’t standard in every
you put your business name and an optional short theme, but this theme gives you the option
subtitle. You can change the font color, or choose to include widgets (small elements of content;
an image header instead and omit the text. see no. 9) at the bottom of the home page.
2. The background. You can change its color or 6. The footer. This theme links to the WordPress
upload an image to use. website, but you could put your name and
3. The menu. You can create levels of drop-down copyright notice in this space as well.
menus. These only appear when the user runs 7. The header panel or image.
their mouse over the main menu item. It’s optional to include an image, known as
4. The page text. Here you can have introductory a header, at the top, as well as, or instead of,
text or blog posts. the header text. If you choose a header image,
38

it will appear on all pages of the
s t e P - B y- s t e P : C r e At I n G A B A s I C m o d e l W e B s I t e / / / I N T R O D U C I N G T H E D E F A U L T W O R D P R E S S T H E M E “ T W E N T Y T W E LV E ”
site. This one is purely decorative,
but you may want to include a 2
logo or business name in yours. Create Your Own Website Using WordPress in a Weekend
8. The sidebar. Your blog pages Demo site using the Twenty Twelve theme 1
include a column to the right-hand HOME ABOUT FULL-WIDTH PAGE BLOG CONTACT
3
side, but for the main pages, you
4
you may choose to omit the
sidebar and have the text cover
This is a dummy website set up to accompany Chapter 5 of Create Your Own Website Using
WordPress in a Weekend.
the full width of the site. In this chapter of the book we see how the WordPress default theme “Twenty Twelve”,
9. Sidebar widgets. You can put any

released as the default theme as from December 2012, can be used to create a simple website
for any kind of business or personal site, or blog.
content you like in the sidebar. It’s The new default theme has a clean and fresh design and is fully responsive, meatning that it
great for things like testimonials,

looks really good on smartphones and tablets.
special offers, social media buttons

(see page 143), or your latest blog
or news posts.
WIDGET AREA RECENT BLOG POSTS
This is a useful widget area where you might choose to put more information This is the blog section of the site
about you on the front page, so that visitors get more information at a glance
This is an aside
which they might otherwise miss.
This is an image post
This is a link
This is a quote
5 Search
6
Proudly powered by WordPress
Copyright © 2012 Alannah Moore. All rights reserved.
Create Your Own Website Using WordPress in a Weekend

You can see the demo site live online here: Demo site using the Twenty Twelve theme
http://www.createyourwebsiteinaweekend. HOME ABOUT FULL-WIDTH PAGE BLOG CONTACT
com/twentytwelve 7
The “Twenty Twelve”

default theme Featured post
RECENT POSTS
> Has a clean and modern, This is the blog section of the site
This is an aside
uncluttered feel This is an image post

This is a link
> Can be made your own with 9 This is a quote

8
a number of customization
SUBSCRIBE TO BLOG VIA EMAIL
options
Enter your email address to subscribe
> Is “responsive”, so it looks to this blog and receive notifications of
new posts by email.
great on a smartphone or
a tablet
> Is suitable for many kinds of
website—personal, business
or blog.
39

The live site and
chapter 5
AdmIn AreA
The first thing to understand when

working with WordPress is that there
are two distinct areas of your website. Create Your Own Website Using WordPress... New Edit Page
The first is the live website, which Dashboard

is visible by going to your domain.
Themes
The second is the admin area, which
Customize
cannot be seen or accessed by
visitors to your website, only by Widgets r Own Website
you or others you choose to add Menus
using the Twenty Twelve theme
as administrators. Background
Header
Your admin area—also referred to FULL-WIDTH PAGE GAL
as the back end—can be accessed

here: http://www.yourdomain.com/
The Dashboard can be accessed from the dark gray strip that appears on your site once you’re
wp-login.php.
logged in.
When you are customizing a

Create Your Own Website Using WordPress in a Weeken
WordPress website, you make http://www.createyourwebsiteinaweekend.com/twentytwelve/wp-admin/optio
changes to your website in the
admin area, and you can then see Google SSL Search
those changes on the live website.
Create Your Own Website Using... Dashboard < Create Your Own We...
You will need to switch back and Create Your Own Website Using WordPress... New Edit Page
forth between the two areas while
you are customizing your site.
Once you are logged in to WordPress,

the front page of your site will show Create Your Own Website Using
a dark gray strip at the top of it
You may find it easy to work with two tabs open, one showing the live website, and the other
(other people won’t see this when
showing the admin area. Refresh the page on the live website to see how your changes look.
they visit your site) that allows you
to switch back and forth between
the live site and the admin area, so
you can make changes and then
check how they look.
“Dashboard,” it will take you to in one tab, and the admin area open
The strip offers you various choices your admin area’s home page. in another tab. I find this the easiest
that will become familiar once you way to make changes and check
are more accustomed to working An alternative way to work with how they look, but it is up to you
with WordPress. If you click on WordPress is to have the site open how you choose to work.
40

The AdmIn AreA
This is how your dashboard—or the

home page of your admin area—will
Create Your Own Website Using WordPress... New Howdy, admin
look when you first log into it. Dashboard Screen Options Help
Dashboard
Home
Updates
Dismiss
On your left, you will see a navigation Posts
Welcome to WordPress!
Media 1
column (1) that takes you to different Pages
We’ve assembled some links to get you started:
admin areas. If you click on one of Comments

Get Started
First tweak the look of your site:
Next Steps
Write your first blog post
Learn How To
Add image/media
Appearance
the items, you will see that a series Plugins
Customize Your Site
Add an About page
View your site
Add/remove widgets
Edit your navigation menu
of sub-menu items becomes visible. Users or, change your theme completely
Tools
These options are also visible if you Settings
Right Now QuickPress
roll your mouse over them. Collapse menu
Content Discussion
Enter title here
1 Post 1 Comment
Upload/Insert
1 Page 1 Approved
The larger, main area of the page 0 Category 0 Pending
(2) is where you will actually do 0 Tags 0 Spam

Tags (separate with commas)
your editing or your customization,
Theme Twenty Twelve with 6 Widgets
You are using WordPress 3.5 Save Draft Reset Publish
according to which part of the admin

Recent Comments Recent Drafts
area you are working in.
The Dashboard is the home page of your admin area.
Dashboard Screen Options Help

Add New Page
Posts
Media
Publish
Pages Add Media Upload/Insert Save Draft Preview

Visual Text
All pages Status: Draft Edit
Add New
Visibility: Public Edit
Comments
Publish Immediately Edit
Appearance
Move to Trash Publish
Plugins
Users
Page Attributes
TIP Tools
Parent
Settings
(no parent)
Collapse menu
You will want to bookmark the web Template
address of your admin area so you can

Default Template
Order
come back to it easily. Bookmark this Path: p

0
page: http://www.yourdomain.com/wp- Word count: 0 Need help? Use the Help tab in the upper right
of your screen.
admin (obviously substitute your real 2 Featured Image

domain name!). If you check the box Choose a Featured Image
labeled “Remember Me” when logging

in, you can go straight into the admin This is the screen you will use when you are adding a new page to your site. The left-hand navigation
area each time you visit, without having is visible wherever you are inside the admin area, so you can easily find your way around.
to log in.
41

First
chapter 5
stePs
At this point you’re probably keen to STEP 1: GEnEral SETTinGS 3. You can also change the time
dive into the fun part of customizing 1. On the left-hand navigation, zone to correspond to where
your new demo site, but before you click Settings > General. you are, so that your blog or
begin, you need to carry out a few 2. Here you can change the site news posts are stamped with
preliminary steps. title and tagline that you set up the correct time.
during the installation, as well 4. You don’t need to change
You’ve probably noticed that there as the email address where the anything else on this page.
are several useful links on the WordPress update notifications When you have finished, click
dashboard inviting you to begin will get sent. the blue “Save Changes” button.
setting up your website. You will
be able to explore these at your
leisure, but for the purposes of this
walkthrough, we will follow a series
of steps that will help you to get up
Settings General
and running more quickly.
Writing
Remember that WordPress is a very Collapse menu
full-featured software that can be
Reading
made to do all kinds of things. As Discussion
you navigate around the admin area,
you will see many different options Media
offered to you. For now, you only
Permalinks
need to follow the steps in the
walkthrough. Other, more complex
setups will require you to implement
some of these alternative options,
Save Changes
but for our initial purposes, you
won’t need them.
STEP 2: SEarch EnGinES

You’re setting up a dummy site, 1. In the navigation, go to Settings
so you don’t want the search > Reading.
engines to visit your website just 2. Check the checkbox next to
yet. When you’re done setting “Discourage search engines
up your real, live site, you will from indexing this site.”
certainly want it listed, but until 3. Click the blue “Save Changes”
then it’s best to keep your site button.
under wraps.
42

Step 3: Comments creating the main pages of your 3. A
t this stage, you don’t have
STE P - B Y- STE P : C RE AT I N G A B A S I C MODEL W E B S I TE / / / first steps

1. Click Settings > Discussion. site, you can come back here and to change anything else on this
enable the comments. That way, page, so you can click the blue
ere, you can decide on your own
H when you add your blog or news “Save Changes” button.
default setting—whether or not posts, the comments will be enabled
you want to allow people to leave automatically for your blog section.
comments on your site. The setting
can be overridden for individual 2. S
o, to disable comments, uncheck
pages, so your decision isn’t the box next to “Allow people to
definitive; it’s more a matter of post comments on new articles.”
what is convenient for you.
(You may have a question at this
It’s my guess that you won’t want point concerning spam messages
people to leave comments on the or unwanted comments displaying
main pages of your site, but for on your site. There is a simple way
your blog (news) posts, you will. to prevent this happening, which
If this is the case, you can disable we will address a little later when
the comments for now. When your we’re looking at plugins.)
site is set up and you have finished
Discussion Settings
Default article settings Attempt to notify any blobs linked to from the article
Allow link notifications from other blogs (pingbacks and trackbacks)
Allow people to post comments on new articles
(These settings may be overridden for individual articles.)
TRACKBACKS AND PINGBACKS

Trackbacks and pingbacks are notifications you receive when another blog has linked to
your site content. Unfortunately, these notifications are very often spam, so you may want
to uncheck the checkbox next to “Allow link notifications” so that you don’t receive them.
43

STEP 4: your namE on your 2. Add your first name and surname site, however—in which case, type
chapter 5
bloG or nEwS PoSTS into the appropriate fields, and a nickname into the nickname field
1. Go to Users > Your Profile. When look at the drop-down menu and select it on the drop-down.
you post a news item in your blog below—you will see that various 3. There is no need to change
area, it will show up as having been arrangements of your name have anything else now, so just click
posted by “admin,” unless you magically appeared as options to the blue “Save Changes” button
choose to set it to something choose from. You may not want at the bottom when you’ve
that looks more personal. your real name to show on the finished.
Name
Username admin Usernames cannot be changed.
First Name
Last Name
Nickname (required) admin
Display name publicly as admin
How to get a gravatar

One thought on “This is an image post”
In order to have your own picture show up when you respond
to a blog comment, you need to get a “gravatar.” This means a
“globally recognized avatar”—in other words, an image of your Alannah
October 31, 2012 at 5:57 pm
own choosing, tied to your email address, that will show up
wherever you post on the web using the same email address.
What a beautiful picture of Venice. I was there last October.
To set up yours, go to http://en.gravatar.com (for different
languages click the “Languages” link down at the bottom of
the page). One thought on “This is an image post”
When you have the Jetpack plugin installed on your site (see alannahmoore
page 75), site visitors will be able to find out more about the
Paris/London
Want a better profile? Click here.

profile of commenters who also have gravatars by hovering
View Complete Profile
over their image. You can enable this in Settings > Discussion. Turn off hovercards
You can also put a gravatar image of yourself in the sidebar.
44

Step 5: Permalinks 1. Go to Settings > Permalinks.
STE P - B Y- STE P : C RE AT I N G A B A S I C MODEL W E B S I TE / / / first steps

The last thing to do in the “First 2. Check the radio button next
Steps” section is to change your to “Post name.”
permalinks—that is, the web 3. As before, click the blue button
addresses of new pages you are at the bottom when you’re done.
going to create in WordPress. If you
change nothing here, you will find You are now ready to move onto
your new web pages are allocated the fun part of the customization—
strange-looking web addresses like changing the way your website looks.
http://www.yourdomain.com/?page_
id=2. These don’t look very tidy, but
more importantly, they mean nothing
to search engines, and therefore will
not help drive traffic to your site.
If you make the following change,

your web addresses will look
something like this instead: http://
www.yourdomain.com/contact/.
Permalink Settings
By default WordPress uses web URLs which have question marks and lots of numbers min them, however WordPress offers you the ability to create a custom URL stucture
aesthetics, usability, and forward-compatibility of your links. A number of tags are available, and here are some examples to get you started.
Common Settings
Default http: / / www. c r e a t e y o u r w e b s i t e i n a w e e k e n d . c o m / t w e n t y t w e l v e / ? p = 1 2 3
Day and name http: / / www. c r e a t e y o u r w e b s i t e i n a w e e k e n d . c o m / t w e n t y t w e l v e / 2 0 1 3 / 0 1 / 1 3 / s a m p l e - p o s t /
Month and name http: / / www. c r e a t e y o u r w e b s i t e i n a w e e k e n d . c o m / t w e n t y t w e l v e / 2 0 1 3 / 0 1 / s a m p l e - p o s t /
Numeric http: / / www. c r e a t e y o u r w e b s i t e i n a w e e k e n d . c o m / t w e n t y t w e l v e / a r c h i v e s / 1 2 3
Post name http: / / www. c r e a t e y o u r w e b s i t e i n a w e e k e n d . c o m / t w e n t y t w e l v e / s a m p l e - p o s t /
Custom Structure http: / / www. c r e a t e y o u r w e b s i t e i n a w e e k e n d . c o m / t w e n t y t w e l v e
45

The
chapter 5
heAder
Appearance Themes
Click on Appearance > Header
Widgets
Plugins on the left-hand navigation.
Menus
Users Header
Tools Background
Editor
Settings
You will be taken to a page
Collapse menu
like the one below.
Dashboard Help
Custom Header
Posts
Header Image
Media
Preview
Pages
Comments
Create Your Own Website Using WordPress in a
Appearance Weekend
Themes Demo site using the Twenty Twelve theme
Widgets
Menus
Header
Select Image You can select an image to be shown at the top of your site by uploading from your computer or choosing from your media library. After
Background selecting an image you will be able to crop it.
Editor Suggested width is 960 pixels. Suggested height is 250 pixels.
Plugins Choose an image from your computer:
Choose File no file selected Upload

Users
Tools Or choose an image from your media library:

Choose Image
Settings
Collapse menu Header Text
Header Text Show header text with your image.
Text Color
Select Color
Save Changes
This page is where you choose > just a header image, which Have a look at the example
whether your site will have: incorporates your website title screenshots to see how the different
> a text heading or business name, and your logo, layouts appear, then play around
> a text heading with a header if you are going to use one with the options to decide which
image beneath it is best for your own site.
46

oPTion 1: a TExT hEadinG
s t e P - B y- s t e P : C r e At I n G A B A s I C m o d e l W e B s I t e / / / T H E H E A D E R
The clean design of the default
theme ensures that your website Japanese Cookery Classes
title, or business name, looks Learn Japanese cooking at your own home
attractive simply written in text HOME ABOUT CLASSES MENUS GALLERY BLOG CONTACT
at the top of the page, as you

can see in the screenshot right. Japanese cookery classes at your home
Learn how to create perfect Japanese dishes at your own home. Our classes
provide a wonderful, informal way of learning the delights of Japanese cooking.
If you choose the text-only option,
Choose from the following courses:
you will want to add some visual
•
interest on the front page by adding •
Sushi and Sashimi
Noodle dishes
•
a picture alongside your home page •
Canapes
Dumplings
•
text, as I have done here. Gourmet course - a series of six classes
Our teachers are experienced and friendly and will bring all the equipment and
ingredients you need to your own home.
To choose the text-only option that

you can see here, you don’t need to
do anything as this is the default
setting. (On the “Custom Header” Header Text
page, the checkbox next to “Show
Header Text Show header text with your image.
header text with your image” should
already be ticked.)
Text Color Select Color
Remember that if you want to change
the header text or subtitle, the place
to do it is in Settings > General. Text Color
Current Color #ba3434 Default
To change the color of the text:

1. In the “Header Text” area of the
page, click on the box labeled
“Select Color,” and a color-picker
device will appear.
2. Click once inside the square, and
move the slider up or down the
color column to the right until
you’re in the range of colors you’re
looking for. Fine-tune your choice
within the square. You can preview
the color you’re choosing at the
top of the page. (Click the
“Default” button if you need to WeBSITe ColoRS
go back to where you started.) Web colors are defined using a “hexadecimal code” of six letters and numbers (sometimes
3. When you’ve chosen your heading shortened to three). This is the code you can see next to the hash sign (#) in the image
color, click “Save Changes.” above. The code #FFFFFF means white, and #000000 means black. There is no need to
remember these, but using “hex“ codes can be a useful way of making elements match
exactly, if you want them to.
47

oPTion 2: a TExT hEadinG
chapter 5
wiTh a hEadEr imaGE

Japanese Cookery Classes Adding an image to the header area
Learn Japanese cooking at your own home is a really good way of making your
HOME ABOUT CLASSES MENUS GALLERY BLOG CONTACT
site look unique.
However attractive a header image

can look, including one won’t be the
best choice for all websites,
Japanese cookery classes at your home particularly business ones. I decided
Learn how to create perfect Japanese dishes at your own home. Our classes for my live demo website not to have
provide a wonderful, informal way of learning the delights of Japanese cooking.
a header image, but to make the
Choose from the following courses: page visually interesting by including
•
•
Sushi and Sashimi
Noodle dishes
an image of the book cover next to
• Canapes
the home page text instead (see
page 39, or the live site at http://
Choose an image from your computer: www.createyourwebsiteinaweekend.
Choose File no file selected Upload com/twentytwelve).
You can add any image you like to

se Cookery Classes New Howdy, admin
Help
Crop Header Image
Choose the part of the image you want to use as your header.
the header area, and you can even

upload several images, which will
mean your site visitors will see
different, random, images shown in
the header area as they surf around
the pages of your site. This is an
interesting and fun touch, particularly
suitable for a personal website or
a blog.
To add a header image:

1. Underneath “Choose an image
from your computer,” click the
“Choose File” button.
Crop and Publish

Navigate to the image you want to
use on your computer, select it, and
click “Choose” or “Open,” depending
on whether you are using a Mac or
a PC. Then click the “Upload” button.
48

2. Now, choose the area of the
image you want to use for the
To display random images:
header—see opposite.
If you choose the random option, your site visitors will see a different
header image displayed on each page they visit.
You can move the selected area
around and resize it by moving the
1. Upload and crop some more header images in the usual way.
borders with your mouse. (If you
2. Click the radio button next to “Random: Show a different image
lose your selected area, just click and
on each page.”
select again; if you are uploading a
3. Click the “Save Changes” button at the bottom of the page.
digital photo, you will need to scroll
to the right to include the full width Random: Show a different image on each page.
of the image.)
When you’re happy with what you’ve

selected, click “Crop and Publish.”
(Do not worry if the area you have
selected looks huge—the system will
Deleting header images
automatically resize it to fit the width
If you upload a header image and find it doesn’t look good, you can easily
of the site.)
delete it by going to Media > Library. Hover your mouse over the thumbnail
of the image you want to remove, and click on the red “Delete Permanently”
3. When you see the yellow “Header
link that appears. (You will need to delete headers you don’t want to show
updated” notice at the top of the
if you are choosing the random option, as the system will show all headers
screen, go to your live site to see
that are uploaded.)
your new header in position.
cropped-IMG_2554.jpg - Header Image

JPG
Edit | Delete Permanently | View
ReSIzING youR heADeR ImAGeS

If you’re going with the random images option, you may want to make sure all your header
images are the same size, so that when your site visitor browses from page to page, the
transition is smooth. Unfortunately, cropping images as you upload them inside the “Custom
Header” area doesn’t allow you to see the dimensions of the crop area, which makes it
impossible to match sizes at the upload stage. To make them all the same size, you can
either change their size once they’ve been uploaded to the Media Library (see page 66),
before selecting them as header images, or you can do it before you upload the images,
using an image-editing tool such as Pixlr to crop them at the same size (see the next page
for info on how to use Pixlr). Image headers need to be 960 pixels in width, and can be any
height you choose.
49

oPTion 3: JuST a hEadEr imaGE title and/or logo into it so that your
chapter 5
If you choose to leave out the text site has a heading. This, you can’t
heading and put only an image at do inside WordPress—you’ll need
the top of your website pages, you to use an external image-editor such
will want to incorporate your website as Pixlr (see below).
To add a header image:

1. Upload your header, as per
Option 2 before.
2. Uncheck the text box next to
HOME ABOUT CLASSES MENUS GALLERY BLOG CONTACT
“Show header text with your

image.”
3. Click the blue “Save Changes”
button and check how your
Japanese Cookery Classes
Learn how to create perfect Japanese dishes at your own home. Our classes provide a wonderful, informal way of learning the delights of
website looks.
Japanese cooking.
• Sushi and Sashimi

• Noodle dishes
• Canapes
• Dumplings
• Gourmet course - a series of six classes
How to create a header using Pixlr.

1. Go to http://pixlr.com and click
on “Open Pixlr editor (Advanced).”
1
PHOTO EDITING SERVICES Home Pixlr Editor Pixlr Express Pixlr-o-matic Pixlr Grabber Pixlr imm.io Support Blog Contact 2. Choose “Open image from
Welcome to the most popular
computer.”
online photo editor in the world!
Open P i x l r editor (Advanced) Navigate to the image on your

OR
computer and select it, so that
Open P i x l r express (Efficient)
it opens up in Pixlr.
OR
Open Pixlr-o-matic (Playful)

3. If you are using a digital photo
Available for
Available on the iPhone for your background, before you
do anything you will need to
reduce the size of your image.
Convert
Download
1) Click the download button
Images
2) This will take you to our website
3) Download the product
Advertisement
Go to Image > Image size.
50

4. If you want to use the entire width
of your photograph for your header,
set the width at 960 pixels. If you Image size
4 5
only want to use part of it, try it Width: 960 pixels OK Tools
slightly larger at, for example, 1200 Height: 717 pixels Cancel
pixels (you may need to experiment a
Constrain proportions
little to get the right size). Keep the
box next to “Constrain proportions”
checked, so that the image doesn’t File Edit Image Layer Adjustment Filter View Language Help
5 Constraint: Aspect ratio Width: 960 Height: 125
become distorted; do not change the No restriction
Tools Aspect ratio
figure given for the height, as this Output size
will adjust automatically.

5. Select the crop tool from the
6
toolbar you can see on the left.
In the “Crop options” area, choose

“Aspect ratio” from the “Constraint”
drop-down, and select your width and
height options. The width needs to be
set at 960 if it is to go right across the
top of the website; you can set the
height at whatever you choose. The
suggested header height for the
default theme is 250, however I feel
that for a business site, a narrower
header often looks better. Here, I am
choosing to create a narrow header IMG_1214
8
of just 125 pixels.
6. With your mouse, select the area

you wish to use for the header. Once
you have made a selection, you can
reposition it by dragging it. Here,
I’m using the entire width of the
image, but you may not wish to;
the proportions will remain correct
if you choose a smaller area.
7. Click anywhere outside the image,
then click the “Yes” button when
asked to confirm the change.
8. Before you go any further, make
sure you’re seeing the header at
its actual size. Type “100” in the
percentage area at the bottom
100%
100 % 960x125 px px
960x125
left of the image window, and
press “Enter.”
51

Then make the window larger by
chapter 5
grabbing and enlarging from the Text:

9 10
bottom right corner, so that you can JAPANESE COOKERING CLASSES
see the full width of the header.
9. Next, you’ll need to add some

lettering. Select the type tool Font:
from the left-hand toolbar. Gill Sans MT
10. Click inside the image, and Size: Style: Color:
a window will appear. 72 Regular
Type your header text into the text box. OK

The options below let you choose the
font, the size, and whether the text is Color selector Color selector
10 HSL RGB WEB IMG HSL RGB WEB IMG

10
in bold or italic. Click the “Color” box
H: 0 R: 0 H: 208 R: 141
S: 0 G: 0 S: 27 G: 169
L: 0 B: 0 L: 76 B: 194
to choose the color of the text. # 000000 # 8da9c2
There are a number of ways you can

choose the color, of which the “HSL”
and “IMG” tabs will probably be the H: 0
S: 0
most useful. “HSL” stands for “Hue, L: 0

Cancel OK Cancel OK
Saturation, Lightness,” and is just

another of several ways used to The HSL tab of the color picker. The IMG tab of the color picker.
describe color. In this tab you can
choose colors from a color wheel Save image
11
similar to the one we’ve seen in My computer Name:
header
WordPress. The “IMG” tab gives you imm.io
Format:
a selection of colors picked out from Pixlr library JPEG (Good for most photos)
the image. You can also move your
Facebook Quality: 100
mouse over the image and select a
Flickr
color directly from it, or type a
six-number color code into the box Picasa
if you want it to match another color

you’re going to use on your website
Size: 172 KB
See box on “Website Colors,” page 47.
Cancel OK
11. When you are happy with the

look of the header, click File >
Save (from the Pixl menu—not
your internet browser menu!). 12. Finally, upload the file to your
website, not forgetting to unselect
Name the file and save it to your the header text option, as you
computer, choosing jpeg format won’t want it to appear there
and 100% quality. as well as the header.
52

Incorporating a logo into your
header New image:
2
Note that you will need your logo Name:
on a transparent background before header
you begin, if you are going to put it Presets: Tools

4
on a background other than white. 800 x 600
Width: Height: 3
1. Open the Pixlr editor as before 960 125
and choose “Create a new image.” Transparent
2. Name the new file “header,” and

type the width and height in the Set main color
Cancel OK
boxes. As before, your width will
need to be 960 pixels; for the
height, make your choice (here, Tools
Tools
6 name 7
I have set a height of 125 pixels).
(Ignore the drop-down titled
“Presets”.) When you are finished,
click “OK.” 100 % 373x45 px
3. Click the large rectangle at the Marquee tool (M)

bottom of the left-hand toolbar.
File Edit Image Layer Adjustment Filter View Language Help
10 Constraint: No restriction Width: 0 Height: 0
Select the background color of your Tools header
header from the color picker that

comes up, or type a “hex” color
Save image
code into the box if you have a My computer Name:
100 % 960x125 px
color reference you want to match.
header
imm.io
Format:
Click “OK.” Pixlr library JPEG (Good for most photos)
Facebook Quality: 100
Flickr
4. Click the paint bucket tool from Picasa
the left-hand toolbar.

5. Click inside your header, and the Size: 33 KB
color will change from white to Cancel OK
the color you have chosen.

6. Open your logo file by choosing
File > Open image (again from
the Pixlr menu, not your internet
browser menu) and selecting your 8. Select your logo by dragging as before, saving the header to
logo from your computer. When it your mouse across it. your computer at 100% quality.
opens in Pixlr, you will notice your 9. Click Ctrl+C (PC) or Cmd+C (Mac) 11. Upload it to your website via
logo has a gray and white checked to copy the logo, then click inside the “Custom Header” area, not
background; this is merely to the new header image, and click forgetting to uncheck the box
indicate that the background is Ctrl+V (PC) or Cmd+V (Mac) to next to “Show header text with
in fact transparent. paste it in place. your image.”
7. Click the marquee tool in the 10. Use your mouse to position the
toolbar, which lets you select logo where you want it, then click
a rectangular area of an image. File > Save (from the Pixlr menu),
53

The
chapter 5
BACkGround
You’ve customized the header part of your website; now it’s time to look
at the background. Appearance
Themes
Click on Appearance > Background.
Widgets
From this page, you can either upload an image file that will act as a page Menus
background, or choose a different background color.
Edit CSS
For a more personal site or a blog, a background image or pattern can Header
work really well, as it will make your site look completely unique. For a
Background
business site, I recommend a plain color—a background can work, but
make sure the one you choose is subtle. Editor
To upload an image for the

background: Display Options
1. Click “Choose File,” and then select
Position Left Center Right
the image you want to use from
your computer. When you have Repeat No Repeat Tile Tile Horizontally Tile Vertically
made your choice, click “Upload.”
Attachment Scroll Fixed
2. Having uploaded an image, you
now have a few options:
If you have chosen an image

taken with a digital camera as your but it’s most likely that you’ll want To change the background color:
background, the image is likely to it to tile. 1. As before, when you changed
be large enough to cover the entire the color of your header text,
computer screen, so none of the Clicking the radio button next to click on “Select a Color” and
position or tile (repeat) settings “Scroll” will make the background choose the color you want
will apply. move as well as the page when the using the color picker.
visitor scrolls down it. I recommend 2. Click the “Save Changes”
If your image is smaller than the the “Fixed” option, as this keeps button when you’re done.
screen area, you can choose whether the background in the same position
to repeat it horizontally or vertically, while you scroll down the pages, but
“tile” the screen entirely with it, or you can try out both and see which
position it to the left, right, or center one you prefer.
of the screen. If you’re unsure,
experiment with the different 3. Click the “Save Changes” button
settings to see how these look, when you’ve made your choice.
54

Creating
s t e P - B y- s t e P : C r e At I n G A B A s I C m o d e l W e B s I t e / / / T H E b A C k G R O U N D / / / C R E AT I N G P A G E S
PAGes
Now that you have the basic Create Your Own Website Using WordPress... New Howdy, admin
Screen Options Help

Dashboard
Pages
appearance of your site in place, Posts
Add New
Search Pages
All (1) | Published (1)
you are ready to move onto the Media
Bulk Actions Apply Show all dates Filter 1 item
Links
content. Let’s see how to create Pages Title Author Date
pages for your site. All Appearance

Pages
Add New
Sample Page
Edit| Quick Edit| Trash| View
admin 3 hours ago
Published
Title Author Date

Comments Move this item to the Trash
You’ve probably noticed that Appearance
Plugins
Bulk Actions Apply 1 item
WordPress has created a sample Users
page for you; we need to delete

Tools
Settings
this before we begin. Collapse menu
Click on Pages > All Pages, which

will take you to a page like the one
on the right.
At the moment, there is only one Thank you for creating with WordPress.
page listed because there is now

only one page present—when you will see some links appear—click on how to rearrange the menu shortly,
create more pages, they will all be “Trash” and the page will be deleted. so don’t worry, for now, if you see
listed here. Move your mouse over Now you can create the pages you your pages appearing on your site
the title “Sample Page,” and you want on your site. (We will look at in the wrong order on the menu.)
Let’s start with your home page. Create Your Own Website Using WordPress... New
Dashboard
Jetpack Add New Page
1. Click either the “Add New” button Posts Enter title h Publish
Media
at the top of the page, or the Pages
Save Draft Preview
Upload/Insert Visual HTML Status: Draft Edit
“Add New” link in the left-hand All Pages

Add New
navigation. Comments Publish Immediately Edit
Feedbacks Move to Trash Publish
You will be taken to a page like the Appearance
Page Attributes
one on the right. Plugins
Users Parent
2. Type “Home” in the title area Tools

(no parent)
Settings
(indicated). Collapse menu

Template
Default Tem te
3. Look in the “Page Attributes” Order
box to the right of the screen. 0
Path: p Need help? Use the Help tab in the upper right of
From the drop-down entitled Word count: 0 your screen.
“Template,” select “Front Page

Template.” (Ignore everything Step 3—for the other pages of You’ll be able to fill in the content
else in this box.) your site, you don’t need to apply of your website pages in a minute—
4. Click the blue “Publish” button. the special front page template, as there’s one step to carry out first—
Repeat for the other pages you they’ll automatically be saved with so create the pages and save them
are planning to create, but omit the regular, default layout. without any content for now.
55

Choosing your home page
chapter 5
The default setup for WordPress

is to display your blog posts on
the front page. But it’s very likely
that if you are creating a site to Reading Settings
showcase your business, this setup
Front page displays
will not suit you—you will probably Your latest posts
prefer to write some introductory

A static page (select below)
text about your business on the
home page instead (as discussed Front page: Home
in Chapter 3), and keep the blog Posts page: Blog

posts (if you are going to create
a blog) in a separate area. If you
want to create your own text for
the front page and put the blog
posts elsewhere, work though the
to create a blog section, just leave
following steps; if you want your
the second drop-down as it is.)
blog posts on the front page, you
4. Click “Save Changes” at the
can skip this section.
bottom of the page. If you go to
your live site, you’ll see your new
1. First, make sure that you have
home page (which is currently
created and saved a page entitled
empty) on the front page, and if
“Home” as explained on the
you have created a blog section,
previous page (it doesn’t matter
you’ll see that the dummy post
that at this stage it is still blank—
that was previously on the front
you will be able to fill in your
page is now there. When you’ve
page content in just a moment).
created your real blog posts, this
2. If you want a blog section on
is where they will appear.
your site, make sure you have
also created and saved a blank
Now we will look at the features of the
page entitled “Blog,” “News,” or
text-editing area, so that you can put
whatever title you may prefer.
your content onto your site pages.
(This page should stay blank as
it will simply contain your blog
posts—you’ll see what I mean
in just a moment.)
3. Go to Appearance > Reading.
Check the radio button next to “A
static page;” select “Home” in the
first drop-down which is labeled
“Front page;” and the title of your
blog page in the second, labeled
“Posts page.” (If you are not going
56

Working with the
s t e P - B y- s t e P : C r e At I n G A B A s I C m o d e l W e B s I t e / / / C H O O S I N G Y O U R H O M E P A G E / / / W O R k I N G W I T H T H E T E x T E D I T O R
text edItor

Pages Add New
Posts
Search Pages
All (6) | Published (6) | Trash (5)
Media
Pages
Bulk Actions Apply Show all dates Filter 6 items
All Pages Title Author Date

Add New
About admin 2012/10/22
Comments Edit | Quick Edit | Trash | View Published
Appearance Bl Edit this item admin 2012/10/18

Published
Plugins
Contact admin 2012/10/22
Users Published
Tools
Full-Width Page admin 2012/10/18
Settings Published
Collapse menu Gallery admin 2012/10/18

Published
Home admin 2012/10/18

Published
Title Author Date
Bulk Actions Apply 6 items
Paragraph
To add content to your pages, go familiar to you from using Word beneath. This button is known as
to Pages > All Pages. Click the title or other text-editing software. the “Kitchen Sink” button; the idea
of the page you want to edit (or is not to clutter up too much of
the small “Edit” link that appears Over the page is a guide to the your screen with buttons that you
underneath it when you move your various items you can use when may not need to use—but it can
mouse over it), and you will be taken editing text. be confusing if you haven’t come
to the “Edit Page” area for that page. across it before.)
(If you can’t see both rows of buttons,
Inside the “Edit Page” area, you’ll see click the button indicated above and
many formatting buttons that will be the second row of buttons will appear
57

TExT-EdiTinG oPTionS
chapter 5
1 3 5 7 9 11 13 15
2 4 6 8 10 12 14
Permalink: http://www.createyourownwebsiteinaweekend.com/twentytwelve/home/ Edit View Page
26 Add Media
Visual Text
Paragraph
17 19 21 23 25
16 18 20 22 24
1, 2, 3, 17 Bold, italic, strikeout, 18 Left or right justify button. 12 Inserts a “Read More” link (this
and underline buttons. 10, 11 Add or remove a link button. To does not work for pages; it is used
4, 5 Bullet and numbered list keys. add a link, select the text to be made only for blog posts).
6 Blockquote—a way of making your into a link, click the link button, and a 13 Spell-checker button.
text stand out. Highlight the text you window will come up; then, type the 14 Full-screen button—it is sometimes
want to display in this way and then web address in the “URL” field, check easier to type with a full screen, as the
click the blockquote button. the box so the link will open in a new text appears more clearly and there
7, 8, 9 Left-align, center, or right- window, and click “Add Link” (see are fewer distractions.
align buttons. below right).
Insert/edit link
6 About 10
Enter the destination URL
Paste from Word
This is where you will write a bit of information about you or your business. URL http://www.createyourwebsiteinaweekend.com
Title
This is an example of text set out with the “blockquote” format. It’s a good way of making Open link in a new window/tab
your website text stand out.
Or link to existing content
Cancel Add Link
58

s t e P - B y- s t e P : C r e At I n G A B A s I C m o d e l W e B s I t e / / / W O R k I N G W I T H T H E T E x T E D I T O R
15 The “Kitchen Sink” button.
16 Text style drop-down. Use this
Exit fullscreen Visual Text Update
menu to format text. “Paragraph” 14

will give you normal-sized text; the Home
different heading options will give This is a dummy website set up to accompany Chapter 5 of Create Your Own Website Using
you various sizes for your headings, WordPress in a Weekend.
In this chapter of the book we see how the WordPress default theme “Twenty Twelve”, released as
with “Heading 1” being the largest the default theme as from December 2012, can be used to create a simple website for any kind of
business or personal site, or blog.
and most important on a page,

The new default theme has a clean and fresh design and is fully responsive, meaning that it looks
and so on. really good on smartphones and tablets.
19 Text color button.

20, 21 These buttons are useful
for copying and pasting text. If you
want to copy text originally saved
in a Word document, use the “W”
button to paste it into the text area,
Paste from Word
otherwise it will bring extra code and 16 This is an example of text written in “Paragraph” style.
Paste from Word
Use CTRL + V on your keyboard to paste the text into the window.
21
formatting with it from the original. This is an example of “Heading 1” Style.
In the same way, use the “T” button This is an example of “Heading 2” Style.
to paste in text from software other This is an example of “Heading 3” Style.

than Word.
This is an example of “Heading 4” Style.
22 Insert special character button
(this includes symbols such as the
copyright symbol).
23 Indent paragraph button.
Cancel Insert
24, 25 Undo and re-do buttons

(up to 10 actions). Home
26 Click this button to add media Permalink: http://www.alannahmoore.com/twentytwelve/ View Page
(i.e., images and audio)—we’ll look

at this on pages 62/67.
You will normally be working in

the “Visual” view (see the tab in
the image on the opposite page).
are filling in the content for your
Occasionally, you will need to access T IP
pages, don’t add anything to the
the coding of the page content,
blog page. This needs to be left
which you can do by clicking the
completely blank; we’ll see how Make use of the formatting options
“Text” tab.
to add blog posts a little later in —this includes the heading hierarchy
this chapter. (16), as well as the lists (4), numbers (5),
When you have added text to each and blockquotes (6)—to make your text
page, click the blue “Update” button. as clear as possible for site visitors to
To view the page as it looks on the read. Remember what we said in Chapter
live site, click the “View Page” button 3 about the importance of clarity and
(or access the pages via the menu on accessibility of information on a website;
the website—don’t worry that they how you format your text is a major part
aren’t in the right order yet, as this is of this.
what we’ll look at next). When you
59

Adding pages to the
chapter 5
menu
With your pages in place, you now

need to set up your menu so that the
Appearance Themes
links to access these pages appear 1 Widgets
Menu Name Main 2
Plugins Create Menu
in a logical order. Until you set up the Menus

To create a custom menu, give it a name above and click Create Menu. Then choose items like
Users
menu, your pages will appear in the Header pages, categories or custom links from the left column to add to this menu.
After you have added your items, drag and drop to put them in the order you want. You can also
Tools Background click each item to reveal additional configuration options.
menu in the order they were created. Editor

When you have finished building your custom menu, make sure you click the Save Menu button.
Settings
1. Go to Appearance > Menus on

the left-hand navigation. 3 Theme Locations
2. Create a menu—type “Main” in Your theme supports 1 menu. Select which
menu you would like to use.
the “Menu Name” field, and click
the blue “Create Menu” button. Primary Menu
Main
3. To the left of this area, look for
a box entitled “Theme Locations.” Save
Select “Main” from the “Primary

Menu” drop-down and click “Save.” Create Your Own Website Using WordPress... New Howdy, admin
4. Scroll down the page to where 4 Dashboard

Menus
Posts
you can see a box entitled “Pages.” Media

The Main menu has been successfully created.
Pages Main
5. Click the “Select All” link and then Comments Theme Locations Menu Name Main Automatically add new top-level pages
Appearance Delete Menu Save Menu
the “Add to Menu” button. (If you

Your theme supports 1 menu. Select which
menu you would like to use.
Themes
Widgets Primary Menu Select menu items (pages, categories, links) from the boxes at left to begin building your custom menu.
can’t see all your pages, click the Menus

Header
Main
Background Save
“View All” link first.) Editor Save Menu

Plugins
Custom Links
6. You will see all your pages added Users
URL http://
Tools
to the main area of the page; you Settings

Label Menu item
Add to Menu
Collapse menu
can then drag them around to
Pages
reorder them with your mouse. Most Recent View All Search
About
(Indenting a menu item will make Contact

Gallery
it appear underneath the item

Full-Width Oage
Blog
Home
above it as a drop-down.) Select All Add to Menu
By convention, your “About” page

Main
usually goes after your home page 6 Menu Name Main

Automatically add new top=level pages
link, and the “Contact” page last. Delete Menu Save Menu
Home Page
7. When you’re done, click the blue About Page
“Save Menu” button. You can now Full-width Page Page
Gallery Page
go to your live website and see Blog Page
how your menu looks. Contact Page
Save Menu
60

crEaTinG a mEnu labEl
s t e P - B y- s t e P : C r e At I n G A B A s I C m o d e l W e B s I t e / / / A D D I N G P A G E S T O T H E M E N U
ThaT’S diffErEnT from
a PaGE hEadinG
You may want the heading visible
Demo site using the Twenty twelve theme
on a page to be different from how

it appears in the menu. For example, HOME ABOUT FULL-WIDTH PAGE BLOG CONTACT
you won’t want the heading “Home”

to appear on your home page
(whereas it should appear as “Home” This is a dummy website set up to accompany Chapter 5 of Create Your Own Website Using WordPress
in a Weekend.
in the menu). In the screenshot of In this chapter of the book we see how the WordPress default theme “Twenty Twelve”, released as the
the live demo site, we can see “Learn default theme as from December 2012, can be used to create a simple website for any kind of
business or personal site, or blog.
to build your own website”

The new default theme has a clean and fresh design and is fully responsive, meaning that it looks
is the main heading, whereas the really good on smartphones and tablets.
page is labeled “Home” in the menu.

Learn to build your own website Publish
2
To change the home page heading: Permalink: http://www.alannahmoore.com/twentytwelve/ View Page Get Shortlink Preview Changes
1. Go to the editing page for the home

Upload/Insert Visual Text Status: Published Edit
page (Pages > All Pages > Home). Paragraph Published on: Oct 18, 2012 @ 11:38 Edit
2. Change the title of the page, and This is a dummy website set up to accompany Move to Trash Update
Chapter 5 of Create Your Own Website Using
then click the “Update” button.
3. Go back to the “Menus” page
(Appearance > Menus). You will Main
3
see that the menu item has Menu Name Main
Automatically add new top-level pages
changed to the new title. Delete Menu Save Menu
4. Click the small triangle you see to

the right of the heading to open an
Learn to build your own website Page
options area, and in the “Navigation
Label” field, type “Home” instead About Page
of the new home page heading. Full-width Page Page
5. Click the blue “Save Menu” button.

Gallery Page
Going back to your site’s home
page, you will see that the menu Blog Page
now says “Home,” whereas the Contact Page
page is titled with its new heading.

Save Menu
4 Learn to build your own website Page
ADDING NeW PAGeS

Navigation Label Title Attribute
When you add new pages from now on, Home
they will not appear in the menu until you
add them to it. To get them to appear Original: Learn to build your own website
automatically, check “Automatically add
Remove | Cancel
new top-level pages” (see image 3). Note
you will still need to reorder the menu
items each time you create pages.
61

Adding images to
chapter 5
your sIte
We’ve seen how to create pages,

work with the text editor, and how
to add your pages to a menu. Now 1 About
we will look at how you can add Permalink: http://www.createyourownwebsiteinaweekend.com/twentytwelve/about/ Edit
images to your pages. Add Media

Visual Text
addinG imaGES This is where you will write a bit of information about you or your business.
To add an image to a page:
1. Click in the text-editing area where
Insert Media
3
Insert Media
you want the image to appear. Create Gallery Upload Files Media Library
Set Featured Image

2. Click the “Add Media” button
Insert from URL
above the editing buttons.
3. Click the “Select Files” button and
navigate to the image you want to
Drop files anywhere to upload
use on your computer. Select the
image and click “Choose” or Select Files
“Open,” depending on whether

Maximum upload file size: 7MB.
you are using a Mac or a PC. (You

can also add images by dragging
them into the box where it says
“Drop files anywhere to upload,”
Insert into page
if that is easier.)
4. Allow the image to upload. When 4 ATTACHMENT DETAILS
ATTATCHMENT DISPLAY SETTINGS
it has uploaded, fill in the various book_cover.jpg Alignment Left

January 13,2013
fields as follows. 622 x 693
Link To None
Edit Image
Delete Permanently
Size Medium–269 x 300
Type a title for the image in the “Title”
and “Alt Text” fields. These will not
be immediately visible on the page, Title Create Your Own Website Insert into page
however, if a viewer moves their Caption
mouse over the image, the title will

show up. The “Alt Text” field will Alt Text Create Your Own Website
show up if the person visiting your Description
site can’t access images—this is not

often the case, but you need to fill
in the field as it provides information ATTACHMENT DISPLAY SETTINGS
for Google. If you want a caption to Alignment Left
be visible on the page, type it in the Insert into page
“Caption” field.
WordPress offers you the option of

additionally displaying your image
62

on the site in a larger format, on its want to make the image link to button on your main editing page,
s t e P - B y- s t e P : C r e At I n G A B A s I C m o d e l W e B s I t e / / / A D D I N G I M A G E S T O Y O U R S I T E
own page, if the visitor clicks on something. Choosing “None” will and check how it looks on your
it (we’ll see how to set this option obviously keep the image in its live site.
in just a moment). If you want to unlinked format; choose “Custom URL” 6. If you want to make any changes
do this, you can optionally type a if you want to link it to another web or resize the image, click on the
description of the image that will page, and paste in the web page image in the text editing area.
show up only on the image’s own address. “Attachment Page” is the A button will appear at the top
page; type this in the field labeled setting you choose if you want to left; click on this to adjust the size,
“Description,” otherwise you can create a separate page displaying the position, title, or caption. Take care
leave it empty. image at larger size, plus any not to click on the red button, as
description. “Media File” will open the this will remove the image.)
Set the alignment (that is, the image at its original size in the browser 7. Make your change and click
positioning) of the image in the window without any description. “Update,” remembering to also
drop-down labeled “Alignment,” click the “Update” button on your
underneath “Attachment Display Finally, you need to choose the size editing page to save the change.
Settings.” In the example, I chose at which you want to display the
“Left,” as I wanted the text to appear image (you can fine tune this once Note that you can use the size
to the right of the image. the image is saved on the page). slider (indicated in the screenshot)
to make the image smaller by
Scroll down inside the window; the 5. When you’ve chosen your incremental degrees of 10%. If you
next drop-down (screenshot opposite) settings, click “Insert into page,” want to make it larger, you will need
is where you choose whether you then click the blue “Update” to upload it again at a larger size.
6 Add Media Edit Image Advanced Settings

7
Size Lorem ipsum dolor sit amet consectetuer velit pretium

euismod ipsum enim. Mi cursus at a mollis senectus id
130% arcu gravida quis urna. Sed et felis id tempus Morbi
mauris tincidunt enim In mauris. Pede eu risus velit
120%
libero natoque enim lorem adipiscing ipsum consequat. In
110% malesuada et solciis tincidunt tempus pellentesque cursus
convallis ipsum Suspendisse. Risus in ac quis ut Nunc
100%
convallis laoreet ante Suspendisse Nam. Amet amet urna
90% condimentum Vestibulum sem at Curabitur lorem et cursus.
Sodales tortor fermentum leo dui habitant Nunc Sed
80%
Vestibulum. Ut lorem In penatibus libero id ipsum Vestibulum. Ut lorem In
70% penatibus libero id ipsum sagittis nec elit Sed. Condimentum eget Vivamus vel
60% consectetuer lorem molestie turpis amet tellus id.
Alignment None Left Center Right
Title
Alternative Text Create Your Own Website Using WordPress in a Weekend
Caption
Link URL http://www.createyourwebsiteinaweekend.com/twentytwelve/about/book_cover/
None Current Link Link to Image

Enter a link URL or click above for presets.
Update Cancel
63

crEaTinG a GallEry
chapter 5
WordPress has a neat feature that

Insert Media
lets you create a gallery of images 2 Insert Media
Create Gallery Upload Files Media Library
on your page. Set Featured Image
Insert from URL

1. Go to the page where you want
to add the gallery, and then click
inside the text box where you
Edit Gallery
3
Cancel Gallery
want the gallery to appear. Edit Gallery

Drag and drop to reorder images. Reverse order
GALLERY SETTINGS
Click the “Add Media” button. Add to Gallery Link To
Columns
Attachment Page
2. When the window opens, click Random Order
ATTACHMENT DETAILS
“Create Gallery” from the top IMG_1214.jpg

January 15,2013
2592 x 1936
left (as indicated). Caption this image... Caption this image... Caption this image...
Edit Image
Delete Permanently
Title Sashimi
Upload the images you wish to add

Caption
to the gallery. You can add several Alt Text
Description
Sashimi
simultaneously, either by selecting

multiple images, or by dragging and
Insert gallery
dropping them into the box.

3 Create Your Website Using WordPress in a Weekend
Create Your Website Using WordPress in a Weekend
Should you experience any difficulty HOME ABOUT FULL-WIDTH PAGE BLOG CONTACT HOME ABOUT FULL-WIDTH PAGE BLOG CONTACT
uploading several images at once, Gallery Gallery
try uploading them in small batches.

Click “Upload files” at the top of the
window, wait for the batch to upload,
then repeat for the next one.
(You can alternatively add images

you’ve already uploaded by clicking
the “Media Library” link at the top of
the window. Select the images you
want to include; use Ctrl + Click
(PC)/Cmd + Click (Mac) to select
multiple images.)
3. Click “Create a new gallery.” to have the thumbnails appear in to have appearing in each gallery
random order—see the checkbox row, which will determine their size.
At this next screen, you can set your to the right under “Gallery Settings.”
title and alt text for each image, and 4. Click “Insert gallery” when you’re
optionally also your caption and In the “Gallery Settings” area, choose done, and finally click “Update”
description (the description will show whether the images should open to save the page. Now you can
with the larger version of each image at large size in the browser window check how your gallery looks.
when clicked on from the gallery). when clicked on (“Media File” in the
You can reorder the images by drop-down) or in a separate website
dragging and dropping them. page (“Attachment File”); you can
Alternatively, there is the option also choose how many thumbnails
64

s t e P - B y- s t e P : C r e At I n G A B A s I C m o d e l W e B s I t e / / / A D D I N G I M A G E S T O Y O U R S I T E
When you add the Jetpack plugin to your WordPress
site (see page 75), you can implement their Carousel
feature, which will make your gallery look even
better—when clicked on, the images will show up
within a slick side-to-side viewing system, as seen
on the live demo site.
EdiTinG a GallEry
To edit a gallery, click on the gallery
Cancel Gallery Edit Gallery
in your editing page, then click on Add Media
Drag and drop to reorder images.
the button that appears at the top Edit Gallery

Add to Gallery
left, just as you would with an image. Remove
To add an image, click “Add to

Gallery” on the left-hand side and
either upload further images or add
Caption this image... Caption this image...
them from your Media Library.

Cancel Gallery Edit Gallery
Drag and drop to reorder images. Reverse order

Edit Gallery GALLERY SETTINGS
To remove an image from a gallery, Add to Gallery Link To
Columns
Attachment Page
click the “x” that appears at the top Random Order
ATTACHMENT DETAILS
right of the image when you mouse IMG_1211-11.jpg

January 15,2013
2592 x 1936
over it. Caption this image... Caption this image... Caption this image...
Edit Image
Delete Permanently
Title IMG_1211 1
Click “Update gallery” and then

Caption
update the page. Alt Text
Description
Caption this image... Caption this image... Caption this image...
You can also edit images from inside

Update gallery
your gallery editing area. You will find

this particularly useful if you find you ATTACHMENT DETAILS
have to rotate an image, or to create IMG_1211-11.jpg

January 15,2013
a better thumbnail picture (we’ll see
2592 x 1936
more about editing images in
Refresh
WordPress shortly). To access the Delete Permanently
editing area from inside the gallery
area, click on the image you want to
edit and then click the “Edit Image” link
to the right-hand side of the screen. page), save and update, then hand side (indicated) so that
close the browser window. Back you can see the change that
Carry out your edit in the new at the gallery screen, make sure has been made. Then click
browser window (see the next you click “Refresh” on the right- “Update gallery.”
65

Help
File
Screen Options
Edit Media Add New
IMG_3601
JPG
IMG_3061 Save
Edit | Delete Permanently | View
Permalink:http://www.createyourwebsiteinaweekend.com/twentytwelve/gallery/img_3061/ Edit Uploaded on: Jan 15, 2013 @ 15:50
View Attachment Page
5 8 File URL:
http://www.createyourwebsiteinaweekend.com
Scale Image
You can proportionally scale the original File name: IMG_30611.Jpg
3 4
image. For best results the scaling should
be done before performing any other File type: JPG
operations on it like crop, rotate,etc. Note
that if you make the image larger it may Dimensions: 2592 x 1936
become fuzzy.
Original dimensions 2592x1936 Delete Permanently Update
1 2592 x 1936 Scale 6
Image Crop (help)
Edit Image Aspect ratio: 1 : 1

2
Selection: 1497 : 1497
Thumbnail Settings (help)
Cancel Save
Current thumbnail
Apply changes to:
7
All image sizes
Thumbnail
All sizes except thumbnail
EdiTinG imaGES from To crop an image, first select the You can also do the following
wiThin wordPrESS area with your mouse (1). If you want within the editing area:
As we have seen, WordPress has an this crop to be used as the thumbnail > Rotate the image (4).
image-editing facility that is useful for the image, then it must be square; > Flip the image vertically or
for resizing and rotating images, as WordPress has a neat tool to make horizontally (5).
well as creating different thumbnail this easy. First, roughly select the > Resize the image keeping the same
images if the ones automatically area you want to use as the thumbnail. proportions (6).
generated by the gallery don’t display Then write “1” and “1” in both the > Choose the versions of the images
the image to its best advantage. boxes labeled “Aspect Ratio” (2). to which the change will apply (7).
Click back inside the selected area This tool is often used only for
To edit an image, go to Media > with your mouse and move it thumbnails (the main image will
Library, find your image in the list slightly—you will find the selected remain the same).
of uploaded images, and click on the area automatically squares itself. > Undo your changes if necessary (8).
image title (or use the “Edit” link that Move the selected area around until
appears below it when you move you’re happy with the crop and when Click “Save,” then click “Update when
your mouse over it). At this point you are, click the “Crop” button (3). you’re done.
you can change the title, caption,
alt text and description, but to make
changes to the image itself, click the
“Edit” button underneath the image.
66

Adding video and audio to your sIte
s t e P - B y- s t e P : C r e At I n G A B A s I C m o d e l W e B s I t e / / / A D D I N G V I D E O A N D A U D I O T O Y O U R S I T E
vidEo
WordPress has made adding videos address of the video from your audio
to your website as easy as possible. browser address bar. To upload audio to your site,
the file must be in MP3 format.
1. If you want to show your own 3. Paste this into your page editing
video, open an account (free) box, where you want the video to 1. Click in your page editing box
with a video-sharing site such as appear, on a separate line of its where you want the audio link
YouTube or Vimeo, and upload own (as shown below). to appear.
your video there. 4. Click “Update,” and you’ll see the 2. Click the “Add Media” button
2. For YouTube, navigate to the video embedded into your site. as though you were uploading
video you want to show on your an image, and upload the MP3
website, then click “Share” below (This simple one-line paste also to your Media Library.
the video, and copy the web works with other video- or image- 3. In the “Title” field, write the
address that appears beneath it. sharing sites, such as DailyMotion text that you want people to
For Vimeo, simply copy the web and Flickr.) click on to listen to the audio.
Select “Media File” in the “Link
to:” drop-down.
4. Click “Insert into page.”
5. Click the blue “Update”
2 button to save your page.
ATTACHMENT DETAILS
fj.mp3
Febuary 26,2013
Delete Permanently
Maree Pigdon Learn To Sew Sewing Classes - Baby Sewing.mpg Title Click here to listen
mareepigdon 78 videos
1,539
Subscribe 201 3 0 Caption
Like About Share Add to
Share this video Embed Email Hangout
Description
http://youtu.be/D1oQcJkAZtU Start at: 0:00
3 Edit Page Add New
ATTACHMENT DISPLAY SETTINGS

Home
Permalink:http://www.createyourwebsiteinaweekend.com/twentytwelve/home/ Edit View Page
Link To Media File
Add Media
Visual Text
http//www.alannahmoore.co
http://youtu.be/D1oQcJkAZtU
67

Your blog or neWs AreA
chapter 5
Earlier on when you assigned your

home page to the front page of your
site, you (optionally) designated a
page as your blog or news area.
Posts All Posts
Add New
If you go to that page on your live Media
site, you can see the dummy post Categories
that WordPress puts in for you, Pages Tags
with the title “Hello world!”
Creating and editing blog posts Title

works in exactly the same way as
creating and editing pages. The Hello world!
difference is that you don’t have
Edit | Quick Edit | Trash | View
to link them to a menu. Blog posts
appear automatically on the page Move this item to the Trash
you’ve designated as your blog or
Title
news page, in a long list, with the
most recent post at the top of
the page.
To delete the dummy post and caTEGoriES and TaGS Categories and subcategories can be
create your own blog posts, go One feature blog posts have that added directly from the blog-editing
to Posts > All Posts. pages do not is that they can be page, or from the special “Categories”
categorized into different topics of area of the left-hand navigation.
Move your mouse over the dummy interest. The benefit of doing this is
“Hello world!” title, and click “Trash” that you can add a list of your To assign a post to a category
to remove it. categories into the sidebar, allowing while you are working on it, use
visitors to choose which blog posts the “Categories” box to the right,
Now, click on “Add New,” either at they want to read, according to topic. as shown in the screenshot.
the top of the page or in the left-hand
navigation (under “Posts” rather than Although this feature is optional, To rename the “Uncategorized”
“Pages”), and then type in and publish if you don’t choose to assign your category, go to Posts > Categories.
your own blog post —including any blog posts to different categories, Move your mouse over
images, audio, or videos if you like, they will show up as having been “Uncategorized” and click the “Edit”
in exactly the same way you did classed as “Uncategorized,” which link that appears underneath it.
with your site pages. can look clumsy. The best way around Change the category name and the
this is to change the name of the slug and click “Update.” (The slug is
“Uncategorized” category. You could simply how the category will look as
change it to “Blog” or “News,” or a web address. Just type the same
something more specific that is title as you did into the “Category
suitable for your site. Name” field and WordPress will
68

s t e P - B y- s t e P : C r e At I n G A B A s I C m o d e l W e B s I t e / / / Y O U R b L O G O R N E W S A R E A
Create Your Own Website Using WordPress... 14 New Howdy, admin

Add New Post
Posts
All Posts
Publish
Add New Save Draft Preview
Categories
Add Media Status: Draft Edit
Tags Visual Text
Media Visibility: Public Edit
Pages Publish immediately Edit
Comments
Appearance
Plugins
Format
Users
Standard
Tools Aside
Image
Settings Link
Quote
Collapse menu
Status
Categories
All Categories Most Used

Path: p
Word count: 0 Blog
+ Add New Category
Tags
Add
Seperate tags with commas
Choose from the most used tags
format it as it needs it.) After that, area, which you access from the cloud”—a group of tags of different
click “Update”. left-hand navigation, or from the sizes, the largest being the ones you
“Tags” box on the main editing use most.
You can also assign “tags” to your page, found underneath the
blog posts, which is a different “Categories” box (as shown in There is no obligation to use either
way of allowing people to find the screenshot above). categories or tags—they can quite
posts according to areas of safely be ignored—but if you are
interest. Categories are general You can show your tags in your going to do a lot of blogging, your
ways of grouping posts together— sidebar in the form of a “tag readers will find them useful.
filing them, if you like—whereas
tags can relate more specifically
to the topic of the blog post;
The DIffeReNCe BeTWeeN CATeGoRIeS AND TAGS
you can consider them as
It can be difficult to grasp the difference between categories and tags. Here’s a wardrobe
keywords that relate to the metaphor that may help. You classify your clothes by type—socks, jackets, shirts, and so
subject matter of the post. on; these you can consider your categories. Tags will be the way you describe the individual
Like categories, tags can be items of clothing—knitted, purple, woollen, silk, vintage, summer, evening.
managed in their own
69

Enabling CommEnts
chapter 5
Back in the “First Steps” section of

the setup, you decided whether to Discussion
1
have comments enabled or disabled
Allow comments.
by default; I suggested that you Allow trackbacks and pingbacks on this page.
disable comments while creating

your site pages. If you want to let
your readers leave comments on 2 Howdy, admin
your blog posts, now is the time to
Screen Options Help
change the default to “Enabled,” so
that they are automatically enabled
for each blog post you create—go
to Settings > Discussion to make Create Your Own Website Using WordPress... New Howdy, admin
this change. (You can always enable 2 Dashboard

Show on screen
Posts Format Categories Tags Featured Image Excerpt Send Trackbacks Custom Fields Discussion
comments for individual posts, but All Posts Slug Author
Add New
it will most likely be more convenient Categories

Tags
Screen Layout
Number of Columns: 1 2
to enable them right across the Media

Screen options
Pages Add New Post
board for your blog posts.)
To enable or disable comments

manually for individual posts:
1. Go to the individual blog-post
page and scroll down to the box
making a post “stiCky”
entitled “Discussion.” Check, or
Making a post “sticky” will ensure it remains at the top of the blog
uncheck, the box next to “Allow
page and will therefore always be visible. You might choose to do this
comments.”
with certain topical, or frequently read posts, or create an introduction
2. If you can’t see the box, click the
to the blogging section of your site that you want to be sure your site
“Screen Options” tab towards the
visitors notice. You can make a blog post sticky either in the “Quick Edit”
top right of your screen and check
view from your list of blog posts, or within the “Publish” box of the main
the “Discussions” checkbox.
editing page. When a standard blog post is made sticky, it will show up
3. You’ll now be able to see the
with a “Featured Post” label above it (see opposite for info on different
“Discussion” box at the bottom
kinds of blog posts).
of the page (underneath the text
editing area); check or uncheck Screen Options Help
the “Allow comments” box as Posts Add New
Search Posts
required. All (6) | Published (6) | Sticky (1) | Trash (1)
Bulk Actions Apply Show all dates View all categories Filter 6 items
4. Click the blue “Update” button
to save your changes. Title Author Categories Tags Date SEO Title
SEO
Keywords
SEO
Description
QUICK EDIT Categories [more] Tags

We will see how to enable Akismet, Title This is the blog section of the site Blog posts
Slug
a plugin that protects you from this-is-the-blog-section-of-the-site
Date 10 Jan 18 , 2013 @ 16 : 44 Allow Comments Allow Pings

comment spam, on page 74. Password –OR– Private Status Published Make this post sticky
Format Standard
Cancel Update
70

RECENT POSTS
Featured post
bloG PoST formaTS
s t e P - B y- s t e P : C r e At I n G A B A s I C m o d e l W e B s I t e / / / Y O U R b L O G O R N E W S A R E A
This is the blog section of the site
This is an aside
With the default theme, though not

This is a link
This is a quote
with all themes, WordPress offers

you the choice of formatting your SUBSCRIBE TO BLOG VIA EMAIL
blog posts in different ways. If your Enter your email address to subscribe to
this blog and rcceive notifications of new
posts by email.
blog is going to be a major feature of
Email Address
your site, you will want to make use

Subscribe
of these to make your blog page as

This is the blog section of the site
lively and varied as possible. Apart FACEBOOK
Leave a reply
from the standard blog post, the Alannah Moore

on Facebook
This is the blog section of the website. Here is where your blog or news items will go. This is
Like
alternative formats you have an example of a “Standard” blog post. I’ve made it “Sticky” so that it stays at the top of the
page. Any type of blog post can be made “sticky,” but it’s only standard-format blog posts that 402 people like Alannah Moore.
available to you are:

get the title “Featured Post” above them. I’ve also added a featured iamge to the post - it’s only
for standard-format blog posts that featured images will show up. They appear above the
Jose Cwok Rjina
heading - any other images will appera below it.
This entry was posted in Blog posts on October 18, 2012.
> Aside Andrea Valmir Jesse
> Image Maryline Philippe Carolyn
> Link This is an aside
> Quote
Fatyy Gillian Jordi
This is a blog post saved with the “Aside” format. An aside is a very short blog post with a Facebook social plugin
blue background so that it shows up.
> Status LATEST TWEETS

October 18, 2012.
Leave a reply
WordPress workshop dates (Paris) - 13th
You can see how these look on the

+ 15th Nov & 20th + 22nd Nov (2 ses-
sions) - let me know if you’re interested.
alannahmoore.com/alannah/wordpr...
screenshot, or go to the blog page 2 weeks ago

WordPress Tutorials for Beginners - 25 of
of the live demo site. the Web’s best

instantshift.com/2012/09/27/wor... via
@instantshift
1 month ago
To assign a format to a post, select

I just saved my spot on RebeMouse. Sign
up now to reserve your username rebel-
mouse.com
one of the radio buttons from the 1 month ago

I got the Adapt Free Responsive Business
“Format” box before saving the post. #WordPress Theme by @WPExplorer -

wpexplorer.com/adapt-free-res...
2 months ago
Format
This is a blog post saved with the “Image” format. You can add text to an image post - perhaps
Standard to explain the image - but its title won’t show up, in order not to detract from the impact of the
image itself.
Aside
Image October 18, 2012
Leave a reply
Link
Quote
This is a post saved with the “Link” format. LINK
Status http://www.google.com
October 18, 2012
Leave a reply
feATuReD ImAGeS This is a blog post saved with the “Quote” format. Its title doesn’t show up. it’s perfect for a
Posts can have a “featured image” added

line or two of text, without a distracting heading.
to them which will stand out more than an October 18, 2012
Leave a reply
image inserted into the body of the post, as

it will appear above the blog post heading.
To add a featured image, click the “Choose Alannah
October 18, 2012
a Featured Image” button from the lower This is a blog post saved with the “Staus” format. It shows the name and “gravatar” of the
right-hand side of your post editing page. person who wrote the post. (if you have gravatars enabled in the Settings > Discussions area of
the admin).
Leave a reply
71

Your WIdGets
chapter 5
Widgets are the little bits of content WordPress automatically puts in for them from the central area to the
—recent posts, search boxes, etc.— you; we need to get rid of these, so “Main Sidebar” box—you can easily
that you can put in the sidebar that you can put the widgets you do reorder them with your mouse.
area of your pages and, with this want in there.
particular theme, in the footer of The best way to decide which
the home page. 1. Go to Appearance > Widgets in widgets you want to show on your
the left-hand navigation. site is to experiment with them.
WordPress comes with certain 2. In the box on the right-hand side
widgets built-in; however widgets labeled “Main Sidebar,” you will see
exist to do pretty much anything, the widgets WordPress puts into
and we’ll see more of these when we your sidebar by default when you
look at plugins in the next section. first set up your site. Drag these
RemoVING The SIDeBAR
With the default theme, you have the
out of the box with your mouse so
option of choosing to create pages without
addinG widGETS that you can start afresh. (These
a sidebar, and therefore without widgets.
To your PaGES are standard widgets, which you
See the live demo for an example—I have
You will have noticed that in the can always add back in later.)
created a page entitled “Full-Width Page”
sidebars of your site there are 3. Now choose which widgets you
to show you what this will look like. To
already some elements that want in your sidebar by dragging
save a page with the full-width format,
go to the editing screen for that page
and in the box to the right entitled “Page
Attributes,” choose “Full-width” from the
drop-down. (This was what you did when
Appearance Themes
1 you assigned the Front Page Template to
Widgets
Plugins
Menus your home page.) Save the page with the
Users
Header
blue “Update” button, as usual. Note that if
Tools Background
Editor
you keep your sidebar empty, the sidebar
Settings
area will disappear automatically from all
your blog posts and pages.
2 Dashboard
Widgets
Screen Options Help
Posts
Media
Available Widgets Main Sidebar
Page Attributes
Drag widgets from here to a sidebar on the right to activate them. Drag widgets back here to deactivate them and delete their
Pages Appears on posts and pages except the
settings.
optional Front Page template, which has
Comments
its own widgets
Archives Calendar
Appearance
A monthly archive of your site’s posts A calendar of you site’s posts Search
Themes Parent
Widgets Categories Custom Menu
Recent Posts
Menus A list of dropdown of categories Use this widget to add one of your custom
Header menues as a widget.
Recent Comments
(no parent)
Background
Editor Meta Pages
Log in/out, admin, feed and WordPress Your site’s WordPress Pages Archives
Plugins links Default Template
Users
Recent Comments Recent Posts
Categories Front Page Template
Tools
The most recent comments The most recent posts on your site
Meta
Full-width Page Template, No Sidebar
Settings
Collapse menu RSS Search

Entries from any RSS or Atom feed A search form for your site Order
First Front Page Widget Area
Tag Cloud Text
Your most used tags in cloud format Arbitrary text or HTML Second Front Page Widget Area 0
Need help? Use the Help tab in the upper right

of your screen.
72

s t e P - B y- s t e P : C r e At I n G A B A s I C m o d e l W e B s I t e / / / Y O U R W I D G E T S
In most cases, you can change the Front Page Area.” (Open the
titles of the widgets—for example, widget areas, so that you can
the “Archives” widget may be more drag elements into them, by
useful on a business site if displayed clicking the small triangle on the
with another title (for example, “News right-hand side.) These will appear
by Month” or “Past News Bulletins”). at the bottom of the main text on
You can open each widget to retitle your front page in two columns.
it, or to see more options, by clicking If you leave them empty, they
the small triangle to the right. will not show up, so using them
is entirely optional. However, it is
It’s completely up to you which a good way of showing additional
widgets you choose to put in your information about you or your SoCIAl meDIA WIDGeTS
sidebar—your needs will depend business on the home page, so We often see Facebook, Twitter, and other
on the purpose of your site. I suggest people can see more information social media buttons in website sidebars.
“Recent Posts”—perhaps retitled as at a glance. Again, it is up to you We’ll see how you can incorporate these
“Latest News,” to show your site is what material you want to include in
into your site in Chapter 9.
dynamic and your business is busy the home page footer, but a useful
—and a search box if your site is implementation might be to put
large, so that visitors can search some more information about you
by topic or keyword. If your major in a “Text” widget in the first (left) Main Sidebar
focus is blogging, you may want area, and your “Recent Posts” in
to implement the “Archives” or the second (right) area. Archives
“Calendar” widgets, and maybe Title:
the “Categories,” “Tag Cloud,” and We’ll now move on and look at
“Recent Comments” widgets as well. plugins; when we install the Jetpack Display as dropdown
Show post counts
plugin, you’ll find that some other
Delete | Close Save
You can also add widgets to the useful—not to mention fun—widgets
“First Front Page Area” and “Second become available.
TWo VeRy uSeful WIDGeTS > “Custom Menu”—remember how Custom Menu
> The “Text” widget is very useful for we created a menu for the site and
writing small snippets of text, such labeled it “Main”? You can actually
Title:
as your telephone number or address, create any number of menus, attach
or for highlighting a special offer. pages to them, and display them
Snippets of code can also be pasted in the sidebar as additional menus
into “Text” widgets, if you ever need using the ‘Custom Menu” widget. Select Menu: Sidebar Menu
to do this. This is useful if you have a lot of
pages on your site, but don’t want to Delete | Close Save
clutter up the main menu with them.
73

The plugins you need
chapter 5
A plugin is a component that you 5. Go back to your plugins page and without you having to moderate
can add to WordPress to make it do click the link that says “Go to your them, but Akismet will have filtered
things that it doesn’t do right out of Akismet configuration page.” out any that are spam. Do keep
the box. We’re going to install the 6. Paste the key in the field (as an eye on your comments in the
plugins you need to complete your indicated below), and then click “Comments” area on the left-hand
website, and then it will be fully “Update Options.” navigation of your admin area,
functional and ready to go. as very occasionally Akismet will
Now that Akismet is activated, you misjudge a comment as spam when
akiSmET can go to the Settings > Discussion it isn’t, and vice versa. But it does
Akismet is a plugin so essential that area and uncheck the boxes next to a very good job—if you check the
it comes bundled with WordPress. “Before a comment appears.” This “Akismet Stats” area, you’ll see just
It does the very important job of means that comments will go up how much spam it filters out.
stopping you getting spam, either
through the “Comments” area on Monitor and reply to your comments from the “Comments” area of the admin. You’ll find
your blog posts or from the contact Akismet almost never publishes spam by mistake, but you should still keep an eye out.
form we will set up in the next step.
All you need to do is activate it by
putting in a special passcode so
that it can start working.
Plugin Description
3 Akismet Used by millions, Akismet is quite possibly the best way in the world to protect your blog from
For business accounts you need to Deactivate | Edit | Settings comment and trackback spam. It keeps your site protected from spam even while you sleep. To
get started: 1) Click the “Activate” link to the left of this description, 2) Sign up for an Akismet API
sign up for a paying account—$5 key, and 3) Go to your Akismet configuration page, and save your API key.
Version 2.5.6 | By Automattic | Visit plugin site
a month at the time of writing—
whereas for personal sites it is free
(or you pay voluntarily). Sign up for 6 Akismet Configuration
whichever is applicable to you—you
Akismet is almost ready. You must enter your Akismet API key for it to work.
really do need an Akismet account.
For many people, Akismet will greatly reduce or even completely
eliminate the comment and trackback spam you get on your site. If one
1. Go to Plugins > Installed Plugins. does happen to get through, simply mark it as “spam” on the moderation
screen and Akismet will learn from the mistakes. If you don’t have an API
2. Find “Akismet” at the top of the
ket yet, you can get one at Akismet.com.
list of plugins that come ready
Akismet API Key
installed, and click the “Activate”
link underneath it. Please enter an API key. (Get your key.)
3. Click the link that says “Sign up for

(What is this?)
an Akismet API key.” (This simply
Auto-delete spam submitted on posts more than a month old.
functions as your passcode.)
4. Sign up for an Akismet key on Show the number of comments you’ve approved beside each comment
author.
the Akismet site, choosing the
account type that is applicable to
Update options
you. Check your email and copy
the key they have sent you.
74

a conTacT form via JETPack
s t e P - B y- s t e P : C r e At I n G A B A s I C m o d e l W e B s I t e / / / T H E P L U G I N S Y O U N E E D
Jetpack is a plugin bundle containing
many tools that were, until recently, Plugins
Screen Options Help
3 Add New
only available for WordPress.com

Your Jetpack is almost ready – A connection to WordPress.com is
users. These will save you lots of needed to enable features like Comments, Stats, Contact Forms,
and Subscriptions. Connect now to get fueled up!
Connect to WordPress.com
time setting up individual plugins
that do the same job, which is ideal Plugin activated.
for getting your site up and running

in a weekend. Getting Jetpack will
4
mean signing up for a WordPress.
com account, but this is not a problem Create Your Website Using WordPress in a Weekend
—you don’t have to actually use their
blogging system. Jetpack wants to connect www.alannahmoore.com/twentytwelve to WordPress.com
Sign in to your WordPress.com account to authorize the Jetpack connection.
WordPress.com Username Need an account?
First, we’ll install the Jetpack bundle, Password Forgot your password?
and then we’ll be able to add a contact Deny Authorize Jetpack
form to your contact page.
A N A U T O M AT T I C A I R L I N E
Many premium templates come Privacy Policy | Terms of Service | Support
with a ready-made contact form,

so ultimately, you may not need this 5
one. But it is worth installing Jetpack
anyway so you can make use of the WordPress Walkthrough
other tools it offers.
1. Go to Plugins > Installed Plugins.

Your account is now active. Sign in below to activate Jetpack.
2. Find “Jetpack” in the list of plugins Howdy wordpressjetpack, Jetpack wants to connect www.alannahmoore.com/twentytwelve to WordPress.com.
To connect using an account other than wordpressjetpack please sign out first.
that are already installed, and then

Authorize the Jetpack connection?
click the “Activate” link underneath.
Deny Authorize Jetpack
3. Click the green button labeled
“Connect to WordPress.com.”
4. Click the link that says, “Need an New Howdy, admin
Create Your Own Website Using WordPress...
account?” and fill in the details. Dashboard Help
Jetpack
5. Check your email, and click the

Connected to WordPress.com
Jetpack
Site Stats
link to activate the account.

Akismet Configuration
Akismet Stats
Finally, click the blue button

Posts
Media
You’re fueled up and ready to go.

to complete the authorization . Pages
Comments
The features below are now active. Click the learn more buttons to explore each feature.
Feedbacks
Appearance Notifications Publicize Jetpack Comments
You’ll see a new section in your Plugins Monitor and manage

your site’s activity
Connect your site to
popular social
Simple, concise site
stats with no
A new comment
system that has
Users with Notifications in networks and additional load on intergrated social
left-hand navigation called “Jetpack” Tools your Toolbar and on

WordPress.com.
Free
automatically share
new posts with your
Free
your server.
Free
media login options.
Free
Settings friends.
—click on it and you’ll see a range of Collapse menu Learn More Learn More Configure Learn More Configure Activate Learn More
interesting tools the plugin offers you

Subscriptions Carousel Post by Email Sharing
(see right). Allow users to

subscribe to your
Transform your
standard image
Publish posts to your
blog directly from
The most super duper
sharing tool on the
posts and comments galleries into an your personal email interwebs. Share
to recieve a Free
immersive full-screen account. Free content with Free
Free
75

To install a “Contact” form:
chapter 5
1. Go to your “Contact” page (Pages

> All Pages > Contact). Dashboard
Edit Page
2 Jetpack
Add New
2. Click inside the text-editing area, Posts Contact

then click on the new button you Media Permalink: http://www.alannamoore.com/twentytwelve/contact/ Edit View Page Get Shortlink
Pages
can see next to the button you All Pages
Add Media
Visual Text
use to add images. Add New

Paragraph
Comments
3. You can set up the form in Feedbacks
whatever way suits you; however Appearance
I prefer to make two changes: 1)

first remove the “Website” field, Add a custom form
3
as I don’t think it’s necessarily Form builder Email notifications
appropriate (not everyone writing Here’s what your form will look like
to you will have a website)—do How does this work?
Name (required)
this by clicking on the “-” sign next By adding a contact form, your readers will be able to
submit feedback to you. All feedback is automatically
to it; then 2) change the title of Email (required)
scanned for spam, and the legitimate feedback will
be emailed to you.
the “Comments” field to “Message”
by moving your mouse over it so Website
Can I add more fields?
that the “Edit” link becomes visible. Sure thing. Click here to add a new text box,
textarea, radio, checkbox, or dropdown field.
Comment (required)
Click “Edit,” change the label, and move edit
Can I view my feedback within WordPress?
save the field.
Yep, you can read your feedback at any time by
4. Now click the “Email notifications” clicking the “Feebacks” link in the admin menu.
tab, and fill in subject line of

Add a new field
the email with something like,
“Message from website.” This is Add this form to my post
the email that will get sent to you

whenever someone contacts you
from the form. You can fill in the
email address field as well, if you
want the email to go to a different
address from the one you used
when installing WordPress; leaving
it blank will send messages to
your original email address. (You
can also check your messages in
the “Feedbacks” area of the admin
page.) Save the email details by
clicking the blue button below
entitled “Save and go back to
the form builder.”
5. Click the blue button, “Add this
form to my post,” and then save
the page with the “Update”
button to finish.
76

Email ProTEcTor
You now have a contact form on
your contact page that makes it easy
1
for visitors to your site to contact Install Plugins
you via your website. However, as
explained when planning your Search | Upload | Featured | Popular | Newest | Favorites
website in Chapter 3, it adds
credibility to your site when people
Plugins extend and expand the functionality of WordPress. You
can see your real email address.
If you are a blogger, this may not
be an issue; however, if you have a Search
real-world identity that your site
is promoting, then it is important. email protector Search Plugins
The problem is that once your email
address is posted on your website,
spammers can “harvest” your email
2 Name Version Rating
address. You need to protect it, and
that’s where the “Email Protector” Pixeline’s Email Protector 1,2,3
plugin comes in handy. Details | Install Now
1. Go to Plugins > Add New. Type

Cryptex - Email Obfuscator+Protector 2.0
“Email Protector” into the “Search”
field, and click ‘Search Plugins.” Details | Install Now
2. Underneath where you see

“Pixeline’s Email Protector,” click
2 Installing Plugin: Pixeline’s Email Protector 1.2.3
“Install Now,” “OK,” then “Activate
Downloading install package from http://downloads.wordpress.org/plugin/pixelines-email-protector
Plugin.”
Unpacking the package...
3. Now, go to your “Contact” page
Installing the plugin...
and type your email address,
Successfully installed the plugin Pixeline’s Email Protector 1.2.3.
either above or below the form.
Activate Plugin | Return to Plugin Installer
4. Save the page, and look at the
live page on your site. You will Activate this plugin
now have a live email link on your

site, which people can click on and
send an email directly to you, but
the email address will be disguised
from harvesters.
(You will want to add some text to

your contact page, such as “Please
contact me either by email or by
using the form below.” As discussed
in Chapter 3, whether or not you
want to include your address and
telephone number is up to you.)
77

SiTE STaTS via JETPack
chapter 5
Once your site starts receiving

ExTra ToolS in JETPack
visitors, tracking your traffic (how
You will want to explore the different tools that come with Jetpack,
your visitors find you, which pages
which can add even more life and interactivity to your site. These need
they visit) is essential to chart your
to be enabled, and sometimes also configured, from within the Jetpack
site’s progress. One of the elements
area of the admin.
that comes with Jetpack is a built-in
“Site Stats” section; you can visit it
Some of these are:
by clicking Jetpack > Site Stats on
> Sharing icons (Facebook, Twitter, LinkedIn, etc.) that will appear at the
the left-hand navigation.
bottom of selected pages and blog posts—we’ll go through this when
we discuss social media in Chapter 9.
We’ll be talking more about tracking
> Publicize—have your blog posts appear automatically on Facebook,
traffic in Chapter 9, where we see
Twitter, or LinkedIn.
how you can use Google Analytics
> Email subscriptions—add a sign-up form to your sidebar (this is a
to get more detailed traffic reports
widget that enables people to receive blog updates by email each
than the ones provided via Jetpack.
time you post a news post; a great way to keep in touch with your
site visitors).
all in onE SEo Pack
> Adding a Facebook Like box to your site (another widget).
Attracting traffic through the search
> Adding a Twitter feed to your sidebar (another widget).
engines is vital to the success of your
> Showing images in your sidebar (yet another widget).
site. We will be going into how to
> Optionally display your galleries as slideshows instead (inside the page).
optimize your website in further
> Image Carousel—after enabling the Carousel feature, you’ll see that your
detail in Chapter 9, but in order to
galleries look much more professional: when you click on an individual
prepare for this, you will need to
image, the images are now all beautifully displayed, large-size, in a
install another plugin—we’ll leave
right-to-left stream. See the example on the live demo website on the
its configuration until later, as some
page titled “Gallery.”
explanation is required first as to
> Tiled Galleries—alternatively, display your galleries in a mosaic layout.
how search engines work.
> Shortcode Embeds—include SoundCloud audio clips embedded into pages.
1. Go to Plugins > Add New. Type “All

in One SEO Pack” in the “Search”
field, and click “Search Plugins.”
2. Underneath “All in One SEO Pack,”
click “Install Now,” then “OK,” then
“Activate Plugin.”
3 Plugins Add New
3. Go to the “Admin” page by
clicking on the link. All in One SEO Pack must be configured. Go to the admin page to enable and configure the plugin.
All in One SEO Pack now supports Custom Post Types and Google Analytics..
4. For now, just enable the plugin
by selecting the radio button,
Plugin activated.
and then click the blue “Update
Options” button right at the
bottom of the page to save.
4 Plugin Status: Enabled
Disabled
78

how To add a coPyriGhT linE
</div>
aT ThE boTTom of your SiTE <footer id=”colophon” role=”contentinfo”>

<div class=”site-info”>
3
<?php do_action( ‘twentytwelve_credits‘ ); ?>
WordPress doesn’t give you an easy way of adding <a href=”<?php echo esc_url( _ _( ‘http://wordpress.org/’,
‘twentytwelve’ ) ); ?>” title=”<?php esc_attr_e( ‘Semantic Personal Publishing Platform’,
a copyright line when you’re using the default theme, ‘twentytwelve’ ); ?>” rel=”generator”> <?php printf( _ _( ‘Proudly powered by %s’,
‘twentytwelve’ ), ‘WordPress’ ); ?> </a>
</div>
whereas many of the premium themes do. So to add </footer> 
</div> 
one, we need to go into the code. Don’t be put off—

it’s very easy if you just follow these steps. You won’t <footer id=”colophon” role=”contentinfo”>
want to do this if you’re planning to work on a <div class=”site-info”>

<?php do_action( ‘twentytwelve_credits‘ ); ?> 4
<a href=”<?php echo esc_url( _ _( ‘http://wordpress.org/’,
different theme for your real, live website. But if you ‘twentytwelve’ ) ); ?>” title=”<?php esc_attr_e( ‘Semantic Personal Publishing Platform’,
‘twentytwelve’ ); ?>” rel=”generator”> <?php printf( _ _( ‘Proudly powered by %s’,
are going to continue with the default theme, this will ‘twentytwelve’ ), ‘WordPress’ ); ?> </a> <br> Copyright © 2013 Alannah Moore. All rights
reserved.
</div> 
be a finishing touch. </footer> 
</div> 
1. Go to Appearance > Editor.

2. Click “Footer (footer.php)” from the list on the 5
right-hand side.
3. Look at the code, and find the exact spot indicated
by the red arrow in the screenshot to the right.
(That is, directly after the “</a>”.)
4. Type:
<footer id=”colophon” role=”contentinfo”>
<div class=”site-info”>
<?php do_action( ‘twentytwelve_credits‘ ); ?>
6
<a href=”<?php echo esc_url( _ _( ‘http://wordpress.org/’,
<br>Copyright © 2013 Your name or business ‘twentytwelve’ ) ); ?>” title=”<?php esc_attr_e( ‘Semantic Personal Publishing Platform’,
‘twentytwelve’ ); ?>” rel=”generator”> <?php printf( _ _( ‘Proudly powered by %s’,
name. All rights reserved. ‘twentytwelve’ ), ‘WordPress’ ); ?> </a> <br>Copyright © 2013 Alannah Moore. All rights
reserved.
</div> 
</footer> 
</div> 
(Or an alternative copyright notice; the “<br>”

just makes a line break.)
Your code should now look like this (4). Note that as the years pass, you will want to
extend your copyright notice so that it reads
5. Click the blue “Update file” button, and check “Copyright © 2013-14 Your name or business
how it looks on the live site. name. All rights reserved.”—and so on.
I think it is nice to keep the WordPress credit, since

this is, after all, a free software. But if you do want to
remove it, you need to delete this whole bit of code
(6, highlighted in blue) and save the page.
79

chapter 5

This is a dummy website set up to accompany Chapter 5 of Create Your Own Website Using WordPress
in a Weekend.
In this chapter of the book we see how the WordPress default theme “Twenty Twelve”, released as the
default theme as from December 2012, can be used to create a simple website for any kind of bus-
iness or personal site, or blog.
The new default theme has a clean and fresh design and is fully responsive, meaning that it looks re-
ally good on smartphones and tablets.
WIDGET AREA RECENT BLOG POSTS
This is a useful widget area where you might choose to put more information This is the blog section of the site
about you on the front page, so that visitors get more information at a glance
This is an aside
which they might otherwise miss.
This is a link
This is a quote
Search

Copyright © 2012-13 Alannah Moore. All rights reserved.
80

Basic site completion checklist
STE P - B Y- STE P : C RE AT I N G A B A S I C MODEL W E B S I TE / / / b asic site completion chec k list

Congratulations—you’ve now completed all the live demo
steps necessary to get your basic WordPress site Remember that you can visit the live demo site at
up and fully functional. http://www.createyourwebsiteinaweekend.com/
twentytwelve
You have achieved the following:
> The first steps of the website setup—such as setting The web world changes quickly, and constantly. Make sure
your time zone, your name as it will appear on the you sign up for updates at http://www.createyourwebsite
blog, your permalinks, etc.
inaweekend.com to be certain you’re in the loop.
> Customizing the look of the site—your header text,
a custom header, and changing the background
color or image as required.
> Creating pages. What Next?
> Linking pages to the menu. What do you think of your new website? Are you
> Working with the text editor. happy with the way it looks? Perhaps you’re
> Adding images to your site. looking forward to leaping into something more
> Adding video and audio content, if you wanted complex that allows you more creativity and free
to include these. rein. If the latter case applies, read on.
> Creating blog posts.
> Adding widgets to your sidebar and footer. If you’re content with your basic website as it is,
> Installing the essential plugins: Akismet, Jetpack, you can jump ahead to Chapter 9, where we’ll look
Email Protector, and the All in One SEO Pack. at what you need to know in order to manage and
> Adding a copyright notice to your site, if you market your live website.
wanted to include this.
Note: If you are going to use the site you’ve just
created as your real, live website, don’t forget that
you do want it to be visible in the search engines.
Go back to Settings > Reading, unselect the
checkbox next to “Discourage search engines
from indexing this site,” and save your change.
81

6
Selling from your website
accept ing online pay m e n ts
Accepting payment online can be a complicated beginning of the book, you have been able to get
business involving internet merchant accounts, everything organized in advance before starting
complex shopping carts, and payment gateways. to build your site.
While this may be appropriate for you further
down the line, if you want to set up your website You may also want to think about allowing your
in a weekend and take payment online as easily site visitors the additional options of mailing you
and painlessly as possible, using PayPal as your a check or arranging to pay you via a bank transfer,
payment processor is probably the best option. but this will mean extra work on your part. These
options should always be in addition to—not
It may take several days to get your PayPal account instead of—making payments via an instant,
up and running, so hopefully, as suggested at the online method, which most people prefer.
82

Using PaYPaL
S E L L I N G F R O M Y O U R W E B S I T E / / / U S I N G PAY PA L
Personal Business Email address forgot? Password forgot? Log In Sign up
Buy Sell Transfer Explore
PayPal is an online payment

Now your money can speak any
processor that allows you to take language, even if you can’t.
payments from your website via Buy from millions of online stores around
the world with one account.
a credit or debit card quickly and

easily. Your purchasers can also pay Learn about purchasing online
How to Purchase Online

with funds they have in their PayPal
accounts, but they do not have to
have a PayPal account to pay you
with a credit card. To accept
payments via PayPal, all you need Buy into being safer Sell in fewer steps Transfer money to friends
No matter where you shop, we’ll keep your Gone are the days of wating to get paid. now you Money is easier between friends when it’s this
to do is get an account and add a financial information private and protected.
More about buying

can request a secure payment in a few clicks.
More about selling

simple to send them money.
More about transferring
snippet of code to your web pages,

Help Contact us Fees Security Account features Developers Partners
which will then add a payment About PayPal Merchant services PayPal blog PayPal Labs Jobs Site map eBay
button—funds accumulated via Copyright © 1999 - 2012 PayPal. All rights reserved. | privacy policy Legal agreements
PayPal can then be transferred

PayPal is the easiest way of accepting payments online
directly to your own bank account.
(http://www.paypal.com).
There is no setup fee or monthly fee,

but you will be charged a transaction
fee each time you receive a card premier users will also have to verify option requires more concentration
payment, and also for international their bank details. You can always to set up, but will give you an entirely
“PayPal to PayPal” transactions. upgrade to a business account at professional-looking e-commerce
a later date if you don’t have all the store, so you’ll be ready to start
To accept purchases made via information you need at this stage. selling your products in your own
PayPal on your site, you need a online “shop” within just a few hours.
premier or business account; the Once you have your PayPal account
main difference is that you can’t functional, you have two options: On the next page, you’ll learn how
set up a premier account using > Using PayPal’s simple “Buy Now” to add PayPal buttons to your site.
your business name. or “Add to Cart” buttons, which you In Chapter 8, we’ll walk through the
can then add to your site, no matter setup of a free e-commerce theme
To set up a business account, which theme you are using. that uses the WooCommerce plugin.
you’ll need to have your business > Using a free plugin like
information to hand, including your WooCommerce or WP
business bank account details and E-Commerce, which will enable GooGle CheCkout
business address (the precise details you to use a specially designed Google Checkout (now merged with
required vary from country to country). e-commerce theme to create an Google Wallet) is another quick-and-
When choosing which kind of business online store. easy payment system you can use as an
account to use, select “Website alternative to (or in addition to) PayPal, but
Payments Standard” for the free The first option will be the most your visitors will have to have a Google
standard account. There will be an practical if you only have a few account to use it, or will need to sign up
approval period of a few days before articles you want to collect payment
for one in order to make purchases.
you’re ready to take payments; for—it’s also very easy. The second
83

PayPal buttons and shopping cart
chapter 6
You can add simple “Buy Now” a shopping cart and pay for them in
buttons if you’re just selling a few one go; in this case, choose the “Add
individual articles. If you imagine to Cart” button instead. Both options
your visitors making more than one are a snip to implement—all you
purchase at a time, it makes sense need to do is add a morsel of code
to let them add their purchases to to your pages or posts.
Japanese cookery classes at your home
Learn how to create perfect Japanese dishes at your own home. Our
classes provide a wonderful, informal way of learning the delights of
Japanese cooking.
• Sushi and Sashimi

• Noodle dishes
• Canapes
• Dumplings
• Gourmet course - a series of six classes
Our teachers are experienced and friendly and will bring all the equipment and ingredients you
need to your own home.
Invite up to six of your friends to your own personal Japanese cooking class.
Sushi & Sashimi evening
For s i x g u e s t s $ 1 8 5 . 0 0 U S D
Buy Now
A “Buy Now” button with a drop-down menu; see over the page to see
the “Add to Cart” button and other buttons you can set up with PayPal.
84

How to add PayPal buttons
S E L L I N G F R O M Y O U R W E B S I T E / / / PAY PA L B U T T O N S A N D S H O P P I N G C A R T
to your site
1. Log in to your PayPal account. Step 1: Choose a button type and enter your payment details
3
Go to “Merchant Services,” then Choose a button type Which button should i choose?
to “Website Payments Standard” Buy Now
Note: Go to My saved butons to create a new button similiar to an exsisting one.
underneath the “Get Started” Item name Item ID (optional) What’s this?
column. Sushi & Sashimi evening
2. Under “Option 1: Adding buttons,” Customise button
click on “Create button now.” Add drop-down menu with price/option Example
3. Add details of the product you

Name of drop-down menu (e x : “Colours,” For six guests $185 USD
“Sizes”)
are selling: Sushi & Sashimi evenin Buy Now
Menu choice name Price Currency

i. Keep the drop-down menu For six guests 185 USD
open at the “Buy Now” option; For four guests 150 USD
For two guests 100 USD

then add in the name and price. Add another option Remove option
ii. If you like, add the details of Done Cancel
the different options available Add drop-down menu without prices Example
Add text field Example
to the buyer, which will appear Customize text or appearance(optional)
as a drop-down menu, with

or without different pricing
5
options. A text field can also be
added, which may be useful for My Account Send Money Request Money Merchant Services Auction Tools Products & Services Help
Overview Add Funds Withdraw History Resolution Centre Profile

the buyer to add comments or You are viewing your button code
special instructions. (Remember 1. Click Select Code to select all the button code.
2. Copy the code (CTRL+C for Windows, CMD+C for Mac – or right-click and choose Copy).
to click the yellow “Done” button

3. Paste the code into your own code (CTRL +V for Windows, CMD+V for Mac – or right-click and choose Paste).
Intergration tips
after adding each element.) Website
iii. You can also opt to change <form action= “https://www.paypal.com/cgi-bin/webscr” method=”post”> Buyer’s View
<input type= “hidden” name=”cmd” value=’_s-xclick”>
the size of the button; add <input type= “hidden” name=”hosted_button_id”
value= “FN5ZA36QM44WN”>
For six guests $185.00 USD
credit-card logos; change the
<table>
<tr><td><input type= “hidden” name= “on0” value=”Sushi &amp: Sashimi
evening”>Sushi &amp: Sashimi evening</td></tr><tr><td><select Buy Now
language of the button; or name= “os0”>
change the wording to “Pay Select Code Go back to edit this button
Now” instead of “Buy Now.”

iv. Add postage, if needed. Edit Page
6
Add New
v. Under the “Step 2” set of options, Japanese cookery classes at your home
add inventory details, if you wish. Permalink: http://www.alannahmoore.com/wordpress_walkthrough/ View Page Get Shortlink
Upload/Insert
vi. Go to “Step 3” and choose
Visual Text
b i link b-quote del ins img ul ol li code more lookup close tags proofread fullscreen
various other details—such <form a c t i o n = “https:/ / w w w. p a y p a l . c o m / c g i-bin/webscr” m e t h o d = “post”>

<input t y p e = “hidden” n a m e = “cmd” v a l u e = ’ _ s - x c l i c k ” >
as whether or not you need <input t y p e = “hidden” n a m e = “h o s t e d _ b u t t o n _ id”value= “FN5ZA36QM44WN”>
<table>
the customer’s postal address, < t r > < t d > < i n p u t t y p e = “h i d d e n ” n a m e = “on0” v a l u e = “S u s h i & a m p : S a s h i m i e v e n i n g ” > S u s h i & a m p : S a s h i m i e v e n i n g < / t d > < / t r > < t r > < t d >
< s e l e c t n a m e = “o s 0 ” >
< o p t i o n v a l u e = “F o r s i x g u e s t s ” > F o r s i x g u e s t s $ 185 .00 USD< /o p t i o n >
if you need them to give you < o p t i o n v a l u e = “F o r f o u r g u e s t s ” > F o r s i x g u e s t s $50 . 0 0 USD< /o p t i o n >
< o p t i o n v a l u e = “F o r t w o g u e s t s ” > F o r s i x g u e s t s $100 . 0 0 USD< /o p t i o n >
further special instructions,

</select> </td></tr>
</table>
<input t y p e = “hidden” n a m e = “currency_code” v a l u e = “ U S D ”>
etc. Ignore the “Advanced <input t y p e = “image” s r c = “https://www.paypalobjects.com/en_US/GB/i/btn/btn_buynowCC_LG.gif” border= “0” name= “submit”
alt= “PayPal – T h e s a f e r, e a s i e r w a y t o p a y o n l i n e . ” >
< i m g a l t = “ “ b o r d e r = “ 0 ” s r c = “ h t t p s : / / w w w. p a y p a l o b j e c t s . c o m / e n _ G B / i / s c r / p i x e l . g i f ” w i d t h = “1” height= “1”>
variables” field. (See page 87 </from>
for notes on creating a “Thank Word count: 78 Last edited by admin on July 2, 2012 at 11:46 am
You page,” which you can also

configure at this stage.)
85

4. Click “Create Button” at the
chapter 6
Step1: Choose a button type and enter your payment details

bottom of the page.
5. Click “Select Code,” and then
copy it (Ctrl + C for PC; Cmd Choose a button type
+ C for Mac), as shown on the
Buy Now
previous page.
Shopping Cart ttons to create a new button similiar to an exsisting one.
6. Go to your website administration
Gift vouchers
area and paste the code (Ctrl + V
Donations Item ID (optional) What’s this?
for PC; Cmd + V for Mac) where
Subscriptions
you would like your button to
Automatic Billing
appear (usually underneath a
description and thumbnail-sized Instalment Plan
image of what you are selling). USD Need mutliple prices?
Use the Text view rather than the
Visual view of the text-editing area, Adding “Add to Cart” buttons type. In the same way, you can
as indicated on the previous page. To add “Add to Cart” buttons that choose to create a gift voucher,
7. As usual, save the page in your allow your visitors to make multiple “Donate” button, or any of the
website admin by clicking the purchases at the same time, the other options PayPal offers
blue “Update” button. process is identical; just choose (see screenshot below).
“Shopping cart” instead of “Buy Now”
when you’re choosing your button
Step1: Choose a button type and enter your payment details

TIP
PayPal saves your buttons so you can create Choose a button type
similar ones for other products, which is a real Buy Now
time-saver.
Note: Go to My saved buttons to create a new button similiar to an exsisting one.
The different buttons, and payment Step 1: WHAT TYPE OF BUTTONS DOES PAYPAL HAVE?
Choosing a button
types, offered by PayPal. The Steps
Step 2:
in the column on the left offer helpful Creating a button Buy Now Add to Cart Donate
accompanying notes. Step 3:

For buying just one item
at a time.
For buying more than one
item at a time.
For making charitable
donations.
Inserting a b u t t o n
Create a Buy Now Create an Add to Cart Create a Donate button
button Button
Step 4:
Advanced features
Step 5:
Buy Gift Certificate Subscribe Automatic Billing
Testing a button
Gives customers the For making regular For variable monthly

option of buying payments, such as amounts.
vouchers. subcriptions.
Learn more
Create a Gift Voucher Create a Subscribe
Button Button
86

s E L L i n g F r o M Y o U r W E B s i t E / / / PAY PA L B U T T O N S A N D S H O P P I N G C A R T
Extra options to make the
shopping experience more Customize text or appearance(optional)
professional
> If you’re good at using graphics PayPal button
software, you can create your
own button instead of using the
Use smaller button
default PayPal button. Create Display debit and credit card logos
your button and upload it to
the Media Library from the Country and language for button
administration area of your site;
then copy its URL. Click the
United Kingdom - English
button next to “Use your own
button image” and paste in the Select button text
URL. Your custom button will
Buy Now
now show up instead of the
default PayPal button.
Use your own button image
> A “Thank You” page obviously
What’s this?
serves primarily to thank your
customers after they have
bought something from you,
but it also lowers your charge-
Take customers to this URL when they finish checkout
back rates—i.e., people asking
for their money back—if you tell
customers precisely what to Example:https://www.mystore.com/success
expect after they’ve made the
purchase. So, on your “Thank
You” page, after thanking the To create a “Thank You” page, Note that PayPal will log you
customer for making the first create a page within the out of your session surprisingly
purchase, you should write admin area, and then give it a quickly for security reasons,
something like: “We will contact title using something like “Thank so you’ll need to have these
you within 24 hours to confirm you for your purchase.” Preview elements ready before you
we have received your order, the page and copy its URL, then start working on your buttons,
and will confirm delivery dates paste it into the field in Step 3 of otherwise you may find yourself
with you. In the meantime, if PayPal’s button configuration automatically logged out and
you have any questions, please process, which you can see have to start again.
do not hesitate to call us on xxx, labeled “Take customers to this
or email us at this address: xxx, URL when they finish checkout.”
and we will respond to you as Then, after customers have made
soon as we can.” This should their purchase, they will get
deter them from canceling directed immediately to the
their order if they don’t hear “Thank You” page that you’ve
back from you instantly! just created.
87

7
Exploring themes
CHOOS ING HOW TO D ISPLAY yo u r cont e nt
The content of your site may be what’s really importance of your selling points; and so on. So,
important, but it is the theme that will bring it to it is essential that you choose the right theme in
life and create the image of your site—and you or order to create the best impression and convey
your business—that the world will see. your message effectively.
The theme controls not only the “look” of your The stunning quality of the themes available—
site —its colors, font, background, and so forth— and the sheer quantity of them—is one of the
but also the way the information is displayed: what joys of building your own website using WordPress;
you include on your front page; whether you use however, choosing exactly which one to use can
images in your header panel to bring home the be challenging.
88

Free or premium?
There are thousands of WordPress If you purchase a premium theme, be
themes available that can be down- aware that there will be other people
loaded and installed in a matter of out there using the same theme as
seconds. Many are free, but many of you. It is unlikely that it will be
the most mouth-watering ones you recognized once your content is in
will find you have to pay for. place and you have added your own
logo, changed the background, and
The price of a commercial paid-for so on, but this may be an issue for
theme is remarkably low, usually you. Even if you buy exclusive rights
ranging from about $30–$97 at the to the theme, don’t forget that
top end of the scale, which seems to others may have purchased it before
be an incredible bargain compared you, and are entitled to keep using it.
to what you’d pay a web designer
to build a site. However, paying for a In a nutshell: anyone can design
theme will not be everyone’s choice; a theme and make it available for
if your site is a bit of an experiment, download, so there is no guarantee
or you’re just starting out, you may of the quality of a theme if you are
not have enough in your budget not paying for it. While there are
for a premium theme. some excellent free themes out
there, generally speaking, if you
Furthermore, it may not be just the want top-quality and technical
budget that determines your choice support when you need it, you
—you should also consider the will probably have to pay for it.
following:
> Free themes don’t offer technical
support, whereas premium ones
do—and you’ll most likely get free
upgrades with a theme that you’ve
paid for.
> Premium themes can usually be
customized to a greater extent
than free themes. Although some
of the free themes are also highly
customizable, don’t expect them
A premium theme: “Impact,” also from
all to be so.
WPExplorer http://themeforest.net/
item/impact-responsive-multipurpose-
theme/3674867.
Don’t despair if you have no budget for
Two themes by the same theme author—
a premium theme. There are some great
both are business themes with a built-in
free themes out there and we’ll look at A free theme: “Bizz” from WPExplorer portfolio, but the premium theme offers
several of them. http://www.wpexplorer.com/bizz-wordpress-theme. many more options.
89

How to choose a theme
chapter 7
The vast number of themes out there Other items to check for are: Themes in Use on Live siTes:
can make choosing the right theme > availability of different color
for your website bewildering. schemes, preferably unlimited
> multiple sidebars—allowing you
Here are some guidelines to to create different sidebar content
help you. for different pages (This can always
> Is the theme going to fit with what be done via a plugin, but you want
you actually need? For example, if to make it as straightforward as
you’re going to create a business- possible.)
type site that will be mostly > the option to upload your own
text-based, don’t be seduced logo (You might think this may be
into choosing a beautiful-looking obvious, but many free themes
theme that is designed primarily don’t allow for this.)
to showcase images—no matter
how gorgeous it looks. Before you make maximum
Becky’s Blissful Bakery is using “Boutique Theme”
> Will it display your content as you customizability a criterion, ask
from Elegant Themes
want it to be displayed? Don’t let yourself which options you actually (http://www.beckysblissfulbakery.com).
the theme layout determine how need. Many slightly older, and most
you arrange your content. You need free themes, may not offer a great
to display your message and the level of customization, but may be
rest of your content in the most perfect for your needs as they are.
suitable way for your website and
your business. Some other aspects to consider:
> How customizable is it, and how > Is it “responsive”? If a theme is
customizable do you need it to be? responsive, that means its format
The more recent premium themes will adapt to fit a cell phone. This is
tend to be more customizable, but not an absolute necessity, although
don’t assume they are—read the it is a current (and probably lasting)
descriptions carefully. trend. If in any doubt, check it out
> How much control does the theme on your cell phone to see if the
allow you to have? If you don’t want theme is legible. It may be that
the content displayed as it is on the you don’t actually need a
theme-demo home page, check responsive theme.
that you have control, or the degree > Do you want to run ads on your
of control you need, over the home site? Some themes do allow spaces
page layout. (This may be described for ads. If there is no specific ad
as a “drag-and-drop homepage space allocated on your theme, you
builder,” or more vaguely as will still be able to add ads in your
“multiple home-page layouts.”) sidebar as widgets.
Harley-Davidson in Barcelona is using
“Natural Theme” from Organic Themes
(http://www.espaciohd.com).
90

eXpLOriNG themeS /// HOW TO CHOOSE A THEME
Bun Mee is using “Restaurant Theme” from
Organic Themes (http://www.bunmee.co).
Nina’s Cakes is using “Wootique Theme”
from Woo Themes (http://www.ninascakes.es).
Oh My Veggies is using “Innov8tive Theme”

by Studio Press (http://www.ohmyveggies.com).
Le Flamant Rouge is using “Health & Beauty” from

Organic Themes (http://www.leflamantrouge.se).
TIP
Customization options—and the

language used to describe them—aren’t
standardized. If in doubt about any options,
ask first—many theme sites have a forum
or comments area where you can post any
pre-sales queries.
Suzanne Bag is using “Sentient Theme” from Growing Book by Book is using “Going Green” by
Woo Themes (http://www.suzannebag.com). Studio Press (http://www.growingbookbybook.com).
91

Where to find themeS
chapter 7
The WordPress Free Themes http://themeforest.net

Directory (http://wordpress.org/ Elegant Themes (premium)
extend/themes)—tied in with the http://www.elegantthemes.com
“install themes” area in your site WooThemes (premium)
admin—is the obvious place to start http://www.woothemes.com
looking for free themes. Here are iThemes (premium)
some other places to look for both http://ithemes.com
free and premium themes: Templatic (premium)
http://templatic.com
The WordPress Commercial Themes Press 75 (premium)
Directory (premium) http://press75.com
http://wordpress.org/extend/themes/ Organic Themes (premium)
commercial http://www.organicthemes.com
WordPress Themes Base (free) Mojo Themes (premium)
http://wordpressthemesbase.com http://www.mojo-themes.com
WP Daddy (free) Theme Trust (premium)
http://www.wpdaddy.com http://themetrust.com
Site 5 Themes (free) The Theme Foundry (premium)
Themeforest.net—source of thousands of
http://www.s5themes.com http://thethemefoundry.com
templates created by independent designers.
Free WP Themes (free) Graph Paper Press (premium)
http://www.freewpthemes.net http://graphpaperpress.com
WPSkins (free) Obox
http://www.wpskins.org http://www.obox-design.com
WP Templates (free; portal) WP Zoom (premium)
http://wptemplates.org http://www.wpzoom.com
WP Shower WP Now (premium)
(some free; mostly portfolio http://www.wpnow.com
and magazine styles) FrogsThemes (premium)
http://wpshower.com http://www.frogsthemes.com
Dessign (some free; Theme Junkie (premium)
mostly portfolio and magazine) http://www.theme-junkie.com
http://www.dessign.net Template Lite
Shaken & Stirred (some free) http://www.templatelite.com
http://shakenandstirredweb.com
Templatic (some free)
http://templatic.com This isn’t an exhaustive list. Once you
SkinPress start looking, you’ll find dozens and
(many free; mostly blog-/magazine- dozens of sites out there providing
type layouts) WordPress themes. If you’re feeling
http://www.skinpress.com overwhelmed, you might find the
StudioPress (premium) examples on the next few pages
http://www.studiopress.com a good starting point. Woo Themes—stunning themes created
ThemeForest (premium) by a group of talented designers.
92

How to install a theme
Themes are installed inside the you want to use, you can just
“Appearance > Themes” area of search for it by name. Create Your Own Website Using WordPress... New
2
the admin area. Dashboard
Manage Themes Install Themes
Jetpack
To install a premium theme, or a Posts
Search | Upload | Featured | Newest | Recently Updated
WordPress comes with a number free theme from another source: Media
Search for themes keyword.
Search
1. Download the theme from the

Links
of free themes that are already
installed, which you can see in theme website. If you’re using
Installing Theme from uploaded file: modernize.zip
the “Manage Themes” tab. a Mac, your computer will unzip 4
Unpacking the package...
it for you, but to upload a theme, installing the theme...
The handy new “Live Preview” you need it to be zipped, so you’ll

Theme installat successfully.
Live Preview | Activate | Return to Themes page
feature (indicated right) allows have to zip it again (right-click

you to test out how a theme will on the folder, then choose
look with your own content before “Compress”).
activating it. To activate a theme 2. Go to the “Install Themes” area
directly, click the “Activate” link. and click the “Upload” link. T IP
3. Click “Choose File,” navigate
You can add additional free themes to the zip file; click “Install Now”.
Some theme sites will bundle an instruction
directly from the WordPress Free 4. Click the “Live Preview Link.”
manual in the same zip file as the theme.
Themes Directory inside the “Install 5. You can make some basic setup Be careful not to upload the zip file with
Themes” area (click the tab towards changes here—click “Save and the manual, as your theme will not work
the top of the page)—you can search Activate” when you’re done properly. Check inside the zip file first to
for themes by color or other features, (you can customize the theme see if there is another zip file inside—if
or if you’ve already chosen the theme fully once it is activated). so, this is the file you will need to upload.
Create Your Own Website Using WordPress... New Howdy, Alannah Create Your Own Website Using WordPress... New
Dashboard
Dashboard Help Manage Themes Install Themes
Manage Themes Install Themes Jetpack
Jetpack
Posts Current Theme
Posts
Search | Upload | Featured | Newest | Recently Updated Twenty Twelve
Media
By the Wordpress team | Version 1.1
Search for themes by keyword. Links
Media
Pages The 2012 theme for WordPress is a fully responsive theme that looks great on any devi
Search
Links front page template with its own widgets, an optional display font, styling for post forma
Comments single views, and optinoal no-sidebar page template. Make it yours with a custom menu, he
Pages background.
Feature Filter Products
Comments Feedbacks Customize OPTIONS: Widgets | Menus | Theme Options | Header

Find a theme based on specific features.
Appearance
Products Colors
Themes
Feedbacks Black Blue Brown Gray Green
Widgets
Orange Pink Purple Red Silver Menus
Appearance Theme Options
Tan White Yellow Dark Light
Header Available Themes
Themes Background
Columns
Widgets Editor
One Column Two Columns Three Columns Four Columns Left Sidebar
Menus Plugins
Right Sidebar
Theme Options Users
Header Width Tools
Background Fixed Width Flexible Width
Settings
Editor
Features Collapse menu
Plugins Blavatar BuddyPress Custom Background Custom Colors Custom Header
Custom Menu Editor Stlye Featured Image Header Featured Images Front Page Posting Beach Bouquet Chaos Theory
Users
By Gibbo and Automatic By Automatic By Automaticl
Full Width Template Microformats Post Formats RTL Language Support Sticky Post
Tools
Theme Options Threaded Comments Translation Ready Activate | Live Preview | Details | Delete Activate | Live Preview | Details | Delete Activate | Live Preview | Details | Delete
Settings
You can search the WordPress Free Themes directory directly from inside The “Live Preview” feature allows you to try out the
your admin area. themes before activating them.
93

Themes: buSiNeSS
CHAPTer 7
The themes shown on the following

pages show you a selection of
themes designed for each of the
four “kinds” of website we look at
in this book. They’re the tip of the
iceberg, but a good starting point.
pageLines (LiTe) Theme*

(free, with premium add-on options)
from PageLines
(see Chapter 8 for demo)
http://www.pagelines.com
Install from the WordPress Free
Themes Directory
BesT (free) adapT (free) BLackBird (free) from Ink Themes

from BlogEx from WPExplorer http://www.inkthemes.com/
http://bloggingexperiment.com/ http://www.wpexplorer.com/ wp-themes/blackbird-responsive-
best-theme adapt-free-responsive-wordpress- wordpress-theme. Install from the
theme WordPress Free Themes Directory.
94

eXpLOriNG themeS /// THEMES: BUSINESS
*The themes marked with an asterisk
are extremely customizable. These
themes can be customized to suit
any kind of business, and can be
changed dramatically in style
and layout.
U-design* (premium)
from internq7 (ThemeForest)
http://themeforest.net/item/udesign-
wordpress-theme/253220
modernize* (premium) good space* (premium) associaTe (premium)

from GoodLayers (ThemeForest) from GoodLayers (ThemeForest) from StudioPress
http://themeforest.net/item/ http://themeforest.net/item/ http://www.studiopress.com
modernize-flexibility-of- good-space-responsive-minimal-
wordpress/1264247 wp-theme-/2278615
95

Themes: pOrtfOLiO
CHAPTer 7
visUaL Theme (free)

from Dessign (see Chapter 8 for demo)
http://www.dessign.net/visual-wordpress-
theme
porTfoLiUm (free)
from WP Shower
http://wpshower.com/themes/
portfolium imBaLance (free) shaken grid (free and premium
from WP Shower versions) from Shaken & Stirred
http://wpshower.com/themes/ http://shakenandstirredweb.com
imbalance
96

sTUdio 8 (premium) from UDFrance
EXp
e
http://udthemes.com/studio8-wordpress-themes
PLOR
r Ii N G T
tHhE
eMmE
eS /// S
TUHB
EHME
EASD
: IPNOGR T F O L I O
sideswipe (premium)
from Graph Paper Press
http://graphpaperpress.com/themes/
sideswipe
edgeLine (premium)
from Dessign voLUmes (premium)
http://www.dessign.net/edgeline- from Themezilla (ThemeForest)
theme-responsive http://themeforest.net/item/
volumes-responsive-portfolio-
wordpress-theme/2311911
97

Themes: maGaziNe/bLOG
CHAPTer 7
sTUcTUre (free and premium versions)

from Organic Themes (see Chapter 8
for demo of free version)
http://www.organicthemes.com
respo (free) paragrams (free) Unspoken (premium)

from Themnific from WP Shower from WP Shower
http://themnific.com/respo-theme http://wpshower.com/themes/ http://wpshower.com/themes/
paragrams unspoken
98

eXpLOriNG themeS /// THEMES: MAGAZINE/BLOG
magazine (premium)
from StudioPress
http://www.studiopress.com
pUre (premium) sTandard (premium) synch (premium)

from ThemeTrust from 8Bit from WP Shower
http://themetrust.com/themes/pure http://standardtheme.com http://wpshower.com/themes/synch
99

Themes: e-cOmmerce
CHAPTer 7
sLiding (premium)
from WooThemes
http://www.woothemes.com/2011/12/sliding
mysTiLe (free) wooTiqUe (free) handmade Two (premium)

from WooThemes from WooThemes from Obox (ThemeForest)
(see Chapter 8 for demo) http://www.woothemes. http://themeforest.net/item/
http://www.woothemes.om/2012/08/ com/2011/09/wootique handmade-two-ecommerce-
mystile wordpress-theme/4062864
100

fLexishop 2 (premium)
eXpLOriNG themeS /// THEMES: E-COMMERCE

from PrimaThemes (ThemeForest)
http://themeforest.net/item/
wp-flexishop-2-a-flexible-
woocommerce-theme/2080989
BoUTiqUe (premium) kineTico (premium) sheLfLife (premium)

from Elegant Themes from RDever (ThemeForest) from WooThemes
http://www.elegantthemes.com/ http://themeforest.net/item/kinetico- http://www.woothemes.com/2012/01/
gallery/boutique responsive-wordpress-ecommerce shelflife
/2655335
101

8 In focus
four themes for four types of site
Now that we’ve had a look at some of the themes I’ve chosen this theme for the business section
available, we’re going to focus on one theme for because of its amazing flexibility—it can be
each of the “types” of website we are looking at customized to suit absolutely any kind of business.
in this book—business, portfolio, magazine, and You will see that you can purchase add-ons to
e-commerce. For each of the chosen themes, I’ll increase the theme’s functionality, however this
walk you through the steps necessary to set up walkthrough will use only the elements that you
and customize it to suit your own needs. are provided with when you install the theme.
Business theme
Adventurous readers will relish the high degree
of customization possible and will be able to allow
their creativity full rein when working with this
theme. Less technically savvy readers may feel
“Pagelines” (Lite) Theme confused when they see the sheer amount of
(free, with premium add-on options) by PageLines options available inside the admin area. Do not
http://www.pagelines.com be dismayed, however; the walkthrough will lead
The theme is listed in the WordPress Free Themes you step-by-step through the customization of
Directory, so it can be installed directly from inside the theme, allowing you to create a site just like
the admin area of your website. the one in the demo, and leaving experimentation
to those who feel like an extra challenge.
See the functioning demo of this theme at This theme can be translated into any language using
http://www.createyourwebsiteinaweekend.com/pagelines the Codestyling Localization plugin—see page 152.
102

D R A G & D R O P F R A M E W O R K
Home About Blog Services Contact
Sample Page Search
Thousands of beautiful website templates are available to

use with WordPress.
Drag & Drop Responsive & Mobile Tons of Addons

PageLines is a drag & drop framework
that allows you to completely
Built from the ground up to look great
on mobile devices. PageLines utilizes
Load up your own sections, themes
and plugins using PageLines one of a
Learn how to build your own
customize your website with drag &
drop.
an advanced responsive framework. kind extensions marketplace.
website
If you can build your website yourself, you can remain in charge. You
cut down on webmaster fees, and you can update it yourself, whenever
you like. Most importantly, it enables you to present the image you want
to present to your customers. In Create Your Own Website Using
Sample Page
WordPress in a Weekend, yuu’ll leran how to do this by following a
series of step-by-step walkthroughs that show you how to create your
own website with just a few hours’ work.
Read more about the book
PageLines (Lite) Theme.

This is a demo website using the free Pagelines Lite theme, to accompany Chapter 8 Latest Blog Posts
of Create Your Own Website Using WordPress in a Weekend. To find out more about the This is a blog post
book, please click the orange button above, or This is another blog post
visit:http://www.createyourwebsiteinaweekend.com.
Home About
Workshops WordPress Training Website Design
Blog Services Learn to create your own website using One-to-one WordPress training. Whatever type of website you need, we can
WordPress in a one-day workshop. design and create it for you.
Contact
WordPress workshop dates (Paris) - 13th + 15th Nov & 20th + 22nd Nov (2 sessions) - let me know if you’re interested. http://t.co/1BCXvnFb
_ alannahmoore
Home About Blog Services Contact
© 2013 Create Your Own Website Using WordPress in a Weekend
Our demo site using the PageLines theme.
Learn how to
build your own
website
If you can build your website yourself.
The PageLines theme is

responsive—it alters its
layout to fit a smartphone
or a tablet.
103

how to set uP and customize choose the colors for your
the theme (as in the demo) background, etc. For the demo
(see http://www.createyour site, I have chosen a light gray
3
D R A G & D R O P F R A M E W O R K
Sample Page Search
websiteinaweekend.com/pagelines) “Body Background,” left the

Search
Recent Posts
“Page Background” blank, and
Hello world!
Recent Comments
1. Install the theme at Appearance selected white for my “Content
> Themes > Install Themes. Search Background.” I’ve also chosen to
Mr WordPress on Hello world!
Archives
“PageLines,” then click “Install change the color of my links from

November 2012
Hello world! Categories
Now,” and then “Activate.” blue to orange, and I’ve darkened

By admin On November 10, 2012 • 1 Comment Uncategorized
Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!
Meta
Read Full Article →
2. Just as we did in the “First Steps” the footer text so that it is visible
Log in
Entries RSS
Comments RSS
WordPress.org
section for the default site (see against the light gray of the
page 37), adjust your site title and background. (It may be useful to
Sample Page
tagline if necessary, choose your remember that #FFFFFF is the

If you’re not using a logo, I suggest you create time zone, check your comments hex code for white, if you want
an image file of your name or business name and search engine settings, choose to use this for your “Content
written in a font of your choice, and use it your display name for blog posts, Background”.)
instead of a logo—you can use Pixlr for this. and set your permalinks.
If you remove the “PageLines” logo and don’t 3. Now, you can begin customizing. If you are planning to use an
replace it with anything, your site title will The first thing to do is to upload image for the background of the
show up as text in this space, looking your own logo to the site. Go to site, you can upload it through the
considerably less smart and professional. PageLines > Site Options. “Site Background Image” area just
Make sure the background color of the file Underneath “Custom Logo” click underneath the color picker section;
you create matches the color you choose for “Upload Image” and select your if you’re using a photo, you will
your “Content Background”—I’ve chosen logo from your computer. While need to keep the checkbox next to
white in the demo. you’re on this page, scroll down “Supersize the Background Image”
a little and uncheck “Automatically selected, so that the image will resize
show page titles?”, before going when viewed on a small screen or a
4
Global Settings Lite Edition down to the bottom of the page smartphone (otherwise just a very
and clicking the blue “Save small portion of the photo will be
You Are Using PageL Options” button. visible). You will also need to specify
Website Setup PageLines Lite is the free
4. Go to “Layout Editor,” the second a solid “Content Background” color,
Upgrade to the Pro edition
Layout Editor item on the “Site Options” menu, to ensure the text is readable (it will
Why Upgrade? underneath “Website Setup.” be difficult for site visitors to read
Color Control
your text if it is displayed directly
Scroll down the page a little to onto your image background).
5
Layout Dimension Editor
Configure the default layout sizes for your site, which is initially selected above in the Default Layout Mode.
This option allows you to adjust columns and margins for the default layout
where you see “Layout Dimension
Select Layout To Edit
Editor.” Select the first layout on the Save the page when you’re done.
left from the row of options, which
Margin Content Area Margin
gives you a single, wide column.
Main Column Then, drag the side of the content
960px
area so that its width is 960. Click

the blue “Save Options” button at
960px
the bottom of the page.
5. Go to “Color Control” from the

960 960 68,57142857
Global Content Width (px) Main Column Width (px) Sidebar1 Width (px) Content Percent (%)
inner menu. Here is where you
104

6. Go to “Typography” from the drop-down the way it is. Click the
left-hand menu. Here’s where you blue button to save the settings.
can choose from a variety of fonts;
9 Page Attributes
for the demo site, I have changed 9. Go to the editing page for
the fonts from Helvetica to Arial, your home page, and from the
Parent
but you may not wish to make any drop-down on the right-hand
changes. Save the page if you’ve side headed “Template,” select (no parent)
made any alterations. “Template 1.” Click the blue Template

7. Go to “Header and Footer.” Check “Update” button. (This step Default Template
“Enable Drop Down Navigation” will become clear, shortly.) Template | 1
Template | 2
and save. 10. The next thing to do is set up Template | 3
8. You may already have your pages your menu as you will need it for Template | 4
Template | 5
in place from the default demo the next step. Go to Appearance
setup. If so, you can go straight > Menus and create a menu Need help? Use the Help tab in the upper right
to Step 9, after making sure your entitled Main. You may already of your screen.
home, and (optionally) your blog have a menu ready, from the
page, are set up as below. If you demo setup, which is perfect.
have no website content as yet, When you have your menu in You may want to create a different menu
follow these steps. place with your pages in the for the footer area later on—we’ll see this
order you want, assign the Main in step 19.
In Pages > Add New, create the menu to each of the various
pages you want for your website, menu positions in the box on the
including a page entitled “Home.” left entitled “Theme Locations” Drag & Drop Template Setup
11
Use draggable sections to control the design of your site’s templates.
You don’t need to complete the (these represent different menu 1. Select Template Area
content of these pages yet—for this choices but it is easiest simply Header
Wrap (Pro)
Page Templates
step, we just need them to exist on to assign “Main” to them all at

SB1 SB2
Content Area
(Pro)
Morefoot (Pro)
Footer
the site. Make sure you create a blog this stage).

Editing → Site Header
or news page at this stage, if you 11. In step 9 we assigned a layout
Global Scope
2. Arrange Selections in Area With Drag & Drop
want one—you don’t need to write entitled “Template 1” to the home Active Sections Available / Disabled Sections
anything here, just as in the default page; we’re now going to determine Branding Options
Boxes
Callout
Masthead
BrandNav
demo setup, as the system will put how that template is going to look.
Nav Classic Options
Hero
NavBar
your blog posts on this page

Options
automatically. While you’re in the Go to PageLines > Drag & Drop from
Pages area, you can delete the the left-hand navigation. You can see
“Sample Page” that WordPress that the header area (indicated in the
put in for you. screenshot) is colored blue, which
means we are editing the header
Now, in Settings > Reading, in the area of the home page. You have a
section labeled “Front page displays,” few different options here regarding
select the radio button next to “A the layout of your logo and your
static page,” and choose the Home menu. For my demo site, I have
page from the drop-down. If you’re chosen the “BrandNav” layout which
going to have a blog section on your puts my logo to the left and the
site, set the “Posts page” drop-down menu to the right—this suits my site,
to your blog or news page. If you as there are just a small number of
don’t want a blog page, leave this menu items. If you have a larger
105

number of menu items, this won’t the home page. Go back to the
be suitable; instead, choose either: PageLines > Drag & Drop page.
Click “Page Templates” (as shown
11
a. The “Branding” with “Nav Classic” in the screenshot bottom left) and
option—that is, your logo with a light underneath it, select “Template 1”
grey menu underneath it that looks from the area entitled “For Which
like mine, but extends the width of Type of Page?”
the site, or:
Drag & Drop Template Setup
b. The “Branding” with “NavBar” Drag “Quickslider” into the “Active
option—that is, your logo with a Sections” box so that you have three
1. Select Template Area
Header
solid menu bar underneath it, for elements in the “Active Sections” box;
which you will be able to choose you may also, optionally, choose to
Wrap (Pro)
Page Templates
SB1 SB2
Content Area (Pro)
Morefoot (Pro)
Footer
from several color options; blue, add the “Hero” element, most likely
black, orange, etc. underneath the Quickslider, which
Editing → Site Header
I’ll talk about in a moment. Your
Global Scope
To make your choice, simply drag selection should look as it does in

Active Sections Available / Disabled Sections
Boxes Masthead
the items you need from the right- the screenshot at bottom left, with
Branding
hand box into the “Active Sections” or without the “Hero” element.
Options
Callout BrandNav
Nav Classic Options
box, and remove any that you don’t

Hero
NavBar Options
want from the “Active Sections” box. 13. Fill in your home page content
(The selection being made in the on the home page editing page,
Global Settings Lite Edition
screenshot is the one corresponding if you don’t yet have any content
You Are Using PageLines Lite Edition to Option a above.) there. (Your home page content
Website Setup PageLines Lite is the free version of PageLines Frame
Upgrade to the Pro edition for more sections & options
will show up where you can see
Layout Editor
Why Upgrade? PageLines Tour

If you have chosen Option b, now go the text written on the plain white
Color Control
to PageLines > Site Options > NavBar background on the demo site.)
Typography NavBar and choose the color option you Save the page, and look at your
Header And Footer
NavBar and Fixed NavBar Theme
prefer. (Make your selection from the home page on your live site; you
“Standard NavBar” drop-down, as can now see your text there.
Select the color and theme of the NavBar
Blog And Posts
NavBar
Fixed NavBar - Select Theme
shown in the screenshot—the fixed
Advanced Black Transparent (Default) menu bar option is not available for 14. We now need to put some
Custom Code Standard NavBar - Select Theme the free version of the theme.) images into our slider; go to
Orange
PageLines > Page Options and
The default setting for the menu bar click the “Quickslider” box under
12
Header
is to include a search box on the right. “Site Defaults.” Here, you can
If you want to remove this, scroll a configure the number of images
Wrap (Pro)
Page Templates SB1 SB2

Content Area
(Pro)
little further down the page until you you want to show in the slider,
Morefoot (Pro)
Footer
For Which Type of Page? see a checkbox labeled “Standard and a number of other settings,
NavBar—Hide Searchform?” and such as including an arrow,
Template | Default Template | 1 Template | 2 Template | 3 Template | 4 Template | 5
Blog Post Blog
Editing → 1 Page Template Area check the box. Click “Save Options” setting the slider to transition
and see how your new menu bar automatically, and so on.
now looks.
Callout Scroll Spy
At the bottom is the area where you

Quickslider Options
Hero
Content Options
12. Now that you have your menu upload the images; you will need them
Masthead
Boxes Options
looking the way you want it, we all to be the same height. You can
are going to continue customizing size them to any dimensions you like,
106

but a suggested size is 930 x 320. like it displayed, click the blue
The easiest way of resizing your button to save your settings.
images is to upload them to the 14
QuickSlider Slide 1
Setup options for slide number 1
Media Library, scale to 930 width, 16. Now let’s look at the boxes at Slide Image
crop to 930 x 320, and save. Then the bottom of your home page.
http://www.alannahmoore.com/wordpressdemo/wp-content/uploads/2012/11/websites.jpg
Upload Image Select From Library
add them to the slider using the These are a great way of drawing
“Select from Library” button. (If attention to the services your
your slider images are already the business offers; you don’t need to
Image Alt
desired size, you can upload them have just three, you can have as
directly to the slider area using the many or as few as you like. Create
Slide Text
Thousands of beautiful website templates are available to use with WordPress.
blue “Upload Image” button, as your boxes by going to Boxes >

shown in the screenshot at right.) Add New Box. You can add
images, and link the boxes to
As you can see, you can choose to certain pages, a little lower down Slide Link URL
add text to your slider images and the box content editing page. Slide Text Location
choose the position of this text, and, Left/Bottom
if you like, link the slider images to Note that as with the slider images, Template Setup
pages on your site. you will need your box images to be 17 Drag & Drop Template Setup
the same height, so that they look 1. Select Template Area
Note: If you can’t see as many places neat on the page (the system will Header
Wrap (Pro)
to upload slides as you have specified, automatically take care of the width).
Page Templates SB1
Content Area SB2
(Pro)
Morefoot (Pro)
click “Save Options” and they will The easiest way of doing this is to
Footer
become visible. choose a size for them all and scale Editing → Site Header Global Scope
and crop them to this size from within Active Sections Available / Disabled Sections
Click “Save Options” when you have the Media Library (I sized mine to TwitterBar Options
Hero
finished configuring your slider. 600 x 448 px). When you have Simple Nav Options
Footer Columns Sidebar
added an image to a box, click

Options
15. The “Hero” element is the boxed- the “Save Meta Settings” button.
out area you can see on the live
demo site where I talk about this Next, select the “default-boxes”
book and show the cover. Including checkbox in the “Box Sets” area
this section won’t be suitable for just below the blue “Publish” button, 17. The last part of the page
all kinds of business, but for some, and then click “Publish.” When you layout that we need to set
it will be the ideal way to showcase have created your boxes, delete the up is the footer area. Click
a special offer or event, and you example boxes from the Boxes > PageLines > Drag & Drop
can even, optionally, include a Boxes area. and then select the footer
striking button to make your area of the template; drag
special content really stand out. Now, go to PageLines > Page Options the “TwitterBar” and “Footer
> Site Defaults area; click on the Columns Sidebar” elements
If you want to use this element, “Boxes” box. Here is where you can into the “Active Sections” box.
you can configure it in the PageLines configure your boxes as you’d like (You may, or may not, want to
> Page Options > Site Defaults area, them to appear. I’ve set mine to have include the “TwitterBar;” we will
as you did for the slider; click on the image appear on top, with the talk more about Social Media
the “Hero Unit” box instead. When image size at 280 px, with a frame, in Chapter 9, so don’t worry if
you have finished inputting your ordered by Date, in ascending order. you’re unsure at this stage if this
content and choosing how you’d Save your settings when finished. will be appropriate for you.)
107

18. If you’ve added the “TwitterBar,” 23. Now, all that’s left to do is to
go to PageLines > Site Options > arrange your page content the
Website Setup and scroll down way you want it, and to add
Text
19
Title:
until you see the area entitled some blog posts to the site.
“Twitter Integration.” Type your You’re ready to go!
<center>© 2013 Create Your Own Website Using WordPress in a Twitter username into the field
Weekend</center>
labeled “Your Twitter Username”
and save the setting.
19. Go to PageLines > Site Options
The bottom menu may be useful to include > Header And Footer. Where you
links such as Privacy and Terms & Conditions, see “Select Number of Footer
that you do not necessarily want added to the Columns,” choose 1, and save the
main menu at the top of the page. To set up a setting. Now go to Appearance >
separate menu for the bottom area, create Widgets. Drag a Text widget into
the pages you want to appear in it, then the “Footer Columns Sidebar”
create a menu entitled “Bottom” (in the and write your copyright notice
Appearance > Menus area), add the new in it. I chose to center my text so
pages to the “Bottom” menu, and assign it that on the live site it is dislayed
to the “SimpleNav” section on the left on nicely centered in the middle of
the Menus page.
the web page, aligned with the
menu elements; this you can do
by typing “<center>” before the
copyright notice and “</center>”
20
Template Setup
after it, as shown in the

Drag & Drop Template Setup

screenshot.
20. Now that we have configured the
Header
Wrap (Pro)
Page Templates SB1 SB2

Content Area
(Pro)
Morefoot (Pro)
Footer
layout of the home page, we also When entering your page content,
Which Content Area Type?
need to configure the layout of remember that we have configured the
Template | Default
Blog Post
Template | 1
Blog
Template | 2 Template | 3 Template | 4 Template | 5
the blog page. If you look at your settings so as not to have page titles
Editing → Blog Content Area
blog page now, you will see a mini appearing automatically—this is to
version of your front page slider prevent “Home” or other text appearing
appearing at the top of your very prominently on the front page, which
Boxes Masthead
would not suit the layout. You will need

Posts Info Options
PostLoop Options
Callout Content Sidebar
blog posts. If you are happy with
to create a page heading for each page
QuickSlider Options
Post/Page Pagination Options
Hero this, you can skip this step; if not,

go to PageLines > Drag & Drop. from within the content box.
Click “Content Area” then “Blog”
and remove the “Quickslider”
Adding an image to a blog post via the from the “Active Sections” box,
“Featured Image” box will show a thumbnail as shown in the screenshot.
image next to the blog post on the main 21. Now, add some widgets to the You’ve seen that the PageLines theme
blog page. “Primary Sidebar.” These will offers you many different options. If your
appear on your home page and appetite has been whetted, then there is
on your blog and other pages. plenty more customization you can dive
22. The penultimate step is to install into, but you may be happy with your new
your essential plugins as we did
business site the way you have set it up.
for the demo site (see page 74).
108

Portfolio
IN FOCUS /// PORTFOLIO THEME

Visual
Home Portfolio Facebook Twitter
About Blog Forrst Dribbble
Contact Resume Tumblr Flickr
theme
Avriar Graphic Design
Components of a book into a coherent whole. Front matter,
or preliminaries, is the first section of a book, and is usually
the smallest section in terms of the number of pages.
Incorporating the content, style, format, design, and sequence
of the various components of a book into a coherent whole.
Front matter, or preliminaries, is the first section of a book,
and is usuallythe smallest section in terms of the...
demo: “Visual” theme (free)

by Marios Lublinski of Dessign.net
http://www.dessign.net/visual-
wordpress-theme
A beautiful, clean, minimal portfolio

layout suitable for graphic designers,
photographers, artists, architects,
and all creative professionals who
need to display their work online. Contemporary Graphic
Design
Graphic Design Neue
Various components of a
Grid Ultra Design
Private collectors
Modern Swiss Design
Sequenceof the various
Visual Typography
Various components of a
Contemporary Art
Design
Components of a book into book into a coherent whole. corporations, publicity components of a book into book into a coherent whole. Sequenceof the various
a coherent whole. Front Front matter, or funded arts organizations, a coherent whole. Front Front matter, or components of a book into
matter,or preliminaries, is preliminaries, is the first contemporary art museums matter, or preliminaries, is preliminaries, is the first a coherent whole. Front
the first section of abook, section of a book, and is or by artists. Contemporary the first section of a book section of a book, and is matter, or preliminaries, is
and is usuallythe smallest... usually the... exhibitedby ... ... usually the... the first section of a book ...
This theme is not responsive but Copyright 2011. All Rights Reserved. Design & Developed by Dessign.net
the layout works well on a tablet

“Visual” theme by Marios Lublinski of Dessign.net.
or smartphone.
Visual
Home About Facebook Twitter
Portfolio Blog
You can view the functioning

Contact
demo of this theme at: http://www. This is an example site using the Visual Theme
createyourwebsiteinaweekend.com/visual
This is a dummy site set up to show readers of Create Your
Website Using WordPress in a Weekend how the Visual
Theme by Marios Lublinski of Dessign can be set up. Visual
Theme is a free, minimalist portfolio theme that can be used
by any kind of creative - designers, illustrators
photographers, artists, architects; download the theme
at http://www.dessign.net. In case you have come across
this site via the ...
This theme can be used for a website Cutlery

This is an example blog
Mosaic
This is another blog post.
Diagonals
The most recent blog post.
Abstract background
This theme is a very nice,
Cow
This theme is a suitable for
Graffiti
Marios Lublinski has
post. Six blog posts are Blog posts display writing displays at the top right of minimal portfolio theme that artists, photographers, designed some other
in any language. All you need to do is arranged at the bottom of

the home page, underneath
the portfolio
on the home page, whereas
portfolio entries
the home page, next to the
slider. The other ones
appear underneath the ...
is perfect for anyone
needing to display their
work
graphic designers,
illustrators and architects
who need to display their
portfolio ...
wonderful WordPress
portfolio themes, some free
and some premium. Have
a look at ...
install your own language version of Copyright 2011. All Rights Reserved. Design & Developed by Dessign.net
WordPress—see page 152.

Our demo site using the “Visual” theme.
109

How to set up and customize 5. In the “Custom Background Color”
chapter 8
the theme field, you can type the hex number

1. Download the theme from the (color code) of the color you’d like
Dessign website. If you are working to use as a background color for
on a Mac, your computer will unzip the site.
the theme for you; however, you do
need it to be zipped, so zip it again You can use Pixlr to bring up a color
by right-clicking on the “Visual wheel, from which you can then
Theme” folder and choosing choose your color.
“Compress Visual Theme.”
2. Upload the theme by going to To do this, go to http://www.Pixlr.com
Appearance > Themes > Install and create a new image. Click the
Themes > Upload, in your admin large rectangle at the bottom of
area. Click “Choose File,” select the toolbar to the left; you can then
the zip file, click “Install Now,” use the color wheel that opens up
and then “Activate.” to select the color for your site. Copy
3. When you’ve uploaded the the six-digit/letter color code from
theme, you’ll see a link entitled the right-hand side of the color
“Customize,” however, it’s best window; paste it into the “Custom
to go straight into the main admin Background Color” field in the
area, as there you can do everything administration area of your website.
you need to do at once. So, click
Appearance > Visual Settings When finished, click “Save Changes.”
from the left-hand navigation.
4. Your logo needs to be on a white 6. B
efore you go any further, follow
(or transparent) background, and the preliminary steps to set up
should be sized to 350 x 75 px. your website exactly as we did
You can do the resizing outside earlier for the demo site: within
WordPress, or within it—either the “Settings” area, set the title,
way, you will need to upload your date, and time; choose your search
logo to the “Media Library” and engine visibility, comments, and
copy its URL (web address). naming preferences; and select
“Post name” for your permalinks.
The URL of an uploaded image is
visible in the URL field once you have 7. Y
ou can now create the pages
uploaded the image into the “Media you want on your site.
Library.” Scroll your mouse over the
space underneath the name of the Create your regular pages, such as
image in the “Media Library,” and your “About” and “Contact” pages,
“Edit” will appear; click on this, and and assign the default layout to
you will see the “File URL” field to the those pages. You will also need to
right of the image on the next screen. create a “Portfolio” page and assign
You can copy the web address of the the portfolio layout to it, as well as a
image from here. Back in the “Visual “Blog” page, to which you will assign
Settings” area, paste the URL into the blog layout. (There is no need to
the “Custom Logo URL” field. create a “Home” page.)
110

Page layouts are assigned in the

“Page Attributes” box to the lower Visual Theme New Howdy, admin
Screen Options Help
7
Dashboard
Add New Page
right of the page-editing screen, Posts
Publish
Media
as shown in the screenshot at right. Pages Save Draft Preview
All Pages Add Media Status: Draft Edit

Visual Text
Add New
You do not need to perfect your

Publish Immediately Edit
Comments
pages at this stage; you can always

Appearance
Plugins
Page Attributes
come back to them when your setup

Users
Tools Parent
is complete. The blog and portfolio Settings (no parent)
Collapse menu Template
pages are created automatically by Default Template
Order
the theme, so you don’t need to do 0
Path: p Need help? Use the Help tab in the upper right of
anything else to set these up. Word count: 0

your screen.
Featured Image
Set featured image
8. The next thing is to link your

pages to the menu so that the
links appear at the top of the web 8 Menu Name header_menu
page. Go to Appearance > Menus Create Menu
and create a new menu called To create a custom menu, give it a name above and click Create Menu. Then choose
“header_menu.” items like pages, categories or custom links from the left column to add to this menu.
9. Add the pages you’ve just created

to the menu from the “Pages” box 9
(a little further down the Menus
Pages
page, and to the left).
Most Recent View All Search
Create a “Home” link in the “Custom About

Links” box (above the “Pages” box), Contact
putting your domain name in the
Portfolio
URL field, and “Home” in the “Label”
Blog
field. The theme will automatically
generate a home page for you, which
Select All Add to Menu
is why you don’t need to create one
and add it to the menu.
Reorder the menu items by dragging

them into the right position, and click
9
Custom Links
“Save Menu.”
10. You now need to create a second URL h t t p : / / w w w. y o u r d o m a i n . c o m

menu, which is for your social
media links. If you don’t have Label Home
these in place yet, don’t worry—
you can always come back and
complete this section once you Add to Menu
have read Chapter 9.
111

When you are ready, create a second
chapter 8
menu entitled “social_menu.” You

11
Visual
Home About Facebook Twitter
can create custom menu items to 1 Portfolio

Contact
Blog
include each of the social media

This is an example site using the Visual Theme
platforms you use (e.g. Facebook, This is a dummy site set up to show readers of Create Your
Website Using WordPress in a Weekend how the Visual
Theme by Marios Lublinski of Dessign can be set up. Visual
Theme is a free, minimalist portfolio theme that can be used
Twitter, Google+, etc.) with the by any kind of creative - designers, illustrators
photographers, artists, architects; download the theme
at http://www.dessign.net. In case you have come across
this site via the ...
“Custom Links” box in the same

way you created a home page link;
however this time, you type your 2
Facebook page, etc. web address
into the URL field rather than your
3
own domain name, and then type
“Facebook” in the “Label” field, and
so on for all the other social media
links you want to include.
Reorder the social media links once

4
you have added them to the “social_
menu,” and when you’ve finished,
click “Save Menu.”
11. You are now ready to create your

Cutlery Mosaic Diagonals Abstract background Cow Graffiti
blog posts and portfolio entries. This is an example blog

post. Six blog posts are
arranged at the bottom of
This is another blog post.
Blog posts display writing
on the home page, whereas
The most recent blog post.
displays at the top right of
the home page, next to the
This theme is a very nice,
minimal portfolio theme that
is perfect for anyone
This theme is a suitable for
artists, photographers,
graphic designers,
Marios Lublinski has
designed some other
wonderful WordPress
the home page, underneath portfolio entries slider. The other ones needing to display their illustrators and architects portfolio themes, some free
the portfolio appear underneath the ... work who need to display their and some premium. Have
portfolio ... a look at ...
First, let’s take a look at the layout of

the home page so you can see what Dashboard Screen Options Help
11 Posts
Edit Post Add New
will go where (see the screenshot at All Pages Abstract background Publish
top right).
Add New
Permalink: http://www.alannahmoore.com/visual/abstract-background/ Edit View Post Save Draft
Preview Changes
Categories Get Shortlink
Tags Status: Published Edit
Upload/Insert Visual HTML
Media Visibility: Public Edit
In the large image space at the top Pages

Published on: Aug 31, 2012 @ 22:51 Edit
Comments
of the page, you will see the featured Appearance

Move to Trash Update
images of the blog posts or portfolio Plugins
Users
Categories
entries you have chosen for display

All Categories Most Used
Tools
Settings Blog
in the “Slider” (1). An extract from Collapse menu

Slider
Portfolio
your most recent blog post, plus its Uncatergorized
featured image if it has one, will go

to the right of this (2). Underneath Path: p >>a>> img.alignnone wp-image-46
Word count: Draft saved at 11:46:14 am. Last edited by admin on September 1, 2012 at
19 11:16 am
(3), a maximum of six portfolio +Add New Catergory
Custom meta box

entries will show up in one or two Featured Image
Show in
rows (you can include as many as slideshow
you like for the portfolio section of Discussion
the site, but the six most recent blog Allow comments
Allow trackbacks and pingbacks on this page.
posts are what will be visible on the

home page). Note that you can add Remove featured image
explanations and text to the portfolio

entries, but the wording will not
112

show up on the front page—only on 12. W
hen you’re satisfied with the

the individual page for that entry. look of your portfolio and blog
entries, go back and finalize your
Finally, across the bottom of the page main pages. You should now
(4), your six most recent blog posts activate Jetpack so you can set
will appear, along with the first few up a contact form, and also
lines of accompanying text. activate Akismet, but once you
have done these final touches,
In order to define what goes where, you are finished.
you will need to create three post
categories. Go to Posts > Categories, With its minimalist layout, the theme
and create and save categories does not have space allocated for
entitled “Slider,” “Blog,” and “Portfolio.” the addition of widgets; the designer
believes they interfere with the
Now, create your entries. For each cleanness of the whole and detract
one, you will need to add a featured from your artworks.
image, using the “Featured Image”
box bottom right of your screen. You Now that you are done, you can
can also add an image, or as many enjoy showing off your stunning
images as you like, plus text, into the portfolio site!
main text area of each entry; these
will be visible when the visitor visits
each entry’s individual page.
Using the “Categories” box, assign

each entry to one or more of the
categories you have just set up. If you
are assigning one to the “Slider,” you
also need to check the box entitled
“Show in slideshow” in the “Custom
meta box” lower down on the page
(as in the screenshot shown).
113

Magazine
chapter 8
structure theme
theme HOME ABOUT CONTACT
creAte Your WeBsite in A WeeKenD

structure theme
demo: “structure” theme eXAmPLe PAGe
(free and premium versions, with structure theme

additional features also available)
HOME ABOUT CONTACT
by Organic Themes creAte Your WeBsite this site is An eXAmPLe site usinG structure theme
in A WeeKenD
http://www.organicthemes.com/
theme/structure-theme structure theme
eXAmPLe PAGe
A beautiful, responsive, magazine- creAte Your WeBsite usinG WorDPress in

A WeeKenD-out sPrinG 2013
style theme designed to lay out

an enticing array of images, videos,
and posts for your site visitors.
Even the free version of the “Structure” theme looks great on a smartphone or tablet.
You can see the functioning demo of this
theme at: structure theme structure theme
http://www.createyourwebsiteinaweekend.
com/structure eXAmPLe PAGe creAte Your WeBsite in A WeeKenD
structure theme
eXAmPLe PAGe
Premium version of iLLustrAtive DesiGn BY JuLie West this site is An eXAmPLe site usinG structure theme
“structure theme”
The premium version of this theme offers
an image or video slider at the top of the
page, which enables you to display more creAte Your WeBsite usinG WorDPress
iLLustrAtive DesiGn BY JuLie West
than one featured post, multiple page
in A WeeKenD-out sPrinG 2013
templates—including a portfolio layout,

enhanced layout options, and a choice of
black or white versions of the theme— this is An eXAmPLe of A BLoGPost
and you also get access to a support

forum. (The black version of the theme the comic ArtWorK of sAschA hommer
can be seen on page 98.)
this is Another eXAmPLe of A BLoGPost
This theme can be translated into fAshion PhotoGrAPhY
any language using the Codestyling

Localization plugin—see page 152.
(Remember to follow the extra steps “Structure” Theme by Organic Themes Our demo site using the “Structural” theme.
applicable only to this theme, as detailed.) (free version).
114

how to set uP and customize
IN FOCUS /// MagazInE THEME

the theme
1. Download the free version of the Help
5 Custom Header
theme from the Organic Themes Header Image
site (see the link provided). If Preview
you are working on a Mac, your

computer will unzip the theme
for you; however you need it to
Select Image
structure theme
You can select an image to be shown at the top of your site by uploading from your computer or choosing from your media
be zipped, so zip it again by right- library. After selecting an image you will be able to crop it.
Images of exactly 960 x 140 pixels will be used as-is.
clicking on the “organic_structure Choose an image from your computer:
_free_v3” folder and choosing Choose File no file selected Upload
Or choose an image from your media library:

“Compress organic_structure_ Choose Image
free_v3.” Remove Image This will remove the header iamge. You will not be able to restore any customizations.
2. Upload the theme by going to

Appearance > Themes > Install
Themes > Upload. Click “Choose
File,” select the “organic_structure_
free_v3.zip” file, then click “Install
Now,” and then “Activate.”
a height of 140 pixels, with the logo
3. When you have uploaded the 4. As with the demo site, you
itself at the bottom of the image
theme, you will see a link entitled need to set the date and time,
(see the way the creators of this
“Customize;” this lets you complete your comments preferences,
theme have arranged the “Structure”
a number of customizations in your permalinks, and so on
theme wording—this is to make sure
“Preview” mode without having (see pages 42–45).
the spacing looks right when you
them be visible on the live site. 5. Next, upload your logo via the
upload the logo).
But let’s go straight into the main Appearance > Header area.
admin section, as we can do many Alternatively, you can upload a
6. Now, go to Appearance >
more customizations from there. header panel to go across the
Background, and either choose
entire width of your website; as
the color for the background of
First, you need to install a back-end with the demo site, you can do
your site, or upload a background
plugin that will allow you to customize your cropping within the admin
image (set it to “Tile” so that it
many aspects of the site. Now, click area once you have uploaded your
covers the entire background area).
on Appearance > Theme Options. header image. However, it is most
You will see a sentence asking you likely that you will want to create
to install the “Options Framework” a header with lettering in it—your
plugin—click the red “Install Now” name or your site title—in which
button in the window that pops up, case you will need to create it
and then click “Activate Plugin.” separately with another software,
such as Pixlr (see page 50),
Go back again to Appearance > setting the dimensions of your
Theme Options; you will now header at 960 x 140 pixels.
see a range of available options.
But before we dive into the more If you are uploading a logo, however,
complex configuration, we should I suggest you prepare it beforehand
take care of a few preliminaries. on a transparent background with
115

This theme works very well with a
chapter 8
background pattern, but note that

Structure Theme New the background will fill the entire
7 Dashboard
Homepage Settings Display Settings Colors area behind the header, the menu,
Posts
Media Homepage Settings and the wording, so make sure the

Pages Featured Page Headline color is light, or that it is entirely
Comments
Appearance
Create Your Website in a weekend Choose the page title you wish to display as the
featured headline.
different from the gray of the menu.
Themes Featured Article Category It’s also crucial that your chosen
Widgets
Menus Structure Theme Choose the category you wish to display in the background doesn’t render the
homepage featured section.
Theme Options
Header
Home Blog Category
writing too difficult to read.
Background
Editor Choose the category you wish to display for the
Blog
homepage blog posts.
Plugins
7. Now, for some of the more
Users Home Blog Posts Displayed
Tools
Enter the number of posts you would like displayed
advanced customization: first,
3
Settings
in the homepage blog. Pagination occurs after
entered number of posts. you need to decide if you want to
include the large heading on your
Collapse menu
Home Sidebar Catergory
Editor’s Picks Choose the category you wish to display for the
featured homepage sidebar posts.
site (1, left). If you do, you need to
Home Sidebar Posts Displayed create a page (Pages > Add New)
3 Enter the number of posts you would like displayed
in the featured homepage sidebar.
using the page title you want to
appear on the home page. You will
The “Theme Options” area of the “Structure” theme admin. also need to create content for
that page to go with the title, as
the title will be clickable, meaning
8
that visitors will be able to go to
structure theme the page.
1
HOME ABOUT CONTACT
Once you’ve created this new page,
creAte Your WeBsite in A WeeKenD go to Appearance > Theme Options

and select this page from the
This is a dummy site set up as an example of a site set
“Featured Page Headline” drop-down
structure theme up using the free version of the Structure Theme by
Organic Themes. It accompanies Chapter 8 of the menu. Then click “Save Options” at the
book Create your Own Website Using WordPress in
a Weekend. bottom of the page.
eXAmPLe PAGe THIS IS A WIDGET
You can include any kind of material to the right of the

featured post on the home page. This theme is highly
customizable. You can remove the large heading at the
If you don’t want to include the
top of the page if you like. You can also remove the
featured post to the left, if you’d rather your visitors heading on the home page, click
dived straight into your blog posts.
on the “Display Settings” tab from
2 within the “Theme Options” area,
this site is An eXAmPLe site usinG structure theme and uncheck the box labeled
This is a demo site created to show readers of Create your Own Website Using WordPress in a Weekend how
the free Structure theme can be set up and customized. ‘Display Page Headline?” Then
click the “Save Options” button.
EDITOR’S PICKS BLOG THIS IS ANOTHER WIDGET
You can include any kind of widget in this area.

The home page has different sidebars from the
blog post pages and the static pages on the site, 8. Next, do you want to include
so you can decide which relevant widgets to
3 include where.
the area towards the top of the
page, where you can see a large
August 2012
STRUCTURE THEME
M T W T F S S
screenshot on the example site,
with text to the right of it (2)? If
you do, you first need to create
116

a blog post category (Posts >

Categories) specifically for this.
Then create a single blog post Name Description Slug
9
(Posts > Add New), which you Uncategorized uncategorized
then assign to the new category. Edit | Quick Edit | View
You could entitle the new category Name Description Slug

“Featured,” but bear in mind that
the category title will show up if
you choose to display your post
categories as a widget anywhere
on the site—therefore, you may wish You can add widgets (Appearance Next, you need to create at least one
to give it a more meaningful title. > Widgets) to the area to the right blog post you can assign to the new
of the featured post. category (it can be a dummy post at
When you create the post, you will this stage, which you can work on
need to add an image to it that will If you prefer to let your blog posts further later). As before, the main
be visible on the main page. If you take primary position on the page image assigned to the post that will
choose a vertical image, it should instead of including the featured area, appear in the main area needs to be
be cropped to 620 x 350 pixels to go to the “Display Options” tab and added via the “Featured Image” box.
fit the image area. In order to get the uncheck the box labeled “Display
image to look right, you can crop the Featured Article and Widgets?” Once you have created at least one
image to fit these dimensions from Then, click “Save Options.” blog post, go back to the “Theme
within the Media Library. Add the Options” area and select the new
image as a “Featured Image” in the 9. Now you need to create another category from the “Home Blog
box near the bottom-right area of blog post category for the blog Category” drop-down menu (if a
the post-editing page. posts to appear in the main area category has no blog posts assigned
of your website’s home page. Go to it, it will not appear here, which
Alternatively, you may prefer to add to Posts > Categories, and click is why you need to create a post
a video to the post that will show up “Edit” under the category entitled before completing this step).
in the image area—if so, just paste “Uncategorized” (hover your
your video embed code in the box mouse over the area and the link In the field underneath this, you can
at the bottom of the editing page will appear), then rename the also choose how many blog posts
instead of adding a featured image. category “Blog,” “News,” or any you want to appear on the home
(For YouTube, Share (under the other name you prefer, and also page. When there are more blog
video) > Embed, copy code; for rename the “slug.” (Be aware that posts than the number you’ve
Vimeo, Share/Embed (on the the category name will appear on selected, numbers will appear at the
side of the video), copy code.) the home page right above your bottom of the home page to allow
first blog post, so make sure you visitors to view previous posts. Click
Once you have created the post choose a meaningful name.) Then, the blue button when you’re done.
and assigned it to the new category, save your changes.
go back to the “Theme Options” area 10. Next, if you want to display a
and select the new category from (Note: The advantage of renaming selection of blog posts in the
the “Featured Article Category” the “Uncategorized” category is that left-hand sidebar (3), first create
drop-down menu, then click the blog posts will automatically get put a new blog category, and then
blue button to save. Note that you into that category, unless you assign assign at least one new blog post
can only include a single post to them to a different or additional to it, as before. The title of the new
display in the featured area. category.) category will appear above the
117

entries in the left-hand sidebar 12. Finally, the last tab in the “Theme 13. Now, you need to set up your
chapter 8
(again, it should be a title that Options” area allows you to make menu (Appearance > Menus).
makes sense to your viewers). some color changes to the As with the demo site, first create
different kinds of links on your a menu, which you can name
You can, of course, assign existing site; if you make any changes, whatever you like, and then save
blog posts that already belong to click the button, as usual, to it. (There is no need to assign the
the previous category to the new save them. menu to a certain position on the
category, but this will cause some page, as we did with the demo
repetition on the home page, as the site, so you can just ignore the
same posts will appear in the main “Theme Locations” box on the
area as to the side. menu page.)
Once you have created the blog

posts for the sidebar, select the new
category from the “Home Sidebar
Category” drop-down menu in the
“Theme Options” area. As before,
in the field underneath this, you can
choose how many blog posts you
want to include here. Save as usual
when you’re done.
If you do not want to include any

blog posts in the left-hand sidebar,
you can uncheck the “Display Structure Theme New
13
Sidebar Posts?” box under the Dashboard
Menus
“Display Options” tab. (You can Posts
Main
put widgets in the sidebar as well Media Theme Locations Menu Name Main
as, or instead of, blog posts.) Pages
Your theme supports 0 menus. Select which Delete Menu
Comments menu appears in each location.
11. There are a few more settings Save

Appearance
inside “Display Settings,” and
Themes About
these concern social media. If you Widgets Custom Links
look at your site, you will notice Menus Contact
URL h t t p : / / www. y o u r d o m a i n . c o m
that the theme automatically Theme Options
Header
includes buttons that allow Background
Label Home
visitors to recommend your site Editor Add to Menu
on Facebook, Twitter, or Google+. Plugins
If you do not want these to Users Pages

appear on your home page, your Tools Most Recent View All Search
static pages, or your blog posts, Settings Create Your Website in a Weekend
Contact
you can configure this here—it is Collapse menu About
your choice whether you wish to
Select All Add to Menu
include them. Click the blue “Save
Options” button if you decide to
deactivate any.
118

You will probably want to create 14. Go to Appearance > Widgets. While you are setting up your

some static pages for your site (e.g. You can see that with this theme, widgets, you will probably want to
“About” and “Contact”); now is the you have many different options activate the Jetpack plugin suite,
time to do this so you can add them as to where you can display your as explained when setting up the
to the menu—you can always adjust widgets. You can display them on demo site, so that you can make
their content later. the home page, in the footer area, use of its handy features, such as
and on the right-hand side of your an easy-to-configure contact form
When you have created static pages static pages. (The Left Sidebar for your contact page, and multiple
for your site, add them to the menu widgets will not show up on your widget options.
from within the “Pages” box. (You static pages, but they will show
will probably not want to include the up if, for example, your readers 15. Finally, set up Akismet to stop
page that you created specifically click on a category or a tag link, yourself from getting a torrent of
to give the large title on the home if you choose to display these comment spam—and you’re done!
page, but if you do want to add it somewhere on your site).
to the menu, you can do so.)
To create a “Home” link for the

menu, first create a “Custom” link
inside the “Custom Links” box, using
your domain as the URL and the
title “Home” as the label (see the
screenshot to the left). Click “Add
to Menu,” then reorder the items in
menu, and save. (With this theme,
you need to create a custom link Structure Theme New Howdy, admin
14 Dashboard
Widgets
Screen Options Help
for the menu, because there is no Posts

Available Widgets Homepage Top Right
“Home” page as such; this is because
Media
Drag widgets from here to a sidebar on the right to activate them. Drag widgets back here to
Pages
deactivate them and delete their settings. Text
the theme automatically puts certain Comments

Archives Calendar
Text: This is a widget
Appearance
elements together from other areas of
A monthly archive of your site’s posts A calendar of your site’s posts
Themes
Categories Custom Menu
your site to create the home page.)
Widgets
Menus A list or dropdown of categories Use this widget to add one of your custom
menus as a widget.
Theme Options
Header Home Sidebar Left
Links Meta
Background
Note that with this theme, you do Editor Your blogroll Log in/out, admin, feed and WordPress
links
Home Sidebar Right
Plugins
not need to create a “Blog” page Users Pages Recent Comments Left Sidebar
Your site’s WordPress Pages The most recent comments
and assign it to contain the blog

Tools
Settings
Right Sidebar
Recent Posts RSS
posts inside the Settings > Reading Collapse menu The most recent posts on your site Entries from any RSS or Atom feed
Footer Left
area as we did for the demo site with

Search Tag Cloud
A search form for your site Your most used tags in cloud format Footer Mid Left
the default theme. This is because Text

Footer Mid Right
Arbitrary text or HTML
the “Structure Theme” automatically
Footer Right
displays blog posts on the front
Inactive Widgets
page—you don’t actually have Drag widgets from to remove them from the sidebar but keep their settings.
any other option.
The “Structure” theme gives you various options to display your widgets
in different positions.
119

e-commerce
chapter 8
theme Mystile
This is a demo e-commerce
site
£0 Search Products
Demo: “mystile” theme

Select a page
(free) by WooThemes Mystile

http://www.woothemes.com/ This is a demo e-commerce Site
products/mystile
Featured Products Featured Products
Product Categories
“Mystile” is an elegant and This is a demo site
professional e-commerce theme Wall cabinet Wooden chair Turquose chair Two
glass lamps
Cart
designed to work hand in hand Follow us

Recent Products
with the WooCommerce plugin.
The theme offers a high level of
customization and will suit any
kind of web store.
“Mystile” is a responsive theme so your site will look gorgeous on a smartphone or
a tablet, as shown.
Mystile
Mystile
Recent Products
Featured Products
Recent Products
You can view the functioning demo

of this theme at: http://www.
createyourwebsiteinaweekend. “Mystile” theme by WooThemes.
com/mystile A large sofa with some antlers
Wooden wall cabinet with two glass vases
This theme can be translated into

any language using the Codestyling
Localization plugin—see page 152. Our demo site using the “Mystile” theme.
120

how to set uP and customize
IN FOCUS /// E-cOMMERcE THEME

the theme
1. Download the theme from the
3 Enhance your theme with WooDojo
Get WooDojo
WooThemes website (see the link WooDojo is a powerful WooThemes features suit for enhance your website. Learn more.
provided). If you are working on a

Mac, your computer will unzip the Mystile New Howdy, admin Off
5 Dashboard Help
theme for you; however, you need WooDojo WooDojo 1.5.0 POWERED BY THEMES
it to be zipped, so zip it again by Posts WooDojo is a powerful toolkit of features to enhance your website. Select only the functionality that you need, without unnecessary code. Enhance your
website with WooDojo, today.
Media
right-clicking on the “Mystile” folder Pages All (16) | Bundled Features (8) | Downloadable Features (4) | wordPress Plugins (4) Open All Close All
and choosing “Compress Mystile.”

Comments Bundled Features
Features bundled with WooDojo.
Mystile
2. Upload the theme by going to Appearance

WooDojo - Custom Code 1.0.2 WooDojo - HTML Term Description
1.0.2
WooDojo - Login Branding 1.0.2
Plugins
Appearance > Themes > Install
The WooDojo Custom Another classic
The WooDojo HTML WooDojo feature,
Code feature adds the Upload/Insert
Users term description
facility to easy add WooDojo- Login
Themes > Upload. Click “Choose Tools custom CSS code to

your website, as well
feature adds the ability
to use html in term Paragraph
Branding
automatically
Settings as custom HTML code
descriptions, as well rebrands your Login
File,” select the zip file, then click Collapse menu

in the <head> section
or before the </body> tag.
as a visual editor to
make input easier.
screen with a custom
logo.
“Install Now,” and then “Activate.” Activate Activate Activate
3. You will see a screen full of WooDojo - ShortLinks 1.0.3 WooDojo - Social Widgets 1.1.2 WooDojo - Tab Grouping 1.0.1
different customization options, Another classic

WooDojo feature,
A collection of widgets
to connect to your
Create groups of tabs, Latest
with a custom tab
but before we look at these, notice WooDojo- ShortLinks online social profiles. order. Popular
automatically Comments
generates short URLs Activate Activate
an invitation at the top of the for your posts, using

your URL shortening
Tags
screen asking you to download

the free WooDojo plugin—click
5
the “Get WooDojo” button. (If WooCommerce 1.6.6
you can’t see the invitation, go
to http://www.woothemes.com/ WooCommerce is a WooCommerce
woodojo.) WooDojo is a suite of powerful, extendable
Products
tools produced by the eCommerce plugin
Products
WooThemes team; while we can that helps you sell
Add Product
install the WooCommerce plugin anything. Beautifully. Product Categories
independently of WooDojo, it More Information →
makes sense to install the
WooDojo suite in its entirety, so Download & Activate
that you have the option of using
its other features also.
4. Download the plugin and install
it (Plugins > Add new > Upload
> Choose File > Install Now >
Activate Plugin). (If you are
working on a Mac, just as with a
theme, your computer will unzip
the plugin folder for you, but as
Scroll down to the bottom of the
you need it zipped, right-click and
page, where you will see a box
compress it to zip it up again.)
entitled “WooCommerce”—click the
5. Click on the new WooDojo link
blue “Download & Activate” button
now visible in your left-hand
(as seen in the screenshot).
navigation.
121

6. Click the purple button entitled
chapter 8
“Install WooCommerce Pages.” Mystile New Howdy
8 Dashboard
7. You now have everything in place WooDojo

THEMES MYSTILE 1.0.2
FRAMEWORK 5.3.12
for your online store. Now let’s Posts
Media VIEW CHANGELOG VIEW THEMEDOCS VISIT FORUM Save All Changes
customize the look of your site Pages

General Settings
Theme Stylesheet
Comments
before we set up the e-commerce Feedbacks
Quick Start
Subscription Settings
grey.css
Select your themes alternative color scheme.
part and start adding products. Mystile
Theme Options
Display Options
Styling Options Custom Logo
Click on Mystile > Theme Options. Framework Settings

SEO Typography Upload
Upload a logo for your theme, or specify an
image URL directly.
Sidebar Manager
Layout Options
Update Framework
Backup Settings Homepage Text Title
8. To customize the theme, follow Buy Themes
WooCommerce Enable text-based Site Title and Tagline. Setup title & tagline in General Settings.
these steps:
WooCommerce
Dynamic Images
Products Site Description
Footer Customization
i. First, go to General Settings > Appearance

Subscribe & Connect
Enable the site description/tagline under site title.
Plugins
Quick Start. Here you can adjust Users
Advertising
Custom Favicon
Contact Page
the color with the “Theme
Upload a 16px x 16px ico image that will
Tools Upload
represent your website’s favicon.
Settings
Stylesheet” drop-down; the default

color for the menu links and touches Customizing the “Mystile” theme.
throughout the site is orange, which
I have changed to gray for the
demo site. You can also upload a
logo here or choose to stick with mainly for web developers making iii. Under the “Typography” tab, you
the written title; the image you changes to colors and other items can change the fonts displayed
upload will shrink to fit the on the site using code. on the site. For the demo site, for
allocated space. example, I changed the font from
ii. Under Styling Options > Arial to Helvetica throughout, and
Note: we will talk about tracking your Background, you can choose a I also reduced the blog post titles.
site visitors later in the book. You can background color or image. Set iv. Under “Layout Options,” you can
come back and insert your Google your background image to repeat, add a frame to your site, which will
Analytics tracking code here. and then choose whether it should make the background color or
move or should remain fixed when image visible—you can also
On the “Display Options” screen, the site visitor scrolls down the choose whether to have the
you can choose whether to enable page. Note that the background sidebar on the left- or the right-
a breadcrumb trail on the site. color or image you choose for hand side on pages where you
Breadcrumbs are a navigation aid the site won’t show up until you have chosen to include a sidebar.
that show your visitor where they check “Enable Boxed Layout”
are in a site, however it only makes under the “Layout Options” tab. For the “Category Exclude” fields,
sense to show them if your site is you will want to add “Uncategorized”
large and you have many product Under Styling Options > Links, you to your list of categories that should
subcategories. can choose to change your link and not show up on your home page or
button colors. “Link Hover Color” is blog, as this looks clumsy and
On this screen, you can also choose the color a link changes to when the unprofessional.
whether to display comments on user moves their mouse over a link.
your posts and pages, and whether It will be easier to change your button
to show just blog excerpts or the color when you have the site set up
entire entry on your blog page. with some products and you can see
You don’t need to do anything how your live site looks, so you may
in the “Custom CSS” field; this is want to come back to this later.
122

v. N
ow go to Homepage > Featured “Products” and “Archive” pages. understand how to configure
I N F O C U S / / / e - c ommer c e T H E M E
image. You can choose whether to vii. You do not need to change this once you have read the
have a large image visible at the top anything on the “Dynamic “Search Engine Optimization”
of the home page, as on the demo Images” tab. pages in the next chapter.
site—if so, check the box labeled viii. “Footer Customization” allows Alternatively, you can use the All
“Display a banner on the home you to decide how many columns in One SEO Pack plugin that we
page?” then upload your image you’d like to display in the footer will look at in detail; if you prefer
and decide what wording (if any) area. You can also choose to to use this, you will need to check
you want to add to run across it. replace the default left and right the box labeled “Use 3rd Party
Ideally, the image should not be text at the bottom of the page Plugin Data.”
too high, as a very large image will with your own text. Since this is xiii. The last thing you will want
take up a disproportionate amount a free theme, I have decided to to look at inside the Mystile
of space on your home page. leave the “WooThemes” credit; configuration area is the
however I did choose to include “Sidebars Manager.” “Mystile”
Note: when choosing or taking a an affiliate link in the “Custom allows you to create different
photograph for this space, bear in Affiliate Link” field (you can sidebars, to which you will then
mind that you will have to crop it sign up as an affiliate on the be able to add widgets (inside
into a horizontal rectangle. WooThemes site, meaning that the Appearance > Widgets area).
if anyone makes a purchase Here, I have not set up custom
The “Sidebar,” “Products,” and following clicking on the link on sidebars on the demo; however,
“Blog” tabs allow you to decide your website, you will get a cut you may find them useful—for
what content you will display on of the sale). example, to show different
your home page. You can come ix. In the “Subscribe & Connect” widgets to the side of your blog
back to this later once you have area, you can set up the social pages than those you will show
added some products to your store media links to put in your sidebar on your “Products” pages.
and have some fun playing around as a widget; you can also ask your
with the different options. visitors to subscribe to your You do not need to make any changes
MailChimp newsletter (see to any of the other areas within the
Here, I have included two blog Chapter 9). Mystile configuration area.
entries on the front page of the x. I suggest you skip the “Advertising”
demo site; including blog posts on tab, because it makes no sense to
your home page may not be suitable include Google or any other ads
for all types of e-commerce sites, but on your own online store. (Why
it can be a good way to add some would you want to drive potential
personal interest to the front page of customers away from purchasing
an online store, which can otherwise your products?) But if you did
look a bit dry—it will help this page wish to run ads on your site, here
look more dynamic. is where you would put the code.
xi. Finally, under the “Contact” tab,
vi. U
nder the “WooCommerce” tab, you can put your email address
you will have the same “Products” for the built-in contact form on
screen as appears under the the contact page you will set
“Home” tab, but there is also up shortly.
another screen that allows you xii. In the main navigation, under
to choose whether or not to have the “Mystile” tab, there is an
sidebars appearing on your “SEO” menu item; you will
123

9. Now that you’ve customized many
chapter 8
aspects of the look of your site, it’s

time to set up WooCommerce. Go Mystile New Howdy, admin Off
9 Dashboard
General Catalog Pages Inventory Tax Shipping Payment Gateways Emails Integration
to WooCommerce > Settings. WooDojo
General Options More functionality and gateway options

Posts
available via WC official extensions.
Media Base Country/Region United States – Florida
WooCommerce is a full-featured
Pages
Currency US Dollars ($)
Comments
plugin that allows you a wealth Feedbacks Allowed Countries All Countries
Mystile
Localisation Use informal localisation file if it exists
of options for the management of WooCommerce
Orders
Checkout and Accounts
your online store, such as inventory Reports The following options control the behaviour of the checkout process and customer accounts.
Coupons
Checkout Enable guest checkout (no account required)
Settings
control, order management, and System Status

Show order comments section
Security Force secure checkout

Products
many more. You will want to explore Appearance

Coupons Enable coupons
your options in detail; if you have any Plugins
Users
Registration Allow registration on the checkout page
Allow registration on the “My Account” page
Register using the email address for the username
queries, you may want to refer to the Tools
Settings
Customer Accounts Prevent customers from accessing WordPress admin
Clear cart when logging out
documentation (see the web address Collapse menu Allow customers to repurchase past orders
below the screenshot bottom right).

Customizing the WooCommerce plugin.
To get set up, you need to set the
following options:
i. Under the “General” tab, set your
country and currency, and choose
the countries from which you will
accept orders. Dashboard
WooDojo MYSTILE 1.0.2

ii. Under the “Catalog Options” tab, Posts
THEMES FRAMEWORK 5.3.12
set your country-specific elements Media VIEW CHANGELOG VIEW THEMEDOCS VISIT FORUM Save All Changes
such as currency sign position,

Pages
General Settings
Theme Stylesheet
Comments
Quick Start
and the thousand and decimal Feedbacks Subscription Settings
grey.css
Select your themes alternative color scheme.
separators used for your currency. Mystile Display Options
Theme Options Styling Options Custom Logo
iii. Under “Tax,” choose whether you Framework Settings

Typography Upload
Upload a logo for your theme, or specify an
SEO image URL directly.
want your prices to include taxes, Sidebar Manager

Update Framework
Layout Options
or to list them separately, and Backup Settings

Buy Themes
Homepage Text Title
WooCommerce Enable text-based Site Title and Tagline. Setup title & tagline in General Settings.
then set up the relevant taxes. WooCommerce Dynamic Images
iv. Under “Shipping,” select the Products

Footer Customization
Site Description
Enable the site description/tagline under site title.
shipping or delivery methods

Appearance
Subscribe & Connect
Plugins
Advertising
you will allow and what you will Users
Contact Page
Custom Favicon
Upload a 16px x 16px ico image that will
charge for them. Tools Upload

represent your website’s favicon.
v. Under “Payment Gateways,” set

your PayPal email and specify “Mystile” has its own theme documentation and tutorials, plus a support section,
whether you will allow other accessed by clicking the “View Themedocs” or “Visit Forum” links. WooCommerce has
its own documentation and support forum at http://wcdocs.woothemes.com.
payment methods such as by
transfer, check, or cash on delivery.
When you start taking orders, you 10. With your basic settings in order, have meaningful names like
will find them listed in the “Orders” you are ready to add products to “http://www.yourdomain/shop/
area. Your sales reports, customers, your store. Before you do this, turquoise-chair,” rather than a
and stock inventory are all go to the “Settings” area and set string of dates or numbers.
recorded under “Reports.” your permalinks to “Post name” While you are in the “Settings”
so that your website URLs will area, make sure your title, date,
124

time, name/comments/search

engines preferences are as they
Mystile New View Product Howdy, admin Off
should be (as we did on pages
10 Dashboard Screen Options Help
Jetpack
Edit Product Add Product
42–45 for the demo site).
WooDojo
Posts
Large brown corner sofa Publish

Media
Next, set your product categories
Posts
Permalink: http://www.alannahmoore.com/mystile/shop/large-brown-corner-sofa/ Edit Preview Changes
Pages
View Product
Comments
Feedbacks
Add Media Visual HTML Status: Published Edit
(Products > Categories); you can
Mystile
A longer description can go here. Published on: Sep 1, 2012 @ 16:37 Edit add an image for each category,
then create the products (Products
WooCommerce Catalog visibility: Catalog/search Edit
Products
Copy to a new draft
Products
Add Product
> Add Product), assigning them to
Path: p
Categories
Tags
Word count: 5 Draft saved at 9:09:49 pm. Last edited by admin on September 2, 2012 at 9:08 pm
Product Categories the correct categories. When adding
a product, use the “Featured Image”
Shipping Classes All Product Categories Most Used
Attributes
Product Data – Simple product Virtual: Downloadable:
Furniture
box for the main image (on the right-
General Taxes Inventory Shipping Related Products
Appearance Accessories
Plugins Attributes Advanced
Users
SKU
hand side of the screenshot). You can
add a description of the product in
Tools
Settings
Regular Price (£) 1,500
Collapse menu
Sale Price (£) 1,320 Schedule
the regular editing box, a short
+Add New Product Catergory
description in the “Product Short
Weight (kg) 0.00 Weight in decimal form
Dimensions (cm) Leng Width Heig LxWxH in decimal form

Product Tags Description” box, the price in the
Add
“Product Data” area, as well as
Product Short Description Seperate tags with commas
Visual HTML
Choose from the most used tags additional photos or even a photo
Upload/Insert
Featured Image
gallery (in the same way as you
Short description goes here.
would add an image gallery to
a blog post—see page 64).
Path: p
Reviews
Add comment
It’s useful to know how to set a
No comments yet.
Remove featured image
product variation (for example,
Mystile Custom Settings different colors or sizes). First, select
General Settings SEO
“Variable Product” from the drop-
Layout
down next to “Product Data,” as

Select the layout you want on this specific post/page.
shown in the screenshot below left.

Then click the “Attributes” tab. Click
the blue “Add” button, then name the
10 Product Data – Variable product
attribute (as in the example, where I
General Taxes Inventory Shipping Related Products Attributes Advanced am adding the color options of the
Variations sofa to be ordered), then add the
Expand all Close all values, separated by a “|” (I have
specified the options of beige or dark
Color Remove
brown). Check the checkboxes next
Name: Value(s):
to “Visible on the product page” and
Color Beige|Dark brown
“Used for variations” and click the
Visable on the product page
Used for variations

“Save attributes” button. Then click
the “Variations” tab, choose your
Custom product attribute Add
default, and click “Add Variation.”
Now add the price and any other
details, and click the “Publish” or
“Update” button to save the product.
125

ChApter 8
Image Name SKU Stock Price Categories Tags Date
Brown sofa In stock From 1,400 Furniture 2012/09/01

ID: 47 | Quick Edit | Trash | View | 1,300 Published
Duplicate
Green sofa In stock £1,200 Furniture 2012/09/01

£1,150 Published
Large brown corner sofa In stock £1,500 Furniture 2012/09/01

£1,320 Published
Two-seater white leather sofa In stock £1,400 Furniture 2012/09/01

£1,300 Published
Wall cabinet In stock £300 £275 Furniture 2012/09/01

Published
Now, create the other pages needed you can title “Primary” and “Top.”
for your site (e.g. “About,” “Blog,” Assign these to the correct locations
You can select a product as “Featured”
“Contact,“ “Privacy,” and “Terms & in the “Theme Locations” box to the
by clicking the star that appears next to
it in the “Products” view (as shown on Conditions”). When you create your left. The smaller menu that runs
the screenshot). As you would with a blog “Blog” page, don’t forget to assign it along the top of the page will be
post, you can also make quick edits by the blog layout, which you do in the ideal for “Terms & Conditions” links,
hovering over the space underneath the “Page Attributes“ box at the same whereas the main pages of the site,
product title with your mouse, and clicking time you create the page (it’s down together with the store links, will go
the “Quick Edit” link. at the lower right on the editing into the main menu.
page). The same goes for the
“Contact” page—this has a layout Scroll down the page a little to look
incorporating a form created at the “Pages” box on the left. Here
especially for it, which you select you will see the pages you have just
11. After you’ve added your products, in the same way from the “Page created, together with the store
the next step is to set up your Attributes” box. pages WooCommerce created for
pages and then make them visible you. You may not want all of these
on the site by attaching them Note: it will reduce the likelihood to appear in the menu—the choice
either to the main menu or to a of canceled orders if you can add a is yours. As we did with the demo
small menu at the top of the site. telephone number to your “Contact” site, check the pages you want to
page, as well as a visible email address, include and then add them to the
First, let’s look at your pages. Go to as we did with the demo site, using menu by clicking the button. In the
Pages > All Pages; you will see that the Email Protector plugin. screenshot (facing page), you can
WooCommerce has automatically see how I chose to arrange the
created a number of pages for you Once you have created these pages, pages on the main menu in the
that relate to the functioning of the you can assign them to the correct demo store, which may help you
store. You may not want to include menus so that they show up on the as a guideline; you may wish to
absolutely all of these in your store; site. Go to the Appearance > Menus include different store pages,
we’ll see about that in a moment. area and create two menus, which or to arrange them differently.
126

In addition to these elements, if you
have a large number of categories
of products, you may want to create Home Custom
custom menu links and add them as
drop-down items underneath your About Page
“Shop” menu so your visitors can

easily find the category of product Blog Page
they are looking for. When you’re

done, save your menus and move on Shop Page
to the next step.

My Account Page
12. The final addition to your site will

Change Password Page
be to set up your sidebars and
widgets. The theme gives you one
Edit My Address Page
standard sidebar, but you can
create different sidebars, that will
View Order Page
appear on different pages, by
adding the WooSidebars plugin
Track your order Page
via the WooDojo area. (After
installing and activating the Cart Page
plugin, go to Appearance >
Widget Areas and create your Contact Page
new sidebars from here.) Then go
to the “Widgets” area, where you
You may wish to arrange your pages something like this; you will also need
will see that the theme comes to create a “Custom” link to your home page (http://yourdomain.com).
with a selection of widgets of its
own—here you can choose to add
a shopping cart, bestsellers, check that everything is working
recently viewed products, and properly, and also so that you’ll be
other e-commerce widgets into familiar with the ordering process mAnAGinG Your store
the sidebars or footer. You may and will know what will happen You will manage orders coming from
choose to activate some of the when you get your first customer. your working store from inside the
WooDojo elements, such as the There are two easy ways to do WooCommerce > Orders area. Here, you
“Tab” widget, or their “Social” this: either set up a product with a can keep track of your orders by marking
widget; and you will probably also very low price and actually go the status of each—Pending, On-hold,
want to activate Jetpack so that through the purchase steps Processing, Completed, etc.—as well as
you can use some of its widgets. yourself (PayPal has a “sandbox” adding notes, as needed. Sales details
13. You will want to create some specifically for testing, but setting (over specified time periods, as well as
blog posts so that there is some up a single dummy order is much details of top selling and top earning
content in the blog area. quicker and easier to do). products) and customer statistics can
14. Don’t forget to set up Akismet, Alternatively, you can enable be seen in the Reports area, as well as
as we did with the demo site in payment by check and make an inventory reports under the “Stock” tab;
Chapter 5, so that you don’t order as if you were a customer discount coupons are created in the
drown in comment spam. choosing to manually mail in a Coupons area.
15. Finally, when everything else check. If everything is working as
is in place, run a test order to it should be, you are ready to go!
127

9
Your live site
S p r e a d i n g t h e wo r d a n d at t r ac t i n g v i s i to r s
Growing your AUDIENCE

Bravo! You now have your shiny new website up Unfortunately, this is not at all true for a website:
and running, ready for your first visitors. But how you can spend days making it as gorgeous and
do you get people to come to your website? And interesting as you want, but unless you let people
how do you keep them coming back? know, not one single person, ever, will find out
about it and visit you.
Imagine you’re opening a brick-and-mortar store.
Unless you’re on a deserted road out in the sticks You could say that marketing is the lifeblood of
or completely hidden away up a tiny alleyway a real-world business, but it’s even more true of
somewhere, you can always rely on at least a a website. Without marketing, your website stands
small amount of passing trade. Once you open no chance.
your doors, someone, at some point, will come
in to see who you are and what you are doing. So, how do you get people to come to your site?
128

ONLINE MARKETING TECHNIQUES
YOUR LIVE SITE /// GROWING YOUR AUDIENCE

Here are some ways you can use the
internet to drive visitors to your new +You Search Images Maps Play YouTube News Gmail More Sign in
1
website:
1. Make your website search-

engine-friendly. Advanced search
Language tools
The most obvious way for people Google Search I’m Feeling Lucky
to come across your website is via

the search engines. Your site needs
Advertising Programs Business Solutions +Google About Google
to appear in search engines, as © 2012 - Privacy & Terms
high up in the listing as you can

manage, and for the key words and
phrases people will be using when Google is by far the most important search engine—85 percent of all web searches
they are looking for a website or are conducted via Google.
service like yours. See page 137 for
details on how you can optimize
3 b and b france Sign in
your site for the search engines Search About 1,000,000,000 results (0.31 seconds)
(a practice known as “SEO”). Ads

Web Ads related to b and b france
Images
Book B&Bs in Paris - The Unique Alternative To Hotels. 10500 Hotels in France
www.airbnb.com/Paris www.booking.com/France-Hotels
Videos Paris B & B s From $60/Night! Book your Hotel in France online.
2. Publicize your website News

864 people + 1’d o r follow Airbnb
What is Airbnb? Trust & Safety guide

No reservation costs. Great rate
762,552 people + 1’d or follow
Booking.com
Signup now Become a host
using social media services.

Shopping
B And B France
More France Bed & Breakfasts | BedandBreakfast.com www.eurobookings.com/France-Hotels
www.bedandbreakfast.com/France Hotel Reservations in France.
Facebook, Twitter, Google+, Show search tools

Find Your Dream Getaway in france. Search 1000’s of B&Bs. Book your hotels at huge discounts!
216,925 people + 1’d or follow
Bed & Breakfasts France | KAYAK.com Eurobookings
LinkedIn, and other social media www.kayak.com/Bed_and_Breakfast

Low Rates at Bed and Breakfasts. Compare B&Bs and Save France hotels
www.agoda.com/France
475,437 people +1’d or follow KAYAK
are phenomenally useful publicity

Get instant confirmation for hotels.
Up to 75%, book with Agoda now!
Reserver votre hotel b&b en France - B&B Hotels 365,302 people + 1’d or follow agoda
www.hotel-bb.com/ - Translate this page
tools. We’ll see more about using

Réservez votre B&B Hotel en France. Wifi Gratuit dans votre chambre et un véritable
Hotels in Paris from 49€
breakfast complet et à volonté au petit déjeuner pour passer un agréable...
www.hotels-paris.fr/
Nos hotels - Réserver - E-club - B&B Hôtel PARIS Malakoff...
400 charming hotels in Paris
these on page 143.

The entries on the top and right-hand sides of your Google search results are paid-for
3. Advertising. ads (Google AdWords).
You can advertise your site
online using a service such as AdWords alannahmoore@gmail.com Announcements (1) Help Sign out Customer ID: 317-782-0575
3
Google AdWords. These are the Home Campaigns Opportunities Tools and Analysis Billing My account
adverts you see at the top and Welcome to AdWords! Learn more
on the right-hand side of Google Create your first campaign Getting Started with Google AdWords
Getting started
when you conduct a search; you 1. Choose your budget
pay per click, which is each time 2. Create your ads
a person clicks on the advert to 3. Select keywords that match your ads to potential customers
visit your site, hence this type of

4. Enter your billing information.
advertising is known as “Pay Per For experienced advertisers

Learn more about AdWords
Common questions
Click,” or “PPC.” This can be a very Choose one of the following and get started with the full range of AdWords
features
•
•
Where will my ads appear?
How much does AdWords cost?
• How do I choose a budget?
effective way of getting traffic to

• Start creating advanced campaigns
• How do I choose a maximum CPC bid?
• Go to billing setup
• How do I select keywords?
• Set up conversions tracking
• How do I write targeted ad text?
your site, and you can specify your Search help center Go
budget to make sure you don’t

overspend too. Google AdWords is a good way to get traffic to your site immediately; you can specify
a daily budget to keep control of your costs.
Google and the Google logo are registered trademarks of Google Inc., used with permission.
129

4. Get yourself listed or mentioned
chapter 9
on other people’s websites.

A great way to get new visitors to
your site is to get your products or
services talked about on someone
else’s website, preferably in the
form of a recommendation or
favorable review. How you will
approach the owner of the site
obviously depends on what your
business is and the kind of site
you have created, as well as
whether you have had prior
contact; a personal introduction
via email will probably be the
way to begin.
The Technorati Blog Directory lists blogs in all fields of interest.
You will also want to get your site
listed in portal-type websites and
(again, depending on if this is
appropriate for you) exchange useful information—followed, of it could “go viral” (circulate quickly
links with other sites in your field course, by a discreet “signature” from person to person), which
of interest. (Obviously, you don’t containing a link to your website. will then bring dozens of new
want to send your website visitors visitors to your site.
to your direct competitors, but there 6. Write guest posts for other
are usually other complementary people’s blogs. 8. Include an email signature.
businesses you could usefully Writing a “guest post” for someone This sounds pretty basic, but
exchange website links with.) else’s blog can be an amazingly it’s surprising how many people
successful way of bringing yourself neglect to do this. Set your email
5. Leave comments on other to the attention of a large audience software so that at the bottom of
people’s blogs and participate in the same field of interest as you. every single email you send out,
in forums. To have your offer accepted, you your website address appears as
Although this will depend on will have to prove that what you a “signature”—people can easily
the kind of site you have created, write will be of special interest, but visit it by clicking on the link.
leaving constructive comments if you’re successful, you may be
at the bottom of posts on other able to attract a large number of
people’s blogs and participating interested and curious people to
in online forum discussions can your site or your own blog.
help introduce new potential site
visitors to you as a reliable and 7. Give away freebies.
useful source of information on Whether it’s an e-book, free
your specialist subject matter. advice, or a free consultation,
Internet etiquette demands giving away something for free
that you never blatantly promote is a good way to publicize your
your site, your services, or your site. If what you are offering has
products, but leave genuinely genuine value, there is a chance
130

YoUr LIvE sItE /// GROWING YOUR AUDIENCE
offlinE markEting
Don’t overlook old-fashioned ways of marketing your 5. Find a newsworthy aspect of what you are doing,
website. In fact, you will need to exploit these from and send out press releases to your local
the off to kick-start a stream of traffic to your site. newspaper.
6. Create a wonderful, informative site, and if you are
1. Mention your website to everyone you know, selling from your site, give your customers the best
and to every new person you meet. products and the best customer service they could
2. Carry postcards or business cards with your web wish for. That way, your reputation will grow by
address on it, and give them out whenever possible. itself, simply by word of mouth.
3. Distribute brochures or fliers in appropriate places.
4. Don’t be shy—ask people you know to tell their
friends about you, or to help distribute your
postcards or business cards to their friends.
Personal recommendation can be a powerful tool.
131

Maintaining relationships
chapter 9
with your vIsItors

It’s great to get website visitors,
but what you really want is to create
a loyal band of visitors who come
back to your site repeatedly. Out
of the hundreds of sites people will
visit, how do you guarantee they’ll
remember yours and come back?
Here are some ideas.
1. Start an email newsletter.

One way to get people to
remember you is to keep in touch
by email. To do this, you’ll need to
capture their email address from
your website, which means you
will need an external mailing-list
manager to manage the list of
addresses you’ll acquire.
There are a number of email-list

managers out there; AWeber and
MailChimp are the major players.
MailChimp is great for starting out
as it is free until you get 2,000 AWeber and MailChimp are the major players in the email-marketing arena.
subscribers, providing you don’t
send out more than 12,000 emails
a month. (It also has a selection of
delightfully juicy-looking templates
Email markEting sErvicE providErs
you can use for your newsletters.)
Here are a few well-known email marketing services; the one you choose
However, AWeber has the more
will depend on your needs and your budget:
sophisticated tracking tools of the
AWeber http://www.aweber.com
two, which you might find suits your
MailChimp http://mailchimp.com
needs better—especially if you can
Constant Contact http://www.constantcontact.com
see your list growing large quickly,
iContact https://www.icontact.com
at which point the price difference
Campaign Monitor http://www.campaignmonitor.com
becomes negligible.
Benchmark http://www.benchmarkemail.com
Pinpointe http://www.pinpointe.com
GetResponse http://www.getresponse.com
Vertical Response http://www.verticalresponse.com
132

Y o U r L I v E s I t E / / / M A I N TA I N I N G R E L AT I O N S H I P S W I T H Y O U R V I S I T O R S
PLAY BY THE RULES
When sending out your newsletter you
need to observe email etiquette and stick
to the rules.
> It’s important not to sign anyone up to
your email list without their agreement.
> Never trick your readers with misleading
subject lines.
> Your email should display a real address.
> Let them know how they can “opt out”
of your list—and act on “unsubscribe”
requests promptly.
> You need to make sure you adhere
to the rules laid down by the CAN-
SPAM Act—see page 146 for
more information.
Don’t just email people from your regular

email account—you’ll find it incredibly
difficult to keep track of subscribe and
unsubscribe requests once you get any
number of subscribers. You will also find it
really hard to prove people actually gave
you permission to add their email address
to your list if you are challenged at any
point. You really don’t want to be accused
of spamming.
TIP 2. Start a blog on your site. 3. Invite your visitors to subscribe

We have talked about blogs to your blog.
throughout this book, but there Visitors can subscribe to your blog
Both AWeber and MailChimp have plugins
will be a number of readers who and read your posts using an RSS
that allow you to integrate your sign-up
form into your WordPress site (AWeber feel that a blog is not for them. feed reader (see glossary), but for
Web Form Plugin, MailChimp List Subscribe As I see it, there is no better way most people, it will be much easier
Form). Both allow you to deliver your blog to engage your readers than with for them to receive your blog posts
posts automatically to your readers by an up-to-date blog; even the most by email.
email, as well as send out newsletters serious of business sites will find
as often as you like. there is sector-specific information The easiest way to put a sign-up
valuable to their visitors that they form on your blog is via the Jetpack
can post in a “news” area. See the “Subscriptions” widget. (Of course,
box on the next page. this won’t apply if you’re going to
133

chapter 9
THE BEnEfiTS of incLUding 3 SUBSCRIBE TO BLOG VIA EMAIL

A BLog on YoUR wEBSiTE Enter your email address to
> Google loves blog content. It provides subscribe to this blog and recieve
more relevant, keyword-rich material for
notifications of new posts by email.
your site, and it’s constantly changing.
> Your visitors or clients will like to see
that you’re up to date with developments
in your area.
> It presents you as authority in your area.
> Your readers can comment and interact
Subscribe
with you. A blog is much more engaging
and personal than the static part of your
website. The Jetpack “Subscriptions” widget
> Cataloging what you’re working on
gives you a chance to demonstrate 3
Create Your Own Website Using WordPress... New
your achievements. Dashboard

Send an email to subscrbers
Jetpack
> It also gives you the opportunity to do
Posts Subject: A message from Alannah Moore
useful market research by asking your
Media
potential clients what they need or want. Pages
> If your posts are frequent and interesting, Comments
you’ll attract regular readers. As well Feedbacks
as increasing your traffic, this gives Appearance
you more of a chance to engage your Plugins
readers as clients, or do business Users
with them again. Tools

Recipients: All Registered Users
Settings
Subscribe2 Preview Send
Your Subscriptions
Subsriptions
integrate your blog subscribers with Settings
your email list.) Send Email
The Subscribe2 plugin lets you email your subscribers directly.

Alternatively, you can install the
Subscribe2 plugin; enable the widget
on the Subscribe2 > Settings page
to add it to your sidebars.
4. Make use of social media. 5. Give your visitors a reason
This plugin offers you more options Social media is one of the best to come back.
than the simple Jetpack version: ways of keeping your visitors Start a regular feature, such as
you can customize the emails your engaged. Once someone has a weekly or monthly roundup
subscribers will receive, access their “liked” you on Facebook or of useful tools or book picks, for
email addresses, and email them with followed you on Twitter, you example, or an analysis of news
announcements outside the blog have a means of notifying them in your domain. Alternatively,
(though don’t abuse this—strictly whenever you have anything you could run a competition
speaking, your subscribers have newsworthy to pass on. We’ll and announce the results on
signed up for blog posts rather go into details about social your site on a specified date.
than updates from you.). media on page 142.
134

Tracking your vIsItors
As your site traffic grows, you’ll
want to see where your visitors are
coming from. The easiest way to do Dashboard
Jetpack
this is via the WordPress.com “Stats” Jetpack

Site Stats
plugin that comes with Jetpack. It Posts
provides you with basic information: Facebook Tabs
Media
how many visitors you’ve had each Links
You’re fueled up and ready to go.
day; if they’ve been referred from Pages The features below are now active. Click the learn more buttons to explore each feature.
Comments
another website that links to you; Feedbacks

WordPress.com Stats Jetpack Comments Subscriptions Carousel
if they came as a result of a search
Works
Simple, concise site A new comment Allow users to Transform your
Testimonials
stats with no system that has subscribe to your standard image
engine; which key word it was that Resolution additional load on

your server.
Free
intergrated social
posts and comments
to recieve a
galleries into an
immersive full-screen
Free Free Free
notification via email. experience.
led them to your website; and which
Appearance
Plugins
pages and posts on your site are the Users

Learn More Configure Activate Learn More Learn More Configure Activate Learn More
Tools
most popular.
The Jetpack “Stats” plugin.
If you want more detailed information,
such as where your site visitors are WordPress Walkthrough 21 New Howdy, admin
Dashboard
located and what time of day they Jetpack
Stats for September 18, 2012, 10:56 am WordPress Walkthrough (Dashboard)
visited, Google Analytics is what you Jetpack At A Glance

Site Stats
need—it’ll provide you with as many
Days Weeks Months
Akismet Configuration
statistics as you could possibly want.

Akismet Stats
Posts
Media
Links
Pages
Comments
Products Aug 29 Aug 31 Sep 2 Sep 4 Sep 6 Sep 8 Sep 10 Sep 12 Sep 14 Sep 16 Sep 18
Feedbacks
Appearance 24 0 8
views all-time views today views on your busiest day. August Summary Tables
Plugins 13, 2012
Users
Tools
Referrers Top Posts & Pages
Settings
Today Yesterday Summaries Today Yesterday Summaries
Collapse menu
No referrers. A referrer is a click from another site that links to yours. No top posts or pages. This panel shows your most viewed posts and
pages.
Subscribe2
Search Engine Terms

Clicks
Today Yesterday Summaries
Today Yesterday Summaries
No search terms. Search terms are words or phrases users find you with
when they search. No clicks recorded. “Clicks” are viewers clicking outbound links on your site.
Subscriptions
Followers
The Jetpack “Stats” screen.
135

Setting up Google Analytics
CHAPTER 9
1. Sign up for a Google Analytics

account here: http://www.google. Analytics
2
xxxxxxxxxxxx@gmail.com Settings My Account Sign out
com/analytics All Accounts Admin Help
Help Account list

The Administrative Tabs
Delete an Account Google Analytics
Account Administration
You have to have a Google account Help center
Search help center Go

Accounts
before you can sign up for Google Add to your site

Create New Account
Analytics—you can sign up for this +1 buttons let people who love your
content recommend it on Google
Search.
Please enter the URL of the site you wish to track, and assign a name as it should appear in your Google Analytics reports. If you’d like to track more than one
website, you can add more sites once your account has been set up.
at the same time if you don’t already General Information

Account Name Alannah Moore
have one. Website’s URL http:// www.alannahmoore.com

Example:http://www.mywebsite.com
Time zone United Kingdom (GMT+00:00) GMT (no daylight saving)
Industry Category Technology
2. Create an account for your Data Sharing Settings
With other Google products only optional
website, providing the required Enable enhanced ad features and an improved experience with AdWords, AdSense and other Google products by sharing your website’s Google Analytics
data with other Google services. Only Google services (no third parties) will be able to access your data. Show example
Anonymously with Google and others optional
details; click “Create Account.”

Enable benchmarking by sharing your website data in an anonymous form. Google will remove all identifiable information about your website, combine the data
with hundreds of other anonymous sites in comparable industries and report aggregate trends in the benchmarking service. Show example
User Agreement
3. Copy your tracking ID—the string

of letters and numbers beginning Analytics Settings My Account Sign out
3
with “UA-” (as indicated).
Alannah Moore - http://www.alannah...
Home Standard Reporting Custom Reporting Admin Help
Alannah Moore [DEFAULT]
Help Account list Alannah Moore Alannah Moore
4. Now go to the Plugins > Add New Profiles

Create/Edit/Delete Profile Alannah Moore
area, and search for the “Google

SDKs Property ID: UA-3489XXXX-1
Default URL: http://www.alannahmoore.com
Tracking Options
Standard Tracking Code
Analytics for WordPress” plugin.

Profiles Tracking Code Property Settings Social Settings
Track Web or Mobile Sites
Advanced Tracking Code
Install it and activate it.

Custom Tracking Code
Tracking ID
Help center
UA-3489XXXX-1
5. Either allow or disallow tracking

This is the tracking ID for this Google Analytics property.
Search help center Go
Use this ID in conjunction with the SDK to send tracking information from your app.
Application Tracking
in order to improve the plugin—up

Add to your site
Track mobile application with the Google Analytics SDK for
+1 buttons let people who love your
Android and iOS. Download Android SDK Download iOS SDK
content recommend it on Google
to you.
Search.
Website Tracking
Property Name Alannah Moore
6. Check the small box where it says, Website’s URL http://www.alannahmoore.com
“Manually enter your UA code,”

Tracking Status Tracking Not Installed Last checked: Sep 18, 2012 5:38:11 AM PDT
The Google Analytics tracking code has not been detected on your website’s home page. For Analytics to function, you or your web
administrator must add the code to each page of your website.
and then paste in your tracking ID. Standard Advanced Custom
Click the blue button labeled

“Update Google Analytics Analytics Settings My Account Sign out
6
Settings.” You’ll now be able to
Home Standard Reporting Custom Reporting Admin Help
Visitors Overview March, 2012 - April, 2013

see details about your site visitors Advanced Segments Email Export Add to Dashboard Shortcut BETA
at the Google Analytics website

Audience
% of visits: 100.00%
Overview
Overview
(obviously, at this stage it will still Demographics
Behavior Visits vs. Select a metric Hourly Day Week Month
say “zero” until it starts to register Technology
Mobile
Visits
140
visitors). Custom
Visitors Flow
70
Advertising
Traffic Sources Mar 11 Mar 18 Mar 25 April 1
Content
1,692 people visited this site
Conversions
Visits: 2,463
Help
The Visitors Overview Report Unique Visitors: 1,692
Comparing Metrics
Pageviews: 7,270
Using the Interactive Table 60.78% New Visitor
1,497 Visits
Common Report Controls Pages/ Visit: 2.95
Video: Add Advanced Segments 39.22% Returning Visitor
136

Search engine optimization (SEO)
Y O U R L I V E S I T E / / / S E A R C H E N G I N E O P T I M I Z AT I O N ( S E O )
What you can External
do on your site Factors
The wording of
your site pages needs Traffic
to contain the right
keywords
Your Site
1 in the 3
search Marketing
engines
Do the technical
part properly—use Links in
the All in One SEO
Pack plugin
2 3
Search Engine Optimization (or the key words and phrases for they need to be—I’ll explain how
“SEO,” as it is most commonly which you will concentrate on to configure this. These two areas
known) is, in a nutshell, what you getting a good ranking for your concern what you can actually do
can do to make sure your site gets website. These need to be on your website to prepare it for the
the best possible position in the incorporated into the actual text search engines.
search engines. SEO has evolved that appears on your web pages.
into a vast and complex science all The third area deals with the external
of its own; I won’t be able to cover Secondly, there are a number of factors that will impact your site’s
all the ins and outs here, but I will technical points you need to pay ranking in the search engines. You
tell you the basics of what you need attention to, concerning these key may have less control over these
to know, and show you how you can words and phrases and the way external factors, but the way you
prepare your site to best advantage. you describe your website pages market your website will have a
for the search engines. Luckily, serious impact.
This section is divided into three a plugin will help you make sure
parts. Firstly, you need to identify you have these set up the way
137

Note: there aren’t any secret tricks a consider this to be an impossible your home page; you can choose
chapter 9
webmaster can do to ensure a good number of websites to compete with, less-important keywords for the
position, and you can’t buy a good and that you would stand very little secondary pages on your site—for
site ranking—the best you can do for chance of coming up high enough example, to continue with the
your site is to make it as interesting in the listing to get any site visitors previous example, the site owner
and engaging as possible, fill it full at all. However, if we try to be a bit might create a page listing activities
of relevant and useful content, and more specific by typing “B and B in and around their area, and choose
follow the advice in 1–3 below. Normandy,” we can see that the the following key phrases to focus
number of competitors gets much on: “Activities on the Normandy
1. Optimizing your pages with more reasonable—at 2,950,000, Coast” and “Things to do around
your key words and phrases though, this is still pretty challenging. Etretat.” These pages may attract
The actual text that is on your visitors, and they’ll also boost
website pages is one of the major “B and B Normandy Coast” has the position of the site as search
things the search engines look at a smaller number of sites listed for engines will comprehend the pages
when they are trying to classify your it—1,440,000—and if we are just a as worthwhile and relevant material
website. You therefore need to make little more specific, we’ll find that in the same broad area of interest.
sure your pages contain the words “B and B Etretat” has even fewer
and phrases people will most —308,000 sites are returned. So in
logically use to type into Google, this case, I consider that concentrating
or another search engine, if they on both “B and B Normandy Coast”
are looking for a website such as and “B and B Etretat” would be a
yours. These are referred to as good strategy. We would hope to
keywords or key phrases. catch people looking more generally
for somewhere to stay along the
To work out what keywords you Normandy coast, as well as people
should focus on for your site, do who already know precisely where
some brainstorming with a pen and they want to stay.
paper to come up with a list of the
words and phrases you yourself You could also get a little bit
might use if you were searching for creative and think of other ways
a site like yours. But there’s a catch. to catch potential visitors—for
You can’t be too generic, as the example, if you Google “Weekend
internet is a crowded place. If you break in Normandy,” you will find
show up on page ten of Google, 260,000 sites listed, so it may
people won’t find you, so you need be worthwhile including this key
to choose keywords that are neither phrase as well.
too much in demand, nor so obscure
that only a tiny number of people When you have worked out your
will be looking for them—that way, keywords, take a look at your page
you might find yourself at the top of text and see how you can rework it.
the list, but attract only a handful Your major keywords need to be at Don’t “stuff” your page text full of
of site visitors. the top of your home page, preferably keywords in a way that makes your text
in a title, and repeated in the body of read bizarrely—there is nothing that will
Let’s take an example: if you type the text a couple more times too if annoy or alienate your site visitors more
“B and B France” into Google, there possible without it reading strangely.
than this.
are 1,360,000,000 results. I would Focus on your major keywords for
138

b and b france
Search About 1,000,000,000 results (0.31 seconds)
“B and B France” has far too many entries to compete with…
b and b normandy coast
Search About 1,440,000,results (0.36 seconds)
…Whereas “B and B Normany Coast” has a little less competition.
b and b normand|y france

b and b normandy france
b and b normandy
Search b and b normandy beaches
b and b normandia
Web Ads related to b and b normandy france Ads
Images
750 Hotels in Normandy -Lowest price guarantee Beat Normandy B&Bs
www.booking.com/Normandie-Hotels - 1,018 seller reviews www.housetrip.com/Normand
Videos Book your Hotel in Normandy online Beautiful B&B Alternatives! Pl
762 552 people + 1’d o r follow Booking.com & Reviews. Book Now From 3
News 106 people + 1’d or follow
Most Popular Hotels Best Reviewed Hotels
HouseTrip.com
Budget Hotels Luxury Hotels
Shopping
Google gives you some suggestions for keywords and phrases as you type in your search item—it’s worth checking these out.
Be realistic in your choice of key words

and phrases to focus on. It’s far better
to come up on the first page of Google
for a rather less sought-after key word,
than on page ten for a really obvious one.
139

2. Page titles, descriptions, however, as this is all that will
chapter 9
and keywords show up.

Now that you have your page text 4. “Home Description”—type a Naming and labeling your
“optimized,” it’s time to look at the slightly longer description of your images in a search engine-
more technical side of things. site, including your keywords in friendly way
a natural way. This description will It’s important to name your images in a
We’ve seen how the text you put show up in some, but not all, of meaningful way, as this can help boost
into your pages is essential for the the search engines (it will appear your site’s position for the right keywords.
search engines; the following in Google, so you should be sure Instead of keeping a string of numbers
technical aspects are also crucial: to make it sound enticing). Don’t (e.g. IMG_1397.jpg) or assigning a
> the way you “title” your pages exceed 165 characters. random name to the file, before you
(this is the page title seen at the 5. “Home Keywords”—put your upload it, name the image in a meaningful
top of your browser window keywords and phrases here,
way that includes your main keywords—
for example, “b-and-b-normandy-coast-
when you’re on a page) separated by commas; 20 is the
front.jpg.” Be sure to complete the “Title”
> the “description” you assign maximum number. Be aware when
and “Alternate Text” fields in the Media
to each of your pages (this is the choosing that unless a key word is
Library, as well (e.g. “B&B Normandy
description of each page that you actually included in the page text
Coast, front view of the house”).
will see listed in Google underneath as well, it may not carry any weight.
the page title) 6. Skip to the fields entitled “Post
> the key words you choose to Title Format,” “Page Format,”
associate with the pages (the and so on. I suggest you remove
latter is the least important the “| %blog_title%” part from have created a page that provides
aspect of the three) “%post_title% | %blog_title%,” information on “Activities on the
wherever it appears, as this will Normandy Coast,” you should
WordPress has a number of allow your post and page titles now add relevant search engine
plugins that allow you to input this to be more targeted. information that applies to that page
information—the one we will look at 7. If you are using Google Analytics, only, and not the rest of the site.
here is called “All in One SEO Pack.” you can add your ID to the (If you don’t input information for
appropriate field. individual pages or posts, the default
Setting up “All in One SEO Pack” 8. Check the following fields: “Use information you filled in for the home
1. Install the “All in One SEO Pack” Categories for META keywords,” page will be applied to that page.)
plugin as usual from the Plugins “Use Tags for META keywords,”
> Add New screen. “Dynamically Generate Keywords
2. Go to Settings > All in One SEO. for Posts Page,” and
Scroll down underneath the “Autogenerate Descriptions.” T IP
adverts and click the “Plugin 9. Click the blue “Update Options”
Status: Enabled” button (see button at the bottom of the page.
Some themes, such as the “Mystile
opposite).
Theme,” have their own SEO area. You
3. Fill in the “Home Title” field—this Now that you have set up the plugin,
can choose to use “All in One SEO Pack”
is the title that appears at the top at the bottom of the editing page for instead, or you can configure their special
of the browser window, which will each page or post, you will see an “All SEO area. If you do the latter, I suggest
also be the title of the site as it in One SEO” box; you can choose inputting a custom home page description
appears in the search engines. specific page titles, descriptions, and keywords, and setting it so you can
Type your title and ensure it and keywords for each page that input a custom description and keywords
includes your major search terms; override the general settings you for each page and post.
don’t go over 65 characters, have just set up. For example, if you
140

3. ExtErnal factors
Y o U r L I v E s I t E / / / S E A R C H E N G I N E O P T I M I Z AT I O N ( S E O )
You’ve now done what you can do to prepare
Click on option titles to get help!
your site for the search engines, as far as the
I enjoy this plugin and have made a
donation:
site itself is concerned. But there are two other
Plugin Status: Enabled major factors that determine how your site will
Disabled
be ranked:
Home Title:
> how much traffic it gets
Home Description: > how many relevant inward links it has
(that is, other people mentioning your
Home Keywords (comma
separated):
site on their website and linking to it)
Canonical URLs:
How much traffic you can send to your site at
Rewrite Titles:
the outset depends on how much traditional
Post Title Format: %post_title% | %blog_title%
and word-of-mouth marketing you can do;
Page Title Format: %post_title% | %blog_title%
trying to achieve inward links from other sites
Category Title Format: %category_title% | %blog_title%
in the same broad area as you is also essential—
Archive Title Format: %date% | %blog_title%
it sends Google the message that your site is
Tag Title Format: %tag% | %blog_title%
recognized by others, and therefore deserves
Search Title Format: %search% | %blog_title%
a good ranking.
Description Format: %description%
404 Title Format: Nothing found for %request_words% At the beginning, you may only have a little
Paged Format: - Part%page% traffic and just a few inward links, but with
SEO for Custom Post Types: consistent promotion, you will see both
Custom Post Types for SEO Column:
Support:
Page
wpsc-product
increase, and will be able to watch your
wpsc-product-file
slideshow site moving up in the rankings.
Google Plus Profile Sitewide Default:
Google Analytics ID:
Use Catergories for META keywords:
Use Tags for META keywords:

SUBmiTTing YoUR SiTE To SEARcH EnginES
Dynamically Generate Keywords for:
Posts Page: The most important search engine is Google; Bing and
Use noindex for Categories: Yahoo have a (small) part of the market share as well.
Use noindex for Archives:
Submitting your site isn’t actually necessary, as the
Use noindex for Tag Archives: search engines’ “spiders” will automatically crawl all
Autogenerate Descriptions: sites that are linked to from other sites. However, you
Capitalize Category Titles:
can get a head start by submitting your site from the
Exclude Pages:
following web addresses:
Post Title Format:
Additional Post Headers:

https://www.google.com/webmasters/tools/submit-url
(You will need to set up a Google Webmaster Tools
Additional Page Headers:
account.)
Additional Home Headers:
http://www.bing.com/toolbox/submit-site-url
(Bing now powers Yahoo.)
Log important events:
Update Options Reset Settings to Defaults

Note that it may take several weeks for your site to
appear in the listings, so don’t worry if you don’t see
it listed right away (see page 150).
141

Integrating social media
chapter 9
wIth YoUr wEbsItE
“Social media” is the label given to I’m assuming that you’re already Which social media you choose to
a group of web-based “tools” that familiar, at least to some extent, with use will depend on the kind of world
allow users to share and exchange the broad concept of social media— you’re in; here we’ll look at the six
information and ideas with a network Facebook and Twitter, for example, most-used social media, but there
of other users. are regularly mentioned in the are others that may suit you as well
mainstream media. But even if you (see the box on page 145 entitled
Social media provide fabulous feel that social media really isn’t your “Other Social Media”).
communication tools for the thing, I do suggest you consider it if
website owner, enabling you to: only for website promotion purposes.
> reach more people This section will look at how social
> remind them about you media can be used specifically for
> engage with them more fully this and integrated into your website.
Keeping in touch:
if someone “likes” or “follows”
you, you can reach them again
Social
media &
YoUr
wEbsItE
Promotion: Repurpose
by “liking” or “following” you, your content:
people spread the word about you;
they can also come across you if you put your website content
accidentally, e.g. on YouTube on social media, or your social
or StumbleUpon media content on your website,
you can introduce your content
to a different audience
142

Y O U R L I V E S I T E / / / I N T E G R AT I N G S O C I A L M E D I A W I T H Y O U R W E B S I T E
FACEBOOK
In order to use Facebook TWITTER and choose from the “Button
as a communication tool Twitter is used to send options,” then copy the code
for your website, you out and comment on in the box.
need to set up a business page on short, immediate pieces
Facebook. You can then invite of news and information that are In your website admin area, go to
people to “like” you on your right up to the moment. You can Appearance > Widgets and drag
Facebook page, or better still, use this as a tool to interact with a “Text” widget into the sidebar.
directly from your website. Once visitors and give updates on Paste the code into the widget
someone has “liked” you, your developments on your website. and save it.
Facebook posts will appear in To create an account, go to
their news feed. https://twitter.com/signup and Note: if you want to show the
follow the instructions. People number of followers you have,
Posting on your business Facebook who choose to “follow” you change “false” in the code to “true”
page is a good way of sharing small will now be able to read your (see the screenshot below) and
snippets of information, photographs, messages (known as “tweets”) save the widget. If you show the
and short news updates you want on their Twitter home page. number of followers, the widget
people to be aware of. may be too wide for your sidebar
Integrating Twitter into your site —if this is the case, choose the
To set up a Facebook business page, Display your latest tweets with the version of the button that doesn’t
go to http://www.facebook.com and “Jetpack Twitter” widget (find it on show the username.
click on the link underneath the green your Appearance > Widgets page).
“Sign up” button entitled: “Create a As with Facebook, you can put
Page for a celebrity, band or business.” You may also want to include a button that links to your Twitter
a “Follow” button so people can page in your sidebar using the
Integrating Facebook into your site sign up to follow you without “Social Media Icons Widget”
Display a “Like” button in your sidebar leaving your website. To do this, (see page 145).
with the “Facebook Like Box” widget log into your Twitter account.
that comes with Jetpack (once you’ve Go to https://twitter.com/about/
Text
activated Jetpack, you’ll find it in the resources/buttons, select “Follow,”
Title:
Appearance > Widgets area ready
to drag into your sidebar). You can <a href= “https://twitter.com/alannahmoore”class= “twitter-follow-button”
data-show-count= “false”>Follow @alannahmoore</a>
choose to have it with, or without, alannahmoore

<script>!function(id,s,id)(var js,fjs=d.getElementsByTagName(s)
[0];if(Id.getElementsById(id))
{js=d.createElement(s);js.id-id;js.src=“//platform.twitter.com/widgets.js”,fjs.
the faces of your fans. About / Resources / Buttons
parentNode.insertBefore (js,fjs) ;))(document,“script”,“twitter-wjs”) ;</script>
About Twitter
Twitter Buttons
Logo & Brand
Buttons A d d buttons to your website to help your visitors share content and connect
Open Source with you on Twitter.
Alternatively, you can add a simple

Contact us
Choose a button
Press
Security Share a link Follow Hashtag Mention

Tweet 93 Follow @twitter Tweet #TwitterStories Tweet to @support
button that links to your Facebook

Translation
Help center
business page from your sidebar

Button options Preview and code
Try out your button, then copy and paste the

User @ alannahmoore
code below into the HTML for your site.
by using the “Social Media Icons

Show username Follow @alannahmoore
Automatically add paragraphs

Large button <a href= “https://twitter.com/alannahmoore
<script>!function(d,s,id)(var js,fjs=d.getEle
Opt-out of tailoring Twitter [?]
Save
Widget” (see page 145).
Delete | Close
Language English
Facebook is a trademark of Facebook, Inc.
143

CHAPTER 9
REBELMOUSE you can establish yourself as an Adding a Pinterest button to your site
RebelMouse authority in your domain and gain Log into your Pinterest account.
(http://www.rebelmouse. a following of fresh new site visitors Go to http://pinterest.com/about/
com) incorporates your who would never have come across goodies/; scroll down until you see
Facebook, Twitter, Google+ (and you otherwise. Of course, whether the “‘Follow Button’ for Websites”
other) posts into one “front page” this is a suitable means of promoting heading. Choose the button you want
that resembles a Pinterest pinboard. your site will depend on what it is on your site and copy the code. Back
The RebelMouse WordPress plugin you do. To create a YouTube account, in your admin area, go to Appearance
gives you a tall, thin sidebar widget sign in at http://www.youtube.com > Widgets and drag a text widget
perfect for the blog pages of your with your Google account (or create into your sidebar. Paste the code into
site, or lets you create a page that one by clicking “Sign In” then “Create it and save the widget. You can also
you can easily incorporate into an account”). use the “Social Media Icons Widget”
your site. for Pinterest; the “Social Sharing
You can put a button that links to your Toolkit” plugin is also very useful (see
YouTube channel in your sidebar using opposite), allowing you to easily add
LINKEDIN the “Social Media Icons Widget,” or “Pin it” buttons to your pages.
LinkedIn is mostly for you can embed your videos directly
professional networking, but if your into the site. GOOGLE+
site is a presentation of you and your Whether you choose to
professional skills, it may be useful to PINTEREST include Google+ depends
include a button on your site that will Pinterest has become on whether you think your visitors
take visitors to your LinkedIn profile. a huge phenomenon; will be using it, but along with the
To get a LinkedIn account, sign up if your site is artistic or creative, rest of the suite of Google tools, it’s
here: http://www.linkedin.com. you will have a lot of fun creating definitely here to stay.
“pinboards” of images you like and
Adding a LinkedIn button to your site allowing users to interact with them Integrating Google+ into your site
Log into your LinkedIn account; go to by commenting, “liking,” or “repinning” Go to https://developers.google.
http://www.linkedin.com/profile/ your images to their own boards. To com/+/plugins/badge/; fill in your
profile-badges. Choose which button sign up with Pinterest, either go to Google+ web page address and
you want to use, and then copy the http://pinterest.com, or sign up for a choose how you’d like your button
code in the box next to it. Go to your business account at http://business. to appear. Copy the code. On your
Appearance > Widgets page and drag pinterest.com. Widgets page, drag a text widget
a text widget into your sidebar. Paste into your sidebar; paste the code
in the code and save the widget. For business sites, you’ll need to into it and save the widget.
Alternatively, use the “Social Media verify your site. Choose the option Google and the Google logo are registered
Icons Widget” (see opposite). to “Verify with a meta tag.” Copy the trademarks of Google Inc., used with permission.
meta tag they generate for you. In

YOUTUBE the admin area of your website, go T IP
We’ve seen how YouTube to Appearance > Editor. Looking at
There are dozens of different ways to
can be used to host videos so you the right-hand side, click on the link
integrate social media into your website,
can embed them into your site, but that says “Header;” find “<header>”
and vice versa. For example, you can
it can also be used as a fantastic in the code that is displayed, and choose to have your blog posts display
promotion tool. Through uploading right after this, paste the code you’ve on your LinkedIn profile page, or on
videos you’ve created yourself (in copied. Click “Update File.” On the Facebook, etc. Look at other people’s
which you talk about your field, give Pinterest site, click “Click here to sites for ideas on integrating social media.
a tutorial, or show your products), complete the process” to finish.
144

Y o U r L I v E s I t E / / / I N T E G R AT I N G S O C I A L M E D I A W I T H Y O U R W E B S I T E
REViEw SiTES THE JETPAcK SHARing fEATURE
Do you run a brick-and-mortar business, a restaurant, The Jetpack “Sharing” feature lets you add Facebook, Twitter, LinkedIn, Pinterest,
or a hotel? If so, it is worth paying attention to review and other social media buttons right into your site pages and posts so that people
networks. Simply Googling a few of your competitors can “share” them without leaving your site. From within the Settings > Sharing
will show you if people are leaving reviews about them area, drag the services you want to use into the “Enabled Services” area; you
and on which networks (for example Yelp!, OpenTable, can then choose how you want them displayed. You can also include “Email”
TripAdvisor, Foursquare). You can ask your customers and “Print” buttons.
to leave feedback or even incentivize them to do so—
although obviously, the feedback they leave is entirely Note that the plugin lets your site visitors “like” or tweet (etc.) directly from
up to them! the page, but it doesn’t allow them to visit your Facebook page or choose to
“Follow” you on Twitter (or go to any of your other social media “home pages”).
You’ll need to add these buttons separately.
Include all your buttons in your sidebar In the “Sharing” area, you can also see how, using the Jetpack “Publicize”
at once feature, you can integrate your blog posts with other social media so that
The “Social Media Icons Widget” is a useful each time you post on your blog, your material also appears on the selected
plugin that allows you to add all your social social media.
media buttons to your sidebar simultaneously.
All you need to do is install the plugin via
the Plugins > Add New area, then drag the
widget to your sidebar in the Appearance > Create Your Website Using WordPress in a.. 4 New Howdy, Alannah
Widgets area. Configure the web addresses Dashboard
Jetpack
Help
for each of the social media you want to

Jetpack
Site Stats
use by clicking on the icons, choose your

Akismet Configuration
Akismet Stats
style, and you’re done. Posts
Media
Notifications Publicize WordPress.com Stats Jetpack Comments
Pages
Monitor and manage Connect your site to Simple, concise site A new comment
Comments popular social stats with no system that has
your site’s activity
The “Social Sharing Toolkit” plugin is another Feedbacks with Notifications in

your Toolbar and on
WordPress.com.
Free
networks and
automatically share
new posts with your
Free
additional load on
your server. Free
intergrated social
Appearance
friends.
useful tool you may want to investigate. It’s Plugins
Learn More Learn More Configure Learn More Configure Activate Learn More
Users
more complicated to set up, but it allows you Tools
Settings Subscriptions Carousel Post by Email Sharing

to add Facebook “Share,” Twitter “Tweet,” Collapse menu Allow users to Transform your Publish posts to your The most super duper
subscribe to your standard image blog directly from sharing tool on the
and Pinterest “Pin it” buttons from the posts and comments
to recieve a
galleries into an
immersive full-screen
your personal email
account.
interwebs. Share
content with
same interface. Create Your Website Using WordPress in a.. 4 New Howdy, Alannah
Users
Tools Add new Linkedin connection.
Settings
General Add new Tumblr connection.

Writing
Reading
Discussion Add new Yahoo! connection.
Media
Permalinks
All in One SEO
Google Verification
Sharing Buttons
RebelMouse Settings
Some other social media Sharing

XML-Sitemap
Add sharing buttons to your blog and allow your visitors to share posts with their friends.
> Delicious Collapse menu Available Services

Email Print Digg Linkedin Reddit StumbleUpon Google + 1 Tumblr
Drag and drop the services you’d
> Digg like to enable into the box below.
Add a new service
> Flickr
> Reddit Enabled Services
Facebook Twitter Pinterest
Services dragged here will be hidden behind a share
Services dragged here will appear button.
> StumbleUpon individually.
> Instagram
> Tumblr
The Jetpack “Sharing” plugin.
145

10 Useful things to know
T r o u b l e s h o ot i n g
Legal issues
You may or you may not be doing business from Cookies
your website; however, there are certain rules all New laws concerning cookies (text files that contain
websites need to comply with, and you will need information—usually a site name and unique user
to make sure you are aware of these from the ID) and other web-tracking tools have recently been
outset. In addition to general business regulations, enacted in the EU, so if you are doing business
take care to check out specific rulings concerning with any of the affected countries, you will also be
online business—as noted below. liable to comply with these laws. (See this link for
some useful information: http://www.ico.gov.uk/
Privacy policies for_organisations/privacy_and_electronic_
Specific laws, depending on which state or region communications/the_guide/cookies.aspx)
of the world you are in, demand that you publish a
privacy policy declaring—among other elements— You may think your site doesn’t use cookies, but
how you collect data from your website visitors and if you are using Google Analytics or running any
what you plan to do with it. Make sure you stick to advertising, it does—therefore, you will need to
these rules, as you don’t want to be accused of find out which laws (federal, state, and international)
violating the privacy of site visitors (see SBA’s apply to your website or business, and make sure
website: http://www.sba.gov/community/blogs/ you include a way to obtain users’ consent on your
community-blogs/business-law-advisor/creating- site. A simple statement may be adequate, but make
privacy-policy-your-online-business). sure you check out the particular recommendations
that apply to where you live.
146

CommerCial email
USEFUL THINGS TO KNOW /// legal issues

The US CAN-SPAM Act specifies clearly what
you need to do to make sure your commercial
emails keep within the law. For guidelines, see
here: http://www.business.ftc.gov/documents/
bus61-can-spam-act-compliance-guide-
business. Similar, though not identical, laws
apply in the UK and the different EU countries.
TIP
A number of WordPress plugins, such as “Cookie Law

Info,” exist that allow your users to agree to the use of
cookies on your site.
The SBA website (http://www.sba.gov) is a good place to find out about business,
federal, and state law and regulations for U.S. citizens or residents.
TIP
If you are in any doubt about any of these matters,

seek professional help from a qualified individual or
a relevant local advisory. If based in the U.S., visit the
U.S. Small Business Administration’s (SBA) website,
www.sba.gov, for up-to-the-minute legal advice, and
links to relevant federal and state organizations.
Huge fines have been imposed on companies violating

data protection, so make sure your site complies with
these regulations. The CAN-SPAM Compliance Guide details how to make sure your commercial emails
stay within the law (http://www.business.ftc.gov/documents/bus61-can-spam-act-
compliance-guide-business).
147

Business Permits and other
c h a p t e r 10
legal requirements
If you are doing business from your
website, you need to research all of
the legal requirements relevant to
your type of business—you may also
need a business license and permit
to work from home. Take note that
as well as varying from country to
country, these rules can also be
different from state to state. If you
are doing business with other
countries, you will also need to
ensure you adhere to international
trade laws (for more information,
visit: http://www.hg.org/trade.html).
trademarks and coPyright

If you want to safeguard your brand
or your material, make sure you
implement the necessary measures
beforehand so you don’t find your
carefully built-up brand, images,
words, or even products have been EU Data Protection and Freedom of Information advice—EU privacy laws
“borrowed” by someone else. As are overseen in the U.K. by the Information Commissioner’s Office.
shown by numerous stories of
people whose online identities have
been usurped by others because
adequate precautions weren’t in
place, it really pays to research this
some useful Places to go for information:
properly. You also want to make
Federal Trade Commission
quite sure that you aren’t treading
http://www.ftc.gov
on someone else’s toes, before you
PCI Security Standards Council
begin. (For more information on
https://www.pcisecuritystandards.org
trademark and copyright laws as
Bureau of Consumer Protection (CAN-SPAM Act)
these relate to the internet, see:
http://business.ftc.gov/documents/bus61-can-spam-act-compliance-
http://www.internetlegal.com/
guide-business
trademark-law-and-the-
United States Copyright Office (copyrighting online works)
internetcopyright-law-and-the-
http://copyright.gov/circs/circ66.pdf
internet/)
ICO (European Cookie Law)
http://www.ico.gov.uk/for_organisations/privacy_and_electronic_
communications/the_guide/cookies.aspx
ICO (Data Protection)
http://www.ico.gov.uk/for_organisations/data_protection.aspx
148

Maintaining your WOrdpress siTe
uPdating WordPress
WordPress is constantly being
tweaked and improved, so it makes Create Your Own Website Using WordPress... New
Dashboard WordPress 3.5.1 is available! Please update now.

sense to keep your installation up Home
to date, both to make the most of Updates Dashboard

Jetpack
these improvements and to ensure Right Now
Posts
Content Discussion
your site remains secure. Media
6 Posts 0 Comments
Pages
24 Pages 0 Approved
WordPress notifies you
Comments 1 Category 0 Pending when a new version of
When a new version of WordPress 0 0
Feedbacks Tags Spam
the software is available.
is released, you’ll see a notification
at the top of your administration Create Your Website Using WordPress in a ... 4 New Howdy, Alannah
Dashboard Help
WordPress Updates
area. All you need to do is click the

Home
Updates Last checked on Febuary 4, 2013 at 5:24 pm. Check Again
Jetpack
You have the latest version of WordPress.
“Please update now” link and then

You have the latest version of WordPress. You do not need to update. However, if you want to re-install version 3.5.1, you can do so automatically or download the package and re-
Posts You have the latest version of WordPress. You do not need to update. However, if you want to re-install version 3.5.1, you can do so automatically or download the package and re-
install manually:
Media
Re-install Now Downlaod 3.5.1
click the blue “Update now” button.

Pages
While your site is being updated, it will be in maintenance mode. As soon as your updates are complete, your site will return to normal.
Comments
Plugins
Feedbacks
You don’t need to reinstall anything, Contact

The following plugins have new versions available. Check the ones you want to update and then click “Update Plugins”.
Updat ugins
Appearance
and it only takes a few seconds. But Plugins
Users
Select All
It’s also easy to update
All in One SEO Pack
what you must do before you update Tools
Settings
You have version 1.6.14.5 installed. Update to 1.6.15.1. View version 1.6.15.1 details.
Compatibility with WordPress 3.4.2: 100% (according to its author) plugins, but you need to
make sure everything
Google Analytics for WordPress
is make a backup of your site just in

You have version 4.2.5 installed. Update to 4.2.7. View version 4.2.7 details.
Collapse menu
Compatibility with WordPress 3.4.2: 100% (according to its author)
works correctly after

Jetpack by WordPress.com
You have version 1.5 installed. Update to 1.7. View version 1.7 details.
case anything goes wrong—see Compatibility with WordPress 3.4.2: 100% (according to its author)
Select All
an update.
“Backing up” below.
In the same way, when a plugin or

a theme requires updating, you’ll *DropBox (http://www.dropbox.com) “BackUpWordPress.” Install
see a notice on your screen—you is a very useful way of storing digital and activate the plugin.
can update from within the admin material—photos, documents, and 2. Go to Tools > Backups; click
area, without having to reinstall. videos—online. “Settings.” Schedule the plugin
to back up both the database
Make sure you back things up first, The backup takes place in two stages: and your site files, and decide how
and allow time to test everything > backup of your site files frequently you want it to perform
afterward, whenever you perform > backup of your database the backup. Put your email address
an update. in the “Email notification” field and
Of course, this can be done manually click “Update.”
Backing uP using FTP software and by logging 3. Once the backup has run, you will
Making a backup of your site means into the database area of your host- receive the zip file by email if it is
keeping a copy of it in case something ing administration, but the easiest small enough, otherwise click the
goes wrong. How often you choose way is by using a plugin such as download link in the email you’ve
to back up your site depends on how BackUpWordPress, which backs up been sent, or make a copy of the
often you update it, but you should both of these for you automatically. backup by clicking the download
schedule regular backups, and keep link in your “Backups” area. (The
several copies of these (for example, Using BackUpWordPress system will also store the backups
on a DVD or on DropBox*, as well as 1. Install the plugin as usual by going in your hosting system.)
on your computer). to Plugins > Add New and searching
149

My site isn’t showing up in GOOGLe
c h a p t e r 10
Did you submit your site via Google To request a crawl:

Webmaster Tools, at https://www. 1. Log in to your “Webmaster Tools” To add a sitemap to your site:
google.com/webmasters/tools/ account. 1. Add the “Google XML
submit-url? Google can take a few 2. Add the site to your account. Sitemaps” plugin to your site.
weeks to list sites, so it’s possible 3. Verify the site using the “Google 2. Under Settings > XML
that its spiders simply haven’t had Site Verification” plugin. Sitemap, click the link where
the chance to crawl to it yet. 4. Inside your “Webmaster Tools” you see “The sitemap wasn’t
(Spiders are programs that crawl the account, click the web address built yet. Click here to build
web for keywords that enable users of your website. it the first time” (as in the
to find what they are looking for.) 5. Click “Health” on the left-hand screenshot below). That’s all
side, then “Fetch as Google.” you have to do—the major
Are there any other sites that link to 6. Type the web address that you search engines will be
yours? This is an absolutely essential want Google to crawl, leaving automatically notified each
first step for the marketing and “Web” selected from the drop- time you make a change to
search engine visibility of your site. down; then click “Fetch.” your site.
You can be sure that if you have any 7. When you see “Success” under
links inwards to your site, Google will “Fetch Status,” click “Submit to
find it. Index;” then choose the “URL
and all linked pages” button, T IP
You can do two things to ensure and click “OK.”
Google spiders crawl all the pages of
If your site isn’t showing up in Google,
your site: request a crawl via Google
do check that you don’t have the
Webmaster Tools and/or add a checkbox next to “Discourage search
sitemap to your website. engines from indexing this site”
selected (in Settings > Reading).
Create Your Website Using WordPress in a ... 3 New Howd
Dashboard
XML Sitemap Generator for WordPress 3.2.9
Jetpack
Posts The sitemap wasn’t generated yet. About this Plugin:
Media The sitemap wasn’t built yet. Click here to build it the first time. Plugin Homepage
If you encounter any problems with the build process you can use the debug function to get more information. Suggest a Feature
Pages
There is a new beta version of this plugin available which supports the new multi-site feature of WordPress as well as many other Notify List
Comments new functions!More information and download
Support Form
Feedbacks Report a Bug
Contact Basic Options Donate with PayPal

My Amazon Wish List
Appearance Sitemap files: Learn More
Write a normal XML file (your filename)
Plugins
Building a sitemap using the Google XML Sitemaps plugin.
150

Working with
useFuL THiNGs TO KNOW /// MY siTe isN’T sHOWiNg uP iN gOOgle /// WORKiNg WiTH OTHeR useRs /// geTTiNg HelP
OTHer users Getting HeLp
If you’re working as a team, you can If you’re ever stuck, here are two the information you need (http://
assign other users a “role”—that is, places you can go to get help. codex.wordpress.org/FAQ); also
access with varying rights, depending try the forums (http://wordpress.
on what you want them to do. Either The first is the “Help” button at the org/support)—you can post your
assign the other users a role from top right of the screen; this gives problem and receive a timely
within the “Users” area, or allow them you relevant information on the area answer, but see relevant posts
to sign up by providing a signup box of administration you are currently in. first as it’s likely someone has
using the “Meta” sidebar widget. (The The second is WordPress.org. already experienced the same
default new-user role can be set in A very useful “Frequently Asked problem, so the answer may
the “General Settings” area; you can Questions” area may provide all be there.
alter the individual user’s role once New
Create Your Website Using WordPress in a... 3 View Post Howdy, Alannah
they have signed up.) Dashboard

Edit Post Add New
Screen Options Help
Jetpack
Posts This is an image post Publish
roles are: All Posts

Add New
Permalink: http://www.alannahmoore.com/twentytwelve/this-is-a-blog...e-image-format/ Edit View Post Get Shortlink Preview Changes
Add Media Visual Status: Published Edit

Administrator Categories Text
Tags Visibility: Public Edit
The person who has access to all Media
Pages
Paragraph Published on: Oct 18, 2012 @ 16:29 Edit
Publicize Not Connected Show
the administration features (you). Comments

Feedbacks
Editor Contact
Format
A user who can publish and manage Appearance
Standard
Plugins Aside
posts and pages, as well as manage Users

Image
Link
Tools Quote
other users’ posts. Settings
Status
Author Collapse menu

Categories
Path: p
A user who can publish and manage Word count: 0 All Categories Most Used
their own posts.

Create Your Website Using WordPress in a... 3 New View Post Howdy, Alannah
Contributor Dashboard
Customizing This
The title field and the big Post Editing Area are fixed in place, but you can reposition all the other boxes using drag and You can also create posts
drop. You can also minimize or expand them by clicking the title bar of each box. Use the Screen Options tab to unhide with the Press This
Jetpack Display
A user who can write and manage Posts
Title and Post Editor
more boxes (Excerpt, Send Trackbacks, Custom Fields, Discussion, Slug, Author) or to choose a 1-or 2-column layout for
this screen.
bookmarket.
For more Information:
their posts, but not actually make All Posts

Add New
Inserting Media
Publish Settings
Documentation on Writing
and Editing Posts
them live (someone with editor Categories Support Forums

Discussion Settings
Tags
rights can do this). Media Help

Edit Post Add New
Pages
Subscriber A user who can only Comments This is an image post Publish
Feedbacks Permalink: http://www.alannahmoore.com/twentytwelve/this-is-a-blog...e-image-format/ Edit View Post Get Shortlink
manage their profile.
Preview Changes
Contact
Add Media Visual Status: Published Edit
Text
Appearance
Plugins
Paragraph
If you need to have several blogs
Published on: Oct 18, 2012 @ 16:29 Edit
Users
Publicize Not Connected Show
Tools
on one domain, or different blogs on Settings
multiple sub-domains, you can make Collapse menu

Format
use of the “Multisite” feature, which is Standard

Aside
now an integral part of WordPress.

Image
Link
This is a fairly complex matter—see

The “Help” button at the top of each screen gives you help for the particular area of the admin
here for more details: http://codex.
you are in.
wordpress.org/Create_A_Network
151

WordPress in other LANGUAGES
c h a p t e r 10
It’s easy to install WordPress in a password you were assigned when

language other than English—at the you signed up, and click the green There are guidelines that programmers
time of writing, the “core” WordPress tick. Click on “yourdomain.com”—you need to follow to ensure a theme will be
instalment exists in 74 different can now see all your site files and translatable. However, because WordPress
language versions. This will mean folders listed inside. is a free software with thousands of
that as long as you are using a individuals creating themes for it, no
relatively uncomplicated theme, all To install WordPress in your one obliges the programmers to consider
the text that appears automatically own language: their global audience. If a theme has been
on the website—dates, and so on—as Go to http://codex.wordpress.org/ designed along these guidelines, you will be
well as the admin area, will be in your WordPress_in_Your_Language. able to translate it into your own language,
selected language. On this page there are links to following the instructions detailed here.
instructions for installation in many
Installing WordPress different languages; simply follow
in ANOTHER language the instructions in your language.
Unless you are using a local hosting T IP
company that offers a one-click If there aren’t any specific instructions
installment of WordPress in your available for your language, you’ll
When a theme is described as
own language, you’ll need to install need to install WordPress in English
“translation-ready,” it means you can
your language version of WordPress (you can use the one-click install)
apply the translation process. Sometimes
manually. To install manually, you will and then change the language over
this isn’t specified, so it’s a good idea to
need to create a MySQL database to your own. For this, you’ll need to
check with theme creator. It’s also worth
from your hosting package’s control access your site files via FTP (as asking if there are any language files for
panel, and you’ll also need to be able mentioned, this can normally be the theme already in existence, for the
to upload to your website (“FTP”)— done via your hosting control panel). language you require; some themes do
you can usually do this directly from When you’ve completed your install, have versions in other languages, and the
your control panel. switch the language by following the creators will happily let you have them.
instructions here: http://codex. Occasionally, themes have a built-in area
To create a database, and accessing wordpress.org/Installing_WordPress in the theme options that allows you to
your files via FTP, in Dreamhost: _in_Your_Language (see the sections translate words and phrases very easily.
In Dreamhost, go to Goodies > “Manually Installing Language Files”
MySQL. Click the link at the top and “Single Site Installations”).
of the page entitled “MySQL translating a theme
documentation in our wiki!” and Things become more complicated The translation process is most
follow the instructions to create a when you want to use a fancier, simply done by using a free plugin
MySQL database. To access your site premium theme. These usually called Codestyling Localization.
files via FTP, go to Manage Domains contain words and phrases that
> Web_FTP (a link underneath your belong to the theme, that are not 1. Install and activate the plugin in
domain name); a new window will part of the basic installation of the normal way via your admin area.
open up which may take a moment WordPress. These need to be 2. Go to Tools > Localization.
to load. When loaded, type ftp. translated, and in most cases, 3. Click “Themes” and identify the
yourdomain.com next to “host”, it will have to be you who does theme you are using from the list
log in using the FTP username and the translation. of themes.
152

useFuL THiNGs TO KNOW /// WORDPRess iN OTHeR laNguages
4. Click “Add new language” and
select the language from the
Manage Language Files
window that pops up; click the
“create po-file” button. enable low memory mode
5. Click “Rescan,” then click “scan
Translation service-APIs: None Google Microsoft
now” in the window, allow the files
to scan, and click “Finish.” (In the
All Translations | WordPress | Plugins | Themes | Compatability | Security Risk
screenshots, I am about to carry
out a translation into French.)
Free Structure © Organic Themes
6. Now click “Edit,” next to the Add New Language 1 Language
Textdomain: organicthemes
Language Permissions Actions
“Rescan” button.
Theme Version: v3.2
English/United States .po .mo
State: activated Edit Rescan Delete
7. Translate all the words and phrases

The Premium Structure Theme is designed and developed by David Morgan
of Organic Themes.
that appear on the live part of the

Free Structure © Organic Themes 2 Languages
website (next to each word or Textdomain: organicthemes
Add New Language
Language Permissions Actions
phrase to be translated, click “Edit”

Theme Version: v3.2
English/United States .po .mo
State: activated Edit Rescan Delete
The Premium Structure Theme is designed and developed by David Morgan
and then save the translation). You

Français/France .po .mo
Edit Rescan Delete
of Organic Themes.
do not need to translate the words Help

Translate Language File
and phrases that belong to the
back to overview page
Project[Id-Version: Free Structure w3.2 | File: fr_FR.po
admin area (unless you want to Textdomain: organicthemes generate mo-file last written: 01/31/2013 18:01:10
translate this as well). Total ( 138 / 140 ) | Plural ( 0 ) | Context ( 0 ) | Not translated ( 140 ) | Comments ( 0 ) | Code Hint ( 0 ) | Trailing Space ( 0 )
Page Size: 100 1 2 Next
8. When you’re done, click “generate

Infos Original: Translation: Actions
mo-file.” non case-sensitive non case-sensitive
Not Found, Error 404 Edit | Copy
9. Go to your live site, refresh the The page you are looking for no longer exists. Edit | Copy
Posted by Edit | Copy

page, and check how it looks.
For the free Structure theme (p.114),

you need to carry out an extra step
to translate the theme to your own
language. After you have completed For further information on using the plugin, see: http://www.code-styling.de/english/
steps 1-6 above, navigate to your development/wordpress-plugin-codestyling-localization-en. You can also translate plugins
FTP or file manager area from within using the Codestyling Localization plugin.
your hosting company control panel.
(In Dreamhost, go to Manage Domains
> Web_FTP (underneath your domain
name); type ftp.yourdomain.com next Multilingual sites
to “host” in the window that opens, For sites that need to be in multiple languages, there are several solutions:
and log in using the FTP username > Create separate directories and install and set up WordPress in each of
and password you were assigned them; create a “custom menu” with links to each to allow users to choose
when you signed up. Click the green their language.
tick). Go to yourdomain.com > > Use a plugin such as qTranslate that allows you to create all pages and
wp-content > themes > organic_ posts in multiple languages; a sidebar widget allows the site visitor to
structure_free_v3-1 and move the select their language from a dropdown menu.
two files you have created (which > Use WMPL, an extremely popular premium plugin (http://wpml.org/;
will look something like “fr_FR.mo” you’ll need the “Multilingual CMS” version).
and “fr_FR.po”) to the directory
titled “languages.” And you’re done.
153

Adding functionality with plugins
c h a p t e r 10
You will find plugins that can do all manner of things Add a CAPTCHA to it (a letter/number code) to protect
listed in the WordPress Plugin Directory—see here: your contact form from submissions by robots.
http://wordpress.org/extend/plugins Events Manager, Event Registration—online event
management and registration.
Remember, you can install them directly via the Plugins MapPress Easy Google Maps—add Google Maps with
> Add New area of the admin—just search their name. custom markers to your site.
Membership, Wishlist Membership (premium)—create
Plugins mentioned in the book: a membership site.
> Akismet Link Manager, Link Library—organise your links, create
> Jetpack a links directory.
> Pixeline’s Email Protector Ad Squares Widget—allows you to display the grid
> All in One SEO Pack of 125 x 125 pixel adverts very often seen on websites;
> WooCommerce it’s also compatible with Google AdSense.*
> WooDojo Google AdSense Plugin—allows you to display AdSense*
> AWeber Web Form Plugin, ads as a widget.
MailChimp List Subscribe Form Yet Another Related Posts Plugin—lets your blog readers
> Subscribe2 see a list of related posts they may also be interested in;
> Google Analytics for WordPress also useful for bringing your archived material to the fore.
> Social Media Icons Widget NextGEN Gallery—a hugely popular plugin that helps you
> Cookie Law Info to upload and maintain image galleries.
> BackUpWordPress Slideshow (by StefanBoonstra)—an easy-to-use plugin
> Google Site Verification that allows you to set up a slideshow anywhere within
> Google XML Sitemaps a page or a post or even as a sidebar widget.
> Codestyling Localization—for translating themes
and plugins
> Q-translate, WPLM (premium)—for multilingual websites *Google AdSense is an ad network that displays ads
on your website that are relevant to your page content.
More plugins You receive revenue according to the number of clicks
The following are a selection of plugins you may find generated from your web pages.
useful to extend your site’s functionality, but there are
many more to investigate . . .
underConstruction—a really useful plugin for when

you’re building your site, or performing maintenance,
and you don’t want visitors to see what you’re doing.
WPtouch, WP Mobile Detector—automatically transform
your site to a mobile theme when viewed on a mobile.
Shareaholic—nice-looking social media sharing buttons,
including the often-seen “sexy bookmarks” and “classic
bookmarks” options.
Contact Form 7, Really Simple CAPTCHA—a contact
form for your site (an alternative to the Jetpack one.
154

Going further with wordpress
USE F U L T H I N G S T O K N O W / / / A D D I N G F U N C T I O N ALI T Y W I T H P LUGI N S / / / G O I N G F U R T H E R W I T H W O R D P R ESS

WordPress is a fantastically flexible
software that can be made to do just If you need a developer to create something for you,
about anything—that’s why books here are some places you can find one:
covering it in detail are encyclopedic Code Poet Directory http://directory.codepoet.com
in scope and size. This book is WPMU Jobs http://premium.wpmudev.org/wpmu-jobs
intended to go as far as you possibly Smashing Jobs http://jobs.smashingmagazine.com
can in just a weekend to get your WP Hired http://www.wphired.com
initial website up and running, and ThemeForest http://themeforest.net
to help you plan your ongoing (you can contact the developers directly)
marketing strategy, but there is Elance https://www.elance.com
much more you can do with Freelancer.com http://www.freelancer.com
WordPress: ODesk http://www.odesk.com
> create a network of blogs or sites

> run a social network or community
portal
> set up a forum
> create a membership site
> manage events
> build a directory
> start a classifieds site
> build a review site
> create a media-sharing website
> set up a fundraising site
WordPress is so well supported,

and has so many designers and
programmers creating themes and
plugins for it all over the world, that
whatever it is that you wish to do
with your website, there is probably
a WordPress theme or plugin already
in existence that will enable you to
do it.
You can search for Top

Authors on ThemeForest to
find a suitable developer.
155

Resources
Resources and glossary
Domain registration http://polldaddy.com Tracking

http://www.namecheap.com http://revision3.com http://www.google.com/analytics/
http://www.godaddy.com http://www.scribd.com
http://www.gandi.net http://www.slideshare.net/ Search engine submission
https://twitter.com https://www.google.com/webmasters/
Places to get ideas for domain names tools/submit-url/ (submit site)
http://www.instantdomainsearch.com Taking payment online http://www.bing.com/toolbox/submit-site-
http://www.domainsbot.com http://www.paypal.com url (submit site)
http://www.namestation.com http://www.google.com/wallet/ https://www.google.com/webmasters/
http://www.nameboy.com tools/ (Google Webmaster Tools, to verify
http://domai.nr Themes with Google and request site crawl)
http://www.dotomator.com http://wordpress.org/extend/themes/ (free)
http://wordpressthemesbase.com (free) Social media
Check who owns a domain http://www.wpdaddy.com (free) http://www.facebook.com
http://www.betterwhois.com http://www.s5themes.com (free) https://twitter.com
http://www.freewpthemes.net (free) http://www.linkedin.com
Hosting companies http://www.wpskins.org (free) https://plus.google.com
http://www.dreamhost.com http://wptemplates.org (free) http://pinterest.com
http://www.bluehost.com http://wpshower.com (some free) http://www.flickr.com
http://mediatemple.net http://www.dessign.net (some free) https://www.rebelmouse.com
http://www.hostgator.com http://shakenandstirredweb.com (some free)
http://www.webhostingpad.com http://templatic.com(some free) Review sites
http://www.skinpress.com (some free) http://www.yelp.com
Stock images http://wordpress.org/extend/themes/ http://www.opentable.com
http://www.istockphoto.com commercial (premium) http://www.tripadvisor.com
http://www.fotolia.com http://www.studiopress.com (premium) https://foursquare.com
http://www.shutterstock.com http://themeforest.net (premium)
http://www.clipart.com http://www.elegantthemes.com (premium) Places to find developers
http://www.woothemes.com (premium) Code Poet Directory
Image editing software http://ithemes.com (premium) http://directory.codepoet.com
http://pixlr.com http://templatic.com (premium) WPMU Jobs
http://www.gimp.org http://press75.com (premium) http://premium.wpmudev.org/wpmu-jobs
http://www.organicthemes.com (premium) Smashing Jobs
Logo creation http://www.mojo-themes.com (premium) http://jobs.smashingmagazine.com
http://buildabrand.com http://themetrust.com (premium) WP Hired http://www.wphired.com
http://99designs.com http://thethemefoundry.com (premium) Themeforest http://themeforest.net
http://graphpaperpress.com (premium) (you can contact the developers directly)
Background images http://www.obox-design.com (premium) Elance https://www.elance.com
http://www.patterncooler.com http://www.wpzoom.com (premium) Freelancer.com http://www.freelancer.com
http://www.colourlovers.com http://www.wpnow.com (premium) ODesk http://www.odesk.com
http://www.backgroundlabs.com http://www.frogsthemes.com (premium)
http://subtlepatterns.com http://www.theme-junkie.com (premium) WordPress
http://www.templatelite.com (premium) http://wordpress.com (the version of
Video and other elements that can WordPress that is hosted for you)
be embedded in your WordPress site Advertising http://wordpress.org (the home of
http://www.youtube.com http://adwords.google.com self-hosted WordPress)
http://vimeo.com http://codex.wordpress.org/FAQ
http://www.dailymotion.com Email marketing/newsletters (Frequently Asked Questions)
http://www.viddler.com http://www.aweber.com http://wordpress.org/support/
http://qik.com http://mailchimp.com (support forums)
http://blip.tv http://www.constantcontact.com http://wordpress.org/extend/themes/
http://www.hulu.com https://www.icontact.com (free themes directory)
http://www.flickr.com http://www.campaignmonitor.com http://wordpress.org/extend/plugins/
http://instagram.com http://www.benchmarkemail.com (plugin directory)
http://photobucket.com http://www.pinpointe.com http://codex.wordpress.org/WordPress_
http://www.smugmug.com http://www.getresponse.com in_Your_Language
https://soundcloud.com http://www.verticalresponse.com (foreign language versions of WordPress)
156

Glossary
RESOURCES AND GLOSSARY

http://codex.wordpress.org/Installing_ Admin(istration) area This is the “behind Default theme This is the template that is
WordPress_in_Your_Language (changing the scenes” area of your website where automatically installed when you set up
your WordPress installation from English you set up how it will look and input your WordPress yourself (as opposed to using
to another language) content; your site visitors will never see WordPress.com). The current default
this part. (It is also sometimes known as theme is called “Twenty Twelve” (as used
Online storage the “back end,” whereas the public part in Chapter 5 for the model website setup).
http://www.dropbox.com is referred to as the “front end.”)
Domain The main address of your website,
Demo sites Avatar A graphic representation of a user for example www.yourdomain.com. Domain
http://wordpresswalkthrough.wordpress. or the administrator (you) each time a names need to be registered so that they
com comment is posted on a site. If you set up belong to you for a specific period of time.
(WordPress.com demo site) a “Gravatar”—a globally recognized avatar
http://www. linked to your email address—the image Footer The area at the bottom of a
createyourwebsiteinaweekend.com/ you choose will be shown on your site (or web page; usually contains copyright
twentytwelve (default theme anywhere else you might post). Set up a information but sometimes other
demo site) gravatar here: https://en.gravatar.com elements as well (such as widgets).
http://www.
createyourwebsiteinaweekend.com/ Backup A copy of your site that you keep Front end This is the public part of your
responsive/ (Responsive Theme demo in a safe place (or several safe places) in website that your visitors will see.
site, example of a free business theme) case anything goes wrong with your site.
http://www. You can use a plugin to make backups FTP This means putting something up
createyourwebsiteinaweekend.com/ regularly (see Chapter 10). onto a website. This can be done either
visual/ (Visual Theme demo site, example with special FTP software, or through the
of a free portfolio theme) Blog A section of your site (or a standalone control panel of your hosting company’s
http://www. site in its own right) consisting of dated website. As you are using WordPress,
posts ordered chronologically, with the you can upload things like pictures into
createyourwebsiteinaweekend.com/
latest first. These are usually fairly short, cyberspace via its administration area,
structure/ (Structure Theme demo site,
newsy items relating to one person or one and will not have to use any separate FTP
example of a free magazine theme)
topic or interest and they usually aim to software. However, if you are installing a
http://www.
attract interaction or reader comments. foreign-language version of WordPress,
createyourwebsiteinaweekend.com/
you will need to have FTP access to
mystile/ (Mystile Theme demo site,
Browser (or “internet browser”) The your website.
example of a free e-commerce theme
software (such as Internet Explorer, Google
powered by the free e-commerce plugin
Chrome, Firefox, or Safari) that you use to Harvest Illegally obtain email addresses
WooCommerce)
surf the Internet. for spamming purposes (see “Spam”).
Categories These are a way of “filing” Header The large rectangular image often
your blog posts so that if you want to, found at the top of a website. This space
YOUR ADMIN AREA you can order them into different groups is often filled by a slider (see “Slider”).
http://www.yourdomain.com/wp-admin— according to their subject matter. Distinct
from tags (see “Tags”). Hexadecimal (“hex”) color A six-figure or
access to the admin area of your own letter code used to identify colors used on
self-hosted WordPress site (replace CMS Stands for “Content Management websites, usually preceded by a hash tag;
www.yourdomain.com with your own System;” this means a website that the for example #FFFFFF indicates white.
owner can log into and make changes to, (Sometimes colors are identified with just
domain name) without having to delve into the coding. three figures or letters.)
(WordPress is a CMS.)
Hosting This is the space that you “rent”
Comments Running a blog on your site is in cyberspace where your website will
usually an invitation to readers to add their be lodged.
COMPANION WEBSITE own remarks about what you have written
http://www.createyourwebsiteinaweekend. in your blog post. With a WordPress site, HTML This is the basic code used to write
you can choose to allow visitors to leave websites (stands for Hyper Text Markup
com—see here for updates, demos, tips,
messages on your blog posts and the Language). If you’re using WordPress, you
and latest information; join the newsletter other pages on your site. won’t need to know any of this code.
to keep informed.
Dashboard The “home page” of your Key word or key phrase See “Search
administration area. Engine.”
157

Menu A list of links, or web page titles, will return a list of sites it considers (Categories are used for filing, whereas
glossary
that can be clicked on to navigate around relevant to what you are looking for. tags are about ideas and associations.)
a site. The menu often runs along the (The word or phrase you type into the
top of a website, but sometimes down box to make your search is known as Theme A template that is applied to
the side, or on occasion, both. a “key word” or a “key phrase.”) a WordPress site. Every WordPress
site needs a theme; WordPress will be
Navigation Another name for a menu. Self-hosted This is the form of WordPress installed with the default theme, and it
that you install yourself on your own is up to you whether or not you choose
Page As distinct from a post. These are hosting space. As distinct from sites an alternative. It controls the colors,
static pages on a website. Blog pages, running with WordPress.com, you have fonts, and everything to do with the
on the other hand, are filled with blog total control over your website look of the site; some themes also
posts, and their content changes when (see Chapter 1 for a comparison). determine the layout—for instance, the
a new blog post is added. theme may determine that you have a
SEO Stands for “Search Engine slider on your home page with a row of
Permalink The website address of each Optimisation.” This means doing the three boxes underneath it. Some themes
page and post on your site; WordPress best that you can to ensure that your are free, whereas others you have to pay
will generate these website addresses site has the highest possible position for (these are referred to as “premium”
the way you tell it to (as explained in in the search engines, in order to be themes).
Chapter 5). visited by the maximum number of
people (see Chapter 9). Trackback Another type of notification
Pingback A notification you receive to you receive to let you know that someone
let you know that someone has linked Sidebar This is the (optional) column has linked to something on your website.
to some of your website content. on the right or the left hand side of your
website pages, which is usually used Traffic People visiting your website.
Plugin An element you can add to your to display widgets (see “Widgets”).
website to make it do something that it Tweet A short snippet of information
didn’t originally do. For example, you Slider A large, rectangular space at posted on the social media network
can add an event management plugin the top of your home page, in which Twitter is known as a “tweet”
to your website to display events on a a number of images, sometimes with (see Chapter 9).
calendar and allow your visitors to sign captions, and occasionally videos,
up to attend them. A vast number of rotate. These are often linked to Upload To put something up in
free and paid-for plugins exist, designed pages inside the site or to blog posts. cyberspace or up on your website.
by individual programmers or companies, With WordPress, you will upload images
which you can use to make your site Social media Services, such as to your Media Library through your
do virtually anything you want it to. Facebook and Twitter (see Chapter 9), admin area.
that allow users to share and comment
Post A blog post is a dated article on information, photos, and videos URL Means simply a website address.
that will appear at the top of the blog with a network of other users. It can be the home page, or a page
section of your site. A blogging site will somewhere else on a website. (Stands
usually choose to display blog posts on Spam Commercial email that you for “Uniform Resource Locator”.)
the front page; however most other have not asked for—in other words,
types of site will have a blog section junk email. We also refer to comment User Someone signed up with a
somewhere inside the site. spam, which is caused by promotional WordPress website. There are five levels
messages submitted, usually by robots, of user, each of which has different
Robot Also known as a “bot,” “crawler,” as comments on your website. Luckily, rights; some can create pages and
or “spider”—a program that “crawls” these can mostly be filtered out using other content, others can just read
(visits) websites in order to index the Akismet plugin (see Chapter 5). posts (see Chapter 10).
information for the search engines.
Subscribe A site visitor can choose Widget An element—usually situated in
RSS This is a “feed”—or stream of to “subscribe”—i.e., receive your blog the sidebar, sometimes in the footer area
content—that readers can use to read posts or website updates by email or of a site—such as a search box, a list of
in a “Feed Reader” if they are an avid through a “Feed Reader;” we also talk recent posts, a small text announcement,
blog-follower. Many will choose instead about newsletter subscribers who are or a list of recent “tweets.”
to receive your blog updates by email, people who have “opted in” (chosen)
which you can allow them to do via to receive your email newsletters. WordPress.com This is the easy option
the Jetpack plugin (see Chapter 5). for running a WordPress website; sites
Tags You can attach tags (key words) hosted on this system are very simple
Search engine When you are looking to your blog posts, which is distinct to set up, but your options are limited
for something on the Internet, you will from assigning them to categories; (see Chapter 1).
use a search engine, such as Google, to tags are primarily used to help your
find it; the search engine you are using site visitors find related material.
158

Index
RESOURCES AND GLOSSARY /// INDEX

about pages 25-26, 60, 110, 119, calls to action 28 extensions 15-16, 18 Layout Editor 104
126 CAN-SPAM Act 133, 147-148 Facebook 36, 78, 112, 118, 129, legal issues 146-148
Add Link 58 captions 62, 64 134, 142-145 LinkedIn 78, 129, 144-145
Add Media 62, 64, 67 Carousel 65, 78 Featured Article Category 117 links 130, 141
Add to Cart 83-84, 86 Catalog Options 124 featured images 71 Live Preview 83
administration areas 36-37, categories 68-69, 113, 117-118, Featured Post 70 live sites 40
40-42, 76, 78, 87, 102, 110, 122, 125, 127 Federal Trade Commission 148 logos 7, 12, 30-31, 46, 50-51, 85,
115, 149 cell phones 80 file formats 29, 50, 67 89-90, 104-106, 110, 115
administrators 151 charge-back rates 87 first impressions 25 Lublinski, Marios 109
ads 10-11, 80, 123, 129 checklists 81 Flickr 33, 67
AdSense 154 Checkout 83 fliers 131 magazine sites 22, 98-99,
AdWords 129 client pages 27 fonts 31, 38, 88, 105, 122 114-119
affiliates 123 Codestyling Localization 114 footers 12, 38, 107-108, 119, 123, MailChimp 123, 132-133
Akismet 74, 113, 119, 127 color 47, 51, 54, 83, 88, 90, 104, 127 mailing lists 132
alignment 58, 63 110, 115-116, 118, 122 formatting blog posts 71 maintenance of sites 149
All in One SEO Pack 140 comments pages 43, 70, 74, 115 formatting text 59 Manage Themes 83
Alt Text 62 competitions 134 free themes 82-83, 89, 114-115 manual install 35, 152
Analytics 78, 135-136, 140, contact forms 74-77 Free Themes Directory 82-83, market research 134
146 contact pages 25, 28, 77, 110, 102 marketing 24, 128-129, 131-132,
archives 73, 123 119, 123, 126 freebies 130 141, 155
Aspect Ratio 66 content management system full screen 58 Media Library 49, 64-65, 67,
Attachment Display Settings (CMS) 8-9 87, 107, 110, 117
63 content of sites 25, 56, 88, 108, galleries 64-66, 78, 125 menus 12, 38, 55, 60-61, 73, 85,
attention spans 28 116, 137 Google/Google+ 28, 62, 78, 83, 105-106, 108, 111-112, 116, 118-119,
audio 33, 59, 67-68, 78 contributors 151 112, 118, 123, 129, 134-136, 122, 126-127
authors 151 cookie pages 28 138-141, 144, 146, 150, 154 multilingual sites 153
AWeber 132-133 cookies 146-148 grammar 25 MySQL 19, 152
copy/paste 59 gravatars 44
back end 40, 115 copyright 31, 59, 79, 108, 148 guest posts 130 Namecheap 16-17, 20-21
background 12, 32, 38, 54, 89, costs 10-11 Navigation Label 61
104, 110, 115-116, 122 crawls 150 harvesting 77 news areas see blog pages
backing up 149 currency 124 header images 46-47 newsletters 123, 132-133
BackUpWordPress 149 Custom Links 119 headers 46-53, 115-116 99designs.com 31
bandwidth 19 customizing themes 104-108, help 151 No Ads option 36
banners 123 110-113, 115-119, 121-127 hero element 106-107
Bing 141 home pages 25, 36, 55-56, 61, one-click install 19, 34-35, 152
blockquotes 58 dashboards 40-42 73, 90, 105-106, 108, 111-112, Organic Themes 92, 114-115
blog pages 25, 27, 44, 54, 56, data protection 147-148 116-119, 122-123, 138
59, 68-71, 74, 105, 108, 110-113, databases 19, 149, 152 hosting 14-21 page text 12, 38, 55
117-119, 122, 126-127, 130, delivery information pages 28 humor 26 page titles 140
133-134 descriptions 140 hybrid sites 23 PageLines 102
blog sites 22-24, 36-37, Dessign.net 92, 109-110 passcodes 74
98-99 Discussions 70 illustrations 30 passwords 34
bold 58 domain names 7, 14-21, 37, images 7, 29-32, 38-39, 46-54, Pay Per Click (PPC) 129
bookmarks 41 111-112 59, 62-66, 68, 71, 88, 90, 104, payment 23, 82-87, 124
Boxes 107 dotcoms 15 106-107, 113-115, 117, 122-123, PayPal 7, 82-87, 124, 127
brand names 15-16 DreamHost 19-21, 34, 152-153 125 permalinks 45, 104, 115, 124
breadcrumbs 122 Install Themes 83 photos 7, 26, 29-32, 123, 125
brochures 131 e-commerce sites 23, 82-87, italics 58 PHP 19
buildabrand.com 31 100-101, 120-127 Pinterest 144-145
bullets 58 Edit Image 65 Jetpack 44, 65, 73, 75, 78, 113, Pixlr 30, 49-53, 104, 110, 115
business accounts 74, 83 Edit Page 57 119, 127, 133-135, 143, 145 planning 22-33
business cards 131 editors 151 justification 58 plugins 10-11, 43-44, 65, 73-80,
business names 46-47, 104 email 18-19, 24, 28, 34, 36, 44, 83, 90, 108 114-115, 119-121,
business permits 148 74, 76-78, 87, 123-124, 126, keywords 28, 129, 134, 137-140, 123-124, 126, 133-137, 140,
business sites 22-23, 29, 90, 130, 132-134, 147, 149 150 144-145, 147, 149-150,
94-95, 102-108 Email Protector 77, 126 Kitchen Sink 57, 59 153-155
Buy Now 83-84 European Union (EU) 146-147 languages 114, 152-153 portfolio pages 28, 114
159

,
portfolio sites 22-23, 96-97, search engines 15, 28, 42, 45, tablets 39, 109 Value Bundle 36
i n d e x /// a c k n o w l e d g m e n t s
109-113 81, 104, 129, 137-141, 150 tags 68-69 Variable Product 125
postcards 131 self-hosting 10-11 target audience 24, 128-130 video 33, 36, 67-68, 114, 117
premier accounts 83 service pages 25-27 taxation 124 View Page 59
premium themes 82-83, 89, setting up 34-37 technical support 10, 19, 89 Vimeo 33, 67, 117
114, 152 settings 37, 42, 44-45, 70, 74, telephone numbers 28, 73, 77,
press releases 131 81, 105, 107, 110, 124-125 126 Wallet 83
privacy pages 28, 126 shared hosting 19 terms & conditions pages 28, Webmaster Tools 141, 150
privacy policy 34, 108, 146 shipping 124 108, 126 Website Payments Standard
product pages 25, 27, 123, sidebars 12, 39, 68-69, 72-73, test runs 127 83, 85
125-126 78, 80, 90, 108, 117-119, 122-123, testimonial pages 25, 27 widgets 12, 38-39, 72-73, 78,
profiles 37 127, 144-145, 151, 153 text editing 57-59, 62, 76, 86 80, 108, 113, 117-119, 123, 127,
proofreading 25 signatures 130 text headings 46-47 133, 143-145, 151, 153
punctuation 25 sitemaps 150 thank you pages 85, 87 WooCommerce 83, 121-127
purpose of sites 24 sliders 12, 63, 107, 112-114 themes 8-12, 22-23, 27, 30, WooDojo 121
Quickslider 106 Small Business Administration 37-39, 71-72, 79, 88-127, WooThemes 92, 120-121
(SBA) 147 52-153, 155 Word documents 59
rankings 137-138, 141 smartphones 39, 104, 109 thumbnails 65-66 WordPress 6-9, 12-13, 19, 27,
Read More 58 social media 12, 78, 107, 111-112, tiling 54 30, 33-40, 42, 45, 50, 55-56,
RebelMouse 144 118, 123, 129, 134, 142-145 trademarks 15, 148 62, 64-68, 71-72, 74-76,
recommendations 130-131 Social Media Icons Widget 145 traffic reports 78, 122, 132, 135, 79-83, 88-89, 102, 105, 110,
Redo 59 Social Sharing Toolkit 145 141 133, 136, 140, 147, 149, 152-155
registering domain names 7, 14, SoundCloud 33, 78 transaction fees 83 WordPress.com 8, 10-11, 14, 17,
17-18, 20 spam 28, 43, 74, 77, 119, 127, translations 114, 152-153 36-37, 75, 135
removing sidebars 72 133, 147 Twitter 36, 78, 107-108, 112, 118, WordPress.org 10-11, 35, 151
Reports 124, 127 special content/offers 73, 107 129, 134, 142-145 WP E-Commerce 83
responsiveness 39, 80, 109, 114 spelling 15, 25, 58
returns policy pages 28 spiders 150 Undo 59, 66 Yahoo 141
review sites 145 Stats 78, 135 United Kingdom (UK) 147 YouTube 33, 67, 117, 144
RSS feed readers 133 sticky posts 70 United States (US) 147-148
storage space 10-11, 19, 30 Update 59, 63, 65, 67-70, 72, zip files 83, 110, 115, 121, 149
sales 82-87 strikeout 58 74, 76, 78-79, 125
sandbox 127 subscribers 151 updating sites 149
search engine optimization subscriptions 78, 123, 132-134 uptime records 19
(SEO) 28, 78, 123, 129, 137-141 symbols 59 usernames 34
Acknowledgments
Thank you to my clients and workshop partipants for
inspiring me to write this book. Thank you to my editors
(Ellie Wilson, Nick Jones, and Zara Larcombe of Ilex
Press) for their endless patience, good sense, and sanity.
Thank you to WordPress for creating such a wonderful
system, and to all the theme authors and website owners
who’ve allowed me to print their beautiful creations in
these pages. Thank you to my friends for bearing with
me, and for all the encouragement and enthusiasm I’ve
been met with along the way.
160

Create Your Own Website Using WordPress in A Weekend

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Create Your Own Website Using WordPress in A Weekend

Uploaded by

Copyright:

Available Formats

C r e at e

X-WBWR-LVBK-001-005_US.indd 1 21/03/2013 16:42

X-WBWR-LVBK-001-005_US.indd 3 21/03/2013 16:42

First published in the USA 2013 by Focal Press

X-WBWR-LVBK-001-005_US.indd 4 21/03/2013 16:42

X-WBWR-LVBK-001-005_US.indd 5 04/04/2013 16:54

Setting up a website doesn’t have to be Thanks to WordPress, creating a wonderful-looking

X-WBWR-LVBK-006-013_US.indd 6 21/03/2013 16:46

This book functions a bit like a recipe book, with

For some readers, the basic template is all you’ll

We’ll also go into additional optional extras, such as

X-WBWR-LVBK-006-013_US.indd 7 05/04/2013 08:40

X-WBWR-LVBK-006-013_US.indd 8 05/04/2013 08:40

WordPress gives you

your site. You have complete control.

It’s easy to update your website, Getting Started Resources

even if you’re not particularly ■

■ First Steps with WordPress

Search the Support Forums WP-Advanced

plugins post posts RSS sidebar theme wordpress

e-commerce sites—you name it, Miscellaneous

WordPress can do it. Requests and Feedback 10,395 35,412

Alpha/Beta 1,934 9,464

it’s robust and secure

WordPress is the most used CMS in the

X-WBWR-LVBK-006-013_US.indd 9 21/03/2013 16:47

So that you can choose which

X-WBWR-LVBK-006-013_US.indd 10 21/03/2013 16:47

No limit to the amount of storage space

No ads (unless you want to run your own,

WordPress is web software you can use to ceate a beautiful

Share with the world,

Remember me Help Sign in

X-WBWR-LVBK-006-013_US.indd 11 21/03/2013 16:47

Before you start planning your website, it makes sense to

1. the logo. Some sites alternatively have header text

Portfolio page layout.

X-WBWR-LVBK-006-013_US.indd 12 21/03/2013 16:47

The “Bigbang” theme by Brankic1979, Blog page layout.

X-WBWR-LVBK-006-013_US.indd 13 21/03/2013 16:47

X-WBWR-LVBK-014-021_US.indd 14 05/04/2013 08:42

YOUR DOMAIN AND HOSTING /// CHOOSING A DOMAIN NAME

You have three basic choices to make

Personally, I’d always go for the brand

A domain name should be:

X-WBWR-LVBK-014-021_US.indd 15 21/03/2013 16:54

It is true that many .com domains domain name

Try these tools to help you come up with domain http://www.namestation.com

X-WBWR-LVBK-014-021_US.indd 16 21/03/2013 16:54

Before you register a domain name,

If you’re choosing a country-specific domain

It’s very important to choose a

Therefore, it’s best to go with one

If you’re going to use WordPress.com,

X-WBWR-LVBK-014-021_US.indd 17 21/03/2013 16:54

Gandi.net—a good-value registrar, especially for country-specific domain names.

TIP BuyinG other extensions

DOmain anD hOsting packages

X-WBWR-LVBK-014-021_US.indd 18 21/03/2013 16:54

For most small-business needs,

X-WBWR-LVBK-014-021_US.indd 19 21/03/2013 16:54

If you’ve chosen a hosting package

be able to skip this section. However, Toolbox