The Ultimate Guide To Wordpress

100 PAGES OF EXPERT WORDPRESS TIPS, TUTORIALS AND TECHNIQUES
PRESENTS
Everything you need to master WordPress!

Discover the best free themes and plug-ins Master The Loop
Add e-commerce Future-proof your responsive WordPress designs
Customise the admin tool The 20 biggest WordPress mistakes
Protect your WordPress site And much, much more
Xxxxxx
Xxxxxxxxxx
From the makers of
Future Publishing, 30 Monmouth Street, Bath BA1 2BW

Telephone +44 (0)1225 442244 Website net.creativebloq.com
Editorial
Editor Rob Carney, rob.carney@futurenet.com
Art editor Mike Brennan, mike.brennan@futurenet.com
Production assistant Adam Hurrell, adam.hurrell@futurenet.com
Contributors
Scott Basgaard, Joe Casabona, Derek Chan, Matt Cohen, Kim Crawley, Jesse
Friedman, Kerrie Hughes, Aaron Kitney, Emma Lewis, Dave Mackintosh, Gilbert
Pellegrom, Sam Hampton-Smith, Shannon Smith, Ryan Taylor, Noel Tock
Group Art Director Steve Gotobed
Creative Director Robin Abbott
Editorial Director Jim Douglas
Advertising
Advertising Sales Director Charlie Said, 020 7042 4142, charlie.said@futurenet.com
Account Manager Julian Tozer, 020 7042 4273, julian.tozer@futurenet.com
Senior Sales Executiver Ross Arthurs, 020 7042 4128, ross.arthurs@futurenet.com
Senior Sales Executive Laura Watson, 020 7042 4122, laura.watson@futurenet.com
Director of Advertising James Ranson, 020 7042 4163, james.ranson@futurenet.com
Marketing
Group Marketing Manager Philippa Newman, philippa.newman@futurenet.com
Circulation
Trade Marketing Director Daniel Foley, daniel.foley@futurenet.com
Print & Production
Production Coordinator Vivienne Turner
Licensing
Senior Licensing & Syndication Manager Regina Erak, regina.erak@futurenet.com
Tel + 44 (0)1225 732359
Future Publishing Limited
Editor in chief Dan Oliver
Head of Creative and Design Declan Gough
Managing Director, Technology, Film & Games Nial Ferguson
Chief Financial Officer Graham Harding
Chief Executive, Future PLC Mark Wood
Subscriptions
Phone our UK hotline 0844 848 2852; international (+44) (0) 1604 251045
Subscribe to .net magazine online at www.myfavouritemagazines.co.uk
Printed in the UK by William Gibbons.
Distributed in the UK by Seymour Distribution Ltd,
2 East Poultry Avenue, London EC1A 9PT. Tel: 0207 429 4000
Future Publishing Limited 2013. All rights reserved. No part of this magazine may be
used or reproduced without the written permission of the publisher. Future Publishing
Limited (company number 2008885) is registered in England and Wales. The registered
office of Future Publishing Limited is at Beauford Court, 30 Monmouth Street, Bath BA1
2BW. All information contained in this magazine is for information only and is, as far as
we are aware, correct at the time of going to press. Future cannot accept any
responsibility for errors or inaccuracies in such information. Readers are advised to
contact manufacturers and retailers directly with regard to the price of products/
services referred to in this magazine. If you submit unsolicited material to us, you
automatically grant Future a licence to publish your submission in whole or in part in all
editions of the magazine, including licensed editions worldwide and in any physical or
digital format throughout the world. Any material you submit is sent at your risk and,
although every care is taken, neither Future nor its employees, agents or
subcontractors shall be liable for loss or damage.
The text paper in this magazine is

totally chlorine free. The paper
manufacturer and Future
Publishing have been
independently certified in
accordance with the rules of
the Forest Stewardship Council.
Welcome to The ultimate guide to

WordPress. In this special issue from the
makers of net magazine, we bring you
everything to need to know to get ahead
with one of the world's most popular
publishing platforms.
Over the following pages, you'll discover
some of the best plug-ins and themes, a
host of great sites that have been created
in WordPress (some may surprise you) and
of course, how to create your own stunning
WordPress sites.
Whether you're a beginner looking for
advice to get started, or a seasoned pro
wanting to expand your skills, there's
something here for you. So get stuck in and
get creating in WordPress!
Presents: The WordPress Handbook 3
Contents
The ultimate guide to WordPress
Contents
Page 26
Page 06
Page 42
Page 46
Page 66
Presents: The ultimate guide to WordPress
Page 30
Contents
Page 84
Page 90
Getting started/tips
Tutorials
Build the best sites

Improve your WordPress skills
12
The best free plug-ins

Designers: take note!
WooThemes shows you how
40 brilliant WP tutorials
38
20 portfolio themes
Backend skills
Create a cracking folio
42
Advanced WP techniques
And how to use them
WordPress e-commerce
Meet the co-founder of WordPress 20
Add products to your CMS
Key WordPress skills
User-friendly custom fields

25
20 WordPress mistakes
And myths, and misgivings
Hand-picked for you
84
An amazing showcase
90
52
56
Multilingual WordPress
26
Futureproof WordPress
Responsive WP masterclass
with Meta boxes
80
33 great WordPress sites

50
Interview: Mike Little
Expert tips
70
The best free themes

46
Custom post types

16
Ace online resources
Customise the admin area

Master The Loop
14
Secure your site

Stop the hackers!
Showcase
Create your own toolkit

06
11 awesome resources
The best online resources
The ultimate guide to WordPress
Global design skills
58
Filter with Infinite Scroll

30
In-page category filtering
62
Build a WordPress folio

Create a cool online portfolio
66
Presents: The ultimate guide to WordPress 5
cessibilit
tion Ac
rna
tion
alisa
Int
e
er
ce
G
gl
e
ss
G
SS
LE
ES
PL
G
P
ap
str
ot
Bo
TM
eH
scap
ts Ic
oMo
on
k
Moon In
Ink
s ca
pe
G
SV
o
Script Roots Ic
HT
ML
5B
oil
er
p
at
a
oo
Yo
a
Sa
Sa
ss
L
Java
SVG CSS
Sc
he
ma
a
em
tstrap
h
Sc
B oo
te
la
a
mp
o
C
o
sW
m
om
C
o
ok
PL
o
eb
ac
rF
tte
Twi
SG
ES
ok
tS
EO
T
SS GPL Bootstrap
S
E
w
V
G
itt
CSS
ss L
e
a
r
S
Face
Ja
book Schema
Script
CSS Java
p SVG
ipt
tstra
Scr
Boo
ava
SJ
CS
sL
itte
Tw
S i
tR
oo
SV
CSS J
oM
oo
n
In
k
sc
ap
e
ss W
ooC
om
me
rce
Inte
rn
r
Sc
a
v
mmer
s WooCo
avaS
SS J
GC
ipt
o
Ro
ts
ts Ico
cript Roo
ation
oast SE
O Twitt
er Fa
e HT
scap
k
n
I
n
Moo
Ico
erplate Co
ML5 Boil
GP
ss L
ESS
a Sa
SV
trap
s
tionali
t e r na
VG
CS
aS
av
J
S
crip
cebo
ok S c
oast SEO Twitte
he m
r Faceb
a Sa
ook S
gle GPL Bo
ss L
chem
otstrap
Yo
a
S
V
S
G
ass
as
CSS
J av a
L ES
tS
Scrip
SG
EO
t Ro
PL
Tw
ot s
Bo
I co
itt
Mo
er
on
Fa
Ink
ce
sc
bo
ap
ok
e
HT
Sc
he
ma
Sa
ss
LES
SG
PL B
ootstr
ap SVG
CSS
L5
M
aSc
o ok S
Faceb
r
e
t
t
i
w
EO T
oast S
ogle Y
ra
p
Compas
atio
e In
merc
Com
Woo
s
s
a
p
CS
S
Ja
PL
Bo
va
Ja
S J av
G CS
V
S
p
LB
oo
tst
TML5 Boilerplate
pS
tra
s
t
o
S
CS
Tw
tern
erce In
as WooComm
Ic
EO
tS
em
tr a
ts
oo
eb
ch
kS
eH
Ro
o
c
Fa
as
Yo
e
l
g
p
sca
nk
nI
pt
Ic
o
ebo
Yoast S
EO Twitter Fac
Build the best WordPress sites
as
Ro
ots
O
st SE
Google Yoa
Getting started
Com
p
pe
HT
ML
5
rplate
Bootstrap SVG CSS JavaScript Roots IcoMoon Inksc

a
tion
lisa
na
o
i
t
a
ern
iInt
sat
oots Ic
cript R
a Sas
Schem
e ss
Acc
a
ty S
ibili
ss
ks
In
M
oo
n
Ico
S
va
M
Ico
oo
B
TML5
a
tstr
oo
B
L
GP
SG
LE S
SV
in multilingual
web development
http://shannon-smith.ca
Image Mike Brennan
is art editor of .net
Ja
va
twitter.com/mike_
brennan01
ile
Bo
te
rpla
Sc
rip
tR
oo
ts
M
Ico
nk
c ri
pt
Ic
oM
ap
sc
rip
o
LB
GP
L5
TM
H
e
L5
e HTM
scap
Ink
oon
te Com
pass Wo
oots Ic
oMoon Inkscape HTML5 Boilerpl
LESS GPL Bootstrap C

ompass WooComme
rce Roots IcoMoon Ink
scape HT
aScript Roots IcoMoon Inkscape HTML5 Boilerplate Compas WooCommerce Internati

onalisation Accessibility Sass LESS GPL
SVG CSS Jav
Boots
the founder of Caf Noir
Ja
va
S
nI
oo
co M
SS
ili
sib
Shannon Smith presents four ways

to improve your WordPress site using
the latest development techniques
company that specialises
CS
S
ts
oo
tR
at
L
ss
Sa
i on
Build the best

WordPress
sites
a boutique web design
nte
s
oot
ce R
mer
m
o
ooC
as s W
Comp
p
a
r
t
s
t
oo
S GPL B
Sass LES
ipt R
CS
S
eI
lis
es
cc
nA
tio
rap
ootst
PL B
Words Shannon Smith is
5B
TML
pe H
as
mp
Co
llate
p
r
le
i
rc
me
om
oC
o
sW
na
tio
r na
alis
erpla
B o il
Bootstrap
LESS GPL
SV
ca
s
on Ink
IIcoMo
erplate Compass WooCommerce Internationalisation Accessibility Sass
rap
mp
ate Co
5 Boilerpl
nkscape HTML
tra
ts
ESS GPL Boo
tion
rna
Inte
e
c
r
e
mm
ooCo
ass W
Sc
va
Ja
(www.cafenoirdesign.com),
SV
ssibility Sass L
nalisation Acce
merce Internatio
mpass WooCom
o
C
e
t
a
l
p
oiler
on I
vaScript Roots IcoMo
S S Ja
C
VG
pS
ape HTML5 Boil

oMoon Inksc
SG
PL
Bo
ots
t
Build the best WordPress sites
SS
Ja
tR
rip
ts
oo
H
ape
ksc
n In
ibility
ation Access
Internationalis
WooCommerce
s
s
a
p
m
o
C
e
t
HTML5 Boilerpla
Design (@cafenoirdesign)
Getting started
PL Bootstrap SVG CSS JavaScript Rootts
strap Compass Inkscape

GPL Boot
ss LESS
ility Sa
b
i
s
s
e
n Acc
oo
tst
ra
Ro
ots
ava
Sc
rip
t
CSS
J
p SV G
SG
PL
GPL Bootstra
G PL
SS
LE
SS
Sc
bo o k
e
e
c
a
nkscap
er F
oon I
M
o
witt
Ic
o ts
Ro
t
p
c ri
aS
LE S
M
HT
Bo
LE
nali
natio
Bo
ots
tra
tstr
ap S
VG CSS JavaScript Roots IcoMoon Inkscape HTML5 B
oile
oo
LB
GP
SS
LE
ss
ss
Sa
a
he m
Sa
pe
ca
L5
m
Co
te
pla
r
le
me
om
oC
o
sW
pa
R oo
ts Ic
WordPress is the most commonly used

online publishing platform on the
planet. Millions of people view billions
of WordPress pages every month. It used to
be that many of those pages were on smaller
blogs, but WordPress is becoming a more and
more sophisticated tool and, with more complex
demands, developers are bringing some of the
most up-to-date development techniques to
WordPress sites. Well look at four of them.
01 Use structured data
Tim Berners-Lee once said, I have a dream

for the web [in which computers] become capable
of analysing all the data on the web. Structured
data, including microdata, is one way of providing
the context that machines, including search
oMoon
Inkscape HTML5 Boilerplate
engines, need to analyse all the web content that

we produce. Microdata is the newest form of
structured data in wide use. Its essentially a set
of metatags introduced with HTML5 that provide
context to search engines.
Google has been promoting structured
data as an effective SEO strategy and built a
Structured Data Testing Tool (www.google.com/
webmasters/tools/richsnippets). You can find ways
to tag various types of data, including addresses,
products, places and events on the Schema.org
(http://schema.org) website. One of the easiest
ways to add structured data to your sites is with
the Yoast SEO plug-in (http://yoast.com/wordpress/
seo). The plug-in allows you to add Google
authorship data, Twitter Cards (https://dev.
twitter.com/docs/cards) and Facebook Open
L
ility HTM
ccessib
ation A
s
li
a
n
o
ternati
erce In
s Comm
Compas
ate Compass Comme

5 Boilerpl
t
crip
vaS
om
oon Ink
s IcoM
t
o
o
R
m er
ce I
nter
na
scape HTML5 Boilerp

l at e C
omp
Getting started
Build the best
tiona
ass G
NU PH
WordPress
P
lisatio
n Acc
essibilit
y
Lsites
ocalisation GlotPress
Roots IcoMoon Inkscape HTML5 Boilerplate Multilingual
vaScript
CSS Ja
VG
ress S and frameworks
tPThemes
o
l
G
n
satio
Ported frameworks and themes

WP-Foundation
The ZURB Foundation framework was
developed for prototyping responsive designs
across a variety of devices. WP-Foundation
(http://320press.com/themes/wp-foundation)
is Foundation in a WordPress theme: its a
mobile-first design tool that incorporates a
flexible grid and the newer, lighter JavaScript
library Zepto (http://zeptojs.com) instead of
jQuery. Its also Sass-ready.
Underscores
Brought to you by Automattic (http://
automattic.com), Underscores (http://
underscores.me) is an ultra-minimal starter
theme designed to give you a thousand-hour
headstart developing your next site. This
website even allows you to customise your
files before you download them.
Roots
The Roots theme (http://roots.io) uses
Bootstrap, HTML5 Boilerplate, ARIA roles and
microformats all in a single framework that
works with Grunt and LESS. It also minifies
and concatenates CSS and JavaScript for you.
Bones
Bones (http://themble.com/bones) is a
WordPress theme for developers built around
the HTML5 Boilerplate. Mobile-first and
responsive, it comes loaded with LESS, Sass,
custom post types and custom Dashboard
functions.
Skeleton
Based on the minimalist Skeleton framework,
this theme (http://themes.simplethemes.com/
skeleton/) aims to help you build simple,
uncluttered, useable as well as mobile-friendly
WordPress sites.
Schema creator The Schema Creator plug-in allows you to

add microdata to your posts and pages quickly
From within Genericond allows you to use the Genericons

icon font set from within WordPress
Graph (https://developers.facebook.com/
docs/opengraph) data just by filling in a
few fields. Other plug-ins exist for more specific
functions, like adding structured data to event and
real estate listings, or to recipes.
Another good plug-in is the Schema Creator
plug-in (http://wordpress.org/plugins/schemacreator). It allows you to insert Schema.org
microdata directly into WordPress pages and posts.
Thirteen theme (http://twentythirteendemo.

wordpress.com).
Genericons are vector icons embedded in a web
font. Theyre free and, because theyre licensed
under the GPL (General Public Licence), you can
use them in commercial projects. The set comes
with Sass and LESS syntax examples. The download
includes an OTF version, but run the set through
the Webfont Generator at FontSquirrel (http://
www.fontsquirrel.com/tools/webfont-generator)
for better cross-device compatibility.
Structured data and themes

All WordPress sites have some structured data that
comes from the core installation, for example, in
RSS feeds. A few frameworks like Roots (http://
roots.io) include microformats in the template
files. But often, to add structured data to your site,
Open-source icon fonts and licensing

Most open-source fonts are licensed under the SIL
Open Font Licence, which is GPL-compatible. Font
Awesome (http://fortawesome.github.io/Font-
Plug-ins exist for more specific functions,

like adding structured data to event and
real estate listings, or to recipes
you will need to add the necessary code to your
template files. One of the best places to do this
is in post type template files in combination with
custom meta boxes.
02
Use icon fonts
The folks at Automattic (http://automattic.

com) recently released Genericons (http://
genericons.com) as part of the new Twenty
Awesome), the icon font bundled with the Twitter

Bootstrap framework, is one. Iconic (https://github.
com/somerandomdude/Iconic) and Entypo (http://
entypo.com) are others. There are more available
at Font Squirrel (www.fontsquirrel.com). However,
some open-source fonts are also released under
other licences.
If youre building a custom theme for a client,
the licence probably doesnt matter, but if you
Boilerstrap
Boilerstrap (http://getboilerstrap.com) is an
open-source WordPress template based on
Twenty Twelve that comes with Bootstrap,
Font Awesome icons, and more.
Unported frameworks
HTML KickStart
This framework (www.99lime.com/elements),
which bills itself as ultraLean HTML5, CSS
and JavaScript building blocks for rapid
website production hasnt yet been ported to
a WordPress theme, but its so lean that it
could easily be integrated into a number of
starter themes.
Gravity
A Sass-based framework (http://
gravityframework.com) designed to build
powerful and easy-to-maintain HTML5
websites. Its designed for rapid prototyping,
but hasnt yet been ported to WordPress.
Genericons Genericons contains 94 embedded vector icons. Its licensed under the GNU General Public License (GPL) and
can be used with CSS effects to create user interface elements that are compatible across a range of devices
Schema Sass LESS GPL Bootstrap SVG CS

S J av
r Facebook
e
t
t
i
w
T
O
aSc
st SE
a
o
ript
Y
e
l
oog
Ro
G
a
t
a
Getting
started
Build
the
best
WordPress
sites
ots
D
S JavaScript Roots IcoMoon Inksc
S
C
G
V
S
p
a
r
t
s
t
o
ape HTM
Bo
L5 Bo
ilerpl
at
Accessible WordPress sites
Icon font plug-ins and services

Is there a plug-in? Yes! Genericond (http://
wordpress.org/plugins/genericond/) allows you to
use the Genericons font with shortcodes. There are
also a number of plug-ins that will let you use Font
Awesome with shortcodes.
If you only want a few icons, Fontello (http://
fontello.com) is an online service that will generate
a custom bundle of icons from some of the most
commonly used icon fonts.
Of course, if you cant find what you need,
you can always generate your own icon font.
Inkscape (http://inkscape.org), the open-source
vector graphics tool, has a SVG font editor that
will let you turn vector graphics into a font for
free. Theres even an icon font starter template
available (https://github.com/Heydon/CommunityIcon-Font). There are also a number of online tools
available, like IcoMoon (http://icomoon.io), to
make the whole process easier.
03
Accessibility team
The WordPress project now has an accessibility
team (http://make.wordpress.org/accessibility)
which is working to make the WordPress core
more accessible.
The team has made suggestions for
improvements to the WordPress UI and has been
submitting tickets to help get changes into
WordPress 3.6 and 3.7. The team is compiling a
list of resources and testing tools (http://make.
wordpress.org/accessibility/useful-tools/) as well
as planning coding and styling guidelines for
accessible sites, a formal outreach effort for
developers, and working on a global accessibility
statement for WordPress.
Accessibility plug-ins
The WordPress Theme Review Team is the group

that tests and approves the themes that make it
into the official directory. At the moment, if you
look in the official WordPress theme directory
and search for accessibility, only three themes
come up in the search results. However, the
group has published a set of guidelines (http://
The main plug-in used to increase accessibility is

the WP Accessibility plug-in. The plug-in adds
common accessibility features to most themes
and corrects the most common accessibility
issues at the same time. For example, it adds the
post titles to more links to make them more
useful for people using screen readers.
There are also a number of other accessibility
plug-ins (http://wordpress.org/plugins/tags/
accessibility) in the official WordPress repository.
Official accessibility The official WordPress accessibility

group is setting objectives and looking for members
WP plug-in The WP Accessibility Plugin adds

accessibility features to most themes
Official theme accessibility audit
mm
er
ce
Use Bootstrap with WordPress
The Bootstrap framework (http://

getbootstrap.com) bills itself as a sleek, intuitive
and powerful frontend framework for faster and
easier web development. It includes UI elements,
several responsive layouts, utilises LESS, CSS and
icon fonts, and includes a responsive grid. Its also
a favourite with startups looking for a quick way to
prototype. So why add WordPress? Easy. To make
the process even faster.
If you just want the CSS and JS libraries, you
can easily use the WordPress Twitter Bootstrap CSS
plug-in with an existing theme (http://wordpress.
org/plugins/wordpress-bootstrap-css). There are
a number of Bootstrap themes that have been
developed for WordPress. WordPress Bootstrap
(http://320press.com/wpbs) includes Bootstrap
as well as the additional layouts available as
Bootswatch themes (http://bootswatch.com). It
also includes shortcodes, page templates and
sidebars. BootstrapWP (http://bootstrapwp.
rachelbaker.me) is another. Prefer Sass over LESS?
You can find a WordPress theme for that too called
Sass WordPress Bootstrap (http://noahbass.com/
sass-wordpress-bootstrap).
Roots (http://roots.io) is another WordPress
Bootstrap theme, although its designed as a
minimally styled starter theme that includes
Bootstrap, HTML5 Boilerplate, ARIA roles and

microformats. It also works with a number of
preprocessors including LESS, LESS with pure CSS,
Sass and Compass. It works with Gravity Forms and
WooCommerce, the leading form and ecommerce
plug-ins for WordPress. Roots has already been
internationalised for at least 23 languages, too.
04 Create multilingual sites
Why only speak to a few people when

you can speak to the world? Most of the world
population uses the internet in a language other
than English. WordPress itself is already available
in over 76 languages (http://codex.wordpress.org/
WordPress_in_Your_Language). To get started,
all you need to do is download the language files
for the language you want and add them to your
WordPress installation. If the language you

require isnt available, there are teams working
on supporting even more, and community
participation is encouraged.
Internationalise WordPress themes

and plug-ins
The default themes, like Twenty Twelve and
Twenty Thirteen have already been translated
into a number of languages that makes them
great starter themes. However, if you want
to develop a new theme thats ready for the
world, internationalising WordPress themes isnt
especially difficult.
Internationalisation (I18n) is simply the
process of making an application, or in this
case a theme, ready for translation.
In
rn
want to submit a theme to the official WordPress

Theme Directory (http://wordpress.org/themes/),
or sell it commercially, you need to stay clear of
fonts that are not GPL-compatible. Find a partial
list of compatible licences and icon fonts (http://
make.wordpress.org/themes/guidelines/guidelinesresources/) on the WordPress.org website.
make.wordpress.org/themes/guidelines/
guidelines-accessibility) that any developer
should be able to incorporate into a theme with
minimal effort. For example, developers are
advised to include informative alt text, to
prevent repetition of link text (such as the
default Read more links), to check colour
contrast and take several other measures. The
idea is to make themes easier to use for people
with visual impairments as well as for those
using text readers and keyboard navigation.
The WordPress codex has additional
information (http://codex.wordpress.org/
Accessibility) along with some examples. The
review guidelines are an optional step in the
official theme accessibility audit for themes
submitted to the WordPress.org theme
repository. Its probably best to think of this as a
standardised process to ensure your theme has
bare-bones accessibility.
Themes submitted to the directory that pass
the audit will get an accessibility-ready tag that
will help people find those themes. The
accessibility audit is currently a draft proposal.
te
Twitter Bootstrap An open-source framework designed for

fast and consistent website development
Is your WordPress site accessible? There are

several reasons to make sure that it is. The more
people that can access your great content, the
better. There are legal requirements for some
organisations and government websites. An
accessible site can be great for search engine
optimization, and some accessibility measures
just make websites easier to use for everyone.
Building accessible WordPress sites doesnt
have to be difficult, but many people arent sure
where to even begin.
t
crip
vaS
om
oon Ink
s IcoM
t
o
o
R
scape HTML5 Boilerp

l at e C
omp
Getting started
SVG
t
n Glo
satio
m er
ce I
nter
na
Build the best
tiona
ass G
NU PH
WordPress
P
lisatio
n Acc
essibilit
y
Lsites
ocalisation GlotPress
Roots IcoMoon Inkscape HTML5 Boilerplate Multilingual
vaScript
CSS Ja
Starter theme Roots is based on HTML5 Boilerplate
WordPress uses the open-source GNU

gettext framework to prepare special files
for translation purposes. As a theme developer,
you need to do three things. First, assign a text
domain to your theme and load it in your function.
php file. Use the following syntax:
<?php load_theme_
textdomain( $domain, $path ) ?>
WordPress-defined PHP functions

Next, wrap any text in your theme in WordPressdefined PHP functions. There are a couple of
different ways to wrap the text depending on
whether you are wrapping plain text (use _e($text_
message) in that case), or text that will be passed
to another function (use __($text_message) for
that text).
There is some information on which to use in
the WordPress Codex (http://codex.wordpress.org/
I18n_for_WordPress_Developers), but this is the
basic syntax:
Internationalisation purposes Plain text strings from the 404 error page are wrapped in WordPress-defined PHP functions
<?php $translated_text = __( 'text_

message', 'domain' ); ?>
Its also possible to generate phrases that use
placeholders, that use different values for singular
most common is using the open-source application

Poedit (www.poedit.net). There is also a plug-in
called Codestyling Localization plug-in (http://
wordpress.org/plugins/codestyling-localization)
that will help create this file very easily.
WordPress uses the open-source GNU

gettext framework to prepare special
files for translation purposes
and plural words, and to add context information
for translators.
Finally, you need to generate a POT (Portable
Object Template) file for your theme. This file
contains a list of all the bits of text in a theme or
plug-in that need to be translated and includes
every message passed into a __() or _e() function.
This file can be generated in several ways, but the
Thats it! The same general rules apply to

internationalising plug-ins, though these can
be quite complex and may require more careful
wrapping of text.
Translate themes and plug-ins

Localisation (L10n) includes all the steps needed to
actually translate a theme or plug-in. As long as a
Getting started with preprocessors and WordPress

CSS preprocessors are tools designed to make
CSS authoring more efficient. They allow you
to speed up your development by using nested
rules with CSS selectors and mixins. Mixins allow
you to treat CSS selectors as variables, where
properties can be extended to other selectors.
Using preprocessors means fewer lines of code
and less repetition. Preprocessors compile the
code you write into a standard CSS stylesheet,
which can also be minified at the same time.
There are several preprocessors. LESS (http://
lesscss.org) and Sass (http://sass-lang.com) are
the most widely used. Others include Stylus
(http://learnboost.github.io/stylus).
Compass (http://compass-style.org) and Sass
syntax SCSS are also useful.
the syntax for the two is quite similar. Compass is

a framework for Sass that makes it easier to use.
Once you have chosen a preprocessor and have
the syntax down, its time to find an app so that
you can start creating some code. Of course both
LESS and Sass can be used without a nice
graphical interface, but why not make it easy?
and Compass that works across various platforms.

Prepros (http://alphapixels.com/prepros/) is an
app that works with many preprocessor file types.
The most widely used apps seem to be CodeKit
(http://incident57.com/codekit/) for Macs and
LiveReload (http://livereload.com) for Windows.
The easiest interface
Here are some further useful links:
Which one should I use?
You can also use any number of online tools as a

preprocessor, but probably you will prefer to have
a dedicated app. Compass.app (http://compass.
handlino.com) is a menu-bar-only app for Sass
If you work in a development team, your team

has probably already decided for you. If not, you
should probably try LESS and Sass. In any case,
10
Both LESS and Sass can be used in the CSS editor

on WordPress.com, which comes with the Jetpack
plug-in (http://wordpress.org/plugins/jetpack) for
self-hosted blogs. Just change the Preprocessor
option when editing your stylesheets within the
WordPress Dashboard.
Choosing an app
More information
l Getting Started with Sass (http://alistapart.
com/article/getting-started-with-sass)
l Using the LESS CSS Preprocessor for Smarter
Style Sheets (http://coding.smashingmagazine.
com/2010/12/06/using-the-less-css-preprocessorfor-smarter-style-sheets)
l HOW TO: Get Started With the COMPASS CSS
Framework (http://mashable.com/2011/06/14/
compass-css-guide)
l Setting Up CodeKit for Sass (http://netm.ag/
unmatched-247)
Schema Sass LESS GPL Bootstrap SVG CS

S J av
r Facebook
e
t
t
i
w
T
O
aSc
st SE
a
o
ript
Y
e
l
oog
Ro
G
a
t
a
Getting
started
Build
the
best
WordPress
sites
ots
D
S JavaScript Roots IcoMoon Inksc
S
C
G
V
S
p
a
r
t
s
t
o
ape HTM
Bo
L5 Bo
ilerpl
ate C
o mp
Resources
ass
W
From structured data and using icon fontsoo
toC
o
using Twitter Bootstrap and accessibility tips, mm
er
here are my top resources to help you
ce
improve your WordPress sites, including
In
te
official guidelines and useful articles:
rn
General resources
l WordPress theme review
(http://codex.wordpress.org/Theme_Review)
l WordPress plug-in guidelines
(http://wordpress.org/plugins/about/
guidelines/)
Text domain The Twenty Twelve WordPress theme uses the text domain twentytwelve, declared in the functions.php file
POT file has already been created, a translator can

use a tool like Poedit to go in and translate each
string of text in a theme. As long as the text in is
phrases, translators can easily account for changes
in word order and other linguistic particularities.
The translated text is saved in new, languagespecific PO (Portable Object) file. Its also good
practice to generate a MO (Machine Object) file for
each language. This is simply a copy of a PO file
written in binary that allows for faster processing.
GlotPress (http://glotpress.org) is a new web
tool based on WordPress thats currently being
developed to facilitate the translation process. Its
installed online (or locally), just like WordPress,
and is currently being used to help translate parts
of WordPress.com. Its intended for collaborative
translation, but single translators can use it as well.
It helps users translate POT files and create PO and
MO files. Its currently available for download at
http://glotpress.trac.wordpress.org.
The first option is to use the WordPress

Multilingual Plugin (http://wpml.org), which is a
commercial plug-in that allows you to run a site
that operates in many languages at once, including
the theme and plug-ins as well as basic core
functionality. It works with most complex plug-ins
including Gravity Forms (www.gravityforms.com)
and various ecommerce plug-ins.
The other option is to use the Multisite
functionality built into WordPress to run multiple
WordPress installations for each language, all
using the same theme and plug-ins. This option is
faster and more stable, but may not have all the
functions you need.
There are several other plug-ins that could be
used to build a multilingual site. However, they
tend to be unsupported, unproven, or lacking in
the functionality compared to the two solutions
described here.
Unilingual WordPress sites
From structured data to open-source icon fonts

and Bootstrap, hopefully youve now learnt a few
new methods and techniques to apply to your
development to help ensure you create better,
futureproof WordPress sites.
Having a unilingual site in a language other than

English is a great start, but many people want to
offer content in multiple languages at once. There
are currently two preferred ways of doing this.
Result: a futureproofed site
Using structured data

l Getting started with structured data,
Google (http://googlewebmastercentral.
blogspot.ca/2013/05/getting-started-withstructured-data.html)
l Getting started with schema.org, Schema.
org (http://schema.org/docs/gs.html)
Using icon fonts
l How to turn your icons into a web font,
Web Designer Depot (http://www.
webdesignerdepot.com/2013/04/how-to-turnyour-icons-into-a-web-font/)
l HTML for Icon Font Usage, CSS-Tricks
(http://css-tricks.com/html-for-icon-fontusage/)
l Making, Using and Bulletproofing Icon
Fonts, Viget (http://netm.ag/viget-247)
Using Twitter Bootstrap
l How to use Twitter Bootstrap to Create a
Responsive Website Design, Oneextrapixel
(http://www.onextrapixel.com/2012/11/12/
how-to-use-twitter-bootstrap-to-create-aresponsive-website-design/)
l Free Printable Twitter Bootstrap Wireframe
Template, Dribbble (http://dribbble.com/
shots/873373-Free-Printable-Twitter-BootstrapWireframe-Template)
l The Big Badass List of 319 Useful Twitter
Bootstrap Resources, Bootstrap Hero
(http://bootstraphero.com/the-big-badass-listof-twitter-bootstrap-resources)
Multilingual sites
l Build a multilingual site with WordPress,
Shannon Smith, Creative Bloq (www.
creativebloq.com/wordpress/buildmultilingual-site-wordpress-9112795)
l Installing and using GlotPress,
WP Unknown (http://wpunknown.com/
installing-and-using-glotpress/)
l Translating with Poedit, Translating
WordPress, WordPress.org
(http://codex.wordpress.org/Translating_
WordPress#Translating_With_Poedit)
Accessibility
l The Accessibility Project
(http://a11yproject.com)
l Web Content Accessibility Guidelines 2.0
Checklist (www.w3.org/TR/2006/
WD-WCAG20-20060427/appendixB.html)
POT file A translator can view a POT file and translate each string of text using software like Poedit (www.poedit.net)
Getting started
WordPress resources
11 awesome
WordPress resources
Want to get started in WordPress? Or simply hone your skills? Then check out these
high-quality online resources, where you'll find loads of advice and inspiration
The web is a wonderful thing, brimming with
resources and tutorials for people wanting to
learn about the world of WordPress. But,
sometimes, too much choice can be confusing,
so we've picked 10 top sites that will help you
get to grips with the open source CMS.
WordPress.org
01 What
better place to learn about
WordPress than from its own site and the
developers behind it? At WordPress.org you
can not only download the software but learn
the history behind the CMS, get access to
popular themes and plug-ins and of course,
engage in active forums with other dedicated
WordPress users.
02 Learn.WordPress.com
Similarly, if you're looking for a checklist
and step-by-step approach to getting started
with WordPress, check out the excellent learn.
wordpress.com. Guiding you through common
tasks from the basics to learning the lingo
it's an essential bookmark.
03 CreativeBloq.com
Creative Bloq and our own site at net.
creativebloq.com has a wealth of WordPress
advice, news and tutorials. Aimed at users of
all skill levels, here you can learn all sorts of
WordPress skills, as well as read advice and
information on the software from industry
experts (and it's constantly updated!).
04 WooThemes.com
Back in 2008, three WordPress
enthusiasts, from three different countries met
online and decided to set up theme and plugin provider WooThemes. Now an international
team of designers and developers catering for
hundreds of thousands of users, WooThemes
12
offers a huge library of feature rich themes, and

a suite of plug-ins to extend and enhance your
WordPress experience.
05 Lynda.com
Husband and wife Bruce Heavin and Lynda
Weinman have built up an extensive tutorial
video library over the past few years. And
WordPress has it's own dedicated section,
offering a wealth of training in the software for
all skill levels. You can follow some of the
tutorials on Lynda for free, but for full access a
paid subscription is required.
06 WPBeginner.com
WPBeginner is a brilliant resource for
anyone who's interested in WordPress but isn't
quite sure where to start. Founded in July 2009
All of the sites listed

here will bring you
expert WordPress
techniques, tips,
tutorials and advice
by Syed Balkhi, the main goal of this site is to
provide quality tips, tricks, hacks, and other
WordPress resources that enable WordPress
beginners to improve their sites.
WPKube.com
07 WPKube
is a WordPress resource site
which focuses on a wide scope of WordPressrelated areas and publishes compilations of
themes, plug-ins, tools, tutorials on WordPress
optimisation, and more. The site has recently

added a new section, WordPress Coupons,
which collects together coupon codes for
various WordPress-related products.
digwp.com
08 Set
up by Chris Coyier and Jeff Starr,
Digging into WordPress (or digwp.com) is the
blogging home for the upcoming book of the
same name. Books and blogs are the perfect
complement to each other when it comes to
learning web technologies. The blog is there
for searchability, quick tips, and copy and
pastable code, whilst the book can be there
for your reference.
net.tutsplus.com
09 Nettuts+
is a site aimed at web developers
and designers offering tutorials and articles on
technologies, skills and techniques to improve
how you design and build websites. Also
covering HTML, CSS, JavaScript, CMS, PHP
and Ruby on Rails, the site offers an array of
WordPress tutorials, tips and tricks.
10 Smashingmagazine.com
This addition to the list was a complete
no-brainer, as Smashing Magazine is known as
one of the best resources for tutorials and tips
for web designers. Founded in September 2006,
the online magazine delivers lots of useful and
authoritative articles on WordPress.
Speckyboy.com
11 Speckyboy
design magazine is a web and
graphic design blog run by Paul Andrew.
Launched in October 2007, the site has since
grown into a brilliant resource for designers.
With over 500 articles on WordPress training,
tricks and advice, you're sure to find something
useful here. l
Getting started
01
02
04
WordPress resources
03
05
07
06
09
08
10
11
Getting started
Free WordPress plug-ins
01
02
The 10 best
(free) WP
plug-ins for
designers
Arguably, one of the reasons WordPress is so
popular is that it happily supports templating
and plug-ins, making it highly flexible and
customisable to suit different website needs.
This flexibility, alongside the platforms huge
popularity, means theres thousands of free
plug-ins available on the web.
That's the good news. The bad news is that
sorting the wheat from the chaff can be a real
challenge. So here, weve chosen 10 of the best
WordPress plug-ins to add functionality to your
website and as the icing on the cake, they are
all available free of charge!
BuddyPress
01 BuddyPress
is a social media platform in a
box. Building on top of the WordPress system, it
allows you to register, maintain a list of friends,
@message other users, create groups of
common interests and host your own forums.
BuddyPress itself is also extendable, enabling
you to further increase its functionality to
include document upload, integration with other
social media streams, create membership-only
websites and much more. If youre looking for a
user-led or project-based system that encourages
collaboration and interaction between visitors to
your site, BuddyPress is an ideal solution. We
think it is one of, if not the, best WordPress
plug-ins for social networking.
www.buddypress.org
14
WP e-Commerce
02 WP
e-Commerce turns your WordPress
website into a fully featured ecommerce store,
complete with built-in connection to (and
integration with) many major Payment Service
Providers (PSPs).
The system enables you to upload products
into different categories and offers customers a
shopping cart system to enable them to build an
order. It handles calculation of shipping, payment
capture and all the email confirmations
associated with buying and selling on the web.
The plug-in is free, and while you can buy
additional upgrades to the system, its open
source just like WordPress so its perfectly
possible to extend the carts functionality yourself.
It's for these reasons that many champion it as
the best WordPress plugin for ecommerce.
www.wordpress.org/plugins/wp-e-commerce
03 IfVimeography
youre a film-maker or someone who
handles video on a regular basis, youll know it
can be tricky to display your film content
beautifully without resorting to manual hacks
around embedding content. Vimeo users can take
advantage of the Vimeography WordPress plug-in
to create and display fantastic-looking galleries of
video content all orientated around displaying
nicely within your WordPress site. Multiple
03
04
05
galleries of content can be created, and are
inserted into posts or pages using the standard
WordPress shortcode system.
Vimeography is arguably the best WordPress
plug-in for video. However, it's important to note
that it only supports content from Vimeo. And
that's not likely to change soon because the
developer believes Vimeo is the best platform to
displaying portfolio-quality content (ie without
advertising or unnecessary platform branding).
www.vimeography.com
jQuery Audio Player

04 HTML5
We'd consider this the best WordPress
plugin for creating an audio player that sits within
your site. The player supports multiple or single
tracks, complete with playlists and is inserted into
your content with the familiar shortcode system.
HTML5 is used as the default delivery method,
but to ensure backwards compatibility it also
features a Flash-based fallback. As a consequence,
this will happily work across desktop and mobile
devices without breaking a sweat!
The plug-in also connects with FetchApp,
enabling you to sell your audio tracks directly from
your site. This makes it ideal for musicians or
podcasters who want a reliable way to deliver their
audio through their website.
www.wordpress.org/plugins/html5-jqueryaudio-player
Getting started
07
Free WordPress plug-ins
10
06
08
09
SlideDeck
05 SlideDeck
enables you to create customised
or a business with different opening hours. Its very

simple, but extremely functional and useful if your
content strategy changes daily.
www.wordpress.org/plugins/seven-days
08 JetPack
JetPack brings some of the functionality of
slideshows that are displayed in a content slider on

your WordPress site. Each slide can be filled with
text, images, video and social media stream feeds.
Content supported includes Twitter feeds, YouTube,
Pinterest, Flickr and more. The slides are presented
through a template system, referred to by SlideDeck
as a 'lens', which can be configured to match your
07 WPTouch
If you're looking for a mobile skin solution,
WPTouch is probably the best WordPress plug-in
The flexibility of WordPress, alongside the

platforms huge popularity, means theres
thousands of free plug-ins available
site design. The premium version of the plug-in
adds more lenses, but the free version enables you
to develop your own.
www.slidedeck.com
Days
06 Seven
This is a handy WordPress plug-in that
enables you to activate or deactivate widgets used
on your site based on the day of the week. This is
ideal for any scenario where the day is important to
the content being displayed, such as a restaurant
that wants to show daily specials or changes in
menus, a school displaying timetable information
for your needs. In short, it enables you to serve a

different theme to users on mobile devices such as
an iPhone or Android phone, providing a userfriendly and small-screen-optimised version of your
content instead of forcing mobile users to
navigate a desktop-orientated design.
Installation is very simple indeed, and the plug-in
can be configured to match your overall design
aesthetic relatively easily. This is a great quick-fix
solution if you dont initially have the time to get
into designing your own mobile theme (but we'd
suggest you do eventually put the effort into
making your site responsive).
www.wordpress.org/plugins/wptouch
WordPress hosted blogs to self-hosted WordPress

installations. The features are wide and varied but
include cloud-hosted stats for your site, email
subscriptions to your site, a built-in URL shortener
service, social-network-based commenting and an
enhanced gallery system.
www.wordpress.org/plugins/jetpack
Price Table
09 Want
to create interactive pricing tables?
Then this is the plug-in for you. It offers a simple
drag-and-drop solution, inserting the tables directly
into your page content.
The system offers a straightforward solution to
editing price table content, without the need to
understand the underlying HTML and CSS making
it ideal for websites being maintained by nontechnical users.
www.wordpress.org/plugins/pricing-table
NextGen Gallery
10 This
plug-in offers a great deal of flexibility in
creating gallery content, including the ability to
watermark images, create slideshows, organise
content into albums and use different themes for
display of your images. Top stuff.
www.wordpress.org/plugins/nextgen-gallery l
Expert tips
Secure your WordPress site
12 ways to secure
your WordPress site
Some simple housekeeping can make a world of difference to the likelihood of your
site getting hacked. Kim Crawley security author for InfoSec Institute has the tricks.
WordPress is the most popular content
management system (CMS) on the web.
Developed with PHP, and powered by
mySQL databases, WordPress is used by
an astonishing 8.5 per cent of all websites.
Web-delivered malware and website
cracking are becoming increasingly common,
and with such a large percentage of web
content using WordPress as a CMS, any security
vulnerabilities in WordPress' coding or
framework could affect millions of websites.
In this article we are going to look at how
you can best protect your WordPress site from
malware and cracking, without having an
in-depth knowledge of security.
your overall
01 Audit
workstation security
First of all, make sure that any and all PCs and
web servers you use are kept properly secure.
Make sure you're running the most recent
release of your favourite web browser, and
make sure that it's set to automatically patch.
Do the same with your antivirus software and
operating systems. Ensure all authentication
vectors you use have secure passwords, which
are changed every so often. Scan your PCs and
servers for malware, frequently. Make sure you

use proper firewalls at the OS level, at the
router level and at the ISP level, if at all possible.
Any security holes outside of WordPress, in
software and hardware you use with it, can
affect the CMS itself. It'd be sad to create a really
secure password for your WordPress admin
account, only to find out a keystroke logger
defeated all of your effort!
sure you keep

02 Make
WordPress updated
The next step is to make sure you always have
the most recent version of WordPress installed.
Updating WordPress is relatively quick and easy,
and can be done through the WordPress panel
in your web browser so there's no real
excuses. If the most recent version of WordPress
is incompatible with the versions of PHP and
mySQL installed in your web server or web host,
we strongly recommend you go through the
effort to upgrade those to ensure your version
of WordPress is up to date. It will be worth the
extra time and hassle. Obsolete versions of
WordPress will no longer get security patches,
much the same way that older operating
systems see support expiring.
bugs and
03 Report
vulnerabilities
If you ever discover security vulnerabilities on
your own, do the community a favour by sending
a detailed email to security@wordpress.org. If the
vulnerability is in a plug-in instead, email
plugins@wordpress.org. You would want other
web developers to report loopholes that may
affect your website, so treat others as you would
like to be treated! Just avoid writing about those
newly discovered vulnerabilities on the web or on
social networking sites, so that information
doesn't fall into the wrong hands.
Check for exploits

04 Every
so often, run the Exploit Scanner
plug-in to check for indications of malicious
activity. Exploit Scanner doesn't directly repair any
issues, but it will leave you a detailed log to
troubleshoot with. If you ever suspect cracking,
that's the time to run that plug-in, as well.
custom HTML
05 Disable
when possible
WordPress can use custom HTML for various
functions. If that isn't absolutely necessary for the
form and function of your website, you may want
to disable unfiltered HTML by adding the
following to your wp-config.php file:
define( 'DISALLOW_UNFILTERED_HTML', true );
Don't look brand new

06 Remove
all default posts and comments. If
malicious hackers find those on your site, it may
indicate to them you have a new WordPress site,
and brand new sites are often easier to crack into.
It's easier to crack into a WordPress site when
you know which version is installed, so be sure to
hide it. This is done in two places. The first is the
meta generator tag in your template. That's found
in wp-content/{name of your WordPress theme}/
header.php. Look for something like and
remove it. The other element is in your RSS feed.
Open up wp-includes/general-template.php and
look around line 1858. Find:
Make sure you keep WordPress updated (see tip 2).
16
function the_generator( $type ) {

echo apply_filters('the_generator', get_the_
generator($type), $type) . "\n";
}
Expert tips
Reporting bugs and vulnerabilities can benefit both you and the WordPress community (see tip 3).
Running Exploit Scanner every so often checks for indications of malicious activity (see tip 4).
Make sure a hash is applied next to the echo

command so that it looks like this:
function the_generator( $type ) {
#echo apply_filters('the_generator', get_the_
generator($type), $type) . "\n";
}
Also, remove all instances of 'Powered by
WordPress' footers, as crackers use the phrase to
upgrade WordPress without those files, as all

upgrades contain those scripts.
Next, change a couple of the file and directory
name defaults. Go to Settings > Miscellaneous in
your admin console and change the names of
wp-content/directory and wp-comments-post.php.
Make sure to change the template URL within the
template and wp-comments-post.php accordingly,
to maintain the function of your site.
It's easier to crack into a WordPress

site when you know which version is
installed, so be sure to hide it
find sites to crack into via search engines. That
footer also indicates new WordPress sites, or sites
developed by newbies, whether or not that
actually applies to you.
It's a very good idea to delete /wp-admin/
install.php and /wp-admin/upgrade.php after
every WordPress installation or upgrade. After
all, those scripts are only ever used during the
installation and upgrade processes, and aren't
used in the everyday development of your site.
Don't worry though as you can, of course, still
indexes
07 Hide
Be sure to disable public access to indexes
whenever possible. If people can find the files in
your site's wp-content/plugins/ directory without
being authenticated, it's a lot easier to crack into
your site through plug-in vulnerabilities. If your
web server runs Apache or another OS that uses
.htaccess files, it's simple to do. Find the .htaccess
configuration file in your site's main directory.
That's the directory that contains index.php. Insert
the text Options -Indexes anywhere in the file.
Alternatively, if you can't alter a .htaccess file,

upload an index.html file into your main directory.
You could make that web page have a similar look
to your site's PHP web pages and insert a
hyperlink to your index.php file if you'd like. But
obviously, in a site that uses WordPress as a CMS,
visitors won't see your index.html file unless they
type a specific path to it in their web browser
address bar. Alternatively, you could make your
index.html file a 0 byte placeholder.
In case your web server ever has problems
computing PHP files, it's crucial to block
directories that are only accessed by your server. If
the PHP source code is ever displayed in a visitor's
web browser rather than the web page it's
supposed to render, they may find database
credentials or in depth information about the
PHP/mySQL programming of your site. Your site's
wp-includes/ directory is the most important one
to block. Find the .htaccess file there and insert:
RewriteRule ^(wp-includes)\/.*$ ./ [NC,R=301,L]
If there are or will be subdirectories of
wp-includes/, insert the following code for each
one in the same .htaccess configuration file:
RewriteRule ^(wp-includes|subdirectory-namehere)\/.*$ ./ [NC,R=301,L]
Expert tips
Whatever you do, make sure you back up (see below).
it up!
08 Back
WP-DB Manager is excellent for backing up
your entire WordPress site, but it'll also alert you
to mySQL vulnerabilities and let you know when
parts of your database are publicly accessible.
Always be sure to properly back up the content
of your site. In a worst-case scenario, at least
keeping backups will allow you to easily restore
your site. With WP-DB Manager, you could also
use Online Backup for WordPress. The back up
the plug-in creates can be stored in your email
inbox or on your PC, or you can use the 100MB
of free storage space on developer Backup
Technology's own secure servers.
security plug-ins
09 Install
As well as the Exploit Scanner plug-in (see
tip 4) which you should run on your site every so
often to check for vulnerabilities and cracking
attempts, there are a number of other WordPress
plug-ins we recommend you install and use.
When used properly, they can harden your
WordPress site effectively.
With Exploit Scanner, you can also use WP
Security Scan. Not only will the plug-in look for
vulnerabilities, but it'll also give you specific
advice for blocking them.
To prevent cracks to find your login credentials,
be sure to encrypt your login packets with Login
Encryption. That plug-in uses both DEA and RSA
algorithms for enhanced security.
plug-ins from
10 Installing
the admin panel
Configure the Limit Login Attempts plug-in to
prevent brute-force attacks. With the plug-in, you
can set a maximum number of login attempts,
and also set the duration of lockouts in-between.
The User Locker plug-in works in a similar way.
With it, you can set a maximum number of invalid
authentication attempts before the account is
then locked.
There's also an excellent plug-in for securing
your entire admin panel. Try the Admin SSL Secure
Plug-in to encrypt your panel with SSL.
18
Installing other useful plug-ins can help protect your site further (see tip 11).
Another strong plug-in for securing your site's

login is Chap Secure Login. By using this, all of
your login credentials, except for usernames,
will be encrypted with the Chap protocol and
SHA-256 algorithm.
As mentioned before, it's an excellent idea to
change as many WordPress defaults as possible.
With Stealth Login, you can create custom URLs
for logging in and out of your site.
Block Bad Queries will try to block malicious
queries made to your site. It looks for eval( or
"base64" in request URIs, and also looks for
request strings that are suspiciously long.
With Bad Behavior, you can also use User Spam

Remover. It will remove unused user accounts on
your site. You can set an age threshold to those
settings and you can also configure a whitelist.
finally putting
12 And
everything together
Keeping your WordPress site hardened for
security is an ongoing responsibility, just like all
other areas of IT and development security. You
can't just configure a number of settings or
programs and then forget about it. Your
WordPress site should certainly be on a schedule
Your WordPress site should be on a

schedule for malware and vulnerability
scanning, and logs should be kept
An anti-malware shield can be applied to your
entire site with the AntiVirus plug-in, as well.
It looks for viruses, worms, rootkits, and other
forms of malware. Be sure to keep it updated!
And remember: when you choose and install
plug-ins on your site, also be sure to only install
plug-ins offered through your admin panel or
under the plug-in directory at WordPress.org.
Outside plug-ins may be secure, but it's best to
mitigate the risk. Officially released plug-ins are
audited for security and scanned for malware.
other useful plug-ins

11 Install
WordPress sites are frequently targeted by
spambots. You can spend a lot of time going
through comments on your site, and the majority
of your pending comments may have to be
marked as spam. Imagine what those spambots
can do to your site, beyond giving you a lot of
work! For that reason, we recommend installing
Bad Behavior on your site. By logging your site's
HTTP requests, you can better troubleshoot
spambot issues. Furthermore, the plug-in will
limit access to your site when a bot hits it.
for malware and vulnerability scanning, and logs

should be kept and analysed.
By keeping your WordPress site secure, you're
doing your part to prevent malicious activity that
could not only harm websites, but also web
servers and user's PCs, tablets and smartphone
devices. Think about it!
As WordPress is such a common CMS on the
web, knowledge about the design and
configuration of the console is readily available,
and certain hacks could work on perhaps millions
of websites.
Fortunately, knowledge about WordPress
security is abundant, for much the same reasons.
In the ongoing maintenance of your website
and web server, always be security minded. You
can then have proper control over your web
content, and do your part to make the internet
a better place.
Kim Crawley is a contributor to InfoSec Institute.
InfoSec Institute is a security training company
specialising in ethical hacking courses. See www.
infosecinstitute.com for more.
ON SALE NOW!
The SEO Handbook

AVAILABLE
IN PRINT AND
DIGITAL
Getting started
Stay on trend
WordPress co-founder
on keeping up-to-date
WordPress co-founder Mike Little loves what designers do with the software
he helped invent. But, he tells David Crookes, they must keep up-to-date
Mike Little
Job Director, architect, developer, consultant
Company Zed1.com Limited
Web www.mikelittle.org
Mike Little is waiting for us. He is wearing a

T-shirt with a 'W' in a round circle on it. It's the
unmistakable 'W' that stands for WordPress,
the publishing platform which revolutionised
blogging and has influenced many a mainstream
site. Little was the co-founder of WordPress
and is proud of his creation. Then again, who
wouldn't be?
The Wall Street Journal, Ford, Sony, even BBC
America he reels off. They all run their sites on
WordPress. I didn't even realise BBC America did
that because in the UK they prefer homegrown
software and don't like off-the-shelf tools. But they
run the Top Gear blog in the UK using WordPress
it's the only one. I don't know how they got away
with that.
Little has an easy-going manner and he is
passionate about WordPress and the world wide
web. He describes WordPress's hobbyist
beginnings that grew out of a blogging platform
called b2 and how he offered to help Matt
Mullenweg keep it going when its creator Michel
Valdrighi disappeared. That led to WordPress
launching in May 2003, which Little was actively
helping to develop until 2005.
Little went freelance in 2008 and set up
zed1.com, a web development and consultancy
company. He says WordPress development is his
world, a hundred per cent, that's all I do. It means
he's built up a lot of knowledge when it comes to
the glaring mistakes developers make when using
this most popular of platforms. Best of all, he's
willing to share them with us.
Dark alleys
WordPress is so changeable and developers work
to better it each year. Yet Little senses some
developers are failing to keep up and are sticking
to the tried-and-tested methods, even when it's
unnecessary. This causes them to fall into a trap of
getting something to work without having done it
20
the right way. And that can lead them down some
really dark alleys, Little says.
He highlights themes that create an extra box on
the Posts screen to add a URL of a thumbnail
image. WordPress has supported Featured Images
for several years now and I still see new themes
with that kind of functionality added to them.
Thats just ridiculous, he says.
He finds it a folly that a user, in such cases, has
to upload images separately before copying and
pasting the URL or the uploaded image and
sticking it in a box just to create a thumbnail for a
post. Yet people are still doing that because it was
the only way four or five years ago and theyve not
bothered to learn anything better.
So is that down to laziness? I think its laziness,
he answers. To me its a nonprofessional approach
to software development. I say that without
necessarily meaning it to be a bad thing because I
think most people working with WordPress are not
professional developers so they havent got that
discipline of trying to understand the right way to
do things. But, because what theyve done still
works, they carry on.
Skeleton themes
Little recommends that people who are building
and designing sites with WordPress look at some
of the skeleton themes that are out there such as
underscores rather than create a theme from
scratch. Or they can look at some of the
frameworks like Genesis Framework by StudioPress.
Using these mean you dont have to get into a lot
of PHP code and you can concentrate on the
styling and so on because theres a lot of
functionality straight out of the box.
For those who do want to create their own
themes, though, he has some specific advice: be
cautious about adding too much functionality to
the theme itself. One of the things that Im seeing
regularly, especially now Im doing training classes
Getting started
and really meeting a lot of people who are new to

WordPress, is that they get a theme thats really
attractive and does all these super fancy things as
well as looks nice. But, at some point, they may
decide on a different look and, because theres so
much functionality that has nothing to do with
what the site looks like in the theme, when
someone switches to another theme, half the stuff
disappears. That could be the sliders, all the
portfolio info theyve put in there. And that
shouldnt be happening; that should be separate.
Concentrate on looks
Therefore, it's important for designers and theme
developers to concentrate less on packing stuff into
a template and more on the look of the theme and
the different platforms, whether that's mobile,
tablet or computer.
If an article
on how to do
something is
more than a year
old, its out of date
Yes, add features to do with presenting the
data in nice ways and all the rest of it, he says,
but dont be adding shopping baskets or contact
phones or anything like that in a theme. Such stuff
belongs to plug-in territory. It may seem like a
good idea to tie somebody into your theme but
you dont want to annoy them. The next time you
bring out an even better theme, your existing
customers cant change to it because theyve
invested so much in the original one.
The key, he says, is to follow the general
guidelines for WordPress themes, making sure that
up-to-date API calls are used. By doing things the
WordPress way, plug-ins can be used to make the
theme behave differently and, in ways, that may

not have initially occurred to the theme developer.
So dont even put the URL of your CSS file in
your header, he says. You add it interactively with
code using an API function so that somebody can
override it or somebody can plug in and put it on a
CDN. From there on, somebody can create a child
theme and serve their own CSS file.
Exemplar themes
He points to the rich wealth of APIs and support
for building themes as well as plug-ins within
WordPress and says its just about getting to know
the software and learn what it can do. WordPress
default themes, he adds, are written to be
exemplar themes. They try and do everything
exactly the right way.
They even do some things that might be a little
over the top but to demonstrate the functionality
thats available in WordPress, Little says. It lets
you learn how to build these things and how to
compose so youre not duplicating code. It pulls all
your different pages, your different archives from
your loop files and all that kind of stuff.
But one of the problems is that developers will
inevitably lack the time to learn. With lots of clients
and a busy day, it can be difficult to keep up.
Maybe theyre more concerned with producing
new and prettier themes, he says. But you then
see the situation where you cant install a plug-in
that does something different with your post
thumbnails because youre not using the standard
WordPress API and so the plug-in cant change the
way your theme behaves. I think thats a shame.
It disappoints people because theyve picked a
theme that actually restricts what they can do.
I've seen themes where you install one of the
well-known SEO plug-ins, for example, and half
the stuff doesnt work because the theme is not
doing the right thing. Then people think the
plug-in is no good.
Genesis framework
Little comes at WordPress from a development
perspective and he likes to use the Genesis
Stay on trend
Framework because it allows the building of

themes with minimal coding (Your functions.php
might have 20 or 30 lines of code in it and youve
got a completely unique theme with all this
functionality built in). He tells us he needed to
add a menu slot in the footer of a website he was
developing and all it took was six or seven lines in
functions.php. I love the fact that that was so
easy, he says.
Ive actually customised off-the-shelf StudioPress
themes for sites literally with a plug-in, he says.
Ive not even bothered creating a child theme or
modifying one of their child themes. Just a few
lines of code in a plug-in to modify the way the site
behaves and an extra widget area, or moving a
menu from below the header to above the header,
just with a couple of lines of code.
"I think frameworks like that are really, really
good. I like some of the WooThemes themes but I
dont like the fact the backend interface doesnt
work the same way as the rest of WordPress works.
I know there are lots of other good theme
companies out there. Ultimately, getting better
with WordPress is all a matter of exploring,
learning and keeping on top of things. Do that and
you're on your way.
Don't trust the web

Mike Little has a special warning when it comes to
fishing around online for tutorials and resources
on WordPress: be picky.
He says a lot of good and useful articles, advice
and examples are now outdated because
WordPress has moved on.
In a lot of cases, you dont have to write all this
code out: theres one function call you can make,
and yet those resources are still out there and still
featuring prominently in the searches.
"I have a rule of thumb that says if an article on
how to do something in WordPress is more than a
year old, its probably out of date and, if its more
than two years old, its definitely out of date. And if
its got code and its more than a year old, it is
absolutely out of date. Its only half tongue-incheek, that. l
VISIT THE WEBSITE

www.myfavouritemagazines.co.uk/net
SUBSCRIBE TO
GREAT REASONS TO SUBSCRIBE
l
Every issue delivered to your door,

days before it hits the shops
Stay updated on new web technologies
Exclusive access to the worlds

leading experts
Its the perfect gift for
SAVE
Hand-picked jobs by Creative Bloq, the UKs fastest growing design community
JOBS SEARCH
Graphic design jobs |
Receive weekly jobs alerts, straight to your inbox

Search all recruiters directly
Get expert career advice tailored for designers and developers
Search at http://jobs.creativebloq.com
From the makers of
Tips
Expert tips:
WordPress up to date
01 Keep
WordPress is extremely popular so
malicious individuals put a lot more work
into understanding its vulnerabilities and
weaknesses. This doesnt make WordPress less
secure than other CMSes, just more likely to be
attacked. Keeping your WordPress version up
to date will ensure you have the most current
security patches and leave you less vulnerable
to attack.
!= Administrator
02 Admin
The default Administrator Level User
is named admin. Set admin to Subscriber
Level access and create a new user with
Administrator Level access. People infiltrating
your account as a subscriber wont be able to
do much harm. Do not post content under an
Administrator account to further limit peoples
ability to guess your Administrator username.
Prefix
03 Table
In general, its important to remain as
unpredictable as possible. Continue to do
this by renaming your table prefix. By default
WordPress database tables start with wp_.
Since everyone knows this, its one less thing
to have to guess when hacking a database.
Change the table prefix in the wp-config file or
during installation.
content architecture
04 Define
Its important to plan out your content
architecture before filling WordPress with
posts and pages. For a blog I prefer to use
categories as general taxonomies such as
Articles, Tutorials, Interviews and so on. Then
I utilise tags to get more specific and tie posts
together. Example tags would be WordPress,
HTML5, and so on.
Since we can easily add Tags in menus the user
wouldnt necessarily recognise the difference
but now your content is better organised in
the admin.
and subscribing
05 Searching
Did you know that you can search within
specific categories? Did you know that you
can subscribe to specific categories as well?
If you plan out your site accordingly its easy
to turn categories into individual blogs using
this feature. http://domain.com/category/
articles/?s=responsive will query only posts in
the Articles category for the term responsive.
Also, http://domain.com/category/articles/
feed will produce an RSS feed just for the
Articles category.
Meet the community Find a WordPress event taking place near you and get involved in the community
developers arent gods

06 All
Some are but most, well, arent. Thats
okay, the beautiful thing about WordPress is
that we can all contribute by designing themes,
developing plug-ins and even submitting patches
to the core. Getting a plug-in in the directory
isnt all that difficult and with 20,000 of them
there we need to make sure we arent assuming
that they are all gems. Do your research on the
developer and the plug-in or theme before you
activate it.
lets play nice!

07 Plug-ins,
As stated above plug-ins arent always
perfectly developed or utilising best practices
set forth by WordPress. When youre activating
new plug-ins, make sure you do them one by
one. Dont just activate them all and hope for
the best. Activate a plug-in, test your site,
activate a plug-in, test your site. This way if
something goes wrong you know which plug-in
wasnt playing nice.
support
08 Get
WordPress has an amazing community
of developers across the world. There are also
a great deal of resources including the codex,
support forums and email lists. To get the best
support as fast as possible, make sure youre
posting your needs in the right place and
accurately describing the problem you have.
Dont assume that anyone knows anything

about your system and dont post basic
questions in advanced forums.
involved
09 Get
The best way for WordPress to continue to
grow and get better is for all of us to contribute
to it. There are loads of ways to do that, from
beta testing to supporting others to simply
showing up at meetups. I love the discussion
forums and I read almost all of the hackers
emails. I also co-organise a local WordPress
meetup and push others to attend events as
much as possible. There are so many ways to
get involved.
up your site
10 Back
Last but not least BACK UP YOUR SITE!
Sorry, I really didnt mean to yell, but its so easy
and so many people dont do it. I shouldnt
say no one, I think three people actually do it.
There are countless plug-ins and export tools
built right into WordPress and most hosting
companies offer backup solutions. Find a way
to back up, automate it and keep the data safe.
Otherwise you could regret it!
Words: Jesse Friedman. Jesse is a professor
at Johnson and Wales University, and director
of web interface and development at Astonish
jesserfriedman.com
Getting started
Avoiding common problems
20 WordPress myths,
mistakes & misgivings
Jesse Friedman, author of the Web Designer's Guide to WordPress, helps you avoid common
WordPress mistakes and takes a look at some of the common myths and misgivings
WordPress has made huge strides in the last
year or two to become a fully-fledged CMS.
With these changes comes the need to shed
old myths about WordPress. As we move to
become a ubiquitous CMS available to the
masses, misconceptions and preconceived
notions of bugs and flaws from the past can
cloud our judgement of the future. Hopefully
alleviating our thoughts of following 20
mistakes, myths and misgivings we can all
realise the full potential of this CMS and work
to make it better.
These mistakes can lead to problems in
security and slow the development process.
Remember to do these steps, so your
WordPress sites are faster, better planned and
more secure.
MISTAKES
an administrator
01 Using
to post content
Its very important to make sure youre
disguising your WordPress installation as much
as possible. Predictability is not your friend and
posting content under an administrator account
is predictable.
Guessing your username isnt too hard if its
displayed on your post think about it! Instead
reserve your administrator level account for
backend work only. Create a contributor
account to use as your author.
You can still write the content as an author
just assign the post to the contributor before
you post it live. It's these simple things that
really help security.
admin
02 Keeping
an administrator
This mistake has been made for years and
continues to get made. By default WordPress
creates the admin username and assigns it to a
administrator level. This is obviously predictable
and one way of making it easier for a hacker to
get into your site. If you combine this with
creating a poor password youre just asking to
be hacked.
wp_ as
03 Keeping
the table prefix
Being unpredictable is the best way to avoid
being hacked. Are you seeing a trend yet? Since
WordPress powers 75 million sites its common
knowledge that tables by default start with
wp_ which means if you dont change the
table prefix, your Site Options table is wp_
options. Its very easy to change your table
prefix and can be done during installation either
manually in the wp-config.php file or during
auto installation in the form fields. Choose
something difficult and hard to guess, especially
since you wont have to think about it again in
the future.
replacing salts and keys

04 Not
If you dont know about salts and keys,
they are in the wp-config.php file and used to
authenticate logged in users and their machines.
In the past it was easy for a hacker to steal your
logged in session cookies and pretend to be
you. These pass-phrases make it nearly
impossible for hackers to do this. Think it might
be hard to generate those salts? Well, youd be
Change your table prefix to increase security (see tip 03)
26
right except WordPress has a web page that does

it for you. Visit this link https://api.wordpress.org/
secret-key/1.1/salt/ and copy everything into your
wp-config.php file.
backing up
05 Not
Weve covered four mistakes that you can
avoid in an effort to be more secure. But no
system on earth is totally secure so there if the
worst happens and you get hacked make sure
youre ready.
There are countless ways to restore. Bluehost
now offers full restoration points on a daily, weekly
and monthly basis. You can also use VaultPress
which backs up everything from your content to
your themes and more. VaultPress
is not free but its the absolute best solution
out there. Heres another great free solution that
you can try: BackWPup.
many categories, not

06 Too
enough tags
Site architecture, organisation and planning is so
important. It affects everything from SEO to load
times and visitor time on site.
Whether youre a designer, developer,
blogger or whatever you can take the time to
evaluate your content and really think out your
site organisation.
A common misconception is that you can only
add categories to the main nav. This isnt true (go
to appearance -> menus -> screen options and
turn on posts and tags).
In content-heavy sites Ill use popular tags and
even posts in the main nav. Try to limit categories
and use tags to bring things together.
Getting started
Being hacked via a predictable admin login is incredibly common (see tip 09)
the cache
07 Forgetting
If you arent using caching or dont know
what it is youre giving up precious seconds of
load time. WordPress is a dynamic database driven
CMS, which means visitors to your site prompt the
server to request info from your database, then it
uses that content to populate your site creating
HTML markup. Caching enables you to save that
finalised HTML markup and server that to visitors
Jake Goldman giving his insightful talk at WordCamp Boston 2013 (see tip 10)
right away. This means if your WordPress version

is behind its probably vulnerable. Its so easy to
update WordPress with a single click you
shouldnt worry about the time it takes. I know a
common myth is that WordPress will break when
you update, but it is so backwards compatible its
not even funny. Its very unlikely that your site will
break on update but you should test to make sure
if youre at all nervous.
Being unpredictable is the best way to

avoid being hacked. Stay secure by
keeping login details difficult to guess
skipping the need to go to the database every
time. This increases efficiency and decreases load
time. There are two great free plug-ins used for
caching W3 Total Cache and WP Super Cache. If
youre looking for managed hosting and dont
want to worry about all this, WP Engine provides
the best built-in caching Ive seen and makes your
life extremely easy.
WordPress updates
08 Ignoring
I get it, its hard to remember to update all
your sites to the newest version of WordPress. In a
bit we are going to talk about managing multiple
sites at a time. WordPress core developers and
contributors work tirelessly to improve WordPress,
its UI, efficiency and speed, but when a bug or
vulnerability is found it usually gets an update
MYTHS
Some things still being said about WordPress just
arent true. Thousands of developers around the
world are working to make WordPress better and
bring it into the new web future. So its a bit
frustrating to build a 20,000 page directory that is
secure, fast, reliable and easily editable, then hear
a client tell us Isnt WordPress just for blogging?
isnt secure
09 WordPress
Secure is a relative term, and no system is
perfect. Heres the deal, WordPress is powering 10
times more sites than most CMSs combined. If
youre a hacker, are you going to spend your time
learning the vulnerabilities of less common CMSs
or the one that will reap the most results? This

doesnt mean that WordPress is less secure, just
more likely to get attacked.
In my experience the absolute number one
reason why a site is able to get hacked is because
of poor password creation. WordPress can be the
most secure CMS on the planet but if you have a
really simple login you are still going to get
hacked. If you create difficult passwords, take the
security measures I stated in the Mistakes section,
keep WordPress up to date youre far less likely to
ever get hacked.
isn't a CMS
10 WordPress
The source of this myth comes from that fact
that WordPress was, and indeed still is, the
number one choice for hosting blogs. Its easy to
look at WordPress as the kid brother of CMSs that
have been long established solutions for hosting
big websites.
There is a long standing joke between
WordPress developers when we get asked by
clients or novices, can WordPress do... and we
answer, yes before they finish the question. The
reason is because WordPress is so extensible and
even before WordPress 2.9 and 3.0 (which brought
us the biggest advancements towards becoming a
full fledged CMS) we were still doing complex
websites, directories, ecommerce stores and more.
Jake Goldman from 10up (www.10up.com) gave
a talk at WordCamp Boston in October 2013 about
Enterprise Level WordPress Solutions. It was a
fantastic talk and it hit the nail right on the head.
WordPress is fast, reliable, secure and powerful,
Getting started
WordPress is not just for amateur bloggers massive global companies use it, too (see tip 12)
there is no reason it cant do what whatever youre

dreaming up.
WordPress is only for blogging

11 We
just touched on this a bit but its worth
mentioning again. WordPress is still commonly
known as the blogging platform. I tend to blame
WordPress for not moving forward fast enough
on this.
It was only recently that WordPress.org started
referring to WordPress as web software you can
use to create a beautiful website or blog.
However, despite all this, you still get references
to WordPress as blogging software as seen in
Matt Mullenwegs bio for WordCamp San Fran. Its
technically a marketing issue and one that will
eventually be fixed over time. The important thing
you need to realise is that WordPress power is
only limited by the person developing for it.
companies and budgets

12 Big
dont go with WordPress
This is another myth built on the premise that
WordPress is a blogging platform. However, this
particular one is no longer true. One specific area
where we see a huge growth in the use of
WordPress is universities. This is fantastic because

school websites usually come with complex
functionality and a need to manage and organise
a great deal of integrated content.
You can also check out WordPress VIP (http://
vip.wordpress.com) for a list of some of the
biggest companies in the world using and relying
on WordPress every minute of every day.
doesnt
13 WordPress
provide support
WordPress is open source how can it provide
support? Well, if youre looking for an 800
number, youre right, it doesnt exist.
However, the idea that you cant get support
for a problem, bug or issue is just not true. No
matter what level user or developer you are, there
is a way to get answers to your questions.
The forums at WordPress.org are amazing, the
codex has fantastic documentation and social
networks play an important role too. My favourite
place to get support is from the email lists. There
are hackers, plug-ins and other email lists which
you can subscribe to. Then when you have an
issue, you email the group. Typically I get answers
to rather complex problems in minutes. This is also
a great way for you to share your knowledge and

experience and give back.
I cant support WordPress

14 Speaking
of giving back Another common
myth is that you cant contribute to making
WordPress better. There are so many ways to
contribute that I had to dedicate an entire chapter
to it in my book, Web Designer's Guide to
WordPress. In chapter 20 I cover ways of
contributing from donating to your favourite
plugin, to writing in the codex, translating the
WordPress admin, to building themes and plug-ins
and so much more. There are so many ways to
give back and the more we do the better
WordPress will get.
Its much too difficult to

15 manage
and maintain all my
WordPress installations
If you have a lot of clients using WordPress hosted

content in many different places, it can be really
difficult to manage all the updates from plugins,
themes and the WordPress core. There are two
solutions to this: one is a WordPress multi-site
install or network. This allows you to manage and
host all of your WordPress websites in one place.
This can get a little messy if you dont take the
time to plan everything, not to mention everything
has to be on the same server and some of your
clients may not want to move. I love WordPress
Multi-site and make a living off of it. However if
that doesnt work for you, the second option is to
get a brilliant little plugin called ManageWP. This
extra piece of code keeps track of all of your
WordPress installations and what maintenance
they need all in one place.
Misgivings
Even though founder Matt Mullenweg's bio says WordPress is a blogging platform, it's not just that!
28
Ever built a beautiful website that delivers a

fantastic user experience and a client says yeah,
thats all great but why is the logo so small?
Getting started
You can easily manage all your WordPress websites at once (see tip 15)
Sometimes we arent given the credit we deserve.

WordPress for many years has been coined the
blogging CMS.
Today WordPress is all grown up and has so
many tools and an amazing API that makes
developing for it fast and scalable that we cant
afford to exclude from being considered for bigger
web projects. Lets give credit where credit is due
and do our research on WordPress so we are at
least making an intelligent decision about whether
or not to use it.
for e-commerce
16 IWordPress
totally understand the hesitation to use
WordPress as an e-commerce system. WordPress
wasnt made to manage products and stores.
advanced web functionality but that literally

doesnt make sense. If you build your theme to be
responsive it will be.
Themify.me does a great job of developing
responsive WordPress themes and there are
hundreds more out there. I even developed a plugin that will make it very easy for user admins to
manage content and maintain responsive integrity.
cant do anything
18 WordPress
out of the box
Ive said it so many times in so many classrooms,
webinars and conferences. WordPress can do and
be anything you want it to do and be. Your
themes, in the end, output HTML markup. The
only thing that is different between WordPress and
Most enterprise level companies have this

feeling that they have to spend money on
a system or software in order to use it
Heres a little secret: the CMSs and systems that
were made specifically for creating online stores
arent very good. Its true, there is no system that
is as good at ecommerce as WordPress is at
blogging or websites.
That isnt enough of a reason to go with
WordPress and if it were 2010 Id probably suggest
that you dont use WordPress for an online store
unless you were selling a few products or tickets
to an event. That being said though, things have
moved on a lot in the past few years and today,
there are several plug-ins and frameworks that
transform WordPress into a reliable and easy to
use e-commerce solution. Take a look at Jigoshop
or WP e-Commerce, and I think youll be
pleasantly surprised.
cant be responsive
17 WordPress
Im not even sure I understand this one. I
hear all the time that WordPress cant support
a static site is that WordPress sites get their

content from a database. Its your job to use
WordPress to convert database content into HTML
markup. Once its markup you can have fun with
jQuery, backbone.js or even turn your site into a
mobile app. I have a friend, Aaron Ware, who runs
Linchpin Agency (www.linchpinagency.com) which
actually made a WordPress powered Flash website.
Dont let misconceptions or indeed any
preconceptions prevent you from making
awesome and powerful websites.
is open-source
19 IWordPress
get why big companies are nervous about
this. However, just because I understand it doesnt
mean I agree. Most enterprise level companies
have this feeling that they have to spend money
on a system or software in order to use it. If its
free, it isnt good enough or doesnt provide
enough support.
Heres the thing, the money youd spend on a

proprietary system can go to hiring one of the
thousands or WordPress developers to support
and build your system.
One major benefit of open-source is that you
have a community of people working to improve
and fix the product rather than waiting on a team
of people to do it. Not to mention you can always
do it yourself.
plug-ins
20 WordPress
arent perfect
You should hesitate before putting someone elses
code into your system. The fact is that not all
WordPress plug-ins are created equal. There are
bugs, outdated code and flat-out problems. You
should do your due diligence and make sure what
youre using is well done, supported and highly
rated. When youre in the WordPress Plug-in
Repository make sure the plug-ins youre looking
at have a good amount of downloads, have been
recently updated, supports your version of
WordPress and in the end read through some
code to make sure stuff isnt broken.
You can always Google for reviews of these
plug-ins as well so that you can get a range of
opinions and user experiences of them before
trying them yourself.
I fear I may have just touched the top of the
iceberg with only 20 but this is an opportunity
for you to speak up and share your ideas.
WordPress is doing just fine and is moving
along nicely. However, it would be nice to see
WordPress used to its fullest potential more and
more. All too often these days I hear myself
saying Why arent you just using WordPress for
this project? and I hear back Umm... I dont
know. Can WordPress do what I want?
It's on us to help the world understand what
WordPress really can be. So by keeping in mind
the tips here I am sure that you will be able to
maximise your content and the full potential of
WordPress. Go out and create! l
Feature
30
Feature
Futureproof
WordPress
Want to limit user admin damage and prevent your responsive

WordPress theme from breaking? Follow Jesse Friedmans top tips
Words Jesse Friedman

(@professor) is a veteran
WordPress developer,
author and speaker. Hes
director of web interface
and development at
Astonish, a professor
atJohnson and Wales
University, and
co-ordinates two
WordPress meetups
andWordCamps.
http://jes.se.com
Image Mike Chipperfield

is co-founder and creative
director of Brighton-based
collective Magictorch.
www.magictorch.com
In 2012, I wrote an article called

Responsive Design with WordPress
(see May 2012s issue 227 of net). Back
then it made sense to cover specific strategies
in responsive web design (RWD), and how they
should be modified to work with WordPress.
Since then, so much has changed and I want
to readdress things from a fresh perspective.
The technology behind RWD has grown up.
WordPress is more accepting of these strategies,
and tools for learning RWD and WP are more
accessible. Instead of how to do RWD, I want to
discuss maintaining your sites integrity.
WordPress has, for several reasons, become
the worlds most widely used CMS. But many of
those reasons, (including ease of use, access,
availability of themes and plug-ins and cost)
make themes susceptible to strain or breakage.
Youre likely turning your responsive WP theme
over to someone with no knowledge of either
RWD or WordPress theming. If you dont take
measures to protect the integrity of your theme,
it will only be a matter of time before it breaks.
There are RWD rules you must follow for it
to be defined as such. Here the word integrity
comes in. You can design a beautifully fluid and

responsive theme. An hour later, in the hands of
a user admin, you have a mess. Its your job as a
developer to both educate and provide resources
toprotect your user admins from themselves.
Responsive design process

I have spoken on responsive and WordPress all over
the country for nearly two years now, and the
number one question I get is: How should I change
my design and development process for WordPress?
So its fitting we start here but you should be
prepared for an anticlimatic response.
The answer is: You shouldnt. WordPress is a
CMS or web framework that connects a database
of content to a frontend website. Whether youre
designing and building for a static website or a
WordPress theme, you still need to consider user
experience, style, design, cross browser and device
compatibility, compliancy and more. The only real
difference in the process comes from the additional
tools and resources that WordPress gives you.
The best designs, whether for WP, another CMS,
or none at all, start with a technologyagnostic view. Begin by designing the best
Feature
Everything we are talking about is a result

of the user admin. I define a user admin
as someone who uses the theme or plugin youve developed to power their site.
Theyre not necessarily the websites users,
but are the administrators of the WordPress
installation and, in that sense, your users.
I often equate user admins to kids freaking
out on Christmas morning. Youve been
working with them to create a website for
months. Theyve signed off on wireframes,
designs and now are being handed the keys
to their shiny new website. Youve probably
done a great job of getting them excited, but
without the proper education theyre going to
get lost in the box the toy came in.
This applies whether youve built a custom
theme for a specific client, or youre selling
one to the masses. Either way, the chances
of the user admin knowing enough about
WordPress development or RWD to keep
themselves out of trouble is unlikely.
What percentage of the 65 million websites
powered by WordPress, are run by people
who know HTML, CSS, RWD strategy, mobile
first or even the idea of fluid images?
I was once told that, of the millions of
people who swing a golf club, and call
themselves golfers, only one per cent will ever
be handicap ranked. Of those, only one per
cent will ever even have a shot at the PGA.
Thats one per cent of one per cent. I like to
think these numbers apply to WordPress user
admins. One per cent of one per cent will have
the skills to create, modify or deploy proper
web strategies.
Thats why it is absolutely vital we balance
a compensation for what could go wrong
with education, and resources. I also ask you
think about what is best for the masses. The
same RWD strategies you use every day may
not work for an inexperienced user admin.
However, if we can employ specific strategies
that will work, while possibly not the absolute
best practices, we will make a positive impact
on a huge amount of websites.
Not so appetising Its worth taking steps to limit user admins options for creating labyrinthine
drop-down menu structures and phone screen sizes demand creativity to get menus right
possible website you can. Incorporate all

the strategies you normally do, then see how
they fit into WordPress. I think youll be pleasantly
surprised by what WordPress can do.
If you take a look at some of the awesome
WordPress-powered sites out there, they didnt
get results by thinking linearly on a WP track. They
arrived at the best experience they could create,
then made WordPress do what they wanted.
Its also important to note that all your favourite
frameworks, tools and strategies will still work with
WordPress. This goes for anything from ZURBs
Foundation to adaptive images. The most important
takeaway is simply to not feel constrained or
confined by WordPress.
Media
Theres really one major opportunity for a user
admin to gaff up media. WordPress core developers
have made it so easy to upload, resize, modify and
insert media. The one major issue that still exists is
the inclusion of static width and height attributes.
When a user admin uploads an image and
inserts it into a post, the HTML looks a bit like this:
<a href="http://jes.se.com/inspirational/
do-more-of-what-makes-you-awesome"><img
src="http://jes.se.com/wp-content/
uploads/2013/03/20130324-220448.jpg" alt="Do
more of what makes you awesome"width="500"
height="628"class="alignnone size-full
wp-image-249" /></a>
As you can see in the above markup, there are
static width and height attributes included in the
<img> tag. The problem is, the attribute values
are based on the images actual size so if a user
admin chooses full size the image embedded can
be thousands of pixels wide. There are two steps to
solving this problem, and preventing users content
from blowing out of its containing area.
WP admin Assigning a user profile an admin role
32
1 Educate the user admin on media uploading.

Help them understand we dont need to
include the full size image every time. If theyre
comfortable, show them how to remove the

attributes via the HTML view in the post editor.
2 Put a CSS max-width class on all images, iframes
and any other media in the post content.
CSS
.post img { max-width: 100%; }
This one line of CSS will prevent the image or media
from ever being larger than the containing element.
If youre looking for a JavaScript or jQuery based
solution, here you go:
JavaScript
document.getElementById('post-image').
removeAttribute('width');
document.getElementById('post-image').
removeAttribute('height');
jQuery
$(".post img").removeAttr("width").
removeAttr("height");
This solution works well to ensure user admins arent
breaking the site with content they control. A solution
like this is not a necessary one outside the limits of a
CMS-powered site. But this is a good example of how
you must compensate for that potential error.
Menus
Navigation must be done right, or you end up with
a site that cant be traversed. User admins can have
a lot of fun with navigations, which means a lot can
go wrong too. There are several things you can and
should do to make sure menus dont run wild.
If you havent already, you should read up on
custom walkers (http://netm.ag/walkers-242). With
custom walkers you can take complete control over
the output markup of all menus on your theme.
Whether youre working on a theme for a
specific client, or building one to be released to
everyone, youre probably testing with a simple and
clear menu. Before you move on from testing, try
adding 10 main nav items, then go on to 20. Then
add drop-downs, and flyouts and then more dropdowns. If you think to yourself: No ones going to
add this many main nav items, then youre wrong.
Feature
l Dont forget to compensate for and style

WordPress generated classes (http://netm.
ag/classes-242).
l Always deliver a balance of education,
passion and empathy when working with
clients and user admins.
l Predicting how a user admin will use
your theme is tough, but you can use CSS,
JavaScript, inherit WordPress functionality
and other tools to minimise the damage.
l Try to find a balance in limiting the
freedom to make mistakes with control
to prevent them. A perfect example of
this balance is using featured images
throughout the theme.
l Use WP Mobile Detect or other device
detection solutions responsibly.
Beautiful design Quartz (http://qz.com) blurs the lines between website and app, and its all powered by WordPress
Its easy enough to set the depth parameter on

the wp_nav_menu() to prevent the overabundance
of drop-downs. Plus, you can work with a custom
walker to take further precautionary measures
(http://netm.ag/parameters-242).
Next, you want to make sure the menu looks
good in a small device. Planning menus on a large
screen is rather easy. The real challenge comes
along on tablets and phones. Most sites will keep
main nav items out in the open on tablets, maybe
adding a little extra space to allow for ease of
touch. When you get down to phone size you have
solutions just discussed is that your navigation is

hidden until a user initiates an action. For sites that
need high conversion, and push interior pages
heavily, this isnt a great solution.
One of my favourite ways of solving this is to
define an additional menu location. Menu locations
should always be defined because they allow your
menus to be agnostic to the theme. With this
additional menu location, you can define specific
abilities that only permit the navigation to feature
a small number of items, and only be present
when the main navigation is hidden.
Take a look at some of the awesome

WordPress-powered sites out there:
they didnt get results by thinking linearly
to be a little more creative with your decisions of
how to display the menu.
As I said before, the good news is that your
favourite techniques are still going to work with
WordPress. Today, there are two major solutions to
mobile navigations. The first is the triple-line menu
icon that, when pressed, reveals the menu from
either the top or the side.
The other popular choice is putting the main
nav into a drop-down and using the phones
UI to display the navigation. At Astonish, we
use SelectNav.js (http://lukaszfiszer.github.com/
selectnav.js), a simple script that does all the
heavy lifting for you.
Featured mobile menus

As I tend to do, I want to take things one step
further. The biggest challenge with both of the
Registering additional menu locations

function register_my_menus() {
register_nav_menus(
array(
'header-menu' => __( 'Header Menu' ),
'mobile-featured' => __( 'Featured Mobile
Menu' )
)
);
}
add_action( 'init', 'register_my_menus' );
Displaying featured menu
$defaults = array(
'theme_location' => 'mobile-featured',
'menu'
=> '',
'container'
=> 'div',
'container_class' => 'featured',
'container_id'
=> '',
'menu_class'
=> 'menu',
'menu_id'
=> '',
'echo'
=> true,
'fallback_cb'
=> 'wp_page_menu',
'before'
=> '',
'after'
=> '',
'link_before'
=> '',
'link_after'
=> '',
'items_wrap'
=> '<ul id="%1$s"
class="%2$s">%3$s</ul>',
'depth'
=> 0,
'walker'
=> ''
);
wp_nav_menu( $defaults );
Shortly well discuss a plug-in I wrote, which
will give you the additional ability to only call the
menu, when on a mobile device, at the server level
without the need for extra database calls, server
calls, or hiding content with JavaScript or CSS.
Featured images
Featured images are probably the most powerful
tool in a responsive toolkit for web designers.
There are two things that set them apart. First, the
image is called outside the main content, which
means that you can do anything you want with it.
Second, you can set sizes and call them by name,
which means, when a user admin uploads an image
and sets it as the featured image, WordPress will
automatically resize it based on your specifications.
Take a look at a website such as WordPresspowered Bates University (www.bates.edu). It makes
excellent use of featured images. As you go through
the site, youll find the same image used in
many different places, in many different
Breaking point Jesse Friedmans responsive robot (http://netm.ag/robot-242) provides a tragicomic reminder of why RWD needs to consider large as well as small screens
Feature
sizes. The user admin didnt have to open

Photoshop, crop and resize all these images,
then upload them.
How does this relate to responsive integrity?
Well, youre able to simply take control back.
When a user admin uploads media through the
content editor, they can do anything they want to it.
When they upload an image through the Featured
Image selector, the image now has to follow strict
guidelines youve set in place.
<?php
add_theme_support( post-thumbnails );
set_post_thumbnail_size( 50, 50, true ); // Normal
post thumbnails
add_image_size( sidebar-thumb, 260, 170, true );
add_image_size( index-thumb, 300, , true );
add_image_size( index-thumb-cropped, 300, 225,
true);
add_image_size( footer-thumb, 200, 140, true );
add_image_size( archive-thumnb, 300, 300); //
used to add featured
The above code will be set in the functions.php
of your theme. As you can see, I have five additional
thumbnail sizes. In doing so, Ive also given them a
name. So if, on the front page of your responsive
theme, the user admin has a list of the most recent
posts, using the default featured image to show
thumbnails, will pull 50x50px images. This is more
effective and efficient than grabbing and resizing
a larger image. Later, on the sidebar you can call
sidebar-thumb, an example of which is below.
Its paramount that you utilise featured images
to the fullest extent. It will allow for greater
optimisation of your site, make it far more mobileefficient, and its an easy way to take control back
over media.
<?php the_post_thumbnail( 'sidebar-thumb'); ?>
WP mobile detect
I spoke on this topic at last years WordCamp
Boston. During the talk I mentioned a PHP Class
called PHP Mobile Detect (now maintained by
Serban Ghita). With it you can detect the users
device at the server level. Right after the talk, I
converted the class into a WordPress plug-in(http://
netm.ag/detect-242), which is free to download.
Device detection isnt the solution for every
problem (and, to be frank, can be misused), but
I feel this plug-in makes an important, positive
impact for WordPress users. WP Mobile Detect is
also one more step towards truly dynamic web
environments.
Greedy graphics WP Mobile Detect (http://netm.ag/detect-242) stops full-size content gobbling data and slowing loads
Non-user initiated downloads

Remember five to seven years ago when we were
fighting the use of non-user initiated disruptions?
These were auto-playing videos and audio or popups and other annoying tactics. A non-user initiated
download is similar: you dont give users a choice.
Lets say you run a blog. On the homepage of
your site, you feature the full version of your most
recent article (without a read more link). Today,
youve decided to write an article showcasing the
top 10 infographics related to WordPress.
As a user of your site, Ive arrived ready to read
your most recent articles. Im on a bus, heading to
work, and am using my AT&T iPhone 5. I dont have
unlimited data, and my coverage can be sketchy.
Upon arriving at your site, Im now automatically
downloading 10 full size infographics, unknowingly.
Immediately, my experience is poor. Not only am
I downloading data thats eating into my plan, but
now I have to wait for the content I want to read.
WP Mobile Detect aims to solve this problem.
With simple shortcodes, you can swap the full size
infographic for a small thumbnail. You can link to
the original, presenting the user with an option.
[notdevice]<img src="FULL SIZE INFOGRAPHIC">[/
notdevice]
[phone]<a href="LINK TO FULLSIZE"><img
src="SMALL THUMBNAIL OF INFOGRAPHIC"></a>[/
phone]
This experience is far better: users arent being

taxed to view your site, and are getting the content
everyone else is. But they have the choice of how
to consume it. This is done at server level, so you
neednt worry about additional calls. WP Mobile
Detect empowers user admins to take control of the
mobile experience, stopping ads, content and files
(JavaScript and more) that arent needed loading, at
the server level via shortcodes and functions.
Mobile featured nav

Shortcodes are fun and really easy. But the plug-in
also offers a set of functions enabling you to make
the same decisions at the theme level. In the code
below Ive written a test to see if wpmd_is_phone()
returns true. If it does, the user is on a phone, and
should see the featured menu discussed earlier.
if( wpmd_is_phone() ) {
/* Show Menu */
}
The featured mobile menu isonlycalled when it
needs to be displayed, again preventing additional
server calls and unnecessarily hidden content. This
can be a really helpful and powerful way of giving
control back to the user admin not to mention
providing the user with a more unified experience.
You can use these shortcodes and functions any
time you wish to call or remove content based on
Ubiquitousness provides opportunities

WordPress powers more than 65 million websites
worldwide. In 2012, it was behind 25 per cent
of the new internet. This statistic holds true
today. Thats one in six sites, and one in four new
ones. These numbers remain consistent when
looking at the top million websites. CNN, Time,
UPS, Mashable, TechCrunch, NBC Sports, and CBS
Radio all trust WordPress to power their sites.
This information is very helpful to know
when a client says: Isnt WordPress a blogging
34
platform?. However, I find it far more powerful

when used for motivation.
Take a moment and consider that one sixth
of the internet is powered by a single CMS
thats easy to learn, open source and backed by
thousands of developers eager to shareand help.
Because WordPress is open source, its
free. But its also waiting for you to make
acontribution which you can do in a range of
different ways. So many of us owe our careers
to WordPress that it only seems right that we

all support it. I believe in this so heavily that
Idedicated an entire chapter of my book, Web
Designers Guide to WordPress, to discussing the
many ways that you can contribute to the project.
Heres the kicker: if you make a contribution to
WordPress core, youre making a change that will
affect one in six websites. Where else can your
support, your code and your contribution affect
so much at one time?
Feature
Responsive menus The main navigation for Clarke Insurance Agency (http://clarkeinsurance.com)
device. Therell be times this isnt the best solution,

but there are many reasons youd want to use it.
Having fun
With RWD, were so focused on what works, the
strategies and user testing that we often forget to
have fun. Theres so much we can do to provide a
light, happy experience for our users. This may not
be the keystone of site design, but it has its place.
Remember when Silverback (http://silverbackapp.
com) came out? It had the parallax vines hanging
UX , responsive and WordPress

Dont forget to consider the UX of responsive and
WordPress. We have an opportunity to create some
amazing experiences. For example, why not take
advantage of the extra space around your site on
large screens? On a traditional static site you might
not have extra content to use. Yet, with WordPress
we do and I rarely see it used.
Take a blog post, for example. Maximise a
page like that on a 27-inch iMac and you get a
lot of white space. What if we started putting the
WordPresss ubiquity is reliant on its ease

of use and adoption, a cycle that increases
work with less experienced user admins
from the top of the site. Did they help sell the
product? Maybe not. Did they give users an excuse
to have fun and possibly share the site? You betcha.
With responsive, we have so much to work with
that it doesnt make sense to ignore it. For example,
on my old site, I used to have a robot appear that
would talk to you when you were on a really large
screen. Never forget: RWD isntjust about mobile.
I also had fun last year creating a responsive
robot. Hes a cute little being who will hold up
your navigation, but be careful not to hurt him by
stretching the screen. You can play with and have
the code behind him at http://netm.ag/robot-242.
comments alongside the post? We all know that

readers tend to skim web content. Wouldnt it
be great to help users skim the content and the
comments at the same time?This will provide a
more engaging experience to the user and give
them the ability to learn more on the same screen.
Tools
There are two additional tools that definitely need
amention in this article. The first is JetPack, a free
plug-in now packaged with WordPress. It has a ton
of features and tools, but the one that best relates
to responsive and WordPress is JetPack Photon
Unconventional MinimalMonkey.com produces a unique and smooth experience
UX design Comments appear alongside post content
(http://jetpack.me/support/photon). Photon is
afreeCDN powered by WordPress.com. You only
need to configure this tool once, and from then on
your images will be served from WordPress.com
servers automatically. Youll still have local copies on
your server. The best part? Photon auto resizes your
images a lot like adaptive images, in order to serve
optimised images for the viewport of the device.
The second tool is another plug-in, built by the
guys at Linchpin. Its an in-dashboard responsive
page tester (http://netm.ag/tester-242) and provides
users with the ability to see what pages and posts
will look like in different devices before posting. In
the future Id like to see this as a QA measure that,
if configured in this manner, would prevent you
publishing content until tested on all window sizes.
In conclusion
There are so many tools, resources, frameworks and
testing environments to help you build a beautiful
responsive website. Converting that to a responsive
WordPress theme will not be all that challenging
especially if you read my book, Web Designers
Guide to WordPress (http://netm.ag/guide-242).
The challenge comes after you hand it to
your user admin. WordPress is a powerful CMS,
but its ubiquity is reliant on its ease of use and
adoption, a cycle that increases WordPress work
for less experienced user admins. Find a balance of
empathy, education and passion, so you can provide
the tools, resources and knowledge to maintain
your responsive WordPress themes integrity. l
Content heavy Smashingmagazine.com still maintains its responsive integrity
THE ALL-NEW
MAGAZINE IPAD EDITION

The iPad edition of net has been completely rebuilt from the
ground up as a tablet-optimised reading experience.
TRY IT
FOR FREE
TODAY!
Youll find additional imagery, exclusive audio and video content, and weve
partnered with Tuts+ Premium to bring you superb screencasts that tie in
with the practical projects in every issue. Dont miss it!
TRY IT FOR FREE TODAY WITH OUR NO-OBLIGATION 30-DAY TRIAL AT

UK: netm.ag/itunesuk-248 US: netm.ag/itunesus-248
Tutorials
WordPress techniques
Expert tutorials
Step-by-step skills to hone your WordPress techniques,
all written by leading industry experts
Contents
Create your own toolkit

How to create a WP plug-in
38

Make WordPress work for you!
42
Master The Loop

The backbone of WordPress
46
Custom post types

Expert WordPress skills
50
WordPress e-commerce
Build e-commerce into your sites
Page 62
52
User-friendly custom fields

Use Meta Boxes in WordPress
56
Multilingual WordPress
Top techniques for global sites
58

Design sites with impact!
Page 58
Page 52
62
Build a WordPress folio

Expert portfolio design skills
66
Tutorial
Create your own WP toolkit
Create your
own WP toolkit
Download
the files! >
All the files you

torial
need for this tu
http://
at
d
un
fo
be
n
ca
36
p-2
/w
.ag
netm
Matt Cohen and Scott Basgaard of WooThemes show how to create a WordPress plug-in
to enhance your custom WordPress projects, using best practices in plug-in development
Knowledge needed Basic to intermediate PHP, basic WordPress plug-in
development understanding
While our environment can play a role in how we approach the project,
here well be working specifically with built-in WordPress functionality.
Requires WordPress and a development environment (LAMP with

a text editor)
Little boxes, on the hillside
Project time 1 hour

Since its inception back in 2003, WordPress has evolved from
a blogging platform into a fully-fledged content management
system. This process of evolution has spawned a new industry
within the WordPress ecosystem, offering paid-for themes, plug-ins
and other services.
While custom development work on projects is often an ideal route,
it isnt always the most efficient in terms of getting the task done. When
using WordPress in combination with paid-for WordPress products, its often
difficult to sell the customer on the concept of: I am doing the job for you,
and am using these third-party paid-for products to do so.
In this tutorial, well be discussing how to create a unique upsell for
your customers, through a customised toolkit plug-in, to enhance your
WordPress-powered projects.
Were not in Kansas any more but where are we?
As a best practice, it is important for us to separate our code from the

paid-for products, in order to ensure smooth upgrades when new versions
are released.
For example, if we need to customise Gravity Forms on a project, well
create an additional plug-in that uses Gravity Forms hooks and filters to
do so. This may require some additional digging around and familiarising
yourself with Gravity Forms.
If youre customising a theme, wed recommend that you use a child
theme. If you are already using one of these, wed also recommend storing
your customisations in a separate plug-in. Developers often view each child
theme as an individual project but this shouldnt be the case, because the
child theme should consist purely of styling and visual adjustments to the
theme.
While this may seem obvious, it is often not taken into account during
the early stages of a projects development. This is important in order for our
toolkit to scale well across a wide array of projects.
Before diving into our toolkit, its important that we fully assess the
environment were working in. While we may not need to make
environment-based decisions on each project, the plug-ins we have in place
could help to save us time on certain projects.
On a project using paid-for products such as Canvas by WooThemes
(www.woothemes.com/products/canvas) and Gravity Forms by Rocket
Genius (www.gravityforms.com), we can instantly see that its possible for
us to leverage the power of Canvass custom hooks to display custom forms
(managed using Gravity Forms) at various points in our website.
Actions, filters and starter features
Fly high Rocket Genius (www.rocketgenius.com) is the company behind Gravity Forms,
Clean slate The flagship theme over at WooThemes, Canvas is a hugely flexible and
functional WordPress theme for creating just about any design
the popular form creation plug-in for WordPress and a great addition to your toolbox
38
Many developers arent aware of the many powerful hooks that exist in
every WordPress installation. Actions and filters can easily be shifted from a
theme to a plug-in environment. That way you can maintain a single codebase and activate that plug-in across multiple installations.
Every time the WordPress Loop runs, at least three actions are executed:
loop_start, the_post and loop_end. We can leverage these, along with
conditional tags, to display and manipulate content in any loop being
displayed on screen from within our plug-in!
Tutorial
In harmony When setting up your WordPress environment, its important to see how
you can leverage the products youre using and help them to work together
Out the box Before we begin working on the toolkit, we should make a list of the
various items wed like to include. We can refer to this as the project scope
Now that we understand what were going to be doing and how lets
geta few starter features together that we can include in our plug-in:
Expanding our toolkit
l Hide the generator meta tag in the WordPress header.

l Specify a Google Analytics ID, and an option to select whether the code
should output in the header or footer section of the website.
l Display advertising code after every X posts on archive screens.
l Perform the above without storing any data in the database or creating
settings screens within the WordPress admin.
WooDojo, a free plug-in developed by WooThemes, is a functionality

suite that enhances any WordPress-powered website with the features
that you need. While WooDojo contains many features such as fields
for inputting custom CSS and HTML code, social widgets for Twitter,
Instagram and more niche networks such as Last.FM and SoundCloud,
maintenance mode and launch pad facilities, plus a widget preview
tool, the core WooDojo product also carries with it a unique secret; its
not just for the end-user.
WooDojo has been carefully crafted with both end-users and
businessowners in mind. The core provides a unique settings API
(constructed on top of the Settings API bundled into the WordPress
core codebase), for creating custom settings screens on the fly, and with
minimal code and effort. These screens can be customised and tailored
to suit a specific projects needs, creating a clean interface on top of
the functionality placed within your WordPress toolkit plug-in. It is also
possible to define custom settings field types for unique user interface
experiences, if none of the bundled field types meets your requirements
(the bundled fields include basic text and textarea inputs, radio buttons,
checkboxes, multi-check checkboxes, colour pickers and timestamp
selectors, among others).
It is also possible to rebrand WooDojo into an extension on top of
your custom toolkit, wherein you offer the range of features bundled
within WooDojo as a toolkit with your own branding and specific
naming. WooDojo can be considered as a 1000+ hour head start when
offering your customers a suite of features to enhance their WordPresspowered websites.
For more information on WooDojo make sure to check out:
www.woothemes.com/woodojo.
Lets get to work!

Code structure
A few aspects of the plug-in are key to the code scaling well and avoiding
conflicts with other code; well use a PHP class to store our code and
Many developers arent aware

of the many powerful hooks
in every WordPress installation
initialise on the plug-ins_loaded hook. This ensures our code is free of
naming conflicts, and that all plug-ins are fully loaded prior to it executing,
meaning we can take advantage of functionality offered by other plug-ins.
Class properties
At the beginning of our class, we define a collection of properties which will
be used within our toolkit. For reference, these are as follows:
public $tracking_id = '';
public $tracking_location = 'footer';
public $advertising_code = '';
public $display_every_x = 3;
private $_post_counter = 0;
The init() method
In our class constructor (the function that runs when executing our class at
the bottom of the plug-in), we add a hook on plug-ins_loaded, which runs
our init() method. This is where the main logic behind the turning on and off
of our functionality takes place. Hooking it onto the plug-ins_loaded hook
ensures we have access to all activated plug-ins, prior to executing our code.
The remove_generator_tag() method
This is our simplest method in the plug-in; call remove_action() to
remove the wp_generator function from the wp_head section. This
isthe simplest form of WordPress plug-in development.
Woo hoo! Enhance your WordPress-powered website with this handy free
functionality suite. You can save yourself dozens of hours work with this plug-in
Tutorial
Must-use plug-ins
When setting up a WordPress-powered project, one conventionally
activates the plug-ins required, placing them in the wp-content/plug-ins
folder. More often than not, the developer or agency will hand the project
over to the customer, who will subsequently manage the day-to-day
running of the website or web application.
What if the customer deletes or deactivates a required plug-in? Should
the administrator or customer even be allowed the permissions to
deactivate these plug-ins if they are required by the installation in order to
function? This is where must-use plug-ins come in handy.
Contrary to popular opinion, mu-plugins doesnt stand for WordPress
Multi-User, as it does in other usages of the MU moniker.
A must-use plug-in is like any other WordPress plug-in, with the only
difference being its location. Placing a plug-in in the wp-content/mu-plugins folder (which you would need to create) means that the plug-in in
question is activated by default and is separated from the other, nonessential, plug-ins in the WordPress installation.
Your toolkit could be added as a must-use plug-in, along with any
other custom plug-ins created for the project. This ensures that your
code is separated from what the administrator has control over within
WordPress and, in fact, empowers your customer to have peace of mind, to
a degree, when activating their plug-ins of choice, knowing that they cant
inadvertently deactivate or delete plug-ins required by their project.
Other popular uses of must-use plug-ins include the insertion of plug-ins
to enable various caching methods within your WordPress installation, as
The display_google_analytics_code() method

This is our more intermediate method, where we output a Google
Analytics tracking code. This is common practice across websites and is often
handled within a theme. Why not handle this in your toolkit plug-in instead?
This method looks to some internal properties which you would set either
in your theme or in a separate loader plug-in, of sorts. This would enable
you to update and maintain your toolkit plug-in across multiple WordPress
installations, without having to keep track of different modified versions. You
would set the tracking ID and tracking location as follows:
global $yourname_wordpress_toolkit;
$yourname_wordpress_toolkit->tracking_id = 'your_tracking_id_here';
$yourname_wordpress_toolkit->tracking_location = 'header';
Our init() method above handles the logic for where the Google Analytics
code is to be displayed (either in the header or footer section). We then keep
the display method as clean as possible, because it has only the one task of
displaying the code, rather than determining where the display should occur.
The display_advertising_code() method
This is the most complex of the three functions of our toolkit. This method
is hooked onto the the_post hook and uses the internal $_post_counter
property to keep track of how many posts have been displayed in the
loop. We then check if were on a multiple of the desired number of posts
between each advertising code, and if we are, we retrieve the advertising
code (using the get_advertising_code() method) and display it.
You would set the number of posts between advertising codes and the
advertising code itself as follows in your theme or loader plug-in:
$yourname_wordpress_toolkit->display_every_x = 3;
$yourname_wordpress_toolkit->advertising_code = your_advertising_code_
here;
Instantiate the class
At the very end of our plug-in file, just before we close our PHP tags, we
need to instantiate the class itself. This is done using the following code:
$yourname_wordpress_toolkit = new YourName_WordPress_Toolkit();
40
Different breed Must-use plug-ins are stored away from non-essential ones.
For more information head over to http://codex.wordpress.org/Must_Use_Plugins
well as making use of more advanced server architectures, should your

server support them. Must-use plug-ins are a great way to make sure
your core plug-in collection remains active at all times, and is out of the
way when the website administrator adds or modifies the general plug-in
scopeof the project.
The finished plug-in

Our starter toolkit plug-in is now complete. Save the following into a file
called yourname-wordpress-toolkit.php in your wp-content/plug-ins folder:
<?php
/**
* Plugin Name: Your WordPress Toolkit
* Plugin URI: http://your-website-url-here.com/your-wordpress-toolkit/
* Description: Hi, I'm Your WordPress Toolkit, a collection of awesome
functionality used to enhance your WordPress-powered website and
provide extra functionality on top of paid-for WordPress products used by
our agency.
* Author: Matt Cohen and Scott Basgaard of WooThemes
* Version: 1.0.0
* Author URI: http://woothemes.com/
*/
Take your paid-for WordPress

products to the next level,
and build out your toolkit
if ( ! class_exists( 'YourName_WordPress_Toolkit' ) ) {
class YourName_WordPress_Toolkit {
public $tracking_id = '';
public $tracking_location = 'footer';
public $advertising_code = '';
public $display_every_x = 3;
private $_post_counter = 0;
public function __construct () {

add_action( 'plug-ins_loaded', array( &$this, 'init' ) );
} // End __construct()
public function init () {

// Remove the "generator" meta tag.
if ( ! is_admin() ) { $this->remove_generator_tag(); }

// Load Google Analytics tracking code.

if ( ! is_admin() && ( '' != $this->tracking_id ) ) {
Tutorial
Integrated graphics Advertising within your content can be a great, non-intrusive

way of showcasing your adverts to your visitors
if ( 'header' == $this->tracking_location ) {
add_action( 'wp_print_scripts', array( &$this, 'display_
google_analytics_code' ) );
} else {
add_action( 'wp_footer', array( &$this, 'display_google_
analytics_code' ) );
}
}
// Display advertising code after every "X" posts.
if ( ! is_admin() && ! is_singular() && ( '' != $this->advertising_
code ) ) {
add_action( 'the_post', array( &$this, 'display_advertising_
code' ) );
}
} // End init()
public function remove_generator_tag () {
remove_action( 'wp_head', 'wp_generator' );
} // End remove_generator_tag()
public function display_google_analytics_code () {
if ( '' == $this->tracking_id ) { return; }
$html = '<script type="text/javascript">//<![CDATA[
var _gaq = _gaq || [];
_gaq.push([\'_setAccount\', \'' . esc_js( $this->tracking_id ) . '\']);
_gaq.push([\'_trackPageview\']);
(function () {
var ga = document.createElement(\'script\');
ga.type = \'text/javascript\';
ga.async = true;
ga.src = (\'https:\' == document.location.protocol ? \'https://'
ssl\' : \'http://www\') + \'.google-analytics.com/ga.js\';
var s = document.getElementsByTagName(\'script\')[0];
s.parentNode.insertBefore(ga, s);
})();
//]]></script>' . "\n";
echo $html;
} // End display_google_analytics_code()
public function display_advertising_code ( $obj ) {
if ( is_main_query() && in_the_loop() ) {
if ( ( 1 < $this->_post_counter ) && ( 0 == $this->_post_
counter % $this->display_every_x ) ) {
View power Google Analytics is one of the biggest analytics tracking programs
available today. This code could, of course, be replaced with another tracking application
echo $this->get_advertising_code();
}
$this->_post_counter++;
}
} // End display_advertising_code()
private function get_advertising_code () {
return wp_kses_post( trim( $this->advertising_code ) );
} // End get_advertising_code()
} // End Class
}
$yourname_wordpress_toolkit = new YourName_WordPress_Toolkit();
?>
Building a castle around a keep

Thats it youre now ready to set yourself apart from all those other
agencies and freelancers using WordPress by providing a unique offering
to your customers.
Take your paid-for WordPress products to the next level, enhance the
experience your customers enjoy on your projects and build out your toolkit,
both to save you time and to have fun while building exciting projects for
your customers. l
About the author

Name Matt Cohen
URL www.matty.co.za / www.woothemes.com
Areas of expertise WordPress plug-ins and PHP
Twitter @mattyza
Whats the oddest present youve received?
Colourful socks is as bizarre as it gets for me!
About the author

Name Scott Basgaard
URL www.scottbasgaard.com / www.woothemes.com
Areas of expertise WordPress plug-ins, PHP and jQuery
Twitter @scottbasgaard
Whats the oddest present youve received?
A human-sized inflatable monkey
Tutorial
Customise
the admin area
Download
the files! >
All the files you

torial
need for this tu
http://
can be found at
40
netm.ag/WP-2
Customising the backend of WordPress can improve user experience and productivity.
Noel Tock explains how to destroy, rebuild and conquer WP-Admin to meet user needs
Knowledge needed Intermediate PHP, CSS and HTML
Requires WordPress, text editor, capable browser
Project time 1-2 hours
For many designers and developers, WordPress has become an
invaluable asset for prototyping and creating products for clients. At
the same time, most use-cases have been attempted and
documented before. When we think about customising WordPress, we almost
always think of themes. Through this powerful theming layer, we are able to
create any type of website imaginable. This is also what the end user is
exposed to. But what happens when users need to interact with the backend
of WordPress.
In this tutorial, Ill get you thinking about how you can customise the admin
area of WordPress to help users become more productive. Were not talking
about adding your logo to the login screen, but about consolidating and
optimising the user experience so we can make the end user genuinely enjoy
the experience. That said, customising the admin area of WordPress can easily
drain resources and distract you from your real goals. Therefore, its important
to start with the easy wins and grow with the needs of your users. Lets start!
Destroy
The admin area is littered with features and options, making it intimidating for
anyone that is using it for the first time. Remember, first impressions matter.
Your initial goal should always be to lean out the interface to the point that end
users are comfortable with the navigation and dont have to deal with any more
screens then they are required to.
For example, take your typical small business client. Do they need anything
beyond managing its pages? Probably not. In order to funnel the experience
towards the functionality it requires, lets remove everything else.
A simple method of achieving this is by modifying the User Role. WordPress
has a number of default role types ranging from Subscriber to Super Admin.
For our small business owner, the best starting position would probably be the
Author role. Well add a function that will retrieve the role and then modify
it by adding and removing certain privileges. In the tutorial files (http://netm.
ag.com/WP-240), Ive put all the code in a single plug-in. Even if youre just
starting out with PHP, the function is quite obvious as to what its doing:
Night and day A few lines of code can change the way your clients perceive and use
WordPress to improve productivity and user experience
42
function change_author_capabilities() {
$role = get_role('author');
$role->remove_cap('edit_published_posts');
$role->remove_cap('publish_posts');
$role->remove_cap('delete_published_posts');
$role->remove_cap('edit_posts');
$role->remove_cap('delete_posts');
$role->add_cap('upload_files');
$role->add_cap('edit_pages');
$role->add_cap('edit_others_pages');
$role->add_cap('edit_published_pages');
}
add_action('admin_init', 'change_author_capabilities');
Thats already a great start on our mission towards a lean admin. While
youre coding, you may notice that the Dashboard and Media section are still
visible. Lets hide those too:
function remove_menu_items() {
remove_menu_page('index.php');
remove_menu_page('separator1');
remove_menu_page('upload.php');
}
add_action('admin_menu', 'remove_menu_items');
Because we simply hid the Dashboard, users logging in will still get
redirected to it. Lets bring them straight to the Pages overview instead:
function change_landing_page() {
return admin_url('edit.php?post_type=page');
}
add_filter('login_redirect', 'change_landing_page');
Congratulations, youve just reduced client training from one hour to 15
minutes. And because youve also made your clients life easier, feel free to
increase your rates too.
To make a long story short, just because something comes packaged with
Frontend customiser Before WordPress had built this into its core, we brought
design options to the front to provide a more fluid user experience
Tutorial
WordPress, doesnt mean it will help you or your client. Get rid of the fluff and
focus on client needs.
Rebuild
There will come a point when your users will be managing more than just
posts and pages. Theyll need to administer different types of content. Custom
Post Types have allowed us to extend WordPress in ways that we hadnt thought
of before. Ive dealt with creating UIs for everything, from transactions, food
menus and even shelter animals up for adoption. While theyre all easy to
spawn using Custom Post Types, the UI thats displayed by default is not able
to handle or understand the data hierarchy. If you respect your users, provide
them with a relevant UI and not just metabox spaghetti.
For these custom post types, we dont need to manipulate the post view
CSS or the HTML through jQuery either. Were far better off creating new pages
within the admin area. It sounds a bit daunting, but its actually quite simple
once your break down the pieces. Lets assume our small business owner now
wants to have a products section on his website where products can be easily
managed from a single view. We start off by creating a new page where this
custom UI will reside:
function add_products_page() {
add_menu_page('Products', 'Products', 'edit_pages', 'cpt-products', 'create_
products_page' ,", 21);
}
add_action('admin_menu', 'add_products_page');
Well now want to fill this blank canvas with your new interface HTML. In this
case, were going to let our user manage everything from a single page (you
heard right, your user wont have to click to open each product or post). This
means the page will have a simple input form for new products while providing
If you respect your users,

provide a relevant UI and
not just metabox spaghetti
a few buttons to administer existing ones. Download the files (http://netm.
ag.com/WP-240) to see the full function. But the scaffolding will look like this:
function create_products_page() {
?>
<h2>Insert New Product</h2>
// Form (see files)
<h2>Administer Existing Products</h2>
// Post Query & Form (see files)
<?php
}
DOM visualisation Theres no perfect or clean way to hack around this complex
structure, or the 14,000 lines of CSS that style it
Case study: happytables

Happytables (www.happytables.com) is a SaaS I co-founded. It provides
restaurants with the opportunity to create and manage websites. Its all
built on top of WordPress, but in our early releases it also still looked
too much like WordPress. This set false expectations as users were often
thinking of us as a hosted WordPress solution. This meant they thought
they could do things such as upload their own plug-ins or modify the
theme files. In reality, we were moving towards trying to feel like a web
application.
We removed lots of functionality, added in new features, heavily
customised the look and feel, only to come full circle and realise that, if
we want to create something that reflects our goals, we would need to
detach ourselves from the default admin functionality. At this point we
decided to create something entirely new.
We were able to put together a new admin layer that hooked into
WordPress via a REST API, but only displayed exactly what we wanted
it to. The entire sprint felt liberating and gave us a chance to exercise
a less is more approach, resulting in our ability to then highlight
value over features. This is an important point as a traditional content
management system will often pride itself in providing freedom and
flexibility to the end user. With a solution such as happytables, we
wanted to take out a lot of the guesswork to provide an experience
requiring minimal input.
From a technical point of view, we implemented a new Dashboard
theme into the main website, using a theme switcher programmatically
as soon as a user landed on any slug that matches /dashboard/*. In
addition, we also incorporated KnockoutJS to provide views on more
complex UI features (such as Food Menus and Events). This new setup
also allowed us to go responsive, paving the way for mobile input
and basic site management (instrumental for the on-the-go restaurant
owner). Feel free to create a dummy site and have a play around with it!
Youre probably now wondering how you save any input made to these forms.
This also isnt too hard. Simply create a function that listens for POST data every
time an admin page is initialised, like so:
function catch_new_products() {
if ( isset($_POST['new_product'] ) == 'true') {
$new_post = array(
// Grab Data from POST (see files)
);
wp_insert_post( $new_post );
wp_redirect( wp_get_referer() );
exit;
}
add_action('admin_init', 'catch_new_products');
So the function above checks if theres POST data that matches the custom form
we built before. If so, it then grabs the data and sticks it into a new post.
It then redirects us to where we came from.
Happytables dashboard The default WordPress admin area is too clunky and
hard to customise, so we created our own administration layer
Tutorial
Further reading
Youll easily find plenty of resources on the technical aspects of
customising the WordPress admin. Instead, think outside the box and
be inspired by solutions and case studies beyond WordPress. Here are
some great reads to help you break out of the WordPress mindset (OK,
theres one WordPress book mentioned, but its excellent).
Zen mode The full-screen writing mode of WordPress is a lesser known feature, but
paves the way for a lighter and more productive interface
Clickbank powered An example of a custom WP-Admin created with Human Made,
l Designing Web Applications by Nathan Barry

http://netm.ag/barry-240
l Design for Hackers: Reverse Engineering Beauty by David Kadavy
http://netm.ag/kadavy-240
l Step by Step UI Design by Sacha Greif
http://netm.ag/greif-240
l Seductive Interaction Design: Creating Playful, Fun, and Effective User
Experiences by Stephen Anderson
http://netm.ag/anderson-240
l Professional WordPress: Design and Development by Brad Williams,
David Damstra and Hal Stern
http://netm.ag/damstra-240
a VIP WordPress agency in the UK. The existing admin was restyled
We can do the same thing for updating and deleting posts.

For the sake of getting comfortable with the process, Ive left out a couple of
things you should research and implement down the road. The most important
item youll want to do immediately is add a Nonce to each database-related
action (inserting, updating and deleting posts for instance). These stand for
Number used once and are easy to implement. With the attached files, Ive
already done that for you.
What youll also absolutely want to do is extend the power of your custom
post type with Post Meta the custom fields that go beyond the basic title,
content, featured thumbnail, etc. Taking our products as an example, the post
meta could capture stock keeping units (SKUs), prices, quantity and so forth.
Further on, you may also want to add Admin Notices to give users confirmation
of their actions being carried out. If you want to go the extra mile, save your
data using AJAX. This way the page doesnt even need to refresh.
Your options are limitless especially once you start utilising some of the
better jQuery plug-ins that are out there for managing and displaying large sets
of data.
Conquer
Ive shown you how to make the user experience more pleasant as well as
creating your own UI for specific post types. These two items will already take
you a long way. But what happens when your requirements go beyond that?
There is an opportunity to also customise the overall visual feel and style
of the backend for the benefit of corporate branding, perception or even
functionality. You can make changes to go that extra step. This is typically done
once you start having hundreds of users logging into the backend. Having gone
through this process more than once, let me provide you with some tips from
my personal experience.
WordPress has frequent updates, which means you dont want to create an
entirely new stylesheet simply to have the default HTML change on you and not
know which CSS has subsequently also been altered. This means you should
leave the core wp-admin.css as it is and override elements through specificity.
To achieve that, were going to cut the head of the snake off by attaching an
id onto the body.
function add_custom_id() {
?>
<script>

jQuery(document).ready(function()

jQuery('body').attr('id', 'custom-admin');
});

</script>
<?php
}
add_action( 'admin_footer', 'add_custom_id' );
44
From there on out, always tag any styling with #custom-admin. If youre using a
CSS preprocessor (such as LESS or Sass), then thats even easier as youll simply
create an additional top-level node to nest your entire CSS within.
For example:
body#custom-admin {
#wpwrap {

input {padding:5px}
}
}
Adding the CSS to the backend is similar to regular themes with just a slightly
different action:
function add_custom_style() {
wp_enqueue_style( 'custom-admin', get_stylesheet_directory() . '/customadmin.css', false, '1.0' );
}
add_action( 'admin_enqueue_scripts', 'add_custom_style' );
This will give you a great deal of control over how the styling works. When
WordPress does happen to update, youll simply need to spend a few hours or
so tweaking whatever has changed in the meantime.
The WordPress backend is already very JavaScript dependent, so using jQuery
to create, edit or destroy various HTML files is a simple and non-intrusive way of
moving forward quickly.
Way forward
Hopefully this article has given you plenty of ideas and methods for varying
degrees of customisation. Customising the backend of WP-Admin really boils
down to two factors: firstly, what benefits do your clients or users get from
each change you perform? And, secondly, with each change that you perform,
are you still working on a code-base that remains manageable in terms of easy
maintenance? Above all, experiment and never feel restricted by community
trends or opinions. Tear the WordPress admin apart and make it your own. l
About the author

Name Noel Tock
URL http://noeltock.com
Twitter @noeltock
Areas of expertise SaaS, WordPress, crushing it
What was the first thing you said this morning?
Assgang, how is that not a word? (Facing imminent defeat
playing SpellTower at 6.13am on the way to the gym.)
TAILORED FOR TABLET.

Experienceadditionalmultimediacontent
inourfullyinteractiveiPadedition
TRY IT
FOR FREE
TODAY!
ComputerArtsreadersknowdesignmaersThatswhywevecompletely
reinventedourdigitaleditionasafullyinteractiveiPadexperiencewith
impeccableusabilityTheresalsoadditionalinteractivecontent
suchasimagegalleriesandbonusvideoswhichbringthe
motioncontentfeaturedinthemagazinetolife
TRYITFORFREETODAYWITH
OURNO-OBLIGATION-DAYTRIALAT
hp//googl/sMcPjUKorhp//googl/aibUS
Digital replicas also available on Google Play, Nook and Zinio
Tutorial
Master The Loop
Master The
WordPress Loop
The Loop is the basis of dynamic content in WordPress. Joe Casabona explains what it
does, how to use it, and resolves the most common Loop-related queries
Knowledge needed: Intermediate PHP, Basic CSS, Basic WordPress
Requires: WordPress
Project Time: 1-2 hours
As a WordPress developer, there are quite a few things you need to
understand. Things like themes and plug-ins, actions and filters, tags
and more. But none of these are more important than the worldfamous WordPress Loop.
Oh, The Loop. It's a living, breathing thing. It's the backbone of WordPress
the part that makes everything tick. Without The Loop, there would be no
dynamic content (very little, anyway). Using The Loop, we can print any content,
in any format we want. And who better to describe it than its creators? Here's
what the WordPress Codex has to say about it:
'The Loop is used by WordPress to display each of your posts. Using the Loop,
WordPress processes each of the posts to be displayed on the current page and
formats them according to how they match specified criteria within the Loop
tags. Any HTML or PHP code placed in the Loop will be repeated on each post.'
Essentially, WordPress has a set of tags to: (a) make sure that we have posts to
display, and (b) display those posts. The tags, called Template Tags, enable us to
fully customise how we display the information from each post.
01. Getting started
The same function will continually keep track of if we still have posts, which is
why it's used as the while condition.
the_post() unpacks the next post in the queue.
WordPress automatically grabs the posts by querying the database based on
the URL. You could also overwrite the original query by using WP_Query() or
query_posts() to get your own information. In any case, as long as that query
returns posts, have_posts() returns true and we enter The Loop. We end The
Loop in this way:
<?php endwhile; else: ?>
<?php _e(‘No posts were found. Sorry!'); ?>
<?php endif; ?>
We have a simple fallback here: in the case that have_posts() returns false,
it tells the user we have no posts for them. Inside The Loop, we can do all kinds
of things to completely customise the post display. While I won't go through all
of the Template Tags, I will point out some of the most commonly used ones. All
of the following functions print out their value by default. Some of these
functions also accept Boolean values, which determine if the value should be
printed or returned.
have_posts() is making sure there are posts to display.
the_title(): Gets the title of the post or page. It accepts three arguments: an
HTML tag for before the title (named $before), an HTML tag for after the title
(named $after), and $echo, the actual title itself.
the_time(): Gets the date the post or page was published. The only argument
it accepts is the format in which the date should be printed. These arguments
are the same ones that the PHP date function accepts. The default whatever is
listed in the WordPress admin panel, under Settings > General.
the_content(): This will display the content of the post or page (that is,
The Loop The basis of dynamic content in WordPress
Template tags Which template tags belong inside or outside The Loop?
We start off The Loop this way:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
Three things are happening here:
46
Tutorial
Master The Loop
Multiple Loops Multiple loops in action in a WordPress site
Querying posts WordPress has several alternative methods for querying posts
whatever you entered as the body text in the visual editor of the WordPress
admin. It accepts two arguments, the first of which tells WordPress what to
display as the 'more' text. I'll talk about this at length in the next section. The
second argument, called $stripteaser, is simply documented as a Boolean that
will "strip teaser content before the 'more' text". There are no examples on the
Codex, and there is some debate over what it actually does.
the_excerpt(): Gets the first 55 words of the post, appending [...] to the end of
the string. It accepts no arguments. Both the number of words and the ellipsis
can be changed within the functions file using filters.
the_category(): Gets the category (or categories) in which the posts are listed.
For arguments, it accepts the separator, which will be printed in between
categories; how to handle displaying parent categories; and the post_id, which
of course defaults to the current post.
the_tags(): Gets the tags added to the post. The arguments it accepts are what
to print before the list of tags, how to separate each tag, and what to print
after each tag.
the_permalink(): Gets the post's or page's URL in the format defined by the
WordPress admin panel in Settings > Permalinks.
the_author(): This displays the post author's name. You could also use the_
author_link(), which would display the author's name with a link to his or her
other posts. If you do use the latter, I'd recommend you make at least an
author.php page to display the posts nicely!
course, you don't need to use it on one of these standard templates. You can use
The Loop anywhere you want, as long as you have the proper hooks just wp_
head(); in place. If you want to do something like display the thumbnail of the
most recent post in the sidebar, you can do that too. I'm going to show you how
to display a 'breaking news' title and link to story in your header.
Since everyone's template is different, I'll let you handle placement. Just open
up your header.php file and place this code where you'd like:
It's also worth noting that most of these functions have accompanying
'get' functions that is, get_the_title() which would simply return the value
instead of printing it. You can see all of the Template Tags and whether they
belong inside or outside The Loop at http://codex.wordpress.org/
Category:Template_Tags.
Now, I know what you're thinking: that one burning question you have...
02. Where can I use The Loop

And it's a very good question. While theoretically you can use The Loop
anywhere, there are several places where it is commonly used. The first place,
and probably the most obvious, is in index.php. Since the index page is by
default your blog's homepage template, The Loop is used to display the most
recent blog posts. The other common templates you'll see The Loop in are
single.php and page.php.
However, the beauty of WordPress is that you can overwrite just about any
default functionality. That means if you want to have a custom display for a
specific category, you can create a category-$id.php template (where $id is the ID
of the category; slug can also be used) and throw The Loop on that page to gain
a custom template for just that category. If you don't have any of the other
templates, index.php will be used.
The WordPress Codex actually has a very nice chart showing the drill-down of
theme templates, all of which are common places for using The Loop, which you
can view at http://codex.wordpress.org/images/1/18/Template_Hierarchy.png. Of
<?php
query_posts('posts_per_page=1&category_name=breaking-news');
if ( have_posts() ) : while ( have_posts() ) : the_post();
?>

<div class="breaking">
<h3>BREAKING: <a href="<?php the_permalink();?>"><?php the_title(); ></
a></h3>
The beauty of WordPress is

that you can overwrite just
about any default functionality
</div>

<?php endwhile; endif; wp_reset_query(); ?>
There are a few things here to note. First of all, we're using the built-in
function query_posts() to get posts other than those that would normally show
up on the page. According to our query, we want one post (the most recent one)
from the category 'breaking-news', which is the slug of a category I set up for
this demonstration. You can use any category slug you'd like: just remember that
if you want to call a category by slug, you need category_name in the query
string. (Just using category requires the category's ID.) You can ready more about
query_posts() at http://codex.wordpress.org/Function_Reference/query_posts.
One thing to keep in mind is that query_posts() modifies the main Loop. I'll
show you how to fix that, and later on, I'll tell you about other functions you
could use that will not modify the main Loop.
After we get the posts we want, we start off The Loop, as discussed earlier:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
We then call two template tags, the_permalink() and the_title(),
wrapping them in a div with a class I created called .breaking. Our Loop
Tutorial
Master The Loop
The result Here's the result of Step 02
Drill-down Common places for using The Loop
ends the usual way with endwhile; endif;

However, I included one more function: wp_reset_query(). You can read
about it at http://codex.wordpress.org/Function_Reference/wp_reset_query.
It is imperative you call this function right after the end of the custom Loop
because it will reset the query, grabbing the information that should be on the
page. For example, if a user goes to the 'About' page, wp_reset_query() will grab
that page's information, which was overwritten by the query_posts() call we just
made. Without it, any subsequent loops will not display properly; and since this
code is in the header, any loops for that page's template will be rendered
useless. In short, wp_reset_query() is pretty important.
You can see the result in the screenshot above.
?>
03. Can I use more than one Loop in a template?

Another great question! The short answer is yes, most definitely. You've probably
seen this in action on sites like CNN, National Geographic and Forbes, all of
which make use of multiple Loops on their homepage (or at least, it looks that
way). As a matter of fact, in our last example, we were using more than one
Loop for a template, even if the two Loops were in different files. Just be aware
that when you are using several Loops, you need to be mindful of where and
how you are using them, as well as the scope of your template tags.
04. Querying posts

Earlier, I mentioned that there are several ways to generate a list of posts to
display in your theme. The first (and main) way is to use the function query_
posts(), which we used in our previous example. It is the primary method
because this is how WordPress generates the original post or page information
when you go to a section of a WordPress site. Consequently, when you use
query_posts(), it will alter the main Loop information.
That means if we do something like this...
<?php the_title(); ?>
<?php query_post($someArguments); ?>
<?php the_title(); ?>
...we will get two different titles. Because of this, we want to be mindful of
using query_posts(), especially when were generating several different Loops in
a single template. A better option might be get_posts(), which enables us to
generate multiple Loops in a single template without changing the page's main
query. (You can find more information at http://codex.wordpress.org/Function_
Reference/get_posts.) The only difference is that well have to set up our Loop a
little differently.
Here is some sample code:
<?php
$custom_posts= get_posts(array('numberposts' => 4, 'category'
=> 3, orderby => 'title'));
foreach ($custom_posts as $custom_post) : setup_postdata($custom_post);
48
<h3><?php the_title(); ?></h3>

<?php the_excerpt(); ?>
<?php endforeach; ?>
?>
There are a couple of things to be aware of here. The first is obviously that
this isnt the normal Loop setup weve been writing. Thats because this line:
<?php if (have_posts()) : while (have_posts()) :
the_post(); ?>
...is reserved for whatever is retrieved from query_posts(), which is usually

the default information for the page. Instead, get_posts() will return an array
of posts that we store in our own variable, which well traverse using a for
each loop.
Soon you will be working

productively with WordPress'
bread and butter: The Loop!
To use the regular template tags that we now know and love, we call the
function setup_postdata(), passing to it the current post information (which is
now in the variable $custom_post). Then we proceed as normal, using all of
the regular template tags.
There is also WP_Query, which is the class used to query posts, create the
Loop, and more. While its worth mentioning here and checking out on The
Codex, I wont go into too much detail, since we already have two ways to get
post information, which will be fine nine times out of ten. The WP_Query
Codex page has all of the parameters you can pass in an query string for posts,
whether you're using WP_Query, query_posts() or get_posts().
05. Conclusion
And that's it for this article. Phew! We've covered quite a lot of ground here,
and it might seem a bit overwhelming if you're just getting started, but
persevere, and soon you will be working productively with WordPress' bread
and butter: The Loop!
You can find out more about The Loop and building WordPress themes,
plug-ins and more in my book, Building WordPress Themes from Scratch (see
http://rockablepress.com/books/building-wordpress-themes-from-scratch) l
Joe Casabona is a web developer, teacher and author of the book Building
WordPress Themes from Scratch. He absolutely loves WordPress and is
unapologetically nerdy!
MASTER CREATIVE CLOUD!

Want to supercharge your creative workflow? Want all your apps to work
in sync? Want to easily publish to multiple platforms and devices at the
same time without any hassle? We thought so. In this book The Ultimate
Guide to Creative Cloud youll discover how to use the power of Adobe
Creative Cloud to work faster and smarter!
On sale now at WHSmith, Barnes & Noble, www.myfavouritemagazines.co.uk
and for iPad at http://goo.gl/sMcPj
Tutorial
Custom post types
Create a WordPress
custom post type
Web developer, software engineer and part-time entrepreneur Gilbert Pellegrom
explains what a WordPress custom post type is and how to use them
Knowledge needed: PHP, WordPress
Requires: WordPress 3.1 or later
Project Time: 20 minutes
Custom post types were introduced in WordPress v3.0 to enable
developers to easily add different types of content to their plug-ins
and themes, allowing you to easily extend WordPress.
In this tutorial we will see exactly what a WordPress custom post type is, and
how to use them in your plug-ins and themes straight away.
01. What's a WordPress custom post type?

In its simplest form a WordPress custom post type is a representation of a type
of content. Dont be confused by the fact that it has post in its title. It can
literally represent anything you want. So for example, WordPress has several
default post types built in:
Posts
Pages
Attachments
Revisions
Nav Menus
Try to think of WordPress custom post type as a way to manipulate content in
the same way that you would a blog post, but with far more control as to how
it's displayed. As a word of warning though, if youre simply looking to
categorise your content in different ways, consider using categories, tags or
custom taxonomies before jumping into creating custom post types.
02. How do I create a WordPress custom post type?

Creating a WordPress custom post type is actually incredibly simple, and when
you see how much work WordPress does for you, youll begin to understand
how powerful they can be. In your themes functions.php file, insert the
following code:
add_action( 'init', 'create_post_type' );
function create_post_type() {
register_post_type( 'book',
array(
'labels' => array(
'name' => __( 'Books' ),
'singular_name' => __( 'Book' )
),
'public' => true,
'has_archive' => true
)
);
}
That is all you need to create a WordPress custom post type. In the example
above we are creating a custom post type called book, which we will use to
create a book database. Add some labels, set a few options, and we're good.
50
The example bottom-left is extremely simple but demonstrates the simplicity of

creating custom post types. Now if you go to your WordPress admin panel, you
should see a new menu item called Books. Go ahead and play around with the
new Books section. Because we set public => true, all of the admin interface
is generated for us by WordPress, making our lives much simpler.
03. Creating a book database

In the last example we created a very basic WordPress custom post type, but we
were only scraping the surface of what's possible with custom post types. Lets
get our hands dirty and create a full-blown custom post type.
//Create our post type
add_action( 'init', 'create_post_type' );
function create_post_type() {
$args = array(
'labels' => post_type_labels( 'Book' ),
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'has_archive' => true,
'hierarchical' => false,
'menu_position' => null,
'supports' => array('title',
'editor',
'author',
'thumbnail',
'excerpt',
'comments'
)
);
register_post_type( 'book', $args );
}
//A helper function for generating the labels
function post_type_labels( $singular, $plural = '' )
{
if( $plural == '') $plural = $singular .'s';
return array(
'name' => _x( $plural, 'post type general name' ),
'singular_name' => _x( $singular, 'post type singular name' ),
'add_new' => __( 'Add New' ),
'add_new_item' => __( 'Add New '. $singular ),
'edit_item' => __( 'Edit '. $singular ),
'new_item' => __( 'New '. $singular ),
'view_item' => __( 'View '. $singular ),
'search_items' => __( 'Search '. $plural ),
Tutorial
Manage in admin By following this tutorial you'll create an awesome custom post
type that you can manage in the WordPress admin
'not_found' => __( 'No '. $plural .' found' ),

'not_found_in_trash' => __( 'No '. $plural .' found in Trash' ),
'parent_item_colon' => ''
);
}
//Add filter to ensure the text Book, or book, is displayed when user
updates a book
add_filter('post_updated_messages', 'post_type_updated_messages');
function post_type_updated_messages( $messages ) {
global $post, $post_ID;

$messages['book'] = array(
0 => '', // Unused. Messages start at index 1.
1 => sprintf( __('Book updated. <a href="%s">View book</a>'),
esc_url( get_permalink($post_ID) ) ),
2 => __('Custom field updated.'),
3 => __('Custom field deleted.'),
4 => __('Book updated.'),
/* translators: %s: date and time of the revision */
5 => isset($_GET['revision']) ? sprintf( __('Book restored to revision
from %s'), wp_post_revision_title( (int) $_GET['revision'], false ) ) : false,
6 => sprintf( __('Book published. <a href="%s">View book</a>'),
7 => __('Book saved.'),
8 => sprintf( __('Book submitted. <a target="_blank"
href="%s">Preview book</a>'), esc_url( add_query_arg( 'preview', 'true', get_
permalink($post_ID) ) ) ),
9 => sprintf( __('Book scheduled for: <strong>%1$s</strong>. <a
target="_blank" href="%2$s">Preview book</a>'),
// translators: Publish box date format, see php.net/date
date_i18n( __( 'M j, Y @ G:i' ), strtotime( $post->post_date ) ),
10 => sprintf( __('Book draft updated. <a target="_blank"
href="%s">Preview book</a>'), esc_url( add_query_arg( 'preview', 'true', get_
permalink($post_ID) ) ) ),
);

return $messages;
}
So what's going on here? Well, first off we're creating our custom post type
and setting most of the available options with it. Im not going to explain what
all these options do here because the WordPress Codex (http://codex.wordpress.
org/Function_Reference/register_post_type) explains them very well so make
sure you take a look.
The second function you see is simply a helper function that makes it easy to
generate the labels that will be used in the WordPress admin for the custom post
type. You can manually set the $labels array if you wish, but I find this cleaner
and easier.
Custom post types
Flexibility Custom post types enable developers to easily add different types of content
to their plug-ins and themes
Finally we're adding a filter to change the updated messages. So now

whenever WordPress shows an update message for this custom post type, it will
show right labels (rather than just using post all the time).
04. Viewing our books

So now we have this awesome custom post type that we can manage in the
WordPress admin. But what about actually displaying books on your site? Well,
WordPress has you covered.
There are several templates that can be used in your themes to automatically
display our custom post type content:
single-{posttype}.php In the same way that posts are shown on their own
page with single.php, custom post types will use single-{posttype}.php if it's
available. So in our example above we could create a single-book.php file and
the product posts would be shown using that template.
archive-{posttype}.php As of WordPress v3.1 you can also use an archive-typetemplate. In the same way that posts are shown on their own archive with
archive.php, custom post types will use archive-{posttype}.php if it's available.
Now, having these template files at our disposal is great, but sometimes you
need to get a bit more complicated and use a custom query for some finegrained control. Thankfully, WP_Query has us covered by allowing us to specify a
post_type parameter.
$args = array( 'post_type' => 'book', 'posts_per_page' => 10 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
the_title();
echo '<div class="entry-content">';
the_content();
echo '</div>';
endwhile;
05. Conclusion
You now have a fully functioning book database, which you can control via your
WordPress admin area, enabling you display books on your WordPress site.
06. Further notes

Before we finish there are a few extra points that are worth mentioning. When
creating custom post types it is considered best practice to prefix the post type
with a unique namespace to avoid conflicts with other themes and plug-ins.
Although be careful that the total length of your custom post type name isnt
greater than 20 characters, otherwise strange things will happen.
Also, dont use wp_ as your namespace prefix as it is reserved for internal
WordPress names.
If you get 404 pages when you first try to see your custom post types, dont
panic. Simply visit the Settings > Permalinks page and this will flush your rewrite
rules. If you're a plug-in author, make sure your flush the rewrite rules on your
plug-in activation. l
Tutorial
WordPress e-Commerce
Using WordPress
e-Commerce
Download
the files! >
All the files yo

u
need for this
tutorial
can be found
at
netm.ag/wp232
Alongside its unstoppable rise as the CMS du jour, WordPress is increasingly used
for ecommerce. Dave Mackintosh explains getting started without shelling out
Knowledge needed Intermediate PHP and WordPress, basic MySQL
Requires PHP, WordPress, MySQL
Project time 4 hours
We need to edit the themes functions.php to include our custom functionality.

Well write a function that adds popular products functionality and a shortcode
to be able to call the function mid-post/page.
Doing the work

More and more websites are turning to WordPress as their CMS,
which concurrently increases the number of shops and online
businesses using it for their ecommerce needs. With an
agglomeration of ecommerce plug-ins available for WordPress, WP
e-Commerce stands out as a standardised solution its incredibly powerful
and expandable, and works with just about every theme you can think of.
WP e-Commerce continues to grow and, with over 1.3 million downloads,
has a formidable following of developers and enthusiastic designers providing
sound solutions with a low development footprint to clients of all types and
sizes. This tutorial goes into how to set up WP e-Commerce and attain common
functionality without having to pay a penny.
Setting up
Youre enthusiastic, excited and prepared for WordPress. Youre installed, up
and running and cant wait to get your shop on the web but arent sure
where to start. If youve used WordPress before youll be accustomed to the
admin area already; if not, well get you ready to sell quicker than youd think.
To install WP e-Commerce head to the plug-in manager in the WordPress
admin and search for WP e-Commerce. Hit install; now all you have to do is
click activate.
Once youre installed you will see a new menu item labelled Products;
clicking on this will show you an empty catalogue of products. You can add
products here and now, which for the rest of this tutorial is a good idea because
well be running through how to retrieve the most popular products and add
product searching without paying for the WP e-Commerce gold cart extras.
Popular products
It may seem obvious to have a popular products function, but WP e-Commerce
doesnt come with it by default luckily its a simple piece of functionality to
create. For the sake of your business cross-selling is important; its also crucial
to your customers that they have a pleasant buying experience, and displaying
popular products is a great way to better sales and improve user experience.
Im using the brilliant Sticks & Stones theme by Tipsy & Tumbler (http://netm.
ag/sticks-232) its very responsive and works brilliantly with WP e-Commerce
straight out of the box. Since the themes functions.php is already rather large
were going to create a new file called functions-addons.php, which well save
in the same directory as functions.php. Youll find these files in wp-content/
themes/sticksandstones.
Before we get to the code, the way newer versions of WP e-Commerce work
is that when a user adds one of your items to their cart and goes through the
WordPress has some weird

terminologies when it comes
to searching specific fields
checkout, the plug-in writes the items to the table wp_wpsc_cart_contents
whereas older iterations wrote to the database upon adding to the cart.
Querying the database

To get the popular products from the database we need to do two things:
expose the WordPress database to the function, and then write a MySQL query
to gather the products and order them by frequency of purchase:
//Expose the database
global $wpdb;
//Get the results
$popular_products = $wpdb->get_results("SELECT 'prodid',
SUM(quantity)
FROM '{$wpdb->prefix}wpsc_cart_contents'
GROUP BY 'prodid'
Admin zone WordPresss famous one-click install plug-in screen makes extending your package a 30-second task, no matter what your level of experience
52
Tutorial
Why WP e-Commerce?
Small wonder The beauty of WordPress is that it doesnt take much to do much: a
tiny amount of the right code can do massive things for your site and your customers
ORDER BY 'quantity'
DESC LIMIT {$atts['limit']}", ARRAY_A);
We expose the standard WordPress database adaptor to the function, giving us
the ability to query the database and format the results. We can now modify
the data in a way we feel comfortable with. For the sake of ease Ive left the
format as an associative array.
The second thing we do is use the MySQL built in SUM functionality, which
counts the total number of a fields values and our third action is to group
the items together by the products ID so we dont get duplicates in the results
and invalidate the results.
Now it may look like weve done most of the work and in a way we have;
the painful part is out of the way but the function isnt finished. We have to
process the data we have into a format thats both semantic and flexible to use
throughout our new shop.
The method we use to go about this is by writing a loop that will go over
the data and output our most popular products. To execute our loop we utilise
the code below, which individualises the product from the data set we fetched
from our query meaning we can write each out quickly, easily and efficiently.
//Loop through the results
<?php
foreach ($popular_products as $item) {
$product = get_post($item['prodid']);
$the_title = $product->post_title;
$the_image = get_the_post_thumbnail($item['prodid']);
$the_price = the_product_price($item['prodid']);
$the_link = get_permalink($item['prodid']);
}
?>
Well flesh out the loop now with some HTML and Ill explain the WordPress
functions as I use them. A lot of developers that use WordPress dont know of
these functions and write terrible code as a polyfill, slowing the whole site
down. Ill just stick to a two-column layout for the HTML: this is pretty standard
for most product pages. This code goes inside the loop:
<div class="product-grid popular-<?php echo $item['prodid']?>">
<a class="popular-name">
<?php echo $the_title?>
</a>
<a href="<?php echo $the_link?>">
<span class="img">
<?php echo $the_image?>
</span>
<span class="price">
<span>
From only
</span>
<?php echo $the_price?>
</span>
As a piece of software, WP e-Commerce is incredibly well-built and

continues to get better. With such a large user base and a company
backing it up, its always being worked on and its blog is updated
regularly with news of updates and hot-fixes.
Some big companies are now bestowing trust in the project, such as
Icon Dock and City Surf; you can actually see the many hundreds of sites
in their showcase on the WP e-Commerce website (http://getshopped.
org/showcase). Some additional basic functionality would still be useful,
such as popular products and a better search functionality. But as with
most pieces of open-source software, it can be customised if you
absolutely must have this or that functionality; if you dont have the
resources to dedicate to extending, you can always pay a relatively low
price for e-Commerces own extensions (which of course are also
continuously developed by the company and the community).
If youre thinking of starting an online shop or need to add the
functionality to an existing WordPress install, WP e-Commerce is very
simple to get running. Theres little work required to get your theme and
the plug-in to play, and on top of all of the options you already have
there are free and premium templates ready for you to download.
With any purchase of extensions from the WP e-Commerce site, you
also get a premium support ticket giving you faster access to the support
team and what can only be assumed are higher-level support queries,
such as theme and cart help. With a massive number of supported
payment and shipping providers, youll be able to please any customer
with any card.
Ive been using WP e-Commerce for a number of years now. Ive
helped many people, and many people have helped me, integrate,
customise, bend and squeeze every ounce of the power of WordPress
out of it and have built some very powerful, very successful online
shops. Next to Magento (www.magentocommerce.com), WP
e-Commerce is quickly becoming a standard for online shopping.
Happy customer Icon Dock (www.icondock.com) uses WP e-Commerce
</a>
</div>
You may have noticed a function called in a previous code block named
the_product_price. This function is very simple: it just returns the price of the
product. It takes two arguments, and if you pass in the second one you will get
the special_price. In WP e-Commerce this is simply the sale price, which you
can find in the product admin page. The first argument is the products ID,
which is a unique number given to each product.
function the_product_price($id, $special_price = false) {
if ($special_price) {
return wpsc_currency_display(get_post_meta($id,
'_wpsc_special_price', true));
} else {
return wpsc_currency_display(get_post_meta($id, '_wpsc_price', true));
}
}
Tutorial
Codex cracker The WordPress Codex is a great resource for learning to get to grips
Proud parent WP e-Commerce is the child of GetShopped (www.getshopped.org); its
with WPs integral functions, which are worth putting to use wherever possible
also home to the forum and runs on WP e-Commerce itself selling premium plug-ins
Now to use this as a shortcode within your pages (shortcodes dont work
on posts for some reason) you only need one line of code its another
one of those magical WordPress functions.
The first argument of the add_shortcode function is a string that you would
use within your page; the second argument is the name of the function weve
just finished writing.
to expand the search to include categories and tags to give your shoppers the
best experience possible when browsing your online shop.
Assuming youve been adding products to your shop and have already
found the categories page within the admin area (under the Products menu
we looked at earlier in the tutorial), and youve added your categories and your
products to them, we can go ahead and start customising our search form and
results page. This will make it as easy as possible for your shoppers to get from
visitor to putting money in your pocket.
WordPress has some weird terminologies when it comes to searching
specific fields, such as categories not actually being categories they are called
taxonomy and as such we have to do a special query to get them out! So to
acknowledge our goals were going to customise the search form to include
a new field.
First we need to open our search form template in our theme: its called
searchform.php (if you dont have one in your theme folder, create one). Were
going to customise the form open a form tag like this:
//Add the shortcode

add_shortcode('popular_products', popular_products);
Improving WordPress search for products

Getting WordPress search to rock your socks instead of sucking harder than a
vacuum can be a mammoth task if you need something detailed but there are
easier ways to do it. (Theres always an easier way to do something!)
The later versions of WordPress and WP e-Commerce enable you to search
products because theyre added as pages, whereas in more elderly versions of
WP e-Commerce they were a separate table and separate post type altogether,
a nightmare. In 2012, luckily, search just works but only just, so were going
WordPress best practices
WordPress can be done one of two ways: really well or so terrifyingly

badly that youll fall to your knees screaming why?. But jokes aside,
its an absolutely astonishing piece of software that enables any level
of developer to install, customise and sell.
This isnt always the good thing its made to sound, since more often
than not youll be given a project that will just cause you issues. But
another thing thats great about WordPress is that it has a very thorough,
well-thought-out framework powering it, so re-factoring any install is a
simple and very smooth procedure. Most of the work is usually in the
themes functions.php; I find the best way to keep this file workable and
maintainable is to create a folder in the theme directory called lib and
make separate files for the different pieces of functionality of your theme.
On top of separating functionality into different files and including
in your functions.php the location of different pieces of code such as
headers, footers, articles and sections (otherwise you will end up chasing
code around your different themes files), your meta information, style
sheets, favicons and the opening <head> tag should all go in the header.
php. The article, aside, section, nav elements, and so on, should go in
any of the single.php, post.php and other body template files and of
course your footer elements should go in the footer.php.
Youll also find that not enough internet tutorials utilise the built-in
WordPress functions to attain the functionality youre looking for. Most if
not all of what you want to do can be achieved by using WordPresss
integral functions, and I encourage you to use them as much as humanly
possible. They protect you and your shop from security threats, theyre
optimised and youll never have much of an issue learning how to use
them after reading the WordPress Codex (http://codex.wordpress.org).
54
<form id="searchform" action="/">

The action is set to root because WordPress will automatically detect the search
query and dish the template out for it. Well now add our search fields to the
body of the form:
<input type="text" name="s" placeholder="Keywords" />
This is the default WordPress search field. The name s is the search parameter
that WordPress uses to search the content and title of each post. Although
were customising the search this parameter will still search the body and title
of the product pages.
The placeholder attribute is the default text that, as you start to type, will
disappear and automatically reappear if you didnt enter anything; this would
need to be JavaScript controlled by your theme. The Sticks & Stones theme
already does this for browsers that dont support cool attributes. (Im looking at
you, Internet Explorer.)
Lets add another field so we can search the categories weve added:
<input type="text" name="term" placeholder="Categories" />
Well be using the field above to search our product taxonomies. The
name term is the WordPress default search attribute for taxonomies; your WP
e-Commerce products are all under a post type and their categories are all a
custom taxonomy.
Finally, lets add our submit button and close the form tag we started above.
This is all incredibly standard stuff but dont worry: were getting closer to the
really cool bit that is changing the way the WordPress search works and getting
what we want from it.
<input type="submit" class="submit" name="submit" id="searchsubmit"
value="Search" />
</form>
Tutorial
Little and large Companies of all sizes are turning to WP e-Commerces software
because its comprehensive and simple to use, without the cost of development times
Dream theme The brilliant, free Sticks & Stones theme by Tipsy & Tumbler (http://
Right, thats our form taken care of. Save it and upload it youll see your new
form appear where the search forms used to be. Now lets take a look at
WordPresss search functionality what were going to be doing is adding a
filter to the search function that pulls out results that match our custom
taxonomies. This seems really difficult to do, but actually takes just five lines
of code; you could say its easier than setting up WordPress.
Open your functions.php and add the following block of code to the bottom
of it Ill explain the code afterwards:
This is less than helpful, so what we need to do is have our search redirect to
the categories page and list the products within there rather than modify global
WordPress behaviour. The reason we would want a redirect is that we dont
want to edit core WordPress behaviour, because we wont be able to update
and so may introduce security issues (also the lack of updates means were
missing out on important security fixes and feature updates).
So lets look at how to get the category as a definitive go-to for the redirect
and get these searches running smoothly for all your buyers.
First we need to know whether we have a valid search or not. If we dont
have a valid category we should set this as our search query and perform a
search there. This will by default return nothing and your formatted no results
page, or if it does find something it will display that: all angles taken care of.
Lets look at how were going to check for the query string, again using
hooks. WordPress knows how to look after WordPress so lets keep at it. Start
by opening a function body in functions.php and adding this code to it:
function search_by_tax_filter (&$query) {

if ($query->is_search)
$query->set('taxonomy', 'wpsc_product_category');
}
//Add the filter
add_action('parse_query', 'search_by_tax_filter');
This may not look like much, but it actually does a lot like they say, good
things come in small packages.
Cross-selling is important; its

also crucial customers have a
pleasant buying experience
What we do here is to work from the bottom upwards. We add a filter hook to
the WordPress hook system. This means weve effectively put a listener in the
system and were listening every time we construct a query (thats every page
load in this instance).
Now, I always opt for this kind of method since using a new WP_Query
damages the rest of the pages queries, meaning all kinds of crazy things will
happen. (That is, if youre human like myself and every other developer and
you forget to add the wp_reset_query() call at the end of the function creating
a new WP_Query.)
This is all kinds of fun but since were using a WordPress function to
modify WordPress behaviour, we avoid having to do any of the back-breaking
labour. It looks after itself.
The function above, where were adding the hook, checks that the query
were running is a search query (not a generic query). We then add a new
search clause to the query its currently building we only want WP
e-Commerces product category (the search term comes from our form field)
to appear in the results.
Now we have our search working we need to do a few more things to it to
make it actually useful, since if you test it by filling out just the category youll
get a list of all of your posts but no products. This is because we havent
entered a search term and WordPress doesnt count this as a valid search so
sets the is_search variable to false, meaning our query is never modified and
the results are invalid.
netm.ag/sticks-232) is responsive and needs no tinkering to play with WP e-Commerce
function fix_empty_search ($query) {

global $wp_query;
if (isset($_GET['s']) && empty($_GET['s'])) {
The code above does three things: first, it checks for a search parameter in the
URL and then it checks if it has a value. If it passes that level of validation we
have a candidate for checking within WP e-Commerce if it is a valid category to
redirect to.
To check if we have a valid category we use the following block of code:
if (get_term_by('slug', $wp_query->query_vars['term'], 'wpsc_
product_category'))
wp_redirect("/?wpsc_product_category={$_GET['term']}");
else
$query->set('s', $_GET['term']);
This uses the WordPress function get_term_by to check whether the category
exists. If it does, the function will return an object containing the details of the
category, and if it doesnt exist it will return false, which is perfect for our little
check. If the function doesnt return false its a valid category, and we use the
wp_redirect function to redirect the user to the category page
and if it isnt a valid category, it will re-perform the search using the category as
the search term in the hope the user can find something close to what they
were looking for. l
About the author

Name Dave Mackintosh
Site http://davemackintosh.co.uk
Areas of expertise Frontend development, PHP, ColdFusion
Projects Titanium Community Group, Blog Power Hour
What do you wish youd invented? Self toasting pop-tarts
(only the strawberry flavour though; the chocolate ones
arent worthy!)
Tutorial
Custom fields
Custom fields with

Meta Boxes in WP
Ryan Taylor explains how to add metadata to a WordPress post by creating
and adding Meta Boxes and improving the usability of custom fields
Knowledge needed: PHP, experience with WordPress
array(
'name' => 'Quote - Source',
'desc' => '(Optional) URL to the quote source',
'id' => 'pf_quote_source',
'type' => 'text',
'default' => ''
)
Requires: WordPress
Project Time: 30 minutes
We can add additional metadata to a post by using Custom Fields.
The problem with Custom Fields is theyre not very user-friendly. If
youre designing for a client you need to explain what they are, what
needs to be entered and also hope they dont forget to do it. This is where
Meta Boxes come in handy! Let's get started
01. What are Meta Boxes?

A Meta Box is a custom section that can be added to a post/page screen. It can be
used to group Custom Fields together and give them context.
You can have as many form fields as you need in a Meta Box as well as use
other input types such as checkboxes and radio buttons. Theyre still Custom
Fields and you call the values in your theme the exact same way:
)
);
This is simply an array declaration that we will pass to a series of functions to
create our Meta Box. Were going to look at those functions next, but once
theyre written, all youll need to do is add array entries like the one above to
your function.php file to quickly add Meta Boxes to your themes.
The above entry will add the Additional Post Format Meta box that I use on
my blog to the post screen.
If youre using Custom Post Types you can add a Meta Box to them as well by
adding another array entry. Heres an example for a Post Type called Books:
get_post_meta($post_id, $key, $single);

Were just making the admin UI more usable with labels, instructions and
better formatting.
02. Create a Meta Box

When I build WordPress themes I use Meta Boxes with my posts all the time and
often I have Custom Post Types (codex.wordpress.org/Post_Types) registered that
I also want to have Meta Boxes applied to.
The code Im now going to talk you through will enable you to quickly add
Meta Boxes to any and all of your themes Post Types.
We start off by adding the following code to our functions.php template file
(if this file doesnt exist in your theme then create it):
//We create an array called $meta_box and set the array key to the relevant
post type
$meta_box['post'] = array(
//This is the id applied to the meta box
'id' => 'post-format-meta',
//This is the title that appears on the meta box container
'title' => 'Additional Post Format Meta',
//This defines the part of the page where the edit screen section should be
shown
'context' => 'normal',
//This sets the priority within the context where the boxes should show
'priority' => 'high',
//Here we define all the fields we want in the meta box
'fields' => array(
array(
'name' => 'Link - URL',
'desc' => 'URL for the link',
'id' => 'pf_link_url',
'type' => 'text',
'default' => ''
),
56
$meta_box['books'] = array(
'id' => 'book-meta-details',
'title' => 'Book Meta Details',
'context' => 'normal',
'priority' => 'high',
'fields' => array(
array(
'name' => 'Summary',
'desc' => '(Max 45 words) Note: Leave all other fields blank if the book is
not on sale yet.',
'id' => 'book_summary',
'type' => 'textarea',
'default' => ''
),
array(
'name' => 'Buy Now URL:',
'desc' => '',
'id' => 'book_ buy_now_link',
'type' => 'text',
'default' => ''
),
array(
'name' => 'Price:',
'desc' => 'e.g. £9.95',
'id' => 'book_price',
'type' => 'text',
'default' => ''
),
array(
'name' => 'Book is on sale?',
'desc' => '',
'id' => 'book_on_sale',
'type' => 'checkbox',
'default' => ''
Tutorial
),
array(
'name' => 'Sample PDF Url',
'desc' => '(Optional) Link to a sample PDF.',
'id' => 'book_sample_url',
'type' => 'text',
'default' => ''
)
)
);
Notice that we change the array key to reflect the post type that the entry
applies to. Once youve created all the array entries that you want you need to
add the following line of code to run the functions that will actually create the
Meta Box(es).
add_action('admin_menu', 'plib_add_box');
//Note that this line only needs to be run once.
03. Keeping everything tidy

This is an optional step, but to keep everything tidy Ive created a file called
preset-library.php, which I add to my themes and include at the top of function.
php like so:
include('preset-library.php');
I find separating functions that never change from the code that calls them
easier to work with than having everything clumped together. If you want to do
this too, add the following functions to preset-library.php, otherwise add them to
the top of functions.php.
04. Adding the Meta Box

The first function is a relatively simple one.
//Add meta boxes to post types
function plib_add_box() {
global $meta_box;
foreach($meta_box as $post_type => $value) {
add_meta_box($value['id'], $value['title'], 'plib_format_box', $post_type,
$value['context'], $value['priority']);
}
}

We loop through the $meta_box array we defined earlier and pass each
entry into the WordPress function add_meta_box (codex.wordpress.org/
Function_Reference/add_meta_box). Youll see that one of the parameters for
this function is a callback to another function called plib_format_box. Well cover
this one next.
05. Formatting the Meta Box

This function applies the HTML formatting within the Meta Box for each input field.
//Format meta boxes
function plib_format_box() {
global $meta_box, $post;
// Use nonce for verification
echo '<input type="hidden" name="plib_meta_box_nonce" value="', wp_
create_nonce(basename(__FILE__)), '" />';
echo '<table class="form-table">';
foreach ($meta_box[$post->post_type]['fields'] as $field) {
// get current post meta data
$meta = get_post_meta($post->ID, $field['id'], true);
echo '<tr>'.
'<th style="width:20%"><label for="'. $field['id'] .'">'. $field['name']. '</
label></th>'.
'<td>';
switch ($field['type']) {
case 'text':
echo '<input type="text" name="'. $field['id']. '" id="'. $field['id'] .'"
value="'. ($meta ? $meta : $field['default']) . '" size="30" style="width:97%" />'.
'<br />'. $field['desc'];
Custom fields
break;
case 'textarea':
echo '<textarea name="'. $field['id']. '" id="'. $field['id']. '" cols="60"
rows="4" style="width:97%">'. ($meta ? $meta : $field['default']) . '</textarea>'.
'<br />'. $field['desc'];
break;
case 'select':
echo '<select name="'. $field['id'] . '" id="'. $field['id'] . '">';
foreach ($field['options'] as $option) {
echo '<option '. ( $meta == $option ? ' selected="selected"' : '' ) . '>'.
$option . '</option>';
}
echo '</select>';
break;
case 'radio':
foreach ($field['options'] as $option) {
echo '<input type="radio" name="' . $field['id'] . '" value="' .
$option['value'] . '"' . ( $meta == $option['value'] ? ' checked="checked"' : '' ) . '
/>' . $option['name'];
}
break;
case 'checkbox':
echo '<input type="checkbox" name="' . $field['id'] . '" id="' . $field['id']
. '"' . ( $meta ? ' checked="checked"' : '' ) . ' />';
break;
}
echo '<td>'.'</tr>';
}
echo '</table>';
}
The function loops through the fields section of each entry of the $meta_box
array and prints out the supplied values.
06. Saving data from the Meta Box

Finally we need to tell WordPress that the fields exist and how to save them with
the Post. l
// Save data from meta box
function plib_save_data($post_id) {
global $meta_box, $post;
//Verify nonce
if (!wp_verify_nonce($_POST['plib_meta_box_nonce'], basename(__FILE__)))
{
return $post_id;
}
//Check autosave
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
return $post_id;
}
//Check permissions
if ('page' == $_POST['post_type']) {
if (!current_user_can('edit_page', $post_id)) {
return $post_id;
}
} elseif (!current_user_can('edit_post', $post_id)) {
return $post_id;
}

foreach ($meta_box[$post->post_type]['fields'] as $field) {
$old = get_post_meta($post_id, $field['id'], true);
$new = $_POST[$field['id']];

if ($new && $new != $old) {
update_post_meta($post_id, $field['id'], $new);
} elseif ('' == $new && $old) {
delete_post_meta($post_id, $field['id'], $old);
}
}
}
add_action('save_post', 'plib_save_data');
Tutorial
Build a multilingual site
Build a multilingual
site with WordPress
Take your WordPress site to the world. Shannon Smith, founder of Caf Noir Design,
explains what components are needed for a successful multilingual site with WordPress
Knowledge needed Intermediate (X)HTML, CSS, WordPress themes, basic
familiarity with .htaccess
Requires Poedit or similar recommended
In most of the world, a multilingual web isnt the exception, its the
norm. About two-thirds of the world's population use more than
one language in the real world, so its no surprise that they use
those languages online as well.
People often assume that English is the de facto language of the web, but
the majority of internet use now occurs in a language other than English
(www.internetworldstats.com/stats7.htm). As more and more people join the
online world from Russia, China and the developing world, that lead will grow.
For businesses adapting to a global market, as well as organisations
attempting to foster customer loyalty at home, operating a website in multiple
languages, at the same time, is becoming more common. With that in mind,
let's look at techniques you can employ in WordPress to create a multilingual
site. Let's get going
01. Multilingual vs localised
02. Multilingual vs multiregional

Geo-localisation is another term that is often confused with multilingual. Often
large corporations build separate websites for each country in which they
operate and operate those in different languages. Its multi-regional, but that
isnt quite the same as multilingual. Language use, geography and politics do
not overlap perfectly.
03. Strategies for content

There are a few ways of organising your website for multilingual content. The
quick and dirty way is to add an automated translation plug-in (Google AJAX
translation is one) or an automated translation tool, like Google Translate. This
is easy and free, but the translation is not reliable and not very professional.
However, its definitely a practical option for a small personal blog.
Other websites opt for a partial solution. Some bilingual bloggers build a
site in a single language but then write posts in alternating languages,
occasionally translating content themselves.
However, a professional site will need a more robust strategy. The interface
will need to function in multiple languages and the content will probably be
largely mirrored. Human translation is a must; however it is possible to
crowdsource translation using online services like myGengo and Smartling.
Many people confuse a multilingual website with a unilingual website that

functions in a language other than English a localised website.
Building a localised site with WordPress is relatively easy. The WordPress
Language File Repository stores language packs for over 70 languages,
including Welsh, Japanese and even Klingon. And if you dont see your
language, you can always contribute your own language pack. WordPress
works with a number of alphabets, including Latin, Cyrillic and Arabic and also
handles right-to-left written languages.
04. Technical considerations
Language Pack The language pack interface
Google Translate Its easy to add Google Translate to a website
58
Before getting started, youll need to consider the following: In which

languages will you serve content? What about the interface and the admin
panel? Youll probably need a way of switching between languages. You might
also be considering some form of language persistence, often via a cookie so
that visitors dont have to choose a language on each visit. Youll need to think
about your URL structure. Plus, youll need to consider the alphabets youll be
using and text direction.
Tutorial
Language issues Multilingual homepages are common in Canada
Roots theme The Roots theme contains POT, PO and MO files for multiple languages
05. Politics
07. What about themes?
Youll also want to think about the politics of language use. For example,
many language switchers use flags, but this is not really recommended.
Language use and nation-states are not perfectly overlapping entities
and its easy to offend people when you make that assumption. You might
also want to look at cultural considerations in terms of design elements like
colour choice.
A third consideration is choosing a default language. Sometimes this is an
easy choice, but in areas where there isnt a dominant language (Switzerland),
or where language choice is contentious (Canada, Belgium), you cant always
have a single default language. A common option in Canada, for example, is to
have a splash page with a language choice (though, in all honesty, it would be
You will need a WordPress theme that has been localised or internationalised
(many commercial themes have been), or youll need to localise your own
theme. The WordPress Codex contains information on how to localise
WordPress itself, but the information also applies to themes.
The first step is to make your theme translatable. WordPress uses the GNU
gettext localisation framework to translate the WordPress core. It can also be
used in themes.
Every snippet of text in your theme needs to be wrapped with GetText calls.
This means the snippet is passed by one of two PHP functions. __() is used
when the snippet, called a message in the codex, is passed as an argument to
another function; _e() is used the rest of the time. You also need to include a
text-domain, which functions to identify the snippet as belonging to your
specific theme. That means that your theme will include bits of text that look
like this: __('message','theme-name')
Next, youll need to create a PO (Portable Object) file for each language you
plan to use. Commercial themes often already come with .po files for popular
languages. If not, or if you are using a custom theme, you can use a tool like
poedit to generate a file with all the terms wrapped in GetText calls. Some
blank themes like Roots include several language PO files and you can use
these to get started.
After you have PO files, youll want to create MO (Machine Object) files that
speed up the GetText translation process. Tools like poedit can do this for you
as well. More details can be found at: www.urbangiraffe.com/articles/
translating-wordpress-themes-and-plugins.
In areas where there isnt a

dominant language, you cant
have a single default language
more accurate to describe it as a multilingual homepage). Its certainly not
ideal for SEO purposes, but its undeniably a lot better than a bunch of
angry visitors.
06. What about SEO?

Google has some detailed information on what it expects to see with
multilingual sites. It wants the language to be obvious. That means not mixing
languages on a single page. Google also suggests blocking automated
translations from search engines, since they can be so unreliable that they
confuse search engine crawlers.
Google suggests separating languages by URL, either by using different
subdomains (de.example.com, en.example.com), subdirectories (example.com/
en, example.com/es) or entirely different domains (example.com, example.fr).
Google also wants the language to be easily discoverable. Each page should
be cross-linked to the other language versions. Using cookies to save language
choice isnt recommended, and using JavaScript to do the same can be tricky,
unless the JavaScript degrades gracefully.
Google discourages automatic redirection based on the visitors browser
language or by geo-mapping IP addresses, since this also blocks search
engines. That makes language persistence difficult to implement as well.
Google also ignores language labels in your sites HTML.
08. The multi-installation method

Once you have some translated content and a localised theme youll need to
start building your site. One way to do this is by creating a network of sites,
one in each language. If you want to, you can use the multisite functionality
built into WordPress. The WordPress codex has information on activating this
feature, but its quite simple.
The only plug-in you will need to build a multilingual site with this option is
a language switcher. If you are using only two languages, you can use the
Bilingual Linker plug-in. Otherwise you can use the Language Switcher plug-in,
though as of 2010 this plug-in is no longer being maintained. If you go with
the multisite option, you can use the Multisite Language Switcher plug-in.
There are several advantages to this solution. This is very stable. It allows for
the content to be identical across languages, or not. However it can mean
more maintenance. You can reduce this using the multisite feature so
that you only have to update one WordPress installation and one
Tutorial
GetText The Roots theme files include GetText calls
Multisite Language Switcher Configure the switcher on a per-site basis
theme. You can also use child themes if you need to modify colour
schemes for cultural reasons, for example. But you will still need to
manage content across several sites.
And note that some shared hosting providers do not permit multisite
installations on their servers. If you arent using multisite, you could try the
ManageWP Worker plug-in to access all your sites through one dashboard (I
havent tried this, though).
remove all the other language versions from each WordPress page and post.
That can be extremely time-consuming.
The single-installation method solution has advantages. The WPML plug-in
is very easy to use and to install. It makes it easier to maintain the content of
your site, since you only need to use one administration panel and can easily
jump from one language version to another. You can translate plug-ins that
arent available in your language. In fact, almost every part of your site can be
translated using the plug-in interface. However, some more complex plug-ins,
especially ecommerce plug-ins, wont work with WPML. The WPML plug-in
can also be buggy. There are a few built-in troubleshooting tools, but they
are hard to find and are not especially user-friendly for clients.
09. The single-installation method

Another solid option is to build a single WordPress site and use a multilingual
WordPress plug-in.
There are several plug-ins available but the WordPress Multilingual Plug-in
(WPML) is arguably the best. There is a free version, but if you want to translate
your menus (probably!) and use the latest version, youll need to pay for the
$79 CMS commercial version. The plug-in enables you to translate the
WordPress posts and pages that make up your site. It creates separate posts
and pages for each language and lets you link them to one another. It also
enables you to translate the menus, widgets, as well as plug-ins.
There are other plug-ins that work in a similar way (qTranslate) but they have
one major drawback. They write all the languages to the same database tables,
and then show only one version of the content to the visitor at a time. That
means that if you ever decide to uninstall the plug-in, youll need to manually
10. Advanced features

Just because your site is multilingual doesnt mean it needs to be simple. I
have not personally tried all of the following tools and plug-ins in
The WPML plug-in is very easy

to use and to install. It makes it
easier to maintain the content
of your site
multilingual installations, but Im listing them here to give you an idea of
what is possible.
eCommerce can be tricky with a multilingual site if you need to keep track
of inventory, for example. You can integrate WordPress with Magento or
PrestaShop, which are multilingual. If you are using WPML, you can use
MarketPress, CartPress or Shopp. There are a few options, so look around
and see what fits best with your workflow.
If you need a fully bilingual email marketing solution, you can do that too.
CakeMail offers a fully bilingual product, though it is a little pricey. If you use
Campaign Monitor, you can use multiple sub-accounts for each language.
You can also use multiple installations of PHPList.
If you need complex forms, both the online service Wufoo and the
WordPress plug-in Gravity Forms can provide those.
There are also a number of solutions for multilingual forums and wikis,
though often you will need multiple installations of each. Hopefully, this gives
you an idea of how to get started creating a multilingual site in Wordpress! l
WPML This enables you to operate a site in multiple languages with a single installation
60
Shannon Smith is the founder of Caf Noir Design, which specialises

in multilingual web development. She supports things like making the
web accessible for everyone, and using open source software. Read her blog
at chroni.ca.
THEBESTLOGOSEVER
A panel of leading branding and identity design experts come together
to bring you the definitive list of the 50 best logos ever. Gain exclusive
insight into the creative processes behind the most recognisable identity
design work in the world. If you love logos, youll love this!
On sale now at WHSmith, Barnes & Noble, www.myfavouritemagazines.co.uk
and for iPad at http://goo.gl/sMcPj
Tutorial
Filter with
Infinite Scroll
Download
the files! >
All the files you

torial
need for this tu
http://
can be found at
8
-23
/js
.ag
tm
ne
Emma Lewis shows how to combine a Masonry layout with in-page category filtering
and Infinite Scroll to create a homepage that provides easy access to all of your content
Knowledge needed Intermediate jQuery, basic Wordpress
Requires Basic Wordpress installation, tutorial-base-theme folder and
tutorial.wordpress.xml file from the accompanying tutorial files
In this tutorial were going to produce a homepage that displays filterable

content in a Masonry layout, using Infinite Scroll to load older articles as the
user journeys down the page.
Basic set-up
Im going to use WordPress, but the jQuery we develop can be applied with
minor changes to any CMS. Download WordPress from www.wordpress.
org, log into the CMS and add the Advanced Custom Fields plug-in (www.
advancedcustomfields.com). We use this to add a custom size_on_homepage
field to posts, so we can select the size of each article in the Masonry layout.
I have exported 150 dummy posts 30 for each of five categories along
with a Primary Menu (of categories), which will be used for filtering. These are
saved in tutorial.wordpress.xml. Import the tutorial posts and menu (Tools >
Content-based websites often link to articles from the homepage,

but previewing all articles on a single page has a dramatic impact
on performance. Introducing pagination reduces load time and Ajax
can prevent the need for page reloads. Paul Irishs Infinite Scroll jQuery
plug-in (www.infinite-scroll.com) develops this solution further by removing
pagination from the user journey and gradually adding more content,
growing the page as the user scrolls.
The Masonry layout has become a popular way of displaying content. As
well as being visually appealing, the use of differently sized blocks for individual
pieces of content helps to highlight prominent articles. The Metafizzy Isotope
jQuery plug-in (http://isotope.metafizzy.co) provides documentation on
integrating Masonry with Paul Irishs Infinite Scroll.
But what if you additionally want your content to be filterable by category,
without having to reload the page? That was the challenge that we faced at
Zone (www.thisiszone.com) during our recent project to reskin the Relentless
Energy Drink website (www.relentlessenergy.com).
Isotope offers in-page filtering, which operates by hiding elements on the
page. Unfortunately, this cannot be used in conjunction with Infinite Scroll
this is because the pagination takes into account hidden items and the user
experience becomes very strange.
The Isotope website states: I recommend against using Infinite Scroll with
filtering or sorting new content gets added, but part of it might be hidden.
There is no way for the user to tell what gets hidden or re-arranged when
Infinite Scroll adds more content.
Import > WordPress in the CMS you may need to first install the WordPress
Importer plug-in). Navigate to the Primary Menu (Appearance > Menus), and
enter your homepage URL into the All Categories URL field.
To ensure that we have clean URLs, choose the Post name permalinks option
(Settings > Permalinks). Finally, in your file tree, add the tutorial-base-theme
folder to /wp-content/themes/ and activate it in the CMS (Appearance >
Themes). In this tutorial we will be editing the theme files, which you should
access from your favourite text editor.
Take a bow The finished tutorial site complete with Isotope, filtering and Infinite
Scroll, working together to form a coherent user experience
Isotope David DeSandros jQuery plug-in enables a range of block layouts, including
the popular Masonry format, making it easy to display content in interesting ways
62
Masonrys use of differently

sized blocks helps to highlight
prominent articles
Tutorial
Image loading with Isotope

Scrolling onward Paul Irishs Infinite Scroll jQuery plug-in loads new content as the
user scrolls down the page and it integrates nicely with Isotope
We are using a very basic theme designed to get the tutorial up and running
as easily as possible. The two plug-ins that we are interested in, namely Isotope
and Infinite Scroll, are stored in /js/libs.
If you load the homepage you should see a header bar with a home
buttonand category filters and a page container showing the first 10 articles,
each floated left. You can change how many articles appear on each page in the
CMS(Settings > Reading).
Markup
With set-up complete, lets make some changes to our homepage markup.
Well start with header.php. The navigation bar uses standard boilerplate
markup, with the wp_nav_menu function rendering the Primary Menu links.
Lets add a class filters to the content div as follows:
<div class="content filters ">
Now edit index.php. We need to add a div to which Masonry will be applied.
As Infinite Scroll is triggered, new articles will be appended to this div. We also
need to add pagination (which will later be hidden by Infinite Scroll). Alter the
start and end of the loop as follows:
Care must be taken when using Isotope with content that includes
images. If the height attribute of the image is not set inline and the
images have not finished loading before Isotope initialises, the article
heights will be calculated as smaller than they should be and Isotope
will position these articles in such a way that they overlap on the page.
In this tutorial we have fixed image heights. If you dont have a
fixed image height that can be hard-coded in the HTML, you have two
options: the first is to initialise Isotope within $(window).load() rather
than $(document).ready(), thus delaying Isotope from initialising
until all of the media on the page has loaded; the second and often
better option makes use of imagesLoaded, which is a small plug-in
included within Isotope.
imagesLoaded is called on the container element and takes a
singleparameter, a callback function, to be fired once all of the
imageswithin that element have been loaded. Isotope can be
initialised within this function, ensuring that elements are only
positioned once all images have loaded. Compared with using
$(window).load(), this method has the advantage of only waiting for
images within the container to load, rather than all of the media on
the page, which could be quite a saving if the page contains social
media buttons, tracking, videos and so on.
Even if you do know the height of your images, the imagesLoaded
plug-in can be a useful tool. For example, you can set the opacity
of all images to zero using CSS and put a loading GIF on the image
container; then use the callback function to set image opacity to one
and hide the loading GIF. This causes all of the images to display
loading GIFs until loading is complete and then, preferably using
anice CSS transition, fade in simultaneously.
<?php if (have_posts()) : ?>

<div class="masonry">
<?php while (have_posts()):the_post(); ?>

<?php endwhile; ?>
</div>
<div class="pagination"><?php next_posts_link(); ?></div>
<?php endif; ?>

Masonry
Lets get started on some JavaScript. First well add the elements that weve just
created as variables in the init function of tutorial.js:
Tutorial.masonry = $('.masonry');
Tutorial.filters = $('.filters');
Tutorial.pagination = $('.pagination');
Its now time to initiate Masonry. We do this by writing an initMasonry
function that calls Isotope on Tutorial.masonry, specifying the selector of
ourarticles as .article.
Isotope uses a Masonry layout by default, but we need to specify
the columnWidth property. This sets the grid in which articles will be
Masonry grid A columnWidth of 200px enables us to use articles of 190px, 390px and
590px, each with a right margin of 10px
Tutorial
Bear with us We use a custom message and GIF with Infinite Scroll in order to show
that new content is being appended
Filtering Our filtering function updates the infinite scroll page URL so that there are no
positioned the left position of each article within the container will
always be a multiple of this value. Our articles are 190px, 390px and
590px wide, and each has a right margin of 10px, so columnWidth is set to
200px. Add initMasonry to your JavaScript file and call it from init.
the masonry div is taller than the height of the window. Add a function
checkContentFillsPage:
initMasonry: function() {
Tutorial.masonry.isotope({ itemSelector : '.article', masonry: { column
Width: 200 } });
}
Reload your homepage, and note how Isotope has filled some of the gaps that
were present when floating.
Infinite Scroll
Lets initialise Infinite Scroll with a function initScroll, called after initMasonry in
init, so we can view all of the content without reloading the page. Well call this
function on the masonry div, which will expand to contain the extra content.
initScroll:function(){
Tutorial.masonry.infinitescroll({
navSelector : '.pagination', // selector for the pagination container
nextSelector : '.pagination a', // selector for the NEXT link (to page 2)
itemSelector : 'div.article', // selector for all items you'll retrieve
loading: {
speed:'fast',
finishedMsg: '<span class="bearwithus">Sorry...</span><span
class="loading">No more articles</span>',
msgText:'<span class="bearwithus">Bear with us...</span><span
class="loading">Loading new content</span>',
img: '/wp-content/themes/tutorial-theme/img/ajax-loader.gif'
}
},
// append the new items to isotope on the infinitescroll callback function.
function( newElements ) {
Tutorial.masonry.isotope( 'appended', $( newElements ), Tutorial.
finishedAppending);
});
}
The selector properties should be straightforward. Weve added a loading
message, which displays as new articles are being brought in, as well as a
finished message to display once all articles have been loaded.
The callback function uses Isotopes append function to add these new
articles to the array of elements in the Masonry layout; this in turn has a
callback function that is entered once those articles are appended we will
look at that shortly. Finally we need to ensure that there are enough elements
on the page that the user can scroll in other words, that the height of
64
hidden items in the isotope article array
checkContentFillsPage: function(){
if($('.masonry').height() < $(window).height()){
Tutorial.masonry.infinitescroll('scroll');
}
}
We need to call this function when the page is loaded (in init) and the new
items have been appended to the masonry div. This is where we will use our
append callback function (Tutorial.finishedAppending):
finishedAppending: function(){
Tutorial.checkContentFillsPage();
}
The jQuery we develop in this

tutorial can be applied with
minor changes to any CMS
Load the homepage again and check that new content is being loaded by
Infinite Scroll. Try clicking on a header link and notice how the page reloads
to show filtered content.
Filtering
Now the challenge is to make our header links behave as in-page filters. First
add a line of code to the init function to bind click events on the filters to a
filter function:
Tutorial.filters.find('a').bind('click', Tutorial.filter);
When a filter is clicked we need to intercept the default action. We then need
to ensure we are not in the process of loading new content (with Infinite Scroll)
or appending articles to the masonry div (with Isotope). In order to do this well
need a Boolean variable Tutorial.isScrolling, defined as false in the init function.
Setting this variable to true on filtering will disable further filtering until
the filtered articles have been appended. It should be set to false in the
finishedAppending function. We should also add an errorCallback property to
our Infinite Scroll options in initScroll, setting isScrolling to false, to enable us
to refilter should there be an error in Infinite Scroll.
Next, if our filter is not already active, we filter. We need to transfer the
active class to the correct filter, and we can update the page URL (without
Tutorial
Case study Relentless Energy Drink

This tutorial was inspired by the work that we at Zone carried out as part
of a reskin project for Relentless Energy Drink (www.relentlessenergy.
com). The Relentless Energy Drink website uses the Stellent CMS,
supported by a .NET application. Stellent does not have built-in functions
like WordPress does, so some of the code used in this tutorial needed to
be developed a little further. For example, working out whether or not the
user enters the site on a filtered version of the homepage required the
performance of a regular expression on the page URL.
You might notice that the website has some further features in addition
to those developed in this tutorial. The most obvious of those is the
use of a fullscreen chromeless YouTube video player as the homepage
background, which autoplays playlists. The video is scaled in such a way
that the users screen is always filled, with the height or width of the video
being cropped as necessary (the video is not used on mobile and the
video background does not currently resize when the window is resized as
this was too computationally expensive).
As well as the three standard sizes of article on the homepage, there is
also a larger hero article. This article is selected in the CMS and is sticky,
always remaining as the first article on the homepage.
The use of Masonry continues throughout the site with article pages
being split into blocks of differing sizes, using the .NET application to
split WYSIWIG content using regular expressions. If you are viewing
an article page and click on a category filter, it takes you to a filtered
homepage; in other words the binding of the filter clicks to our
reloading the page) using the history.pushState function. This enables the user
to navigate directly to bookmark, filtered content, and allows the website owner
to channel people to specific categories should they wish. We should also add
a line to init to check whether the user is on a filtered page when they arrive
at the site and add the active class accordingly. By making use of WordPresss
menu classes, this becomes a simple task:
$('.filters li.current-menu-item').addClass('active');
Filtering is achieved via Ajax using $.get. We remove all articles from the
Isotope array, reset Infinite Scroll and then repopulate the Isotope article
arraywith filtered articles.
filter:function(e){
e.preventDefault();
var $this = $(this);
if(Tutorial.isScrolling || $this.hasClass('btn')){
return;
}
else if ( !$this.parent('li').hasClass('active') )
{
Tutorial.filters.find('.active').removeClass('active');
$this.parent('li').addClass('active');
if($this.hasClass('brand')){
$('ul.nav li.all').addClass('active');
}
var $url = $this.attr('href');
if(history.pushState ){
history.pushState('', document.title,$url);
}
$.get($url, function(data){
$data = $("<div>" + data + "</div>");
$data = $data.find(".masonry");
var $new = $data.find('div.article');
Tutorial.masonry.isotope( 'remove', $('.article' ));
Tutorial.resetScroll($url);
Tutorial.masonry.isotope('insert',$new);
window.scrollTo(0,0);
Tutorial.finishedAppending();
});
}
}
Unstoppable The Relentless Energy Drink site reskin (www.relentlessenergy.com)

uses homepage filtering, Infinite Scroll, Masonry and fullscreen background video
JavaScriptfilter function is only applied on the homepage. This means that
the user experiences consistent behaviour, when in fact the functionality is
entirely different.
The homepage has a fixed header, sidebar and footer. The homepage
elements possess backgrounds with gradients and partial transparencies.
The site degrades gracefully in older browsers and is fully functional when
JavaScript is disabled.
Our resetScroll function needs to update the Infinite Scroll page URL to the
correct category page and reset Infinite Scrolls internal states. When the user
scrolls to the end of any page, the Infinite Scroll plug-in overwrites the loading
message with the finished message, so we must also reset the loading message.
We then bind the Masonry container to the updated Infinite Scroll.
resetScroll:function(newPath){
Tutorial.masonry.infinitescroll('update', {
path : [(newPath) + 'page/',''], // new path for the paged navigation
state: {
isDuringAjax: false,
isInvalidPage: false,
isDestroyed: false,
isDone: false, // For when it goes all the way through the archive.
isPaused: false,
currPage: 1
},
loading: {
msg: $('<div id="infscr-loading"><img alt="Loading..." src="/
wp-content/themes/*YOUR_THEME_NAME*/img/ajax-loader.
gif" /><div><span class="bearwithus">Bear with us...</span><span
class="loading">Loading new content</span></div></div>')
}
});
Tutorial.masonry.infinitescroll('bind');
}
Thats it! We have access to all of our content on a single page, laid out in a
clear interface. A live example is at http://netm.ag/infinite-238. l
Thanks to David DeSandro (@desandro) for his peer review of this tutorial
About the author

Name Emma Lewis
Company Zone
URL www.thisiszone.com
Areas of expertise WordPress, .NET, JavaScript
Clients Coca-Cola, Tesco, New Philanthropy Capital
What do you wish youd known when you were 15?
Code is a great way to combine art with maths
Tutorial
Build a custom portfolio
01
66
02
Tutorial
Build a custom
folio in WordPress
Derek Chan reveals how to create a Wordpress, Twitter and Tumblr integrated portfolio
Its no secret that you can reach bigger audiences with an online
showcase than a traditional folio book. There are many CMS
options that are effective for building folio sites, but few free ones
are as strong as WordPress.
WordPress is a powerful CMS that extends beyond the basic blog site set
up, enabling users to customise it to create the perfect professional folio.
One of its main advantages over other systems is its extensive and varied
collection of plug-ins, which include social networking widgets that are
especially useful for helping creatives promote themselves. The other great
thing about WordPress is its support forums: you can get help for almost
any topic related to the CMS.
This tutorial assumes some existing knowledge of the WordPress platform,
and that you have a self-hosted installation rather than the basic version on
WordPress.com. Here, Ill guide you through how Ive installed and
customised three key plug-ins to create a slick grid-based portfolio.
The first step is to do some research. There are many ready-made
themes for WordPress, so have a look through these and see which
ones best fit your needs. For my site, I wanted the main focus to be on my
portfolio pieces.
Your website layout itself should be unobtrusive, light and clean. It should
be easy to navigate, so it needs to be organised. I came across two great gridbased sites/themes that were both visually and structurally appropriate for
what I wanted: The Grid System site, a clean layout by Antonio Carusone; and
the Graf Theme, designed by Kwame Busia of Neue Themes.
01
02
04
After looking at these two website designs, I knew I wanted to have the
same grid structure. I looked deeper into the backbone of the sites and
noticed their use of the 960-pixel grid. This is a clean system with great
flexibility. The grid can be divided into two variants 12 columns
and 16 columns which can then be further separated into even smaller
columns. I was especially drawn to the six-column system that The Grid
System uses.
Using the six-column grid, I wanted to structure my site with a top
row navigation of six items, with one column for a left sidebar and
a five-column-wide box for the page contents. Each column will be 140
pixels wide and with 20-pixel gutters in between. To make it easier, I
made my top navigation fixed. This way, when viewers scroll down past
the page, they still have easy access to the page links. I now had a basic
structure to apply to my site design.
03
The six-column grid provides a great structure for my Projects index

page. Using the five columns of the main box, I started applying
thumbnails for each project that I wanted to feature. Its important to keep
your thumbnails the same size, so prepare each image to be the same I
went for 140 pixels wide and 100 pixels high. The result is a neatly
organised table of thumbnails that you can easily add to in the future.
04
The next step is to determine how your individual Projects pages

will look. My images would take up the width of the five columns,
which is a total of 780 pixels. Rather than having a list of images
on top of one another, I wanted a slideshow where viewers can click to
see next and previous pictures. Doing this meant that I could have a
project description below the images, in the exact same position on
every page.
05
05
Tutorial
06
07
08
10
One of the main advantages WordPress has over other blogging

software and content management systems is its wide variety of
different plug-ins. Before attempting to do any hard coding on your own,
always check out the WordPress Plugin Directory (at www.wordpress.org/
extend/plugins). There are thousands available out there, so what youre
looking for almost certainly exists already.
Once you have all the images uploaded and attached, all you have
to do is place the HTML code into the actual post. As you can see,
there are a lot of options to choose from, such as speed, timeout, next/
prev. The speed determines how fast the transition is. The timeout is set
to 0 here, meaning the slideshow does not play on its own. Next is set
to #slideshow-39,.next-link, which means that clicking the slideshow
itself advances the image (the number 39 is the ID number of this
specific post), and clicking the Next link button also advances the
slideshow. With all that done, you should end up with a smooth show.
06
One excellent plug-in is WordCycle, developed by Esther S White a

slideshow for WordPress sites that has great customisation abilities
and many different effects options. To install the plug-in, simply search for
WordCycle in the WordPress Plugin Directory. Once you reach the
WordCycle page, hit Activate. Next, unzip the files and copy the entire
folder into your wp-content/plugins directory. Finally, log in to your
WordPress Admin page and activate WordCycle under the Plugins menu.
The plug-in is now installed and ready for use.
07
Before placing the slideshow into one of your individual project

posts, you need to prepare the slideshow images as you have done
with your thumbnails. I wanted the images to all be exactly the same size
so that nothing on the page shifted.
The size parameter I set for myself was 780 pixels wide and 500 pixels
tall. Prepare and fit every single image to the size that you want
Next, upload all the images onto your Media Library. Once uploaded,
its important to make sure you select the images and attach them to the
specific project post.
08
68
09
On my Blog page, aside from my blog entries, visitors also see my

Tumblr photo and Twitter feeds. To add these I used some
widgets, opting for the simpler ones: Tumblr Widget, by Gabriel Roth;
and the Wickett Twitter Widget (now part of Jetpack) by Niall Kennedy,
Nick Momrik and Beau Lebens.
10
To install the Tumblr Widget, download it (or similar) from the

Plug-in Directory, copy the folder into wp-content/plugins and
press Activate, as with WordCycle. The only difference is that you must
drag the Tumblr Widget into the sidebar panel. These may be named
differently, depending on the theme.
When youve done this, type in your Tumblr URL, select the maximum
number of posts to display and tick Photo Posts. The photo size should
be greater than the width you intend to display them at. I have mine at
250 pixels, because it will scale them to 140.
11
Tutorial
11
12
14
15
One of the main advantages

WordPress is its wide variety
of different plug-ins
For my Tumblr feed, I only included my photo posts. To customise this
to fit my sites theme, I went inside and modified the tumblr-widget.
php file within the Tumblr Widget folder. In here, I nested the photo image
within a divider called tumblr_photo. After ending the tumblr_photo div,
I placed a horizontal break (<hr />). I did this to add a thin grey line
between the photo rows, keeping the section consistent with the rest of
my site design.
12
Now that the HTML code is in there, the next step is to edit the CSS to
style the look of your feed. In my CSS file the tumblr_photo divider is
set at a specified width and height. Here, the dimensions are 140 pixels
wide and 90 pixels tall similar to my project thumbnails, but slightly
shorter because I wanted this list to be more compact than the projects list.
I have also chosen to hide any overflow this ensures that the Tumblr
photo feeds are always consistently cropped to that specific size. Once
youve set your dimensions, you have now built a well-structured Tumblr
photo feed.
13
The last widget we will deal with is the Wickett Twitter Widget. As with
the previous WordCycle and Tumblr plug-ins, you can install and
activate it by getting the relevant folder from the Plugin Directory.
Similar to the Tumblr Widget, we want to drag this new Twitter Widget
into either the same sidebar panel as your Tumblr Widget or into a new one
of your choosing. For my site, I kept it separate because I wanted to keep
them side-by-side. Once youve done this, add your Twitter account username
and select the maximum number of tweets, and, if you want, tick Hide
Replies and/or Include Retweets. Hit Save and then youre done.
14
I also customised the Wickett Twitter Widget. Here, you can see that I
opened up the wickett-twitter-widget.php file and added small snippets
of HTML. I added a specific divider for the twitter-time because I wanted the
time to start on a new line. The second modification I made was to again add
a horizontal break (<hr />) to keep the grey line motif between each tweet.
15
The last step for adding my Twitter feeds to the site was to use CSS to
style the font size for the time details of the posts, and add some
padding to separate it from the text of the actual Twitter post. Here, you will
see that Ive adjusted the font size to 9px and added a padding of four pixels
to the top. Preview the results, and youre done. l
16
Derek Chan is a graphic designer originally from Hong Kong, Chan now works
for creative agency Gin Lane in New York. Primarily a print designer, he also
has experience in web design and motion graphics. www.derek-chan.com
Learn WordPress
40 brilliant tutorials
E
R
MO
40 BRILLIANT
WORDPRESS
TUTORIALS
70
Learn WordPress
01
Even though we've brought you a selection of

expert WordPress tutorials, we thought you may
still be hungry for more (of course you are!). So
we've picked 50 brilliant WordPress tutorials from
around the web that will boost your skills and
introduce you to exciting new techniques.
Because of its enormous popularity, there's a
wealth of WordPress tutorials online to help you
get to grips with the content management system
and here are some of the best.
Whether you're a beginner looking to get
started or a current WordPress user looking to
further your skills, you'll find something here to
help you
FOR BEGINNERS
01
WordPress getting started
This video-based WordPress tutorial will show you

everything you need to get started with the
content management system, including
installation, setting up pages, managing themes,
and adding plugins. Top stuff.
www.youtube.com/watch?v=9LpPZbscjJk
02
WordPress cheat sheet
With all that jargon and coding, it's easy to get

confused with all of the WordPress information
There's a wealth of WordPress tutorials

online to help you get to grips with the
content management system
out there. This handy cheat sheet lays it all out for
you and provides a brilliant go-to for any WordPress
woes and problems.
www.startbloggingonline.com/wordpress-cheat-sheet
03 The beginner's guide to

WordPress menus
Follow along as WordPress expert Paul Kaiser
explains the menu system basics and how to start
using them on your new site in this excellent
WordPress tutorial for beginners.
www.wpmu.org/wordpress-menus
04
Shortcodes - a complete guide
WordPress shortcodes were introduced in version

2.5 and since then have proved to be one of the
most useful features. Get to grips with everything
you need with this complete guide to shortcuts.
http://wp.smashingmagazine.com/2012/05/01/
wordpress-shortcodes-complete-guide
05 How to learn WordPress in

one week
This step-by-step guide to WordPress is aimed at
beginners who are trying to become competent with
the platform in their spare time.
www.wpmu.org/how-to-learn-wordpress
06 Mastering the WordPress

visual editor
Author Tom Ewer takes an in-depth look at the
Visual Editor in this comprehensive WordPress
tutorial for beginners.
www.wpmu.org/mastering-wordpress-visual-editor
07 The WordPress community offers

advice to beginners
Working for Smashing Magazine, Siobhan McKeown
reached out to people from across the WordPress
community to ask what advice they would give to
people just starting their WordPress journey. See the
Learn WordPress
02
08
25
30
results here and improve your WordPress skills at

the same time.
wordpress-community-offers-advice-beginners
08
Deleting images
Using featured images can provide artistic value to

your website and place specific emphasis on your
content. Best of all, it's very easy to set a featured
image. See how here
www.simplewebtutorial.com/1515/wordpresstutorials-deleting-images
IMPROVE YOUR SITE'S DESIGN

09
WordPress for designers
Using a series of easy to understand screencasts,

WordPress afficionado Drew Douglass explains
exactly how to design beautiful sites for WordPress.
A great place to start for designers and an essential
bookmark for you.
blog.themeforest.net/screencasts/new-wp-video-seriesand-free-rockstar-book
10 How to make a featured

post carousel
Its becoming more and more common for blogs
to feature certain posts at the top of the page. In
this intermediate WordPress tutorial, Nettuts+
author James Lao explains how to implement this
in WordPress.
http://net.tutsplus.com/tutorials/wordpress/how-tomake-a-featured-post-carousel-for-wordpress
72
11 How to choose a great

colour scheme
This helpful WordPress tutorial explains the three
main considerations when choosing colours for your
website arguably one of the hardest things to do.
www.wpmu.org/choose-color-scheme-your-website
WORDPRESS TECHNIQUES
12
Build custom widgets
Building WordPress widgets is just like building a

plug-in but it is more simple and straightforward.
All you need to do is have a single file in which all
content. Daniel Pataki takes a look at how this came

to be and all the options that this great functionality
offers. A nice guide.
complete-guide-custom-post-types
ADD IMAGES TO YOUR SITE

14 How to add author's images
to your blog
Pro designer Joseph Foley explains how adding a
few simple lines of code to your site can display
author's images on your site. A very useful
Building WordPress widgets is just like

building a plug-in but it is much more
simple and straightforward
the PHP goes and it's easier to code than a plug-in
which can have more than one file. Discover more
with this tutorial.
http://wp.tutsplus.com/tutorials/creative-coding/
building-custom-wordpress-widgets
intermediate-level WordPress tutorial.

http://wpmu.org/tutorial-how-to-add-authors-imagesto-your-wordpress-blog
13 The complete guide to custom

post types
In this WordPress tutorial, the guys at wpbeginner.

com explain how to create a monthly photo album
gallery without a plug-in.
http://www.wpbeginner.com/wp-tutorials/how-tocreate-a-photo-album-gallery-in-wordpress-without-aplugin/
WordPress has been gaining a foothold in the

general CMS game for a few years now but the real
breakthrough was the custom post type mechanism
which allows for the creation of a wide variety of
15 How to create a photo album

gallery in WordPress
Learn WordPress
27
16 Better image management with

WordPress
20 How to build a basic portfolio

WordPress them
24 Improve And Refine Your Theme

Development Process
Here are a cool few ways to enrich your blog using

some common sense, best practices and the power
of WordPress.
http://wp.smashingmagazine.com/2011/05/26/betterimage-management-practices-with-wordpress
In this in-depth WordPress tutorial designer Chris

Spooner explains how to take a portfolio site design
and convert it into a basic theme.
http://line25.com/tutorials/how-to-build-a-basicportfolio-wordpress-theme
Some of the top theme designers and developers

share some tips and techniques to help you improve
and refine your theme development and design
process. Essential reading.
wp-theme-development-process
17
How to get perfect blog images
Craig Grella talks through the best way to get perfect

blog images every time with Auto Scale and Crop in
this WordPress tutorial.
http://wpmu.org/how-to-get-perfect-blog-imagesevery-time-with-auto-scale-and-crop-for-wordpress
18 How to create additional image

sizes in WordPress
If you want a bit of variety with your images (and
let's face it, who doesn't!) check out this WordPress
tutorial which will show you how to add additional
image sizes.
www.wpbeginner.com/wp-tutorials/how-to-createadditional-image-sizes-in-wordpres
CREATE A WORDPRESS THEME
21 How to create a WordPress

theme
In 11 individual lessons, this WordPress tutorial
will show you how to create a powerful, up-to-date
theme. Great reading.
http://themeshaper.com/2009/06/22/wordpressthemes-templates-tutorial
22 Designing for WordPress:

complete series
Web craftsman Chris Coyier's three-part Designing
for WordPress series covers downloading and
installing WordPress on a server all the way to a
completed theme.
http://css-tricks.com/designing-for-wordpress-completeseries-downloads/
19
23 Create a typography based

WordPress blog theme
In this superb WordPress tutorial, the guys at

onextrapixel.com show you exactly how to code a
theme from the ground up.
www.onextrapixel.com/2011/03/08/how-to-code-awordpress-3-0-theme-from-scratch
Having gone through the Photoshop, HTML5 and

CSS3 coding stage, in this WordPress tutorial Chris
Spooner explains the templating stage to finish off a
typography-based design as a fully working theme.
http://line25.com/tutorials/create-a-typography-basedwordpress-blog-theme
How to code a WordPress theme

from scratch
INTEGRATE SOCIAL MEDIA

25 I ntegrate Facebook, Twitter and
Google+ in WordPress
In this excellent WordPress tutorial, Scottish
webmaster and blogger Kevin Muldoon explains
how to manually integrate the three most popular
social media services on your website: Twitter,
Facebook and Google+.
facebook-twitter-google-wordpress
26 How to add Pinterest 'Pin it'

button in your blog
If you want to enable your readers to pin images
from your website but don't know how, check out
this WordPress tutorial.
www.wpbeginner.com/wp-tutorials/how-to-addpinterest-pin-it-button-in-your-wordpress-blog
27 How to create email newsletters

in WordPress
In this WordPress tutorial, learn how to create a
daily and weekly email newsletter using Aweber or
Learn WordPress
33
MailChimp. Great if you want to let your readers

know what's going on on your site or blog.
www.wpbeginner.com/wp-tutorials/how-to-create-adaily-and-weekly-email-newsletter-in-wordpress
first blog. Of course you can choose more, but this

provides a good starting point.
http://wpmu.org/5-free-essential-plugins-for-your-firstwordpress-blog
28 The beginner's guide to adding

Twitter cards in WordPress
31 10 things every WordPress

plugin developer should know
Twitter Cards make it possible for you to attach

media experiences to your tweets that link to your
content (https://dev.twitter.com/docs/cards). This
WordPress tutorial shows you how to use them.
www.wpbeginner.com/wp-tutorials/how-to-addtwitter-cards-in-wordpress
Dave Donaldson has written several WordPress plugins, and this article is a culmination of the things he
CUSTOMISE YOUR WEBSITE

29 Add icons to WordPress custom
menus without plug-ins
Adding icons to custom menus is a relatively simple
two-step process that doesn't involve any PHP
coding whatsoever. And this WordPress tutorial will
show you just how to do it.
http://wpmu.org/wordpress-custom-menu-icons
USING PLUG-INS
5 free essential plug-ins for
your first WordPress blog
30
WPMU.org has many great WordPress tutorials,

including this one on essential free plug-ins.
There are many useful plug-ins available for the
platform. In this WordPress tutorial the guys at
WPMU.org pick five must-have plug-ins for your
74
33 How to create your very first

WordPress plug-in
For more control and flexibility over your site, one of
the first things you'll want to know is how to create
a plug-in. Find out how in this simple walkthrough
WordPress tutorial it's really not as difficult as you
might think.
http://wpmu.org/how-to-create-your-very-firstwordpress-plugin
Adding icons to custom menus is a

relatively simple two-step process that
doesn't involve any PHP coding at all
thinks every WordPress plug-in developer should
know. It's essential reading from one of the best
plug-in developers out there.
www.smashingmagazine.com/learning-wordpressuseful-wordpress-tips-tutorials/#a1
32 How to display your latest

Spotify activity in WordPress
The Spotify activity plug-in lets you display a stream
of the latest songs youve listened to right on your
website. It's not something everyone will want to do,
but nevertheless, check out this WordPress tutorial
to find out how to get it working and share your
music taste with the world
http://wpmu.org/how-to-display-your-latest-spotifyactivity-in-wordpress
SECURE YOUR WORDPRESS SITE

34 Common WordPress
malware infections (and how to
prevent them)
Do you know what hacks WordPress users are
particularly vulnerable to? What do they do to a
WordPress website? How can you prevent them?
This excellent tutorial from the guys at Smashing
Magazine covers backdoors, drive-by downloads,
pharma hack and malicious redirects. You need
to read this to make sure your own WordPress site
stays secure.
http://wp.smashingmagazine.com/2012/10/09/fourmalware-infections-wordpress
Learn WordPress
29
34
36
40
ADVANCED SKILLS
35 Integrate the Bootstrap navbar
into your theme
This is just one of a series of tutorials from Kateryna
Belyaeva covering integration of most popular
Bootstrap components into a WordPress theme.
http://wp.tutsplus.com/tutorials/theme-development/
how-to-integrate-bootstrap-navbar-into-wordpresstheme
36 Proper JavaScript usage

with WordPress
This tutorial from the guys at wp tuts+ explains how
to enqueue JavaScript files inside your pages and
how to pass translatable data to the JavaScript code.
It's relatively advanced but an excellent technique to
know. So get reading!
http://wp.tutsplus.com/articles/cheat-sheets/thecomplete-guide-to-proper-javascript-usage-withwordpress
37 Inserting widgets with

shortcodes
The shortcode ability of WordPress enables the
end user to create intricate elements with a few
keystrokes while also modularising editing tasks.
WordPress expert Daniel Pataki explains how adding
widgets anywhere with shortcodes isnt that difficult
at all. An essential bookmark for any advanced
WordPress user.
inserting-widgets-with-shortcodes
38
Using WP_Query In WordPress
If you've been around WordPress for a while you

know how difficult it used to be to create post lists
based on complex criteria while also conforming to
WordPress standards. Over the course of a few years
the platform has come a long way. By utilising the
power of the WP_Query class, we can lists posts in
any way we want. An excellent tutorial from the
guys at Smashing Magazine.
http://wp.smashingmagazine.com/2013/01/14/usingwp_query-wordpress
Words: Kerrie Hughes

Kerrie Hughes is Channel Editor at
creativebloq.com. Creative Bloq is the
go-to website for web designers, with
tons of useful tutorials, features and
tips, plus the latest news from the
industry. Hughes blogs daily on
everything from cutting-edge web
technologies to logos, motion graphics
and more.
39 Add subdomains and add-on

domains to your hosting account
This video will explain what subdomains and add-on
domains are and at just over five minutes, you'll be a
pro in no time. Now you can have two domains
on one account without needing to have a separate
host! Very useful
http://wordpressexamples.com/how-to-addsubdomains-and-add-on-domains-to-your-hostingaccount
40 Making sure your theme has

Retina support
With high resolution screens becoming more and
more popular, it makes send to make sure your
theme has support for Retina or HiDPI displays.
In this brilliant tutorial you can do just that. An
excellent all-round guide.
http://wp.tutsplus.com/tutorials/theme-development/
ensuring-your-theme-has-retina-support l
Real-world WordPress
Case study
Behind the scenes of
jacksonvilleartwalk.com
The art festival site was responsively rejuvenated by agency Station Four using Modernizr,
CSS, parallax effects and WordPress. Chris Olberding, partner at Station Four, explains
.net: Tell us how Station Four got
involved with the project.
CO: In late 2012, Downtown Vision Inc
(DVI), a non-profit organisation that works to
promote and revitalise downtown Jacksonville in
Florida, approached Station Four
(www.stationfour.com) to see if we would be
able to help them create a simple website for its
monthly art festival, the Jacksonville Downtown
Art Walk. In addition to The Art Walk being an
event that we regularly enjoyed, we were in the
process of moving our office downtown and are
big advocates of the area.
Due to constraints of timeline and budget,
the initial scope of the project was fairly limited.
However, our team was excited about the project
and were able to negotiate an expansion of
the projects scope, thus allowing us to build
something our team is proud of from both a
technical and creative standpoint.
users planning their trip beforehand as well as

those just looking to get an idea of what the
event is like.
.net: What is the concept and process
behind the design?
CO: It was a very inclusive process. I think
every designer on the team felt as though they
contributed significantly to the end-result. Its
highly unusual for us to present more than one
concept to the client but, by the time we got
to work on the design of the website, we had
established a very good working relationship
with the DVI team, which enabled us to work
openly and collaborate on the direction of the
sites design.
Lists and lists Every month the event has new artists and
venues. CSS3 columns were used to balance things out
As a monthly festival, regular content

changes need to be managed by the client.
After considering some lightweight content
management options, such as PageLime (www.
pagelime.com), we decided to go with WordPress.
As a single-page responsive website, this wasnt
the simplest integration, but the end result has
worked out great.
.net: What were the main objectives for the

new site design?
CO: The Art Walk is a monthly festival that spans
dozens of venues over 15 blocks. The primary
audience for the website is mobile users that are
on foot at the event. These users are typically
looking to access information specific to that
months event. The site needed to accommodate
.net: What were some of the technical

considerations and challenges?
CO: The key challenge was to build something
that worked well on mobile devices without
letting that constrain our creativity. For example,
the desktop version of the website animates large
transparent PNGs with a subtle parallax effect. The
result is great but it is far too resource intensive
for users walking around on mobile devices with
a 3G connection. We decided to use Modernizr
to ensure that those devices didnt attempt to
download certain resources.
Custom illustration Every panel includes custom

watercolour illustration and hand-drawn typography
Mobile first Users of touchscreen enabled devices are

presented with a more user-friendly menu
.net: What was your strategy for mobile devices?

CO: We used the responsive framework
Foundation as a starting point. The site has
two breakpoints at 1060px and 768px. Using
Modernizr, we detect if the user is on a touchenabled device and use that information to
deliver the appropriate navigation and other
functional changes. For example, on a desktop
browser venue information is displayed in
tooltips. However, on touchscreen devices, that
same information is displayed persistently under
each venue title. Just because we took a mobile
first approach doesnt mean we overlooked the
experience for desktop users.
Without directly measuring a users network
speed, we made the assumption that if the
users device isnt touch-enabled and has a
high resolution, its likely going to be desktop
or laptop. We then load CSS that pulls in high-
jacksonville
artwalk.com
December 21
January 2013
January 7
S4 team presents
sketches of single-page
responsive design. The
DVI approves.
The design featuring

hand-drawn typography
and watercolour
illustrations is approved.
From the
beginning
76
December 2012
Project kick-off meeting.
S4 and DVI teams review
the project brief.
The full design is

approved and production
begins.
January 23
Testing begins in advance
of the upcoming February
Art Walk event.
Close up jacksonvilleartwalk.com
Case study
The techie bit
The project is
powered by
WordPress and
takes advantage
of the Foundation
responsive
framework. Some
modification to
Stellar.js was able
to accommodate
the desired
parallax animation
effect. We used
the GreenSock
animation
library jQuery
plug-in, which is
significantly faster
than jQuerys
native animations.
Modernizr was
used to prevent
serving large files
to mobile devices
and to provide
an optimised
experience for
touchscreen
devices. We used a
custom script that
takes advantage
of JPEGTran
and PNGOut
algorithms to
compress the
site images.
4
1
Sticky header
As a single-page site, the

main navigation is sticky. On
touch-enabled devices, a
different nav is used.
Hand-drawn lettering
The main titles for each

section of the website were
hand-drawn, scanned in and
then traced.
fidelity, resource-heavy image files and activates

the processor-intensive animation such as the
parallax effects.
.net: How did you deploy the site?
CO: The turnaround on the project was incredibly
fast. We began work in late December and the
goal was to soft launch the site in time for the Art
Walk in early February: around four weeks. We hit
the target and got the static site stood up in time
for The Art Walk on February 6. During this test
run, various event sponsors, venues and partners
were encouraged to use the site and provide
feedback. This feedback was incorporated into
the site as we continued to make performance
enhancements and optimise the loading of
the site for mobile users. Delaying WordPress
February 2013
Site soft launched and
tested during event by
partners, sponsors and
the venues.
March 2013
Feedback from the
February event is
incorporated. Official
launch during March
event goes smoothly.
Separate layers
Most elements, including

each watercolour splotch,
are separate so they can be
animated separately.
integration enabled us to hit the schedule and

optimise the site over the course of a number of
events before handing management over to the
team at DVI.
.net: What lessons have you learned from
the Art Walk project?
CO: I think its validated our philosophy that
every project is an opportunity to do something
great and new, both creatively and technically.
The client approached us with a simple project.
We saw something bigger, pushed forward and
couldnt be happier with the result.
I think the explosion of responsive tools and
techniques over the last couple years makes
it more important than ever to incorporate
something new into each and every project. l
May 2013
Full-width image
The main panels

background fills the users
screen. Theres a curtain
effect as the user scrolls.
Profiles
Name Chris Olberding
Job Creative partner
Company Station Four
URL www.stationfour.com
Twitter @colberding
Chris Olberding is the co-owner
and creative partner at Station
Four, a digital agency based in
Jacksonville, Florida
Name Sabreena Katz
Job Web designer
Company Station Four
URL http://sabreenakatz.com
A recent graduate from the
University of North Florida,
Sabreena joined the team at
Station Four in 2012 and excels at
applying her talents in illustration
to the web
With the site tested and

stable, its integrated
into WordPress to be
managed internally by
the DVI team.
Case study
Behind the scenes of
www.japantimes.co.jp
The Japan Times redesigned in order to modernise and preserve its legacy. Benjamin Thomas
and David Ashkanasy of Bento Graphics and Mark Thompson of The Japan Times explain how
.net: Tell us about The Japan Times.
MT: First published in 1887, The Japan
Times is the nations oldest and most
widely read English-language newspaper today.
Its original mission was to serve the non-Japanese
community as well as give an accurate picture of
Japan to the outside world. The companys first
website was launched in 1996 and its last redesign
was in 2007. In conjunction with a recent upgrade
of its main publishing system, the company needed
to upgrade the backend of its website as well as
modernise its overall look and functionality.
.net: In a nutshell, what was the design brief?
BT: By going with a responsive design site, the
company was consciously leapfrogging to the next
generation of new media. It didnt, however, want
too much of a radical visual departure that could
potentially alienate longtime readers. Similarly, there
was the issue of migrating more than a decades
worth of legacy content that included different eras
of coding and photo sizes etc. JT didnt want an
obvious break between new and legacy content.
We needed to balance modern and traditional
design values, and certain elements, such as the
current logo, had to be retained.
The initial inspiration was the pioneering sites
of the Financial Times and The Boston Globe, as well
as the semi-responsive BBC and Guardian websites.
As such, we wanted a clean, relatively uncluttered

design, with a focus on typography and large
images. Another key factor was arranging content
that would keep new users on the site and ensure
key content was highlighted.
.net: Did localisation / language and character sets
make for any design challenges?
DA: We included a range of fonts via Typekit and
direct @font-face. This, however, caused a technical
issue with Japanese characters. Browsers of all levels
have no problem finding the appropriate font family
if youre using the system default fonts. However,
with our custom fonts, in certain browsers the
Japanese characters wouldnt fall back to a system
font that supported the character set.
We tested against multi-byte characters with PHP
when saving a new article. If any were found in the
content, a custom CSS class was attached to the
template and the font-family for those letters would
always have a system font applied that supported
Japanese characters. Unfortunately, web typography
in Japanese still isnt especially advanced.
.net: What marks the web design out as special?
BT: The two main points are content parity and
legibility on all screen sizes. The aim was to make
all JT content and functionality available to users, no
matter what device they were using to access the
Preview content The flyout menu serves as a subtle

and constant preview for top stories in the specific site area
site. News consumers today expect all information

to be available, no matter whether theyre accessing
a site from a desktop or mobile device. To this end,
we avoided the pitfall of offering a dumbed-down
mobile version and tweaked font presets per device.
.net: What were the biggest technical challenges?
DA: In a high traffic environment, caching is a
crucial element of performance, but elements
of it dont currently work well with responsive
content. We managed to dramatically improve page
load speeds and decrease server load by making
performance improvements, such as reducing high
counts of database queries and HTTP requests or
combining and minifying included files.
.net: How did the rise of Twitter as a journalistic
tool alter the web design?
MT: Our main task was to preserve JTs social media
portfolio and ensure stories were easy to share and
contained important metadata such as Open Graph
and Twitter cards. Elsewhere, on author bio pages,
we included Twitter accounts and the comment area
lists displays reactions on Twitter.
Mobile first With minimised headers on the front page,
Tablet friendly Category landing pages feature large
content is featured first with thumbnails at the bottom
teaser images, condensing navigation to an off-canvas menu
.net: How involved were journalists and advertisers

in the design process?
MT: In some areas, our early design drafts differ
www.
japantimes.
co.jp
August 2012
September 2012
From the
beginning
78
July 2012
Wireframes and design
mock-ups are created
following a review of
design requirements
and how people use
news websites.
The technology that

could best support the
design vision is reviewed.
September 2012
A static HTML and jQuery
mock-up of the site is
created, providing
stakeholders to
experience the new site.
Responsive typographic
scale is set up after using
a working mock of the
site to optimise legibility
by using a full range
of devices.
October 2012
The beginning of
converting the static site
into a working WordPress
theme and development
of custom plug-ins.
Close up www.japantimes.co.jp
Case study
The techie bit
A mobile-first
approach was used
with HTML5/CSS3
and LESS as a CSS
preprocessor. For
scalability, we split
the style rules of
various site areas
into separate LESS
files. These are
parsed into the
final CSS file. Based
on WordPress,
we used the
Advanced Custom
Fields plug-in and
Custom Post Types
to structure site
admin and query
featured contents
for landing pages,
using backend
integration with
the WoodWing
publishing system
via XML-RPC.
The installation
runs the w3 Total
Cache plug-in
with distributed
memory caching.
Amazon (AWS)
instances with S3
provides cloud
storage for
media contents.
1
2
3
1 Links The site

header provides
links to weather and
market pages, and
the newsletter.
2 Flyout Mousehover over the menu

triggers a large flyout
menu for each of the
site areas.
greatly from the final product. Thats because we

needed to serve the needs of both journalism and
advertising. It was, admittedly, a constant struggle.
Different content has different shelf lives; different
categories have different refresh rates. All of this
had to be factored into the sites final architecture.
When it came to image handling, our initial
layout purposely limited options in order to keep
design consistency intact, but that one size fits
all approach didnt work across the board. In the
end, we developed a range of options for image
inclusion that suited editorial needs, worked
responsively, didnt interfere with legibility and
ensured images could breathe in the layout.
.net: How did you test the site? What kind of
testing did you do?
November 2012
Beta-testing of the site
with a range of potential
user-types. Design and
feature improvements
from feedback.
December 2012
Performance testing and
optimisation conducted,
that included a review of
every site feature for
performance
improvements.
3 Breaking The
top left articles are
the top news of the
hour. Articles feature
comment counters.
Centre area
Features the touchenabled slideshow

and chronological
news below.
DA: The choice of devices was based on the 95 per

cent of devices used on the site, according to the
site stats. We keep adding to the device collection
though. It was crucial to test handling and
performance on real devices. By working hands-on
with these devices, we could see how well scripts
performed and we could review the site legibility
across the board. Also actual design and usability
changes were derived from the device testing.
.net: How have advertisers reacted?
MT: To be honest, responsive design is still a new
concept in Japan and even newer to advertisers. So,
at present, the term doesnt get instant recognition.
Also theres still a fair amount of emphasis put
on the above the fold advertising so there is a
reluctance to see ads that dont stay in one place. l
January 2013
5 Sidebar Includes
aside contents:
trending articles or
affiliate links and
advertising banners.
Profiles
Name Benjamin Thomas

Job Director / web designer
Company Bento Graphics
URL http://bentographics.com
Twitter @bentographics
Name David Ashkanasy
Job Web designer and developer
Company Bento Graphics
URL http://bentographics.com
Twitter @ashkas
Name Mark Thompson

Job Digital enterprises
division manager
Company The Japan Times
URL http://www.japantimes.co.jp
Twitter @guchagucha
The launch!
Showcase
Portfolio themes
20
brilliant
WordPress
portfolio
themes
Give your design work the online showcase it
deserves. Here, we select 20 WordPress
portfolio themes that will see you right.
It's now easier than ever to use platforms
such as WordPress and Tumblr to create a
highly effective and professional design
portfolio page, which is easy to edit and
navigate as you please, similarly to the way you
would a blog page.
You certainly don't need to be a web design
wizard to create a decent looking portfolio site
these days. There are a number of elegantly
designed portfolio WordPress themes out there
to get you started on showcasing your work
the best way possible. And we've picked 20 of
the best right here
01
BigBang
The BigBang WordPress theme offers a very

original editing system. It works with various
shaped preview thumbnails and a clean and
clear layout that enables you to control the
appearance, columns, and font and size
extremely easily.
$45, www.brankic1979.com
02
Nemesis Clean Design
Nemesis Clean Design has a multi-functional

layout that enables multiple page editing and
run across the whole digital platform, enabling
you to view it on iPhone/iPad devices without
any modifications.
$45, http://themes.themegoods.com/
nemesis_wp
80
03
Media Book
Media Book offers a perfect and refreshing

WordPress theme that would work particularly
well with photography and other types of work
that is characterised by highly visual imagery.
$40, www.themeforest.net/user/
wickedpixel/portfolio
04
Contrast
Contrast is a WordPress theme that's ideal for

large images and digital design artists. This
06
Imbalance2
With a similar layout structure to Imbalance

(unsurprisingly) Imbalance2 offers a more flexible
space for work that requires more copy and
description. Imbalance2 also in has built-in
Google Analytics functionality.
Free, www.wpshower.com/themes/imbalance-2
07
Hipster
As the name suggests, Hipster offers a modern

and relaxed alternative to an overly formal
You certainly don't need to be a

web design wizard to create a decent
looking portfolio site these days
template also provides a great way to include
the detail and technique of your work, to best
expose how it was made and the thinking
behind it. Nice.
$40, www.wphub.com/themes/
contrast-by-themeforest
05
Imbalance
Imbalance is a clean and highly-functional

WordPress theme that provides a spacious and
chic feel to any portfolio site for
photographers or designers. This excellent
template is adaptable to many different fields
within the creative industry.
Free, www.wpshower.com/themes/imbalance
portfolio site. Its many editing features enable you

to personalise the content to best suit the nature
of your work, and again enables them to be
viewable on a range of different digital platforms.
Definitely worth a look.
$55, www.themeforest.net/item/hipster-retroresponsive-wordpress-theme/3867290
08
Photographer Portfolio
Photographer Portfolio is ideal for those

displaying large images. The layout is very userfriendly, with built-in multiple pages bringing out
the best of your images.
$11, www.themeforest.net/item/photographerportfolio/3166538
Showcase
Portfolio themes
01
02
05
06
07
Showcase
Portfolio themes
09
10
11
13
09
Rhythm
The layout of Rhythm is really clean, making it

ideal for illustrators and visual designers to
slideshow their work.
$15, www.themeforest.net/item/rythm-one-pageresponsive-html5-template/3327626
10
MiniPress
MiniPress offers a simple but classy black and

white layout to give your work a glossy finish.
$16, www.themeforest.net/item/minipressresponsive-one-page-template/3272282
11
Shiny
Shiny is a very delicate WordPress theme. It

enables you to put the focus on the work you
most see fit to represent your design discipline.
$15, www.themeforest.net/item/shiny-htmlversion/3164427
12
Singlet
Singlet is a one-page WordPress theme offering

a very playful and colourful layout. It's also
extremely easy and quick to edit.
$35, http://themeforest.net/item/singlet-onepage-responsive-wordpress-theme/3368756
13
Pen & Paper
Pen & Paper is a theme that offers a more

classical and refined layout for your WordPress
portfolio. It has a more traditional look and yet
it is interactive and user friendly.
$15, www.themeforest.net/item/pen-and-paperresponsive-site-template/3229676
82
14
Blitz
A modern and professional WordPress theme

that's ideal for the various digital platforms with
an excellent built-in swipe system making it easy
to navigate and interact with.
$40, www.themeforest.net/item/blitz-responsivemultipurpose-theme/5522595
15
Simply Infinite
The Simple Infinite WordPress theme offers an

extremely smooth and clean layout. In addition, it
gives you flexible editing options as well as pages
to spread out and distribute your content within.
17
Retro
This WordPress theme offers an alternative design

for your portfolio site, with a retro-inspired layout,
easy editing options and multiple page facilities.
$12, www.themeforest.net/item/retro-portfolio-onepage-vintage-template/1461416
18
Opal
Opal offers a minimalist but effective portfolio

WordPress theme: a great way to communicate
the nature of your work.
$18, www.themeforest.net/item/opal-minimalportfolio-template/2325294
The layout of Rhythm is really clean,

making it ideal for illustrators and visual
designers to slideshow their work
Good value at only $15, but try the demo out first
to see if it's for you.
$15, www.themeforest.net/item/simplyinfiniteresponsive-retina-html-template/3072456
16
Rhea
Rhea is another great clean and structured layout,

perfect for illustrators and visual artists. This
WordPress theme is fast and smooth, enabling
your work to be displayed in a user-friendly
fashion that at the same time really shows it off.
An ace theme for $12.
$12, www.themeforest.net/item/rhea/2949018
19
Incorn
Incorn has a stylish layout, offering up to 20 pages

of content made very easy to navigate and
interact with. The modern design is easy to edit.
$15, www.themeforest.net/item/incorn-portfoliohtml-template/1791326
20
Haze
Haze is a stylish portfolio WordPress theme that

offers a full-screen slider welcome page and easyto-use navigations options.
$40, www.themeforest.net/item/haze-beautifulwordpress-theme/2485338 l
Showcase
Portfolio themes
16
17
18
19
20
Showcase
40 free themes
The
40 best free
WordPress
themes
Here, we reveal the best free WordPress themes
for creating blogs, portfolios sites and more!
The WordPress community is big. Really big.
We're talking thousands of designers and
developers, tens of thousands of writers, and
millions of users, all contributing to pushing
WordPress forward. And one very popular way
to do this is designing and developing free
WordPress themes.
Free themes are a great way to get a blog
or website off the ground. You might want to
start writing about a topic but don't want to
invest the money in a custom site design on top
of hosting and a domain. And once your site is
up and running, there's nothing to stop you
dissecting them, building on top of them and
learning from them.
In this article we've selected some of the very
best free WordPress themes for you to use in
your projects. Each is not only free to use and
open to the public, but also offers something
special and unique. Let's get stuck in
01
Thoughts
Download and demo: www.wpexplorer.me/

thoughts/
Category: Blog, Business website
Responsive: Yes
Like flat design and want to use large images on
your website or blog? Want it to be responsive?
Then as free WordPress themes go, Thoughts is
probably a good one to investigate.
02
Flozo
Download and demo: www.flyerzone.co.uk/blog/

download-the-free-flozo-wordpress-theme/
84
Category: Business website

Responsive: Yes
Free WordPress theme Flozo has been specifically
created by Flyerzone to help small businesses and
startups with their goal to create a professionallooking website. So whether you're launching a
design agency or just want to promote your
freelance efforts, it's well worth checking out.
03
Glider
Download and demo: tomcreighton.

com/2012/10/glider-theme/
Category: Blog
Responsive: Yes
Don't want to mess about trying to find beautiful
imagery? Looking for free WordPress themes that
focus on the text and makes that look beautiful
instead? This minimal text-focused theme is all
about seamless reading no page loads, no
interruptions, just a quick and easy way to access
content. Ace.
04
MyStile
Download and demo: www.woothemes.com/

products/mystile/
Category: Ecommerce
Responsive: Yes
One of our favourite sources of themes is
Woothemes, and they've got a few tasty free
WordPress themes as well. MyStile is a clean,
lightweight WooCommerce theme, designed as a
canvas which you can use as-is, or easily create a
unique design to match your products. This
excellent theme is responsive as standard, and
comes bundled with plenty of options and
alternate colour schemes.
05
Travelify
Download and demo: www.colorawesomeness.

com/themes/travelify/
Category: Travel
Responsive: Yes
The Travelify free WordPress theme is inspired by
nature. Fully customisable, with several Theme
Options and page templates, this theme is an
obvious choice for travel blogs, green thinking and
adventuring types.
06
Clean Retina
Download and demo: themehorse.com/preview/

clean-retina/
Category: Blog, Website
Responsive: Yes
Clean Retina delivers exactly what it says on the tin.
The theme is simple, clean, responsive and retinaready. There is a selection of nine homepage layout
options, also a large homepage slider with space
for supporting text. This is one of those free
WordPress themes that would work nicely for
bloggers or small business owners.
07
Simple Corp
Download and demo: www.s5themes.com/theme/

simplecorp/
Category: Corporate, Portfolio
Responsive: Yes
Simple Corp is a responsive HTML Theme by Site5.
It includes plenty of time-saver features, so no need
hunting around for plug-ins. The contact page
consists of a built-in contact form furthermore and
a large Google Map. Multiple colour styles can be
easily accessed via the colour options tab. One of
the best free WordPress themes we've seen for
Showcase
40 free themes
01
business, this theme can update a corporate

website with a fresh vibe.
08 Workality
Download and demo: www.workality.ca/
themes/workality
Category: Agencies, Portfolio
Responsive: Yes
Workality is a responsive WordPress theme that
provides a powerful way to showcase your work.
Your images, videos, and text will all scale down
precisely for iPad, iPhone and all mobile devices,
10 Great
Download & demo: demo.mythemeshop.com/
s/?theme=Great
Category: Blog
Responsive: Yes
With an unlimited selection of colour themes,
as well as being SEO Optimised, this free WordPress
theme would be appropriate for any blogger.
Another excellent feature which has been
cropping up on some of the newer themes is the
Translation-ready abilities, reaching new audiences
in a foreign languages.
Xenastore is one of those WordPress

themes that stands out because it is
simple, bold and really effective
it is also compatible with all major browsers.
Workality offers 4 different thumbnail sizes
for your portfolio layout, small, medium, large
and portrait.
09 Photo
Download and demo: www.wpexplorer.me/
photo/
Category: Photographer
Responsive: Yes
Photo is, you won't be surprised to hear, best
suited for a photographer, as its major feature is
the responsive gallery. The theme is clean with a
bold header that emphasises your logo. This is
perfect if you're looking for a minimal and
versatile theme.
11 Xenastore
Download and demo: www.web2feel.com/
xenastore
Category: Ecommerce
Responsive: No
Xenastore is one of those WordPress themes
that stands out because it is simple, bold and
really effective. The use of colours and graphical
elements are subtle but add a lot of value to the
site and show off your content really well. The
homepage offers several widget areas, making it
very easy to offer specials, coupons and much
more. With a large featured section, showcasing a
small number of products can be done very easily
which enables you to focus on certain content.
12 Responsive
Download and demo: themeid.com/
responsive-theme
Category: Website
Responsive: Yes
Jesse Friedman likes this free WordPress theme so
much he's currently using it to power Jes.se.com.
Responsive utilises several homepage widget areas
to drop in content, making it easy to control
everything. It has a very large and easy to control
featured area on the homepage, which was
perfect for Jesse to feature his book, Web
Designer's Guide to WordPress.
13 Balloons
Download and demo: moargh.de/portfolio/
downloads/wp-theme-balloons
Category: Website
Responsive: No
Who doesn't like Balloons? We could probably ask
the same thing about parallax scrolling. This is the
first free WordPress theme we've seen that uses
the recently widely adopted effect of multiple
scrolling speeds. Balloons utilises a minimalistic
design and lets you focus on the cool scrolling
effect. While a small business or corporation may
not get what they want out of this theme it would
work beautifully for an event or personal website.
14 Grid
Download and demo: www.dessign.net/gridtheme-responsive
Category: Portfolio
Responsive: Yes
Grid gives you the feeling you're on a site that's
had a lot of thought put into its design. This free
Showcase
40 free themes
17
WordPress theme would work really well for a

portfolio, artist or event site. It's very graphic or
photo heavy so make sure you have the content to
back it up. One plus is that this theme maintains
its responsiveness quite well.
15
Fotofolio
Download and demo: wordspop.com/themes/

fotofolio-landscape
Category: Photography
Responsive: No
If you're looking for a free WordPress theme that
lets the content do the work, then Fotofolio is for
you. While its design and layout is really well
done, it's also subtle and inconspicuous, allowing
your stunning photos to take control of the
visitor's eyes. The functionality and use of the
theme is also quite nice.
16
Bonpress
Download and demo: www.wpzoom.com/

themes/bonpress
Category: Website, blog, portfolio
Responsive: Yes
We're becoming more and more a fan of the lefthand-nav. With the adoption of wider desktops it
makes it easy for you to utilise much more space,
making it easier and more pleasant for visitors to
view your content. Free WordPress theme
Bonpress does a really great job of organising the
layout while maintaining responsive functionality.
Whether you need a typical website, blog or
portfolio site, this theme will do nicely for you and
your content.
86
17
ARCHITEKT
Download and demo: www.dessign.net/

architekt-theme
Category: Website, blog, portfolio
Responsive: Yes
At first glance, we couldn't tell if we really liked this
free WordPress theme or just the stunning photos.
Sometimes if your content isn't as nice as what's in
the demo, you can lose the effect you wanted.
However, after getting to know Architekt a bit more
we realised it was the layout and minimalistic
approach to the design that made the content
stand out so well. This is a really nicely designed
and well thought-out responsive theme
enough content to fill it. Hopefully in the near

future they'll put in the extra work to make this
theme responsive.
19
Blue Bubble
Download and demo: www.flexible7.com/

bluebubble-wordpress-theme
Category: Blog, Portfolio
Responsive: No
This theme uses the left-hand sidebar well; we like
the navigation alongside the blog posts. One thing
to be aware of is the use of featured images. If not
every one of your posts comes with a featured
image you may lose the effect of the proportionate
Spectacular theme is well designed

and laid out. The colours are subtle but
really help the visitor navigate the site
18
Swatch
Download and demo: www.woothemes.

com/2011/08/swatch
Category: Website, Portfolio
Responsive: No
The crew over at WooThemes really know what
they are doing. This free WordPress theme is very
well designed, with a lot of detail put into every
element. Swatch is definitely a theme that you don't
have to customise at all, it's just so nice right out of
the box. There are a lot of widget areas, columns
and places for a lot of content. Make sure you have
and balanced layout. If you're a web designer you

should be able to convert this free WordPress
theme to a responsive layout relatively easily.
20
Big Square
Download and demo: wordspop.com/themes/bigsquare

Category: Photography, portfolio
Responsive: No
This free WordPress theme gives you the feeling
you're reading about a painting hanging on the
wall at your local contemporary art museum. It
Showcase
14
18
27
26
designates a lot of space to the image or

photograph so if you're trying to showcase your
work you Big Square will do nicely for you.
21
EBUY
Download and demo: www.freethemeswp.org/

wp-ebuy
Category: Ecommerce
Responsive: No
It's only a matter of time before WordPress is seen
as a viable option for ecommerce sites of all types.
Free WordPress themes like EBUY continue to
push the envelope and get us ever closer to that
goal. This theme is well laid out and offers a
great deal of features to help you share and sell
your products.
22
Busby
Download and demo: wplift.com/busby-freewordpress-personal-blog-theme

Category: Website, blog
Responsive: No
Busby is a really nice free theme. Its use of bold
colours and well planned fonts makes it stand out.
We love the styling and emphasis on post dates.
However, if you aren't posting often, a proud and
boldly stated date may make your theme look stale
and outdated. Frequent bloggers looking to keep
visitors on their site for long periods of time will
benefit from this theme greatly.
23
Blog-o-folio
Download and demo: www.noupe.com/freebie/

blog-o-folio-wordpress-theme-version-1-0.html
Category: Blog, portfolio

Responsive: No
Saying that Blog-O-Folio uses bold contrasting
colours would be an understatement. The layout is
really nicely put together and the entire theme is
very functional. The dedication of real estate to
blog posts and sidebar make this free WordPress
theme very blogger friendly.
24
Skeleton
Download and demo: www.freethemeforwp.com/

themes/skeleton
Category: Blog, website
Responsive: True
Skeleton has a lot going for it. Firstly, it's very
minimal so if you know what you're doing it will be
very easy for you to layer your own flavour of style
and colour on it. Secondly, it's responsive, so it's
ready for any and all devices. The added bonus that
it's BBPress ready just increases its value. Lots of
widget and featured areas makes this a very
versatile WordPress theme.
25
Shuttershot
Download and Demo: www.web2feel.com/

shuttershot
Category: Photography, website
Responsive: No
Shuttershot is another great free WordPress theme
that lets the content speak for itself. If you have less
than stellar photographs or graphics you may want to
use a different theme, though. Allocating the entire
homepage to a single image will pressure you to
highlight your best work. Make sure your content can
40 free themes
support this really well-made theme before you move

forward with it.
26
Spectacular
Download and demo: www.smashingmagazine.

com/2011/01/10/free-html-4-01-html5-wordpresstheme-spectacular
Responsive: No
The aptly named Spectacular theme is really well
designed and laid out and generally looks fantastic.
The colours are subtle but really help the visitor
navigate the site. While this free WordPress theme
does appear to be very blog-centric it would
certainly be easy enough to convert this to a small
business, event or product website. One thing to do
with this theme is make sure that the logo or
featured graphic at the top is designed to fit the
theme. A black and lime green race car logo will not
do this theme justice.
27
Meeta
Download and demo: demo.wpzoom.

com/?theme=meeta
Responsive: True
Sometimes "Plain Jane" themes such as this one
Meeta get overlooked. However, themes like this
are easily converted and modified to fit your site and
content so can be extremely useful. With two
navigations, a featured graphic and a responsive
layout, this free WordPress theme will act as a great
foundation for your site or blog. However you will
need to dedicate the time to customise it a bit.
Showcase
40 free themes
30
31
34
35
28
WP Coda
Download and demo: choicethemes.com/

wordpress/wp-coda
Category: Single page, website
Responsive: No
What WPCoda does well is easy navigation of
pages without moving off the homepage. All the
pages in the tabbed navigation below the tagline
are served to the visitor without reloading the
page, functionality that is usually reserved for
custom builds. We have to be honest, we're not
really sold on the colour scheme of WP Coda, but
that is easily adaptable to your needs.
29
Splendio
Download and demo: www.smashingmagazine.

com/2011/05/30/free-wordpress-3-1-themesplendio-with-psd-sources
Responsive: No
Splendio has done a great job of balancing the
featured content of the page with additional added
value content. You want to promote the other
pages and posts on your site (to increase traction
and time on site) without taking away from the
reason the visitor is there in the first place. This is a
difficult task that the designers and developers of
Splendio have done well. The details and colours
really help to make this a great blog theme.
30
Polar Media
Download and demo: bizzthemes.com/themes/

polarmedia
Category: Blog, news
88
Responsive: No
We like the content used to demo PolarMedia
because it speaks to exactly how this theme should
be used. It's great for a blog featuring news and
up-to-the-minute updates.
This free WordPress theme does a great job of
showcasing content in a new format. Whether
you're reporting on red carpet grand events or
political disputes or international catastrophes, it
will do you and your visitors proud.
31
Zenith
Download and demo: devpress.com/

themes/zenith/
Category: Blog, Magazine
Responsive: Yes
Zenith is a responsive theme with a rich,
magazine-style layout that features space for large
images. The theme has built-in support for Gravity
Forms, and ships with multiple layout options.
Support for custom templates and menus also
comes as part of the package.
32
Sensitive
Download and demo: wordpress.org/

themes/sensitive
Category: Portfolio, website
Responsive: Yes
Sensitive is a fully responsive theme built using
Twitters Bootstrap framework with Metro Styled
Accent. It ships with three different page templates,
support for custom backgrounds and menus. Its a
great option if youre looking for clean and
modern, without a lot of fussy code.
33
Strap Slider Lite

themes/sensitive
Responsive: Yes
Slider Lite is a clean, modern and responsive theme
that showcases a large, full-width sliding panel at
the top of the page. Each post featured within the
slider supports an image and caption, as well as
the content itself. As with some of the other
themes featured here, Twitters Bootstrap is used to
provide the functionality within the theme, making
it easily extensible.
34
vFlex
Download and demo: vibethemes.com/

vflex-free-responsive
Category: Blog, portfolio
Responsive: Yes
Designed specially with bloggers and designers in
mind, vFlex is a stylish, free, responsive WordPress
theme. Its main features include a built-in
FlexSlider so you can simply select featured images
and an integrated VibeOptions panel, which
supports logo upload, import and export settings
and many other features. vFlex's responsive layout
also means the theme looks great on iPad, iPhones,
and other devices.
35
Panoramica
Download and demo: www.cpothemes.com/

theme/panoramica
Category: Photography, portfolio
Responsive: No
Showcase
40 free themes
39
If you want to showcase images in all their glory,

free WordPress theme Panoramica may be just
what you're after. Its design heavily emphasises the
use of images, with its appearance fully
customisable through an extensive options panel.
Panoramica also features a full-width slideshow on
the homepage, perfect for grabbing prospective
client's and employer's attention.
36
Appliance

themes/appliance
Category: Blog, magazine, portfolio
Responsive: Yes
Appliance is a super-clean and minimalist theme
Noteworthy is a bold theme that, according to its

author, is modelled on the USA Today website. The
colour scheme is modern and clean, while bordering
on brash, but the stand-out feature of this theme is
the showcase area for the most recent post.
38
Origin
Download and demo: inspectelement.com/

wordpress-themes
Responsive: Yes
Origin is a premium, fully-responsive WordPress
blog theme with a minimal, clean design that
enables visitors to focus on content. Origin lite is
the only free version of this theme, which features
With a design dominated by images,

Folder is perfect for displaying
projects and products
that presents posts in a series of panels across the
page instead of as a simple list. It's very code-light,
making it quick to load, and has a pleasingly clean
look that's ideal for magazine-style content where
each post will feature a strong image.
37
Noteworthy
Download and demo: wp-themes.com/

noteworthy/
Category: Magazine
Responsive: Yes
a fixed two-column layout, responsive gallery and

custom widgets for categories and social media
networks such as Facebook and Twitter.
39
responsive theme is perfect for displaying projects

and products. Features include custom project posts
and admin panel, five different widgets included
(video, latest work, contact form, twitter feed,
recent posts) and more.
40
YAMINTH
Download: azmind.com/2012/03/04/freewordpress-theme-yaminth/
Category: Portfolio, photography
Responsive: No
There's no shortage of modern and minimal
WordPress themes available online. But YAMINTH
(Yet Another Minimal Theme) and its unusual
image layout caught our eye. The free theme
comes with light colours, dark footer, Google Web
Fonts and jQuery fade in, fade out of images. It
also has an options page for easy customisation
and is free for use in both personal and commercial
online projects.
With an unlimited selection of colour themes
this theme would be appropriate for any blogger.
Another feature, which has been cropping up on
some of the newer WordPress themes, is the
Translation-ready abilities, reaching new audiences
in a foreign languages. l
Folder
Download: luiszuno.com/blog/downloads/folderwordpress-theme/
Responsive: Yes
Folder is a free WordPress theme with a slight retro
feel to it. With a design dominated by images, this
Words: Jesse Friedman, Aaron Kitney and

Sam Hampton-Smith
Showcase
WordPress sites
33 great
examples of
WordPress
websites
Once regarded as just a blogging tool,
WordPress has quickly become a fully fledged
content management system (CMS) for
professional web designers and agencies,
used on millions of sites across the world. Yet
many still think of it as a tool for amateurs
and hobbyists. To set the record straight, we've
picked some of the best WordPress websites
around to show you just what this incredible
content management system is capable of...
01
Entyce
The independently-owned design and digital

marketing agency Entyce, based in Chester has
shown its worth in salt even on its own
portfolio site. Creative director Jane Entwistle
reveals that, for the site, they used the worlds
most popular CMS, WordPress.
WordPress is an established system, and we
like the concept of open source its very
versatile and can easily be modified and styled
as required, she adds. As with any software
there are a few flaws, but in our opinion these
are outweighed by the pros.
In advocacy of WordPress, Entwistle adds:
Its a great software to work with and its free!
Its easy to use, well documented and has a
great community with lots of articles if you get
stuck or need help.
www.entyce-creative.com
02
Bluelounge
The excellent Bluelounge designs and creates

innovative and sleek products that support the
customers digital lifestyle including cable
90
management, chargers, iPhone/iPad accessories

and soft goods.
The site is built on a combination of the
CodeIgniter framework, Interspire Shopping Cart
and WordPress. Michael Sunarlim, a web
producer at Bluelounge explains: I chose to use
CodeIgniter as the main platform when we
decided to redesign our website because its a
great framework, he says. As I was more of a
frontend developer, CI easily won my preference
to build a structured and expandable website
without sacrificing PHPs strong values.
www.bluelounge.com
03
Ghosthorses
Ghosthorses is the portfolio site of Stephen

Fairbanks. This lovingly crafted site is laden with
visual treats appealing to both the casual
observer and the web-savvy.
When choosing the CMS to drive his major
redesign, Fairbanks knew it had to be
WordPress. Ive been using WordPress for as
long as Ive been building sites because I like
how malleable it is, and the fact that its so
popular means theres a really good community
of support behind it. Also the Featured Image
function does all the legwork of cropping,
resizing and embedding my images.
Hes also felt the blight of WPs limited media
handling capabilities, but has found a suitable
solution. Ive moved the Multiple Post
Thumbnails plug-in into my functions.php file by
default now for all my sites to easily add
scrollable galleries.
www.ghosthorses.co.uk
04
Olly Sorsby
Olly Sorsby is a student whos just breaking into

the world of web design. Ollys portfolio site
enables him to show off his work and introduce
himself to the wider community.
He picked WordPress as the CMS. I found with
WordPress, once I got my head around where
everything was, that it was very easy to navigate
and use to produce the site. I think the plug-ins
and widgets are great the drag-and-drop feature
is so easy to use. Being able to install a plug-in or
widget which lets me drop a contact form where I
like, then be able to get it looking exactly how I
want, is great.
www.ollysorsby.co.uk
05
Design the Planet
Marketing agency Design the Planet is a group of

self-described 'planetary engineers'. Based in New
Orleans, they claim to be able to break your brand
free from 'generic mediocrity'. Looking at the DtP
portfolio site, they're definitely the folks to do just
that. To make it, Design the Planet chose
WordPress, the world's most popular content
management system (CMS).
"WordPress is our go-to CMS," vice president
and COO Perryn Olson explains. "We find it easier
to work with and much easier for our clients to
quickly pick up on without having a steep learning
curve like Joomla or Drupal."
Olson is a big fan of established CMSes, it turns
out. "Weve seen a backlash against proprietary
CMSes from prospective clients, because of poor
experiences with previous companies," she says.
"Some companies feel trapped if they use a
Showcase
WordPress sites
09
proprietary CMS - because they can never leave

and their website becomes a hostage - while
WordPress is universal and fairly portable from
one company to another."
www.designtheplanet.com
06
Toronto Standard
Digital creative agency Playground (www.

playgroundinc.com) was behind the design of
this redesign for the Toronto Standard a daily
digital briefing on the life of the city, covering
07
Harvey Nichols
This site for international luxury fashion

destination Harvey Nichols was created by digital
agency Pod1 (www.pod1.com). Fadi Shuman,
co-founder of the agency explains, "The brief was
an exciting ecommerce proposition to deliver the
luxury shopping proposition, to be flexible in its
design for campaign imagery and themes.
"We were tasked with revamping the retailers
online presence and upgrading its website using
the Magento Enterprise open source platform and
Working within the WordPress

framework but still making a site that felt
totally unique was a major consideration
urban affairs, business, technology, culture and
design. Creative director at Playground Ryan
Bannon explains, "The client was an investor
who had purchased the rights to an old Toronto
news brand and wanted to reinvent it as a purely
digital, fresh voice in the Toronto editorial scene.
That was it; purely digital, fresh voiced editorial."
The site uses mostly HTML5 and CSS3. Bannon
continues: "One of the most important tools we
used are CSS3 media queries, which enabled us
to reorganise our dynamic grid to make an
experience that always fit the browser size. On
the backend, the entire site runs on WordPress
so theres not a complex proprietary system for
contributors to learn."
www.torontostandard.com
WordPress. Pod1 worked closely with Harvey

Nichols, with a team of 10 people on each side in
constant communication to make the project a
huge success."
www.harveynichols.com
08
Captain Creative
A true superhero of the web world has finally

revealed himself. And he has a website! Brad
James is a self-described mild mannered designer
and art director based over in New South Wales,
Australia. Although he works for agency,
iQmultimedia, James has set up as his own online
identity named Captain Creative.
To manage Jamess online identity and leave
enough time to save the world (wide web) he
chose WordPress, mainly because I knew I

wanted a portfolio and blog combined into the
one site, says James. He adds, I dont write code
so it also helps that its widely used in case I run
into any technical problems. Id also used it
previously as a CMS for other website clients, so I
was familiar with the interface.
However, James warns, It does have its
downsides. I had a security issue recently where
someone was able to modify the appearance of
the site and even change my WP login credentials.
Fortunately, I was able to sort it out without too
much trouble. Lesson learnt: make sure you keep
your version of WP updated!
www.captaincreative.com.au
09
42Below
Digital creative agency Gladeye (www.gladeye.

com) developed a site for the iconic New Zealand
brand 42Below Vodka. Interactive director Tarver
Graham reveals, "42Below is one of the coolest
brands in the entire world. So you could say we
felt a little bit of pressure to deliver on design.
"Working within the WordPress framework but
still making a site that felt totally unique and
original was a major consideration. We had to
meet the brief and provide an extremely dynamic
CMS and animated feeds within a look that
worked for the brand, and didnt feel at all like a
WordPress theme.
"WordPress has become a natural choice. Its
really blossomed into a fully featured CMS system
and a platform in its own right, on top of which
you can build your own functionality. Theres a
danger that if you make too many custom edits
Showcase
WordPress sites
10
you lose the ability to update as new versions are

rolled out. We also used a lot of jQuery, in
particular jQuery Address to build the navigation.
jQuery offers a huge and incredibly useful
JavaScript library. We find it indispensable for the
rapid development of site features."
www.42below.com
10
Viewport Industries
Viewport Industries makes digital and analogue

products for web professionals. Founded by Elliot
Jay Stocks and Keir Whitaker in 2011, the company
chose WordPress as its CMS. "Ive used WordPress
for years and have developed a way of working
that means its easy to get up and running with a
new theme," explains Whitaker.
Asked what hes most proud of about the site,
Whitaker replies: "Responsive images! We wanted
to try out Josh Emersons Responsive-Enhance
script and had fun with the homepage. On a
mobile device you will get black and white
versions of the product logos; on the desktop view
they're higher resolution and full colour." Very
clever indeed.
Thanks to WordPresss flexibility, Whitaker took
this further. "I wrote a function that generates a
black and white version for every image uploaded,
providing it is bigger than 400px wide. Its
relatively easy to conditionally check for the black
and white version and show it in the blog posts
featured image. Its nice having this automated
and it seems to be working well."
www.viewportindustries.com
92
11
Tornobambino
Tornobambino is a small Italian agency comprising

designer Fedrica Cau and developer Pasquale de
Luna. For their cool and colourful site, WordPress
was the obvious choice, Cau reveals. We think
WordPress is the best option for small websites
that need to be modified and tweaked often,"
she explains.
"Weve mastered WordPress in both full theme
design and plug-in development, which is why we
are able to create an almost custom CMS over the
engine, keeping development costs low when
compared to a full custom CMS coded from
winning portfolio site, WordPress certainly ticked

all the boxes.
"We find WordPress to be incredibly flexible,"
co-founder Austin Mayer explains, "whether we're
developing a portfolio site like Eyes and Ears or
full-blown creative artist websites such as A Fine
Frenzy (www.afinefrenzy.com) or The Wall Flowers
(www.thewallflowers.com).
Also, WordPress has an amazing developer
community. Chances are, if you run into a problem
or need to refine a hangup in your code, someone
has done it before and figured it out."
www.builtbyeande.com
WordPress is miles ahead of anything

when it comes to the availability of
plug-ins and overall ease of use
scratch." The agency usually develops its own
custom WordPress plug-ins in-house based on a
clients specifications. "And if needed, to keep
costs lower, we customise open source plug-ins,"
adds Cau.
www.tornobambino.com
12
E&E
The E&E agency mostly works in the music

industry, but has been known to flex its
considerable talents in other areas of the digital
realm. When it came to crafting its own award-
13
Jess Marks Photography
Brisbane-based wedding photographers, Jess

Marks and Steve Bliesner's online home is a fun,
whimsical website bristling with personality. When
it came to revamping the site, Bliesner says that
they, "actually moved from ExpressionEngine to
WordPress. We searched for a long time to find
the right design house to do this project. We
settled on Simple as Milk, and WordPress is what
they worked with, so we transitioned.
"Since we outsource most web and marketing
related things these days, more people and
Showcase
11
12
13
14
companies are proficient in WordPress over

ExpressionEngine, so it became little clear that
moving to WP was a smart idea."
"Coming from ExpressionEngine, some things
are much the same - the way you create posts,
enter data and so on," recalls Bliesner of the
transition between CMSes. "But WordPress is miles
ahead when it comes to the availability of plug-ins
and overall ease of use."
www.jessmarksphotography.com.au
14
Work by Simon
Work by Simon is the design studio site of Simon

Carr and Elijah Wasserman. The studio focuses on
design and development for HTML5, CSS3, mobile
websites and WordPress - which has been their
preferred CMS over the last four years.
"We love WordPress because it has the ability to
easily translate designs to custom templates,"
explains Carr. "Another reason it was our top
choice is flexibility for blogs and portfolio content.
"The portfolio section is easily controlled by
using custom WordPress post types. Each
thumbnail is uploaded with the featured image
field, and tags are also applied to indicate the
services provided."
The guys have taken full advantage of modern
CSS3 techniques. "Creation of CSS3 animations for
the Labs, Chemical Reactions and Observatory
pushed my limits of animation using CSS only,"
Simon jokes. But as you can see their efforts have
been worth it.
www.workbysimon.com
15
Branded07
Branded07 serves as a fantastic example of how

elegant a blog can be. This beautiful site, designed
by Rob Palmer, is clean and devoid of clutter. What
fascinates me most about the design, though, is all
the attention to detail.
Take, for example, the simple blog search form.
Not only does it occupy an odd location, but its
designed in a far more interesting way than a
simple box. The precision and elegance extends to
many elements, such as the buttons, illustrations
and even the pagination. Its just a WordPress skin
thats wonderfully executed.
Throughout the site, youll find layouts tailored
to the content. With a CMS, it can be tempting to
have a single layout that all content flows into, but
here each page feels as though its had special
consideration to ensure its proper delivery.
www.branded07.com and www.v1.branded07.com
16
Circa
Paul Mosig from Racket (www.racket.net.au)

selected WordPress to power the website for Circa,
a restaurant situated in Melbourne, Australia. Paul
has captured the spirit and distinct feel of the
restaurants decor to create an equally distinct
online presence.
More and more businesses are beginning to
promote themselves on the web, and restaurants
are no exception. Circa shares menus, recipes,
reviews and special offers online. The customers
dining experience is of the utmost importance to
Circa. The restaurant wanted this philosophy to
WordPress sites
come across on its website. Because we were able

to clearly define the required content types and
build custom templates within WordPress, it
allowed us to be truly uncompromising with the
graphic design, says Mosig. The beauty of
WordPress is that it allows you to create complex
designs, which are ultimately maintained by a
client with very few technical skills.
www.circa.com.au
17
Web Courses Bangkok
Web Courses Bangkok is an English training

centre providing beginner-to-advanced web and
graphic design courses in Bangkok. Carl Heaton,
founder of the company and designer of its newly
relaunched site, decided to use WordPress as
its CMS.
We release lots of content, partly for marketing
ourselves, but mainly for our trainees to use,
Heaton explains. The blogging roots of
WordPress made it very easy to get the content
out quickly and easily. Heaton was most pleased
with the flexibility of WordPress when it came to
building the templates for his design.
I found that other CMSs end up forcing you in
one direction and with this redesign we wanted
the CMS to work for us. Since the launch of
WordPress 3 the platform is really starting to hold
its own as a fully fledged CMS and the WCB site is
a great example of what its capable of. Its all a far
cry from the cookie-cutter implementations of
the past.
www.webcoursesbangkok.com
Showcase
WordPress sites
17
19
23
24
18
Iron to Iron
Iron to Iron is a two-person company founded by

designer Kevin Richardson and developer Jonathan
Christopher. Of their own site Kevin says: We
needed to effectively display our brand as well as
our philosophy.
They use WordPress for all of their client work,
he adds. It makes building any website easier,
ours included. Automating things, from the
portfolio content population to collecting contact
form submissions, is one of the many benefits.
Theyre also using the Pods CMS plug-in to give
them additional functionality and control of their
content. Christopher is also a member of the
development team for the plug-in: We devote a
consistent amount of time to that project in order
to better utilise it, he says.
www.irontoiron.com
19
Eddie Diaz Design
Eddie Diaz is a South Florida-based web and

graphic designer. When asked about his CMS
choice, he replied Using WordPress as the CMS
allowed me to focus more on the design and
layout, since the CMS made the populating of
content a snap.
It has also given me better SEO and search
engine results. Ive noticed my site being ranked
higher due to the CMS and the clean code and
layout. I believe WordPress is a winner in many
ways, and Ive used it for other personal and client
projects with great results.
www.eddiediazdesign.com
94
20
Yoke
Yoke is a studio based in Bristol. The design and

build of the site was a team effort by co-founders
Jay Bigford and Alister Wynn. The key to the
success of our website as a marketing tool for our
business is to have valuable expertise-based
content on there, explains Bigford. Were
constantly adding blog posts researching into
topics that relate to our target clients.
The guys selected WordPress as their CMS.
We can add posts seamlessly and easily, then
set up good interrelated articles between these
posts, offering the user a less linear journey
through our content, says Bigford, who goes on
to discuss workflow.
Using WordPress enables us to speed up the
build by narrowing the number of templates we
use. We know were designing for a CMS, so were
strict with our output and always stick to a
maximum of three templates. This enables us to
make sure we get fewer, tighter and much
more polished templates, rather than many,
loose pages.
www.thisisyoke.com
21
Grind
Grind is the gateway to a new workspace platform

that lets talent collaborate in a new way: outside
the system. The site provides information about
their platform, including what it is like to work at
Grind and how to join.
Magic+Might designed and developed the site
in collaboration with Co:Collective and they
selected WordPress as the CMS. We leverage

WordPress to manage content and templating for
the site. WordPress is also used to manage the
content for our members-area site, and our blog,
the Grindist, explains Josh Campbell. We picked
WordPress for a number of reasons. First we
wanted a stable, feature rich platform but without
a large investment, that would be able to grow
with our needs.
We also wanted a clean management interface
for our writers and editors so they can focus on
creating great content. There is a fantastic
community surrounding WordPress and the guys
at Grind feel that this reflects on the kind of
collaborative community that they are all about.
www.grindspaces.com
22
Guy Gyngell
Our next site is a showcase for Guy Gyngell, a

music producer/songwriter. It was designed and
built by Adam Allaway at Flint & Tinder (www.
flintandtinder.co.uk). Adam also selected
WordPress as the CMS to power Guys site.
After a fair amount of research and
experimentation with Joomla, Drupal and
WordPress, I settled on the latter for my own
company blog, The Tinderbox. The progression to
using WordPress as a CMS after that was a natural
move, Adam explains. In my opinion where
WordPress really excels is the fact that my clients
find it so easy to use.
This means that with very little effort on my
behalf, they can be up and blogging and tinkering
Showcase
WordPress sites
25
with their SEO meta data the very same day the
site launches. Custom post types are one of my
favourite features as they make creating a CMS for
a client so much easier.
www.ggmusicandaudio.com
23
Myjive
Myjive is a digital experience agency. The launch

of their new site was a team effort between Krista
Engler (interactive designer), Ron Edelen (creative
director), Albert Banks (technical director) and
Linsay Guinaugh (copywriter).
It selected WordPress as its CMS. Edelen
explains: WordPress provides a highly extensive
24
Rodesk
Rodesk is the website of an interaction agency

who provide brand identity, concept design, web
design and marketing campaign services for its
clients. It was co-founded by Laurens Boex and
Jasper van Orden. They selected WordPress as the
CMS to power their infographic-focused design.
WordPress is the best CMS for sites such as
Rodesk, weve developed with it for quite some
time, explains Boex. With a ton of plug-ins and
extensions and a worldwide community of
supportive developers its easy to work with and
integrate quickly.
www.rodesk.nl
With a ton of plug-ins and extensions and

a worldwide community, WordPress is
easy to work with and integrate quickly
set of features that can be customised to meet our
needs. Using a CMS allows for quick population
and editing of menus, copy and images.
The revisions functionality also enables us to
make sure our content is accurate. Were most
proud of the Work section. The CMS allows us to
associate Work with the Client, the Services and
Tactics performed on the project, the Industry,
the projects Flickr photoset and any related
Vimeo videos.
www.myjive.com
25
Ribot
Ribot is a Brighton-based company that creates

simple mobile products to inspire and assist, and
was started over four years ago by brothers
Antony and Jerome Ribot.
Its site is powered by WordPress, using a theme
that was designed in-house with HTML5 markup.
Jerome explains: We love to be semantic when
crafting HTML, so HTML5 gives us the ability to use
more descriptive semantic tags than just plain
<div>s, making the code easier to read, structure

and understand.
The hardest thing to do when starting with
HTML5 is wrap your head around the concept that
a page can have multiple headers and sections
now, and so more than one H1 tag. Its a different
way of thinking about HTML, and means you can
see a document as a collection of redistributable
modules of content rather than just a single page.
www.ribot.co.uk
26
6Wunderkinder
6Wunderkinders website shows off its first

product, the free and easy- to-use task
management tool, Wunderlist. The site was
designed by Jan Martin and the team selected
WordPress for the job.
There is a large community behind WordPress,
so you can access support and find answers
quickly, and you can use tons of plug-ins," begins
Martin. We put a lot of effort into a custom
design. Weve received a lot of attention for our
about page and invested a lot of time in
designing and building a story for each individual
working at 6Wunderkinder.
As WordPress continues to evolve, more and
more developers are turning to the system for
their CMS needs. The wave of so-called cookiecutter websites that WordPress has been accused
of starting has long passed. 6Wunderkinder is a
testament to that fact and a great example of what
can be achieved.
www.6wunderkinder.com
Showcase
WordPress sites
26
27
28
30
27
Girl With a Camera
Girl With a Camera is the photo blog of Ashley

Baxter where she shares photography of her life
and her commissioned work. The site was
designed by Matt Brett (www.mattbrett.com) who
migrated Baxter from Tumblr to WordPress.
I was using Tumblr for a good while, but
became fed up with the constant downtime, she
explained. I knew WordPress was hugely
customisable and would give me a lot of flexibility
over how I could display my photos.
Meanwhile, Brett says the feature hes most
proud of is the way that each posts layout and
background colour can be changed to best suit the
content. "One of my absolute favourite things
about WordPress is how fast I can go from an
HTML template to a working theme.
www.girlwithacamera.co.uk
28
Tinkering Monkey
Tinkering Monkey is an online shop that sells

simple wooden goods for everyday living.
Everything is made in the garage-turnedwoodworking-studio of Mike Cheung, product
designer and creator, and Paula Chang, who
manages the business and developed the site.
We used two CMSes, explains Chang, The
store is run through an open-source shopping cart
system called OpenCart, and the other pages are
managed through WordPress.
There are many e-commerce tools to choose
from, but Chang wanted to avoid the fees and
functionality limitations of other solutions. It had
96
all the features that we wanted built-in already,

she says, and a back-end that was easy for us to
jump in and make changes. It basically gave us full
control while keeping our costs to a minimum.
www.tinkeringmonkey.com
29
Intellidogs
This digital downloads store is run by Karen Wild,

and enables users to build their own personalised
dog training manual.
The site was designed and built by Alex
McGibbon (www.prettierpixels.com) who selected
WordPress for the job. It was decided early on
that the users needed to trust Karen in order for
them to make a purchase, McGibbon explains. A
blog is a great way for Karen to establish a rapport
with people, and as its such an important feature
of the site, WordPress seemed liked the best tool
for the job.
Thanks to the open source nature of the tool
and its plug-ins, he was able to modify the eShop
plug-in to meet the clients needs. I made the
store items open in an Ajax window that closed
once the user had added that chapter to the cart,
he explains. This made the process of adding
chapters very snappy, and massively sped up the
visitors task of customising their manual.
www.intellidogs.com
30
Jenny Bristow
Love food? Love HTML5? Then look no further

than the home of Irelands Good Food
Ambassador, Jenny Bristow. Created in WordPress
by the team at Web Design Northern Ireland

(www.websiteni.com) its refreshing to see HTML5
being used for client work.
Developer Derek Johnson explains the decision
to go with HTML5: The nature of WordPress
makes it easier to distinguish between <article>,
<section> and <div> content, he says.
When I was planning this project, it just
seemed more logical and straightforward to use
new HTML5 elements than to have a lot of nested
divs. The site uses a host of new elements, a
couple of new input types (search and email),
ARIA roles and block level links. I also love the way
sectioning content works to create a document
outline and give semantic structure to web pages,
adds Johnson.
www.jennybristow.com
31
Obi Media
Designer Christian Senior was given the task to

bring the Obi Media site up to date. "Im a big
advocate for the WordPress platform and since the
site was going to be updated by various people
we agreed that this was a good base for us. This
would give us the freedom to customise
everything, right down to the admin panel, and
make managing the site an easy task.
"I added a blog, which will provide two key
roles. First, it will enable us to keep our clients up
to date with whats going on and second, it
provides a hub for visitor interaction, through
comments and asking questions. "I also made use
of WordPresss custom menus in the header and
Showcase
WordPress sites
33
footer of the site so even non-techies can

re-arrange and edit the sites navigation should we
see a need to push visitors in a certain direction."
www.obimedia.co.uk
32
CRACK Magazine
CRACK Magazine is a monthly paper publication

and online platform that offers the latest in
cutting-edge music, art, reviews, and listings. They
asked design agency Fiasco Design (www.
fiascodesign.co.uk) to create a flexible site that
works as a desktop and mobile website, with an
easy-to-use, intuitive content management system.
Central to the brief was the need to increase
integral look and feel. By focussing on adaptable

grid structures they can now show off a wealth of
content types while looking smart on all devices"
says Ben Steers, Creative Director at Fiasco Design.
www.crackmagazine.net
33
Derren Brown
"Derren Brown is a witch!" According to some, this

is all we need to know about England's foremost
head fudger. But millions of people around the
world want to learn more about this leading
illusionist, mentalist, hypnotist, painter, writer, and
sceptic, and his site often pushing past two million
monthly page views, it's clearly the web that
The site was built using WordPress with a

sprinkling of jQuery plug-ins, lots of
emails, and cups of tea!
CRACK's user retention rate and lower user dropoffs, as the rigidity of their current site was clearly
limiting their growth.
The team at Fiasco Design worked with D:Coe
Design (www.dcoed.com) to create a fully
responsive design using a WordPress core that
focuses on adaptable grid structures to show off a
wealth of content, while looking smart on across
different browsers and devices.
"We created a fully responsive masonry-style
design that marries dynamic content with an
Words: Ryan Taylor and Kerrie Hughes

Ryan Taylor is a freelance designer
and front-end developer. He runs his
own business at Havoc Inspired
(havocinspired.co.uk) blogs at
ryanhavoctaylor.com and tweets
under @ryanhavoc. Ryan admits he is
obsessed with clean, efficient and
semantic HTML, CSS and jQuery (his
favourite framework).
Kerrie Hughes is Channel Editor at
creativebloq.com. Creative Bloq is the
go-to website for web designers, with
tons of useful tutorials, features and
tips, plus the latest news from the
industry. Hughes blogs daily on
everything from cutting-edge web
technologies to logos, motion graphics
and more.
people turn to to find more info. Pixel Dandy's

Marc Hagan-Guirey (www.pixeldandy.co.uk) the
man behind the recent redesign says, "The project
took six months. The team comprised of Duncan
Godwin who built the site, Abeo the project
manager and myself with the design and concept.
"The site was designed using Photoshop CS6
and Illustrator CS6. Duncan, the developer, built
the site using WordPress with a sprinkling of
jQuery plug-ins, lots of emails, and cups of tea."
www.derrenbrown.co.uk l
And finally
10 things you may have missed
10 things you
may have missed
We reckon by now you'll be a WordPress expert, but here's
a selection of things in this issue that you may have missed!
WordPress mistakes
01 Common
Jesse Friedman, author of the Web
06
Designer's Guide to WordPress, helps you avoid

common WordPress mistakes and takes a look at
some of the common myths and misgivings. It's
an unmissable read from one of the authorities
on WordPress and may surprise you!
See page 26
Site showcase!
Looking for some inspiration for

your next site? Want to see what
others are doing with WordPress?
Then check out our huge list
of sites all using WordPress
as their CMS.
See page 90
the Loop
02 Master
As a WordPress developer, there are quite
a few things you need to understand. Things like
themes and plug-ins, actions and filters, tags and
more. But none of these are more important than
the world-famous WordPress Loop the part that
makes everything tick. Without The Loop, there
would be no dynamic content. Joe Casabona
explains in this expert guide
See page 46
e-commerce to WordPress
03 Add
More and more websites are turning to
WordPress as their CMS, which concurrently
increases the number of shops and online
businesses using it for their e-commerce needs.
With an agglomeration of e-commerce plug-ins
available for WordPress, WP e-Commerce stands
out as a standardised solution its incredibly
powerful and expandable, and works with
just about every theme you can think of. Dave
Mackintosh is your host
See page 52
the scenes
04 Behind
Go behind the scenes on some great
site builds that use WordPress as a Content
Management System.
See page 76
WordPress
05 Responsive
Want to limit user admin damage and
prevent your responsive WordPress theme from
breaking? Of course you do! Check out this
expert guide from Jesse Friedman.
See page 30
98
a better portfolio
07 Build
You certainly don't need to be a web design
WordPress
09 Multilingual
For businesses adapting to a global market, as
wizard to create a decent looking portfolio site these

days. There are a number of elegantly designed
portfolio WordPress themes out there to get you
started on showcasing your work the best way
possible. And we've picked 20 of the best!
See page 80
well as organisations attempting to foster customer

loyalty at home, operating a website in multiple
languages, at the same time, is becoming more
common. With that in mind, we've put together a
tutorial looking at techniques you can employ in
WordPress to create a multilingual site.
See page 58
plug-ins
08 Essential
Arguably, one of the reasons WordPress is so
popular is that it happily supports templating and
plug-ins, making it highly flexible and customisable
to suit different website needs. This flexibility,
alongside the platforms huge popularity, means
theres thousands of free plug-ins available on
the web. That's the good news. The bad news is
that sorting the wheat from the chaff can be a real
challenge. So in this feature, weve chosen 10 of the
best WordPress plug-ins to add functionality to your
website and as the icing on the cake, they are all
available free of charge!
See page 14
Presents: The ultimate Guide to WordPress
themes!
10 Great
Free themes are a great way to get a blog
or website off the ground. You might want to start
writing about a topic but don't want to invest the
money in a custom site design on top of hosting
and a domain.
And once your site is up and running, there's
nothing to stop you dissecting them, building on
top of them and learning from them. In this feature,
we've selected 40 of the best free themes no
matter what kind of site you want to create so you
can get started with ease!
See page 84
9000
PRESENTS
Whether you're a WordPress beginner or a

seasoned pro, The ultimate guide to WordPress
has something for you. Discover the best themes
and plug-ins, learn expert techniques such as
customising the admin area and mastering
The Loop, and make sure your responsive
WordPress sites are future-proofed. If you're
creating or managing a site built in WordPress,
then this is the book for you
Like this? Youll also love...
Visit www.myfavouritemagazines.co.uk/design
for more information

The Ultimate Guide To Wordpress - Ebook

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

The Ultimate Guide To Wordpress - Ebook

Uploaded by

Copyright:

Available Formats

100 PAGES OF EXPERT WORDPRESS TIPS, TUTORIALS AND TECHNIQUES

Everything you need to master WordPress!

From the makers of

Future Publishing, 30 Monmouth Street, Bath BA1 2BW

The text paper in this magazine is

Welcome to The ultimate guide to

Presents: The WordPress Handbook 3

Presents: The ultimate guide to WordPress

Build the best sites

The best free plug-ins

WooThemes shows you how

Create a cracking folio

And how to use them

Meet the co-founder of WordPress 20

Add products to your CMS

Key WordPress skills

User-friendly custom fields

Hand-picked for you

with Meta boxes

33 great WordPress sites

Interview: Mike Little

The best free themes

Custom post types

Ace online resources

Customise the admin area

Secure your site

Create your own toolkit

The ultimate guide to WordPress

Global design skills

Filter with Infinite Scroll

In-page category filtering

Build a WordPress folio

Presents: The ultimate guide to WordPress 5

Presents: The ultimate guide to WordPress

Build the best WordPress sites

Bootstrap SVG CSS JavaScript Roots IcoMoon Inksc

LESS GPL Bootstrap C

aScript Roots IcoMoon Inkscape HTML5 Boilerplate Compas WooCommerce Internati

the founder of Caf Noir

Shannon Smith presents four ways

company that specialises

Build the best

Words Shannon Smith is

erplate Compass WooCommerce Internationalisation Accessibility Sass

ape HTML5 Boil

Build the best WordPress sites

PL Bootstrap SVG CSS JavaScript Rootts

strap Compass Inkscape

WordPress is the most commonly used

01 Use structured data

Tim Berners-Lee once said, I have a dream

engines, need to analyse all the web content that

ate Compass Comme

Presents: The ultimate guide to WordPress 7

scape HTML5 Boilerp

Build the best

Ported frameworks and themes

Schema creator The Schema Creator plug-in allows you to

From within Genericond allows you to use the Genericons

Thirteen theme (http://twentythirteendemo.

Structured data and themes