The Ultimate Guide to Wordpress.ebook

(1)

PRESENTS

100 PAGES OF EXPERT WORDPRESS TIPS, TUTORIALS AND TECHNIQUES

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

(2)

(3)

Xxxxxx Xxxxxxxxxx

Future Publishing, 30 Monmouth Street, Bath BA1 2BW

Telephone +44 (0)1225 442244 Website net.creativebloq.com

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.

© 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.

From the makers of

Editorial

Editor Rob Carney, [email protected] Art editor Mike Brennan, [email protected] Production assistant Adam Hurrell, [email protected] 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, [email protected] Account Manager Julian Tozer, 020 7042 4273, [email protected] Senior Sales Executiver Ross Arthurs, 020 7042 4128, [email protected] Senior Sales Executive Laura Watson, 020 7042 4122, [email protected] Director of Advertising James Ranson, 020 7042 4163, [email protected] Marketing

Group Marketing Manager Philippa Newman, [email protected] Circulation

Trade Marketing Director Daniel Foley, [email protected] Print & Production

Production Coordinator Vivienne Turner Licensing

Senior Licensing & Syndication Manager Regina Erak, [email protected] 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

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

(4)

Contents The ultimate guide to WordPress

Page 26

Page 42

Page 06

Page 46

Page 66

Page 30

(5)

Contents The ultimate guide to WordPress

Build the best sites

Improve your WordPress skills

06 11 awesome resources

The best online resources

12 The best free plug-ins

Designers: take note!

14 Secure your site

Stop the hackers!

16 Interview: Mike Little

Meet the co-founder of WordPress 20

Key WordPress skills

Expert tips

25 20 WordPress mistakes

And myths, and misgivings…

26 Futureproof WordPress

Responsive WP masterclass

30 Getting started/tips

Create your own toolkit

WooThemes shows you how…

38 Customise the admin area

Backend skills

42 Master The Loop

Advanced WP techniques

46 Custom post types

And how to use them…

50 WordPress e-commerce

Add products to your CMS

52 User-friendly custom fields

…with Meta boxes

56 Multilingual WordPress

Global design skills

58 Filter with Infinite Scroll

In-page category filtering

62 Build a WordPress folio

Create a cool online portfolio

66 Tutorials

40 brilliant WP tutorials

Ace online resources

70 20 portfolio themes

Create a cracking folio

80 The best free themes

Hand-picked for you…

84 33 great WordPress sites

An amazing showcase

90 Showcase

(6)

ss W

ooC

om

me

rce

In

te

rn

at

io

na

l

gle Yo

Yo

Y ast SE

O Tw

Tw

T itter F

acebook

S

tra

p S

V

G

CS

S J

ava

S

pass WooComme rceInternation alisatioon asWooCommerceeInterna

p SVG

CSS Ja

v

a

Sc

gle

Y

Yo

Y

o

ast

SEO

Tw

T i

YoYoY

as

tS

EO

TwTwT

itte

r F

ace

boo

k Sc

hema

_Sass

LES

_{S G}

PL

Boo

tstra

_p

SV

_G

C

CS

_S

Ja

_va

Sc

_rip

t

YoYoY

as

w

itte

rF

ac

eb

oo

kS

che

ma

Sas

_{s L}

ES

_S

GP

_L

Bo

ots

_tr

r

_a

_ap

SV

_G

C

SS

Ja

va

Sc

rip

iptR

oots

IcoM

oon

Inks

_cap

e

n In

ksc

ap

_e

HT

pe

HT

_M

C

H C

H S

S

J

S

i

t

T t

TM tMR

T R

T

ts

Ic

oM

oo

n

ss WooC

ommerc

_{e Intern}

ation

TML5Boilerplate Compass WooCommer

Sas

_{s L}

ES

_S

G

PL

Bo

ots

tra

_p

SV

_G

C

SS

Ja

sc

ap

e

HT

M

L5

Bo

ile

rpl

ate

Co

mp

ass

W

na

lis

at

io

n

Ac

ce

ss

ib

ilit

y

G

oo

gle

YoYoY

Roots

IcoM

oon

Ja

va

Sc

rip

tR

oo

_ts

Ico

_M

oo

_n

Ink

sc

_ap

e

M

oo

n

In

ks

gl

Tw Tw T itter FFacebo okSc hema

YoYoY

as

tS

EO

TwTwT

itte

rF

ac

eb

VG

C

SS

Ja

va

Sc

rip

t

ata

Go

ogle

Yo Yo Ya

stS

EO

Tw Tw T

itte

rF

ac

eb

oo

k

Sc

he

_m

a

Sa

_ss

LE

SS

G

PL

Bo

ots

tra

pp

SSVV

G

CS

S

Ja

oast SEO Tw

Tw

_{T itter F}

_F

_a

_c

cebook Schem

a Sass L

_{ESS G}

PL B

_o

oast SEO Tw

Tw

_{T itter Facebo}

ok Schem

a Sass L

gle Y

_Yo

_{Y as}

_o

t SE

O TwTwT

itter

Fac

ebo

_ok

Sch

_ema

Sass L

ESS GPL

Bootstrap SVG C

_SS

ogle

TML5Boilerplate Co p

tra

p

S

V

VG

CS

S J

av

aS

crip

t Ro

ots

IcoM

oon In

ksca

p

pe HTML

5 Boilerplate Co

ots IcoM

oon In

_ksca

pe

HTM

L5

GPL Bootstrap SV

_{G CSS Java}

Script Ro

PL

Bo

ots

trap

SVG

CSS J

avaScrip

t Roots Ico

Sa

ss

LE

SS

G

PL

Bo

ots

tra

p S

VG

CS

S J

ava

Scri

p

6 Presents: The ultimate guide to WordPress

(7)

Sc

h

ema Sass L

ESS GPL Boot

strap SVG CSS J

avaScript

Roots IcoMoon Inkscape HTML5 Boilerplate Compas WooCommerce Internationalisation Accessibility SassLESS GPL Boots

aSc

ript

Roo

ts Ico

Moon I

nkscape

HTML5 Boilerplate Co

mpass WooCommerce Internationalisation Accessibility S

ass LESS GPL Bootstrap Comp

ass WooCom merce R JavaSc riptRoo ts IcoMo o BoilerplateC ompass

PL Bootstrap SVG CSSJavaScript Roots IcoMoon

Inkscape HT

ML5Boilerp

lateCompa s

nAccessibility SassLESSGPL BootstrapCompass Inkscape

ipt Roots IcoMoonInkscape HTML5 Boilerpl

nationalisatiIn

ternationalis ation Acces

sibility Sass L

ESS GPLBootstra

p

IcoMo

onInk

cript Root

s IcoMoon Inksc

ape

HTML5 Boilerplate Compass WooCommerce Internationalisation Accessibility Sass LESS GPL Bootstrap Compass WooCommerce Roots IcoMoon Inkscape HT

witte

r Face

book

Sche

ma

Sas

s L

ES

S

G

PL

Bo

ot

st

ra

p

SV

G

C

SS

Ja

va

S

p

LE

SS

G

PL

Bo

ot

st

ra

p

SV

G

C

SS

Ja

va

Sc

rip

tR

oo

ts

Ic

o

Moo nIn ksca pe maSa ssLE SSGP LBo otst rap SVG CSS Ja va Sc rip tR oo ts Ic oM oo n In ks ca peH T ML5 Boil erpla teCo mpa

Dat

SGP LBo otstra p SVG CSS JavaS cript Ro otsIcoM oonI CSSJavaScript Root I M l C pa LESS GPL B ootstrap

SVGCSSJavaScript Roots IcoMo

onInkscape H G PL Boot stra pSV GCS SJa vaSc ript R oots IcoMo onInkk scap e HT Roots Ico Moon In kscape HTML5 B oonInkscape HTML 5 s Wo ss WooC ommerc eI alisatio nSass LESS G PL Bo eHT ML5 Inkscape H TML5BoilerplateCom

passWooCommerceInternationalisation AccessibilitySass LESS

GPL Bootstra ass WooC ommerc eIntern ationali sationS HTML5 BoilerplateCompas s WooComme

rce Internat ionalisat ionAcce ssibilit kscape HTML 5Boile rplateCo mpas W ooCom mer

Boots

_trap

SVG

_C

S

S Ja

_vaS

crip

t Ro

_ots

IcoM

LESS G

_P

_L

Boots

_trap

SVG

CSS

Java

Scrip

t Roots

IcoMoon Inkscape HTML5 Boilerplate

Compass CommerceInternatio

nalisationAccessibi

lity HTML5Boilerplate Compass Comme

L5

Bo

_ile

rp

late

Getting started Build the best WordPress sites

Presents: The ultimate guide to WordPress 7

Shannon Smith presents four ways

to improve your WordPress site using

the latest development techniques

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. We’ll 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

engines, need to analyse all the web content that we produce. Microdata is the newest form of structured data in wide use. It’s 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 Words Shannon Smith is

the founder of Café Noir Design (@cafenoirdesign) (www.cafenoirdesign.com), a boutique web design company that specialises in multilingual web development http://shannon-smith.ca

Build the best

WordPress

sites

ImageMike Brennan

is art editor of .net twitter.com/mike_ brennan01

(8)

omm

m

_e

_r

_c

ce Interna

_{tionalisation}

Accessibility

y

vaSc

ript R

oots Ic

oMoon Inksc

ape HTML5 Boilerplate Co

_{mpass GNU}

PHP Localisation GlotPress

sation

GlotPre

ss SVG

CSS Java

Script Roots IcoMoon Inkscape HTML5 Boilerplate Multilingua

l

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/schema-creator). It allows you to insert Schema.org microdata directly into WordPress pages and posts.

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,

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

Genericons Genericons contains 94 embedded vector icons. It’s 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 creator The Schema Creator plug-in allows you to add microdata to your posts and pages quickly

From within Genericon’d allows you to use the Genericons icon font set from within WordPress

Plug-ins exist for more specific functions,

like adding structured data to event and

real estate listings, or to recipes

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: it’s a mobile-first design tool that incorporates a flexible grid and the newer, lighter JavaScript library Zepto (http://zeptojs.com) instead of jQuery. It’s 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.

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 “ultra–Lean HTML5, CSS and JavaScript building blocks for rapid website production” hasn’t yet been ported to a WordPress theme, but it’s 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. It’s designed for rapid prototyping, but hasn’t yet been ported to WordPress.

Themes and frameworks

Thirteen theme (http://twentythirteendemo. wordpress.com).

Genericons are vector icons embedded in a web font. They’re free and, because they’re 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.

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-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 you’re building a custom theme for a client, the licence probably doesn’t matter, but if you

(9)

Bootstrap SVG CSS JavaScript Roots IcoMoon Inkscape HTML5 Boiler

_plat

mm

erce

Inte

_rn

Data Go

ogle Yo

Yo

Y ast SEO

Tw

T itter Faceb

ook Schema Sass LESS GPL Bootstrap SVG CSS JavaS

cript Ro

_ots

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/guidelines-resources/) on the WordPress.org website.

Icon font plug-ins and services

Is there a plug-in? Yes! Genericon’d (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 can’t 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. There’s even an icon font starter template available (https://github.com/Heydon/Community-Icon-Font). There are also a number of online tools available, like IcoMoon (http://icomoon.io), to make the whole process easier.

03 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. It’s 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 it’s designed as a minimally styled starter theme that includes Twitter Bootstrap An open-source framework designed for fast and consistent website development

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

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 doesn’t have to be difficult, but many people aren’t sure where to even begin.

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.

Official theme accessibility audit

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://

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. It’s 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. Accessibility plug-ins

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.

Accessible WordPress sites

WordPress installation. If the language you require isn’t 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 that’s ready for the world, internationalising WordPress themes isn’t especially difficult.

Internationalisation (I18n) is simply the process of making an application, or in this case a theme, ready for translation. 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

(10)

omm

m

_e

_r

_c

ce Interna

_{tionalisation}

Accessibility

y

vaSc

ript R

oots Ic

oMoon Inksc

ape HTML5 Boilerplate Co

_{mpass GNU}

PHP Localisation GlotPress

sation

Glot

SVG CS

S JavaScrip

t Roots IcoMoon Inkscape HTML5 Boilerplate Multilingual

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 WordPress-defined 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:

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.

Which one should I use?

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,

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, it’s 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?

The easiest interface

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

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

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.

More information

Here are some further useful links:

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-preprocessor-for-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)

Getting started with preprocessors and WordPress

<?php $translated_text = __( 'text_ message', 'domain' ); ?>

It’s also possible to generate phrases that use placeholders, that use different values for singular

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

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.

That’s 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

SVG CS

Internationalisation purposes Plain text strings from the 404 error page are wrapped in WordPress-defined PHP functions Starter theme Roots is based on HTML5 Boilerplate

WordPress uses the open-source GNU

gettext framework to prepare special

files for translation purposes

(11)

Bootstrap SVG CSS JavaScript Roots IcoMoon Inkscape HTML5 Boiler

_{plate Com}

pass W

ooCo

_mm

erce

Inte

_rn

Data Go

ogle Yo

Yo

Y ast SEO

Tw

T itter Faceb

ook Schema Sass LESS GPL Bootstrap SVG CSS JavaS

cript Ro

_ots

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, language-specific PO (Portable Object) file. It’s 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 that’s currently being developed to facilitate the translation process. It’s installed online (or locally), just like WordPress, and is currently being used to help translate parts of WordPress.com. It’s intended for collaborative translation, but single translators can use it as well. It helps users translate POT files and create PO and MO files. It’s currently available for download at http://glotpress.trac.wordpress.org.

Unilingual 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.

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.

Result: a futureproofed site

From structured data to open-source icon fonts and Bootstrap, hopefully you’ve now learnt a few new methods and techniques to apply to your development to help ensure you create better, futureproof WordPress sites.

From structured data and using icon fonts to using Twitter Bootstrap and accessibility tips, here are my top resources to help you improve your WordPress sites, including official guidelines and useful articles: General resources

lWordPress theme review

(http://codex.wordpress.org/Theme_Review) lWordPress plug-in guidelines

(http://wordpress.org/plugins/about/ guidelines/)

Using structured data

l‘Getting started with structured data’, Google (http://googlewebmastercentral. blogspot.ca/2013/05/getting-started-with-structured-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-turn-your-icons-into-a-web-font/)

l‘HTML for Icon Font Usage’, CSS-Tricks (http://css-tricks.com/html-for-icon-font-usage/)

lMaking, 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-a-responsive-website-design/)

l‘Free Printable Twitter Bootstrap Wireframe Template’, Dribbble (http://dribbble.com/ shots/873373-Free-Printable-Twitter-Bootstrap-Wireframe-Template)

l‘The Big Badass List of 319 Useful Twitter Bootstrap Resources’, Bootstrap Hero (http://bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources)

Multilingual sites

l‘Build a multilingual site with WordPress’, Shannon Smith, Creative Bloq (www. creativebloq.com/wordpress/build-multilingual-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

lThe Accessibility Project (http://a11yproject.com)

lWeb Content Accessibility Guidelines 2.0 Checklist (www.w3.org/TR/2006/

WD-WCAG20-20060427/appendixB.html)

Resources

Text domain The Twenty Twelve WordPress theme uses the text domain ‘twentytwelve’, declared in the functions.php file

POT file A translator can view a POT file and translate each string of text using software like Poedit (www.poedit.net)

(12)

Getting started WordPress resources

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.

01 WordPress.org

_{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 plug-in provider WooThemes. Now an plug-international team of designers and developers catering for hundreds of thousands of users, WooThemes

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

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.

07 WPKube.com

_{WPKube is a WordPress resource site}

which focuses on a wide scope of WordPress-related 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.

08 digwp.com

_{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.

09 net.tutsplus.com

_{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.

11 Speckyboy.com

_{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

11 awesome

WordPress resources

All of the sites listed

here will bring you

expert WordPress

techniques, tips,

tutorials and advice

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…

(13)

Getting started WordPress resources

07

01

02

03

08

06

09

10

11

04

05

(14)

Getting started Free WordPress plug-ins

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 platform’s huge popularity, means there’s 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, we’ve 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!

01 BuddyPress

_{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 you’re 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

02 WP e-Commerce

_{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, it’s open source just like WordPress – so it’s perfectly possible to extend the cart’s 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 Vimeography

_{If you’re a film-maker or someone who}

handles video on a regular basis, you’ll 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

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

04 HTML5 jQuery Audio Player

_{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-jquery- audio-player

The 10 best

(free) WP

plug-ins for

(free) WP

plug-ins for

(free) WP

designers

01

02

03

04

05

(15)

Getting started Free WordPress plug-ins

06

08

09

07

10

05 SlideDeck

_{SlideDeck enables you to create customised}

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

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

06 Seven Days

_{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

or a business with different opening hours. It’s very simple, but extremely functional and useful if your content strategy changes daily.

www.wordpress.org/plugins/seven-days

07 WPTouch

_{If you're looking for a mobile skin solution,}

WPTouch is probably the best WordPress plug-in

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 user-friendly 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 don’t 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

08 JetPack

_{JetPack brings some of the functionality of}

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

09 Price Table

_{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 non-technical users.

www.wordpress.org/plugins/pricing-table

10 NextGen Gallery

_{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

The flexibility of WordPress, alongside the

platform’s huge popularity, means there’s

thousands of free plug-ins available

(16)

Expert tips Secure your WordPress site

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.

01 Audit your overall

_{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

Make sure you keep WordPress updated (see tip 2).

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!

02 Make sure you keep

_{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.

03 Report bugs and

_{vulnerabilities}

If you ever discover security vulnerabilities on your own, do the community a favour by sending a detailed email to [email protected]. If the vulnerability is in a plug-in instead, email [email protected]. 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.

04 Check for exploits

_{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.

05 Disable custom HTML

_{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 );

06 Don't look brand new

_{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:

function the_generator( $type ) {

echo apply_filters('the_generator', get_the_ generator($type), $type) . "\n";

}

12 ways to secure

your WordPress site

Some simple housekeeping can make a world of difference to the likelihood of your

(17)

Expert tips Secure your WordPress site

Running Exploit Scanner every so often checks for indications of malicious activity (see tip 4). Reporting bugs and vulnerabilities can benefit both you and the WordPress community (see tip 3).

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

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

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.

07 Hide indexes

_{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-name-here)\/.*$ ./ [NC,R=301,L]

It's easier to crack into a WordPress

site when you know which version is

installed, so be sure to hide it…

(18)

Expert tips Secure your WordPress site

08 Back it up!

_{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.

09 Install security plug-ins

_{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.

10 Installing plug-ins from

_{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.

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.

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.

11 Install other useful plug-ins

_{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.

Your WordPress site should be on a

schedule for malware and vulnerability

scanning, and logs should be kept

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.

12 And finally… putting

_{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

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.

(19)

AVAILABLE

IN PRINT AND

DIGITAL

ON SALE NOW!

The SEO Handbook

(20)

Getting started Stay on trend

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

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. That’s 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 they’ve not bothered to learn anything better.”

So is that down to laziness? “I think it’s laziness,” he answers. “To me it’s 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 haven’t got that discipline of trying to understand the right way to do things. But, because what they’ve 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 don’t have to get into a lot of PHP code and you can concentrate on the styling and so on because there’s 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 I’m seeing regularly, especially now I’m doing training classes