WordPress

Everything you need to

know to get started
in WordPress

100% independent
Start your own blog
Install the best themes
 Welcome to
WordPress
™

WordPress has continued to grow in both popularity and capability over the
last few years, and has evolved from being an iconic blogging platform to a
powerful content management system that hosts everything from personal
blogs and fan sites to message boards and eCommerce sites. As you’ll discover,
WordPress truly does have all of the tools and components you will need to
get started with your blog. This new edition of WordPress for Beginners has
been written by experts and enthusiasts in order to teach you how to set up
an account, how the WordPress interface functions, and how to publish and
customise your very first website. In addition, it will also take you through the
best themes and how to make them your own, plus great plug-ins that your
blog simply shouldn’t be without. Enjoy the book!
 Imagine Publishing Ltd
Richmond House
33 Richmond Hill
Bournemouth
Dorset BH2 6EZ
☎ +44 (0) 1202 586200
Website: www.imagine-publishing.co.uk
Publishing Director
Aaron Asadi

Head of Design
Ross Andrews

Production Editor
Jen Neal

Senior Art Editor

Greg Whitaker

Assistant Designer
Alexander Phoenix

Photographer
James Sheppard

Printed by
William Gibbons, 26 Planetary Road, Willenhall, West Midlands, WV13 3XT
Distributed in the UK, Eire & the Rest of the World by
Marketforce, 5 Churchill Place, Canary Wharf, London, E14 5HU
Tel 0203 148 3300 www.marketforce.co.uk
Distributed in Australia by:
Network Services (a division of Bauer Media Group), Level 21 Civic Tower, 66-68 Goulburn Street,
Sydney, New South Wales 2000, Australia
Tel +61 2 8667 5288

Disclaimer
The publisher cannot accept responsibility for any unsolicited material lost or damaged in the
post. All text and layout is the copyright of Imagine Publishing Ltd. Nothing in this bookazine may
be reproduced in whole or part without the written permission of the publisher. All copyrights are
recognised and used specifically for the purpose of criticism and review. Although the bookazine has
endeavoured to ensure all information is correct at time of print, prices and availability may change.
This bookazine is fully independent and not affiliated in any way with the companies mentioned herein.

WordPress for Beginners Seventh Edition © 2016 Imagine Publishing Ltd

ISBN 978 1 78546 229 0

Part of the

bookazine series
Contents
Complete guide GETTING STARTED
We familiarise you with every section
of the WordPress interface
8 Get to know WordPress
We take you through the latest
update to the system

Getting started
18 Create an account at
wordpress.com
20 Introducing the Dashboard
22 Learning WordPress links
24 Introducing pages
26 Manage your comments
28 Understanding themes
30 Introducing Theme Customizer
32 Customise your site
with widgets
34 Customise your website menu 66 Add special features to the text 72 Introducing categories
36 Using the Appearance Editor 68 Publish your blog posts 74 Understanding post tags
38 Introducing plug-ins 70 Schedule your posts 76 Uploading new media
40 Adding new plug-ins
42 Using the Plug-in Editor Setting up
44 Add new users to your site 80 Getting hosted with WordPress 106 Manage the WordPress
46 Introducing Tools 84 Download, install and set Media Library
48 Understanding General Settings up a self-hosted site 108 Organise your WordPress posts
50 Using the Writing Settings 88 First steps to creating a 110 Managing blog post
52 Understanding and using the WordPress blog comments in WordPress
Reading Settings 92 Learn to edit your WordPress 112 Customise the categories in
54 Master the Discussion Settings blog posts your WordPress blog
56 Introducing Media Settings 96 Embed external media in your 114 Create, apply and manage
58 Using permalinks WordPress posts tags in your posts
60 Customise the screen 100 Add a gallery of images 116 Manage a series of links in
and layout in WordPress your website sidebar
62 Get started with new posts 102 Add video and audio to 118 Improve your permalinks and
64 Format the text of a post your WordPress blog drive visitors to your blog

6 WordPress for Beginners

CUSTOMISING WORDPRESS
Learn how to make your blog stand out
with guides to themes, plug-ins and more

Going further
154 The best WordPress plugins
GOING FURTHER
Take your WordPress to the next step with 162 Animate typography and
CSS and responsive themes text effects
166 Create on-click fading transitions
168 Craft supercharged web
Customising WordPress animations
122 20 best WordPress themes 144 Discover the flexibility of 172 Create a flickering background
WordPress plug-ins image
132 Add a new WordPress theme
to your website 146 Type and Typography 174 Make your WordPress theme
adapt to any screen
134 Learn how to use the new
Theme Customizer “For more creative Troubleshooting
136 Modify your blog’s theme
140 Customise your themes with
control over your 180 Your questions answered
widgets blog, choose a All your problems solved with this
guide to common problems
142 Understanding the basics
of CSS web host” 186 WordPress glossary

WordPress for Beginners 7

Get to know WordPress

Get to know
WordPress
WITH 4.0, WORDPRESS RECEIVED ONE OF IT’S
MOST RADICAL UPDATES YET, LET US GUIDE
YOU THROUGH THE BEST OF THE FEATURES
WORDPRESS HAS TO OFFER…
WORDPRESS 4.4 IS out now, and includes a images and videos helps to save time
selection of new features and security fixes with previews, while browsing for new
to help bring your blog or website right up plugins has become a far better
to date. experience, allowing you to see small
A host of new features are available in previews of the plugins.
WordPress, from improvements to the In the background, various
theme customizer view and media library security fixes have been implemented,
interface to enhanced media handling in ensuring that your blog, your posts and
the visual posting view and a brand new any user data such as email addresses is
interface for installing plugins. You’ll also protected against online intruders.
find some changes to the TinyMCE UI Remember, it is important to make
when creating a new post and it is now sure your blog is up to date, and this
possible to select a language when you means reviewing plugins regularly as
install WordPress for the first time. well as making a backup before you
These improvements all work together upgrade. Holding off on WordPress
to deliver an updated, polished WordPress updates can be for the better, but now the
experience. Enhancements to managing kinks are ironed out: upgrade today!

8 WordPress for Beginners

WordPress for Beginners 9
Get to know WordPress

Get to know the Dashboard

A NEW LOOK TELLS YOU EVERYTHING YOU NEED TO KNOW WHEN YOU LOGIN TO WORDPRESS
At first glance, the Dashboard may not seem all that different in recent updates, but on boxes appear and which remain hidden (see page 15 to see how you can change your
closer inspection you should spot the Welcome panel, where a collection of shortcuts screen options to suit you).
can be found. Further items will be added to the Dashboard as you install plugins. Several prominent
Ideal for newcomers to WordPress, the panel – which provides shortcuts for adding apps add important “at a glance”-style information to the Dashboard, such as Jetpack’s
widgets, installing a new theme, writing a new post and adding an about page, as well as visitor stats plugin.
managing widgets and menus, turning comments on and off and more – can be dismissed
if you’re a more experienced user.
“The panel provides shortcuts for
adding widgets, installing a new
Elsewhere on the Dashboard, the At a Glance panel, your blog’s comments Activity,
the Quick Draft box and the WordPress News (useful for spotting when new updates are

theme, writing a new post…”

imminent!) are also available, and are as customisable as they were before, you are able to
drag and drop for your own liking. You can use the Screen Options to determine which

Updates Customize your site Welcome panel Quick Draft Screen options
Update alerts will help you Use the site customizer to The Welcome panel Employ the Quick Draft Use the screen
to keep your blog secure get a preview of how your introduces you to WordPress. panel to add new blog options to tailor each
and protected against blog will look with a new This is useful whether you’re posts in a stripped-down screen in WordPress
online threats as well background colour or with new to the software or an form, without any pressure to your particular
improve functionality widgets added experienced user to publish workflow requirements

Plugins At a Glance Rearrange panels Welcome panel News panel

Adding new Plugins has The At a Glance panel Dashboard panels can Once you’re familiar The WordPress News
been revised in WordPress, gives you all be rearranged as with the Dashboard, panel keeps you up to
with a brand new user of the information needed, allowing you to maximise space by date with new and
interface that improves you need about prioritise the closing the Welcome to upcoming versions of the
the experience your blog information you need WordPress panel blogging software

10 WordPress for Beginners

 Update WordPress
UPGRADE TO THE LATEST WORDPRESS FOR THE BEST FEATURES
One of the greatest aspects of WordPress is its much-admired easy installation, and the latest
version is no different. If you’re blog is already running WordPress, ensure your database is backed up
and then sign into the Dashboard, find the notification informing you that the latest WordPress upgrade
is available (this will be across the top of the page) and click the link to begin the upgrade process. This
is the same as soon as there is any new update for you to install.
After the update completes, you’ll be presented with the new Dashboard page and confirmation that
you are now running the newest edition. Before proceeding, however, check your plugins and themes
for updates to ensure full compatibility with the new version of the blog software. Note that some
plugins may need to be disabled until the developers release compatible updates. Similarly, there is a
chance that you will need to choose a new theme.
Don’t read on in envy of the features that you could be missing out on, upgrade your system today to
save from disappointment.

“Note that some plugins may need to

be disabled until the developers release Creating posts
compatible updates”
Blogging made easier
WORDPRESS HAS IMPROVED TOOLS FOR AUTHORING NEW ARTICLES
Improvements to the way in which you compose posts in WordPress can be a benefit to new bloggers 01: Use full page editing
and those using WordPress as the publishing system for their top-rated, busy website. On the face of Use the ‘Distraction Free Writing’ button to take the WordPress post
it, there are few differences with the previous version of WordPress, but these improvements have been editor box full-screen, and enjoy a completely new way of writing
for your blog.
gradual over the past couple of years, and as such are more secure and stable here.
In the Add New Post screen you’ll still find the title box, the option to edit the Permalink (a vital tool in
your SEO strategy) and to add images using the Add Media button. You may also prefer to view all of the
available buttons in the TinyMCE text editor, possible using Toolbar Toggle.
A notable recent addition to WordPress is the Format toolbar, which can be used to create post types
such as standard, images-focused, video posts, galleries and more. You’ll find these work best when
supported by your blog theme.

02: Format your posts

Use post formats to style the published article appropriately – for
instance, a video post might have the clip at the very top of the
page. This helps you keep page styles consistent.

03: Visual Posting

The Visual Editor now gives you a better idea of how a blog post
will appear when published, with accuracy determined by the
active theme.
Above: Customising the look and feel of your blog posts has never been easier

WordPress for Beginners 11

Get to know WordPress

Revised media library

CHANGES TO THE WORDPRESS MEDIA LIBRARY MAKE CHOOSING IMAGES SIMPLER
One key addition to WordPress in recent months is an
improvement to the Media Library. It is now possible to
view a larger-resolution version of an uploaded image and
make the necessary changes with ease.
Improvements in how your images are handled in the
Edit screen (Media>Library>{Select your image}>Edit
Image) meanwhile allow you to make and save edits
without worrying whether or not the changes you make
will be applied. Although it isn’t advisable to edit images on
the server of a busy website, sometimes it just cannot be
avoided (we would advise that image editing usually takes
place on your computer or tablet).
You can also add a new title for the image, set a caption
to be displayed when it is embedded in a post as well as
display alt text when the image doesn’t load. A description
is also useful!
Whether you’re editing images or words you can cycle
between attachments uploaded by using the arrows in the
top-right corner of the Attachment Details view.

Top tip
“The software will display the video preview, Intelligent resizing
rearranges the left and
as it would on the sites it originates” right menus to fit above
and below the editing box,
enabling you to edit your
Easily embed videos blog on smaller
devices.
NOW THERE IS NO NEED TO PREVIEW EMBEDDED VIDEOS
One great way to attract readers – and ensure they
hang around – is to embed clips from video sharing
services in your posts, and a new feature as of
WordPress is a refined method of viewing these
video clips.
In the past, the video was represented by a big grey
block, which provided a useful guide to the size of the
embedded clip. After updating to the latest WordPress,
the software will display the video preview, much
as you would see it on the sites it originates (such as
YouTube or WordPress.tv).
Better still, if you need to preview the video clip in
the editor, you can, which will save time waiting for post
previews to load.
Although editing options are limited, there are some
choices available. If the video you embedded is the
wrong one, you can click the pencil icon in the top left
of the video preview to open the edit screen and input
a different YouTube URL (WordPress requires only the
URL rather than the embed code). Should you want
to remove the video, all you need to do is click the X
button to discard it.

12 WordPress for Beginners

Installing plugins in WordPress
USE THE NEW INSTALLER TOOL TO PREVIEW PLUGINS AND SAVE TIME

Change view
Use the Plugins view menu
to switch between
Featured, Popular and
Favourite plugins

Upload a plugin
If you’ve developed your own
plugin or have one to upload,
use the Upload Plugin button
to start

Search
To find plugins that aren’t
listed here, use the Search
box to search the WordPress
plugins repository to find it

Plugin details
Full details about the
plugin you’re considering
can be viewed by clicking
More Details

Add new
The new Add Plugins
screen summarises the
information you need about
each plugin

Top tip
Plugins made easy When checking new
plugins, always view the
NEW USER INTERFACE TAKES THE PAIN OUT OF PLUGIN INSTALLATION screenshots. If the
Installing plugins can be a stressful experience. After developer believes in the
backing-up your database and files, you then need to
ensure the plugin you’re about to install (if you even find
plugin, they will take
the one you’re looking for) is the best option for your time to upload
blog. You may run it on a test blog first to make sure that
there are no inadvertent side-effects.
screenshots.
A handy update that Automattic, the WordPress
developers, added in 4.0, was a new user interface that will
alleviate some of the stress by presenting available plugins
with a use preview that gives more information than was
previously available to you.
Now when you open the Plugins>Add New screen,
you’re presented with a selection of Featured plugins,
while a second tab displays Popular plugins. Descriptions,
ratings and update information is provided, along with
compatibility details. To find out more, click More Details,
and when you’re happy you can click Install Now to add the
plugin to your blog.
A useful new feature for anyone running multiple blogs
is Favourites, which means if you sign in through your blog,
you can view any plugins that you marked as a favourite,
making it easy to find in future.

WordPress for Beginners 13

Get to know WordPress

Get the language right

ADJUST YOUR LANGUAGE SETTINGS FOR YOUR CONTRIBUTORS
If you run a blog that is targeted at a foreign country, and have a team of bloggers who speak the
language of that region, then it might be a wise strategy to ensure that they can use WordPress
effectively. The best way to do this is to setup the blog software using their preferred language, which is
now an option when you install WordPress onto a new server.
You may already be familiar with the WordPress installation screen, seen as you open your domain
name in your browser after uploading the latest unzipped version of the blog software (see page 84
on advice on how to do this, see page 80-83 for hosting advice). Setting your preferred language is the
first option here. If you’re used to using automated installers in cPanel or similar server admin tools, the
language option will also be found here.
Once the language is set, it cannot be changed without reinstalling, so ensure you have selected the
right option.

“You can now get a full preview in the Live Widgets

Theme Customizer as you make changes”
Previewing Widgets
GET THE BEST PREVIEW OF YOUR THEME YET – WITH WIDGETS!
The latest WordPress updates features a few improvements to the theme customizer, which can be
accessed in Appearance>Customize. Where once this was limited to changing colours and site title, it is
now a far more powerful tool that can demonstrate the impact of any installed widgets on your chosen 01: Customize your blog
blog theme (as long as it is compatible with live widget previews) before you have installed it. Access the theme customizer via Appearance>Customize. Click
Widgets to view available widgets for your blog theme sidebars. You
The advantage of this is clear. Whereupon once you would have added a widget, saved it and then can change them in the Widgets Settings.
quickly refreshed your blog – probably in a new browser tab – to see how it looked (and whether or not
it broke your blog layout!) now you can get a full preview in the Theme Customizer before rolling out the
changes to your readers.
We think that this is one of the most important new developments in WordPress, and once you’ve tried it
out we’re certain you will agree!

02: Adding a widget

Click Add a Widget to display the widgets you can use, and configure
the one you want to use. Observe how it updates as confirm options.
Take time to try the different options.

03: Save your changes

Widgets can be reordered by clicking and dragging and like other
changes will update in the preview. When you’re happy click Save
& Publish.

14 WordPress for Beginners

Adjust your Screen Options
CUSTOMISE YOUR WORDPRESS EXPERIENCE BY CONFIGURING SCREEN OPTIONS
How do you use WordPress? For most, it is a case of sign customise the blogging software’s back-end to see only
Top tip
in, scramble around looking for the link or feature you’re what you need. The Screen Options
looking for on the Dashboard or New Post page, write
your post, and then logout. With the addition of more
For instance, you’ve installed several plugins to your
WordPress blog, and the Dashboard is beginning to look a
button is available across
and more plugins over time, this process can become bit cluttered. All you need to do in this situation is open the several admin screens in
increasingly slow. Screen Options box at the top of the browser window, and WordPress, such as the
The reason for this is simple: you’re not using WordPress disable items that you don’t need to see, don’t use, or don’t
right. Using the Screen Options button, available at the top need to access through the Dashboard. Click the Screen Add New Post, All Posts
of almost every admin screen in the Dashboard, you can Options button when you’re done. and Dashboard.

Open the Options

Click the Screen Options button to open the
concealed window, where you can make any
changes to the layout

The Options are flexible

You can activate as many or as few of the Screen
Options settings as you like

Tick it to activate it
To enable a control, place a tick in the
corresponding box. Removing the tick will hide
the control

TinyMCE editor
Maximise the space you have to compose your
posts by using this option to expand the
TinyMCE editor’s dimensions

Amount of columns
Too many columns? Use the Number of
Columns option to restyle the layout

Click it to close it
Click the Screen Options button to close the
window, and carrying on blogging!

Toggling tools
Even controls with their own tool for closing
can be toggled off and on

Don’t hide, minimise

Rather than disable panels completely, you
might prefer to minimise them, expanding
them only when you need to use them

Tailor menus
These controls are tailored to your WordPress
Dashboard screen

Different screens
Different WordPress admin screens feature a
different set of options

WordPress for Beginners 15

Getting started
18  Create an account
at wordpress.com 38  Introducing
plug-ins 58  Using
permalinks

20 Dashboard
Introducing the
40 plug-ins
Adding new
60 and layout
Customise the screen

22 WordPress links
Learning the
42 Plug-in Editor
Using the
62 posts
Get started with new

24 pages
Introducing
44 to your site
Add new users
64 of a post
Format the text

26 comments
Manage your
46 Tools
Introducing
66 to text
Add special features

28 Understanding
WordPress themes 48 Understanding
General Settings 68 Publish your
blog posts

30 Introducing
Customizer
Theme
50 Using the
Writing Settings 70 Schedule posts for
future publishing

32 Customise your
site with widgets 52 Understanding
Reading Settings
the
72 Introducing
categories

34 website menu
Customise your
54 Settings
Master the Discussion
74 tags
Understanding post

36 Appearance Editor
Understanding the
56 Media Settings
Introducing
76 new media
Uploading

44 MANAGE USERS 18 WORDPRESS.COM 32 WIDGETS

Understand how you can open up Familiarise yourself with your Make use of these handy add-
your blog to other users wordpress.com account ons for your site

16 WordPress for Beginners

 50 CONTROL YOUR POSTS
Learn how to write posts effectively by
using the Writing Settings

64 FORMATTING POSTS
Blogging’s biggest feature is explained in
full, with the key functions highlighted

28 A GUIDE TO THEMES
Make your website look fantastic
by installing a bespoke theme

WordPress for Beginners 17

Getting started

TUTORIALOBJECTIVE
Create a new blog account at
wordpress.com Create an account at
TIME REQUIRED
10 mins wordpress.com
SKILL LEVEL BLOGS ALLOW VIEWERS TO GAIN A CLOSER, MORE INTIMATE LOOK AT ITS CONTENT. IT ALSO TENDS
TO BE A PERFECT OUTLET FOR CREATIVE EXPRESSION AND CONVEYING SOME VITAL PERSONALITY
ONE OF THE greatest strengths of WordPress is its ability choose your own themes, and customise the site perfectly to
to be installed and hosted in your own webspace at your match your idea. And if you want that greater control in the
own domain, giving you complete control over how the site future, you can easily migrate the site to your own domain
functions. Yet managing a site completely is a big step for later on down the road. It’s the perfect way for beginners – or
beginners. At wordpress.com you can set up a new blog, with the less technically minded – to be able to start blogging
a name of your choice, and have the hosting and management in a matter of mere minutes, and getting set up is very
taken care of for you, all for free. You don’t lose any of the straightforward too. With this tutorial, we’ll show you exactly
functionality of the WordPress blogging system, you can still how to go about creating your own blog.

18 WordPress for Beginners

01 Go to the site 02 Email address 03 Choose a username
Although the main WordPress site is located at wordpress. First add an email address to the E-mail Address box, make The next step is to choose a Username. By default,
org, the site you need to visit to set up your own hosted sure that this is a valid and current account. If you do not WordPress will add the blog address as the username and
blog is at wordpress.com. Here you can also browse with have an email account, or you would like to set up a new tell you if it’s actually available. This name will be unique to
ease some of the hundreds of thousands of other blogs account, do this immediately. Click the Subscribe to our you so if the selected username is not available the easy
hosted here. Click the Get Started button to start setting up blog check box to get news and click the Sign Up button option is to add a few numbers to the end of the name,
your blog. to continue. ie the current year .

04 Add a password 05 Choose a blog name 06 Activate account

Passwords are really crucial for ensuring no one else can The final step in creating a WordPress.com account is To complete the registration process an email will be sent
access an account. Add a password to the Password to choose a Blog Address. This is combined with the to the email address used in the previous step. Head to your
box and the visual indicator will tell you how strong the .wordpress.com extension to complete the address. This is email, login and locate the email from WordPress.com. Click
password is. Ideally, a password should at least be strong. the name that visitors will type into a web browser to get to the sign up link in the email to gain access to the Dashboard.
When this is achieved, enter the password again in the your website. Make sure that the address is descriptive and Before activating the new account there is the option to add
Confirm box. relevant. If an address already exists try again. a new email address.

07 Default theme 08 Log in 09 WordPress Dashboard

When you first finish going through the sign-up screens, you There are options for getting access to a wordpress.com The sign up process is now complete and users can start
will be greeted with a number of options to name your blog, account. Head to http://wordpress.com and in the top- adding posts to the new WordPress.com site. Before using
give it a tag line and to choose a theme for your blog. You left corner there is a Username and Password box along the newly created blog you need to first of all log out.
can change this at any time, but for no, just select the one with the Log In button. Add details and press Log In. Or, Then go to My Account in the top-left corner and select
that takes your fancy. There’s plenty of free themes to chose go direct to the login screen (using your details) ie http:// Log Out. This will close the blog and take you back to the
from but even more if you’re willing to pay. imaginebooks97.wordpress.com/wp-admin/ wordpress.com site.

WordPress for Beginners 19

Getting started

Introducing the dashboard

UNDERSTAND THE KEY PARTS OF THE WORDPRESS INTERFACE
THINK OF THE WordPress dashboard as the brain, content on the right. For example, if you select submenu beneath it, which appears when you click
heart and guts of the site. When someone visits Posts, the dashboard displays a list of all your past the main menu item. Beyond controlling your site’s
your WordPress site, they see the outside – your and current posts. Each main menu also has a appearance, content and features, the dashboard
content and design. The dashboard is the master provides you with an overview of everything that’s
control panel where you configure every facet of
your site, including your theme, which plug-ins it “Think of the WordPress going on with your site. This hub displays, among
other things, a summary of the latest comments,
uses, and the pages that it is made up of. As you
select the main WordPress menu items on the left,
dashboard as the brain, WordPress news, links to your site, and your recent
drafts . Getting familiar with the dashboard will
your dashboard changes to display appropriate heart and guts of the site” make life easier.

This drop-down menu here takes

View, edit, delete and add you to the most common admin
new posts here, or search pages with a single click
through them by keyword
Screen Options opens a form
that controls the content on each
Upload and manage photos, dashboard page
music, videos and other media
that you can display in your posts

QuickPress gives you an easy way

Add, edit, delete and categorise to add a new post without using
links to be used in lists on your the Posts menu
finished site
The Tools menu gives you options
for importing and exporting posts
All of your site’s pages are listed and comments
here. Add, edit or delete at will

Manage and activate themes.

Enable widgets and control
page layout
Click here to see all user
comments. Search, edit and
All of the controls for your site’s
delete comments too
basic behaviour and settings are
under this menu

Give your site more functionality

with plug-ins, then find, install and
Control user accounts and user access
manage them
to your site and manage user roles

CUSTOMISE YOUR DASHBOARD

Move modules around on the main dashboard screen by
clicking and dragging on their title bars
The dashboard gives you complete control like on the dashboard. Minimise modules so
over your site, and WordPress even provides that only their title bars are visible by clicking
you with control over your dashboard. You can on the arrow on the right of the title bar. To
move modules around the screen so that the make them visible again, click on the same
ones you use the most are near the top of the arrow to the right of the title bar. Click on the
page. Modules that you still want visible but Screen Options tab to open a form. Screen
don’t use very often can be minimised to just Options enables you to control which modules
their title bars. You can control which modules appear on the dashboard. Click or unclick the
show up and how many columns of modules checkboxes in the ‘Show on screen’ section of
you want on the dashboard with the Screen Screen Options. Screen Options also lets you
Options. To move modules around, click and specify how many columns you want your
drag on its title bar and move it wherever you dashboard interface to display.

20 WordPress for Beginners

MOST USEFUL DASHBOARD COMPONENTS
Here are the most common dashboard elements you’ll use 90% of the time
2 Settings: The
Settings dashboard
has a huge number
of options for controlling
everything from the
name of your site, size of
thumbnail images and
whether search engines
can find your site. General
settings control the site
name, tagline and format
of dates. Writing settings
manage post settings
including whether you
can create a new post by
emailing your site. Reading
manages the appearance
and behaviour of your posts.
More settings options are
under Discussion, Media,

1 Posts: The Posts dashboard is probably the most Privacy and Permalinks.

3
important, giving you the tools to add, edit and delete
existing posts on your site. When you click on Posts Appearance:
you see a listing of current posts. You can search for existing Use the Appearance
posts by keyword, or filter entries by date and category. dashboard to set
The Categories menu option enables you to manage and and manage new themes,
add new hierarchical categories for your posts. Tags can be widgets, site menus, the
managed with the Post Tags link. background and your site
header. Under Themes you

“The Posts dashboard is can search for and install

new themes with the
probably the most Install Themes tab. Widgets
settings control which
important, giving you the widgets appear and where
tools to add, edit and delete they appear. Programmers
also use the Editor to
existing posts” customise the PHP and CSS
code of a theme.

4 Comments: The Comments dashboard doesn’t

have a submenu. Click the Comments link to view

5
any readers’ opinions currently posted to the site.
From this dashboard you can view all the comments, Plug-ins: WordPress has some great functionality when first installed, but
search through them and sort them by date or author. WordPress plug-ins let you extend your site to do even more. The Plugins
Each comment listing displays a link to the post where the dashboard lets you see all your current plug-ins and activate, edit or delete
comment was added under the In Response To column. If them. The Add New link lets you search for plug-ins by Term, Author or Tag. After
you moderate your comments, click Pending to view the locating a plug-in, install it from within your WordPress site by clicking Install Now.
unapproved comments and approve or delete them. Once installed, return to the Plugins link to locate and activate it.

WordPress for Beginners 21

Getting started

Learning WordPress links

EXPAND YOUR BLOG USING A RANGE OF LINKING OPTIONS
ADDING LINKS TO your blog’s layout is a great way This is also helpful if you want to link to affiliate or is a simple process that can help expand the reach
of creating a network of related sites or bringing friends’ websites to help aggregate their URL and of your work and branch out into something bigger.
multiple accounts together under one banner URL. boost exposure. Adding external links to your blog Don’t worry if you’re completely new to WordPress
For example, if you are running a blog dedicated or still working out the basics, there really isn’t
to your own cake recipes, you might want to link
to other cookery sites to give your readership an
“Adding external links to your anything to adding links, but there are a few helpful
tips on these pages that will let you get more out of
expanded overview of the topic you write about. blog is a simple process” the section.

Visit link
Name Click this button to check URLs work,
This field is where you type then hit Update Link to save it
the text that will mask the
raw URL

Description
This is the elaborative text that
pops up when hovering the
cursor over links

Web address
Place your raw URL in this field, but
remember to always start with http:// Categories
Check one of these boxes to
organise your links on the
WordPress dashboard

CREATE LINK ICONS

Make your links more presentable through images
There are times when using a text link head over to the Add Links section on the
simply won’t cut it. If you feel your text links WordPress dashboard.
are looking cluttered, or that images might From here enter your link URL into the
look better instead of text, the free version required field, then paste the image URL
of WordPress lets you mask your URLs with you just copied into the Image Address field
visuals instead. However, you can’t use further down the page. Before you choose
any image pulled off your computer’s hard an image, it’s also advised to double check
drive. The image must first be hosted online that the dimensions won’t knock your page
using a service such as Photobucket, or you layout out of sync. Click the Update button
can use URLs of existing images online, but to save, then the next time you visit your
please do be mindful of copyright issues blog, the image you selected will exist as a
when doing the latter. Once you have linked item on your page. Simply click to be
an image URL you’re happy with, simply taken to the external site.

22 WordPress for Beginners

KEY FEATURES OF
THE LINKS SECTION
2 Positioning:
If you take a close
look at the image,
you will see that the two
default URLs from the All
Learn how to spread your network Links section – namely,
with homepage links WordPress.com and
WordPress.org – appear
on the bottom-right corner
of your blog as standard.
When links are changed
on the dashboard, they are
automatically changed on
the Links section of your
blog. However, you will
need to use a custom blog
layout to change where
they appear on the page.

1 Customisation: Using the All Links tab under

the Links section is a great way of getting an overview
of all the external links on your top feed. Bear in
mind that the links added here will all appear next to your
3 Creation: The
Add New Link section
may sound pretty
obvious – as it is indeed the
place where you need to
default – and therefore main – blog reel. From All Links go to add links – but it can
URLs can be added, edited and ordered by your personal do much more than first
preference. You can add as many as you like, or remove appears. If you simply add a
them altogether if you prefer. URL in the Web Address bar
without naming your link,
the raw address will appear
“From the All Links tab, URLs somewhat clumsily on your
can be added, edited and homepage. By adding a
snappy title in the Name
ordered by your preference. bar, however, you can

You can add as many as make the URL appear

more presentable.
you like, or remove
them altogether”

4 Image links: Scrolling down the Add New Link

section, you will find an image field. By hosting an
image online, then entering the image location URL
into this box, you can place images on your page where
5 Link categories: If you find yourself warming to the idea of hosting
several links on your page – or pages plural if your site begins to expand rapidly
links would usually sit. So, for example, if you wanted to – you can keep links tidy on your WordPress dashboard by labelling them with
link to Google on your blog you could copy the URL of the specific categories. While this may not appeal to those who only have dealings with a
Google logo and place that on your page as a linked icon handful of links, those with a lot of connected URLs or a large network of pages can
instead of text or a raw URL. get great use out of this function.

WordPress for Beginners 23

Getting started

Introducing pages
LEARN HOW TO BEEF UP YOUR BLOG WITH A COLLECTION OF PAGES

WHEN USING WORDPRESS, new users often added will create a new tab on your main content and more. In terms of traffic collation, all users
mistake pages and posts as the same thing. The bar, and as such, many WordPress users employ this clicking your pages will still be added to
distinction is that posts are timed and dated entries feature to create contact sections, photo galleries your overall blog hit counter because, while they
into your main blog reel, while pages are separate, appear separate from your main feed, they are
and most importantly, static sections. They can
almost be compared to sticky posts on chat forums
“Pages are separate, static still counted as a part of the site. The distinction
between pages and posts is also crucial to
in that while your main blog ticks over with each sections… Each new page understanding how the latter affects your page
new entry you publish, pages will always remain
intact in their detached spaces. Each new page will create a new tab” layout when you are publishing various bits of
information to your website.

Bulk Actions
You can select multiple pages and
delete or edit them in a batch for an
efficient workflow Stats
Clicking these icons gives you detailed
stat graphs for user traffic figures

Speech bubble
When clicked, the speech bubble icon
shows all comments made on a page

All/Published
Both active and unpublished pages
can be seen here, or they can be
filtered for separation
Filter
Using the filter drop-down, you
can view pages created across a
specific date range

CREATE THE PERFECT PAGE

Spruce up your blog with superb pages
The number one rule of creating pages page will look like before committing to it.
is to remember that there are, in fact, If the layout isn’t to your liking, you will find
almost no rules at all. Pages can be used template options on the right of the Add
to create separate sections of your blog in New page. Here you can change the page
uniform style, or they can be completely layout further by using templates as given
independent and drastically different in by your page layout provider, or any that
style and content. In this respect, they are you have created yourself in the dashboard.
perfectly suited to whatever purpose you If you’re still unsure of how a page looks,
need. From the All Pages menu you will remember you can get a second opinion by
find the option to add new pages. Once using the feedback option below the body
in the Creation section, simply fill out the text field. Once satisfied, click the Update
title and body text to fit your needs then button to set the page live on your tab bar
click Preview to get a glimpse of what your for all to see and give their comments.

24 WordPress for Beginners

PAGES EXPLAINED
Learn why pages are vital to
your blog’s layout

1 An overview: The top entry in the Pages section

of your dashboard is entitled All Pages, and this gives
2 Adding pages: Adding new pages is similar to adding blog posts, but you must
remember that these will not be published on your blog reel, but on the tab bar instead
as new sections of your site. Pages can be decorated with text, images, URLs, embedded
elements such as video or widgets and more. Depending on your theme and whether you have
you an overview of every page currently active on a free or paid-for layout, you can run riot with the design of each page.
your blog site. The titles of each page on this list will be

3
positioned on your blog’s tab bar. The positioning changes See the effect: As you
depending on what blog layout you are currently using, so can see here, we have added
stay mindful of how long page titles are to avoid a clumsy or an About Me page to this
cluttered tab bar. particular blog. After creating the
page, the About Me has been
“Adding new pages is added to the tab bar at the top
as a new section, while Home
similar to adding blog remains the location of the blog’s
posts, but remember these main content feed. There are
several pages attached to the blog
will not be published in displayed here and as you can
your blog reel, but on the see, the tab bar is getting rather
cluttered. Time to trim those titles!
tab bar instead”

4 Second opinion: If you run a collaborative blog,

you can showcase new pages, complete with body
text, images and layouts to colleagues or business

5 Tracking popularity: Although we mentioned that your overall hit

partners before committing them to your site. When
creating a new page, you will find a Request Feedback icon counter will collate traffic from your main feed and separate pages in one place,
below the body text entry field. By clicking this, a drop- you can track the performance of individual pages by visiting the All Pages
down will appear that lets you enter the email addresses section of the Pages dashboard menu. You will see a graph icon next to each page
of your contacts and you can then send the page to them listed here. Simply click the icon to see detailed information on the page’s traffic over
automatically for approval. a specific stretch of time, or since the blog started.

WordPress for Beginners 25

Getting started

Manage your comments

MODERATE YOUR BLOG’S COMMENTS WITH EASE
WHEN YOU SET up your first blog, every post you says something you don’t like, or if you are simply your feed. To ensure that all comments are made
publish comes with comment features. This means spammed – which can often happen the more by humans and not spam bots, WordPress has the
any registered WordPress user or guest can comment popular your blog becomes – then you can delete the facility to auto-detect false posts and delete them
on every blog entry and page you create. As blog comment in question to keep your page clean.   automatically. The process is simple and helps you
creator, however, the level of privacy attached to However, comments are also a neat way of build a thriving community of users who are engaged
your blog is entirely yours to decide, as well as gauging how popular your blog is becoming. The with your site via feedback and interaction – as much
moderation of comments submitted. So if someone more comments made, the more people are visiting with each other as users as with the host.

APPROVE COMMENTS
Take control of your blog chatter
Part of keeping a blog is speaking to a visible. You also have the option to alter
cross-section of the online community. If comments before approving, which is
you succeed in making your feed a success, useful when toning down expletives, fixing
chances are you will start to see a lot of broken links or deleting spam messages
regular commentators speaking directly in altogether. While moderation is crucial to
response to your posts – and if you’re lucky the upkeep of comments, bear in mind that
– with each other. Fostering this level of altering what users say too much will likely
participation will help keep visitors returning result in disapproval from your community.
to your blog, and will create a sense of Try not to be too heavy-handed and only
community among regulars. alter text where absolutely necessary. From
However, like all sites that get popular, the the comment section of your dashboard,
more people comment, the more moderation simply read a comment, hover over it and hit
becomes necessary. As blog owner, you Approve or Trash. Alternatively you can press
must approve all posts before they become Edit to change it first.

THE KEY FEATURES

OF COMMENTS
Make effective use of your comment pool

1 The overview: By clicking the Comments section

of the WordPress back end you can see every comment

2
made on your blog since you launched it. They are
always ordered by date unless otherwise specified in the filter Bulk Actions: If your blog becomes really popular and you start to be inundated with
drop-downs, and you will be able to see the full comment comments – both genuine, adverts and spam alike – you will undoubtedly find it difficult
rather than an excerpt like some blog back ends. This means to manage them all manually one by one. From the top Comments menu, it is possible
you can see everything you need at a glance instead of sifting to look over each comment to discern if it is in fact spam, check the box next to every piece of
through multiple menus. spam you find, then delete them all in one action.

26 WordPress for Beginners

 Bulk Actions
Apply large spam labels or delete
multiple comments in one swoop In Response To
with this tool See what comments relate to using
these links and view comments on the
page easily

Search bar
If you have many comments,
find posts on several subjects at
speed using the search bar

Author column
See who is commentating at a
glance, and click through to their
own WordPress blogs

Approved tab
Comments won’t appear until you
approve them, giving you full content
moderation powers

4 On the blog: When you view

comments on your blog, you will see
the respondent’s user name. You can
click this to view their blog and profile. You
can also see the date and time comments
were created, and even edit comments if
you feel inappropriate language has been
used or for various other reasons. You can
also check the follow-up notification box
to receive emails whenever replies to your
comment are made by other users.

3 Start chatting: If you

want to try and build repeat
visits to your blog, as well
as a thriving visitor community,
you should consider replying to

5
comments that catch your eye.
To do so, simply hit the reply link Multiformat comments: Below the comment entry
below the comment located box of each post you will find multiple log-in options. Users can
either on your blog itself or on leave comments as unregistered guests, although some layouts
your dashboard. To reply, simply enable you to remove this function. Visitors will also be able to log-in
type your response in the text and comment using WordPress, Twitter and Facebook credentials.
entry field as you would a blog Other users can choose to be notified of replies by email if they wish.
post. Hit the Reply button to Keeping these methods varied will encourage regular comments,
publish it. rather than reducing visitors’ options.

WordPress for Beginners 27

Getting started

Understanding themes
IT’S EASY TO MAKE YOUR WORDPRESS PAGES LOOK GREAT

THEMES ARE WHAT makes WordPress so very sites, while others are strictly minimalist and aimed at different ones at will. This means you can have
appealing. They don’t add faculties as such, but letting the words do the talking. Built into WordPress different themes active on your blog for different
without them every single WordPress-powered is the ability to install multiple themes and to activate occasions, with the only administration required to
website would look the same. Thankfully, the theme swap between them being the click of a button.
engine means there’s a range of dramatically different “Built into WordPress is the Browsing the directory of open source themes, of
visual styles to be easily and simply installed, without
any technical knowledge necessary. ability to install multiple which there are thousands freely available (see page
142), is also made simple, as is installation of a new
Different themes can bring in additional
functionality as well as different looks; some are
themes and to activate theme from this repository, without any need to set
up an account, download or upload files manually, or
designed to work well as photo galleries or video different ones at will” otherwise go beyond what you’re familiar with.

Current theme
The currently activated theme is
displayed prominently at the top-left of Install themes
the themes screen If you’d like to install a new theme,
simply click on the Activate button
when hovering over the theme

Theme details
The theme screen displays an author,
description, tags and a thumbnail
image of the theme in action

Activate themes
All the currently installed themes are
displayed in a grid. You can preview,
activate and delete themes

BROWSE THOUSANDS OF THEMES

You don’t even need to leave WordPress to install a new look
Themes are responsible for the structure and term or check one or more tickboxes to find
look of your website, and can immediately themes that match your criteria.
give it a unique appearance. WordPress has a Once you’ve found a theme that looks
fantastic library of free themes distributed under interesting, you can preview it by clicking on
a GPL license, meaning you are free to edit the the preview button. This will open a large pop-
themes to your heart’s content. up window with a life-size preview of what the
Other themes are available commercially, theme looks like with dummy content.
and the web is awash with these, but one of If you’re happy with your choice, click on the
the primary benefits of the WordPress-hosted Install button to have WordPress automatically
library is that you can browse it directly from download all the necessary files, unpack and
within your own WordPress admin area. install the theme. You can then edit and activate
Click on the Install Themes tab at the top of the theme as you see fit. You can install as many
the Themes screen, then either enter a search themes as you like, but only one can be active.

28 WordPress for Beginners

THE TOP THEME
FUNCTIONS
WordPress is a powerful Content
Management System

2 Browse themes: You can browse the online theme repository directly from the
Themes admin area. Click on the Install Themes tab then choose a search term to view
matching options or click on Filter to view the options to your specific needs. There are
thousands of themes freely available within the directory, so you’re quite likely to find one you

1 View installed themes: When you first enter like the look of. On a .com account, simply scroll through the available themes.

3
the Themes screen you will be presented with a grid
of themes. On a .org account it will be your installed Peruse the list:
themes, on a .com account it will be a list of themes available Once you’ve got
to you – you won’t have to ‘install’ a theme on a .com account. a set of themes to
Just click activate. On a .org account, you will have to install consider, you can view all
the theme first, then activate it from your list of themes. Your the important information
active theme will show in the top-left of the list. from the main Install
Themes screen. You’ll get
a theme thumbnail which
“You can browse the approximates the look of
online theme repository the theme when installed,
a name, a description and
directly from the the option to view more
details, preview or install the
themes admin area” theme. Installing doesn’t
activate the theme, so you
can experiment with a
degree of impunity.

4 Preview the theme: Once you’ve found a

5
theme you like the look of, get in closer by clicking on
the Preview option. This will give a full-size preview of Install and go: When you’re happy with your choice of theme, simply click the
what the theme would look like. A .com account will view a Install option beneath the theme name to import it into WordPress. The installer will
live preview of the current blog content. When you’re done automatically download the theme files from the web, directly to your blog. The files will
previewing, you can click the close button at the top-left be unpacked automatically, copied into the right directory and registered with WordPress. This
corner of the window to return to the search results. all happens without you having to take any manual steps, meaning it is a joy to use.

WordPress for Beginners 29

Getting started

Introducing Theme Customizer

EVERYTHING YOU NEED TO KNOW ABOUT VERSION 3.4’S INTUITIVE NEW PAGE EDITOR

RELEASED AS PART of WordPress 3.4, the Theme feature enables its users to view new themes in for the whole world to see. The changes you can
Customizer feature allows you to test themes a kind of ‘test mode’ before publishing them – it apply include colours, backgrounds and custom
before applying them to the entire blog site. As also eases the process of selecting backgrounds image headers. The new feature is a welcome
regular WordPress users will know, a theme is a and images. Through the Theme Customizer you addition to the package as WordPress hasn’t
third-party free or paid-for style template that can play around with various looks and settings historically handled rich media and other digital
can be laid over the WordPress site, giving the for your current theme or one you are thinking of assets in an intuitive way, so this new feature goes
text and layout a uniformed appearance. This new switching to without publishing those changes some way to addressing the balance.

Save & Publish

Once you are
happy with all of
the changes you Current theme
have made, click on Information about the current theme
the ‘Save & Publish’ can be viewed by clicking the link next
button to make to the ‘You are previewing’ text at the
them live top of the left column

Customise
All of the features you
can customise in the
current theme are
listed in the column
on the left-hand side
of the screen Preview
All changes you make will
instantly be applied to the
preview site on the right-
Full-screen hand side of the screen
You can collapse
the customisable
features list and view
the preview of your
site in full-screen by
clicking this icon

ACCESSING THE THEME CUSTOMIZER PANEL

How to access a great feature of 3.9
In WordPress 3.3 and earlier, if you Click on this and the site will be
navigated to the Appearance-Themes presented in preview form in the main
menu in your admin panel you would be window, but there will also be an admin
presented with your currently-installed panel to the left of the screen that
themes with the ability to preview any allows you to cycle through various
of your non-active installed themes traits of your site and experiment
by clicking on the ‘Preview’ link that without it being live. We have gone into
appears when you hover over the theme more detail on using this aspect
example image. Here you will also of Theme Customizer in our tutorial in
come across the ‘Customize’ link. This is the Customisation section, over on
where you will be able to make all the page 134.
changed you like to the appearance of Don’t worry if you’re using .com, it
your site. A .org site will be given more is just as simple to use, it is just on the
options than a .com site, and there right hand side of the screen instead of
might be a charge on certain aspects of the left. There are a few less options,
your customisation, which you will be but you can still customise the layout in
prompted with if you have selected one numerous ways until you are happy with
of these options. the way it looks.

30 WordPress for Beginners

WHAT THEME
CUSTOMIZER DOES
Here are the five main areas you can
customise with in WordPress 3.9

2 Play around with colours: Your readers probably won’t care if your title and
tagline text is black or blue, but what they will care about is how easy the text is to read
against the background, so the ‘Colors’ section gives you the opportunity to experiment
with the colours of your text and the background to ensure that they compliment each other
well. By clicking on an option, you’ll bring up a colour wheel from which to choose your shade
and tone. Once again, the changes will be reflected in the preview site on the same screen.

1 Set Title & Tagline: The title and tagline of your

blog site are vitally important – after all, they alone could
determine whether visitors continue to read. This feature
allows you to play around and input new text for your title and 3 Change your
header image: The
image that your visitors see
when they first log on to your site
tagline and see how it reads and sits on the preview site on the
same page. The advantage of this is that you can see how your is vitally important as, like your
new title and tagline looks before deciding on whether to go title and tagline text, it is what
ahead with the changes and actually publish them. will capture their imagination and
draw them into your domain.
You now have freedom to import
“The theme customizer your own image for this purpose,
but be warned that it has to fit
enables WordPress users to the basic dimensions of 1000 x
view new themes in a kind 288 pixels to be accepted by the
theme. To change the image,
of ‘test mode’ before simple select the ‘Upload New’
tab and then either drag your new
publishing them” image into the space provided or
click on the ‘select a file’ link.

4 Import a background image: If you would

like to import an image to act as the background,
perhaps to provide your site with more depth and

5
make it more aesthetically-pleasing to the visitors then
you can with ease. Simply click on the arrow next to ‘No Determine your front page: The final feature of the Theme Customizer is
image’ and then either drag your own image into the space equally as important as the others in determining the amount of traffic you get. From
provided or click on the ‘select a file’ link. Again, the changes this section you can set whether the front page of your site will carry your latest posts or
will be instantaneous in the preview site so you can easily remain as a static page. Of course, this largely depends on whether your posts are interesting
gauge if the background does indeed compliment the site enough to entice the readers in or you want to retain an element of mystique and encourage
as a whole or whether to skip this feature entirely. them to go a step further to access your posts.

WordPress for Beginners 31

Getting started

Customise your site with widgets

HOW TO ADD, CONFIGURE AND CHANGE WIDGETS ON YOUR SITE

WIDGETS ARE A great way to bring in extra bits of navigation. Different widgets might offer a Twitter and visitors will help make your blog unique and
functionality to your site, and as with pretty much feed, a calendar for displaying posts by date, a tag personalised – and can help draw attention to specific
everything else in WordPress, they’re surprisingly easy cloud or an external RSS feed. Different widgets can be parts of your blog. It can give your readers extra
to manage. So, what exactly is a widget? added to widget areas, which are set up by the theme information relevant to your subject to keep them on
That’s quite a difficult question to answer. A author, and one widget can appear many times on a your page that little bit longer, and with the ability to
widget is a little object that sits inside a special area single page, or indeed in a single widget area. link in functionality with social networking, make your
of your theme design and has a dedicated purpose, Just like with the primary navigation of your site a handy hub of web-based activity. We show you
for example, adds some functionality, information or site, setting up widgets to suit your needs, content the basics of these key WordPress features.

MAKE IT YOUR OWN

Every widget gives you the chance to configure it to suit
Widgets are great because they enable you configure the title but also the display style,
to not only choose where and how they’re giving you the option to show the number of
displayed, but also control the content they posts in each category and any hierarchy you’ve
output. Every widget has a set of configurable set up for your categories.
options ranging from the simple to the complex. To really make the widget area your own, add
Search, for example, has only one option a Text or RSS widget. The former enables you
available to configure – the label that appears to insert HTML, plain text or a combination of
above the search box. This means you can the two so that you can add Twitter integration
change it to read Find instead of Search, or What code, a plain bit of text giving information about
are you looking for, or Let me see… – really the your site or a weather feed for example.
choice is yours. The latter means you can pull articles into
A more complicated example is the your site from another site with RSS syndication
Categories widget which enables you to – added value with minimum effort.

KEY FEATURES
The widgets area of the WordPress
admin is extremely powerful
2 Configure it: More or
less every widget has a set of
configurable options which
enable you to customise the way it
behaves and ultimately how it will
appear on your site. Once you’ve
added a widget to the widget area
of your choice, click on the disclosure
arrow to the right of the name to reveal
these settings. Some, such as Search,
are as simple as providing a label for
the header above the search box.
Others, including RSS, require more
information to operate successfully.

3 Custom widgets: WordPress comes with a

1
collection of 16 pre-built widgets offering everything
Drag to arrange: Widgets can be from category listings to displays of your links. There
arranged by dragging them around the is also a 17th option available called Text, which enables
screen. New widgets can be added to you to paste in any code or text of your choice. Using the
nominated widget areas (which will vary according Text widget makes it easy to add Facebook, Twitter or Flickr
to the theme you’ve got activated), reordered embed code, bringing your social network feeds right into
within that widget area or removed from the area your blog page. Simply paste the code the site in question
altogether. Simply click, drag and release to arrange provides into the text box, and save your changes. You can
widgets as you see fit. put any embed code you like in for a creative site.

32 WordPress for Beginners

 Available widgets
The available widgets area is a bin full
of widgets just waiting to be called
into action

Themed widgets
Different themes support different
widget areas. Every theme will allow at
least one widget area

Deactivated widgets
Deactivated widgets have been pulled out of a
widget area, but retain their settings as usual and are
displayed at the bottom of the list - just scroll down!

Reorder widgets
Widgets can be re-ordered
to suit your needs – just
click and drag

“Different themes enable you to

add widgets to different areas of
the design. Most will offer at least
one widget area – often called the
primary widget area”

4 Remove widgets and save settings: If you want to

remove a widget you can simply drag it out of the widget area in
question. If you drag it out of an area and into the Available Widgets
section of the Widgets screen, it will be removed and all its settings lost. If
5 Different themes, different widget areas: As with custom
menus, different themes enable you to add widgets to different areas of
the design. Most will offer at least one sidebar widget area – often called
the primary widget area. This is the part of the page that usually contains the
you’d rather keep any settings you’d set up for later use, drag it to the Inactive list of categories, recent comments and a search box. Just because that’s the
Widgets section of the screen instead. WordPress will remove the widget from norm, it doesn’t mean you have to have your site set up that way though – get
your widget area, but keep all the settings just in case. creative with how you organise your widgets.

WordPress for Beginners 33

Getting started

Customise your website menu

NAVIGATION IS ONE OF THE MOST IMPORTANT THINGS ON YOUR SITE

PLANNING EFFECTIVE NAVIGATION IS a crucial The menu editor enables you to choose what will appear beneath others items. This often means a
part of making your content accessible to visitors to show within the menu, where in the menu each item drop-down menu will appear when you hover over the
your website, so it’s no surprise to find that WordPress should appear, and whether specific elements should parent item, but is entirely theme-dependant, so might
makes it easy to create your own custom menus for manifest itself in different ways according to the theme
finding your way around. Menus enable you to link “It’s no surprise to find that you currently have activated.
between pages on your site or even external URLs,
meaning not only can your make sure your own site is WordPress makes it easy to Some themes enable you to have more than one
custom menu, so you can control a side menu as well as
clearly laid out and not overwhelming (especially if you
have a lot of pages), but you can incorporate affiliated
create your own custom the main menu, while others will limit you to just one.
The process for assigning menus is the same regardless
pages or just other things your readers might like. menus for navigation” of this, and it’s all very straightforward to use.

Custom menu
Choose the Custom menu to activate
your options. If the theme supports
more than one custom menu, you’ll see
multiple panels here
Arrow
Open the disclosure arrow to the right
of each menu item to make further
adjustments to the text that will appear
in your design

Drag and click

Menu items can be dragged around,
Pages and categories nested within each other and reordered
Pages and categories both have as you see fit. Just click and drag on an
multiple tabs, enabling you to easily item to move it
find the item you’d like to insert in
your menu

USE THE CUSTOM OPTIONS

Custom menus are simple to administer, but powerful to use
Getting the navigation for your website right is Links enable you to create specific items in
crucial to the success of your blog, so it’s worth the menu that don’t lead to a page or category
spending some time experimenting with the on your site. They can be used either to take
different options in the Custom Menus window. your visitor off-site to a different website
There are three primary types of item you can elsewhere on the web, or to a specific non-
add to your menu – Pages, Categories and Links. content-managed page on your blog. A good
Pages are drawn from those that you create in example of this might be a tag page such as
your blog. If you tick the Automatically add new www.yourwebsite.com/?tag=win.
top-level pages checkbox, new pages added Once you’ve got your menu items in place,
to your blog will appear automatically when you can drag them around to reorder them, nest
added. Categories work in much the same way them so that they appear beneath other menu
as pages, allowing you to insert one or many of items or delete them from the menu – all by
the categories you’ve added to your blog. using your mouse in a very intuitive manner.

34 WordPress for Beginners

KEY FEATURES OF A
CUSTOM MENU
2 Add categories: The menu editor
enables you to add as many or as few
categories to your menu as you’d like,
meaning you can leave it at just one or two or
create an exhaustive set of menu options for
Creating a custom menu is an essential your visitors. Using the Categories area on the
part of making a website yours left-hand side of the screen, you can select
between Most Used, View All or Search to
locate the categories you’d like to add to your
custom menu. Now, tick the checkbox(es)
next to the categories in question and finally
click the Add to Menu button at the bottom
of the Categories area. The categories will
appear in your custom menu ready for
further tweaks and changes should you
wish to make any.

3 Many choices:
As well as categories,
you can add
individual pages you’ve
created to your menu

1
and arbitrary links. Adding
Create a custom menu: Creating a custom pages to your menu works
menu is simple enough, but might be a little confusing in exactly the same way as
the first time you do it. Start off by adding a name for adding categories, but links
your custom menu and clicking the Save Menu button. If are a little different. You
you’d like any additional pages you subsequently add to need to paste the address
your website to appear in the menu automatically, tick the of the page you’d like to link
‘Automatically add new top-level pages’ checkbox. Once to directly into the URL box.
you’ve saved your menu, you can start adding items to it. Enter the text you’d like to
appear as the menu item
in the Label box and click
“The menu editor enables the Add to Menu button
you to add as many or as to insert the link into your
menu. This way if you want
few categories to your menu to link to an affiliated page,
another of your own or
as you’d like” just something you think is
relevant, it can appear.

4 How it looks: The appearance of your menu will

5
be different according to your theme, but if you’ve
got the default theme activated, your menu will Customise your items: Once your menu has some items within it, open the
appear as a horizontal list of items, with any nested elements disclosure arrow next to each to add some further customised options. You can edit the
appearing as a drop-down menu when you hover over the label (the text that appears in the menu) and the title text. The title appears when you
parent item. The default theme, supports only one menu – hover over a menu item and should be used to help describe where the link will take the visitor
the primary navigation at the top of the page. if he or she clicks on that item.

WordPress for Beginners 35

Getting started

Using the Appearance Editor

IF YOU’RE BRAVE, YOU CAN EDIT THE CODE THAT MAKES WORDPRESS
TICK DIRECTLY FROM WITHIN THE ADMIN INTERFACE
ONE OF THE strengths of WordPress is that it has a make it work so you can make changes and further That said, if you’ve dabbled with HTML and CSS
very low technical knowledge entry point – you really customise your website should you wish. before, it’s really handy to be able to dive in and edit
don’t need to understand the difference between You do need to exercise some caution when using the files that make up a theme without having to
HTML and CSS, PHP and JavaScript, or have the faintest this functionality – it is very easy to mess the system up dig out your FTP client, navigate through the folder
idea what a favicon is to use it. But once you’re a little and although you won’t break WordPress itself, you’ve structure that underpins WordPress or open a web
more confident, or if you’re a born tinkerer, WordPress got a good chance of rendering your theme unusable, editor. Everything can be done through a text editor-
does give you full access to the nuts and bolts that so proceed with caution! like system found under Appearance>Editor.

EDIT YOUR THEME

A lot of theme customisation is achievable through the
admin area, but sometimes it’s just not enough
When you really need to change the structural There is more to it than this, however.
layout of your blog, you’ve got a couple choices. For example, if you’re editing a core file that
You can either find a new theme that suits your contains PHP logic, WordPress provides an API
needs or you can hack your existing theme to documentation feature that enables you to look
match your requirements. up the usage notes for each function. If you’re
If you’ve decided on the latter, WordPress unsure what PHP is, you should think twice
offers a useful set of tools to help you make about editing a theme using the editor!
changes. The appearance editor functionality Using a combination of the Documentation
looks very simple at first glance, and in many Lookup and some basic PHP skills, you can
ways it is – a simple text editor that enables effectively make changes to a theme – a very
you to open, view, edit and save individual useful function that will enable you to really
component files within a theme. tailor your site to your needs.

KEY FEATURES
Dive into the code and
embrace your technical side

1 The Editor window: The editor window provides

access to the code that makes up your theme. From here
you can edit the code directly, enabling sophisticated
changes to be effected directly from your browser window.
2 File selector: WordPress displays a list of every file that makes up the theme you’re
editing, with the exception of any graphics used. You can edit any of the files shown
simply by clicking on its name. WordPress will load the contents of the file into the Editor
window, enabling you to make changes directly. The list is split into two sections according
It’s very easy to break the theme when editing, so only do so to whether the file is structural or aesthetic. Aesthetic files cover font size, colour, position and
if you’re a confident trouble-shooter, and have at least a basic other appearance attributes. Structural files deal with the actual content of the page – the
grasp of CSS and PHP/HTML. informational layout, creation of buttons, widgets and so on.

36 WordPress for Beginners

 Title
The title area shows the file
you’re currently editing

The editor window Select templates

The editor window enables you You can select which template you
to view the code that comprises wish to edit by selecting from this
your theme, edit and save it drop-down box

File sections
The files are grouped into sections –
Templates for structural files, Styles for
presentational files

3 The loop file: Every WordPress

theme has to have a minimum
set of files to work, but some have
more than others. The list of files you see
will vary according to the theme you’ve
selected. The core file that deals with the
display of posts is called ‘loop.php’, and
every template must have one. This is the
main WordPress function that calls out
all the other parts of the template and
arranges them in the correct place.

4 Swallowing files:
You can edit files by
duplicating the theme
directory. You will need access
to the server where your site is

5
hosted in order to do this, but
your web host will be able to Documentation: One of the best features of the editor
provide FTP details. Navigate is the link to WordPress documentation. This little, unassuming,
to wp-content>themes and drop-down that appears beneath the Editor window enables
duplicate your theme’s folder, you to look up the API documentation for every public WordPress
giving the copy a unique name. function, method and property. The documentation also provides
Be sure to edit with your new examples, making it child’s play to use the built-in functions within
theme name. your adapted theme.

WordPress for Beginners 37

Getting started

Introducing plug-ins
YOUR HELPFUL GUIDE ON GETTING TO GRIPS WITH WORDPRESS PLUG-INS

ALTHOUGH WORDPRESS STARTED off as primarily it would be impossible for the WordPress developers to If you imagine your WordPress to be the meat and
a blogging tool, its open source nature soon led to it cater for all of their requirements. This is where plug-ins two veg of a meal, then plug-ins are the dressing, side
being used for a wider variety of sites. Now you can come into the equation, providing a welcome service. salad and dessert. There are nearly 20,000 different
not only find your basic online diaries, fan sites and plug-ins available to add things such as a Facebook
personal promotion pages, but artist’s galleries, sites “If you imagine your Like button, CAPTCHAs to stop spam comments,
for businesses and high-profile individuals all using
the software. Part of the reason for this diversity is WordPress to be the meat statistic counters as well as widgets to show your
YouTube and Flickr streams. If you want it, it’s probably
the plug-in system. While the default WordPress
installation has plenty of features, bloggers and site
and two veg, plug-ins are available. While some plug-ins require you to pay to
use them on your site, many that have been created
owners are a varied bunch and have specific needs so the dressing and dessert” are free to download from sources on the web.

Active/Inactive
Activate new plug-ins or deactivate old
ones you no longer require

Show on screen
A list of all the plug-ins you
have installed and information
about them

Add New
Use the Add New button
to search for and install
additional plug-ins
Pre-installed
WordPress comes with two pre-
installed plug-ins you can use

ADJUST THE SCREEN OPTIONS

A little known feature of the WordPress back end
The main dashboard of WordPress is somewhere initially see a few parameters for exactly what is
you will find yourself spending a lot of time – displayed on the screen. If you have quite a few
as thousands of users will be able to tell you, plug-ins installed and want to browse through
blogging and WordPress can be an addictive them all quickly, you can change how many are
habit! Most of the main areas you will be shown on the screen at once. The default is 20
working with are to be found on the left-hand but you might want to increase this to 100 or
side menu, as it’s where you make new posts so for easy browsing. If you are viewing your
and keep your site updated, manage your media WordPress on a small laptop screen or mobile
and adjust the settings for your site. At the top device you could reduce this number to make
of the screen are a few hidden gems such as it easier to see all of the essential details as
the shortcut to sections and the Help link. Here you work. Another useful option is the Disable
is where you can also find the Screen Options description, which just leaves the plug-in title
for the plug-ins page. Click on this and you will and Install labels.

38 WordPress for Beginners

5 GREAT AREAS OF
THE PLUG-IN PAGE
2 Add New: Clicking
on this button will
take you to the Install
Plugins page where you
will be able to search for
Five of the main features you and install new plug-ins.
will use on the plug-ins page You can search for a plug-in
by name, author or tag as
well as filter the plug-ins by
Newest, Featured, Popular
and Recently Updated.
There is even a tag cloud
so you can see what some
of the most commonly
used tags are. You can also
manually upload and install
a plug-in from a zip file.

3 Manage
your plug-ins:
Once you have
installed some plug-ins you
will need to turn them on

1
before you can see them
Pre-installed plug-ins: WordPress comes on the site. The manager
pre-installed with two plug-ins – one useful, one not enables you to activate/
so useful (but more fun!). Akismet is a comment spam deactivate plug-ins by
blocker that works by comparing the text of a comment clicking on the text. Next
against known spam. If you think your site is going to be to that is the edit button
popular, it’s a good idea to activate this plug-in. Hello Dolly is which will take you into the
a plug-in that when activated shows a random lyric from the code view for the plug-in.
Louis Armstrong song Hello Dolly on your admin page. Finally there is the Delete
button which will remove
the plug-in completely.
“Most WordPress plug-ins
are free, although quite
often there will be a
donate button”

4 Plug-in description and information:

5
There is a handy, brief description here. The developer
may also include other setting details and a link to the Visit the plug-in’s site: Most plug-ins are developed by individuals or company’s
plug-in site, which is useful if you are having difficulty with not directly associated with WordPress. On the plug-in information page there is a link to
it. Most WordPress plug-ins are free, although some of the send you to the website of the developers of that particular one. Quite often this can be
more advanced ones do change, and quite often there will a really useful source of information about the plug-in if you are having problems with it. It can
be a donate button here. also be a good way to find out what future plans the developers have.

WordPress for Beginners 39

Getting started

Adding new plug-ins

DETAILS ON ADDING EXCITING NEW PLUG-INS TO YOUR SITE

WORDPRESS IS A mighty fine blogging tool, the

interface is simplistic and easy to understand but still
enabling you to browse the huge selection of plug-
ins available and you can search and filter by popular
“Plug-in installation is
attractive. It’s easy to install, it’s easy to make new posts plug-ins, the newest releases, featured or updated. The simple and the Add New
and it’s easy to add and change your theme. It comes
as no surprise then that it’s just as straightforward
search is fully comprehensive and produces a plethora
of information about the plug-ins available. Installation page is your one-stop
to install new plug-ins. Within the dashboard there
is a plug-in section and then within that an Add
is simple; just click and wait a few seconds. The Add
New page is your one-stop shop for expanding your
shop for expanding
New button. Clicking that brings up a nice interface site’s potential and capabilities. your site’s potential”

USE THE ‘MORE INFORMATION’

WINDOW TO ITS FULLEST
Get troubleshooting tips and more from the plug-in description
Sometimes the brief description in the main The second tab is Installation. If you are having
window might not give enough information problems installing for some reason then this
on a plug-in. Maybe you need to know if it’s will guide you on how to manually install using
compatible with the latest version of WordPress FTP. Next is the Screenshots tab which is great
or what has been updated in the latest release. for getting a visual feel for what the plug-in
The More Information window is hidden away, options are and what they do. The Changelog
only accessed by the small Details button on or Release notes tab shows what differences
the plug-in search. Opening it up in the first tab and improvements each version of the plug-in
reveals a much longer brief on what the plug- has. Usually at the end there is an FAQ tab which
in does, quite often with useful links to other is used to cover anything else the developer
resources that relate to the plug-in’s function. thinks is important.

KEY FEATURES
Details on what to expect from
the Add New plug-ins page

1 The search: Probably your first port of call when

entering the Add New page is the search option. Just
click on the textbox and type in the name of a plug-in.
The great thing about the search is that if you are not 100%
2 Install a plug-in: You can quickly and easily install a new plug-in from the Add
New page once you have found one that takes your fancy by clicking on the Install Now
button. This then reveals an installation page which shows you how the progress of the
install is going so you can keep track until it is fully downloaded and ready to go. WordPress
sure of the exact plug-in you want then you can search for it automatically finds the plug-in for you, downloads it, extracts it to your site and adds it to you
by what you want it to do. For instance searching Gallery will plug-in list. The only thing left for you to do is click Activate to begin using the additional feature
bring up any plug-in that provides a gallery function. (or whatever it is that the plug-in offers) on your website.

40 WordPress for Beginners

 Description
While browsing the plug-ins it’s
Plug-in categories useful to read the description to
Choose your category at the top to get more information about it
view Featured, Popular, Newest or
Recently Updated plug-ins

Star rating
The rating shows a five star
score that other users have
given the plug-in
Install Now
Clicking Install Now will instantly
download and install the plug-in
to your site

3 Get more details: Aside

from the short description on the
main plug-in search page, there
is also the option of getting a detailed
breakdown on what the plug-in does
and its requirements. Clicking on Details
brings up the More Information window.
This gives insight into what the plug-in
does so you can decide if it is what you
want. Clicking on the tabs at the top
show screengrabs, changelog and notes.

4 Order: With so many

plug-ins to choose
from it can be hard to
work out which are the best.
WordPress has a few options to

5
help you, such as the Popular
sort option. Using this will bring Screen Options: The Screen Options tab is hidden away
to the top the most popular up in the top-right corner. Many of the pages in the dashboard
plug-ins from what your search utilise the Screen Options menu to apply specific styles to a
criteria were. Featured also particular page. In the case of the Add New plug-ins page it enables
highlights plug-ins which the you to filter out by Version, Rating and Description. This can be useful
WordPress developers think are if you are using WordPress on a small mobile screen or perhaps a
particularly useful. lower resolution monitor.

WordPress for Beginners 41

Getting started

Using the Plugin Editor

ROLL UP YOUR SLEEVES AND DELVE UNDER THE HOOD OF A PLUGIN
WORDPRESS AND MOST of the plugins available make changes that you can’t undo and render your but don’t worry about damaging your website if
for it are classed as open source. This means that all plugin unusable. That said, there’s always the option something does go wrong, this won’t be the case.
the code that makes the software run is available for to delete the item and reinstall it, so exercise caution In the Editor page the main window is the place
anyone to view and modify. The plugins page has to go to access the area displaying the code. If it is
an Editor button and clicking on this will open up “All the code that makes a powerful plugin that you are editing with lots of
the source code for the plugin ready for you to edit.
WordPress and its associated products are written the software run is options, there is likely to be a good few hundred or
even thousands of lines of code. On the right is the
using the PHP language, and it’s highly advisable that
you have at least a basic knowledge of PHP before
available for anyone to plugin files list which shows all of the associated files
for the plugin. Most basic widgets will only have one or
attempting to modify a plugin, otherwise you might view and modify” two files listed here.

PHP files
Function A list of the PHP files that
The Function list drop-down and make up the plugin for
the documentation lookup easy navigation

Code window
The main window
where the code lies

Update changes
Save your changes by clicking
on the Update button

MAKING SURE THE FILE

PERMISSIONS ARE CORRECT
Solve a common pitfall of using the editor
The editor is a very simple tool to use but has a It happens because of what is known as file
great deal of potential, enabling you to mould permissions; WordPress doesn’t think that you
other peoples’ plugins to exactly fit your needs, own the file. Thankfully its fairly easy to fix. If
but sometimes its possible to run into problems. you are using a self-hosted WordPress, open up
If you decide to transfer your site manually from your FTP client and then navigate to the plugin
one domain to another, or copy files from other directory, usually located in wp-content>
peoples’ servers, it’s possible to receive an error plugins, then open the folder for the plugin and
like: “You need to make this file writable before change the permissions.
you can save your changes.” This error means More information on changing file
that from within the editor it will not be possible permissions can be found at: codex.WordPress.
to save any changes you make to the plugin. org/Changing_File_Permissions.

42 WordPress for Beginners

KEY FEATURES OF
THE PLUGIN EDITOR
2 Browse
functions:
The Documentation
Lookup shows a list of the
functions within the code
The Plugin Editor is a hugely powerful with a quick link to the
tool that enables you to modify plugins relative documentation.
When browsing a large
chunk of code you may
come across a function
that you have not seen
before. The Documentation
reference automatically
scans the file for all the
functions used and links
them to the PHP docs or
the relative reference.

3 Update file:
Once you have
finished editing the
file for the plugin that you
wish to modify you need

1
to make sure that you hit
The main code window: The focal point of Update File before leaving
the editor is the Editor window. This displays all the code the page. This then saves
that makes up the plugin. You can easily scroll down the the changes you have
code using the bar on the right. The Plugin Editor is primarily made and applies them to
designed to make small changes rather than for a major the plugin. It’s a very good
rewrite; if you are planning on making quite a few changes to idea to go into your site via
the plugin, then it might be more beneficial to copy the code FTP and make a backup of
to a proper editor. the file that you are editing
before you save, as there is
no undo option.
“The plugin editor is
primarily designed to
make small changes rather
than a rewrite”

4 Plugin information: So that it is easy to see

5
what plugin you are editing, it is labelled in the top
left. Next to the name is the actual file that you are File type: Although plugins and WordPress are largely written using the PHP language,
editing as part of that plugin, as many plugins feature quite there are also other elements and languages that can makeup a plugin. The editor is able
a few separate files this can be useful in keeping track of to modify these too. Both JavaScript and CSS are common throughout WordPress plugins,
exactly where you are. To the right of the file name is the so its handy to be able to switch up details on the go without needing an external editor and
current status of the plugin, whether it is active or inactive. then having to upload the files to your server.

WordPress for Beginners 43

Getting started

Add new users to your site

OPEN YOUR BLOG UP TO NEW AUTHORS AND MORE

IF YOU FEEL like expanding your blog by increasing

the level of posts per day, taking on board other writers
However, should you wish to remain as the key
admin of your blog, you can set author privileges as you
“New contributors don’t
or simply opening up your feed to other bloggers, see fit, meaning only you have direct access over some need to sign up for
you can do all of this via the Users section on your
WordPress dashboard. Adding new users is a great
of your blog’s key features. One of the best facets of
user management is that new contributors don’t need WordPress to be able to
way of diversifying the tone and output of your blog,
as well as giving readers an alternative perspective on
to sign up for WordPress to be able to use it. You can
create their log-in credentials for them, as well as role
use it. You can create their
your chosen topic. descriptions and much more. log-in credentials for them”

CREATE A NEW TEAM MEMBER

Adding new users, explained in full
Expanding your writing pool is simple and is a Add Existing in the top left of the Users menu,
great way of ensuring your content flows faster. or Add User From Community below the user
It’s also a great way of sharing the workload list. Once there, simply add their email address
and providing a more diverse tone across your and set their access privileges using the Role
content. To register a new user from scratch, you drop-down menu. To remove a user if they have
can notify a friend or colleague via the Invites become inactive, simply hover over their name
area of the Users section. Simply input their in the user list and hit the Remove link that
email address to send them an activation link. pops up. If you have to remove or edit multiple
Once clicked, the new writer will be registered authors at once, remember that you can use
and ready to write. the Bulk Actions drop-down in the top right of
Alternatively, you can add an existing the Users page to modify them at speed. This
WordPress user – or of course, a regular way you can select a range of users via their
comment poster from your feed – by clicking checkboxes and make changes all at once.

KEY FEATURES
With the Users section you can
have total user management

1 Users section: In the Users section of your

dashboard you can see all of your created users at a
glance, complete with user role descriptions, contact
details, usernames and more. Similar to comments and pages,
2 User profiles: Giving each user more identity on your blog is a useful way to help
build a rapport with your readership, and to clearly identify which author is posting blog
entries. This can be useful as it makes your blog seem less anonymous, and if visitors want
to get in touch it can help direct them to the right person for a truly interactive experience.
you can apply multiple Bulk Actions to users using the drop- From the Users menu you can click an author’s name to proceed to their personal profile. Here
down menu at the top of the Users menu, such as deleting they can upload Gravatars – images posted along with each blog entry to clearly label who has
old users or categorising them to keep the roster tidy. written them – as well as putting a face to the name.

44 WordPress for Beginners

 Posts
You can see how many
posts each user has written
and click here to read them

Add User From Community

If you see a regular comment poster
you want to recruit, use this form

Username
Click this link to view user
profiles, preferences,
privileges and much more

Search
You can skip straight to a specific
user using this handy search form

Role
Using the role function
you can assign user titles
that designate privileges

3 Spread the word: From the

Users section of your dashboard
you can email links to contacts with
personalised messages. This can be used
to send invites to contribute to your blog,
let other users know about upcoming
projects or new features you have added
or to simply invite unregistered users to
visit. You have absolute free rein to use
this feature to help boost your visibility
and content flow.

4 Keep it personal:
Aside from adding and
maintaining additional
users on your blog, you can
tweak personal settings to

5
help the administrative process
flow more smoothly. You can Grammar rodeo: To help create a sense of grammatical
activate geotags, change uniformity across all users, you can access a wide range of
the colour scheme and sync proofreading options within each user’s profile. For example,
with other services. Connect you can enable WordPress to automatically flag up grammar
with Twitter to create new elements such as double negatives, jargon, passive voice and
WordPress posts simply by redundant phrases. Ultimately this will reduce discrepancies and
tweeting, for example. create a single discipline for all writers.

WordPress for Beginners 45

Getting started

Introducing Tools
USE THE TOOLS SECTION TO BOLSTER YOUR BLOG’S APPEAL

ON THE SURFACE, the WordPress Dashboard is full WordPress blogs – draw all of your content together blogs via email if you ever find yourself unable to log
of useful tools, functions and processes designed in one all-encompassing feed for everyone to see. You in or are sending important, live updates for an event
to help you tailor content to your specific needs. It’s can also set up remote posting that lets you create new that you are present at. Finally the Press This browser
also a great way of improving content flow and even widget is a great way to collate data from external
exporting your posts to a self-hosted WordPress site via “The WordPress Dashboard sources and post them straight to blog entries in a
custom XML feeds. Importing content from other feeds
covers a surprisingly large number of providers, such as is full of useful tools, snap. Once this is activated, if you are browsing and
see something you think might interest your readers,
Blogger, Live Journal, Posterous and Yahoo 360.
Using this feature, you can draw in content from
functions and processes all you need to do to post it on your site is click a
button. We show you the basics of this crucial area of
external contributors – or if you have multiple designed to help you” WordPress as well as tips for making the most of it.

Press this
Drag or bookmark this icon to
purge text and other media
from other sites
Post by email
Use this option to enable remote
posting via the email client of
your choice

Categories and tags

If a tag has been used
repeatedly, you can turn it
into a blog category
Webmaster tools
If you want to use Google,
Yahoo or Bing webmaster
tools, enable them here

IMPORT POSTS
Taking content from another blog
As we’ve already discussed, you can pull in posts Next, head to the Import section of Tools and
from a number of other blog providers using choose your blog provider, which in this case is
the Tools section on your WordPress Dashboard. WordPress, and select the Choose File option.
To become accustomed with this process, it’s Simply locate the XML file you just created
best to try replicating a cross section of your and upload it. The following screen will let you
own feed first. To get started simply head to the filter the XML file down to a single author, or
Export section of the Tools menu. From here import the entire feed. You will also be able to
you can set parameters such as a date range import attached multimedia files and images,
for posts you want to import, specific authors, or remove them entirely. Once ready, hit submit
categories, and, if you also want, multimedia and the entire section of the external blog
to be exported. Once you’re happy with your within the XML file will be added to your blog.
selection, simply hit Download Export File to It really is quite straightforward once you’ve got
create an XML file for your blog. the hang of it.

46 WordPress for Beginners

TOOL FUNCTIONS
Some of the key features the Tools
section can offer you
2 Multiple
sources: The
Import section of
the Tools menu lets you
pull in posts from another
blog hosted by self-
hosted providers, or other
WordPress blogs. To set
this up, simply choose the
providing host and upload
the XML file associated
with the feed you want to
import. Once uploaded,
any new posts made on
that blog will automatically
be transferred to your site’s
core feed.

3  Delete blog:
If you want to start

1
fresh, or if you have
Press This widget: By dragging the Press This moved all of your content
widget to your browser toolbar, you can save content over to another blog, you
from other sites quickly and include them in your own can choose to delete it
posts. Use your mouse to highlight text and images, click forever. You will be asked
the widget and an Add New Post page will appear with the multiple times if you are
copied content ready to publish. You’ll also be able to set a sure, and you will also have
category, tags and post type, although setting a featured to verify your decision via
image isn’t possible. email verification link. Be
warned however, that once

“The Import section of the your blog has been deleted,

it will be gone for good, so
tools menu lets you pull only use this option once
you are sure.
in posts from another
blog hosted by third-party
providers, or other
WordPress blogs”

4 Exporting content: You can import XML

5
content from external blogs and even send your own
content to others. In your Dashboard, open Tools, Email updates: In the Available Tools section of your Dashboard you will find the
then Export and choose your method of delivery. The top Post By Email option. Simply click the link to be redirected to the WordPress support page.
option lets you create an XML file to give to others, while the From there you will find everything you need to set up remote posting via email. Once
Guided Transfer choice is a paid service where WordPress the option has been established, you will be able to create posts from anywhere and from any
staff will move content to a new site for you. device with email access, complete with any formatting options your email provider delivers.

WordPress for Beginners 47

Getting started

Understand the General Settings

ENSURING ALL THE ESSENTIAL PARTS OF YOUR NEW SITE ARE NAILED

WHEN YOU START your new WordPress blog, you

want to get the fundamentals sorted and that is where
of interaction and how you will lay out some of the
important details, from the dates and time that you are
“There is very little in the
the General Settings are worth their weight in gold. posting to the time zone in which you’re operating. General Settings that will
For one thing, it is the place where you can give your
website a title, work out exactly where to point visitors
There is very little in the General Settings that will
tax you but it’s a good place to start when you are a tax you but it’s a good
to your blog and add that all-important email address
upon which you will come to rely for notifications and
new user so that you can become confident with how
WordPress works and start customising the site right
place to start when you
such like. You can also work out the fundamentals away to make your blog truly your own. are a new user”

ADDING A BLOG PICTURE/ICON

Show the world who you are in an image
One of the options that is available to users of to single yourself out once you have been taken
WordPress.com is the ability to add an avatar, through to the crop screen.
picture or icon – whatever you want to call it – The next step is to his ‘Upload Image’, this
to your blog, so when you repond to comments, will load the image into your Media Library and
your image will appear alongside your post. make it available across your WordPress site.
To change the image, select ‘Choose File’ and Then you will be able to crop it. Once you are
locate the file that you want. It has to be either happy with the crop, click on ‘Crop Image’ and it
a .jpeg or a .png in order to work. Don’t worry will save it to your blog.
about pre-cropping the image as WordPress You will be able to enter into these settings at
will take you through to anotehr screen in order any time in order to change it, so if your blog’s
to crop the image to the part of it you want to image is time sensitive you don’t have to worry
show on your posts. For example, if you have an that you are going to be stuck with the same
image of you in a group of people, you’ll be able image forever!

THE KEY FEATURES

OF SETTINGS
Ensure your blog looks like your own

1 Give it a name: The most important setting of all is

the name of your blog, so proudly make sure it is typed
in correctly into the Site Title box. Depending on the
theme you chose, this name will typically appear at the top of
2 Choose a taglines: You don’t have to fill this box in but you may well want to: it lets
you place a slogan or tagline on your page, a small, maybe witty, description of your site
that everyone can see. You’ll want it to be something memorable that sums up what your
site is all about in just a few words so visitors will instantly have an idea of what to expect from
your blog and on every page. It will also appear in the title bar your content. Don’t worry, though, if you can’t think of anything immediately. You can come
of your browser. When you enable RSS feeds, the title will be back and alter this whenever you go to the General Settings page, which is also very useful if the
used to identify your musings. purpose or nature of your blog has evolved over time.

48 WordPress for Beginners

 Tagline
Names are everything so make
sure that yours stands out from
the crowd and add a tagline

Time zone Blog picture

The time zone is important for You can upload an image that
people to be able to see when will represent your blog when
you posted you post comments etc

Settings
By clicking on a link in the Settings Date format
menus, you will be taken to You can set your blog’s time
documentation explaining the format, whether you want dd/
function of various options mm/yy or m/dd/yy

3 Setting time zones: You can

set the date and time formats to
suit your blog and also determine
which day your week starts on. The most
crucial setting here is the time zone. Most
people will set the time zone in which
they currently reside, but if your content is
of greater use to another you can adjust
it. This will change the date stamp placed
on your articles so that people will know
when your post was made.

4 Set the date

format: You can
set the way that your
WordPress site displays the
date, for example, in the UK it is

5
more likely that the date will be
set dd/mm/yy than it would be Change the language: English might not be your
mm/dd/yy as it is in the USA. native language, and that’s okay, because WordPress is
You can also set it so that your equipped with over 200 languages for your use. So whether
date settings are how you want your blog’s language is going to be English, German or Limburgs.
them. You can set it to simply There’s plenty on offer. Changing the language will not change the
show the dd/mm if that is what interface language. You can do that in your profile settings. Just click
you would prefer. on the link below the language drop down menu.

WordPress for Beginners 49

Getting started

Using the Writing Settings

CONTROL THE WAY YOU WRITE POSTS ON YOUR WORDPRESS BLOG
WHEN YOU ARE posting articles to your blog, you will size of the box into which you write your posts, convert around or wasting precious time when you are writing
want to feel comfortable with the interface. By using written emoticons into graphics and set default post if you tend to produce articles for a specific section of
the Writing Settings you can control how you add and and link categories which means there is no fumbling your site time and again.
edit posts and you can also set up WordPress so that This is also the setting in which you can make use
you are able to make posts by email or from a third- “You can set up WordPress of the Press This bookmarklet that is invaluable for
party program. This can be extremely useful if you are
posting from another computer or a mobile device and so that you can make grabbing text, images and videos from webpages,
which can then be edited and posted onto your own
need to keep your updates current.
Beginners to WordPress are most likely to use the
posts by email or from a blog. There are a range of really useful functions on
the Writings Settings page, so follow our guide for the
first set of options which enable you to customise the third-party program” basics on how best to use them.

Default drop-down
Use the pull down menus to
select the defaults for your
Posts and Links Default settings
You can set the default post type for
your blog, so you can select what is
most appropriate for your blog

Press This
Press This is an app that allows you to
grab pressings from websites as your
browser to then publish

Remote publishing
If you have a desktop blogging client or
your are using a remote website with an
Atom Publishing Protocol or an XML-RPC
publishing interface, tick here

HOW TO USE PRESS THIS

Grab parts of the web with one click
We can’t let the Press This feature go without information already within it. To get started,
further explanation. It really is a wonderful tool use your mouse to drag the Press This link to
that will speed up your blogging, make you your bookmarks. It will then appear in your
even more productive and give visitors to your bookmarks menu as just another option. Now
site a wider range of content to read and enjoy. start browsing. When you find some content
When you are surfing the web you will come that you just have to share, be it a news page
across a lot of content that you feel will be of or YouTube video even, go to Bookmarks,
interest not only to you but your readers. Usually select Press This and watch as a box appears all
it requires having to find embed code or a bit filled in. You can then write your post or, if you
of cut and pasting, but with the Press This app, wish, send it straight to your blog by selecting
all you have to do is go to the Bookmarks menu Publish, changing the categories if need be.
of your browser, select the Press This option Now the new content will be immediately
and a box opens up with the all the required available for people to read on your blog.

50 WordPress for Beginners

STREAMLINE THE
WRITING PROCESS
2 Select a default
category:
There are three
types of default categories.
With a Default Post
The key features of the Writing Category, any posts you
Settings panel write will automatically be
placed there if you don’t
specify otherwise. Not
all themes support Post
Format but this lets you
select how your posts will
display and includes
a Gallery option. Default
Link Categories lets you
decide on which appear
by default.

3 Press This
bookmark: This

1
is a brilliant little
Enable graphic emoticons: Although some feature which makes
people hate them, it appears the emoticon is here to blogging easier. All you
stay. Depending on your preference – or indeed what have to do is drag the
you are writing about – you may wish to keep your link to your browser’s
emoticons in text form or you can get WordPress to convert Bookmarks bar. When
them into little yellow graphics. You can make your choice you are surfing the web
very quickly and easily by simply ticking the box on the and come across an item
Settings page. of interest, go to your
Bookmarks and select Press
“You’re not restricted to This from the list. Your post
will auto fill with content
going through your site from that website without
any further effort needed.
in order to post articles. Set
up an address and any
articles sent will appear on
your blog”

4 Set up email: With WordPress you’re not

restricted to having to go through your site to post.

5
You can set up an address, and then any articles
then posted to that address will appear on your blog. You Update Services: A fantastic feature of WordPress is that you can set your Writing
wouldn’t use an existing address as any emails received Settings so that it sends an update every time you make a new post to select services,
there would be posted straight on your site. In the writings should you nominate for it to do so. This is a service that allows you to ramp up your traffic.
settings, you can insert your mail server, login name and Sending a ‘Ping’ update to certain websites will create a network of updates places where your
password details and select which category posts from that posts shall appear. This is great for increasing the statistics on your blog. Find out more about the
source will appear in. Update Services on the Codex at codex.wordpress.org/Update_Services.

WordPress for Beginners 51

Getting started

Understanding the Reading Settings

CONTROL WHAT YOUR READERS CAN SEE AND HOW THEY VIEW IT

THE READING SETTINGS are important because they

control what anyone visiting your blog can see. It is here
You can use the Reading Settings to tell WordPress
how many blog pages you wish to show and the
“You can decide whether
that you can decide whether to have blogs on your number of RSS feed items that you want on display. This to have blogs on your
front page or whether you would prefer the page to
be static – something more timeless that doesn’t date
section also enables you to set the amount of an article
that can be seen in a feed with a choice between full front page or whether you
too easily – which is great if you don’t update your blog
all that often but still want it to be a useful resource for
text and a summary. There aren’t that many settings to
play around with but that doesn’t mean they are any
would prefer the page
your visitors. less crucial, as they are well worth exploring. to be static”

STATIC FRONTS
Make your website appear less blog-like with a static front
A static front is essential if you wish to move like all the rest but a static front page can be
away from a blog-look on your new website. designed for greater visual impact, giving you a
This could be the case if you are promoting chance to state what your website is about.
a business or generally want to appear more A static page can be customised in any
professional and established. WordPress, by way you wish. You can use it to splash specific
default, displays your posts on its front page so features that you wish to flag up or you can
that when you post an article, it will appear as draw attention to specific posts, contributors
soon as people log on to your site. or articles. Whereas a list of posts means special
But while this creates a sense of immediacy items can easily get lost amid a sea of content, a
and draws people straight into your content, static page ensures you can point people in the
some don’t like it, feeling that it makes the site right direction so that they get to see content
look too much like a generic WordPress blog. that you want to remain flagged up. It is simply
There is a sense that your blog will look just a case of selecting the Static Page checkbox.

DELVING INTO THE

READER SETTINGS
Ensure readers see your blog in the
way that you want them to

1 Display your posts: By selecting the top radio

button besides ‘Your latest posts’, you can select for your
more recent posts to appear on the front page. This
enables visitors to immediately get to grips with your content
2 Have a static front: If you decide that you would rather use one of your static
pages as the first thing that welcomes visitors logging on, select the second radio button.
This can create a slightly more professional feel and help your blog stand out from the
standard format that many similar pages can have. You have to select two options: the page
and returning visitors can also see, at a glance, any new that you want to display as your front and the page that will contain your posts. If you decide
material you have posted. Most people will select this option not to make the second selection then readers will have to navigate to features such as calendar,
because it makes their front pages appear busy and current. archive links or categories in order to see your posts.

52 WordPress for Beginners

 Explanations
By clicking on a link in the
Settings menus, you will be taken
to documentation explaining the
function of various options

Display
Ensure that the front page
display is exactly as you would
want it to appear

Number of blogs
Decide on the maximum number of blog
posts you wish to show on each page

Summary
Don’t allow over-long articles
to appear in your feed. Instead,
show a summary

Syndication feeds
All syndication feeds show the
most recent items and you can
select just how many here

3 Display blog posts: The

number that you place in this
box will determine the maximum
number of posts that will display on
each one of your blog pages. Ten is
a good number, depending on how
much information you show in each.
Much more and readers will be endlessly
scrolling down the page for material and
it could affect the loading times of your
page, which would be off-putting.

4 Showing your
syndication feeds:
If one of your visitors
decides to download one of
your site’s feeds, they will want

5
to see a fair number of posts.
When a reader downloads How much to show: Which option you check here very
a feed, their feedreaders will much depends on the nature of your posts. If you select the full
actively look for new items text option, then the full content of each one of your posts will
which will be downloaded. It be displayed, so this is not a good option if your posts are massively
means they don’t have to keep long. In such a case, a summary would be better. Not only does
logging on to your website for it save on bandwidth but it also ensures that your readers are not
updates so keep it frequent. overwhelmed and can get a brief synopsis of each piece.

WordPress for Beginners 53

Getting started

Master the Discussion Settings

ALLOW FREE DEBATE BUT ENSURE YOU RETAIN CONTROL OF COMMENTS

IF THERE IS one thing that will bring people back to how nasty comment threads can get when users go WordPress not only enables you to set up alerts so
your blog time and time again, it is the ability to add head-to-head, so to keep the right tone for your blog that you can see when and what someone is posting
comments. WordPress has comment facilities built-in it’s wise to keep a handle on things in this area. but you can lay down specific requirements for
which means you can post articles and get instant readers and control the time period of your comment
feedback from readers, many of whom will want to “Comment facilities threads, as well as consider how discussions should
engage in lively debate.
Having a comment facility is almost a mandatory enable your site to be displayed on the page. By playing around with
the settings, you will help ensure your blog remains
requirement of blogs nowadays and they enable your
site to be more dynamic and interactive. But there are
be more dynamic inviting to all readers. Keep control of your content
and make sure that nothing that could be considered
times when discussions get out of hand. We’ve all seen and interactive” offensive or inappropriate mars your pages.

Notify blogs
If you have any links in your articles
and you select this box, then as long as
the other sites allow pingbacks, your
mention of their article or site will show
up in their comment section

Avoid spam
A lot of spam will contain numerous
hyperlinks. You can stop these
appearing by holding comments with
Email me more than a set number of them
You can be alerted to new posts by
email. Ensure this box is ticked
Moderate comments
Pre-moderate comments by ticking
this box. You can auto-approve
readers who have commented before

USE AVATARS SECURELY

Feel secure thanks to Globally Recognised Avatars
WordPress throws a level of protection around which can be cropped. The user selects whether
its users when it comes to avatars. You can it falls into one of four categories: G (suitable for
select to turn them off entirely, but if you all), PG (13+), R (17+) and X (mature).
activate them then commentators will be able In your WordPress Discussion settings, you
to not only leave comments but include a can select which of those four categories of
picture with their missives too. images you will allow to be placed on your
WordPress uses a system of Globally website, depending on the audience you are
Recognised Avatars (or Gravatar). Users of your looking to attract. The Gravatar system has a
site would have to go to the Gravatar website Report Abuse option so if someone (or you) spot
(http://en.gravatar.com) and sign-up using an an avatar that is inappropriate for the age-rating
email address. This then sends a link to their it has been given, then the URL of the offending
email. Clicking on it enables them to select a gravatar image or profile page can be flagged
username and password and then add an image up and the appropriate action taken.

54 WordPress for Beginners

USING DISCUSSION
SETTINGS
Enable free-flowing discussions on your
blog with the minimum of fuss

2 Customise comments: It’s a sad fact of life but comment facilities are often
abused. WordPress has some in-built mechanisms to help you keep misuse to a minimum.
You can force users to be registered and logged in before they can comment by ticking
the relevant box. Or you can simply require them to fill out their name and email. Don’t allow

1
comments to run for too long. You can ensure you are notified when comments are posted so
Set the defaults: You have three default options you can take action and delete if need be.
for discussions, one of which is most crucial – the ability
to switch off comments completely if you wish. It may be
that you don’t want comments on every page, in which case
you should turn them off. This doesn’t prevent comments
from being made – you can activate them on individual
articles. But if you don’t mind where comments are made, just
tick the box and discussions will be available on every post.

3
“Avatars are the images that Moderate comments: As well as inserting an acceptable number of hyperlinks
appear alongside comments. (too many and it could be from a spam commenter), you can also flag up certain content.
Place words and rogue websites, IP addresses and emails in this box and any posts
If you have the time to containing such content will immediately be placed in the moderation queue where you can
dedicate to your blog, it’s assess whether or not to allow it to be published on your site. If your banned words form part of
larger words, they too will be picked up (eg ‘wheelbarrow’ would be detected if you inserted the
worth allowing them term ‘barrow’ into your banned words).

because they brighten

up comments”

4 Blacklist comments: There will be some

words, rogue websites, IP address and emails that you
will want to ban outright. Any comment containing

5
such content will immediately be seen as spam and
discarded, not even put forward for moderation. It’s perfect Allow avatars: Avatars are those little images that appear alongside comment
for lists of swearwords (why not go to www.noswearing. posts. You can decide not to allow images at all (this will prevent any rude avatars from
com/dictionary for lists of potential cusses) and for stopping appearing) but if you have time to dedicate to your blog, then it’s worth allowing them
spammers in their tracks by identifying and then preventing because they brighten up comments. If you enable them, you will want to set a default option
certain IP addresses from posting. image for those who don’t bother to upload a picture of their own.

WordPress for Beginners 55

Getting started

Introducing Media Settings

UNDERSTAND HOW BEST TO DEAL WITH MEDIA ON YOUR BLOG

BLOGS ARE MORE than just words. Nowadays – as

has been the case for a while – websites are multimedia
with the media settings you can change the thumbnail
sizes and choose just how big your medium and large-
“Nowadays websites are
experiences that combine words with pictures and sized images should be. Media content can also be multimedia experiences
video in order to draw readers into a dynamic offering
that will hopefully keep them coming back for more.
embedded automatically from sites such as YouTube
and Flickr by simply using a URL, and you can also that combine words with
A picture really can paint a thousand words and video
can do so much more. You will want to control how
toggle the size of these. You wouldn’t want to just
throw a load of images up without some organisation,
pictures and videos to
these images and video appear within your posts and and luckily there are settings for this too. draw readers in”

EMBEDDING CONTENT
What happens when you want to embed videos with ease?
When you want to embed videos, WordPress not just video or images but text too. Indeed,
makes life very easy when it comes to the number of websites that content can be
embedding multimedia content. All you have pulled from is vast and includes YouTube, Vimeo,
to do is post the URL to your content area and, DailyMotion, blip.tv, Flickr, Viddler, Hulu, Qik,
if this box is ticked, when you publish the post, Revision3, Scribd, Photobucket, PollDaddy,
your link will automatically display the content. Google Video, WordPress.tv, SmugMug and
If the content isn’t able to be auto-embedded, it FunnyOrDie.com.
will display the URL instead. As you can see, it includes some of the most
The idea behind this (make sure you have popular websites around so you won’t be
the latest WordPress installed or you may not scratching around for content, that’s for sure. Any
see the feature available) is to prevent you from websites which don’t enable such embedding
having to copy and paste any HTML from the will inevitably have embed code. It’s not as
hosting site. Using this method you can embed simple as using a URL but it’s effective.

KEY FEATURES OF
MEDIA SETTINGS
Keep control of any media on
your blog site

2 Image Gallery Carousel: When you enter into the Media settings on WordPress,
you will be presented with the options for your image carousel gallery. By checking the
box you can ensure that you images will be displayed in full-size on the carousel. You can
also set the background colour. You will have the choice between black or white, so make your
decision carefully!

1 Maximum sizes: When you place an image into a

post, a level of constraint prevents them from appearing
too big on the page, thus distorting the layout and
3 Metadata: By selecting the
option to Show photo metadata,
you are allowing the visibility
of the photos Exif information, the
eating up unnecessary resources. The maximum dimensions Exchangeable image file format. This
of your images are determined here with the ability to restrain incudes information left by both digital
the size of your thumbnails (the small images that appear in cameras and scanners that will then be
previews) and the size of medium and large pictures. displayed in your carousel.

56 WordPress for Beginners

 Thumbnail size
Use the check box to crop
your thumbnails to the exact
dimensions specified

Image Carousel
Enabling the Image Gallery Carousel
will showcase you images in a slick
slideshow-esque gallery
Number of pixels
Dimensions are inputted in terms of
the number of pixels high and wide

Tiled galleries
With WordPress’s new gallery features,
you can select to have your images
appear automatically in a tiled layout

Upload videos
You can embed videos from various
sources, ticking this box will upload
them into a Ogg file container which
may not work on all browsers

4 Video player: The video player is something that is easy to manage, you
simply have to copy and paste the URL of the video you want to embed into
a new blog post. However, there is an option in the Media Settings that can
5 Organise into months: You can organise your uploads
into both months and years by simply checking this box. This
will create a variety of upload sub-folders, neatly placing each
month’s content into its own basket so that you can assess just how
allow you to declare that you only wish to display videos in free software formats. This old an image is should you wish to reuse it later down the line and are
means that an Ogg file container will be activated but this doesn’t work with Internet unsure how long you’ve had it knocking around for. The folders are
Explorer or Safari, so it may be best to avoid it for cross-browser compatibility. automatically created so you needn’t worry about doing this yourself.

WordPress for Beginners 57

Getting started

Using permalinks
PRODUCE PERMANENT URLS FOR INDIVIDUAL BLOG POSTS

ALTHOUGH YOU WILL be happy with WordPress include the day, month and year or, if preferred, just the As well as all of this, you can customise your own
generated URLs for the majority of your blog posts, month and year in the URL. It makes it easier for visitors URL to put a unique stamp on your posts, which tends
from time to time you may want to produce a specific, to instantly see when the post was written. to look better if you feel a certain link will be copy and
memorable and permanent URL. The permalink pasted. This is a good way to make subsections easier
settings enable you to do this with ease, giving you a “You can customise your to find for readers too, ultimately making your site
wealth of options.
At its most basic, you can have a “?p=N” prefix own URL to put a unique easier to navigate and link to specific parts on external
sites. Customisation like this will always make you feel
to your website name. The N shows the number of
the article you have posted. But you can go beyond
stamp on your posts closer to your work and understand the site better as
well. Follow these guide to understand the key features
that and be more descriptive, selecting the option to which tends to look better” and how to use this handy option.

Default
If you don’t change the settings, Day and name
then it will stick with the default You can decide, if you wish, to display
which is number-based the day and name in your URL

Month and name Numeric

If you don’t want the day to be Numeric removes the ‘?p=’ part of the
displayed, choose month and name default but adds the category

Custom Structure
When the options just don’t
quite fit what you want, use the
Custom Structure

UNDERSTANDING
STRUCTURE TAGS
Just what can you place in the Custom Structure box?
The number of structure tags that you can use is and even the minute (%minute%) or second
quite wide and varied. These are placed into the (%second%). You could choose to ignore all
custom structure box in the Permalinks settings reference to dates by going straight for the Post
menu. They enable you to build up your own Id (%post_id%) or Postname (%postname%).
URL structures. With the latter, let’s say the name of your post is
By inserting %year%, the year when the WordPress is ace, the URL will contain the string
post is published will appear in your URL. “WordPress-is-ace”.
Using %monthnum% inserts the month of the Categories can be placed in URLs as well
year as a number, for example, 11. The same is by (predictably) using %category% and tags
true of %day%. You can narrow right down to by %tag%. Finally, you can include the author
hour (%hour%) which uses the 24-hour clock name by using %author%.

58 WordPress for Beginners

KEY FEATURES
OF PERMALINKS
Decide how you want your URLs to look
with a few simple settings

2 Going further: Why not organise your URLs to a greater degree and, instead of
having numbers, title them by day and name? You just need to select ‘Day and name’. In
doing this, your posts will have your domain name but they will contain a prefix that spells

1 Select your preference: You can choose out the actual day, month and year it was published as well as the title of the post. An instant
the type of URLs you wish your posts to carry. If you glance at the URL tells the reader all they need to know about when the piece was written.
would like the default, then each one of your posts
will show as your main domain name, for example www.
yourdomainname.com, with a forward slash and then the
prefix “?p=N” where the N is the number of your post. As you
post items to your blog, they are given numbers in ascending
order and that is what is displayed here. This makes linking
from external sites much easier.

“You can make your own

custom prefixes for your
category URLs. The same
goes for the tag base.
With some playing around,
it’s very easy to get the
hang of”
3 Omit the day: If you don’t post that often and you feel showing the day the piece
was published would date your article, you can decide to just use the month, year and
name (select ‘Month and name’). This way readers will know the time of the year that the
article was written but they won’t know the exact day just by glancing at the URL. It’s also a
matter of ease of use too – you will ideally want to keep URLs as snappy as possible.

4 Custom structure: If you don’t like any of those

options, then you could customise your own (select

5
‘Custom Structure’). This entails using structure tags
which are essentially the name of the tag ringed by two %. Optional settings: You can make your own custom prefixes for your category
For example, if you wish for just the year to be displayed, URLs if you have a particular section that is likely to encompass a large number of posts.
you can write %year% in this box. It is possible to combine If you decided that your category base was /news/ then your URLs would look like this:
as many of these tags as possible so that the URL suits your www.yourdomainname.com/news with the name of the piece following. The same goes for
exact needs and this is the most flexible of all the options. the tag base. With some playing around, it is very easy to get the hang of.

WordPress for Beginners 59

 Getting started

Customise the screen and layout

MODIFY THE SCREEN LAYOUT TO WORK THE WAY YOU WANT

THE LAYOUT OF the screen with the post editing area

in the middle and the panels on the right for accessing
various features may suit some people, but it might not be
the best for everyone, and it is possible to customise this
and change the design.
By modifying the screen layout of the editing area
and panels you might be able to set up a more efficient
interface that suits the way you like to work. For example,
you can drag the bottom-right corner of the post editing
area to increase its size. You can then see much more of a
post as you’re working on it.
Another simple thing that you can do is to hide panels
you don’t need and to show hidden ones that you do
want. This is easily achieved with the Screen Options. If the
panels take up too much space leaving little left for post
editing, you can move them to the bottom of the screen by
using a one-column layout. An alternative is to simply roll
up the panels when they aren’t being used and this shrinks
them to just the header bar. This is useful if you have
all the panels on the screen.

“An alternative is to simply roll

up the panels when they aren’t
being used”

Customise the screen options

l
ria
to
Tu

01 Reveal the options 02 Add new panels

There is a tab at the top of the screen labelled Screen Options, and As you tick each item in Screen Options, a new panel is added to
when it is clicked a panel slides down revealing a collection of options the page. Tick Author, for example, and then scroll down to the
for customising the layout. Tick the items you need. bottom of the page. Now you can select the post author.

60 WordPress for Beginners

 EXCERPTS
The Excerpts panel is normally hidden, but can be made
visible. An excerpt is a short description or summary of a
post and it usually consists of just a few short sentences.
It is displayed in various places, such as search results and
news feeds. If you don’t enter one, WordPress will use the
first 55 words of the post instead.

Roll up
Some of the panels are large and take up a
lot of screen space. Click the arrow on the
Screen options right side of the header bar to roll them
Click the Screen Options tab and this panel
up. Click it again to roll them back down
appears. The most used items are ticked by
default, but they can be removed if they are
not needed. Tick the ones you like

Single vs double
Have one column with the panels at the Add and drag
bottom or two with panels on the right. This Excerpts panel is normally hidden. It
Switch to one then back to two and you’ll was ticked in the options, which added it
need to manually drag the panels back to the bottom of the page and then it was
dragged and dropped just below Publish

03 Set one column 04 Drag and drop

Set the number of columns to 1 in Screen Options and the post Set the columns back to 2 and you will be able to organise the sidebar.
editing area expands to the right of the screen. The Publish, Format Click and drag each panel to the right and drop it. It takes practice to
and other panels are moved down to the bottom of the page. get it right, but drag and drop is great for customising the layout.

WordPress for Beginners 61

Getting started

Get started with new posts

TAKE THE FIRST STEPS AND LEARN TO ADD BLOG POSTS
BUILD UP A following for your blog with regular attention. The second area is the large box in the word counter at the bottom is useful and shows how
updates so there is always something new for middle where you enter the text of the post. The much you have written. The third area is the Publish
people to read by clicking Posts>Add New in the panel. The Publish button makes the blog post live
Dashboard to add content.
There are only three areas you need in order to “Build up a following on your website, but the Preview and Save Draft
buttons are useful too. Once you have mastered
post an item. The first is the title box at the top and
you should ensure that it is short and describes the
for your blog with these areas you can explore other features like the
formatting toolbar, the media Upload/Insert icons,
content. Include key words that will grab a reader’s regular updates” categories and tags panels.

Top icons
These four icons enable you to
insert images, audio and video
into the blog post

Preview
If you want to know what the post will
look like without publishing it, click
Preview and have a look

Screen options
Don’t forget the Screen Options tab.
Click here to change the information
Formatting displayed on your site
The formatting toolbar provides
options for bold and italic, bullet
points, alignment and more

Categories
Assign the post to categories
and it will make the posts easier
for your visitors to find

SET THE POST’S VISIBILITY

Make your posts public, private or even password protected
When you create a blog you naturally Click the Edit link next to Visibility and
want everyone to be able to see it on your several new options are presented. One is
website, and in the Publish panel on the to stick the post to the front page. It’s great
right the visibility is set to public by default. for announcements and it won’t get pushed
This is exactly what is needed most of down by new posts. There is a password
the time. However, there may be certain protected option and a box appears for
posts that you want to restrict access to. you to enter the secret password when the
For example, a post might only provide option is selected. There is also a Private
information for members of a club and not option that prevents the general public
the general public. It could be restricted from viewing it. This is useful if you want to
with a password. Another possibility is to keep a post out of sight and you can always
limit certain content for the managers or a change the status at a later time if you then
department in a company. want to make it public.

62 WordPress for Beginners

THE ADD NEW
POSTS PAGE
2 Full screen
mode: When
working on a laptop
with a small screen there
are so many toolbars
A guided tour of the facilities available and panels that the post
when adding a new post editing area is tiny and it
is impossible to see more
than a paragraph of text.
Switch to full screen mode
with the second to last icon
in the toolbar and remove
all the clutter, maximising
the editing area. Even if
you’re working on a large
screen you may prefer
this clean look.

3 Save a draft: You

might start writing a
blog post and part of
the way through need to go
off and do something else.
Saving the work you have

1 The kitchen sink: The tooltip for the icon at the done as a draft enables you
right-hand side of the toolbar says Toolbar Toggle. It used to then quit and go away
to be called the Kitchen Sink and quite simply it shows from your computer. You can
or hides the second row of the formatting toolbar. It enables come back at a later time and
you to select the paragraph style or text colour, remove continue writing the post.
formatting, indent text and so on. It isn’t something that you There is a Save Draft button
will constantly use and so it is hidden by default. in the Publish panel on the
right and there is also a status
setting. Click the Edit link to
“As you become more see the options.

experienced and add

alternative themes you may
see different options”

4 Choose a format: The Format panel enables

5
you to choose different post designs. There are three
options in this default theme, but as you become Use the spellchecker: There is a very useful built-in spelling checker to
more experienced and add alternative themes you may see make sure that you don’t make any typing slips. Words that are not recognised
different options or extra ones added. The Gallery format are underlined in red so you can immediately see that they are wrong. English
is for posts containing images and there are Standard and isn’t the only language that is available in the spelling checker and clicking the arrow
Aside formats. Preview to see what each looks like. next to the icon is the way to select a different language from the drop-down list.

WordPress for Beginners 63

 Getting started

Format the text of a post

MAKING YOUR POSTS EASY TO READ IS ESSENTIAL
THE CONTENT OF your blog and the subjects that you
write about are clearly the most important factor when
building a website and trying to attract visitors, but
perhaps the second most important aspect is the way
that it looks. One long chunk of text does not look good
and if it is hard to read then it might put people off and
visitors could drift away. You can make a blog look good
and ensure that it is easy to read by formatting the text.
One of the ways to do this is to break the text down
into paragraphs and simply hit the Return key every few
lines. If the post is a long one, paragraphs might not be
enough and inserting subheadings can help readers see
where they are and what’s coming up in the next bit.
You might want to emphasise something, and bold or
italic formatting of the text can achieve this. Text can be
aligned left or right or even centred. When quoting from
elsewhere you might copy and paste some text and to set
it apart from your own copy you could want to make it
italic. All this is possible with the formatting commands in
the toolbar.

“Break the text down

into paragraphs; simply
hit the Return key”
Format to enhance the design
l
ria
to
Tu

01 Use different styles 02 Change the alignment

Any part of the text can be made bold, but first it must be selected. Normally text is displayed with a straight left edge and a ragged right
Click and drag the mouse over some text and then click the icon in the edge, but you can change this using the alignment icons. Place the
formatting toolbar to change it. Click again to remove the effect. cursor in the paragraph to change and click Align Left, Centre or Right.

64 WordPress for Beginners

WHAT’S THE PATH?
Down at the bottom of the window just above the
word count is Path followed by some words and
letters. This information is useful for experts who
understand HTML, the code used to construct
webpages as it tells them the order in which
the formatting tags have been applied. It is not
important when you are starting out, so you can The kitchen sink
just ignore it for now. Don’t forget to click the Kitchen Sink icon
to show the second row of icons in the
formatting toolbar. There are some useful
functions like the paragraph styles, colours,
indents and so on here

Align the text

The text is aligned with a straight left edge
by default, but you may want to centre
some lines or even right align them. An
icon on the second row straightens both
left and right edges

Colour the text

Bold and italics Adding a bit of colour can sometimes help
The first three icons enable you to make to highlight some text or to add interest to
text bold, italic or strikethrough. In fact, an otherwise dull and grey-looking post.
you can use combinations of these and Select the text and then click this icon to
underline to create special effects. You’ll pick a colour
use them a lot

03 Combine formatting styles 04 Colour the text

It is possible to combine effects. For example, after making some The text is grey on a white background by default, but it doesn’t have
text bold you can add an underline or make it italic too. Double-click to be this way as you can make it any colour you like. Click and drag
a word to select it and click Bold, Italic and Underline. over some text to select it and then pick a colour.

WordPress for Beginners 65

 Getting started

Add special features to the text

IMPROVE READABILITY WITH BULLET POINTS, LISTS AND INDENTS

IT IS EASY to type in a block of text, but it won’t look very

exciting to your visitors and it will be hard to read. We have
looked at breaking text up into paragraphs, alignment and
so on, so now let’s move on to more exciting things like
bullet points and numbered lists. A series of bullet points
is a great way to emphasise features, functions, items
and important things. Make them short and snappy and
readers can quickly scan them to get the information they
need. Numbered lists are useful too and you don’t even
need to type in the numbers because WordPress does it for
you. All you need to do is type the first one and click the
toolbar button. You can then add as many as you need.
There are other functions that are useful too, such as the
ability to insert special characters like copyright symbols
into your text, real fractions instead of using numbers
and slashes, Greek letters, the Euro currency symbol and
a whole range of others. Inserting these is simply a point-
and-click process once you get the hang of it. All these
effects will brighten up dull looking text and make your
blog more interesting.

“There are other

functions that are
useful too”
Use special formatting features
l
ria
to
Tu

01 Add bullet points 02 Add numbered lists

To add one or more bullet points, enter the first one on a line on its Instead of bullet points you might want to create a numbered list
own and then click the Unordered List icon in the formatting bar. Press of items. Just type them on separate lines and then select the first,
Return once to add another or twice to stop. click Ordered List, select the second and repeat the process.

66 WordPress for Beginners

 KEYBOARD SHORTCUTS
If you let the mouse hover over the icons in the
formatting toolbar you will see a tooltip. This is
a brief message that pops up beside the mouse
and it contains a useful tip or information. Some
formatting effects have keyboard shortcuts and
you can create bullet points, for example, by
pressing Opt/Alt+Shift+U.

Indent the text

Text can be indented and a large left-hand
Bullets and lists margin created in order to make your words
The two icons here create bullet points or stand out. It can be clicked more than
numbered lists. Used occasionally they can once and it increases the indent each time.
be very useful for getting a point across or Outdent reverses this
for presenting information

Custom characters
This icon displays a palette of characters that
are either hard to find on the keyboard or
are simply not available. Just point and click
on the one you want to insert in the text
Add interest
Add interest for your readers by varying the
text and the special effects that you use. It
is good to have something to break up the
text like bullets, indents, lists and so on

03 Insert special characters 04 Indent a paragraph

There are certain characters and symbols that you might want to use Sometimes you might want to make some text stand out from the
in a post that aren’t on the keyboard, such as the copyright symbol. rest, such as when you quote something or perhaps for speech.
Click the Insert Custom Character icon (Ω) and select it. Position the cursor in the text and click the Indent icon to do this.

WordPress for Beginners 67

 Getting started

Publish your blog posts

TAKING THE FIRST STEPS TO WRITING YOUR BLOG
ONCE YOU HAVE written something for your blog
website, the next step is to publish it. Up until a post
is published, it cannot be seen on the website and the
general public cannot access or read it. It may be stored in
the WordPress system somewhere, for example, as a draft,
but it is not on the website. Publishing makes it live on the
web and visible to everyone that wants to read it, unless
you have specified restrictions of course.
Publishing is a simple matter of clicking the Publish
button, but before you do this there are several checks
that you need to perform. Typing slips, missing bits of
information that are essential to a good site and so on
can be irritating for visitors, so you must check everything
before you publish it. Posts can be corrected afterwards,
but you will save time and effort if you get it right the first
time. In this tutorial we will show what you need to do to
ensure your posts are published correctly with the minimal
amount of work on your part. It’s great seeing your posts
on the web, so make sure they look their best.

“Publishing is a simple
matter of clicking the
Publish button”
Publishing perfect posts
l
ria
to
Tu

01 Text and title 02 Tags and categories

Make sure that there is a title for the post and that it is short and Posts can have tags associated with them and they can be
descriptive. It’s easy to forget it. Click the spelling check button in the assigned to categories. Have you filled in the information for these
formatting toolbar and make sure there are no errors. two panels? They are an aid to navigation for visitors of your blog.

68 WordPress for Beginners

MOVE TO TRASH Preview the changes
An option in the Publish panel is Move to Trash. It is Once a post has been published it is still
fairly obvious what it does and it deletes a post that possible to make changes to it by using
you decide to abandon. Instead of deleting it, it may the Update button. Before you do that
be better to put off publishing, such as by saving it though, check it with a preview
as a draft. However, even if you trash it, it’s not gone
and it can still be viewed on the Posts screen.

View the post

After clicking the Publish button in the
Publish panel, there are some subtle
changes, such as this link at the top of the
page to view the post you just created

Update a post
You can make changes to a post at any
time by choosing the Edit option on the
Posts>Posts screen. Click Update when
you are done
See the status
The document status is displayed in the
Publish panel where you will see that it is
now set to Published. Below it is the date
and time you clicked the Publish button

03 Preview the post 04 Publish the post

The most important task to perform before you click the Publish Finally, click the Publish button to make the post publicly available.
button is to check that it looks good. Click the Preview button in the You’ll see the post displayed on its own page – click Edit Post to make
Publish panel to open it in a new tab. Close it afterwards. changes, New Post to create another, or Close Sidebar to finish.

WordPress for Beginners 69

 Getting started

Schedule posts for future publishing

PUBLISH POSTS ON A SPECIFIC DATE WITHOUT LIFTING A FINGER

SUPPOSE YOU HAVE an important announcement

to make on your blog and you want to write it and
get it out of the way. However, you don’t want it to
go live on the website and in full public view just
yet. What can you do? It is easy, and the solution is
to set a publishing date that is in the future on the
day and time you want the post to appear.
This ability to schedule posts to be published
automatically on whatever day and time you choose
can be a very useful feature on occasions. In the
Publish panel you have all the controls you need to
set the publish date and time, so you just set it and
forget it, and let WordPress handle the rest. You can
view scheduled posts on the Posts page and also
modify the date and time in Quick Edit mode.
This is not the only way to delay a post though
and another option is to save a post as a draft.
Drafts are unpublished blog posts and you can
view them and then publish them if and when you
choose to.

“This ability to
schedule posts can be
a very useful feature”
Publish posts now or later
l
ria
to
Tu

01 Publish it now 02 Save a draft

If you want to publish a post immediately, all you need to do is click If you don’t want to publish a post straight away and want to
the Publish button in the Publish panel on the right. WordPress will delay it for some reason, one option is to save it as a draft. You can
automatically put today’s date on the post for you. view drafts at some other time and then publish them.

70 WordPress for Beginners

THE POST STATUS Past and future
A post can be published, scheduled, pending Enter the year, day, hour and minute the
review or draft. A published post is one that is live post is to be published. If it’s a future date
on the website and can be viewed by the general the post is delayed until that day and time. If
public. A scheduled post is one that has been it’s in the past it is published immediately
written, but won’t be viewable on the site until
some specific date and time. Draft and pending
review posts are unpublished.

Save the post

Instead of clicking the Publish button or
scheduling a post date, you can delay
publishing by saving the post as a draft. It is
stored safely until you review and publish it

Pick a month
Click Edit next to Publish Immediately in
the Publish pane and then you can pick the
month it is to be made publicly available on Button effects
your website from the drop-down list The text on this button changes to reflect
its function. Initially it says Publish, but it can
also say Update or Schedule. It says Schedule
if you return to a post yet to be published

03 Set a date 04 Modify the date

Click the Edit link next to Publish on the right and new controls are Under Posts in the dashboard you can list all the scheduled posts
displayed that enable you to set any date for publishing the post. by clicking the Scheduled link at the top. Clicking the Quick Edit link
Select the month and enter the date and time it is to go live. enables you to modify the date on which a post is to be published.

WordPress for Beginners 71

Getting started

Introducing categories
WE’VE GOT THE LOW-DOWN ON CATEGORIES INSIDE WORDPRESS

CATEGORIES ARE LIKE the filing system in create categories by game; one for football, a opt for hip hop, jazz, drum and bass and so on.
your local library. They help organise your posts second for rugby and a third for golf. If you’re WordPress is flexible enough to enable you to
into meaningful sections, enabling you to find more interested in music, however, you might create your own taxonomy, designed around your
every post of a particular type quickly and easily. interests, subject matter and posts. You can also
Rather than having a fixed set of categories
prescribed to you however, WordPress lets you “As your site develops, you add new categories at any time, so as your website
and blog develop, you can update your system
choose your own category structure to match
your filing preferences. So if you’re creating a
can update your system to to match changing needs – ideal for when a new
sport or music genre becomes popular and you
blog about different sports, you might want to match changing needs” want to keep up with the trend.

Sort your categories

The Category Listing shows all the
categories in your blog. You can sort
by the heading at the top and bottom
of the list

Add a new category

Add a new category by completing
this form – you only need a name
(although you can add the other
information if you’d like to)

Search categories
If you’ve got a really long list of
categories, search for the one you
want to edit or remove by entering its
name in the search box
Edit/delete
Hover over a category in the Category
Listing and you can access buttons to
Edit or Delete that category

Bulk Actions
If you’d like to delete multiple
categories at the same time, check the
tick boxes for the categories you want
to remove, then choose Delete from
the Bulk Actions drop-down

MAKE CATEGORIES WORK FOR YOU

Categories can be simple or complex – they’re flexible to your needs
Categories let you organise your content into convenient sensible choice would probably be Socks – more appropriate
pigeon holes, making it easier for you and your visitors to for you to file any post about socks, regardless of their colour,
find relevant content when browsing your blog. Exactly under that category. That’s not to say that colours don’t make
how you organise your posts and categories is up to you, good categories. If you’re organising photographs using a
but there are a few best-practice tips to arrange your blog, it might make sense to categorise them by colour.
categories so that they’ll work well for your current and A second best-practice approach is to make use of
future filing needs and help visitors navigate. WordPress’s ability to nest categories inside each other. This
First of all, don’t confuse categories with tags. Categories enables you to create a high-level category that contains
form the overall semantic hierarchy for your blog and should sub-categories, providing a phone-book-like experience of
ideally be named so that more than one post will end up drilling down to the information in a post.
inside the category (eventually at least). For this reason, it By naming categories appropriately and nesting groups of
doesn’t make sense to name a category Pink Socks unless categories inside top-level divisions, your filing system
you expect to write several posts about pink socks. A more will work well now and in the future!

72 WordPress for Beginners

MANAGING
CATEGORIES
Categories are really easy to set up
and maintain inside WordPress

2 Edit a category: Editing a category is just as easy as creating a new one. You can edit
categories in two different ways. The first involves hovering over the category you want
to edit in the list you have created, then choosing the Edit button. This will load a form
identical to the Add New Category options, but with all the information for your category pre-
loaded. The alternative way to edit is to choose the Quick Edit option when hovering over the

1 Create a new category: Creating a new category name. This loads a smaller form within the Category listing, but is a limited method as
category is easy. At minimum you need to give it a name, it only has the option to edit the name and slug.

3 Sort the
and click the Add New Category button at the bottom
of the Add New Category form. If you’d like to give readers category
more information about what the category will contain, listing: Even if
add a description. You can also nest categories inside each you have a very long list
other, creating a hierarchy. Finally, the slug is automatically of categories, you can find
generated, but you can specify your own slug (a few words the category you want
that describe a post or page) for search engine optimisation. to edit or delete without
any fuss. Each of the four
headers in the category
listing is clickable. When
“Even if you have a very you click on a heading, the
category listing is resorted
long list of categories, you using that heading as the
can find the category you sort order. Click once to
arrange alphabetically or
want to edit and delete numerically, or a second
without any fuss” time to reverse the order.

4 Delete categories: From time to time you’ll

5
want to trim down your list of categories. WordPress
makes this nice and easy, but don’t worry, you won’t The Uncategorized category: In WordPress every post must have
lose any posts you’ve added to the category you delete. a category that it belongs to. This works fine when you’re nice and organised,
To remove a category, simply hover over in the Category but sometimes you’re in a rush, or accidentally add a post without ticking the
List, then choose the Delete option from the hover menu. category boxes you want to assign it to. No matter; WordPress has a special section
Confirm your wish to delete the category and it’ll be gone. it assigns all posts without a category to: Uncategorized. This category cannot be
All posts assigned solely to that category will be reassigned deleted, but you can rename ‘Uncategorized’ by editing it just like any other category
to the Uncategorized section. in WordPress, for example, changing it to Miscellaneous.

WordPress for Beginners 73

Getting started

Understanding post tags

LEARN ALL ABOUT HOW TO CREATE, USE AND MAINTAIN TAGS
WHERE CATEGORIES PROVIDE a rigid library- a post under a Sixties Music category and tag the have been about a band that was popular in 1962,
like filing system, tags are more about abstract same post with Fancy shoes, Los Angeles, Bread and if the lead singer wore fancy shoes and you tag
associations. What is a tag? Put simply, it’s a marker butter and Aliens if they are relevant. the post with the type of shoes, the visitor to your
to indicate the contents of a post. One post can When someone reading your post clicks on one site can then find all other posts that mention that
have many tags, a single tag or no tags at all. Tags of the tags, WordPress will display all the other posts specific shoe or shoes in general (at least those that
are not at all strict or limiting – you can happily file that have the same tag, so although the post might you’ve tagged appropriately).

MAKE THE MOST OF TAGS

Tags offer a great alternative taxonomy to categories
While categories are great for creating a grouping by alternative structures so that, for
structured, organised and strict filing system for example, you could tag anyone who died under
posts, they don’t really let you to get creative the age of 60 with Young. This enables visitors
with associations. For example, if you’re running to your website to follow a natural path of “Who
a blog that provides obituaries for well-known else died young?” when reading your blog,
public figures, you might categorise your posts without forcing them to be aware of the age of
by the area for which the celebrities were know each respective person when they died ahead-
– TV Personalities, Politicians, Musicians, Actors of-time (as would be the case if you categorised
and so on. This makes sense because a visitor to by the celebrity’s age at death).
your site would most likely think of celebrities in A lot of first-time WordPress users find this
this way, so it’s a good solid structure to adopt. concept difficult to grasp, but think of it as a
But what about where there are looser less structured way of grouping posts. Tags are
associations shared by posts? Tags are ideal for better than categories for loose connections.

Add new tag Batch deleting Edit and delete Sort the list Search
Add tags before you create If you’d like to delete multiple tags simultaneously, Edit or Delete a tag by clicking on the Sort the list of tags by clicking on Search for tags within a long list
the posts by using the Add tick the boxes for each tag you want to remove, then options that appear when you hover the headings to arrange the list by using the Search Tags feature
New Tag form use the Bulk Actions drop-down to choose Delete over a tag in the Tag Listing alphabetically or numerically built right in to WordPress

74 WordPress for Beginners

USING POST TAGS
Managing tags is very similar to managing categories, so
master one and you’ll have them both under your belt

1 Add a new
tag: If you’re
feeling super-
organised you can
create your tags before
you create your posts,
but do bear in mind
you can create a tag
automatically when
you post a new blog
entry simply by adding

2
the tag of your choice
at the time of posting. Edit a tag: Editing a tag is just as easy as creating a new one. You can
Complete the form edit tags in two different ways. The first involves hovering over the tag
under Post Tags with, at you want to edit in the Tags listing, then choosing the Quick Edit button. A
minimum, a tag name, form will appear directly in the Tag Listing enabling you to update the tag name
and click the Add New and tag slug. Alternatively, if you want to edit the description as well, click on the
Tag button to save your Edit button instead – this will load a form identical to the Add New Tag form,
tag ready for later use! but with all the information for your tag pre-loaded.

3 Delete tags: Sometimes

you might have a change
of heart over a tag you’ve
used in the past, and you’ll want
to delete one or more tags so they
no longer appear on your site. This
is fairly simple to do and won’t
affect any of your posts other than
by removing the tag in question.
Simply locate the reference you
want to delete in the Tag Listing,
hover over it and choose the
Delete option from the pop-up
menu – it couldn’t be simpler.

4 Sort the
post tags
listing:
After a while you’ll
have a long list
of post tags, but
even with this you
can find the tag
you want to edit
or delete easily!
Each of the four
headers in the tag
listing is clickable.
When you click on

5
a heading, the tag
listing is resorted Search for tags: A quick way to find the tag
using that heading you want to edit or delete, especially when you
as the criteria. Click have hundreds of tags set up, is to use the Search
once to organise Tags function inside WordPress. Open the Post Tags
alphabetically or screen, then enter the name, or partial name, of the tag
numerically, or a you want to find. Once you click the Search Tags button,
second time to the list of tags will be reduced to a more manageable
reverse the order. length, making it easy to select the tag you’re after.

WordPress for Beginners 75

Getting started

Uploading new media

USE THE ‘ADD NEW’ SUB-CATEGORY TO UPLOAD TO YOUR BLOG
AS THE NAME heavily implies, the Add New sub- space then you will need to purchase a Space Upgrade few seconds (depending on the size of the file) and
category in the Media section enables you to upload and if you intend to upload video files you will have will then be added to your media library, after which
new media to use later with your posts and pages. This to purchase VideoPress. Uploading images is easy. you can choose what to do with it, such as attach it to
screen also lists your allowed file types and displays Simply click on Choose File, locate the image you wish a particular post. Here we guide you through the Add
your remaining allocated upload space. If you intend to upload, select it by clicking Choose and then click New page, highlight any problems you may encounter
to upload audio files or want to increase your available Upload. The uploading process only usually takes a and show you how to get around them.

UPLOAD TROUBLESHOOTING
If you experience problems uploading files then help is at hand
If you experience problems uploading certain or PaintShop Pro enable you to resize and
files then there are various causes and solutions. compress images quickly, but there are plenty of
For example, if the image file you are wishing to free packages available too such as GIMP, Picasa,
upload is too large and your connection times GraphicConverter and PhotoFiltre. Ensure that
out then you should try uploading a smaller the colour profile of every image you upload is
version, which requires optimising the image saved in RGB (not CMYK, for example).
itself and could mean resaving it as a specific file Other issues may arise in regards to the file
type. As a rule of the thumb, JPEG works best for names. It is best to stick to letters and numbers,
images with gradients, such as photographs, GIF and if it contains other characters then they
is best for blocks of repetitive colour (including will be removed or replaced with a dash. If
logos and line art) and PNG should be used your connection speed is slow then you can try
to preserve partial transparency and large clearing out some of your temporary internet
amounts of colour. Packages such as Photoshop files before attempting to upload again.

WHAT ADD NEW

ENABLES YOU TO DO
It’s a simple page, but there is
more to it than meets the eye

1 Add new media: Uploading new media is a simple

process that will only take a few seconds. With the new

2
4.0 Media Library, you can simply click on Media in the
Dashboard sidebar and you’ll be presented with an image Manage new media: After you have uploaded your selected piece of new media,
grid. A drag and drop will appear at the top of the grid. You it will be added to your media library. You will now be able to apply all of the options we
can also select ‘Add New’ from the sidebar or at the top of explored on the media library pages (page 42). Also, if you move your cursor over the
the Media Library page. See step 4 for the two different name of the file the option to View will appear. Click on this to be taken through to a separate
uploading methods. screen that will provide other info such as size and date published.

76 WordPress for Beginners

 Uploading
By clicking Select Files you will be able
to choose new media files to upload
Click for help
If you require further assistance then
click on the Help drop-down menu to be
guided through the options on this page

Upload size
You will be provided with the Space upgrade
maximum upload file size, so If you find that your website is running
ensure your media fits within out of its 4GB of space, you can buy
these constraints extra storage by clicking this link

3 Attach new
media: When
you upload a new
media file it will appear in
your media library as being
unattached (as indicated in
the Attached To column). To
attach a new media file to
a post, click on Attach and
you will be able to perform
a manual search to find a
post or page to attach your
new file to. Type what you
want into the window, click
on Search and you will be
presented with options. Click
on one and press Select.

4 Upload method: There are

two options available for you when
it comes to uploading your media,

5
either you can go for the traditional click and
locate file, or you can drag and drop directly Extra help: If you require additional help with using the
from your computers files into the browser Add New media page, there is a drop-down Help menu in the
and the files will upload. If you have any top-right corner of the screen. Click on this and a large text
problems with the drag and drop uploader window will roll down from the top of the page that clearly outlines
you can opt to upload via the browser what you can do on this page and talks you through your two
uploader instead, which works much like a uploader options. Once you have read and digested this information,
traditional upload. click on Help again to collapse the window.

WordPress for Beginners 77

Setting up
80  The ultimate guide
to hosting 114  Create, apply and manage tags
in your posts

84 up a self-hosted site

Download, install and set
116 your website sidebar
Manage a series of links in

88 WordPress blog
First steps to creating a
118 drive visitors to your blog
Improve your permalinks and

92 WordPress blog posts

Learn to edit your “For more creative
control over your blog,
96 WordPress posts
Embed external media in your choose a web host” © 1&1 Hosting

100 images in WordPress
Add a gallery of

102 your WordPress blog

Add video and audio to

106 Manage the WordPress

Media Library

108 Organise your
WordPress posts

110 Managing blog post

comments in WordPress

112 your WordPress blog

Customise the categories in

“WordPress has
become synonymous 96 EMBED EXTERNAL MEDIA
with the term blog” Find out how to bring your blog to life
with these embedding options

78 WordPress for Beginners

80 FIND A HOST 118 MASTER PERMALINKS 116 MANAGE LINKS
Discover the best web hosts Get to grips with permalinks and Take charge of the links that display
for your WordPress site start increasing your site traffic in your sidebar

102 ADD VIDEO TO YOUR BLOG

Learn how to publish posts with
embedded videos and YouTube links

WordPress for Beginners 79

Setting up

Getting hosted
with WordPress
CHOOSING THE RIGHT WORDPRESS HOST REQUIRES RESEARCH, PATIENCE,
AND A GOOD UNDERSTANDING OF HOW THE PLATFORM WORKS
THE BEST ADVICE we can offer you when choosing a new WordPress host is to course important, but even more so is the reputation of a host and the reviews of
make sure that you understand what is required to offer a reliable and speedy its customers. If you can find a host who offers fast and free support, and who is
experience for you and your visitors. There are many technical areas that need to be able to give you some help along the way, you will be half way there. If they have a
researched to ensure a positive online experience over time and some of these are deep understanding of WordPress and the way it works, you should be assured of an
not obviously promoted by hosts. We will cover the most obvious advice and also experience that is fit for your site visitors and the way you want to run your blog. It’s
some areas that are easily overlooked, and hopefully at the end you should have a time to see what a good host should be capable of providing to a WordPress blogger
good idea of what you will need to run your WordPress environment. Pricing is of and their blog.

80 WordPress for Beginners

 Managed WordPress hosting
really works
Some web hosts offer managed WordPress hosting which takes away
most of the hassle when initially installing the software. It is not just
designed to make things easier, however, because a hosting setup that
is purposely designed for WordPress will ensure the fastest experience
for your visitors and much less administration over time. Most packages
will automatically install WordPress version updates and some will even
ensure that all of your plugins are kept up to date all of the time. Even more
importantly, they are built on infrastructure that is designed to work with the There are many upsides to managed hosting if you are prepared to pay
way WordPress stores data and this will ensure that you do not need to keep
updating your package to account for database limits. Backups of your data and traffic limits may be restricted unless you are prepared to upgrade. You
are also usually included for peace of mind and throughout the experience, will need to decide if the managed route is right for you and most of your
you should not just see faster performance for your visitors, but much saved decision making will come down to how optimistic you are for the potential
time in administering the site on a daily basis. The only real downside is cost of making money from your venture in the future. Managed hosting will
because managed sites will almost always be served on a singular basis always be worth considering.

Shared hosting is not always

an ideal solution
Shared hosting is a very common platform for hosts to sell WordPress
solutions on and their main advantage is that these plans are often cheap
in comparison to others. Boasts of unlimited bandwidth and disk space are
all very well, but you should be aware that on a shared plan you are sharing
servers with other users. This may cause intermittent performance from time
to time and likely a generally slower service than you would experience from a

Top tip
dedicated server for your site. There is a place, however, for shared hosting and Shared hosting can work for those
that is when starting out. If your potential host offers an easy upgrade path to who are starting out in the world of
a singular server for your site then you may wish to risk a shared plan while you WordPress blogging, but is not ideal
ascertain the exact needs for your online presence. Shared hosting can work as for long-term usage Try to understand your
a short-term solution and it will save you money while your are testing. requirements and learn
as much as possible about
how WordPress works
before you begin
researching potential
hosts.
Always look for
‘WordPress’
It can feel romantic to decide to set up every single part of your hosting
manually and there are of course many advantages to doing so, the main
one being a forced gain of knowledge during the process. However, you
can still maintain a lot of control over your WordPress installation if you choose
a provider that will do a lot of the legwork for you. From the initial installation
of the software to systems that are designed to work alongside WordPress, a
host that offers ‘WordPress’ hosting will likely be a better bet for the majority
of bloggers. Database limits should be ample and because so many other
WordPress installations are working on their servers, the entire space should be
tried and tested for added reliability. It is basically a half-way house between
standard hosting and Managed WordPress setups and works well for the
Hosts dedicated to WordPress majority of users.
tend to offer a more reliable
experience
“Pricing is important, but even more
so is the reputation of a host”
WordPress for Beginners 81
Setting up Top tip
Almost every web
host will boast uptime
figures of +99%, but you
should do your research
What to ensure that these
numbers are
should you realistic.
really pay
for?
There is no definite advice for what features should be included when
choosing a web host, but you should be aware of a trend in the industry
of selling individual features at separate prices. Web hosts will usually sell
domains, but it is often cheaper to buy one from a dedicated supplier. Some
also offer services such as domain privacy, Outlook support and other web
related features that can soon add up to a much higher cost than you initially
expected. When deciding what you need, make sure that the main features are
available at reasonable prices and do not be afraid to use multiple organisations
for your hosting and domains. Sometimes it can actually be advantageous to
use more than one company for resilience and to ensure that not all of your
online eggs are in one virtual basket. Pricing should always be obvious and very
Pricing can be complicated,
easy to understand.
but it really should not be
that way
“Be careful when checking all of the
features a host offers”

Fully understand the technical limits of WordPress hosting

Depending on how long you expect to run a WordPress blog
and what your ambitions are, you should be very careful when
checking all of the features a host offers. MySQL databases are
required for WordPress and checking the available limits is crucial
to running and adding content to a blog over time. Some hosts
limit MySQL database sizes to 100MB or even lower and even
if these appear to be ample at the start, after a year or two you
may hit the limit and need to transfer your database contents to
another provider. The problem is that moving databases requires
lots of technical knowledge so if you can be assured of longevity
right from the start you will save yourself a lot of trouble in the
future. Remember that many providers do not publicise the
maximum limit for their databases so make sure you ask before
signing up.
Be aware of every single specification you require before you sign up

Other specifics to be aware of

The trend for hosts to advertise disk space and bandwidth limits is useful
as a guide, but there are other technical areas that you should familiarise
yourself with before choosing a host. WordPress can work with a PHP
Memory limit of 16GB, but you should be looking for 64MB to ensure that the
site will run speedily over long periods. Also, as WordPress is based on MySQL
and PHP, always opt for a Linux hosting package - other options will work, but
the benefits from using Linux will be felt every time you use WordPress. You
should also consider more general aspects of a host such as their available
times to deal with problems and if they offer a telephone number for support
queries. Read reviews on each host to gauge the general view of their services
and don’t always be swayed by price. Offers that look too good to be true
usually are and, as we all know, you almost always get what you pay for. Take
your time investigating all of the available WordPress hosting options because
the wrong initial decision could cause months of pain, wasted time and cause
you much frustration. Make sure you cover every single base when choosing a new web host

82 WordPress for Beginners

Four of the best hosts
A DIVERSE COLLECTION OF WEB HOSTS AND SERVICES FOR HOME USERS, SMALL BUSINESSES, DESIGNERS AND DEVELOPERS

Pagely Flywheel
pagely.co.uk getflywheel.com
£14.98-£35.96/$64-1799 per month £4.29-£7.16/$15-$75 per month
Pagely offers a managed WordPress hosting platform that gives customers innovation,
speed, scalability, and security. Its specialist nature means that it concentrates itself on Flywheel offers ‘simple WordPress hosting and management’. It has a strong focus
enterprises and big brands. The beauty is all this knowledge is passed down meaning on designers and creative agencies, with a set of powerful tools to match. It provides
smaller customers get all the benefits. This is an ideal host for expanding businesses. easy collaboration, easy billing and the option to show off sites before going live.
Plus, it has a host of free WordPress-friendly resources to help build fast, secure sites.

1&1 SiteGround
www.1and1.co.uk www.siteground.co.uk
£0.99-6.99 per month/$11.60-$33.28 £2.75-9.75 per month/$29.00
SiteGround offer web hosting ‘crafted with care’. By default, they offer free domain names,
1&1 are a firmly established web host offering a wide range of hosting services. 24/7 technical support and security. There packages are aimed more at the individual and
They offer ease of use, a host of tools and features and good prices. If you are a offer a set of features for those just starting out through to ‘real web geeks’ eg preinstalled
casual blogger or photographer they have a package for you. If you are looking Git, at very affordable prices.
for something for larger projects and top performance they will have a WordPress
package for you.

WordPress for Beginners 83

Setting up

TUTORIALOBJECTIVE
Download, install and set up Download, install and set
up a self-hosted site
WordPress for first use

TIME REQUIRED
15 mins

SKILL LEVEL THE PATH TO A PERFECT BLOG STARTS RIGHT AT THE BEGINNING. HERE WE
SHOW YOU HOW TO DOWNLOAD, INSTALL AND SET UP WORDPRESS
WORDPRESS HAS BECOME synonymous with the term blog, The WordPress site extols the virtues of its ‘Famous
and with good reason. The web publishing platform is free 5-minute installation’ and undoubtedly WordPress can be
to download, easy to install and simple to use. Add into this installed in five minutes, when you know what you are doing.
already-appealing mix the fact that there are continual updates However, for those not so well associated with the WordPress
and development, a swathe of themes and literally thousands platform the process is a little more in-depth. Here we look at
of add-ons and it’s hard to see what’s not to like. the basics; where to download the latest version of WordPress
WordPress itself comes in two distinct flavours: either and how to install. Plus we take a more in-depth look at
hosted via www.WordPress.com, as we’ve explained on p18, setting up a MySQL database and how to transfer files, ready
or self-hosted via www.WordPress.org. In this tutorial we are for installation, via an FTP client. Finally, we run through the
focusing on the self-hosting option, which relates to users who installation process and take a peek at how to modify some of
already own a domain name and web space. WordPress’s essential settings.

84 WordPress for Beginners

01 Get WordPress 02 Web host account 03 Create a database
The first step to a successful WordPress blog is downloading Before installing WordPress a database needs to be created. First locate the Database section and MySQL Database
and installing the WordPress platform. To download the How this is achieved will differ from web host to web host. Wizard; if not available ask your web host how to create a
latest version of WordPress head to http://WordPress.org/ We are going to demonstrate a typical set up using cPanel. database, and click. Step one is Create A Database, add a
download and click the Download WordPress button and First of all you’ll need to log in to your web host account, name in New Database and press Next Step. Now add a
save the file to the desktop. The download is packaged as a these details should have been provided by your web host Username and Password, add Password again and press
ZIP file, unzip the file ready to install. when the account was initially set up. Next Step. Now click All Privileges and Next Step.

04 Database details 05 Settings 06 Get connected

Head to the location of the WordPress download, ie the The only settings that need to be changed are ‘DB_NAME’, The next step is to upload all the WordPress files to the
desktop and locate the wp-config-sample.php. Rename the ‘DB_USER’ and ‘DB_PASSWORD’. Ignore the other settings. desired web space. This is done via an FTP program such
file to wp-config.php and then open in your favourite text Now substitute the putyourdbnamehere text with the name FileZilla, which from http://filezilla-project.org. Once
editor, HTML authoring software, ie Notepad, Dreamweaver. of your database, substitute the usernamehere text with the installed, open and go to File>Site Manager and enter the
At the top of the page under MySQL settings is where the username and substitute the yourpasswordhere text with Host address, ie ftp.mywebsitename.co.uk and username
database and user details need to be added. the appropriate password. Now save the file ready to upload. and password as provided by your web host. Press Connect.

07 Create directory 08 Transfer files 09 Installation script

Once connected there will be two windows, the left Now double-click the directory folder just created to see After all the files have been uploaded to the web host
displaying local files and the right showing folders on the an empty directory listing. Go to the left windows and use server open the browser of choice and enter the following
server. Double-click the www folder (this will differ from both to locate the WordPress download. Make sure the address, www.yoursite.co.uk/blog/wp-admin/install.
host to host, ie HTML) in the top-right pane to get to the WordPress folder lowest down the structure is selected. Now php. Yoursite.co.uk is the domain name where WordPress is
root. Now right-click in the bottom right pane, select Create select all files, right-click and select Upload to transfer all the installed and blog is the name of the folder. If all details are
directory and name. WordPress files correct the install screen appears.

WordPress for Beginners 85

Setting up

Domain name and

web space
To get a WordPress blog online a
user needs their own web space and
a domain name. Here we recap how
to get both, plus we tell you about
the alternative choice of a hosted
option at WordPress.com…
The first requirement of any WordPress installation is the
need for web space. There are thousands of web hosting
companies who will happily supply space for a small
fee. However, to determine what sort of web hosting
package is needed the user needs to decide how much 10 Complete setup 11 New password
web space is needed and how much traffic is expected. Give your blog a title, create a new username for logging WordPress automatically displays a notice telling the user
Typically, users can get 200MB of web space and into WordPress and leave the password blank. Add your that they are using the auto-generated password. It also
gigabytes of traffic for a very small fee. But if more space email, leave the “Allow…” box ticked and click Install states, Would you like to change it to something you’ll
is likely to be needed, ie a photo blog, go for more. Don’t WordPress. After a few seconds you’ll be told installation remember easier? Click Yes, Take me to my profile page.
worry too much about traffic to start with. New sites are is complete and shown your username and a random
not likely to get huge amounts of traffic immediately Now add a new password under About Yourself, enter
password – make a note of this before clicking Log In to log again and then press Update Profile. The new password
and this can be changed at a later date very quickly
and easily. in for the first time. will now be active.
A small UK company that provides cheap and
efficient hosting is Z-Host (www.z-host.co.uk). It
provides packages from as little as £15 a year (100MB
of web space and 10GB of monthly traffic), perfect for
first time bloggers. Alternatively, choose 1GB of web
space and 40GB of monthly traffic for £60 a year. At the
other end of the scale there is a popular choice with
web designer Media Temple (www.mediatemple.
net). This offers packages from $20 a month (approx
£15) but offers gigabytes of storage and 1TB network
transfer rates. Other reputable web hosts to consider
are Fasthosts (www.fasthosts.co.uk), 1&1 (www.1and1.
co.uk) and Heart Internet (www.heartinternet.co.uk).
Once a package has been bought and paid for the web
host will send all the details (username, passwords etc)
needed to take control of the web space.
To host a WordPress blog at a desired URL, ie
mywebsite.co.uk, a domain name needs to be
purchased. Try www.123-reg.co.uk, this offers .co.
uk domain names from £2.99 a year and .com domain
names from £9.99 a year. Another well-respected 12 General settings 13 Writing and reading
domain name supplier is Easily (www.easily.co.uk). Click Settings to extend the menu and select General. This The Writing settings includes the option to choose the
If the prospect of finding web space and getting a section allows users to change the Blog title and tagline default category. This will be applied when a post is not
domain name seems too much like hard work, there is
as seen in the header. There is the option to change the given a category. Plus, there is the option to set up Remote
the hosted option. Go to www.WordPress.com, click
Sign Up Now and all that’s needed is an email address. original email address added at setup. Change the New User Publishing. This allows users to post from a desktop without
This gives a new user a unique WordPress URL, ie Default Role, choose the correct time zone and date and logging in. Reading includes the option to decide how many
myname.WordPress.com and hosts the account. time format. Press Save Changes to keep any new settings. posts are on display on a single page.

Find a domain name to create an identity for your blog

14 Media settings
The Media settings determine the size of images when placed in a post. WordPress allows users to select the original size of the
image or a pre-defined option set up here. Change any of the settings to the desired size. This makes sure that when a specific
Try the free ‘no hassle’ option at www.WordPress.com
option is selected the image will be a uniform size.

86 WordPress for Beginners

 The Settings
Panel
GETTING TO GRIPS WITH THE
MOST COMMON SETTINGS FOR
YOUR NEW INSTALL
IN THIS TUTORIAL we are going make some small
changes to the settings of our theme. So from a
fresh install, log in to the admin panel and within
the dashboard you will see the Settings Panel on the
bottom left. The Settings panel should be the first
place we come to once our initial installation has been
done because there are certain things that need to be
set up from the off. In here we have seven options that
we can make changes to: General, Writing, Reading,
Discussion, Media, Privacy and Permalink. However,
we only really need to make small adjustments to a
few of these settings and some are more important
than others, like the Permalink settings. So, let’s take
it from the top and make the required changes for a
solid install.

01 The General Settings 02 The Discussion Settings 03 The Permalink Settings

At the top of the Settings panel you will find the ‘General’ Select Discussion under Settings to configure how your The other options in Settings are not really important enough
settings option. If you click to open that up you will see first blog’s readers can comment on your posts. The default to warrant an explanation and can be left as is. But the last
and foremost an option to change your theme’s title. You choices should be fine for most people, but a few settings option, the ‘Permalink’ settings, certainly does and is probably
will also have an option to include a tagline here. However worth checking out are the order in which comments are the most important one, so let’s open that up to take a better
the tagline is not always wanted and can just as easily be displayed underneath your post (by default, it’s the oldest look. As you will see you have different ways your posts will
deleted if you so wish. These two options are really all you first). You may also want to limit email notifications when be shown inside the URL and by default the top one should
need to change in here as everything else can be left as it comments are posted, plus choose whether to approve be selected. However this is probably the least useful one to
is for now. Once you have added in your website’s title and all comments manually, or allow users with one approved use. The best ones to use here are the second or third option
perhaps your tagline, you can scroll down to the bottom comment to post elsewhere without restriction. Check the as these include the ‘slug’ of your post which is good for SEO
and click the Save button. Comment Moderation section for ways of stopping spam. purposes. Choose which one to use then click Save.

WordPress for Beginners 87

Setting up

TUTORIALOBJECTIVE
An overview of the basics needed to
get a blog online First steps to creating
TIME REQUIRED
30 mins

SKILL LEVEL
a WordPress blog
EVERY GOOD WORDPRESS BLOG CONSISTS OF TOP-QUALITY POSTS. HERE WE
SHOW HOW TO CREATE WELL-WORKED POSTS WITH TEXT, IMAGES AND VIDEO
GETTING A WORDPRESS blog up and running is much Posts window provides enough ammunition to ensure a post is
simpler than first time, casual and future expert users might well laid out and neatly styled with engaging content. The title
think. Once past the installation process, getting a post online is the first and perhaps most important element of any post;
takes literally a matter of minutes. make it relevant and appealing. Next is the text; again make
The base of any blog is its posts and getting these right are this engaging and style it so it’s readable. Beyond text the
paramount to a successful, informative and compelling blog. It more obvious additions are images and video. Finally, before
is worth noting that the styling of a blog post is predetermined publishing it’s time to add in tags and create categories to
to a certain extent by the current theme. Nevertheless, the make posts more search-friendly.

01 Log in 02
There are two
The
options here, first Dashboard
visit the URL of the The Dashboard is the
blog, ie http://www. hub of everything that
myblog.co.uk/ happens in WordPress.
blog. If the default Users will need to
WordPress theme pay attention to the
has not been changed it will have a Log in link under Meta. Click menu on the left and to a lesser degree Right Now and QuickPress.
the link and add your details. Alternatively, the log in screen can The other modules Incoming Links, Other WordPress News etc can
be accessed via http://www.myblog.co.uk/blog/wp-login.php. be hidden to free up screen space. Click Screen Options and the
Remember to bookmark the page for future use. checkboxes of the modules you want removed.

138 Beginner’s guide to WordPress

88 WordPress for Beginners
03 At a Glance 04 The Posts menu 05 New post
The Right Now module gives users a quick summary, or an To add or edit posts, unsurprisingly the Posts menu is the The new post window is divided into two sections, the
at a glance guide, to what is the current state of the blog. place to start. Roll the mouse over the Posts title bar and title and the body. The first text box in Add New Post is
For example, 1 Post indicates there is one post in the blog. the menu will expand to reveal the post options. To edit a where the title goes. Add the title of the new post here.
All the elements in the Right Now module link directly to current post click Edit and WordPress will reveal all the posts Remember, the font, style, size and colour of the post title
its related counterpart. Click the title bar on a module to stored on the database. Click Add New and the new post will probably differ from what you see as this is determined
expand/collapse. window will make an appearance in the style sheet.

06 Post text 07 Simple styling

The body of the post is placed in the second text box and this will contain all the text and The Visual post editor is a WYSIWYG editor, it is much like using word processing software
images found in a single post. To add the post text simply type in the desired text like you such as Microsoft Word. Click the last icon on the toolbar, it’s called Toolbar Toggle, to view all
would do in any other document. Remember to abide by any standard grammar rules, ie options. To bold the first sentence, select the text and press B, alternatively use the keyboard
paragraphs and so on. shortcut Ctrl/Cmd+C.

08 More styling 09 Resizing text

To add more styles to the text simply select and click the appropriate button. ‘I’ adds the The text in a post cannot be resized in the more traditional sense. The text size is
italic effect, ‘ABC’ adds the strikethrough effect, ‘U’ adds an underline and ‘A’ allows users predetermined by the theme currently in use. However, the Paragraph drop-down list has a
to choose a new colour for the text. Use the Align buttons to place your text to the left, in number of options, ie Paragraph (the default option), Heading 1, Heading 2 etc, Heading 1 is
the centre or to the right. the largest, 6 the smallest and Paragraph normal.

WordPress for Beginners 89

Setting up

Learning how to
manage your blog
When a blog is up and running it will
need to be loved and cared for. Here we
include a few more tips and techniques
you will need to know
Getting posts on to a blog is the main priority for many
bloggers and the WordPress (2.7 onwards) Dashboard
provides a quick and easy answer. Quick Draft allows users
to create a draft post directly from the Dashboard. This is a
slimmed down version of the Add New Post page, which lets
you quickly start a post by creating a title and adding some
body. Later on, you can edit it and add additional elements,
10 Preview post 11 Save Draft
The post is now beginning to take shape and it is a good If the post is in good shape save a draft of the post by
plus publish it, from the Posts section. time to see exactly what the post currently looks like. Click pressing Save Draft. This will save the post and reload the
Editing and updating posts is a simple but essential task Preview in the Publish module, this will open another page allowing the user to continue adding to the post. The
and a visit to Edit>Posts will reveal all the posts in a blog,
window to display the selected post. Keep the window draft of the post can be found via Posts>Edit where it will be
including Drafts. Each post is assigned a number of quick
open and refresh when more has been added to the post. tagged as a Draft.
access options that only appear when the cursor is placed
over the post title. The options on offer are Edit, Quick Edit,
Delete and View. Edit takes a user to the standard post
allowing users to edit as normal. Remember, when you’ve
finished editing a post, hit Update Post to save any changes.
The Quick Edit option works within the Edit Posts window
and allows for users to neatly and quickly change categories,
tags, title, etc. The Delete and View options do exactly what
they suggest.
Beyond editing a post there are a few additions that we
have yet to mention that will make your blog experience
better. Links are a key component of a website, and
WordPress is no different. The standard toolbar includes two
link options Insert/edit link and Unlink. To add a link select
the desired text and press the Insert link button (top row).
In Link URL add the URL to link to (needs http:). By default,
WordPress includes http://, so if copying in a URL remember
to check that the http:// has not doubled up. If this is the
case then the link will not work. Ticking ‘Open link in a new
window/tab’ means your original post is kept in its original
browser tab or window so your reader can easily get back to
12 Upload an image 13 Insert options
Post text is frequently accompanied by an image. To insert There are a whole host of options that can be associated
it. There is the option to add a title, useful for searching and an image into a post first, place the cursor in the position with an image before it is inserted into a post. The name of
finally there’s an option for easily linking to other posts on where the image is set to appear. Now click the Add the image is automatically used as the title, this is the text
your blog.
Media icon. Now click Select Files, browse to the location that will be seen in the browser when the cursor is placed
of the desired image, select, press Open and the image is on the image. Caption text will appear directly underneath
uploaded to the Media Library. the text.

Use the Quick Edit option to quickly change categories, add

tags and modify the title

14 Image alignment 15 Image size

Before inserting an image the Alignment options need to be Users can choose to select an image size before adding to a
determined. If the Alignment option remains as the default, post. Full Size is the actual size of the image. The remaining
None, all text will be placed above and below the image. options, Thumbnail, Medium, Large, are predetermined by
The Class drop-down list within the Insert/edit link window Left means the text will wrap around the image which is the current theme. Typically a thumbnail will be around
offers a selection of style option placed to the left. Center places the image centre and Right 150x150 pixels. Once the size is selected press Insert into
equates to image right, text left. Post to add.

90 WordPress for Beginners

 16 Edit image
An image in a post is still open to editing, click the image
and select the pencil icon above it open the Edit Image
window. Here users can choose to resize, eg make the
image 80% of the original size. The alignment can be
modified as can the title and caption. Press Update to
initiate any changes.

17 Browser upload
If the WordPress uploader doesn’t work properly try the
Browser uploader instead. Roll the mouse over the Media title
bar and select Add New, then click the browser uploader link.
Pick Browse, locate the desired image, select and press Open
to add. Now press Upload.

18 Add a YouTube video

As WordPress now uses oEmbed, a format which allows
19 Add a your own video
While it’s technically possible to upload your own video
20 Read more
By default a post will display all the text and images on the
URLs to point to embedded content automatically, it is now direct to your blog, bandwidth constraints make it an front page of a post. To reduce the amount of single post
easier than ever to embed a YouTube video in your blog. All impractical solution. WordPress can embed YouTube video text on the front page the More tag can be inserted into the
you have to do is copy and paste the video’s URL into your directly to your blog, so we recommend you host your video post. Place the cursor in the desired position and press the
post and the rest is done for you. on YouTube then link to it as outlined in the previous step. Insert More tag button.

21 Tags 22 Categories 23 Publish

Adding tags helps identify the content of a post and also Categories help define where a relevant post can be Finally, the time has come to publish the post for all to
help visitors find a specific post when using Search. To add a found. You can create a new category by clicking on Tags & see. Check the post via the Preview button, make any
tag simply click on the Tags & Categories, section to the left Categories and then entering the name of the new category adjustments and hit the Publish button. The post will now
and then enter the keywords into the space provided. You in the space provided. By default all new categories are appear on the blog front page. Head back to Posts>Add
can enter as many tags as you want. selected. Now choose the relevant category for the post. New and start populating your blog.

WordPress for Beginners 91

Setting up

TUTORIALOBJECTIVE
Learn how to edit your WordPress
blog posts Learn to edit your
TIME REQUIRED
10 mins

SKILL LEVEL
WordPress blog posts
WHETHER YOU ARE UPDATING SOME INFORMATION OR CORRECTING A MISTAKE, YOU WILL ALWAYS
NEED TO EDIT YOUR POSTS. WE GUIDE YOU THROUGH THE VARIOUS WAYS YOU CAN DO IT
WORDPRESS IS DESIGNED in such a way that creating a site where nothing is ever fixed and final, and every word and
new post for your blog is as simple as typing it in. You won’t, image can be tweaked and adjusted until it is right.
however, always get it right first time. If you’ve got a news- In this tutorial we will guide you through the various ways
based site then you might need to update a post with new in which you can edit your posts, from that simple typo
information as it becomes available, or sometimes you will correction to more advanced functions that enable you to
simply need to go back and correct a typo. Thankfully this is batch edit your posts in order to help keep your site organised
not a task to challenge anyone. A WordPress blog is a dynamic and make it easily searchable for your visitors.

01 A quick 02 Editing
check over shortcut
Once you have To edit your words,
finished composing now you need to
a post and have click through to the
published it on your post you have just
blog it is always published. If you’re
good practice to go still logged in to
to your site itself and give it a quick once over – if you haven’t got your WordPress account then you should see an Edit button appear
someone checking your text before you post it simple mistakes can somewhere within the post itself. If you click on this, you will be taken
be easily missed, even with the spell checker turned on. Click the straight through to the edit post screen where all the magic
name of your site to preview it. can now happen!

138 Beginner’s guide to WordPress

92 WordPress for Beginners
03 Begin editing 04 Post management
For much wider editing purposes, and for greater control
05 Editing options
You will now be right back at the familiar editing screen Now you need to hover your mouse over a post and some
where you created the post in the first place. Use it now over your site in general, open the WordPress control panel options will appear, including Edit and Quick Edit. Edit is
exactly as you would when creating a new post from and click on the Posts menu option that can be found over exactly the same as the Edit Post option from step two,
scratch – text, images, URLs, tags and categories are all on the left-hand side of the screen. This will now open a taking you to the regular post editing screen. Choose this
editable too. Click on the Update post button to post new screen showing every post you have published on option if you need to change the content (ie the text) in
your changes. your site. your post.

06 Quick Edits 07 Changing the slug

If you are happy with the content of a post but still need to edit it more for housekeeping One interesting – and useful – change you can make to a post is the slug. This is the part of the
purposes, for example to add it to a new category or change its tags, you can simply select URL that is automatically generated from the title of your post. For ease of use, especially if your
the Quick Edit option. The box will now expand to give you a range of admin options. post is a sticky, you can change this to something more memorable.

08 Author name 09 Categories

Likewise you might need to change the author name assigned to the post. If you forgot to add your post to relevant categories initially then you can do that under the
Even if you are the only person posting on your site you might want to post site Quick Edit function here. However, if you want to create a new category you will need to either
announcements under ‘admin’ or similar to keep them separate from content posted go into full editing mode or click on the Categories option in the left-hand menu in order to
under your own name. You can do this with self-hosted blogs, only. create it.

WordPress for Beginners 93

Setting up

Updating your
RSS feeds
It’s one thing getting people interested
in your blog in the first place, but it’s just
as vital to keep them coming back in the
long run. An important way of doing this
is keeping them aware of any updates in
your RSS newsfeeds and all your latest
blog posts
When you edit a post and click the Update button the
changes will be instantly applied to your site, but your avid
10 Changing status 11 Update your post
You may wish to take a post offline while you make major After making any of these changes, or indeed any others you
readers will not be immediately aware of the fact that you changes to it. To do this, click the Edit button next to the may wish to, you need to make sure you click the Update
have changed the story. It won’t be placed at the top of your
current Status to reveal a drop-down menu with three Post button in order to apply them to the post. If you open
front page, neither will your RSS feed be updated with a new
options in it: Published means the post is live and accessible, another post before doing so then your post will not be
entry. Of course, if you are only correcting a typo or tweaking
while Pending Review and Draft statuses both take it offline updated. If you want to undo any changes then click the
an image this is exactly how you would want it to be, but
if you have made a significant change to one of your posts
for further checks. Cancel button.
then you need to be able to alert readers to your changes so
they can find out all the latest news on stories available on
your blog.
The way to go about this is by adjusting the date the blog
entry was posted. If you change the date to something later
than your last entry then it will automatically move the post
back up to the top of the front page (where it will stay until
you get round to posting again). In order to update your
RSS feed you should change the date to something in the
future. Schedule a new posting date of, say, one minute from
now, then in a minute’s time the story will be posted again
(but not duplicated) and the RSS feed will also be updated.
Users who subscribe to your feed will see the story back in
their newsreading software, and the post will be marked as
‘Updated’ in order that they know they have already seen the
post before and should be on the lookout for changes.
A final piece of good practice is to clearly mark the edits
you make to a post so that your readers can find them
easily. This especially applies if you have more information 12 Make it stick 13 Bulk actions
to add to a news story, or are making a change based on Quick Edit is extremely useful for making minor changes The Bulk editing option lets you delete multiple selected
readers’ comments. Rather than writing in the lines, add a to single posts but sometimes you will want to make posts in one go, or quickly apply quick-edit properties to
new paragraph at the bottom of the post, marked Update. If similar changes to multiple posts, for example, when all the posts you’ve chosen, such as setting common tags
necessary you could also add the word (updated) to the post you are cleaning up your tags to ensure consistency or categories. You can even use the Bulk Actions option to
title as well. Your readers will be grateful for this as it’ll save throughout your site. Click the Posts option to view all the publish a group of posts all at once.
them searching for the new content. posts on your blog.

Updated RSS feeds will be clearly marked so your readers can

look out for changes

14 Choosing your posts 15 Getting ready to edit

There is a checkbox next to every post, so simply tick the With your multiple posts selected, click on the drop-down
ones you want to edit in bulk. If some of the posts you want menu at the top of the window that is marked Bulk Actions
to edit are listed on another page you will need to use the and choose Edit from the list (or delete if that is what you
Mark the changes you make to your posts clearly so your Search function to find them – you can only bulk edit posts want to do). Now click on Apply to open the bulk editing
readers can find them easily listed on the same page, and clicking through pages will menu options. This handy feature can save you a lot of time
lose your previous selections. in the long run

94 WordPress for Beginners

 16 Removing posts
The left-hand box displays the posts you will be editing in
bulk. Each one has a small X next to it – if you decide you
don’t want to apply your changes to any specific post you
can click the X at any time to remove it. So long as you
haven’t hit Update they will remain unchanged.

17 Adding tags
The most likely use for editing several posts at one time will
be to assign new tags to them, which is a really important
feature of search engine optimisation. Enter your choice of
new tags in the box, remembering to separate each one with
a comma and space. Notice you cannot remove existing tags
in this way.

18 Closing comments 19 Managing tags 20 Editing categories

Another good use of the batch editing process is for Under Posts is the Post Tags option, click to open. Here a Categories are the most important way of keeping your
closing comments that may appear on older posts. new tag can be added by simply adding a tag name, slug site organised and its content manageable. As with posts
These are the ones that are more likely to attract spam and description and pressing Add New Tag. The currently you can edit them in bulk by ticking the box next to them,
over a period of time so you can easily prevent more available tags are listed to the right, hover the cursor over although in this instance they can only be deleted. When
comments by selecting the ‘Do not allow’ option from a tag and press Edit to modify. Alternatively, click Delete to deleting posts be aware of how it might impact on your
the Comments drop-down menu. remove a tag. blog’s theme.

21 Tidying your categories 22 New categories 23 Category slugs

Hover your mouse over an individual category in order to To create a new category simply enter a name and click on Finally you can change the slugs for each category. By
see the Edit option. Click this and you can fill in additional the Add New Category button. You can now assign posts to default the category URL will be derived from the name, but
details about the category, for example a description which this category using the Quick Edit function explained in step if there are multiple words in it you might want to give it a
can be shown in your blog’s theme to give users more info nine. Try to keep categories to a minimum though and use shorter, friendlier name, especially if you will be specifically
on what posts they will see if they click on it. tags more creatively for organising your site. linking to this page from elsewhere.

WordPress for Beginners 95

Setting up

TUTORIAL OBJECTIVE
Applying various methods and sources Embed external media in your
WordPress posts
for embedding media into blog posts

TIME REQUIRED
5 mins

SKILL LEVEL ENGAGE YOUR AUDIENCE BY CREATING WORDPRESS POSTS THAT FEATURE EMBEDDED VIDEOS,
IMAGES AND MORE
CREATING POSTS IN Wordpress entails writing posts that are services this is no longer the case. WordPress has a whitelist
interesting and engaging. This may be a daunting prospect but of services that it supports for automatic embedding. You
you’re not just limited to text. WordPress includes the facility to can find it online at https://codex.wordpress.org/Embeds.
embed media within posts. This means you can place images, Embedding content from these services requires just a simple
music, videos and more in a post to help bring your blog to life. web link. Once added to a post (as text, not as a hyperlink) the
Don’t worry if you don’t have any good content of your WordPress editor will recognise it. From here it will embed the
own to begin with. You can embed content from other online content into your published post. Often the embedded item
sources. Think of it as creating a web link to something on will carry the look and feel of the source website. Sometimes it
another website. This linked content will then play from within will even include interactive controls.
your WordPress blog. You can embed content from services Embedded media can add a professional touch to a blog
such as Vine, Tumblr and SoundCloud to name but a few. post with minimal effort. Just ensure it’s used in the right way.
In earlier versions of WordPress embedding content was a Overloading a post with embedded media can result in a
more technical task. It used to involve a little HTML coding to messy post. It can also slow download times which could put
get working. The good news is that for the most popular online off your audience.

96 WordPress for Beginners

 Go full screen Visual or HTML
You can expand the editor view by clicking There are two main post editing
on the Full Screen icon. Click it again to windows, Visual & HTML. Visual
reduce the view back to the default size works like a word processor. HTML is
for adding HTML code. Use the tabs
to switch between the two

Remove the hyperlink

If the embedded content is not
Add Media appearing make sure that the link has not
There is an ‘Add Media’ option which can been converted to a hyperlink. Highlight
also be used to place images and videos it and click the ‘Remove Link’ icon
in your blog. Bear in mind, this method
uses storage space and server resources

Positioning a link
Preview your content When adding an embed link bear in
You can get an idea of how your added mind where you would like it to appear
content will look by clicking the ‘Preview’ in your post. It will appear wherever you
button. This will open a new tab without place it within your normal text
losing your current post edit

01 Embedding an image 02 Copy and paste 03 Embed Video

Images are a quick and simple way to make a blog post When pasting a URL for embedding purposes make sure Whether it’s a six second Vine video or an extended YouTube
more interesting. WordPress has a built in menu for it is pasted as text only. Do not use the ‘Insert Link’ option clip, embedding a video into your posts can help draw an
embedding images but there is an even simpler method. from the toolbar to convert it into a hyperlink. This means audience. Much like the previous step you can go with a
Browse to an online image that you wish to embed. In our the difference between embedding the image or just simple copy and paste approach. Just grab a web link or use
example we have used an image from the NASA website displaying the link itself. Here we have posted both cases, the ‘share’ option to access the relevant URL. Paste it into a
and pasted the link into a blog post. the embedded image above and the hyperlink underneath. post and away you go.

WordPress for Beginners 97

Setting up

Pick a player
SoundCloud gives you a choice
of two music players. Large or
streamlined. The larger option also
provides a range of sizes

Adjust colours
SoundCloud provides some simple
colour options with regards to the
Code and preview playback button. You can also click on
As options are selected the code box the colour grid to apply various shades
updates to reflect any changes. Tick the
‘WordPress Code’ option to convert it to
optimised code

Player preview
Much like the code preview box the
player preview section updates as
each option is selected. This gives an
idea of how your embedded content
will appear in your blog

Toggling options
By default the extra choices
regarding colours and playback are
not visible. You can access them by
clicking ‘More Options’

Automatic playback
This simple option determines whether
your embedded media player will
automatically play the chosen song
once it has finished loading

04 Embedding a tweet 05 Copy the link 06 Preview your Tweet

Embedded tweets can provide a snapshot of information Select ‘Copy Link to Tweet’ from the drop down menu. The Click the ‘Preview’ button in the WordPress editor to see
or a quote. It will appear in your blog as it would appear Twitter website will now open a new window showing you how it will appear in your blog. From the avatar to the
on the Twitter website. Embedded tweets also include the link. Copy this and open a post in WordPress that you hashtags, various parts of the tweet are interactive. There is
interactive buttons for replying or retweeting. To embed a wish to edit. Paste the link into the appropriate section of even a ‘Follow’ button. Embedded Tweets are lightweight
tweet, head to twitter.com and locate the tweet you wish your WordPress post. Again, be sure to leave it as text. Don’t and easy on loading times. You can add many tweets to a
to embed. Click on the ‘More’ icon. convert it into a hyperlink. post without fear of degrading the user experience.

98 WordPress for Beginners

 Support for
embedding
The key to being able to safely
embed content is to keep your
WordPress installation updated
By default WordPress can only embed from websites
that appear on the Whitelist. It’s possible to work around
this by installing a plug-in but there is a risk. Content
lifted from an unknown and untrusted source could
expose your set-up to malware. This is why the Whitelist
exists, to prevent accidental embedding from malicious
websites. This does mean that users are reliant on

07 Embed music 08 Grab a link WordPress supporting the required websites. Support
for newer services is available with each new release
of WordPress. By keeping WordPress updated you will
If you wish you can add music to a blog post. Embedding a On SoundCloud find a track and click the ‘Share’ button.
song places it into your blog within a dedicated player. This Copy the link and paste it into a blog post. Make sure you ensure you have the most embedding options available.
If your blog is hosted on the WordPress servers then
helps to increase audience engagement with your posts. leave it as text, don’t convert it into a hyperlink. In Spotify
updating WordPress is automatic. No further effort or
Two examples of music-based sources are SoundCloud and right click on an individual track or an entire playlist to access
work is required on your part.
Spotify. Extracting a song from these services and adding the link. Again, paste this into a post. WordPress will take the Users with self-hosted WordPress blogs will need
them to your blog is a simple copy and paste job. link and turn it into an embedded music player. to go through a manual update process. WordPress
will prompt you when a new update is available to
install. Before proceeding with this it is important to
create a backup of your database. This will prevent you
from losing your blog should an error occur during the
update process. There are various methods and plug-
ins available to assist with this. Once you’ve created
a backup you’re good to go. You can either run the
Update process online or download it to run a manual
install. In our experience we have found that running
it online is both quicker and easier. Whilst the upgrade
process is running your blog will go into maintenance
mode. This means that it will not be accessible by your
audience. The update process shouldn’t last more than
a few short minutes. That said, it pays to be mindful of
when you’re updating so you don’t confuse any visitors.
Once the update is complete WordPress will reload the
Dashboard. The updated install will also include the
latest Whitelist entries.
09 Embed Tumblr Posts 10 Vine’s embedding options
If you have a Tumblr blog you can embed Tumblr posts into Some services offer specific embedding options. These
your WordPress blog. You can also embed Tumblr posts allow for a little more customisation over the simple copy
created by others. It’s a case of copying and pasting the URL and paste approach. For example, in Vine you can toggle
as in the previous steps. WordPress embeds the post with a video size, the window format and the video auto-play. In
Tumblr-based header and footer. These include buttons for this example you can see HTML code in the lower window.
following Tumblr accounts and reblogging posts. This updates based on the selected options.

Maximise your embedding options by keeping

WordPress regularly updated

11 Adding HTML code 12 The [Embed] shortcode

With this approach you will need to copy the code and WordPress also has a dedicated [Embed] shortcode. This
paste it to the HTML section of the post editor. In the post instructs WordPress on the allowed dimensions of an object.
editor you will see two tabs above the upper right corner. Place the chosen URL within the integers ‘width’ and ‘height’
Click the right-most tab titled ‘HTML’. Now paste the HTML (as per our example). Be sure to enter this within the HTML Some of WordPress’s many plugins will help you when
code in the relevant place. Click the ‘Visual’ tab once you’re section of the editor. Whether this technique works depends embedding on your site
done to go back to the normal text editor. on your chosen media and WordPress theme.

WordPress for Beginners 99

Setting up

Add a gallery of images in WordPress

DISCOVER HOW TO UPLOAD MULTIPLE IMAGES, CREATE UNIFORM IMAGE DIMENSIONS
TUTORIAL OBJECTIVE AND CHOOSE THE NUMBER OF COLUMNS TO CREATE THE PERFECT IMAGE GALLERY
Using and managing an image gallery
in WordPress
WHEN USING WORDPRESS the typical process for adding than a single click, but there are a number of options to set
images is to insert a single instance, a simple and effective up before inserting. Users have the option to define where
TIME REQUIRED scenario. However, if more images are needed for a single the thumbnails link to, what order they are displayed in and
20 mins post, or page, then the WordPress Gallery feature is the perfect how many columns they want across a post or page. Once the
solution. Users can upload multiple images, which WordPress gallery is in place it’s a quick click of the Edit button and the
SKILL LEVEL puts into a gallery. The images can still be added individually settings can be modified as desired. There is also the option to
or there is the option to upload the whole gallery in one fell change the dimensions of thumbnails in the gallery to suit any
swoop. Adding the entire gallery of images is nothing more post or page.

01 Add images 02 Gallery settings 03 Image order

To start the gallery process the first step is to upload all the Once all of the images have been successfully The image order of the gallery is determined by date and
necessary images. Create a new post and click the Add uploaded (larger files will take longer) click on the time, but you can arrange them however you see fit. To
Media icon that resides above the main text box. Now click Create Gallery link on the left of the screen. Here, click the re-arrange the image order, simply click and hold on an
on the Upload Files tab, locate all the necessary files, use images you wish to include in the gallery, then click the image and then drag it around the other images. This is an
Shift+arrow keys to select multiple images and press Choose Create a new gallery button in the bottom-right corner of intuitive way to shuffle your images into any order you wish.
to upload all the images. the screen. When done, click on Insert Gallery.

100 WordPress for Beginners

04 Randomise the order 05 Title and caption 06 Link URL
By default the Link To field will display the Media File
If you wish to create a random order for your gallery Click on an image in your gallery to view all of the various
images then check out the Gallery Settings in the column individual image options. By default the image title is the option, which will redirect any clicks on the image to a new
to the right. Here you will see options to link your gallery, image name. To add a more SEO-friendly title simply add browser window displaying just the picture. You can change
arrange it in columns or arrange it in a random order. To the desired text. This is the text that will be seen when the this to an Attachment Page, which will show the image in
randomise the order of your gallery, simply tick the box next mouse hovers over the image. Adding a caption will add a its own post within your blog’s theme, or select None to
to this last option. styled – depending on theme – caption. disable linking.

07 Gallery columns 08 View gallery 09 Edit gallery

Edit the gallery by clicking on one of the images to
Now repeat Step 5 to change each image title and more, The gallery will appear in the post entry area, where
and then head to the Gallery column’s drop-down list which you will see a preview of the arrangement of the images. highlight and then display two icons in the top-left corner.
defines how many columns (effectively images) will appear To get an idea of how the gallery will appear when the The X icon on the right will delete the gallery; the pencil
horizontally across the page before moving onto another post is published, click Preview. This will open up a new icon on the left will open the Edit Gallery screen used
line. Simply select 1-9 from the drop-down list and click window and show you how the gallery will look within your earlier, where the Update Gallery button will save any
Insert gallery. blog’s theme. changes you make.

10 A perfect fit 11 Thumbnail dimensions 12 Shortcode

Once a gallery has been created, WordPress inserts the
How the gallery displays is determined by the size of the The gallery displays all images as thumbnails with the
thumbnail images, width of the post body and number of default size determined by the current theme. To modify the code to display the images. Alternatively, users can insert
columns. If the width of a post, or page, is 600 pixels the thumbnail dimensions head to Settings in the left column the gallery into any post or page by using the shortcode
thumbnail width and number of columns need to match. (WordPress 2.8+) and select Media. Add the Width and [gallery]. To insert, open post or page, switch to HTML and
For example, four columns multiplied by a thumbnail width Height dimensions in Thumbnail size and make sure the add. To keep the same gallery styling as the initial gallery
of 140px equals 560px, plus padding and margin. Crop thumbnails… checkbox is selected. switch to HTML in the post and copy the code.

WordPress for Beginners 101

Setting up

TUTORIAL OBJECTIVE
Add some media content to your blog Add video and audio to
your WordPress blog
to bring it to life

TIME REQUIRED
1 hour

SKILL LEVEL YOUR BLOG WILL TRULY COME ALIVE WITH THE ADDITION OF SOME MULTIMEDIA CONTENT.
ADDING VIDEOS FROM YOUTUBE OR ELSEWHERE IS EASY WHEN YOU KNOW HOW…
THERE REALLY IS no better way of drawing users in to familiar with, is of course YouTube, and that is going to be the
your blog than with some well-chosen multimedia content. focus of this tutorial.
Whether you are creating your own original video tutorials By using YouTube you are able to utilise videos in high
or simply sharing the latest craze that’s sweeping the nation, definition, so there are absolutely no worries about quality,
giving your readers a little something extra to look at beyond while the phenomenal popularity of the site will also help you
static words and pictures is a sure-fire way to keep them to promote your blog to a wider user base.
interested and clicking through your site – and then coming We will also show you how you can enable users to share
back for more. videos that are embedded in your pages, as well as how to
The easiest way to add a video to your WordPress blog is add other kinds of media content in order to help bring your
by using one of the freely available video services to be found blog alive. To discover all this and more, read on and follow the
online. The most famous one, that we will undoubtedly all be steps of the tutorial.

102 WordPress for Beginners

01 Add media 02 Add video 03 Video details
In order to start, select an existing post or create a new There are two options for adding a video clip. If a video clip The uploaded clip will appear in the Media Library, selected
one. Just below the title box there is an Add Media option. exists on the desktop just grab it and drag it into the Insert by default (click a different uploaded file to deselect).
This is the starting point where you can add video, audio Media window. Alternatively, click on Select Files and you Under Attachment Details you will see some associated
and images. Click Add Media in order to open the Insert can then locate the video clip to be added to WordPress. information such as the clip title and the delete option. You
Media window. Next, click Upload Files to switch to the Select the clip, select Open and you’ll see that the clip is can use the drop-down list to filter the view to display only
accompanying window. then uploaded. Video clips.

04 YouTube link 05 Automatically add video 06 Manually insert video

Thanks to oEmbed support it is now easier than ever to Now you must head to WordPress and the post to which Be aware that a YouTube link is not always embedded
link a YouTube video to a WordPress post. To get started, the video is going to be added. Click the cursor in the automatically. In order to add a video manually, click Share
go to the YouTube website and then locate the video that appropriate position in the post where you would like the under the chosen YouTube video followed by the Embed
you wish to link your post to. Once you have done that, video to be placed. Now press Ctrl/Cmd+V in order to add button. This will display the embed code. Copy the code,
simply copy the page link (highlight the URL and press Ctrl/ the link to the post. This will automatically embed the video go back to the post, switch to the HTML editor and paste
Cmd+C) and then go back to your Wordpress website. in the post. the code.

07 Publish post 08 Custom YouTube size 09 Take a screenshot

Switch back to the Visual editor where you will see a box to By default a YouTube video will be assigned the dimensions Embedding a video into a post will subsequently display
indicate where the video will appear. Add any text to the 420x315 pixels. Alongside the default option are a number of the video when a user selects the post. It is a good idea to
post to accompany the video, and click Publish to share the common sizes. These keep the video at the correct aspect take a screenshot of the embedded video and use this as
post with the world. Any problems with the video can be ratio. If none of these sizes match your requirements, you are the Featured image to display on the front page of your
resolved by adjusting or copying a new embed code and fortunately able to select Custom size and add the desired WordPress install. Use Cmd/Shift+3 on a Mac or download
clicking Update. dimension to it. the software.

WordPress for Beginners 103

Setting up

10 Add audio 11 Audio details 12 Play audio

Click the Add Media button and make sure that the Insert By default the Title field will display the name of Save or update the post with the audio clip. The audio
Media window has Upload Files selected. Now drag and the uploaded audio clip. You can rename it by clip will be displayed as a text link in the post using the
drop the selected audio file from the desktop. Alternatively, overwriting the existing title. You’ll also see the option title as the link text. In order to modify the link text,
you could click Select Files, locate the audio file and then to add a caption and description for the audio clip. simply select and add the new title. When clicked in the
click Open. In the Media Library, use the dropdown menu When you’re done, click Insert into post to complete live post, the default media player will open to play
marked ‘All media items’ and change it to ‘Audio’. the process. the audio.

13 Upload file size 14 Upload php.ini 15 Set Featured Image

WordPress limits the upload size of files. For Several FTP applications are available, with FileZilla Many of the WordPress themes allow for a featured image to
self-hosted blogs you can fix this by using your FTP among the most popular. Use this to connect to the be added to represent the post. Images and Featured
application to download the PHP.ini file and make the server where your WordPress blog is installed, browse images can also be uploaded to the Media Library, but
changes illustrated above. If you can’t find a PHP.ini file, for the wp-admin folder and upload the PHP.ini file. Featured Images can only be defined using the Set featured
create your own in a text editor and upload it to the Larger files can then be uploaded. You will be able to upload image button situated in the left-hand column of the Add
wp-admin folder. more at once. New post screen.

16 Media Library 17 Select media type 18 Edit image

All image, video and audio media that is uploaded to Adding media content to the Media Library allows users to To edit an image, you must select the Edit option in the
your WordPress site will be stored in the Media Library, view all of the media types. For instance, clicking Audio will Media Library. Clicking Edit will open the Edit Media screen,
which you’ll find under the Media menu in the display a list of audio clips that you have uploaded to your where various options are available. In particular, you’ll be
Dashboard menu. The different media can be viewed blog. Each item in the Media Library has three clickable able to edit the filename, caption and description, but if you
by type using the links across the top of the Media options: Edit, Delete Permanently and View. Use the latter want to edit the image itself use the Edit Image button. With
Library view. option to preview the uploaded media. your changes made, click Update.

104 WordPress for Beginners

 Understand media
file formats
With so many different types of
video and audio files out there,
how can you be sure that the one
you are using will play?
The reason we have given so much attention to using
YouTube videos in this tutorial is not only a result of the
popularity of the video-sharing service, but also that it
delivers the simplest method of adding media content
to your blog without the need to worry about things like

19 Managing media 20 Unattached media

file formats. Indeed, while many common video formats
(such as .avi) are not suited to playback on the web,
uploading the same file to your YouTube account will
The Media Library allows users to delete content directly Media uploaded to WordPress is not always attached make it perfectly accessible to everyone on pretty much
from the library itself. In order to delete a single element to a post or a page. To view first you must click on the any computer. Users visiting your site will not need to
simply click Delete Permanently. To delete multiple items Unattached link at the top of the page. Typically, unattached worry about codecs when trying to view it either – and
first click in the check box next to the item(s) that you would content has been used or is not being used. If this is the there’s nothing more likely to turn people away than
like to delete. Select Delete Permanently from the list and case, then delete. Alternatively, click Attach to add to an serving up media that they can’t view.
then click Apply. existing post. If you want to go it alone, though, you should be
aware that some video file types are better than others.
As mentioned, .avi files may well play in a browser
but cannot stream, so the entire file will need to be
downloaded before it can be played. Other formats like
.mov (the QuickTime format), .mpg and .wmv can be
streamed within a browser window. The latter is a good
bandwidth-friendly option, although Mac users will
need a plug-in to be able to access it.
For audio you are unlikely to go beyond either .mp3
or .wav files as your formats of choice. Either of these
is fine, although .wav is uncompressed so will take
longer to download and use far more bandwidth, so
.mp3 is preferable. Either way, if you are dealing with
files that are large it is good practice to maybe mention
it somewhere so that the user knows what to expect.
Steer clear of older formats that were once popular, like
Real Audio, as users may not have a compatible codec
installed; likewise Windows Audio which, even though

21 Vimeo video sharing 22 Video-sharing sites fairly universal, still causes some problems for Mac users.

Vimeo is another video-sharing site that is very similar to Video lovers are not just restricted to YouTube and Vimeo
YouTube and allows users to share video. Head to the site though. There are a few other video-sharing sites that are
(www.vimeo.com), search and select a video and within well worth checking out. Try Break (www.break.com) and
the Share option you will find an embed option. Click this Daily Motion (www.dailymotion.com). These offer similar
button in order to get the embed code and then copy and options where users are able to copy an embed code to add
paste it into a post. to a post.

YouTube uses HTML5 to ensure that its videos are

compatible with all browsers

23 WordPress plug-ins
There is no denying that WordPress is a powerful blogging platform, and there are numerous plug-ins available out there that
might prove to be rather useful for adding media content that will ultimately spice up your blogs. In order to assist with adding
and managing media content, there a number of plug-ins that can be found via the official WordPress Plugin Directory – all you
need to do is point your browser to www.wordpress.org/extend/plugins and see for yourself. A couple that stand out and Try to ensure audio files are totally accessible, and spare
that we believe are well worth trying out are External Videos and WordPress Video Plugin. These are straightforward and very a thought for Mac users when using Windows files
effective, so check them out.

WordPress for Beginners 105

Setting up

TUTORIALOBJECTIVE
Organise photos, videos and other
files used on your WordPress site from Manage the WordPress
Media Library
within the Media Library

TIME REQUIRED
15 mins

SKILL LEVEL
WHAT WOULD A BLOG POST BE WITHOUT A PHOTO OR VIDEO? THE MEDIA LIBRARY
HELPS YOU TO KEEP TRACK OF THEM ALL AND KEEP THEM NICELY ORGANISED
WHEN YOU MAKE a new post on your WordPress blog, you editing the title, description and alt text. It is also possible from
will nearly always add at least one photo to it – and quite often within this screen to upload new media and then name, tag
you’ll be adding a selection of photos, videos and maybe and attach it to a previously made post.
sound clips. Sometimes you might need to update or replace This tutorial will introduce you to the Media Library and
a photo, or delete a video from a post, and the Media Library is show you how to use some of its features. We’ll go through the
the easiest way to do it. step-by-step process of uploading new media, editing their
From within the Media Library page, you will see a list of all details and attaching them to posts. We’ll also show you how
the media that you have uploaded during the lifetime of your to delete unwanted media, preview photos on the website,
website and will be able to perform actions on them, such as search for images and sort media elements.

01 Log into your site 02 Open the Media Library 03 Add new media
To start off, you need to log into your WordPress site Click on the Add Media button and you will then be taken to To add new media, click on the Upload Files tab and then
using the admin page and you will be presented with the the Upload Files screen. Click on the Media Library tab and you will be presented with two ways of uploading new
Dashboard, as usual. If you see a message to switch to a if you haven’t yet made any posts or inserted any photos media. If the files are within easy reach then you can just
improved posting experience, click on the link to be taken to or videos to your blog then this screen will be empty. drag and drop them onto the page. Alternatively, click on
the new-look interface. As you will soon discover, managing Otherwise you will see all your images, along with a small the Select Files button to navigate to the files that you wish
your site just got much simpler. thumbnail and the posts to which they are attached. to upload. There is a 10MB maximum size limit.

106 WordPress for Beginners

04 Upload the files 05 Open Attachment Details 06 Edit the details
Click on the Select Files button to open up the file browser. Once the file has finished uploading, you will see your image If your photograph has come straight from your camera,
Navigate to the photo or video you want and then click on added to the Media Library. To change the details of the it is quite likely to be called something like ‘DSC0015’, so
it and press the Choose button. The file will then upload. If image, like the name or description, simply click on the tile you should give it a more descriptive title. Under that is the
you are on a slow internet connection and it’s a large file, this in the Media library to open the Attachment Details in the alternative text, which should be similar to the description.
might take a few minutes, so be patient. A progress bar will column to the right. Here you can change the name, add a You can also add a caption if you like. The new information
show how the upload is going. description and a caption. will be saved automatically.

07 Attach media to post 08 Deleting media 09 Edit a photo

Because we have just uploaded an image, it will not be If we decide we no longer want a photo or video to be Click on an image to select it and then click on the ‘Edit
linked to a post, so nobody will be able to see it. While in attached to a post then we can easily delete it by hovering Image’ link next to the thumbnail in the right-hand column.
the Media Library, click on an image so that a blue tick icon over the media and clicking on the ‘Delete Permanently’ You will now be able to rotate it, crop it, scale it down in size
appears in the corner and then click on the ‘Insert into Post’ button. If you want to delete more than one piece of media and edit all of the information associated with the image.
button in the lower-right corner of the interface. The image then you select them using the checkboxes and apply the When you have made all of your desired edits, click on the
will then be embedded into a new post draft. bulk delete action. ‘Update’ button to save the changes.

10 Filtering images by date 11 Search 12 Sort alphabetically

Once you have been blogging for a while, you will find You can also search through your media using the By clicking on the menu next to the date filter, you will also
that you have quite a collection of photos and other search box, which is located at the top right of the page. find that you can display images that are attached to posts
media added to your site. After a year or so, you may have Simply click on this box and then type in the name of the or unattached – making it quick and easy to manage your
hundreds of images uploaded to your pages. Luckily, the photograph or video that you are looking for and WordPress images and discover which ones have been used in previous
Media Library allows you to filter images in a few ways, will automatically show only images with that name. This is posts. When you are done with your Media Library, simply
such as by date. very handy when you have a lot of images and videos. click on the ‘X’ icon in the top-right corner.

WordPress for Beginners 107

Setting up

TUTORIAL OBJECTIVE
Teaching you everything you will ever
need to know about managing posts
within WordPress
Organise WordPress posts
GET OUR HELP TO MANAGE ALL YOUR CONTENT, INCLUDING USING BULK
TIME REQUIRED ACTIONS, FILTERING CATEGORIES, ADDING TAGS AND MUCH MORE
As long as you’re prepared to spend on
improving your blog WE’VE ALL DONE it. After a busy news day where stories and to this very tutorial, where we will carefully take you through
SKILL LEVEL posts are stacking up on your blog or WordPress-powered everything you need to know about managing your blog –
website, you take a look back over the homepage and realise think reordering, recategorising, handing out serious doses of
there are more than a couple of things wrong with it. Tags are bulk actions and other such vital but often overlooked parts
missing. Things are all in the wrong order. The same post has of the WordPress process. This step-by-step tutorial guides
appeared twice. Basically, your once proud blog has become a you through these vital parts of WordPress in an easy to follow
tangled web of noise and confusion. It’s easily done, that’s for manner, so that never again will you have to panic about your
sure. So, what do you do? Well, you navigate your eyes back blog’s prettiness. We’re here for you.

01 Finding your posts 02 Filtering your categories 03 Bulk Actions

Now, forgive us if this sounds a little patronising, but Categories have usually been established by this point – be To save time when you want to delete a load of irrelevant
WordPress can be a confusing animal to beginners, and they news, features, rumours or anything else that your blog posts, just use the Bulk Actions tool at the top of the
we’re not about to take anything for granted. Finding all might want to cover. If you’re only interested in posts of one dashboard. Simply check the posts you want to action by
the content of your blog is simple – just hit Posts on the left particular category, just filter using this drop-down menu clicking the boxes next to them, use the drop-down menu
hand-side of the WordPress Dashboard, and it should bring and the list will automatically reorganise itself. It makes at the top to choose which action you want to execute,
up this handy list. finding certain types of posts a lot easier. then hit Apply.

Beginner’s guide to WordPress

108 WordPress for Beginners
04 Changing layouts 05 Searching posts 06 Adding categories
If you’re drowning in years’ worth of posts and you’re after Given the relative uselessness of a lot of web-based search Right, now to move onto categories. First of all, hit the
something specific, then clicking the Excerpt View button tools, you might be surprised that WordPress’s search system Categories option found on the left-hand side of the
(to the right of Filter) at the top of the dashboard will change is actually very good indeed. It filters through tags, keywords Dashboard, then you’re pretty much good to go. If you
the layout. Now each and every post will show an excerpt and parts of the post title, and is extremely good at tracking want to add an entirely new category to the list, then it’s
of the actual text, so you can work out just which one was down those long lost posts. The search bar is found in the the first option. Just type it in, pop in the URL-friendly slug
horribly offensive and delete it. top-right corner. and you’re away.

07 Attaching categories 08 Adding tags 09 Renaming tags

Probably more likely is the need to attach new categories If you want to quickly add a tag to a whole host of entries, Tags can also be renamed, useful if they have been
to existing posts, which is not too tough at all if you know you can manage your tags from the Tags page, found incorrectly typed. On the Tags screen find the tag you
what you’re doing. Hover your cursor over the post you under the Posts heading in the Dashboard. New tags can want to amend, however the mouse pointer over it
want to deal with, and you’ll see the Quick Edit option. be added here, or they can be added in the Add New post and select either Edit or Quick Edit – both will enable
Within there, you can check a new category, and it’ll attach page. You’ll also be able to add tags to a post in the Quick you to rename the tag and apply the change across
itself to your post. Easy. Edit view. all posts.

10 Editing Tag Slug 11 Editing tags on a post 12 Changing authors

As with tag names, tag slugs can also be edited. These If you have found a post that’s sorely lacking in tags, Finally, if you’ve accidentally attributed your greatest literary
are URL-friendly versions of the tags containing only then the Quick Edit tool is your friend here. Just hover work to your mum, then you can use this little drop-down
letters, number and hyphens. To rename a slug, find your cursor over the post in question, hit Quick Edit, menu next to Author to quickly change who the post is
its associated tag, use one of the edit options and make then use the box on the right-hand side to add any attributed to. Again it’s in the Quick Edit menu, and takes
the change as needed, clicking Update to apply new tags you fancy. Don’t forget to separate the tags no more effort that a couple of clicks. Now your work is
the change. by commas, of course. yours once again.

WordPress for Beginners 109

Setting up

TUTORIAL OBJECTIVE
To manage comments within a blog,
including approving, deleting and
Managing blog post
comments in WordPress
marking as spam

TIME REQUIRED
10 mins

SKILL LEVEL COMMENTS BRIDGE THE GAP BETWEEN AUTHOR AND USER, BUT NOT ALL ARE
WELCOME. FIND OUT HOW TO APPROVE, REPLY, EDIT AND DELETE COMMENTS
A BLOG IS all about opinion and the beauty of comments is control and all comments are listed and assigned a selection
that they give the right to reply. Constructive, useful, related of options, Approve, Spam, Delete, Edit, Quick Edit and Reply.
and relevant comments are always welcome, and even the If a comment hits the mark a quick click of Approve ensures
odd off the wall comment doesn’t go amiss. However, authors it takes its place in the post. Conversely, if it doesn’t shape up
can be guaranteed that offensive comments and spam will then Delete or Spam are called into action. Edit and Quick
infiltrate their blog. Edit give the option to knock a post into shape, plus email the
WordPress is aware of these issues and hands over control to poster for clarification or more comment. Finally, as site author
authors via the Dashboard. Comments is the hub of comment Reply gives you the right to give yet more valued opinion.

01 Right Now 02 Recent comments 03 Sort and search

To view and manage comments users will first need Directly below the At A Glance module you’ll find the Recent As a blog grows, so will the number of comments. So
To view and manage comments you will first need to log in Comments module, which displays the latest selection of finding specific comments will become a more elaborate
and view the Dashboard, where you will find the At A Glance comments that have been made. This gives a more rounded affair. First, click the Pending link to view Comments
module displaying a summary of how many comments view of the comment with a selection of actions. Click the that need attention. Click Approved to see all Approved
have been made. To find out more details click Comments post title to go the Post Edit window or select View All to go comments, Spam to view comments tagged as Spam. Use
under At A Glance. to Edit Comments. Search Comments to find more specific comments.

110 WordPress for Beginners

04 Approve 05 Unwanted comments 06 In Response
By default comments are unapproved and need the author If a comment is considered spam or contains an undesirable Each comment has a number of elements attached to it
to approve comments for them to be seen on the blog. link or message it can be deleted or marked as Spam. under In Response To. The text link applies to the post it is
Comments can be approved individually, simply by clicking To delete a comment, click Trash for the comment to be attached to. Click to view the post in the Edit Posts window.
on the Approve link. The link will then become Unapprove, removed. Alternatively, click Spam for the comment to be The speech bubble shows how many comments are linked
which when clicked will hide a comment from view so no isolated, where its qualities will be recorded and used to to the post. Place the cursor over the graphic to view how
one will see it on the blog itself. recognise other spam comments. many need attention.

07 Comments pending 08 Email comment 09 Edit comment text

Clicking the graphic mentioned in the previous step will Click the Edit link to open the Edit Comment window, where The comment editor provides a selection of tools that are as
display comments relating specifically to the post. Click you will find details about the comment author, taken from obvious as the Edit Posts window. To insert a link, select the
All to go back to the Edit Comments page. Note, if post is their WordPress profile. You can use the E-mail link to send desired text, click Link and add URL and press OK. Ins inserts
displaying zero it may still have comments pending, use the feedback about the comment – this will open your default the date and time, Image adds an image, ul, ol, li allows for
cursor to view status. Finally, click the hash symbol to view mail app where you will then be able to send your message the creation of lists and More inserts a break and the read
the related post. with ease. more link.

10 Status 11 Comment actions 12 Bulk Actions

Here you can see the status of the comment, for example Quick Edit, which opens in a window below the comment, is Comments can come thick and fast and Bulk Actions allows
Pending. You can click the appropriate radio button to effectively the same as Edit but with fewer options. Edit the a user to apply the same setting with just one simple click.
change this status, or change the submitted date by comment as described earlier and press Update Comment First click the checkbox for each comment that is to have an
clicking Edit. View Comment will preview the comment when you’re done. The Reply feature is visually similar, action applied to it. Now simply select the desired action
in your blog theme, and Update Comment will publish enabling you to add and submit a reply to the original from the Bulk Actions drop-down list and then click on the
your changes. comment from within the Dashboard. Apply button.

WordPress for Beginners 111

Setting up

TUTORIALOBJECTIVE
Learn how to edit and organise the Customise the categories
in your WordPress blog
categories in your blog to customise
them effectively

TIME REQUIRED
15 mins

SKILL LEVEL CATEGORIES ARE A STANDARD FEATURE OF WORDPRESS BLOG, BUT WE SHOW
YOU HOW TO CUSTOMISE THEM AND USE THEM TO ORGANISE YOUR BLOG
EVERY TIME YOU write on your site, it will be put into a parent. This is essentially a hierarchy for your posts and it
category. The ‘Uncategorized’ section is the default option, but means there’s the opportunity to have broader categories,
you can customise categories to suit your needs. Organising such as Craft, with sub-categories such as ‘news’ or ‘tutorials’
your blog is the key to making it readable and searchable by within and relating to that main header.
your users, and filing them under relevant categories can help Don’t worry if this sounds a little complicated, we’ll take you
you do this. There’s no limit to the amount you can add either, through how to add, edit and manage your categories to suit
so be as specific as you like. To organise your blog posts further your blog. It doesn’t matter if you make a mistake either; you
there is the option to file your categories under a category can always edit and delete categories afterwards.

112 WordPress for Beginners

01 Access Categories 02 New additions 03 Editing your additions
First of all you need to access the inner workings of your To add a new post category, type its label into the Category Don’t worry if you happen to make a mistake while you’re
blog site, so login to your WordPress account in the usual Name field, add a brief description into the box below and typing the category names in, as it’s very easily fixed. Hover
manner and access the blog account you’d like to organise. click Add Category. The new category will then appear in your cursor over the text you would like to change and
Click on the Categories button while you’re on the main the category list on the right of the screen. You can choose a you will be presented with three options: Edit, Quick Edit
Dashboard; you can find it at the bottom of the list of parent category for your new addition if you want to appear or Delete. Click Quick Edit, tweak your text and then press
headers under ‘Posts’. under something else. More on that in step 5. Update Category.

04 Deleting categories 05 Parent categories 06 Sub-categories

To delete a single category, hover your cursor over the one Another way to organise categories is to file them under a Now we just need to add our Sub-categories to relate to
you want to ditch and select Delete from the three options Parent Category, such as ‘Homewares’, and then have Sub- our ‘Homewares’ parent category. Type in the name you
underneath it. Click ‘OK’ to confirm this action. If you’d like categories such as ‘Reviews’ relating to that Parent Category. would like to use for this – we chose ‘News’ – and select
to get rid of more than one then tick the categories you Choose the name of your Parent Category and type it in the Homewares from the Category Parent drop-down list. Add
have in mind, select Delete from the Bulk Actions drop- Category Name box. Select ‘None’ from the Category Parent a description in the allocated box, if you need to, and then
down menu and click Apply. drop-down list. Click Add Category. click on Add Category.

07 Quick add 08 File your blogs 09 Category clouds

Another easy way to add categories while you blog is to If you’ve got a bunch of uncategorised blog posts that are Depending on which template you choose, you can display
simply click on Add New Category in the Add New Post or already on your site, there is a way you can organise them. Category clouds in a panel next to your post. To add one,
Edit Post screens. Once you have selected that, a box and a From your main Dashboard click on Posts>Edit. In the click on the Appearance drop-down list in Dashboard, then
drop-down Parent category list will then appear. Type your Categories box (bottom right of the interface) you can tick or select Widgets. You’ll be presented with a page of options to
text in and click on Add, for a simple yet effective way to untick the current category selection or add a new one. Click customise your layout with; select Category Cloud and drag
create categories. ‘Update‘ to save your changes. it to the Sidebar.

WordPress for Beginners 113

Setting up

TUTORIALOBJECTIVE
Create new tags, apply them to your Create, apply and manage
tags in your posts
posts and learn how to manage them
with ease

TIME REQUIRED
15 mins

SKILL LEVEL IN THIS TUTORIAL WE WILL COVER HOW TO CREATE AND MANAGE TAGS EFFICIENTLY
AND THE BENEFITS OF HAVING THEM IN YOUR WEBSITE PROJECTS
TAGS ARE SOMETHING that quite often can be passed within the post or in a tag cloud. If the reader enjoys the post
over in WordPress websites, with a lot of people under the they have just read then they will have the option to click on
misconception that a tag and category are the same thing. the tags to find more posts of the same subject.
A tag is something that is used to improve site navigation A tag cloud will accumulate all the tags or a certain number
and group similar posts together. Tags are unique names of into a section of the site where they can always be accessed.
reference but do not work in a hierarchy like categories, as they Tags are simple to create and using them correctly can benefit
are just used to cross reference posts. When posts have been site navigation and usability hugely. Follow these simple steps
tagged depending on your theme they will be displayed either as we show you how to use tags properly.

114 WordPress for Beginners

01 Getting started 02 Naming tags appropriately 03 Post tags section
If you have not created any posts yet on your website then The first step to creating a tag is choosing a suitable name With a post open, the Tags section is visible on the
create a few test posts for the purpose of this tutorial so we for it. The name needs to be something that the site user right-hand column. To add a new tag, just type in
have something to actually apply the tags to. Your version of can understand and use really easily. It is best to think the name and click on the Add button to submit;
WordPress may look somewhat different to what is shown about how the tags will work as a whole when you do this, alternatively, tap Enter. Once the post is updated
here, depending on which version you’re using. We are although you can actually change them further down the the tag will be applied and added to the list
working in version 2.9.2. line if you wish to. of Tags.

04 Adding multiple tags 05 Most used tags 06 Post tags menu

You can add as many tags as you need, as multiple The tags added are now accessible under the ‘most used’ Click on the Tags button under the Posts section in
tags can be added using a comma to separate them. section. Tags can be directly added through the Post tags the Dashboard menu to access the Tags page. This is
As tags are added they will appear below the new tag menu, but if it has not been applied to a post first it will where tags are managed – the tag list on the right
entry box. Any tags you decide to discard can be not be added to ‘most used’. This means you will need to displays the number of times each has been used across
removed by clicking the cross to the left of the manually type words, and this can lead to multiples of the your blog, and clicking on each tag will show each
tag name. same tag. associated post.

07 Editing tags 08 Tag slugs 09 Tag descriptions

To change a tag, hover the mouse over it and wait Tag slugs are simply a URL-friendly version of the tag name. The tag description is optional and it’s not shown in most
for the Edit, Quick Edit and Delete options to appear. A slug needs to be formatted to web standards, though, themes, so generally this is only for your own reference really.
With Quick Edit you can change the name and tag slug, but this will not be seen by site users. It is best to have it This is a good opportunity to make some notes, though,
while with Edit you get the option to also add or all lowercase letters and it can only contain numbers and so that you understand everything and it is explained to
change the tag description. Delete will discard that hyphens. Once you are finished with this, click on Update to other admin account users. Once this is updated, your tag
tag completely. submit the slug. is now complete.

WordPress for Beginners 115

Setting up

TUTORIAL OBJECTIVE
Learn how to add and edit links, as well
as manage their categories Manage a series of links
TIME REQUIRED
10-15 mins
in your website sidebar
SKILL LEVEL USING THE LINKS FUNCTIONALITY IN WORDPRESS IS A GOOD WAY OF TIDYING UP AND
CATEGORISING ONE OR MULTIPLE SECTIONS OF LINKS WITHIN THE WEBSITE SIDEBAR
WITH THE RELEASE of WordPress version 2.5, Blogroll was The flexibility in the Links section, however, means you may
renamed ‘Links’, which promoted Links to a content type to want to set up links for alternative means. For example, it could
sit alongside Pages and Posts. Initially when WordPress was be used to simply tidy up a collection of links by organising
created, it was specifically aimed a bloggers; this is evident them into categories. Or you may wish to offer affiliate links to
within the Links section of the admin Dashboard, where the other websites, which could generate revenue for your site.
default category is called ‘Blogroll’. It was intended to allow In this tutorial we will take you through all of the basic
bloggers to create communities between friends’ blogs, their methods for adding, editing and removing links in the
favourite websites or interesting stories that they might have WordPress Dashboard, along with adding and managing
found – much like a roll of honour, hence the name. different categories for your links.

116 WordPress for Beginners

01 Adding links 02 Editing existing links 03 Setting a target
In the ‘Links’ drop-down menu, click on the ‘Add New’ To edit an existing link, click All Links to display a list of all In the Add New or Edit Link interfaces you might have
option to open up the Add New Link interface. In here we existing links, some of which may have been included by noticed the ‘Target’ section. Here are three options ‘_blank’,
can enter a name for our link, enter the web address, provide the WordPress developers. When you roll your mouse over a ‘_top’ and ‘_none’. All three options have an explanation as
the link with a description, select a category and provide a link, the Edit and Delete options appear. Select Edit to view to what each option represents next to them, so it is just a
target window for our link to open in. To save the new link, the Edit Link interface to make changes, which can be saved matter of personal preference of whether you would like the
click on the blue ‘Add Link’ button, top right of the page. using the Update Link button in the top right of the page. link to open in a new window or within the same window.

04 Removing links 05 Creating new categories 06 Add a category differently

If you have a link that you no longer need, open the New categories for links can be created in the Link You will notice in the ‘Categories’ section of the Add New
Edit Link interface and hover the mouse pointer over Categories sub-menu. This page – like the post category Link interface the option to ‘+ Add New Category’; this is
the link to be removed. Use the Delete option, which screen – features a straightforward form for creating a new a different and potentially quicker way of adding an extra
will prompt a pop-up box to appear requesting that you category, where you should enter the link category name category. When this has been clicked a ‘New category name’
confirm the action. Click OK to confirm, and discard the and add an optional description. When you’re done, click the box will appear. Enter a category name and click on the
link permanently. Add New Link Category button. ‘Add’ button.

07 Add links to the category 08 Removing a category 09 View the site

By following the same process as the ‘Add New’ link If you have created a category that you no longer require, To view your newly created links, click the title of
from our first step, you will see that your new category open up the Link Categories interface and role over the your blog in the top-left hand corner of the window.
is available to select in the ‘Categories’ section. As before, category you would like to remove. Much like removing The new link will appear in the sidebar, listed under
enter the information for your link and then select your a link, an option to ‘Delete’ will appear; when clicked, you the newly added category. Test that the links open
created category by clicking on the tick box next to the will be asked to confirm your action, so click ‘OK’ and the as intended, according to the target you chose in
category name. category will be removed. Step 3.

WordPress for Beginners 117

Setting up

TUTORIALOBJECTIVE
Making permalinks more sophisticated Improve your permalinks and
drive visitors to your blog
to reflect the content of your blog and
drive visitors to your site

TIME REQUIRED
30 mins

SKILL LEVEL IF YOU RUN A BLOG, YOU WANT VISITORS TO COMMENT AND SEND PEOPLE TO
YOUR POSTS, SO MAKE FULL USE OF THE POWER OF PERMALINKS
WEB URLS ARE the roadsigns of the internet, enabling web users to
navigate to websites that are of most interest to them. All very familiar
these days, but what happens when you want to direct people to your
WordPress blog site or more commonly a blog post or a specific page
of your blog? Thankfully, WordPress is very usefully set up to offer this
service automatically. Write and publish a new post on your blog and
you will notice that the URL has automatically been given the suffix
/?p=1 (or any other number). This is known as a WordPress permalink,
a permanent URL for that individual blog post.
It needs to be permanent because you (and WordPress) will need
to know where to find it if you or other bloggers reference the post
from elsewhere on the internet. However, a permalink doesn’t have
to be ugly, so we will show you in this tutorial how to give these fixed
pointers a bit of a facelift. As an added bonus, it will also make your
blog more search-engine friendly.

118 WordPress for Beginners

01 First steps 02 Permalink Settings 03 Custom structure
Go to your WordPress Control Panel and add a new post To view the Permalink settings go to the menu system on The Custom Structure field enables you to add a more
to your site. You’ll see, situated under the title field, that the left and click on Settings and select Permalinks. As you descriptive permalink. As well as being better for search
the new post is automatically assigned a URL that contains can see the Default setting looks fairly uninformative. You engine optimisation, this can improve the aesthetics and
a question mark and numbers. This is the permalink you can instead choose a Day and Name or Month and Name usability of your links. WordPress offers a number of preset
are going to work with. This is the permalink that will be setting, which will reflect the time you added the post, as ‘tags’ for this, marked at the beginning and end with a
associated with the post. well as making it easier to remember. percentage character. For example: %postname%.

04 Making changes 05 Choosing your structure 06 Category Base

Whenever you make an alteration to the Permalinks To get the best out of permalinks visit the link mentioned in The Permalink Settings page lets you add a custom prefix
Settings, click the Save Changes button to ensure any the previous step. If not available in your version visit http:// for categories. So instead of ‘www.yourblog.com/category/
changes you make are saved to your database. You should codex.wordpress.org/Using_Permalinks. This gives an excitingpost1’, you can substitute a more descriptive word,
see a message that says ‘Permalink structure updated’. To insight on how to set up permalinks and how they operate. like ‘stories’, and the resulting URL would become ‘www.
see how permalinks can be improved click the ‘A number There is also information on the structure of the tags, what yourblog.com/stories/excitingpost1’. To remove this prefix,
of tags are available’ link just above Common Settings. they mean and how they should be used. use a plugin such as WP No Category Base.

07 Performance 08 SEO friendly 09 Edit permalinks

Though more aesthetic, structures starting with Making your permalinks friendly to search engines and Head back to the post created at the beginning of this
%category%, %tag%, %author%, or %postname%, require aggregator sites is a key factor in driving visitors to your tutorial. Alternatively select any post you want to edit. Each
more server resources to resolve than structures such as Day blog. The very concise /%postname%/ should be all that’s post will have a unique identifier, such as a name or number,
and Name, Month and Name. A mixture may be useful, eg needed. However, aggregators like Google News need a dependent on the permalink setting. Permalinks can be
/%year%/%month%/%postname%/. With this format users three-digit number in the URL, so / %postname% - %post_ edited on individual posts by simply selecting the Edit
can shorten permalinks to see all posts for that month. id% / might be better for this reason. button and modifying.

WordPress for Beginners 119

Customising
WordPress
136 MODIFY YOUR THEME
Change your blog’s theme to look exactly
how you want

122 WordPress themes –

a complete guide

132 Add a new WordPress

theme to your website

134 Learn how to use the new

Theme Customizer

136 Modify your

blog’s theme

138 Customise your themes

with widgets

142
146 ELEGANT TYPOGRAPHY
Understanding the Apply elegant typography to your website with
basics of CSS the use of Photoshop

144 Discover the flexibility of

WordPress plug-ins and how
they can benefit your site

146 The theory of type

and text

“In the last couple of

years, advances in web
technology have meant
that we’ve been spoilt for
choice when it comes to
font choices”
120 WordPress for Beginners
122 ULTIMATE THEME GUIDE 138 PERSONALISE YOUR SITE 142 BASIC CSS
The essential look at themes, including theme Add widgets to your site to customise it Learn the basics of CSS to
frameworks and how to build one from scratch and add your own personal touch customise your layouts

134 THEME CUSTOMISER

Learn how to use the latest WordPress
tool to your enhance your website

WordPress for Beginners 121

Customising WordPress

The 20 best
WordPress Themes
THEMES AND WORDPRESS GO HAND-IN-HAND. HERE, WE REVEAL THE SCIENCE
BEHIND CHOOSING THE RIGHT THEME FOR THE RIGHT JOB

122 WordPress for Beginners

WordPress for Beginners 123
Customising WordPress

Petra
Source: bit.ly/1NLoQJM
Price: $59
Best used for: Hotel/property brochures

THE PETRA – Hotel, Resort, Bed & Breakfast WP theme is designed to

show off holiday resorts, places to stay or simply a single room or flat to
rent, and help sell them to potential customers. The general layout if
bright and airy, providing enough space for the images to breath while
providing essential, at-a-glance info to the audience.
The theme includes built-in features for potential customers to book
online, including full search and filtering system and block-booking
facilities and the general appearance of the theme is timeless – and once
you start adding your own images it really comes alive. It even features a
complete icon system to list the various services that your facility offers,
such as Air Conditioning, TV & Audio and Wi-Fi. Using the theme is very
intuitive – everything just drops right into place and before long you will
have a visually appealing digital showcase of your establishment. Like we
said, Petra is perfect for showcasing hotels, holiday resorts or simply a
vacant room in your house that you wish to rent out.
The price of the theme includes a DG-booking plugin and ngfilter
plugin, both of which are worth $22, so you’re definitely getting value for
money. Thanks to the eye-catching visual aesthetics that Petra offers, you
can be confident that you’re showing off your property in the best possible
light and it’s surely only a matter of time, then, until those bookings start
flooding in thick and fast!

Hemlock
Source: bit.ly/1qOoZlz
Mesh
Price: $38 Source: demo.themezilla.com/
Best used for: Personal blog Price: $59
Best used for: Personal

FOR THOSE LOOKING to display their portfolio in a clean and contemporary

style the Mesh theme is a great starting point. The theme adopts a simple
left-sided navigation system while the main presence of the sites is dedicated
to an image-based grid.
Mesh is fully responsive and has a lightweight backend meaning that the
theme is quick and nimble. The image grid is conveniently filterable so visitors
can instantly decide which elements they wish to view.
Mesh has a number of customisable elements which gives the option to take
the theme to a new level. It includes a number of custom-built widgets to add
Twitter, Flickr, video and advertising. There is also a collection of custom
pre-built page elements to ensure that you get the layout you want.

HEMLOCK IS A classic-style blog with a touch of style and class that makes it clean and
contemporary. Rarely has a standard blog theme looked this good. It is refined, sleek and
doesn’t have a mass of annoying additions to distract users. The standard blog style uses wide
images, classy serif fonts and a simple colour combination that adds that little bit of elegance.
Individual posts retain the same style, but include neatly styled pullquotes, subtle social media
buttons and biographies.
There is the option to change from the classic layout, if you really need to, and adopt the
classic WordPress sidebar. This gives the option to include more content on the home page
without spoiling the style. For more flexibility there is the option for different style posts such
as video, music and gallery.

124 WordPress for Beginners

Kataleya
Source: anpsthemes.com/demo/?theme=kataleya
Price: $48
Best used for: Business

THE KATALEYA THEME has a very specific purpose and if that purpose is
exactly what you are looking for then it is perfect. It has three main core
options: restaurant, pizza place and coffee shop. The main page uses a
fullscreen image to display the core product. These are easily changed to
include more custom photography. But it’s not the image that makes this
theme different it’s the elements tailored to suit the subject. What do a
restaurant, coffee shop and pizza place all have in common? The need for a
menu. Access is neatly tucked to the side of the page. This is obviously
customisable and searchable. Sitting alongside the more aesthetic
elements, the theme also includes some very useful additions such as the
Make a reservation option.
The blog option is an effective way to highlight the latest additions to a
menu or reveal the latest offers. The design is neatly laid out so that there is
yet more scope for some great photography. While the theme has a core
purpose, it still has the potential for a plethora of different site styles. It is
fully responsive, has a number of different colour schemes and extended
documentation. Simply use your imagination to see how it could work.

“While the theme has a

core purpose, it still has the
potential for a plethora of
different site styles. Simply use
your imagination”

JRNY
Source: jrny.wpengine.com
Price: $43
Best used for: Photo blog

SOME THEMES ARE just gorgeous to look at and JRNY is one of

those themes. It uses beautiful fullscreen photography combined with
contemporary fonts to create an experience definitely worth looking at.
While the image grabs a user’s attention the theme is effectively very
simple. Each image is accompanied by a title and other typical post
text. A rollover effect is used which brings the text into play. Scrolling
down the page reveals more fullscreen images.
Delving into the individual post design reveals more of the same
with the featured images topping the page and well thought out
typography adding to the ambience. To keep the style consistent
throughout the theme, images are not constricted to the boundaries
of the text but are let free to fill the full width of the page. Sitting
neatly at the bottom of individual posts is the popular related post
option. But, this is a single option, once again taking on the full width
image persona.
To keep in fitting with the fullscreen and full width imagery an off
canvas menu is used. This slides into view when called, pushing the
content aside and disappearing when no longer needed.
Customising the theme is quick and easy. There are four grid layouts
to call into action, a bespoke Theme Customizer and the option to add
a Load More facility to keep the posts manageable.

WordPress for Beginners 125

Customising WordPress

OneEngine
Source: demo.enginethemes.com/oneengine/
Price: Free
Best used for: Multi-purpose

FINDING A TOP-QUALITY free theme is never an easy task, but

OneEngine not only fits the free bill, it also has an abundance of style
and ability. The theme adopts the one-page style meaning that its many
talents are all on display with some simple scrolling.
So what does the theme have to offer? For those who want a
contemporary style then the design does the job. It uses popular and
current fonts along with simple and subtle colour palettes. Integrated into
OneEngine are over 600 Google fonts and an unlimited number of colour
schemes. If you want to add the popular parallax effect you will find this is
included in the theme line-up. Another popular addition is a smart slider
which is responsive and touch-friendly, crucial for today’s websites.
To make sure that you get the right layout OneEngine offers a layout
builder. This uses drag and drop blocks to quickly create a custom and
unique layout. Alternatively, a simple blog style layout, the choice is yours.
To add a splash of the wow factor there are over 60 animation effects built
into the theme, simply apply and impress. Finally, alongside this impressive
collection of features OneEngine has an easy to tweak collection of theme
options. Download and test this theme without spending a penny.

“Integrated into OneEngine are

over 600 fonts and an unlimited
number of colour scheme to
choose from”

Mont
Source: bit.ly/1AbF4Fr
Price: $41
Best used for: Magazine/blog

THE MONT THEME adopts the magazine style but adds a

modern twist to make it a comprehensive and content
heavy option. For those who are looking to create a
magazine-based site then Mont is the perfect answer, but it is
no one-trick pony. It has a number of layout options that
instantly offer a different style to present any content. For
example, there is the magazine all module option which
embraces all the elements that the theme has to offer. Users
get a pride of place image slider to present content, a news
ticker, a host of category based options and reviews. This can
be manipulated and rearranged to fine-tune the layout. The
alternative is to select one of the other layout options. These
provide the option to put sidebars left, centre or right along
with the content. If these layouts don’t exactly match your
preferences they can be tweaked to suit. Whatever option is
selected there is no doubt that the theme gives the
impression there is a lot going on, a lot for viewers to absorb.
Mont, like all good themes, is fully responsive and includes
a theme customiser which makes it easy to find the perfect
variation of theme that you want.

126 WordPress for Beginners

Divi
Source: bit.ly/1d1m8wM
Price: $69 per year up to $249 for lifetime access
Best used for: Everything

DIVI IS SOMETHING of a revelation, a smart and wholly flexible

theme that can be used for any purpose. We’ll get the awkward cost
issue out of the way first because Divi isn’t a cheap solution. For personal
use the package will cost $69 a year, and for developer use it will cost
$89 a year. However, for a one-off fee of $249 you get a a lifetime access
to the theme and full access to all of its features – and there are many
to enjoy.
Included in the package is the Divi Builder, which allows you to create
eye-catching web layouts without touching a single line of code. There are
18 pre-made layouts accompanying Divi, and the selection on offer will
allow you to quickly jumpstart your web development. They are all fully
customisable and can act as handy building blocks to help you develop
your own designs.
Divi is amazingly responsive to whatever you throw at it, and it allows
you to build and configure every facet of your website. The Divi Builder
utilises a simple drag-and-drop system, so you can add or delete elements
from your page with ease. It is a very versatile system and there are no
limitations as to how the elements you include can customised and
arranged – so you can reap the benefits without getting your hands dirty
by diving into the code. Sadly there is no free trial, but you can view the
Live Theme Demo from the website to see exactly how Divi works.

Top Solutions
Source: http://bit.ly/1lGGWG5
Roua
Price: $79 Source: demo.stylishthemes.co/roua/
Best used for: Business Price: $43
Best used for: Portfolio/Personal Blog

BUILT BY STYLISH themes, the Roua theme fits the bill perfectly. It is
undoubtedly stylish and brings together a host of popular and contemporary
elements that set it apart from many other themes. Roua adopts the popular
fullscreen opener but it adds a subtle touch to the premise. There is a faded
background image coupled with minimal text to ensure that the content is
the focus.
The content is accompanied by a simple menu icon, keeping the menu
hidden until called upon. The menu uses the off canvas style and pushes the
content to the side when active. The theme also adds in a host of social media
icons. The blog element is portrayed as simple text until rollover when a full
screen background image makes an appearance and adds a touch of class.

SHARP AND EYE-CATCHING, the Top Solutions Wordpress theme can help get any online
business noticed. The flat design features an array of coloured blocks to give the layout a
modern look and the main menu can be hidden, providing much more onscreen real estate to
your site, which is especially usful for mobile devices where screen space is at a premium. The
theme also offers a neat parallax effect that really brings the content to the fore.
Building your webpage is a quick and easy process thanks to Top Solutions’s drag-and-drop
construction system. As well as a great look, Top Solutions also provides a responsive interface
that is effortless to navigate thanks to everything being within easy reach thanks to concealed
mega-menus that house all of the options. So if you want your online business to reach the
masses then this could be the theme for you.

WordPress for Beginners 127

Customising WordPress

VAstudio
Source: themes.fastwp.net/vastudio1
Price: $43
Best used for: Portfolio/Agency site
Stack
Source: bit.ly/1OdMIdC
Price: $49-$69
Best used for: Design and photo portfolios

EYE-CATCHING AND EFFECTIVE, the Stack WordPress theme

was inspired by the Metro design used by Windows 8. The
similarities are certainly evident, as Stack brings a colourful and
familiar look to your website that is fun and engaging.
This theme is designed to work seamlessly with the Tiles add-on
(which is included in the package), which allows you to create
great-looking metro layouts using a simple drag-and-drop builder.
Perhaps best used to showcase design and photography portfolios,
there is no reason why this format can’t be adapted to show off
pretty much anything. The Stack theme features a fixed sidebar to
the left panel that makes navigation easy and the theme supports
WooCommerce, the popular free plugin that allows you to add an
eCommerce shop to your WordPress site.

THE VASTUDIO THEME is another one of those multi-talented themes that give the owner a host of
different options. It is at its core a creative one page theme with a focus on creative agencies, digital
studios, personal freelancers and photographers. On offer is a fullscreen parallax option along with
fullscreen video background, fullscreen background slider and custom height parallax. Each of the different
options adds a twist on the primary focus which is a fullscreen home page.
To compliment the different design option there are a host of pages including contact, about us,
services, clients, portfolio, blog and pricing.
Behind the scenes the theme uses a visual composer, which makes it even easier to create a unique
layout. Plus, the theme includes a host of icon fonts, CSS3 effects and animations, optimised code and is
fully responsive.

Flatolio
Source: athemes.com/theme/flatolio/
Price: Free
Best used for: This theme offers

THE FLATOLIO THEME instantly gives users a quick hint of what is to come with its carefully chosen
name. The theme adopts the popular flat design style which gives it a contemporary edge. Plus, it’s “With its colourful and
responsive and favours the one page portfolio style to add to its credibility.
The themes style and colour scheme make is cool and classy, but it is its simplicity that adds to overall engaging look, you can
appeal of the theme. The theme splits into all the popular sections you would expect to see
in a modern WordPress theme. On offer are about, portfolio, quote, services, video, promotion
create great-looking metro
and blog. layouts using a simple drag-
The blog section is simple and straightforward, it offers the basic you would hope to see, image, title
and a text excerpt. The individual posts are again simple but well-laid out and make good use of and-drop builder”
typographical hierarchy to create very readable content.

128 WordPress for Beginners

 Snaptube
Source: bit.ly/1unY3fc
Price: $48
Best used for: Video

THE VIDEO IS an often forgotten element of the WordPress

theme. It makes it as a background and often makes itself known
in most posts. However, a dedicated theme is a rarity, but Snaptube
happily fills the void left by others. The theme makes sure that its
core focus, video, is very much in evidence on the home page. The
popular image slide concept is called into action, substituting
images for video. The full width slider gives users plenty of space
to present a video collection, while giving the user plenty to
contend with.
The basic layout is standard stuff with videos neatly separated into
a host of categories. There are no simple images here; users can get
direct access to any video on the home page if desired. Individual
posts add more credence to the video watching experience
supplying descriptions and embed codes.
If the layout is not what you are looking then this is when the
theme’s features can be called into action. You can build your own
custom layouts using the drag and drop interface. The theme is
responsive and includes a host of features that add to its appeal. The
addition of Google fonts support, retina ready and good video
support make this a must for those looking to create a YouTube
sensation that is easily customisable.

ReBLOOM
Source: bit.ly/WhEl8u
Price: $43
Best used for: Multi-purpose

WHEN IT COMES to WordPress themes it can be difficult

to find a theme that has that spark of originality that will
set your site apart from others. It is difficult to come up
with a unique and interesting angle of the standard
WordPress theme but Rebloom does a good job of trying.
The standard home page adopts the popular fullscreen
image andcouples this with an animated vertical
navigation menu. The placement makes for a good user
experience but it could offer more potential. And, this is
exactly what Rebloom does. It offers a variation of the
home page with image slider and Ken Burns effect, plus
there is the far more creative alternative layout. This offers a
central navigation system which opens up the page and
gives users two options to view simultaneously. Another
useful addition is the simple Chapters layout, again an
interesting addition to a theme definitely worth a first,
second and third look. These are not the only features/
designs that grab the attention. The blog, while simple, still
manages to be creative and functional. On the more
practical side the responsive theme works really well on all
desktop, tablet, smartphone and is also retina ready.

WordPress for Beginners 129

Customising WordPress

Sequoia
Source: bit.ly/1ro2ypX
Price: $58
Best used for: Online shop

THE SEQUOIA THEME is at its very core an e-commerce theme, making

it the perfect option for those who are looking to get online and start
selling, but with an added touch of style and sophistication. The theme
is described as ‘A WordPress theme mainly designed for usage with a
WooCommerce plugin powered e-commerce site’. With the main parent
theme there are an additional three child themes for starting with a
specific site or e-shop category – Fashion, Food or Handmade products.
This means that it has a core theme with a host of themes that can be
used in conjunction with the core theme. Each of the child themes has a
number of different styles. For example, Fashion has four built-in choices,
while Food and Handmade have a couple each. These are all well–
presented with contemporary styling, on trend fonts, typography and
colour schemes. Plus, six header styles ensure that the ideal option is found
for the shop.
On a more practical level and to provide stability and peace of mind the
build of the theme is based on the very popular responsive ‘mobile first’
framework Zurb. This is extremely well-supported and documented if you
fancy making any changes.
However, we will leave it to the creators of Sequoia to perfectly describe
its talents, ‘There are no limits to what kind of sites can be created with
Sequoia’. Enjoy.

“With the main parent theme

there are an additional three
child themes”

WPJobus
Source: alexgurghis.com/themes/wpjobus/
Price: $53
Best used for: Business

THE WPJOBUS IS a theme with more than just one purpose. It

has an overall focus but at its heart it acts as a job board,
personal resume and company profile. If you run your own
business or company and want to tell everyone who you are,
what you can do and even let other people know what jobs you
have on offer, this is the theme for you.
The beauty of the theme is its flexibility and functionality. The
job board provides the option to browse, search, filter and refine.
And there is no reliance on third-party plugins to power the
functionality. The options are specifically coded for the theme.
Another noteworthy feature is that it is Stripe ready. This means
that it has an instant monetisation model built-in.
The functionality of the theme is equally matched by its
styling. It boasts all the latest and popular UI elements which
mean that it won’t look out of place on today’s web. Plus, the
professional layout and design will give the right impression and
encourage users to want to interact.
Finally, if you want to get more out of the theme it can be
used as a base to create something similar. All it needs is a little
imagination to take beyond its very useful core.

130 WordPress for Beginners

Statesman
Source: demo.themezilla.com/statesman
Price: $38
Best used for: Personal blog
Literatum
Source: kohette.com/wpthemes/literatum
Price: $43
Best used for: Personal blog

LITERATUM IS AN excellent theme for those who want to

present their written work in a contemporary and clean
magazine-style. The layout of the theme is simple, smart and
engaging thanks to its use of large photos and images. These offer
instant impact and are combined with neat, well proportioned text.
The home page is image overload, but delving into the individual
posts reveals a more sedate and minimalist approach to the
content. Each post kicks off with a fullscreen image before
revealing a column of neatly stacked text interspersed with images.
So, what features does the theme have?
It offers the option to replace the featured image with a video,
giving fullscreen video at the top of each post. There is comment
integration via Facebook and Disqus plus over 400 different icon
fonts to add a little extra visual interest with ease.

THE STATESMAN THEME is described as elegant and demure with a special focus on the written word.
There is no doubt that this theme is aimed at those who are looking for a more traditional or proper
bloggers’ theme with a touch of class and style. The format, design and layout of the Statesman are simple
and straightforward. The home page presents the first post, mimics the style of the one-page portfolio
with a big image as the background and text simply placed in a white box with the popular Roboto taking
over the fonts and typography duties.
Rollover images that switch to colour in the posts add a touch of style and the responsive design means
that the theme looks well-manicured wherever it is being viewed. If you want a simple, classy theme with
a focus on content then start here.

Music
Source: bit.ly/1lfzukY
Price: $49-$69
Best used for: Band promotion

IF YOU ARE a budding musician, then the Music theme is tailored to help you get noticed. Also suitable
for artists, events, portfolios and apps, the Music theme allows you to embed a music player to blast out “Literatum offers the option
your tunes, an album playlist and even fullwidth video backgrounds. So you can create attention-grabbing
webpages with your own music videos playing in the background. to replace the featured
The intuitive build system allows you to piece together an unlimited number of layouts using simple
drag-and-drop. Everything, from the fonts to the colour scheme can be tailored to suite your intended
image with a video at the
style and you can really make the templates your own in just a few minutes – all without having to touch a
single line of code. All aspects of your music can be promoted through this eye-catching theme, even
top of each post”
forthcoming gig dates because you can also include a Google Map view of the venue.

WordPress for Beginners 131

Customising WordPress

TUTORIAL OBJECTIVE
We’ve shown you the best websites for
free themes; now we show you how to Add a new WordPress
theme to your website
apply them to your pages

TIME REQUIRED
10 mins

SKILL LEVEL A BLOG TENDS TO BE A PERFECT OUTLET FOR CREATIVE EXPRESSION AND
CONVEYING PERSONALITY, WHICH YOU CAN ENHANCE BY USING A NEW THEME
THEMES ARE A great way to not only change the look and This feature allows users to search, preview, download and
style of your weblog – in relation to the various pieces of install themes directly from within the dashboard, making
page furniture – but also provide greater control over how the whole process quick and easy. However, the ‘Add New
the information is presented. A theme is essentially a group of Theme’ feature is restricted solely to the WordPress Theme
files that work in unison to produce a new graphical interface. Directory and so themes outside of the directory will need to
Mercifully, finding and installing them is relatively quick and be downloaded and installed manually – which provides a lot
easy – especially as since WordPress 2.8 there is the option to more variety, but requires slightly more effort. Here we show
search for and add themes within WordPress itself. you how to do both.

01 Find a new theme 02 Preview a theme 03 Install a theme

When you first start using WordPress, two themes You can browse themes by categories such as ‘Trending’, Once you have found a theme to suit your requirements,
will be available to use as standard: Twenty Fourteen or trawl through an A-Z. If you’re after something more click on Purchase, if it is a paid-for theme, or Activate, if it’s
and Twenty Fifteen. However, more themes can specific, enter keywords into the Search window. When free. To review the new theme options, click Themes, where
be searched for and installed. Open the Appearance you have a list of options, click on the Preview link beneath you will find the newly downloaded theme listed as the first
menu, then Themes and click Add New to the accompanying image to get a zoomed-in view of that option, with the Active label striped across the bottom of
get started. theme so you can gauge if it is appropriate to your needs. the theme image.

132 WordPress for Beginners

04 Activate a theme 05 Theme options 06 Your theme in action
Once the theme has been installed, you’ll have a number If your chosen theme has specific options that you can tailor, Once a new theme has been activated and its options set,
of actions available. Click the Customize button to get a new link will appear in the Appearance menu. Click on the you can start adding posts to your page to see how your
started, where a live preview of the new site theme will link to show the options and make any changes needed. theme looks in use. Go to Posts, highlight any added posts
be displayed alongside several options. This view can The options you will be presented with vary depending on and click on View. You’ll now be able to see how your posts
also be activated in sites you find in search results by which theme has been selected. If you make any changes, look in your new theme. If you are unhappy with any aspect,
clicking Preview. be sure to hit the Save Options link to keep them. choose a new theme and start afresh.

07 Add an original theme 08 Other theme sites 09 Decompress and read

Original themes cannot be uploaded to pages hosted at If you cannot find the theme that you are looking for in Most themes are downloaded as zipped files to reduce
WordPress.com. Instead, if you wish to apply a custom the WordPress catalogue, you can always search online for the time they take to download. Locate the downloaded
theme then you will need to move your blog to a self- suitable options. There are many sites offering free themes, file on your computer and unzip the folder, then check the
hosted WordPress installation. You can find examples so take a little bit of time to browse, and when you find contents for a ‘ReadMe’ file. Open this and study it well to
of hosts on page 80, or check the http://get.wp.com/ one that you like, locate the Download link and save it to find out how the theme is allowed to be used and what the
hosting page. your desktop. features are.

10 Upload new themes 11 Transfer themes 12 Activate new theme

After downloading your new theme, you will need to You’ll need to configure your FTP client with your web With the new them uploaded, you can instantly resigned
upload it to your WordPress web host. This will require hosting account details. With a connection established, your blog by clicking Activate. If you’re not 100% certain
an FTP client such as Fetch or FileZilla, both of which can use the FTP client to browse to the downloaded theme on (some themes need further configuration) click Preview.
be downloaded for free. Search the web for the current your computer and upload it to wp-content/themes. Once When the theme is finally activated, spend some time
link and follow the appropriate instructions to download uploaded, login to your Dashboard and check Appearance> checking different post and page types on your blog to
and install. Themes to check that the theme has been uploaded. ensure everything is working correctly.

WordPress for Beginners 133

Customising WordPress

TUTORIAL OBJECTIVE
Editing and preview your WordPress
themes by using the new Theme Learn how to use the
Theme Customizer
Customizer feature.

TIME REQUIRED
10 mins

SKILL LEVEL THANKS TO WORDPRESS 3.4, YOU HAVE MORE FREEDOM TO MAKE YOUR MARK ON THEMES. HERE
WE GUIDE YOU THROUGH THE PROCESS OF ALTERING THEMES TO SUIT YOUR OWN NEEDS
WHEN WORDPRESS 3.4 was introduced, the biggest website, so you can browse it as normal and any changes that
changes over its predecessor centred around installing and you make via the customisation menu will automatically be
using themes. In the ‘Themes’ section of your site, you will applied, making it easy to see what works and what doesn’t.
see a new option called ‘Customize’ underneath each theme Of course, there is still room for improvement – especially in
and by clicking on this you can tailor various aspects of the regards to choosing header images. It’s worth bearing in mind
theme to suit your own needs. A column on the left-hand side that any images you wish to import for this purpose have to be
of the screen focuses on various aspects of the theme and in a 1000 x 288 pixel format, otherwise they simply won’t be
what you see, and these include ‘Site Title & Tagline’, ‘Colors’, displayed. As long as you are working in these parameters then
‘Header Image’, ‘Background Image’ and ‘Static Front Page’. you shouldn’t have too much trouble, and everything else in
Also, the right-hand side of the screen is a live preview of your the Theme Customizer is easy and straightforward to apply.

01 Click on Appearance 02 Select Customizer

On the main WordPress Dashboard page, open Appearance and then Themes to open the Upon landing on the ‘Manage Themes’ page, you will see the new ‘Customize’ feature below
theme management screen. Here you will find a list of installed themes, they are the themes the summary of your current theme. Click on this to be able to change the header, background,
that you have used at some point on your site, or installed previously and not used. The one title and menus of the current theme. Select a theme and then click on the new ‘Customize’
that is currently live on your site will be displayed first, labelled as Active. option that will be selectable beneath the theme you have selected.

134 WordPress for Beginners

03 Preview information 04 Customise title and tagline
At the top of the left-hand column is a section called ‘You are customizing’ and the name of The various aspects of the theme that you can customize will now be accessible from the left-
the current theme. Click on this to be provided with an overview of the current theme and the hand column. Start off by clicking on the ‘Site Title & Tagline’ option and two text boxes will
various aspects of it that you can customize using this feature. appear that allow you to enter a new title and tagline.

05
Customise
colours
Next, click on the ‘Colors’
section and options to
change the header text
colour and the background
colour will appear. By 06 Customise Header Image
clicking on either option Expand the Header Image section to import your own
you will bring up a colour image to set as a custom header. Click on the arrow on the
spectrum, making it easy default image and then either drag a new image from your
to find the colour you are computer into the space provided or click the Add new
looking for. image button to browse your computer for the new image.

07 Customise the Background 08 Customise Front Page 09 Save & Activate

If you would like to set an image to use as a background The last option in this section is dedicated to choosing what Once you have reviewed all of your customisations and
on your page, click on the ‘Background Image’ section and, appears on your site’s front page. By clicking on this section are happy with them, click the Save & Activate button at
much like the ‘Header Image’ section, you can either drag a you can either select your latest posts or simply display a the top of the column to apply the changes. Any
new image into the space provided or click the ‘select a file’ static page. Click on your preferred option and then review problems? Don’t worry – you can change them again
link to find the new image. all of your selections before making them live. whenever you wish!

WordPress for Beginners 135

Customising WordPress

TUTORIALOBJECTIVE
Quick tips for modifying a WordPress
theme and giving your site a unique,
standout look
Modify your blog’s theme
WITH A LITTLE PATIENCE, KNOWLEDGE AND GUIDANCE, A WORDPRESS THEME
TIME REQUIRED CAN BE MODIFIED TO CREATE A NEW LOOK IN LESS THAN AN HOUR
30 mins
THEMES ARE THE style icons that drape themselves across images might not be exactly what is wanted. For a quick fix
SKILL LEVEL the underlying framework, making them exactly what the makeover, the simple answer is to modify the style sheet
users see. There are thousands available on the web, whether (style.css). This is common across all WordPress themes, but
premium or free. Typically, premium themes offer more the naming conventions, apart from HTML tags, are almost
features and style, but there are plenty of free themes that guaranteed to be different. Thankfully, a browser and a
make the grade, it’s just a matter of finding them. visual HTML authoring tool can assist with the identification
Once a theme has been found and installed it can be used process. With tags identified and styles in mind a theme can be
immediately. However, the colours, fonts and background changed very quickly.

01 Select a theme 02 Easy to identify 03 Body text

There are thousands of themes out there, ready to be given To help identify the different elements, you can save the To view changes immediately, open two browser
a makeover. For this tutorial we have downloaded the Killian page in your browser and open it in a developer program windows, one code and other URL, and place side-by-side.
theme from Solostream (www.solostream.com). Install the or the developer tools option in your browser. Chrome Alternatively, open two tabbed windows. The body tag
theme, head to the Dashboard and activate the theme. Now and Firefox both have a built-in feature, which will help to contains the default font and font size. Change font-size to
click Appearance>Editor and select Stylesheet (style.css) identify the tags. Open Appearance>Editor and copy the 10pt and font-family: Verdana, lucinda, arial, geneva, sans-
from the Edit Themes screen. content from style.css and back it up to your computer. serif. Click Update file and refresh the page.

138 Beginner’s guide to WordPress

136 WordPress for Beginners
04 Post title 05 Remove backgrounds 06 More backgrounds
To modify the post title text head back to styles.css and The current theme uses a selection of background images to The previous step gets rid of the background image at the
locate Headings. The first class, h1, h2, h3, h4, h5, h6, h7, add the curved corners. Head to the #nav tag and comment top of the page. To remove the other main background
determines the font. Change font-family: georgia, times, serif; out the background by adding /* before and */ after. This images scroll down to #page and comment out the
to font-family: Verdana, georgia, times, serif;. Now head to leaves the text there should it need to be put back into background. Finally, head to #footer and comment out
the h2 tag and change the font-size to 24px. To change to a place at a later date, but also means it doesn’t display in the the background image here too, giving you a clean slate
different size font simply modify to suit. live page. to work with.

07 New background 08 Transparent background 09 Big head

Here we have chosen a vector-style winter themed image The main content area theme is now all one colour, but The default theme incorporates the blog title at the head
at 1500x1500 pixels to help compensate for different not a complimentary one. This is to be changed to a of the posts. To remove this, head to Settings>General and
resolutions. Add background #55C5D1 url(images/snow. transparent white to give a subtle blend and make the delete the Blog Title. To remove it altogether open the
jpg) 0 0 repeat-x;. This will add a horizontal repeating background visible. Create a 10x10 pixel image with a Header (header.php) template, scroll down and locate the
background image and a coloured background that transparency of 70-80% and save as a PNG-24. Now add: <div class=”sitehead”>. Add the following <!--before the
matches the image. background:url(images/white70.png) repeat;. opening tag and --> after the closing tag.

10 RSS feed 11 Search bar 12 Link styles

With your new-look theme almost done, create a preview To modify the search bar colours, scroll down style.css and To modify the link styles locate .tabbernav li.tabberactive
image by viewing your blog and taking a screen shot. Save first locate ul.tabbernav under the Tabber section. Change a and change the background colour. Do the same to
the image as a PNG-24 format file and save it as “screenshot. the background to #55C5D1 and the border:1px solid #39c;. .tabbernav li.tabberactive a:hover. Finally, change the
png”. Using your FTP software, upload this file to the theme This will change the tab section. Now go to .tabberlive background colour of .tabbernav li a:hover to the same
folder on your server. When you preview the theme in .tabbertab and set the background and border to the same colour as the hover state. That’s it, a completely new theme
WordPress, this image will be displayed. as above. in no time at all!

WordPress for Beginners 137

Customising WordPress

Customise your themes with widgets

TAKE CONTROL OF YOUR WIDGETISED AREAS BY PLACING THEM ANYWHERE
INSIDE YOUR THEME, FROM CENTRE STAGE TO THE WINGS
MOST WORDPRESS THEMES make it very simple for users to This tutorial will show you how to customise a theme by TUTORIAL
control elements on their website’s sidebar using a system of adding a widget area to the region just above the main content OBJECTIVE
widgets. A drag-and-drop interface allows users to easily add, section. The principles are the same whether you’re adding one Learn how to add widgets to your
WordPress theme
move or remove these widgets, which provide functionality widget area or 20, and whether you’re creating your own parent
such as a list of the most recent posts, a rolling Twitter feed or a theme that you use for all your clients or simply modifying an
newsletter sign-up form. existing theme used by a client.
TIME REQUIRED
1 hour
While widget areas – the sections of the Widgets admin screen Note that, in the WordPress codex, any location where widgets
where you place and position the widgets – were originally can be placed is referred to as a sidebar, which can be confusing SKILL LEVEL
developed for the sidebar, they can in fact be inserted virtually since they may be placed anywhere on the page and not just to
anywhere in a design. As long as they are functional and not too the left or right. In this guide we use the term ‘widget area’ rather
distracting, you can be really creative. than sidebar to avoid this potential mix-up.

“The principles
are the same
whether you’re
creating your
own parent
theme… or
simply
modifying an
existing one”
The widget area we create will sit just above
the content area of all WordPress pages; we
are using the Foodiary themeby simplyWP

01 Choose a location 'id' => 'right-sidebar',

'description' => 'Widgets in this area will be shown on
register_sidebars().
<?php register_sidebars( $number, $args ); // Number
Determine where you want to create a widget area within
your design. It can be anywhere except inside the content the right-hand side.', is the quantity of widget areas ?>
area generated by WordPress, but you can have widget areas 'before_widget' => '<div id="%1$s"
directly above and below the content area. In this tutorial
we’ll add one immediately above the content on pages but
class="widget %2$s">',
'after_widget' => '</div>',
04 Default settings
There are seven possible arguments you can pass in the
not on posts.
'before_title' => '<h3>', register_sidebar() function, allowing detailed control of the
'after_title' => '</h3>'
02 The register_sidebar()
markup for the widget area and the widgets active within
)); it, and we’ll go through each in turn. All of the default
function arguments are shown in the following code example.
To enable your widget area in WordPress you must ‘register’ it
in the functions.php file of your theme. This is done using the
03 Avoid a similar function register_sidebar (array(
'name' => sprintf(__('Sidebar %d'), $i ),
Don’t confuse register_sidebar() with another WordPress
register_sidebar() function (shown in the code below), which function called register_sidebars(). The difference between 'id' => 'sidebar-$i',
instantiates a single widget area. If you want more than one them is that register_sidebars() can create multiple widget 'description' => '',
area, just call the function for each of them individually areas at a time, all with the same name and HTML markup. 'before_widget' => '<li id="%1$s"
register_sidebar (array( Since most of the time you’ll want to control those class="widget %2$s">',
parameters on an individual basis, it’s probably best to avoid
'name' => 'RightSideBar', 'after_widget' => '</li>',

138 WordPress for Beginners

 Top left
• Make life easier by naming your widget
areas so users can clearly understand
where they’re locatedin the design
Bottom left
• Widget areas can have descriptions
too. Make use of them to provide users
with more information about the area’s
purpose/limitations
Bottom right
• After uploading the functions.php file,
the Top of Pages widget area that we
have just created will appear on the
Widgets screen

'before_title' => '<h2

class="widgettitle">',
07 Widget area description 'before_widget' => '<div id="%1$s"
class="widget %2$s">',
The description argument of register_sidebar() appears
'after_title' => '</h2>' 'after_widget' => '</div>',
below the title of an expanded widget area. It’s useful
));
10 Before and after titles
for providing more details about where the widget area

05 Widget area ID
displays within the theme design. It’s also helpful to put any
instructions to users, such as sizing limitations for the widget Most widgets allow users to create a title, and the before_title
area. The default for this argument is an empty string. and after_title arguments of register_sidebar() control
The id argument of register_sidebar() is used internally by
'description' => __( 'Add a widget above the HTML surrounding that title. The defaults are: <h2
WordPress to identify a widget area and, as you will see in
the upcoming steps, it’s used as a parameter in template tags the content area on all Pages.' ), class=“widgettitle”> and </h2>, respectively. You’ll probably
dealing with widget areas. // For more about this code format, see Step 8. want to insert your own HTML here, in particular to create a
Although WordPress will create a default id, assigning your better class name.

08 Multilingual option
own is a good habit to get into because it will make later 'before_title' => '<h2 class="widget-title">',
revisions much easier. 'after_title' => '</h2>'
'id' => 'page-content-top', You may want to internationalise the name and description

06 Widget area name

arguments for your widget area – that is, make them
translatable. All you need to do is wrap them in the following 11 Completed register_
The name argument of register_sidebar() is used as the title of
way: _(‘This Sidebar’. sidebar() function
09 Before and after widgets
Now that you’ve finished your register_sidebar() function,
the widget area on the Widgets admin screen. It’s important
you could just paste it into your functions.php file, however
to assign a good descriptive name so that users will easily
there’s actually a better way to proceed. WordPress has a
remember the role of the widget area. The before_widget and after_widget arguments of register_
number of built-in ‘hooks’, which provide a standardised way
If no name is given, WordPress uses the default name sidebar() insert HTML at the start and end of any widgets. The
of inserting code into the flow. We’re going to register our
Sidebar along with a number based on how many widget respective defaults are: <li id=”%1$s” class=”widget %2$s”>
areas are registered. and </li>. If you specify a different HTML block element, be widget area through one of these hooks.
'name' => __( 'Top of Pages' ), sure to include the id and class attributes exactly like the
register_sidebar( array(
// For more about this code format, see Step 8. default; plug-ins rely on them.
'id' => 'page-content-top',

WordPress for Beginners 139

Customising WordPress

Top to bottom, left

• Here you can see the before and after shots of our page.php file as the coding for
displaying the widget area gets inserted
• Dragging a widget to a widget area automatically opens it up, ready for us to enter
some text in this case
Below
• On the live site, the text we entered in the widget is now showing, but it needs to be
‘prettified’

'name' => __( 'Top of Pages' ), what the line of code shown below is for. Place it before the // Add your functions below at the end of the file you
'description' => __( 'Add a widget above the master registration function, and be sure that the name of do not need to close out the php tag.
content area on all Pages.' ), the second argument matches the name of your master
'before_widget' => '<div id="%1$s"
class="widget %2$s">',
registration function.
add_action( 'widgets_init', 'master_registration' );
16 Display the widget area
While the widget area has been created, currently any
'after_widget' => '</div>',
14 Save and test
widgets that are placed there will not be displayed.
'before_title' => '<h2 class="widget-title">', We need to tell the appropriate theme template to
'after_title' => '</h2>' show those active widgets by using the WordPress
Save your functions.php file. Upload it if you’re not running
) template tag: dynamic_sidebar(). You’ll be pleased to
on a local server, and now you’re ready to test whether your
hear that this tag takes just one parameter: the id of the
); widget area is working as it should be.
In WordPress admin, navigate to Appearance> Widgets widget area.

12 A single registration and see if the widget area is displayed on the right-hand side
of the screen. If not, simply go back through these steps and
<?php dynamic_sidebar( 'page-content-top' ); ?>
function
In your functions.php file, if there isn’t already one, create a
double-check that the code is all correct.
17 But first, a conditional
master registration function like the one in the example step
code. You can name the function anything you like. Next,
15 No functions.php file? Before inserting dynamic_sidebar(), you should wrap it in
a conditional, using the WordPress function is_active_
place any register_sidebar() functions within this master If you’re working with a child theme and it does not
sidebar(). This tests whether a widget area has any widgets
function (at the moment you will only have one). already have a functions.php file then you will need to create
in it.
function master_registration() { one (as we have demonstrated in the sample code below).
We’re not interested in an empty widget area, so testing
Bear in mind that unlike other files in a child theme, the
only for its existence, for example, with the commonly used
// Put all your register_sidebar() functions between functions.php file does not replace the parent theme’s file
conditional ‘if (!dynamic_sidebar(‘header-right’))’ does not
these two brackets – what actually happens is that the two are combined and
work together. help us at all in this instance.
<?php if ( is_active_sidebar( 'page-content- top' ) ) : ?>
} So the key thing to remember is that there is no need to
copy the contents of the parent functions.php, as this would
Insert a call to the widget area and any other coding
13 Hooking into WordPress be a tautology.

<?php
here
<?php endif; ?>
Now you need to tell WordPress to run this master registration
function and insert it into a hook called widgets_init; that’s

140 WordPress for Beginners

“Stylesheets can help to minimise potential
problems, but you’ll need to make the client
aware of what will and won’t work in their
new widget area”
18 Widgets gone a-wanderin’? 21 Almost there…
Now that you’re testing whether the widget area is active, View the live site with the added widget. If it worked you
you’ll need to decide what happens if it’s not active. There should now be able to see the message that we entered into
are two basic choices, each requiring a different coding of the text widget. However, it doesn’t look very good. It’s time
the template file: 1) provide default content; and 2) prevent
anything from displaying. An example of each is shown in the
for some styling, using the id attribute that we assigned to this
text area. Widget power
code below: corrupts absolutely
Provide Default Content: 22 Finishing touches Expanding widgets to areas of a site other than the
sidebar offers even more flexibility to WordPress users,
With some styling added, the box is looking more like it
<div id="page-content-top"> but, be warned, there is the occasional danger. You and
belongs with the design, while the client is free to change the
the client, for example, have something specific in mind
text at any time without worrying about how it will look. If you for the new widget area, but six months from now things
<?php if ( is_active_sidebar( 'page-content -top' ) ) had multiple widgets in a widget area, you could style them get forgotten.
: ?> individually using the attributes of each one. Now the client drags the calendar widget into an area

<?php dynamic_sidebar( 'page-content-top' ); ?>

“If you had multiple meant only for a single line of text or a banner image.
You can see the result in the above screenshot. This

<?php else : ?>

widgets in a widget danger with widgets has always been there, but sidebars
can be more forgiving. Luckily, widgets are as easily
removed as they are added, but a more subtle problem

<!-- Place your alternative content here -->

area, you could style could go unnoticed, so be vigilant.
Stylesheets can help to minimise potential problems,

<?php endif; ?>

them individually” but you’ll need to make the client aware of what will and
won’t work in their new widget area.

</div>
Or:

Don’t Show Anything If Widget Area Inactive:

<?php if ( is_active_sidebar( 'page-top' ) ) : ?>

<div id="page-top-area">

<?php dynamic_sidebar( 'page-top' ); ?>

</div>

<?php endif; ?>

19 Paste into the template

Once you’ve got your conditionals sorted out, paste the
code at the appropriate place in the relevant template file
– in this case the page.php file, at the point just after <div
id=“content”>. The screenshots opposite show the before and
after for page.php.

20 Try using a widget

Save the template file (and then upload it if necessary). Now
go to the Widgets admin screen and test out the new widget
area by dragging a widget onto it. In the screengrab on page
188 we’ve added a Text widget which has a title (though we
won’t need it for this widget area) and a place to enter HTML,
though feel free to find your own widget at wordpress.org/ A quick border, some padding, a bit of colour and
extend/plugins/tags/widget. resizing, and our widget area is taking shape

WordPress for Beginners 141

Customising WordPress

Understanding the basics of CSS

CSS IS THE KING OF STYLING WHEN IT COMES TO WORDPRESS. HERE WE
TUTORIALOBJECTIVE INTRODUCE THE BASIC PRINCIPLES THAT ALL USERS NEED TO KNOW
Learn and understand the basic
elements of CSS and unlock the power
behind customising your site CSS IS THE language that styles HTML and is the principle CSS is made up of three components known as a selector,
component that ensures a WordPress blog looks its best. The property and value. The selector is the identifier, while the
TIME REQUIRED publishing platform uses themes to create the overall look of property is a CSS component which then has a value. A typical
10 mins
a blog, and it is CSS that powers a theme. CSS – standing for example would look like this: body {background: #FFFFFF;}.
Cascading Style Sheets – determines the colour, size and font Body is the identifier while background is the property that has
SKILL LEVEL of text, the colour of a page, how a blog or website is laid out the value of #FFFFFF. Simply put, the body has a background
and much more. We will be using CSS in a few of the upcoming colour that is white. Every WordPress installation has a CSS file
tutorials, so it’s important to grasp the basics. called ‘style.css’ and it is here that all the CSS can be found.

01 CSS syntax 02 Properties 03 Body tag

To get started it is important to understand the basic rule It is the property combined with a value that has the power The main component of a WordPress page is the HTML tag,
of CSS is that all code follows the following syntax: selector in CSS. A property is a defined element of CSS, and some called ‘body’. This encompasses all the other elements that
{property: value}. Whatever the CSS code is, it will always be commonly used properties include body, background, font- appear within a page. This is typically used to determine
made up of these three core components. The selector can family, font-size, h1, h2, h3, border, margin and padding. The the background colour of a page and/or the background
either consist of a standard HTML tag (like body) or a user- value determines how the property is actually displayed, like image, the default font and also the default margins. It is an
created title (like post_title). height: 50px. important aspect, that’s for sure.

138
142 WordPress for Beginners
04 Typical CSS 05 Div Tags 06 Classes
Using the body tag as an example, the property and CSS combines with what are known as Div Tags to position Classes are created to be used on any number of elements
value applied would typically look like the following: body and style page elements. These still retain the three core of your page. Typically, a class will be created to style a
{background-color: #000000}. This statement would style the components: selector, property and value. Div Tags are font or a repeating element. A class name is preceded by
background colour of a page. ‘Body’ states which element typically used to create unique elements, like #header, a dot and has a property and value. A typical example is:
to style, and ‘background-color’ and ‘#000000’ combine to #footer. They are then defined using CSS as shown in the .featuretitle {font-family: Arial, Helvetica, sans-serif; font-size:
determine the colour. screenshot above. 14px; font-weight: bold;}.

07 Body style 08 Backgrounds 09 Fonts

Elements defined within the body tag effectively take Background colour and background images are integral Fonts are an extremely important component of any
precedence over all elements. Commonly used elements to WordPress pages. To define the background colour of WordPress blog. These are typically defined by font-family,
are fonts, backgrounds and margins. The most common an element the background property is used, for example: size and colour. For example, .featured {font-family: Arial,
elements defined in the body are font, background colour body {background: #333333}. To extend a selector the Helvetica, sans-serif; font-size: 11px; color: #FFF;}. To ensure
and margins. The font defined in body will apply to all text background image property is used: background-image: that a page renders across all platforms, pick a font such as
unless a new style is applied. url(images/image.jpg);. Arial, Georgia or Verdana.

10 Headers 11 Borders 12 Margins and padding

The HTML header tag consists of h1, h2, h3, h4, h5, h6. These Borders bring definition to a Div Tag or can be applied to Margins and padding are used to position elements on a
typically apply to text within a tag and are applied as follows images. Within CSS, these can be applied to all four sides page and can be applied to all sides or individual sides like
<h1>A title</h1>. h1 is at the top of the hierarchy and is of an element or applied individually. A border is defined borders. Margins add space to the outside of an element
considered the most important tag of the set by search by style, size and colour. A typical example would be the and padding adds spacing inside an element. To apply a
engines. Standard practice is to make the h1 the largest text following: #featured {border-top-width: 1px; border-top- 5px margin to all sides of a Div Tag the code is: #boxout
size, h2 slightly smaller, and so on. style: dashed; border-top-color: #666;}. {margin: 5px;}.

WordPress for Beginners 143

Customising WordPress

TUTORIAL OBJECTIVE
Learn how you can add, edit and Discover the flexibility of
WordPress plug-ins and how
download handy widgets into the
WordPress dashboard

TIME REQUIRED

they can benefit your site

20-25 mins

SKILL LEVEL

WORDPRESS HAS MANY FUNCTIONS, ONE OF WHICH IS A USEFUL TOOL KNOWN AS WIDGETS.
WIDGETS CAN BE DRAGGED AND DROPPED INTO YOUR TEMPLATE SIDEBAR WITH EASE
WIDGETS ARE A lot like plug-ins, but they’re easier to add and theme which supports the use of widgets and is flexible enough
customise. Here we’ll look at the various widgets available and to allow for the sidebar customisation you require. WordPress.
the simple ways to add, edit and customise widgets to benefit com offers a list of widget-compatible themes, located at http://
the functionality and user experience of your WordPress website. widgets.wordpress.com/tag/themes. With the vast amount
One of the main benefits of using widgets is you’re not required of widget plug-ins available, all of which have their own unique
to change any of the Theme code. If you wish to use widgets in benefit, it is important to spend time researching and finding the
your website, it is important to select a widget-enabled WordPress right one to fulfil the specific requirements of your website.

01 The Widgets interface 02 Adding widgets 03 Organising widgets

Once logged into the Dashboard admin area, locate and Each widget has its own unique function and can be Now that you have collected a group of widgets and have
click on the ‘Appearance’ button which can be found in applied to your website depending on what functionality them showing in your sidebar, you are now able to organise
the left-side menu. A drop-down sub-menu will appear your site actually requires. To add widgets to the sidebar, these widgets into the order that you would like them to
revealing the link for ‘Widgets’, when clicked, the widgets simply drag your chosen widget into the sidebar box appear on your website. Simply click and drag the widget
interface will appear showing the standard widgets available located on the right side of the screen and drop it in where and place it in the position you would like it to appear on
to use within WordPress. you want it to appear. the website.

144 WordPress for Beginners

04 Editing widgets 05 Removing widgets 06 Downloading widgets
Opening up a widget in the WordPress sidebar gives There are two different ways that you can remove widgets Below the Appearance section in the Dashboard menu
the user the option to edit the content contained within from your sidebar. The first option is to use the delete link you should see Plugins. When this is expanded you will
the widget. In the example shown, we’re editing the that is located at the bottom of the widget when open. The see the Add New option, which takes you to the Install
Recent Comments widget. In this widget you can set a second way you can remove a widget is to click and drag Plugins interface. Here, you can search for a widget plugin
title, alter the size of commenter avatars and make various the widget out of the sidebar, this will deactivate the widget using a keyword search or by selecting from one of the
other customizations. automatically and remove it from the website. Popular tags.

07 Finding the right widget 08 Installing a new widget 09 Activating plug-in

In this example we’re going to search for a related posts Clicking on the Details link directly under the plugin title will When the plug-in has downloaded, a new window in the
plugin by entering the word “related” in the search bar. Of display a pop-up window, in which you will find a detailed dashboard will appear giving you the option to ‘Activate
the various plugins that appear in the search results, we’re description, installation instructions, screenshots and other Plugin’ or ‘Return to Plugin Installer’. Click on the ‘Activate
going to download the first choice, YARRP, which based on relevant information. Click on the Install Now button in the Plugin’ link and the activation will commence. When
user rating and its description looks like the best option for bottom-right corner of the pop-up window to download complete you will be redirected to the Plugins interface,
our blog. the plugin to your website. where your new plug-in will be visible and ready to use.

10 Manage widget plug-ins 11 Adding plug-in to sidebar 12 View site

In the Plugins interface the new plugin Yet Another Related Returning to the Widgets interface, our new Twitter widget Switch back to the Widgets interface, where the new YARPP
Posts Plugin is displayed as active and highlighted by is available to add to the sidebar. As before, click and drag widget is available to add to the sidebar. Click and drag it
the white background. Inactive plugins have a coloured into the sidebar and place it in your desired location. Open into place. Expand the widget to make any changes, such as
background, while those with available updates have a grey up the widget and enter any Twitter feeds that you wish to giving it a title or changing the number of posts to display.
bar across the bottom. You can Activate, Deactivate, Edit and pull into your website, in our example, we have chosen the You can also customise the widgets visibility. Click Save
Delete any plugin that has been installed from this page. feeds @webdesignermag and @iCreateMagazine. when you’re done.

WordPress for Beginners 145

Customising WordPress

The Theory of
Text and Type
“THE PERFECT TYPEFACE DOES NOT EXIST YET,” PROCLAIMED LEGENDARY
TYPOGRAPHER JAN TSCHICHOLD IN 1925. IN THIS ARTICLE WE DELVE
INTO MODERN WEB TYPOGRAPHY AND REVEAL HOW TO CREATE
BEAUTIFUL WEB TYPE

138 WordPress for Beginners

146
Getting web fonts
and typography right
IN THE LAST couple of years, advances in web technology have meant that we’ve “For me it’s not necessarily
been spoilt for choice when it comes to font choices. As a result there’s been a surge about great fonts, although
in popularity around the subject of type. But is the popularity a passing fad in the
ever-changing world of web design, or is there something more at the core that
they can make a big
relates back to the actual tenets of typography?  difference. It’s more about
Truth is, most people don’t notice typefaces. This is not necessarily a bad thing what you do with them. Any
for if they do notice it, it might be because they can’t see what they’re meant to be font (including Times) can look
reading. Just like in film scores, if you notice the music then it’s missed the mark. A good if laid out correctly.
good typeface should enhance the ability to read, not detract from it. It doesn’t need Leading (spacing between
to show off; the font itself is not the star of the show here. If you remember that, and
lines) is very important - the
continually remember to check whether you find something easy or difficult to read,
then you’ll be running along the right lines. 
wider the better in my
It’s also about remaining in context. If you’re dealing with an in-depth report to opinion. A leading of 160 per
be read by people on their phones, where clarity and ease is key, then it’ll be quite cent may seem too much for
different to someone reading a poem designed as part of a brand’s story page,
Tom Wittlin Creative director at some people to cope with. My
where you can afford to be much more elegant.  Folk, wearefolk.com advice – try it. 

Font of Knowledge
Fonts vs Typefaces
An oft misunderstood area (and one that today only really bothers typographic
geeks), it’s still useful to know the difference and it’s really rather simple. A typeface
relates to the overall ‘family’, whereas a font relates to a specific version of the
typeface. For example, Helvetica is a typeface, Helvetica Bold is a font.
The simplest way to remember it is to consider the typeface as an album and the
fonts are the tracks contained on it.

Legibility vs Readability 
Legibility relates to the clarity of the typeface itself. Blackletter typefaces have
low legibility thanks to their decorative nature. Their ancient style – featuring 
heavy serifs or accents that often contain ligatures (the joining of letters
together) – reduce clarity and should be reserved strictly for the design of old
English pub signs. 
Readability, on the other hand, is about typesetting. It refers to the individual
elements that can be adjusted with the font itself - size, line height, letter
spacing, contrast, colour, and more It’s possible to make a very legible font
(Times, let’s say) completely unreadable by setting it at a tiny size, reducing letter
spacing to -4px, and finishing it off with everything in lowercase in a light grey on a
white background. 

Leading vs Tracking (vs Kerning)

In the old days of hand-typesetting, physical blocks of lead were placed between
lines of type to create the vertical space within a block of text on a page, and that’s
where leading obtained it’s name. Although seldom used now, the phrase stuck. In
CSS, leading had its name changed to the rather more obvious “line-height”.
Tracking is the overall adjustment of the space between individual letters. Titles
often get tracked out to give impact and you may reduce tracking to body copy
if the type appears too spacious. This is configurable in CSS, using the “letter-
spacing” property.
Incidentally, kerning is something else again that involves the space between
two individual characters. Not something that can be adjusted as simply in CSS, this
is generally more concerned with design for logotypes, heavily designed titles, and The Guardian website uses their own in-house typeface for its masthead. They also have a
particularly large type where additional control is required. sparing approach towards bolding for serif and sans serif typefaces

WordPress for Beginners 147

Customising WordPress

The Headline Act

Selecting the right headline font is not as simple as you might
think. Follow these suggestions to find the perfect option
The art to selecting the right headline font is having
a good understanding of the subject and being
sympathetic to the tone of the writing (or the
company/brand). This is where your inherent skill as a
designer or creative is required. You have to ‘feel’ your
way through potentially hundreds of typefaces before
you know you’ve hit upon the right one. 
This is something that only improves with time,
and the quickest way to get better at finding the right
typeface is to do as much work as you can and to
keep practicing. Each time you read an article, see a
design or open a magazine, notice the font that’s been
selected and how it relates to the subject. Ask yourself
how you’d do it if you had the chance or how it has
inspired you.

No codes or protocols
There are no hard and fast rules that must be applied
to selecting headline type, but there’s a few guidelines
that can assist in adding that touch of professionalism
to your design. Focus on readability first (see previous
page), test out lots of different typefaces, use a type
testing tool like Typecast app, and ensure they also
have the right feel for the design of the site.  The sans serif for the offer shown above immediately grabs the attention of potential customers

Tabloid headlines
If we look at newspapers for their approach to titles back to the content; tabloid headlines tend to be
Tip
If using all caps on titles, be sure to play with letter spacing
you’ll notice tabloids generally favour large sans serif, more sensationalist with attention grabbing phrases, in CSS to ensure the greatest readability. Also, if your
impact fonts set in uppercase while more traditional whereas broadsheets have more subtlety, which is design looks great with a title on one line, how might it
broadsheets opt for serifs set in lowercase. This comes reflected in the fonts they have chosen. look if titles are longer and run onto two lines, or more?

Great headline fonts We’ve selected four top headline fonts that range from the old
faithfuls through to the young upstarts of web type

Helvetica Glober Baskerville Adobe Caslon Pro

Sans serif Sans serif Serif Serif
www.fonts.com http://bit.ly/1vq61ap http://bit.ly/1tGCmry www.adobe.com 
No prizes for originality but it wouldn’t be Despite being a new typeface, Glober has For class and tradition you can’t go far Simple, classic and inherently legible,
right to not mention this milestone of an instantly familiar look with a wide wrong with Baskerville. It works as well in Adobe’s Caslon has some of the most
design in an article about type. Helvetica variety of feels thanks to its 18 available uppercase writing as it does in lowercase. inspiring italics and small caps around that
is to type what black is to fashion – it goes weights (two of which are free). Based on While it’s not ideal for smaller body copy, can offer a real sense of calm to any page
with anything. Coupled with its vast range simple geometric shapes, Glober’s its unique characteristics, such as its design. This face has a certain maturity
of variations from extra-light through to modern design is also optimised for web, beautifully distinctive capital Q and about it that instantly brings respect to
rounded bold, Helvetica gives instant making it an ideal consideration if you’re lowercase ‘g’, make your headlines stick your designs across all platforms at
gravitas to any design. after something a little different.  out a mile. varying sizes. 

148 WordPress for Beginners

Get the Are system
fonts the answer The
best body to a great body. Or, should
you consider an alternative? perfect
Arguably one of the first questions designers face
is whether to opt for a system or web font when
choosing body type. There’s definitely a warm sense
body
of comfort knowing you’ll be safe with Arial, Georgia
Here we choose excellent choices for
or Verdana – with fewer concerns for rendering thanks creating great-looking body copy
to being designed expressly for screen. Screen fonts
generally have higher x-heights (a standard type
measurement of a lowercase x that determines the
height of all letters excluding ascenders or descenders) Arial
and greater letter spacing than traditional typefaces Sans serif
designed for print.  Although generally considered to be a poor man’s
Helvetica, Arial is still a workhorse of screen
Choose your family: Arial or a new kid-on-the-block?
What to consider typefaces. It also comes with the advantage of
But with all the beautiful alternatives to system fonts into creating HTML prototypes (though Typecast’s displaying on screen better at smaller sizes than
available you’ll want to branch out and experiment – service is way simpler).  its Swiss counterpart, and can again be used in
and why not? What’s stopping you? Just ensure you email design without concern for the user owning 
consider a few things. Looking for legibility the typeface.
First make a decision on serif or sans serif. After this, Compare and contrast. Remember, you’re looking for
things are considerably easier. To aid in this decision, legibility. Reduce the type to a smaller size than
just come back to asking who it’s for; what is the you might ordinarily have it set (10px or so) to see
message, what is the tone, will it suit the overall feel? how it performs at lower levels - necessary for
Once you’ve committed to one, begin your search microcopy and so on.  Proxima Nova
by testing legibility. If you’re set on using a web font, be Give thought for download times and the weight Sans serif
sure not to design purely in Photoshop (or any design of the web font you’re selecting. Most subscription
To many, this has become the new standard Arial
application for that matter). Most design programs’ services give the physical sizes, so compare these as
replacement and it’s easy to see why. Beautifully
ability to render type leave a lot to be desired and you go. A tip to keep weight down is to not always
never provide a real measure of how the end result select all the available variants unless you absolutely designed, taking inspiration from greats such as
will look. Use something like Typecast that allows you need them - can you get away with just italic and not Futura and Akzidenz-Grotesk, Proxima Nova is perfect
to see how type renders in HTML. Alternatively, jump bold italic? for web body copy thanks to its high readability at
smaller sizes.

Roboto
Sans serif
The original system font designed for Android OS by
Google was slammed for its awkward and overly
digital appearance. However, thanks to an overhaul
just this year, Roboto has now been transformed into a
thing of beauty. Designed uniquely as a UI typeface,
it’s guaranteed to work at all sizes on all screens; from
a television to a watch.

Georgia
Serif
Destined to be a classic yet still only 21-years-old.
Originally designed for Microsoft as a partner for their
Verdana typeface, Georgia works well in upper and
lower case. Out of all the serifs, it’s highly readable at
most sizes and, usable on webpages and in emails
safely as it’s a system typeface.
The Roald Dahl site combines hand-written fonts with Baskerville to create a timeless and classic style

WordPress for Beginners 149

Customising WordPress

The perfect match

JUST LIKE THE great movie star duos – Butch and real art to selecting a good pairing. A well matched too similar, but equally aren’t too far apart, sounds
Sundance, Thelma and Louise, Han and Chewie – pair of typefaces can instantly enhance a webpage awfully confusing. Though it does have a fuzzy logic
there are some typefaces that just share a natural through harmony and balance. Finding two to it. Here are a few examples of classic pairings to
chemistry. Opposites very much attract and there’s a typefaces that work well together whilst not looking get you started. 

Headline: Brandon Groteske Headline: Avenir

Body: Roboto Slab Body: Georgia
A nice contrast between the bold rounded nature of Brandon Groteske and the angular Again, similar to the above, punchy headlines make way for a more subtle readable
edges of slab serif, Roboto. Easy to read on full desktop view at 20pt but watch for how typeface. The feel of the site as a whole is very clean and modern. Using the italicised serif
well slab serifs translate at smaller sizes as well as on mobile or tablets. for the kicker works well for the title sequence.

Headline: Freight Display Headline: Museo Sans

Body: Georgia Body: Adobe Calson
Rare for a duo of serifs to work exceptionally, but this carries it off well. Freight Display This combination has been used to create a much more classic feel. The serif callouts give
brings clarity to the titles on a text heavy design. The additional white space given allows an editorial feel and the size plays a vital role in the visual hierarchy. When it comes to
it to breathe and the condensed space is filled with the ever-legible Georgia. using a san serif as the title, the punchier Museo at smaller sizes brings clear and concise
A classic look, popular at the moment for that old field notes/journal vibe. subtitles and navigation.

Headline: Gotham
Body: Chronicle
With a very minimal theme and colour palette, Gotham seems the ideal choice to get
that clean polished look easily. The font allows the medium weight to be scaled up to
gigantic proportions without looking overwhelming and can be tracked as to not feel too
cumbersome. The book weight is ideal for body copy with its light appearance and wide,
spacious characters. 

150 WordPress for Beginners

Type for all screens
Type needs to be perfectly formed for more than just the desktop. Find
out what you need to know to get it right on all screens
O NE OF THE biggest challenges facing designers
today is the number of platforms that their work
could potentially be seen on. How type appears on
everything from a widescreen TV to a pair of glasses
should be part of the consideration. While this sounds
daunting, provided you spend a bit of time ensuring
your selected typeface works well at all sizes then you
should be safe.
We’re still at a stage where to test on absolutely
everything is nigh on impossible, if not from a cost
standpoint of owning all devices, then certainly a time
one, which is precisely what responsive design sets out
to deal with. There are many apps available to allow
you to quickly test on multiple platforms, but there’s
nothing like moving a design into an HTML prototype
and testing on a mobile and tablet to really give you a
feel for readability. 
To help with getting your font size right on all
platforms, there’s several interesting developments in
the responsive web typography field. Fit Text (fittextjs.
com) for example, effectively does the same for type
that percentages do for your images in that it makes
font sizes flexible. 
It’s important to play about with media queries
to ensure line lengths meet your desired limit. Trent
Remember to test your chosen typeface on multiple platforms. It’s imperative when creating a responsive design
Walton’s article on Fluid type (http://trentwalton.
com/2012/06/19/fluid-type/)which, despite being a
couple of years old, offers a neat solution for this. 
In terms of typeface selection, bear in mind most
typefaces were designed with a specific use in mind,
so you’ll often need to make adjustments in CSS as
to how they display. Line height should be adjusted
to between 140 to 160 per cent depending on your
preference – but this again may need to change
depending on the platform. 
Remember, not all fonts were designed for screen,
so spend time early on in the design process selecting
typefaces that you’re certain will translate to devices
and not just the computer you’re designing on. Many
of the larger foundries have been redesigning their
most popular typefaces to adapt for screen reading, so
where possible check to see if screen specific versions
of the font you’re looking for is available.

What next for web type?

Tip With increasing browser standards we can expect more
interesting developments for reading and absorbing the
shapes lurking on the horizon we’ll begin to see
enhanced visual storytelling (check out the Alice in
When testing type, don’t use lorem ipsum – use real written word in the future. CSS and JavaScript have Wonderland CSS shapes demo) and with apps like Spritz
copy and read it. Relax your gaze on the screen to see
reached a stage where things that can be achieved now (www.spritzinc.com) we may even begin to change the
how the typeface feels. If you find it difficult or you’re
straining in any way, look at something a little less busy were only actually achievable in Flash previously. With CSS way we read altogether. 
or up the point size.  

WordPress for Beginners 151

Going further
154 The best WordPress
plugins

162 text effects

Animate typography and

166 transitions
Create on-click fading
166 ON-CLICK FADING TRANSITIONS

168 animations
Craft supercharged web Add extra transitions to your website when the
users click on the element

172 Create a flickering

background image

174 Make your WordPress

theme adapt to any screen

162 ANIMATE TYPOGRAPHY

Give your typography the attention it truly deserves
by animating it effectively

154 THE BEST PLUGINS

We take you through the best plugins
you should be adding to you blog

“Break the ties

by managing and
posting to your 174 ADAPTABLE THEME
blog directly from Create a theme for your WordPress blog that is

your smartphone” adaptable to any screen

152 WordPress for Beginners

172 FLICKERING BACKGROUND
Recreate this brilliant effect as seen on
STR’s website

WordPress for Beginners 153

Going further

The Best
WordPress Plugins
FIND OUT ABOUT THE TOP TWENTY PLUGINS TO BE FOUND ON WORDPRESS. BREAK THE MOULD WITH YOUR WORDPRESS
WEBSITE USING SOME OF THE MOST ADVANCED AND ACCESSIBLE PLUGINS CURRENTLY AVAILABLE
SETTING UP A theme for your WordPress site is only the beginning of your to you when you start dabbling with some of the most advanced and up-to-
journey into making a blog or website. There are thousands of plugins date plugins currently available on WordPress. Weather you’re an advanced
available to be installed onto your theme and implemented within your site, PHP coder or you are an absolute beginner to WordPress there are plenty of
each one offering a very specific tool or function to help you run the back amazing plugins for you to choose from to help you build the site you want.
end of your site, or to make things easy for those visiting it. SEO optimisation, These twenty plugins are just the tip of the iceberg. Whatever it is that you
improved loading time, interactive image galleries, podcasting tools and the want implemented onto your site the chances are there is already a plugin
promotion of social networks are just a handful of options made available available waiting for you.

154 WordPress for Beginners

Advanced Custom
Fields
www.wordpress.org/plugins/advanced-custom-fields/
If your website needs more flexible data, then this plugin allows you
to create custom fields to suit your needs. You can select from multiple
input types (such as text, image, file, page link, date picker, true/false and
many more) and you can assign your fields to your Wordpress page quickly
and easily. The sheer range of fields available for you to use on your pages
means that you can collect and collate as much data as you wish and the
free version of this plugin helps you restructure Wordpress and take it to a
whole other dimension.
The plugin has been tested to work on most popular web browsers and
it is very easy to get up and running. Once installed, you simply have to
create a field group, add your preferred fields and then define the location
rules. Once done your fields will have appeared and be ready for data.
There are over 20 different field types (free, premium and user-submitted)
to choose from, so you should definitely find what you need for your
Wordpress pages. Massively popular with Wordpress developers, Advanced
Custom Fields should definitely be added to your arsenal of plugins.

WordPress Backup
to Dropbox
www.wordpress.org/plugins/wordpress-backup-to-dropbox/
It’s time to start utilising cloud storage systems to back up your entire WordPress site.
With the WordPress Backup to Dropbox plugin you can link your WordPress account with your
Dropbox account. Once linked you can review your Dropbox’s capacity for space and schedule

Disqus
automatic backups. It’s up to you how frequently a backup occurs, whether it is daily, weekly or
monthly. You can also opt to exclude certain files from the backup process. Once your backup
www.disqus.com begins you can monitor its progress ensuring that every single file and directory is backed
up. For more options visit the Premium Extensions subsection of the plugin. Here you can
purchase email notification, zip backup tools, and set up backups for multiple sites.
If you’re running a blog where people are commenting on and
discussing your posts it’s worth exploring a few of the comment
management plugins available for WordPress. You can make
commenting and interacting with your site easier for visitors with
Disqus. Disqus gives you the tools you need to make commenting
on your blog as easy as possible for visitors. With Disqus you can
start to build a community around your blog where people can
discuss and share thoughts between each other in relation to your
posts. Once you’ve registered with Disqus it’s comment system
will be implemented into your site, replacing your current theme’s
comment area. Visitors can the comment, respond to comments, add
images, share and favourite post all within in the comment window.
Comments can also be sorted with various filters. Moderating your
Discus comments can be done at disqus.com. You will be linked to the
moderator dashboard from the comment section of your WordPress
tool bar.

WordPress for Beginners 155

Going further

Visual Form Builder

www.wordpress.org/plugins/visual-form-builder/

Forms on your blog or site are a useful way to obtain data from your visitors,
whether someone is signing up to become a member of your site and
you want to log their details, or you are asking your visitors to perform
surveys. Form building for your website used to be a painstaking process of
complicated coding. The Visual Form Builder plugin can help you put together
a custom built form in no time at all, without the fuss. Forms are built within
a widget style setup. By default a new form will include a verification field to
avoid spamming, as well as a submit button. Form items can include text boxes,
checkboxes, radio buttons, address, URL, number and date requests and a file
upload option. Each form item comes with its own collection of sub-settings
so you can customise the way an item behaves. For example, inserting a date
requirement, you can then be setup as a way of recording the date of birth
of someone filling in the form. Once a form has been created it can easily be
added to posts and pages using the Add Form icon that appears above the
post window. This way, the Visual Form Builder plugin not only simplifies a
complicated process, it is also extremely versatile.

“The Visual Form

Builder plugin can
help you put together
a custom built form in
no time at all, without
the fuss”

Contact Form 7
www.wordpress.org/plugins/contact-form-7/
Contact forms are a safe way for you to provide visitors with a
way to contact you through your site without having to release
your email address, making it vulnerable to spam. It offers visitors
a simple and reliable way of getting in touch with your, while you can
remain more or less anonymous. Contact Form 7 provides a simple
product to help you create a contact form for your site. The Plug-in is
multilingual allowing you to setup a starting template in a number of
different languages. Contact Form 7 builds forms for you by having you
generate a Tag for each entry type that you want to appear on the form. A
Tag can consist of an Email address, URL, telephone number request, as
well as other requests for information. Once a tag has been created a PSP
code will be provided that you can copy and paste into your form. Once
a form has been created a short code will be provided which can then
be pasted into a post or page. Contact forms can be build exactly to your
specification. You can also setup certain parts of the form as required fields,
so the form can’t be sent without that field being completed.
Completion messages can also be setup to be displayed once a visitor has
completed the form.

156 WordPress for Beginners

 Maintenance Mode BuddyPress
https://wordpress.org/plugins/buddypress/
www.sw-guide.de/wordpress/plugins/maintenance-mode/ BuddyPress helps you run andy kind of social network on your Wordpress. It seems
Maintenance Mode by Laliamos is a very simple plugin that allows you to that our lives are becoming governed by social networks, so to keep up with the trends,
temporarily shut down your site whilst you update it. As soon as the plugin is this plugin lets you add and run any kind of social network on your pages. You can enable
activated your site will go into maintenance mode. When someone visits your site registered members to create profiles, engage in private conversations, make connections,
they will be presented with a holding page that states that the site is currently create and interact in groups and much more – it’s like an entire social network in a box that
under construction. In your WordPress tool bar go to Settings>Maintenance Mode. you justy unpack and bolt onto your Wordpress site.
Here you can customise the maintenance mode holding page, adding a personal The intuitive set-up process means that you can add social networking elements to any
message as well as a Backtime so visitors know when your site will be live again. site and an ever-increasing array of features, developed by an active plugin development
In the settings window you can also activate and deactivate the mode without community, means that it’s getting better all the time.
having to deactivate the entire plugin.

Woocommerce
www.woothemes.com/woocommerce/ NextGEN Gallery
With Woocommerce you can build your own customisable e-commerce site from
https://wordpress.org/plugins/nextgen-gallery/
scratch. Woocommerce gives you all of the necessary tools to put together an online store. If you want to add galleries to your Wordpress sites then NextGEN Gallery
Woocommerce allows you to build a product list with detailed information in the same is the most popular plugin fit for the purpose. NextGEN Gallery provides a
format you would create posts. You can then apply a series of eCommerce themes to your powerful engine for uploading and managing gallieres of images, with the
site to better present your available products. Once you have your Woocommerce store ability to batch upload, import meta data, sort images, edit thumbnails and
setup visitors will be able to place orders and make payments through the plugin, as well as much more besides.
rate and review your products. The plugin comes with everything you could possibly need It also provides to front-end display styles (slideshows and thumbnail
to start up your own online store covering payments, shipping, reporting and marketing all galleries), both of which come with a wide array of options for controlling size,
through this simple easy to setup plugin. timing, transitions and more. Adding a gallery is a great way to add intrigue and
interactivity to your Wordpress, and this plugin makes the whole process a quick
and altogether painless experience.

WordPress for Beginners 157

Going further

MailPoet
Newsletters
www.wordpress.org/plugins/wysija-newsletters/
You can contact your frequent visitors more directly
by using newsletters, which offers you an alternative
way to get your content out there. If you do choose
to start running a newsletter for your site then you can
do this via WordPress, rather than having to work through a
third party site. MailPoet takes you through
a step-by-step process for building a newsletter. Once
you’ve selected a subject line MailPoet will display a
basic starting template for your newsletter. Here you
can create a title, add a logo, a main image, an opening
paragraph and main content. Different preset themes
can be added or you can build an entire newsletter
from scratch adjusting every single part of the formatting,
style and composition of your newsletter. Newsletters can
be built using a widget style technique, allowing you to drag
and drop content, media and social links into your template.
You can also build a subscriber list in MailPoet. Once a list has
been created your newsletter can be assigned to that list and it
will be posted out to contacts on that list. Multiple subscriber
lists can be created so you can assign different newsletters to
different contacts.

Soliloquy
www.soliloquywp.com
Implementing a slider into your site is an easy way
of presenting your top content to a visitor as soon as the site
loads. Sliders are best placed at the top of your home page,
and they traditionally will slide through a
selection of images and titles that then link to your most
recent, popular or important posts. Soliloquy Slider comes
in both a lite and premium version. Soliloquy lets you drag
and drop a selection of images into the plugin. Once
uploaded your slider can then be configured by its theme,
dimensions, transition style, duration and speed. Each
image can have a title, description and a hyperlink attached
to it, so that when clicked on, it will link to that specific
URL. Sliders are also a great way to provide navigational
options to visitors. Once published Soliloquy will provide
you with a shortcode to paste into your posts and pages,
as well as a tag for inserting into your theme’s template.
Soliloquy pro provides you with even more features for
building a slider, including thumbnail carousels and
mobile support. The premium plugin can be purchased
from soliloquywp.com.

158 WordPress for Beginners

 Meta Slider
https://wordpress.org/plugins/ml-slider/
This easy to use Wordpress slider plugin helps you to create SEO optimised
responsive slideshows with Nivo Slider, Coin Slider and Responsive Slides. Creating
slideshows with Meta Slider is a quick and easy process. Simply select images from your
Wordpress Media Library and then drag and drop them into place. You can set slide
captions, links and SEO fields from one page and choose from four different slideshow
types (including Flex Slider) and use the shortcode provided, or template, to effortlessly
embed slideshows into your blog.
The simple interface makes this plugin perfect for novices and experienced
developers alike and setting up your slideshows s cocuouldn’t be easier. You can drag
and drop to reorder slides, crop them and use the unrestricted support to supply
captions, titles, links and more.

WP Greet Box
www.wordpress.org/plugins/wp-greet-box/
One of the easiest ways to get visitors to return to your site is to
have them subscribe to your site’s RSS feed. There are plenty of RSS
subscription plugins available for WordPress. If you want to refine the way
that your site communicates with visitors to persuade them to subscribe
then try out WP Greet Box. This plugin displays a different subscription
message to visitors depending on where they linked to your site from. If
they found you on Google then the subscription invitation will reference
this. The same applies for Facebook. WP Greet Bot provides you with thirty
six preset greetings, all from different sites. You can manage and edit all
of the greetings, as well as create your own. Once the plugin is installed
you can manage your Greetings and subscription invitations by going to
Settings>WP Greet Box in your wordpress tool bar.

Jetpack
www.jetpack.me
Jetpack from WordPress provides WordPress users with an extensive
library of versatile tools to use with their site. Jetpack tools are broken
down into key categories including appearance, developers, mobile,
photos and videos, social and many more. Once installed Jetpack will
appear near the top of your WordPress tool bar. The Site Stats feature of
Jetpack will start tracking your sites stats as soon as the plugin is installed.
Jetpack also provides an Omnisearch tool allowing you to search the
entirety of your WordPress site for keywords,providing categorised results
such as posts, pages, comments. JetPack can also help you with site
verification for external services such as Google, Yahoo etc. The plugin
provides a lot of back-end support for getting your site as many viewers -
and hits - as possible. Jetpack also comes with a collection of tools to make
your site easier for visitors to navigate and to share your content across
social media websites. Creating social links, a “like” option and related post
windows on your site can all be done with Jetpack. Jetpack’s sharing tools
also make it easy for you to automatically share your own new content
onto all of your social networks and promote it to your friends, family, and
maybe even fans. If you visit jetpack.me,, you will find a detailed rundown
of the plugin’s features.

WordPress for Beginners 159

Going further

One Press Social

Locker
www.wordpress.org/plugins/social-locker/
A simple approach for getting people to click on your social
links whilst visiting your blog is to provide a good incentive to
do so. With the OnePress Social Locker plugin you can lock content
on your site that will then become visible once a social link has been
clicked. Of course it’s a fine balance as to how much content you lock,
as you don’t want to frustrate or overly restrict your visitors, but with
the Social Locker tool you can lock URLs mentioned in your posts,
thus promoting a visitor to like your page to be able to visit the link.
The Social Locker is SEO friendly, so content that is locked is still
available for search engines to see. URLs, images, video content,
text and other media can be locked. Once you’ve created a new
locker you can then paste it into a blog post with a shortcode that,
when viewed, will provide users with links to all of your available
social links, that they can then click on to unlock the content and
keep reading.

Duplicator
https://wordpress.org/plugins/duplicator/
This useful plugin gives Wordpress administrators the ability to migrate, copy or clone a
site from one location to another, while also serving as a simple backup utility. If you need
to move your blog to a different location, such as from a local MAMP installation to the live
server, then this plugin acts as the removal force, packaging everything up and then shifting it
to the new locstion lock, stock and barrel.

Google Analytic Already tested and trusted by the Wordpress community, Duplicator is incredible easy to
use and can handle most migration jobs – although larger sites have been known to cause
issues. However, any problems or feedback you provide is used to help develop the plugin

Dashboard
www.wordpress.org/plugins/google-analytics-
further, so it certainly can’t harm trying it out to see if it meets your needs. Any issues you do
encounter will be swifitftly dealt with by the atentive support crew.

dashboard-for-wp/
If you don’t have Google Analytics setup for your site then do so
at www.google.com/analytics/. Google Analytics is a free service
for tracking your site visits. Once you’ve gotten started with Google
Analytics it’ll be worth your while to install the Google Analytics
Dashboard for WordPress. Once installed the plugin can be accessed
as its own standalone tool in the WordPress toolbar. The Dashboard
is built as a widget, which can be accessed by yourself as an admin or
authorised members who will be able to see the analytical data when
it is placed into pages and posts in the form of a widget. Analytics
will appear as graphs, charts and maps and can be fully customised
to match your colour themes. The Google Analytics Dashboard gives
you a tidy presentation of all your stats and makes tracking the activity
around your site easier than ever.

160 WordPress for Beginners

 Sharebar
www.wordpress.org/plugins/sharebar/
Probably one of the simplest and most important plugins for your site is the Sharebar. Sharebar
presents viewers with all of your social links in a responsive vertical bar that doesn’t intrude on your
sites content. Giving visitors a way to share your content easily is the fastest way to seed your posts
across the net. The Sharebar will appear on your site as soon as it’s been activated. In your WordPress
settings you can then order, add and remove social links as necessary. When ordering your buttons
you can preview how content will be presented in the social networks that people are sharing the
page through so you can make amendments. You are not limited to the available social links either,
you can create as many custom links with your own icons as you like.

WPTouch
www.wordpress.org/plugins/wptouch/
Certain themes aren’t always amazingly compatible with
mobile browsing. If you’ve found the perfect theme for your
WordPress site, but you’ve found that it doesn’t have the mobile
support you need, why not try setting up a separate theme
for mobile browsing. The WPtouch plugin lets you apply an
entirely different theme for mobile browsing than the one that
is used when visited from a desktop browser. Only one theme is
available with the lite version of the plugin, although there are
enough modifying options for you to give it the look you want.
Setting up a theme is easy, and within the back-end desktop
interface of WordPress you can apply a variety of different
settings to your mobile-based theme. Custom HTML and
JavaScript can also be applied to tweak the theme as necessary.
Position menus, posts, pages and content exactly how you want
them to be displayed to mobile visitors, then preview your setup
theme to see how it will look on various devices.

Instagram
image gallery
www.wordpress.org/plugins/instagram-image-gallery/
You can embed a variety of different social network sites into your WordPress posts
with the right plugin. With the popularity of Instagram networks, it can be a great
idea to add a gallery to your blog. The Instagram Image Gallery plugin lets visitors view
a thumbnail gallery of your instagram account from your site. This is another way of
increasing your social networks’ reach. All you have to do is type in the username of an
Instagram account within the plugins settings and the gallery will appear as a preview
for you to see how it will appear on your post. You can then adjust the width and height
and layout type (grid or slideshow) as you like. With these preferences you can display
hundreds of thumbnails or one large image. The Instagram Image Gallery is made available
in the WordPress widget tool where it can be dragged and dropped into a page of your
choosing. Instagram accounts can also be pasted into a post with shortcode. You can also
display a hashtag gallery from Instagram rather than an account. The only downside of the
plugin is that you can’t add multiple Instagram accounts, which slightly hinders your ability
to utilise the plugin with more than one post.

WordPress for Beginners 161

Going further

Animate typography and text

effects with CSS3
GIVE YOUR TYPOGRAPHY THE ATTENTION IT DESERVES WITH THESE
MUST-SEE ANIMATED EFFECTS WITH CSS3

ONE OF THE biggest evolutions with CSS3 has been possible to do with regular HTML text, and sometimes
the ability to write behaviours for transitions and you may just need strokes with text. Using the SVG right TUTORIAL OBJECTIVE
animations. These animated effects are a must-know in your HTML will keep your text accessible and will stop Give your text an extra kick, using CSS
to add animation
for any designer or front-end developer as they unlock you having to rely on GIFs. Once the stroke is in place, it
all kinds of interactive possibilities and visual will be given five different colours and set to march TIME REQUIRED
feedback options. around the text with animation. The next text effect 1 hour
In this tutorial the focus is on text with three different shows how to make a text rotator so that different words
effects that offer some great possibilities. The first can be cycled through on the screen. The final effect will SKILL LEVEL
actually will not use standard text on the page, but will use text clip to clip the image to the text so that the
instead create the text inside an SVG element. The reason image only shows inside the text. This will be turned into
for this is that SVG enables strokes on text which is not a call-to-action button with a sliding image effect.

162 WordPress for Beginners

01 Set up the document These target the text that was created in Step 2. animation-delay: -1s;
Open the project folder in Brackets or a similar code editor <g class="g-ants"> }
and then open start.html. <use xlink:href="#s-text" class="text-copy"></use> .text-copy:nth-child(2) {
Create style tags in the head section and add the CSS <use xlink:href="#s-text" class="text-copy"></use> stroke: #d6801c;
shown. This will import the right typeface that will be <use xlink:href="#s-text" class="text-copy"></use> animation-delay: -2s;
used from Google and sets up the basic HTML settings for <use xlink:href="#s-text" class="text-copy"></use> }

07 Finish the stroke

the pages. <use xlink:href="#s-text" class="text-copy"></use>
@import url(http://fonts.googleapis.com/ </g>
css?family=Oswald:400,700); </svg> As in the previous step, the CSS here is targeting the

04 Add the CSS for the SVG

html, body { different children of the graphics object and they are given
height: 100%; different colours and offset in their own animation. This
font-weight: 800; Move back to the CSS section of the page and add the rule now gives the effect of five different colours marching
} for the SVG. This will display the object as a block element around the edge of the text.
body { so that it can be centred on the page with the margin set to .text-copy:nth-child(4) {
background: #35483e; auto. The font for this element is set to Oswald and a large stroke: #ffff9e;
background-image: url(img/bg.jpg); text size. animation-delay: -4s;

05 Style specific text

background-size: cover; }
font-family: Arial; .text-copy:nth-child(5) {
} Now the CSS is targeting the specifics of the text and the fill stroke: #55981b;

02 Write an SVG graphic

is turned off while a white stroke is added to the text. The animation-delay: -5s;
stroke isn’t applied all the way around the text by using the }
As SVG graphics are written with tags they can be easily dash array. The stroke is widened and told to take five @keyframes stroke-offset {
authored without any graphics application. Move to the seconds to apply the animation. 100% { stroke-dashoffset: -35%;}

06 Start the animation

body tag and add the start of this SVG graphic, which }

08 Second effect
creates text to display in the browser. Later this will get
styling from the CSS that will animate this. By adding keyframes the stroke will immediately start
<svg viewBox="0 0 960 300"> animating around the edge of the text. Now each That completes the first effect that is being added to text,
<symbol id="s-text"> graphic element is given colour and a slight delay in its so now move down to the body tag and add our code from
<text text-anchor="middle" x="50%" y="80%">Kinetic movement to create the basis for the rotating stroke
Design</text> around the outside. At present there are orange and dark
</symbol> red strokes.
CSS keyframes
03 Create graphic lines
@keyframes stroke-offset {
The CSS keyframes rule enables the designer to
100% { stroke-dashoffset: -35%;} specify either ‘from’ or ‘to’ values, or alternatively it
The next code that is added finishes off the SVG, more } enables them to use a percentage that states what
importantly though it creates five graphics nodes that will .text-copy:nth-child(1) { should happen.
be styled using CSS to create five different coloured strokes. stroke: #5c0404;

Left
The next text elements are added to the HTML and given
some basic styling for us to place the text under the
animated heading

Top left
The SVG element is added to the page, and basic CSS styling
places this in the correct position on the page
Top right
The fill colour is removed and a stroke is added that is not
shown all around the edge of the text elements, which is still
an interesting look

WordPress for Beginners 163

Going further
FileSilo to the SVG added earlier. This readies the setup of a 11 Paragraph style these elements and more importantly sets the line height
text rotator that will move through the different list The paragraph tag is targeted and given a light yellow so that the text moves to the right section and can only see
elements with animation, great for showing off a range colour that has also been used in one of the strokes around that section at any one given time. If the line height was
of skills. the edge of the previous text, just to keep consistency with smaller it might be possible to see parts of the other text on

09 Style up the text

the colours. Again this text is floated to the left so that the the screen.

14 Make it move
list can sit alongside it.
With the next content in place, move back to the CSS style p{
tags and our code on FileSilo places the text in the centre of display: inline; The final setup for the CSS part is to make it move by
the page under the animated heading created earlier. At the float: left; defining the keyframes called ‘change’. Step 12 calls for
moment this still looks like a list, but that will all change as margin: 0; these keyframes and adding these will immediately start
more CSS is added to complete the effect. color: the text rotator sliding up and down to show the text.

10 Static section
#ffff9e; Because the animation was set to infinite, this will just
} keep looping.

12 Set the unordered list

The text is made to float left, where one half of the text is @keyframes change {
static, ie not moving, hence the name of the class that is 0% { margin-top: 0; }
controlling it here. Once floated to the left, the overflow is Now with this rule targeting the unordered list, you will 15% { margin-top: 0; }
hidden. The height is set up so that only one line of the notice that the text for the first element is sitting alongside 25% { margin-top: -40px; }
moving section can be seen. the static text. The other list elements are below this but 40% { margin-top: -40px; }
.static { because the overflow is cut, it isn’t being displayed until the 50% { margin-top: -80px; }
float: left; animation is added. 65% { margin-top: -80px; }
overflow: hidden; ul { 75% { margin-top: -40px; }
height: 40px; margin-top: 0; 85% { margin-top: -40px; }
} padding-left: 130px; 100% { margin-top: 0; } }

15 Call to action
text-align: left;
list-style: none;
Naming keyframes animation: 6s linear 0s normal none infinite change;
}
That completes the second animation that we are
exploring. Now it’s time to add the final animation, which
Notice that the keyframes in Steps 14 and 6 have

13 Size up the height

been given a unique name so that they can be will be for an animated rollover button, using a newer CSS
called by the right piece of animation. command: clip text. In the body add the HTML from FileSilo
Styling up the list elements applies the right colour for below the other content that is on the page.

Top left
Keyframes are added to the animation and each list element
is cycled through by sliding down to the next and back up
again. The text is now about to slide up

Top right
A ‘more’ button is being styled up and the background
image is only visible through the text. The image will animate
when the user rolls over
Right
At this stage this image rollover is working. The colour is
different from the previous step, but it needs to stand out
and look more like a call-to-action button

164 WordPress for Beginners

 CSS animation
To take advantage of the
CSS animation, instead of
relying on JavaScript, it is
important to understand
exactly what is going on.
Transitions provide a
change from one state to
another, while animations
can set multiple keyframes
of transition.
Transitions must have a
change in state, and you can
do this with :hover, :focus,
:active and :target
pseudo-classes. The most
popular is hover as this
provides rollover changes.
There are four transition
related uses, transition-
property, transition-
duration, transition-timing-
function and
transition-delay.
Animations set multiple
keyframes that tell an
element what change they
should undergo with @
keyframes and called by the
animation using it. Only
individual properties may
be animated.

16 Centre the box background-image: url(img/text-bg.jpg); background-image: inherit;

The first part of this is simply to centre the box and for us to background-position: bottom; background-position: bottom;
clear the floated elements in the content above. This box is background-size: cover; background-size: cover;
going to be quite small on the screen so it is being made to -webkit-background-clip: text; transition: 2s ease all;
be 400 pixels wide. The auto margin centres the div box on -webkit-text-fill-color: transparent; }

21 Clip the image

the screen. transition: 2s ease all;
.wrapper{ }

19 Rollover effect
clear:both; The final part is to place a semitransparent background
width: 400px; colour behind the text and to give this a slightly smaller size
margin: 0.5em auto;} Adding the code here will set the rollover for the text and than the box. The result is that the text and border now

17 Start the clipping

the background image. The image will be set to be both clip the image so that it is only visible where they are.
positioned at the top in the background. Previously it was Save this now and test it in the browser.
The next rule will set up the clipping of the text. Firstly the set to the bottom so the text will have the image slide .clip-text:after {
right typeface is applied to this and the type is given quite through the text as the user rolls over it with the mouse. position: absolute;
a prominent size of 3ems. The text is centred with the .clip-text:hover, .clip-text:hover::before { z-index: -1;
block and some margin and padding sets this up nicely on background-position:top; top: .125em;
the screen. } .clip-text:before, .clip-text:after { right: .125em;
.clip-text{ position: absolute; bottom: .125em;
margin-top: 4em; content: ''; left: .125em;
padding: 0.3em; } background-color: rgba(214, 128, 28, 0.9);

20 Create a border
font-size: 3em; }
font-family: 'Oswald';
text-align: center; This code is the first step in creating a border around the
position: relative; text. This is achieved by placing the image behind the text. “The final part is to
display: block; The downside at this point is that the text is invisible as the
place a semitransparent
18 Apply the image
image is there. The final step will correct this.
.clip-text:before { background colour
Now for the real nuts and bolts of the process. Here the
clip-text rule is continued and the background image is set
z-index: -2;
top: 0; behind the text and to
to display, however instead of it being in the background right: 0; give this a slightly smaller
like normal, the text is set to clip it. This means that the
background only appears inside the text.
bottom: 0;
left: 0; size than the box”

WordPress for Beginners 165

Going further

Create on-click fading

transitions
AS SEEN ON GROBA.T V

Fading transition
When the site loads, the user is required
to click the screen to make the preloading
panel fade out and the content fade in.

Preview your content

You can get an idea of how your added
content will look by clicking the ‘Preview’
button. This will open a new tab without
losing your current post edit

Navigation Rollover effect

There is an icon in the bottom left of the As the user rolls their mouse over the
screen showing that keyboard cursor burger menu the lines crinkle up, giving a
keys can be used to navigate as well. great effect to highlight the interactivity.

166 WordPress for Beginners

 DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-855

AS AN ART director, illustrator and animator, Airton bottom when content is sliding left and right as this
TUTORIAL OBJECTIVE Groba has worked in a variety of visual arts from enables the user
Recreate the look of Globa.TV
designing to digital advertising and interactive to locate themselves in the overall site without getting
TIME REQUIRED content. Through working with a number of lost and shows a good understanding of considering the
1 hour
international clients, Airton knows that it’s important to user experience.
SKILL LEVEL pay attention to visual extras that enhance the way The illustrated content appears as the background on
content works. each section of the site and this is great because the
Bringing this experience to his own portfolio site content fills the background but has the downside of
groba.tv there is wealth of extras in here that really having the text over the top.
enhance the way the content is displayed with animated To solve this, each page has a minus icon inside a
icons, transitions between icons and sliding transitions diamond and when the user clicks on this, the content
between content that works both horizontally and over the top fades out to reveal the illustration in all its
vertically. The right-hand side menu switches to the digital glory.

01 Fade out/in click

background-size: cover;
width: 100%;
The groba.tv site features a preloading effect that fades height: 100%;
out when the user clicks to reveal the site fading in. To }

05 Finish CSS touches

start this effect, add the HTML content and image available
on FileSilo.

02 Set up the CSS

The last CSS rules position content in the middle of the
Navigation system page by centring the content vertically within the browser.
The area selected is shown with a cross In the head section of your page add some style tags and The last rule hides the content of the page so that it can be
icon. When the user clicks on a new
section, the diamond animates into a then add the CSS to style up the page. This includes setting faded in using jQuery to fade out the preloader and then
cross. the background to black, removing the padding and margin fade in the page content.
– this enables the preloader overlay to work. .middle {

03 Overlay a preloader panel

position: relative;
top: 50%;
While a site loads, the preloader needs to sit over the top of transform: translateY(-50%);
the rest of the page to hide it. This is positioned absolutely }
over the other content with a higher z-index. The .hide{
background is set to black to hide content below. display: none;
#preloader { }
position: absolute;

06 Bring it all together

top: 0; left: 0;
width: 100%;
height: 100%; The groba.tv site requires a click to move past the preloader
z-index: 100; so once everything has loaded, add the click function to the
background-color: #000; preloader, which fades it out and when that’s finished the
} page content fades in. Load the page into your web
browser to see the effect.

04 Style the page

<script src=”https://code.jquery.com/jquery-2.1.3.min.
js”></script>
The rest of the content will sit in the ‘content’ div tag. Here <script>
the background image is made to cover the entire webpage $(function() {
and this div tag is given the width and height of the $( “#preloader” ).click(function() {
browser viewport in order to support that. $( this ).fadeOut( “slow”, function() {
#content { $( “#content” ).fadeIn( “slow” );
background: url(img/bg.gif) no-repeat center center });
fixed; });
EXPERT ADVICE -webkit-background-size: cover; });
Keyboard control -moz-background-size: cover; </script>
The groba.tv website also features
keyboard control, as well as the -o-background-size: cover;
standard mouse control and clicking
as found on other websites. This
works because the site has “The illustrated content appears as the background on
transitions to content both
horizontally and vertically, using the each section of the site and this is great because the
keyboard cursor keys gives a quick
way to get around the site. content fills the background”

WordPress for Beginners 167

Going further

Craft supercharged TUTORIAL OBJECTIVE

Create high performance animations

web animations
with these tecniques

TIME REQUIRED
2 hour

SKILL LEVEL
FIND OUT HOW TO CREATE HIGH-PERFORMANCE ANIMATIONS
FROM BASIC STATE CHANGES TO SIMPLE PHYSICS WITH
THESE TECHNIQUES

DOWNLOAD TUTORIAL FILES

168 WordPress for Beginners www.filesilo.co.uk/bks-855
ANIMATION ON THE web has always been fairly Click me 04 Timeline of animation
computationally expensive and while devices have </div> The associated tutorial files on FileSilo include examples

02 The two states

gotten a lot faster overall, we still have to be very careful of a timeline that shows the animation that occurs when
about how we craft our animations for maximum the box has been clicked once. We have given the
performance. The bottleneck is often how long it takes to There are two states here: the box and then the box browser as much time as possible to render each
render or ‘paint’ a frame of the animation. This painting when it’s ‘toggled’. Notice that the box will transition all animation frame by using as little JavaScript as possible
process is very expensive so anything else going on, like CSS properties that change over half a second with here. This has meant that we have been able to achieve
JavaScript for example, can cause it to spill into the next ease-in easing. We’re expecting the box to change colour frame rates of 60FPS on our device.

05 Use easing curves

frame. When lots of frames are ‘dropped’ like this you get and opacity when clicked. The CSS is doing all of the
janky animation, which no one likes. heavy lifting here.
It’s for this reason that a lot of jQuery $(element). .box { Chrome DevTools have a handy curves pallet for
animate animations get janky. It’s very easy to interact background: red; adjusting easing on CSS animations. Here we’re using it to
with the DOM more than the ideal amount, leaving less width: 100px; make most of the animation happen in the first half. The
time for the painting process to complete. height: 100px; element feels like it responds immediately, but still has a
In this tutorial we cover basic and complex animations transition: all 0.5s ease-in; satisfying transition.

06 Add easing to our transition

using CSS to do the heavy lifting and JavaScript to retain }
the state. We also cover how you can use JavaScript to .box.toggle {
craft more advanced web animations that are interaction background: orange; The cubic-bezier function shares its basic premise with the
driven, without impacting performance. opacity: .8; curves tool in Photoshop. The ease-in property we had
It’s important to craft animations for your target } before is essentially a preset and is still a cubic-bezier

03 JavaScript to change state

devices. It’s no good achieving 60FPS on a powerful behind the scenes.
desktop if you’re building for mobile. For that reason, it’s .box {
important to use powerful remote debugging tools, for We want to interact with the DOM as little as we possibly transition: all 0.5s cubic-bezier
example you can use those provided by ghostlab can. The JavaScript isn’t actually doing a lot here – what it (0, 1, 1, 1);
(vanamco.com/ghostlab). does though is that it interacts once with the DOM on page }
load and then it interacts again subsequently every time
TECHNIQUE 1 that the box has been clicked. This leaves the CSS to figure
Basic animation out everything else, which is a more efficient option for

01 Animation between states

the browser.
function bindToggle() {
The source files for this are under the ‘basic animation
demo’ folder on FileSilo. Please look there to see the full
var box = document.querySelector('.box');
box.addEventListener('mousedown', toggle, false);
Design animations
The curves pallet provides an excellent way to
source for this technique and for these tutorial pages. First, } design your animations that simply isn’t possible
let’s create a simple box that will animate between two function toggle(e) { with a tool like Photoshop. Get your designers to sit
states when clicked. e.target.classList.toggle('toggle'); with you and craft the ideal animation.
<div class="box"> }

Left
To capture interactions, start recording and then interact with
the page. For more detailed information you can check the
Capture options at the top of the panel

Top left
Along with custom curves, Chrome DevTools also has a
handful of handy presets. Here’s what a Sine-in curve actually
looks like

Top right
This is the timeline panel in Chrome DevTools. It enables us
to record what’s happening on the webpage we’re
interacting with and then analyse the results

WordPress for Beginners 169

Going further
TECHNIQUE 2 container will change and the form will need to fade in. element instead – allowing us to structure the CSS in the
Complex state transitions These are the initial states required: way we did.

01 Transitions for animations

.form-transform { function bindToggle() {
width: 150px; document.querySelector('.trigger').
We can run multiple transitions from one change in state, height: 60px; addEventListener('mousedown', toggle, false);
and this will enable us to build more intricate UI animations. transition: all 1s; }
The full demo code is under the ‘complex state transitions’ } function toggle() {
folder on FileSilo and is required for reference in this section. .form { document.querySelector('.form-transform').classList.
Here’s the HTML we’ll be working with. position: absolute; toggle('expanded');
<article class="form-transform"> opacity: 0; }

06 Button in mid-transition
<button class="trigger">Login</button> transition: all 1s;
<form class="form"> }

04 Second states
<input type="email" name="email" The animation had to be slowed down to get the button in
placeholder="[email protected]"> mid-transition. It’s worth considering what your UI states
<input type="password" name="password" When the widget gets expanded the container will now will look like while animating and perhaps designing with it
placeholder="password"> grow to accommodate the form. The form itself will also in mind.
</form> grow, move in from the top, and fade in – all at the same
</article> time. If this were JavaScript animation we may expect to see TECHNIQUE 3
Breaking the rules!
02 Initial state
a performance hit with simultaneous animations.

01 Leave the DOM alone

.form-transform.expanded {
Now we move on to the initial state of our form width: 250px;
component. The full styles are in the demo folder and we’ll height: 130px; So long as we stay away from the DOM, we can still use
highlight some of the key ones in the next steps. } JavaScript to aid us in creating animations on the web. The

03 Initial CSS states

.form-transform.expanded .form { rest of the tutorial will be focused on adding physics to the
width: 200px; x axis of this circle.

02 The variables
We want the log-in form to transition in when the button is top: 50px;
toggled. To make space for that the width and height of the opacity: 1;
} The full source for this technique is under ‘drag demo’ on

Care with the loop

The animation loop will run as many times as 05 Add interaction
FileSilo. These are the main variables we’ll work with to
implement simple physics. It’s worth taking time to
possible per second. If we want to achieve 60FPS With the CSS set up we will now need to make the understand these because they can get complex.

03 Render and update

we have ~16ms to run all the JavaScript, update the state change. It’s similar to last time, but with a subtle
DOM, and paint the frame. Be efficient. difference. Instead of toggling a class on the element that
has been clicked, we toggle a class on the container The render function is expensive because it interacts with

Top left
The physics technique isn’t just for basic DOM elements or
even static media. Modern devices are even capable of
applying it to <video> tags

Top right
After the animation the form looks like it has been a form all
along, although submitting it may present a few issues
Right
Here is what that form animation looks like across a few
points in its animation. Looking at it frame by frame, it’s clear
the log-in text gets obscured which looks poor

170 WordPress for Beginners

 Is that really velocity?
Don’t mistake velocity for
speed. Speed refers to how
fast an object is moving,
whereas velocity is the rate
at which an object changes
its position. First we will
calculate the rate at which
the object is changing its
position during the drag
and call it dragVelocity. We
then take the difference
between that and the
current velocity to get a
‘force’. We apply this force as
acceleration for this frame
only.
None of this is really of any
importance when the object
is being dragged because it
will all get recalculated in
the next frame anyway. It’s
only when the mouse is
released that this
acceleration matters. Upon
the mouse being released,
the only forces left acting on
the object are velocity and
friction.

the DOM. UpdatePosition calculates the position of the item frame window.removeEventListener('mousemove',
every frame based on the velocity, acceleration, friction, and render(); // update the DOM setDragPositionX, false);
current position of the item. requestAnimationFrame(animate) // do it all again window.removeEventListener('mouseup',
function render() { }; onMouseup, false);

06 Mouse bindings!
element.style.transform = 'translateX(' + positionX + };
'px)'; // update DOM function setDragPositionX(e) {
}; This is our mousedown handler. When the user starts var moveX = e.pageX – dragStartX; // how far mouse
function updatePosition() { dragging we will update some variables to be able to later has been dragged
velocityX += accelX; calculate the ‘drag force’. dragPositionX = elementDragStartX + moveX; // how
velocityX *= friction; // friction always present We also bind a mousemove listener to keep the ‘drag far element has been dragged
positionX += velocityX; // where the item will be force’ updated and a mouseup listener to clean everything };

08 Kicking it off
rendered this frame up once the drag is over.
accelX = 0; // the further acceleration is from 0 the function onMousedown(e) {
faster the item is dragStartX = e.pageX; When the document is ready for interaction set the element
}; elementDragStartX = positionX; we’re applying physics to. Then set the animation loop

04 Apply force
isDragging = true; going. Lastly, bind onMousedown to mousedown on the
setDragPositionX(e); element we’re applying physics to.
When the item is dragged we want to apply a force to it. window.addEventListener('mousemove', document.onreadystatechange = function() {
To do this we calculate how far the item has been setDragPositionX, false); if(document.readyState == "interactive") {
dragged (drag velocity) and then how it should be applied window.addEventListener('mouseup', onMouseup, element = document.querySelector('.drag-me');
as acceleration. We do this by taking into account the false); animate(); // start animating
current velocity. }; element.addEventListener('mousedown',

05 The animate function 07 Mousemove and mouseup

onMousedown, false);
}
We have to create a loop for animation to exist. This When the drag has ended we unbind the listeners we set at };

09 The affect of friction

function will call itself as quickly as possible applying any the beginning of the drag, lest we have the item we’re
forces, updating the position of the item, and then animating stuck to our cursor. We also update
rendering to the DOM. All code inside this loop needs to be dragPositionX, which is used in the drag force calculation in Multiplying the velocity of the item by a number less than 1
fairly efficient for smooth animation. the animation loop. will make it slower every frame. This mock friction allows
function animate() { function onMouseup() { our item to slowly glide to a halt – interesting things
applyDragForce(); // apply any forces isDragging = false; // finish drag and clean up event happen when you make the friction variable greater
updatePosition(); // calculate position of item for this listeners than one.

WordPress for Beginners 171

Going further

Create a flickering
background image
AS SEEN ON THESTLBROWNS.COM/#/HISTORY/THE-EARLY-YEARS

Menu rollover icon

As the user rolls their mouse over the
burger menu, the circle becomes a
baseball in keeping with the site theme.

Vintage film effect

The background image is given
a greater vintage impact with a
flickering, film-scratched movie over
the top with a low opacity.

Reactive logo
The main logo on the screen moves around
as the user moves their mouse around the
screen, reacting to user input.

Outer border Historical timeline

The border around the page is orange, but As the user scrolls down, a timeline appears
as the user scrolls down, the border adjusts on the left of the screen showing where
to the new coloured background. the user is in the history of the team.

172 WordPress for Beginners

 DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-855

WITH THE WEB being such a new medium and it only the image. This is created by stretching an MP4 movie
TUTORIAL OBJECTIVE existing on shiny screens, it is important that websites with dust and scratches over the top of the image, with
Recreate this effect as seen on STR are able to capture the mood of what is trying to be a very low opacity that allows the original image to
Browns website
designed, going beyond the gloss that computers show through.
TIME REQUIRED bring. The St. Louis Browns baseball team have a The effect is subtle due to the low opacity – it is not
1 hour great microsite dedicated to the historical society of distracting to the viewer but at the same time it instantly
the team. communicates a sense of age and the historical legacy of
SKILL LEVEL As the site is dealing with history it chronicles the the team.
team’s story through a timeline approach using a To continue this theme, all of the images used have a
single-page scrolling design. To give maximum impact slightly worn look to them as if the ink hasn’t quite
to the page, the first image takes up exactly the size of adhered to the block when printed. This takes the design
the browser window and there is a lovingly crafted beyond shiny computer graphics and reinforces the
vintage, film grain and scratches effect over the top of theme to the user.

“This is created by stretching an MP4 movie with dust

and scratches over the top of the image, with a very low
opacity that allows the original image to show through”

01 Create a composition 05 Over to CSS

In After Effects create a new composition 1000 x 562 pixels, In the CSS for your web project add the following rules. The
24 frames per second with a duration of 2 seconds and 1 body is set to have an image covering the background,
frame. Click OK to create this, then go to Layer>New>Solid while the video is set to have a very low opacity, stretched
and choose black as the layer colour. over the top of the image, to give the flicker effect over

02 Add noise
the top.
body, html{
Add a Tint effect to this layer. Turn on the stopwatch to add margin: 0; padding: 0;
keyframes and at different points along the timeline change background: url(img/bg.jpg) no-repeat center center
the tint colour to different greys or blacks. Now use the Add fixed;
Grain effect, then make the noise monochromatic and turn background-size: cover;
the intensity up. }

03 Random lines
video {
position: absolute;
Deselect all layers and grab the Pen tool. Click at the top z-index: 100;
and then the bottom to draw a line. Make sure it has a white top: 0; left: 0;
stroke. Now add keyframes for it at different places along min-width: 100%; min-height: 100%;
the timeline, moving the line on the screen for each opacity: .0875; filter: alpha(opacity=8);
keyframe. Repeat this step with another layer. }

06 Add the video tag

In the body section of your code add the video tag as
shown below. The CSS will automatically place this over
other content and stretch to fill the screen. Save the file and
view it in a web browser to see the flicker effect over the
top of the image.
<video src="img/flicker.mp4" loop autoplay></video>

EXPERT ADVICE
Reduced colour palette
The St. Louis Browns’ site features
duotone images in the background.
This means that there is one colour
and a greyscale image – so the image
04 Add to render queue
Next we will go to Composition>Add to Render Queue.
is made out of two colours. This is a Here we will leave all of the options at default and then just
great way to keep file size of images
hit the Render button. After that we will put the video
down because there is less information
to store and it doesn’t interfere with through Miro Video Converter (mirovideoconverter.com) to
text over the top. get an MP4 file that is more suitable for playing on the web.

WordPress for Beginners 173

Going further

Make your WordPress theme

adapt to any screen
HATE IT WHEN YOU FIND A WP THEME YOU LOVE, BUT THEN REALISE IT
LOOKS AWFUL ON A SMARTPHONE? WE FIX THAT PROBLEM HERE
MOBILE DEVICES ARE eating away at the visitor logs several plug-ins serving mobile-friendly versions of TUTORIAL OBJECTIVE
Make your site respond to the size of
for websites all over the internet. Sure, most sites will your site. Not everybody wants to use a plug-in though. the screen on which it is being viewed
look decent enough on your smartphone, but it’s a In this tutorial we use media queries to make the
nuisance to have to pinch and zoom to actually read Twenty Ten theme responsive. That is to say, if the TIME REQUIRED
something, right? This means mobile iterations of visitor is viewing via a small screen we’ll make the 45 mins

websites are more important than ever, and obviously theme adapt. Since we don’t want to ruin the Twenty
this is something you don’t want to miss out on. Ten template itself with our edits, we’ll create a child
SKILL LEVEL
There are many ways to make your website mobile theme to keep additions separate. So grab your site and
accessible. If we look at WordPress, you’ll see there are let’s get started!

The site still looks exactly like Twenty Ten,

despite the child theme having been activated

174 WordPress for Beginners

 /* 320 px and up */
@media only screen and (min-width: 320px) {

/* This goes for everything 320 pixels and up

*/

/* Up to 480 px */
@media only screen and (max-width: 480px) {

/* Up to 480 pixels */

/* From 481 px and upwards */

@media only screen and (min-width: 481px) {

/* For screens 481 pixels and wider */

}
above
This is a bit easier to read on a mobile screen, but it’s not
exactly very pretty yet…
/* From 640 px */
right @media only screen and (min-width: 640px) {
It’s amazing what a little padding can do, but don’t overdo it;
make sure the amount works with the screen width
/* Special styling from 640 pixels and up */
029

01 Make a child theme 03 We need header.php too

}

First of all we need to create our child theme. As implied, Before we can do any fun stuff with media queries in style. /* 980 px and up */
child themes rely on parent themes which means that css we first need to add a tiny bit of code to header.php. @media only screen and (min-width: 980px) {
everything that doesn’t appear in the child will be loaded Touching Twenty Ten itself is a big no-no, so instead just copy
from the parent, so you only need to specify the differences the header.php file from the wp-content/themes/twentyten/
/* Where we set everything straight again */
in the child. It is a good way to protect your blog’s theme folder and then place it inside the twentyten-responsive
when working on changes. A child theme sits in its own folder. In the meta section of our own header.php, around
folder in wp-content/themes/ and is activated just like line 14, add the following line of code which will let us play }

06 Decide what to hide

any other theme. First, create a folder called ‘twentyten- with the viewport:
responsive’ and, within a file called ‘style.css’, insert the <meta name="viewport" content="initial-scale =
following code: 1,user-scalable=no,maximum-scale=1.0"/> The key to getting the versions for smaller screens to

04 Decide on the media

/* both look good and work well is to make sure you hide
Theme Name: Twenty Ten Responsive unnecessary elements, and find new places for essential
Theme URI: http://tdh.me/wordpress/twenty- queries ones. In this example we’ll hide the header on top up until
the desktop version, and we’ll float the right-hand column to
ten-responsive/ In this tutorial we’re not going for a fully fluid version of the bottom of the page. Sometimes you’ll be better off with
Description: A child theme that makes Twenty Ten Twenty Ten but rather adapting the layout for various set other priorities, but deciding which elements are crucial is
responsive. widths. The default site width is 980px, which most modern key so make sure that you think things through fully before
displays will be able to handle. We’ll have a media query for touching any code.
Author: Thord Daniel Hedengren
320px width and up, and then we’ll add some additional rules

07 Mobile first
Author URI: http://tdh.me/ for 480px and up. The next step is 640px, and then we’ll go
Template: twentyten over the 980px width rules as well (ie the default width). Each
*/ of these widths corresponds to a popular screen size, all of There is a reason there is so much talk about ‘mobile first’.
which are outlined on page 241. The first media query – 320 pixels and up – will basically strip
away everything we don’t want or need from Twenty Ten’s
05 Set up the media queries
@import url('../twentyten/style.css');
layout, and reposition other things. These rules will apply
at min-width: 320px, which is the standard for our smallest

02 Activate the child theme

With our plan decided, let’s start to write the media queries. browser windows, those on smartphones, so we’ll have to
This is done in the child theme we set up in step 1 since make some more tweaks to our edits later. For now, let’s
Use a development install of WordPress that has the Twenty all edits should be kept free from the parent theme. Open get rid of some stuff from Twenty Ten that isn’t suitable for
Ten theme, which is shipped with WordPress by default style.css from the twentyten-responsive folder and add the small screens. You’ll find these referenced styles in Twenty
but can also be downloaded from wordpress.org/extend/ following queries. Do read the comments which signpost Ten’s style.css, which we must import to the top of our child
themes/twentyten. Upload the twentyten-responsive folder the code for a quick insight as to what each media query is theme’s style.css file.
to wp-content/themes/ and then activate the Twenty Ten meant to do.
/* =============== /* 320 px and up */
Responsive theme from within WordPress. When you load
the site you’ll notice that it still looks just like Twenty Ten, since MEDIA QUERIES */ @media only screen and (min-width: 320px) {
at this point we haven’t done anything but import Twenty
Ten’s stylesheet.

WordPress for Beginners 175

Going further

above
• Our template shown reformatted for tablet, shown here
in landscape aspect
left
• Our template shown in default desktop format, how you’d
expect to encounter it fullscreen
right
• Our template adapted for the slimmer width of a
smartphone screen such as iPhone, conventionally shown in
portrait aspect

#wrapper { div#primary {
margin: 0; width: 100%; .post, div.page, li.widget-container {
padding: 0; } margin-top: 20px; padding: 0 10px; }
padding-top: 20px;
#site-title { border-top: 3px double #000; } }

09 Make it pretty for slightly

width: 100%;
margin-bottom: 0; #main .widget-area ul {
text-align: center; } padding-right: 0; } larger screens
Screens that are larger than 480px but smaller than 640px,
#site-description { #footer { such as that of a Samsung Galaxy SII held in the landscape
width: 100%; margin-bottom: 0; } position, might benefit from a little more spacing, so let’s
increase the padding we just set for the up-to-480px screens
float: left;
in the previous step, from 10px to 15px.
margin-top: 10px; #site-info, #site-generator {
/* From 481 px and upwards */
text-align: center; } width: 100%;
float: left; @media only screen and (min-width: 481px) {
text-align: center; }
.post, div.page, li.widget-container,
#access, #access .menu-header, div.menu, } #comments {

08 Make it pretty for small

#colophon, #branding, #main, #wrapper { padding: 0 15px; }

@media only screen and (min-width: 481px) { screens }

10 Reposition the sidebar

width: 100%; } While this simple piece of code (which basically just
overwrites the original styles from the Twenty Ten theme)
#branding img { will make the site infinitely more readable when viewed on You might wonder why we have a media query from 640px
mobile devices, it is in need of a good deal of beautifying and up? The reason is that from this size it works with the
display: none; }
by us. Let’s add some spacing in the next media query. The sidebar positioned on the right-hand side. Our problem is, we
reason we’re doing it here and not on top is that we’ll have need it to scale appropriately, so the width will be listed in the
div#content { different amounts of space later, so it’s not as global as the form of a percentage.
width: 100%; above changes.
/* From 640 px */
margin: 0; } /* Up to 480 px */
@media only screen and (max-width: 480px) { @media only screen and (min-width: 640px) {

“Galleries need a bit of loving to look

#container {
width: 62.5%;

good on smaller screens too”

margin: 0; }

176 WordPress for Beginners

 padding, so to take care of this all you need to do is add the
.post, div.page, li.widget-container { float: left; .navigation class to the same media queries as you did in step
padding: 0 20px; } text-align: left; } 13, like this:
/* Up to 480 px */
div#primary { #site-description { @media only screen and (max-width: 480px) {
width: 32.5%; width: 220px;
margin-top: 0; float: right; .post, div.page, li.widget-container,
padding-top: 0; text-align: right; } #comments, .navigation {
border: 0; } padding: 0 10px; }
#branding img {
} }

11 Back to normal 15 Dealing with embedded

display: block; }

Right now, the desktop version of the site looks pretty bad, #footer { video content
much like the screenshots shown across the page. This is margin-bottom: 20px; } Embeds are something that you’ll almost certainly have to
normal – we have overwritten a lot of styles after all! In our handle when it comes to making your site responsive.
final media query – the one for 980px and up – we’ll set After all, when they are embedded into your width they’ll
#site-info {
things straight again, basically reverting to the standard be in a set width and most likely that’s a wee bit more
Twenty Ten. than the 320px width of an iPhone, for example. For
/* 980 px and up */ width: 700px; embedded video this is simple enough; just by adding the
float: left; following code to our first media query – the one for
@media only screen and (min-width: 980px) { text-align: left; } 320px and up – YouTube videos and their like will be
optimally presented:
embed, iframe, object {
#access .menu-header, div.menu, #colophon, #site-generator {
#branding, #main, #wrapper { width: 220px; width: 100%; }

16 Scale your imagery

width: 940px; } float: right;
text-align: right; }
#wrapper { By default the Twenty Ten theme already scales images so
margin: 20px auto; } that they won’t be wider than the content column. That
means that we won’t have to fiddle with them, but in

12 What we’ve got so far…

padding: 0 20px; }

#site-title { At this stage we actually have a pretty decent mobile version

width: 700px; of the site, along with a middle ground for mid-sized, and
margin-bottom: 18px; the standard setup for desktop. You would think we could
stop here, and if you only used text that would be the case,
but alas, images and other things need to behave as well. We
haven’t looked at single posts and pages either, so there’s still
work to do.

13 Single posts and pages

A quick look at a single post tells us that the comments are The Internet Explorer
solution for your
in need of styling; at the moment, they hit the outer margins
of the window and need to be sorted out. Luckily this is easy
enough to take care of, since the comments section sits in
div#comments. Remember the padding code introduced HTML5 needs
in step 7, and added to in steps 8 and 9? Find that, and add
Twenty Ten isn’t coded in HTML5 so you won’t find this
#comments to it and you’ll be fine. The code from step 7
problem here, but more and more WordPress themes
would look like this: are. The thing is, Internet Explorer just doesn’t play nicely
/* Up to 480 px */ with HTML5 and CSS3 all the time. You’ll be fine from
@media only screen and (max-width: 480px) { version 9 and up, but prior to that you’ll have problems.
There are numerous boilerplates that solve this in a more
.post, div.page, li.widget-container, #comments { or less elegant fashion, but the best solution is perhaps
Remy Sharp’s excellent JavaScript HTML5 shim, which is
padding: 0 10px; }
hosted for free at Google Code. It will make the HTML5
tags behave as expected in IE6-8. You can include it in any
} project, using the IE conditional tag:

14 Getting the navigation <!--[if lt IE 9]>

links right <script src="http://html5shim.googlecode.com
It’s not just the comments code that needs to be positioned, /svn/ trunk/html5.js"></script>
as other elements will show up when you’re making an <![endif]-->
existing theme responsive as well. In Twenty Ten, one such It works perfectly well with WordPress themes as well,
above
• Watch embedded videos on screens ranging from 320px to element is the navigational links, linking to the previous page although you should consider using wp_enqueue_script()
980px thanks to our now responsive theme in archives as well as to the previous post on single posts. We and possibly wp_register_script() to queue the HTML5
only need to worry about these when #wrapper is set to no shim script with your theme.

WordPress for Beginners 177

Going further
18 Aside posts
Twenty Ten supports the Aside post format, and by default
so does our responsive child theme. We need to make sure
that these posts adhere to the new margin positioning as
well, which unfortunately isn’t as easy as just adding .
format-aside to the padding blocks introduced in step 7,
due to specific Twenty Ten styling for asides. Luckily we can
use margins instead, so add this code to the up-to-480px
media query:
.format-aside {
margin-left: 10px;
margin-right: 10px; }
Then we’ll apply 15px instead of 10px to the 481px-and-up
above media query, and 20px for the 640px-and-up version, all
We spice up the dull grey box representing our
theme with a quick screengrab
corresponding to their respective padding values, of
course. It’s as simple as that.

19 Gallery tweaks
right
The Gallery post format as well as the Aside post
format in action
Galleries need a bit of loving to look good on smaller
screens too. The easiest solution is to change the size of
img.attachment-thumbnail on the media queries, starting
with the one up to 480px.
img.attachment-thumbnail {
width: 75%;
height: auto; }
For 481px and upwards, make it slightly bigger:
img.attachment-thumbnail {
width: 80%;
height: auto; }
Then up in size again for 640px and above:
img.attachment-thumbnail {
width: 75%;
height: auto; }
Lastly, revert to default for 980px and over:
img.alignleft, img.alignright {
width: auto;
height: auto; }

20 Add screenshot.png
Finally, the grey box representing the Twenty Ten
Responsive theme on the Themes page within WordPress
looks a bit bland at the moment. Let’s screengrab the
theme when it is smaller and create a 300 x 225px PNG
from the shot. Name this ‘screenshot.png’ and add it to the
other cases you’d want to add a max-width to .aligncenter upwards media query:
twentyten-responsive folder. The preview box on the
and .alignnone most likely. What Twenty Ten won’t take
img.alignleft, img.alignright { Themes page now looks a lot more appealing, we’re sure
care of is images floating to the left or right, which will
width: auto; you’ll agree.
have to be scaled down in order to make sense of them on
smaller screens. height: auto; }

17 Tighten up the menu

First there’s the up-to-480px resolution, where we’ll
scale the images to 35%:
img.alignleft, img.alignright { Another object that will need some attention is the menu,
width: 35%; as it won’t fit too many things per row on a smartphone.
Since this is mostly an issue on really small screens, let’s

“If you make things

height: auto; }
just reduce the font size and the spacing a bit, as well as
Then there’s 481px and upwards: the line height. If you have an extensive menu you might

img.alignleft, img.alignright {
have to create a completely different solution altogether.
Adding this to the up-to-480px media query should do bigger and have
the trick:
less columns then
width: 40%;
height: auto; } div.menu {

you’ll provide mobile

Next, there’s 640px and up: font-size: 11px; }

users with a more

img.alignleft, img.alignright { #access a {
width: 45%; padding: 0 8px;

intuitive experience”
height: auto; } line-height: 32px; }
Finally, let’s reset the whole thing in the 980px-and-

178 WordPress for Beginners

Getting your web pages onto
smartphones and tablets KEEP YOUR BLOG BEAUTIFUL NO MATTER WHICH
DEVICE IT IS BEING VIEWED FROM
WHEN A WEBSITE IS ‘responsive’, the
layout and content responds or adapts to
the size of the screen they are presented
on. A responsive website automatically
changes to fit the device you’re reading
it on. Typically, there have been four
general screen sizes that responsive
design has been aimed at – the
widescreen desktop monitor, the smaller
desktop or laptop, the tablet and the
mobile phone.
If a user is browsing web content on a
mobile phone then they generally don’t
have a lot of screen space to work with.
Modern phones zoom out automatically,
so that the entire website can be seen
onscreen. Although this gives the reader
access to the entire site, it can be tricky
finding information that is located in a
small part of the screen. So if you can
move things around, make things bigger
and not have as many columns then you’ll
provide the mobile user with a more
intuitive experience.
In order to get your sites to scale
correctly on the intended mediums then
it is important to know what dimensions
the screens of the most popular mobile
devices are. Here is a rundown of the
most common screen dimensions that
you will be working towards.

Apple iPad
Height: 2048 pixels Width: 1536 pixels
Please note though that the above dimensions take into
account the basic Safari screen without the bookmarks bar
factored in. The new iOS 7 Safari allows for a less intrusive look
with the URL and bookmark bar disappearing.

Apple iPhone 5
Height: 1136 pixels Width: 640 pixels
The full pixel height of an iPhone screen is 480, but you have
to deduct the space required for the status bar (20 pixels), in
iOS 7 and beyond the address bar and buttons at the bottom
disappear, impeding less on the screen space.

Samsung Galaxy S5
Height: 1920 pixels Width: 1080 pixels
The browser status bar on a Galaxy S5 is quite unintrusive
compared to the iPhone and as such only 60 pixels need to
be deducted for the URL text field.

WordPress for Beginners 179

Troubleshooting

180 WordPress for Beginners

 Your
WordPress
questions
answered
ALL YOUR PROBLEMS SOLVED WITH THIS GUIDE TO
COMMON WORDPRESS QUERIES AND CONCERNS

E
ven after following all the guides Sometimes it may be just a simple case sometimes, but we put your mind at ease
in this book, you may still come of an edit or tweak that you make not as we take you through these nagging
across problems from time to producing the results that you were after, fears and answer all your questions in this
time that will have you scratching or you may simply be having trouble easy-to-follow troubleshooting guide.
your head and beating your hands down understanding the concepts behind On top of all this, we give you some
on the desk in frustration. There are the whole thing in the first place. For top tips to common queries, such as how
hundreds of potential dilemmas that example, what’s the difference between to back up your blog and how to use
may arise, as WordPress is a dense and a self-hosted blog or a wordpress.com WordPress on a mobile device. There are
feature-packed platform. But fret not, account, and which is the best option even step-by-step instructions in here to
as we are on hand to take you through for you? Or you may be worried about help you along the way. With our advice,
some of the key problems and questions how much your all-singing, all-dancing you’ll be solving these problems quickly
that can arise for beginners when using website is going to cost you in the long and on your way to creating the perfect
WordPress for the first time. run. It can be a confusing program to use blog in next to no time at all.

WordPress for Beginners 181

Troubleshooting

FAQs

“Offers the
ability to
access and
manage
your blog
any time,
anywhere”

Can I edit WordPress on a mobile device?

The great thing about blogging is that you can write about source nature of the software means there is a solid and vocal
whatever you are interested in. But if you are a keen blogger, you community of users. Now, with the rising popularity of tablet devices,
don’t want to be chained to your desk for hours on end. Well, with the app has been optimised for bigger touch-screen usability. There
WordPress you don’t have to: the WordPress app offers the ability are lots of advantages to using the WordPress app; it gives you more
to access and manage your blog any time, anywhere, through your freedom to write and upload posts wherever you want. Maintaining
smartphone or mobile tablet. The WordPress app is available for blogs can be a huge task, especially
all of the major mobile platforms for free through their app stores. if you are the only one running
With a simple change in the admin dashboard, you can allow your them. Having the ability to read and
site to be accessed remotely. The WordPress app is constantly under moderate comments on the go is an
development and has been well refined since its launch. The open indispensable feature.

03  Start
mobile
blogging
When you have
set up your blogs,
the WordPress app
offers the ability
to write and edit
posts and pages.

01 Install the app

The first step is to download
Keeping on top of
the sites by reading
the app for your mobile device.
The WordPress app is available for
free through the Apple, Android,
02 Log into accounts
To log into your WordPress accounts,
you will need to enable XML-RCP in the Writing
and moderating
comments is now
easy to do on the
Nokia and BlackBerry app stores for section of your blog. Then, through the app, move. There is also
smartphones. It has also been well you can use multiple logins so you can log into geotagging support
optimised for tablet devices for a more all your accounts and manage them from the and image upload
intuitive blogging experience. main dashboard. options.

182 WordPress for Beginners

 Does it cost anything to use WordPress?
Technically, no: the WordPress core is available for free
from wordpress.org – but there are other expenses
to think about, like domain names, server space and
databases. Domain names are relatively cheap; in
most cases the higher-priced names will end in .com
and will cost around £10 a year. Prices vary from site
to site and annual prices will be reduced if bought
for longer amounts of time. The domain name can
be anything currently not registered. Server space
can be bought from hosts as a single site package
from as little as a few pounds per month. In the case
of running more than one site, it is worth looking for
something a little more flexible that you can group
all your sites together on. Web and email forwarding
will usually be thrown in as an extra. Databases will
be often be sold separately. It is recommended
to really use one database per site, but there are
options to host multiple blogs from one. Outside of
running costs, another thing that can cost money
is the themes. Standard WordPress themes are free
and there is a huge selection of them available, but
premium themes will cost extra. All fees for websites
are recurring, so it is really advised to find the solution
that suits you and get it from one place if possible.

My links are
broken since
I changed the
permalinks,
what is wrong
and can this
be fixed?
It is important before you start writing
your posts and pages for your blog to
set a good permalink structure. Setting
up a good permalink structure can make
or break a website in terms of search
engine optimisation, and nine times out
of ten this is why people go back and
change them. The popular formatting also harm your search engine rankings if you do Install and activate the plug-in and then all
for good SEO is something along the lines of not remedy it quickly. This will affect your traffic you need to do is enter your old structure and
/%category%/%postname% depending on and any advertising on the site. If you have any the new structure and this will make sure that all
your site content. If you go back and change programming experience then this can be done the links are redirected appropriately. The plug-
your permalink structure once you have written in the .htaccess file. Alternatively, if you have no in will only allow you to change the permalink
posts and pages on your blog, it will break the experience in this or you cannot directly access structure once, so be sure to do it right this time
existing links within your site, as well as search and edit it, you can use the free Permalinks otherwise you’ll have to look in to doing this the
engine links or links from external sites. This may Migration plug-in. hard way instead.

WordPress for Beginners 183

Troubleshooting

How can I back up my

Back up your important WordPress files and SQL
database using a plug-in and Dropbox for free

01  Download and install the

Dropbox application
The first thing to do is to download the
Dropbox application from www.dropbox.
com. It is available for PC, Mac and Linux
as desktop versions. A mobile version is
also available for iPhone, iPad, Android and
BlackBerry through their respective app stores.
Ideally you will need access to a desktop
version for the purpose of this tutorial.

“Each time you use

the machine, it will
sync itself to keep
the files up to date”

03  Sync up your Dropbox account

Now you have your Dropbox account, you
can repeat the installation on other machines using
the same account details. Each time you use the
machine, it will sync itself to keep the files up to date.
You can also download your files from the Dropbox
website using your account details.

04  Download
WordPress
Backup to Dropbox
plug-in
Download the WordPress
Backup to Dropbox plug-in

02  Install and configure your

Dropbox
During the installation you will be asked to
through the Plugins section
of the WordPress dashboard.
If you can’t install it this way,
create a username and password. Then you go to the wordpress.org site
will be asked how much space you want; you to download the file. Unzip
are given 2GB of free storage, while there is a the folder and upload it to
monthly charge for 50GB or 100GB. Then you your plug-ins folder inside
need to choose where you want to keep your wp-content on the server
Dropbox folder on your computer. through your FTP.

184 WordPress for Beginners

blog and database?
05  Activate the
Dropbox
backup plug-in
Once you have the plug-in
uploaded, you will be able to
find it in the Plugins menu. Click
on the Activate button and
then you’ll be able to configure
the plug-in. Once activated, the
plug-in will not work but can
be found in the Settings menu
under ‘Backup to Dropbox’ in
the WordPress dashboard.
07  Select a database
backup location
Once you are in the Settings for
the plug-in, you will see an option

06  Set up plug-in

When first activating the plug-in, you will be asked
to set up the plug-in using your Dropbox account details.
that says ‘Locally store backup in
this folder’. This option is asking
you where you want to back up
You will only need to enter these details once so you can your SQL database. The default
access and customise all the backup options available. Make is ‘wp-content/backups’, but the
sure your Dropbox account isn’t already full or the backups location and folder name can be
will not be able to complete, once set up. changed if preferred.

08  Configure your backup folder name

The next option is ‘Store backup in this
folder within Dropbox’. The default folder name will be
“You will be
asked to set up
‘WordPressBackup’ but this can be changed if required.
You will need to make sure to change this if you plan to the plug-in using
back up multiple sites or they will overwrite each other.
Also be sure to save the changes before backing up or the
your Dropbox
changes will not be registered. account details”
10  Check your
backup was
successful
Once your backup is
complete, it will tell you
if there were any backup
errors. At this point, it is a
good idea to go to your

09 
Dropbox account and
Set a frequency for check that everything
automatic backup is exactly as it should
You can set the time and day you want the be. You should now
backups to take place. Make sure to set it at a have a full WordPress
time when you will not be working on your backup with your SQL
site. The cycle can be set as regularly as once a backup in the folder that
day to as long as every 12 weeks. Once you are you selected earlier. So
finished, press ‘Save Changes’ and then select you are now protected
‘Backup Now’. against data loss.

WordPress for Beginners 185

Troubleshooting

WordPress
glossary
HERE’S A QUICK CRASH-COURSE IN SOME OF THE POPULAR
LINGO ASSOCIATED WITH WORDPRESS BLOGGING. LEARN
THE VARIOUS DEFINITIONS FOR EACH TERM AND YOU’LL BE
A BLOGGING MASTER IN NO TIME!

Autocast use them to communicate the very latest

news on projects they are working on – as
Category cloud
Autocasts are also known as ‘Podcasts’. a kind of informal press release – to their This is a widget you can add to your blog
These are audio or video recordings that are clients, fans and the media. Meanwhile, via the sidebar; it can be found under the
released and downloaded via the internet. individuals often use blogs as a creative Appearance header in your main WordPress
Radio stations often use them to provide outlet to communicate their thoughts and Dashboard. Depending on which theme
highlights of a presenter’s show; others may knowledge on a particular subject and share you choose, category clouds will appear on
use it to broadcast a discussion or debate them with the world. This is what WordPress your blog page – the larger the word, the
on a certain topic. is all about. more blog posts under that category.

Archive Blogosphere cPanel

If you would like to organise your past This term is in reference to a collection of This is a tool that your web host will offer as
blog posts then the Archive widget will websites on the internet that are related to, part of the paid-for hosting you subscribe
help you do this. You can customise the or encourage blogging. to. A cPanel, or ‘control panel’, interface
title, decide whether or not you’d like to should be easy to use and help you to
display the amount of posts in each month,
or opt for a drop-down menu to display
Blogroll organise your blog and/or hosting account.

this information. This is a list of links to other people’s blogs –

kind of like a ‘favourites’ list from the person
Comments
This is a feature you can enable on your
Avatar whose blog you’re reading. You’ll normally
see it in its own column down the side blog posts. It’s where the readers can add
An avatar is an image that represents you of their blog page. The blogroll can also their thoughts on an article you’ve written,
as a user online for things like your blog, include various websites that the blogger as well as providing feedback on your blog
forums and other online communities you likes to visit. in general. Comments can also be set up
may have joined. You can choose to use a so that you have to authorise them before
picture of yourself or a particular animal or they’re visible on your page, which is helpful
object that you like. In addition to the static Category to prevent offensive remarks or spam.
avatars, there is the possibility of using an Categories can be used to organise your
animated image or a 3D model of yourself blog. Every time you write a post, you’ll Content management
to if you wish to. have the option to file it under a category. system (CMS)
It’s best to create one that is relevant to A CMS, or content management system,
the subject of the text to help your readers is a piece of software that enables you to
Blog navigate their way around your site. You add to, edit and organise the information
‘Blog’ is a shortened version of the word will find that most of your posts can be on your site. They are present in WordPress
‘weblog’, which is essentially an online grouped under just a few headings, but if blogs and are great because it means you
diary written by an individual or group of they don’t then you can always add more need no knowledge of HTML code to set
people on a chosen topic. Many companies categories whenever you want. up a blog or keep it updated.

186 WordPress for Beginners

Header
This is the top of your blog and it
often displays the site’s name

Dashboard
This is the blog’s control centre and
it’s where you edit your site from

Gallery
A collection of images on your Sidebar
website are called a gallery This is the bar that is located either
on the left or right of the page

Custom CSS Edit comments Gallery

CSS, or Cascading Style Sheets, can be You’re gifted control over any and all the A gallery is a collection of images that are
customised in WordPress using a Custom comments that users add to your blog attached to any particular blog post. When
CSS upgrade. This means that you can posts. Click on Comments to view them all you click on the Upload/Insert button, you
change the look, style and layout of then ‘unapprove’, ‘approve’, ‘mark as spam’ will be presented with an ‘Add an image’
your blog. or ‘delete’ as appropriate. You have the window. Along the top of that is a selection
ultimate say on what’s on your site. of tabs, one of which is labelled ‘Gallery’. By
clicking on this you will be able to see all
Dashboard Excerpt the images that you’ve uploaded to that
This is a short summary of your blog post particular post.
This is the control centre of your blog. It’s
visible on your homepage. It’s a great way
normally the first thing you see after you
log onto your blogging account. Here you to entice people into your latest published Gravatar
can do such things as view your blog’s post and ensures a nice, tidy homepage. It Globally Recognised Avatars, or ‘Gravatars’,
stats, add or edit posts and change its can only be used with a certain selection of are pictorial representations of individuals
appearance. In a WordPress blog you’ll standard free WordPress themes, though. online. A Gravatar means it’s possible a user
have all the sections you can click on down can have just one avatar for all the forums
the left-hand side of the page, and in the and websites they visit.
middle will be a summary of all your blog Feed (RSS)
details, such as number of posts, categories This piece of software keeps people
and tags, plus any recent comments. up-to-date with any changes to your blog. Header
Readers can subscribe to the RSS feed and This is the top of your blog. The header
Domain name then receive summaries of what’s been displays the name of your blog and
These can be names of blogs, people added to the site. Many people choose to sometimes, depending on the template
or organisations that are used in web add the RSS feed option to their blog as it’s or layout you choose, your blog’s tagline
addresses to link to certain web pages, such a great way for visitors to stay informed and (which is a small snippet or summary of
as WordPress and www.wordpress.com. encourages revisits. what the website is actually all about).
Some templates will allow you to customise
Draft Feed reader the header with a background image too.
Blog posts that haven’t yet been published A feed keeps people updated with any
are called ‘Drafts’. These are visible in the changes that you make to your blog, but a HTML
Posts section of your WordPress Dashboard. feed reader is an application that combines Its full name is ‘hypertext markup language’,
The status of your blog is also visible as the feeds from several blogs a user is which is used to create graphic effects and
you’re typing your text in; simply look to interested in. Typically, a user will need to layouts on webpages. You can view and
the Publish panel on the right and save, subscribe to a set of providers who provide edit the code by clicking on the HTML tab
preview or publish as and when necessary. the desired content. in the Add New Post tab section.

WordPress for Beginners 187

Troubleshooting
Link Nextpage PHP
If you would like to direct your readers to a This extremely handy command can PHP stands for Hypertext Pre-processor.
website that you mention in your blog post be used to break up a lengthy post It’s a scripting language that is designed
then a link will help you do just this. Simply into a series of separate pages when to be integrated with HTML and used with
highlight the word or website address and viewed in Preview mode. Simply insert content management systems. WordPress
click on the chain image in the Text Edit <!—nextpage--> into the desired line of is actually written using this language. PHP
palette, then enter the relevant details (for your post code to force a page break and is a piece of open-source software that is
example, ‘Title’) in the Insert/Edit Link pop- automatically add subsequent page links available on Windows, Mac OS X and Linux.
up dialog box). to the post.
Pingback
A pingback lets you know if anyone links
Mass edit tags Page to an article of yours. If they see something
There’s the option in WordPress to tweak Unlike a post, a WordPress page is used they like and then decide to comment
each and every one of your tags on for information that you’d like to be on it while providing a link then you’ll be
every post that you make on your blog kept aside from the more time-sensitive notified. It does it automatically and it’s
at once. The post titles are displayed in information you add on a regular basis. great because you can see who’s writing
the form of the table, along with the tags Pages are best used to provide details on what about you.
in another column. You can change the yourself or the blog, such as an ‘About me’
text as you wish and it will update each or ‘Contact us’ page. Plug-in
post accordingly. These are a group of PHP functions, or
Page jump small files, that add new features and
Moblogging These will, when clicked, move you to a better functionality to your blog. It helps
Blogs that are made from a mobile phone different part of a page. It’s particularly expand a standard blog, adding in all sorts
or smartphone are called moblogging, useful when you’ve got a really long post; of fun extras and generally making life
or mobile blogging. If you are using an people can click on the page jump and it’ll easier. Popular WordPress plug-ins include
iPhone, it is possible to write the whole take them to the top, bottom, or another WP Super Cache, which helps your blog
blog, upload an accompanying photo destination on the page without them load faster, and TweetMeme – reducing a
(taken with your handheld device) and having to scroll up or down. ReTweet to one click of a button.
even publish it without the need for a
computer at all. Permalink Post
A permalink is an individual web address for These are individual articles that form your
mShots every single article you have produced. The blog. You can create a post on any subject
These will display mini previews of any post is permanently stored at this location you like and then edit or add new tags and
websites you link to in your blog. If you and another permalink is created each time categories to it. When you’ve written your
enable them within your Dashboard you add a new article. They are particularly post you can preview it first or simply go
settings, your users will be able to take a helpful since users can bookmark a specific ahead and publish it. There are plenty of
peek at the page simply by hovering their blog post they particularly like or find options to format the text, add things like
mouse over the link. useful, without its address ever changing. bullet points and insert images into the article.

Domain names
These are names used in web
addresses to link to pages

Plug-ins
These can be used to add extra content
to your site, such as Twitter buttons

Widgets
These are panels that specialise in
particular uses on your blog

188 WordPress for Beginners

Post scheduling Sidebar Tag Cloud
WordPress offers you the option to choose This is essentially the menu for your blog. This is a widget you can add to your blog; it’s
when to publish your blog posts. You It’s where a lot of information is stashed a collection of all the tags you’ve applied to
can decide to schedule your posts to be away and, depending on which theme your blog posts. It’s useful for readers visiting
published while you’re away on holiday, or or template you choose to go for, it will your site because it can provide an at-a-
simply over the weekend if you have other appear on the left or the right-hand side glance guide of what your posts are about.
things to do, just by editing the date in the of your blog site.
Publish box. Tagline
Smiley A tagline, or phrase, sums up your blog in just
Post Slug These are also known as emoticons and a few words. It’s a handy piece of info for new
This is created when you type the title of they represent a human face. They’re visitors to your site and, depending on which
your post into the header bar. It forms the normally constructed with the colon, semi- theme you choose, is normally displayed
last part of the permalink, which is directly colon and bracket symbols to display a underneath the main blog name or header.
underneath your main post header when particular emotion, such as :) or :( but some
you’re adding or editing a post. Click on plug-ins and even WordPress itself turns Tag Surfer
Edit to change it to a more memorable them from pieces of punctuation to little To find WordPress posts covering similar
or search-engine friendly URL, then save graphic faces by default. topics as you, click on the Tag Surfer button
your changes. from your Dashboard. Down the left-hand
Spam side you’ll see the many tags you’ve added to
Post Status It can come in the form of emails or your posts, and to the right there will be a list
Your post can have the status of ‘Draft’, comments on your blog site, but spam of posts covering these topics.
‘Pending review’ or ‘Published’. You can is essentially unsolicited advertising, and
edit this status depending on what stage is unwelcome by the majority of people. Task-based
you’re at with your blog post. It’s possible WordPress features a handy spam blocker documentation
to check the status of any of your posts; to prevent such comments making it to A tutorial, step-by-step, or less-commonly
you just need to click on the Posts header your site, and you can take a look at this by known ‘task-based documentation’ gives
and the status is located under the date of clicking on the Comments section of your instructions to people on how something is
each post. blog at any time. done. The text should be clear, concise and
include pictures where necessary.

QuickPress Tag Themes (Templates)

This is a mini-post creator on the main Tags are keywords that are relevant to each A theme or a template is how you can go
Dashboard. It enables you to post instantly, blog post. They tend to vary a lot more about altering your blog’s appearance.
rather than going through the usual than categories, since each piece of text WordPress provides free themes, which vary
Posts>Add New method. You can’t set a you write is likely to be different. Tags are to suit people’s needs and tastes. To choose
future publish date or add categories, but formed by simply typing them in the Post them, just visit the Appearance tab down the
you can write a post, add a title, tags and Tags bar and separating each one with left-hand side of the Dashboard. If you’re not
publish it. a comma. sure that one will suit your blog, simply click
on the Preview button to take a gander first.
Themes
These are templates that dictate Trackback
your blog’s appearance This lets a blog author know that you have
written something related to his or her blog
post, and it doesn’t necessarily mean that you
have to provide a link to their site. It’s nice for
them because they are being recognised for
something that they have written, which may
also lead to them taking a look at your post
and increasing your traffic.

URL
URL, which is less commonly known as
Uniform Resource Locator, is a location or
address directing you to a website where a
company or a particular piece of information
can be found on the internet – for example:
http://wordpress.com or www.imagine-
publishing.co.uk.

Widget
Widgets are panels specialising in a particular
Page jump use on your blog. So, for example, you can
Page jumps will move you to a choose widgets for Twitter, Tag Clouds and a
different part of a page Search bar from the Appearance section of
your Dashboard.

WordPress for Beginners 189

 of al
r
al ci
fe
tri Spe

Enjoyed
this book?
Exclusive offer for new

Try
3 issues
for just
£5 *

* This offer entitles new UK direct debit subscribers to receive their first three issues for £5. After these issues, subscribers will then pay £25.15 every
six issues. Subscribers can cancel this subscription at any time. New subscriptions will start from the next available issue. Offer code ZGGZINE must be
quoted to receive this special subscriptions price. Direct debit guarantee available on request. This offer will expire 31st January 2017.
** This is an US subscription offer. The USA issue rate is based on an annual subscription price of £65 for 13 issues which is equivalent to $102 at the time
of writing compared with the newsstand price of $14.99 for 13 issues being $194.87. Your subscription will start from the next available issue. This offer
expires 31st January 2017.
 About
the Uncover the secrets
mag of web design
Practical projects
Every issue is packed with step-by-step tutorials
for Flash, Dreamweaver, Photoshop and more
In-depth features
Discover the latest hot topics in the industry
Join the community
Get involved. Visit the website, submit a portfolio
and follow Web Designer on Twitter

subscribers to…

Try 3 issues for £5 in the UK*

or just $7.85 per issue in the USA**
(saving 48% off the newsstand price)
For amazing offers please visit
www.imaginesubs.co.uk/wed
Quote code ZGGZINE
Or telephone UK 0844 848 8413+ overseas 01795 592 878
+ Calls will cost 7p per minute plus your telephone company’s access charge
 YOUR FREE RESOURCES
Log in to filesilo.co.uk/bks-855/ and download your tutorial resources NOW!

EVERYTHING
YOU NEED
TO FOLLOW THE
TUTORIALS AND
CREATE GREAT
PROJECTS

DOUBLE EXPOSURE IMAGE SET WITH TEXTURES, ACTIONS & MORE

YOUR BONUS
RESOURCES
ON FILESILO WE’VE PROVIDED
FREE, EXCLUSIVE CONTENT FOR
WORDPRESS FOR BEGINNERS
READERS, INCLUDING…
• Tutorial files to follow and complete
15 plexiglass textures step-by-steps
• 15 free Sparklestock ‘plexiglass’ abstract
Photoshop Actions
• 3 retro photo effects
• A handy double exposures kit, including
Tutorial files actions, gradients and textures
• CSS and HTML responsive templates
• Free WordPress theme for your use
PACKED WITH FREE • 6 fonts to use on your site

PREMIUM CONTENT Free fonts

• Over 14 hours of video tuition

Go to: http://www.filesilo.co.uk/bks-855/
192 WordPress for Beginners
FILESILO – THE HOME OF PRO RESOURCES
Discover your free online assets
A rapidly growing library No more broken discs
Updated continually with cool resources Print subscribers get all the content
Lets you keep your downloads organised Digital magazine owners get all the content too!
Browse and access your content from anywhere Each issue’s content is free with your magazine
No more torn disc pages to ruin your magazines Secure online access to your free resources

This is the new FileSilo site that replaces

your disc. You’ll find it by visiting the link on
the following page.

The first time you use FileSilo, you’ll need to

register. After that, you can use your email
address and password to log in.

The most popular downloads are shown in

the carousel here, so check out what your
fellow readers are enjoying.

If you’re looking for a particular type of

content, like software or video tutorials, use
the filters here to refine your search

Can’t find the resource you’re looking for in

these filters? Click on More Types to specify
what kind of resource you want.

Whether it’s fonts, images or video

workshops, categories make it easy to
identify the content you’re looking for

See key details for each resource including

number of views and downloads, and the
community rating

Find out more about our online stores, and

useful FAQs, such as our cookie and
privacy policies and contact details.

Discover our fantastic sister magazines

and the wealth of content and information
that they provide.

WordPress for Beginners 193

HOW TO USE
EVERYTHING YOU NEED TO KNOW ABOUT
ACCESSING YOUR NEW DIGITAL REPOSITORY

To access FileSilo, please visit http://www.filesilo.co.uk/bks-855/

01 Follow the on-screen
instructions to create
an account with our secure
02 Once you have logged
in, you are free to
explore the wealth of content
03 You can access
FileSilo on any
desktop, tablet or
04 If you have any
problems with
accessing content on FileSilo,
FileSilo system, or log in and made available for free on smartphone device using or with the registration
unlock the issue by FileSilo, from great video any popular browser (such process, take a look at the
answering a simple question tutorials and online guides to as Safari, Firefox or Google FAQs online or email
about the edition superb downloadable Chrome). However, we filesilohelp@
you’ve just read. resources. And the more recommend that you use a imagine-publishing.co.uk.
You can access bookazines you purchase, desktop to download
the content for the more your instantly content, as you may not be
free with each accessible collection of digital able to download files to your
edition released. content will grow. phone or tablet.

NEED HELP WITH

THE TUTORIALS?
Having trouble with any of the techniques in this issue’s tutorials? Don’t know how to make the best
use of your free resources? Want to have your work critiqued by those in the know? Then why not
visit the Bookazines or Web Designer Magazine Facebook page for all your questions, concerns and
qualms. There is a friendly community of experts to help you out, as well as regular posts and
updates from the bookazine team. Like us today and start chatting!

facebook.com/ImagineBookazines
facebook.com/WebDesignerUK
194 WordPress for Beginners
Everything you need to know
to get started in WordPress

Grasp the WordPress basics Get your WordPress site hosted

Get your WordPress blog up and running Find a host and organise your WordPress blog

Customise your WordPress blog Add extras to your blog

Make your website stand out from the crowd The next steps to successful blogging

New for
the latest
WordPress
update SEVENTH EDITION

100% UNOFFICIAL