Download The Ultimate Guide to Wordpress.ebook...
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,
[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
© 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
4
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
s
ss
S
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
L
Java SVG CSS
Sc he ma
a em
tstrap
s
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
M
oo
SV
CSS J
oM
oo n
In k
sc ap e
ss W ooC om me rce Inte rn
r Sc a v
n
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
G
Presents: The ultimate guide to WordPress
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
6
aSc
o ok S Faceb r e t t i w EO T oast S ogle Y
ra p
V
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
S
Ic
G
EO tS
em
tr a
T
ts
oo eb
ch kS
p
eH
Ro o
r
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
s
ks
In
M oo n Ico
C
S va
c
M Ico
oo
B TML5
a tstr oo B L GP
o
SG LE S
SV
p
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
C
Ic oM
ap sc
rip
o LB GP
L5 TM H e
L5 e HTM scap
Ink oon
te Com
pass Wo
o
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
E
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
I
at
L ss Sa i on
Build the best WordPress sites a boutique web design
G
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
a
es cc nA tio
rap ootst PL B
Words Shannon Smith is
G
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
G
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)
p
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
i
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
a
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
m
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. 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
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. 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
L ility HTM ccessib ation A s li a n o ternati erce In s Comm Compas
ate Compass Comme 5 Boilerpl
Presents: The ultimate guide to WordPress 7
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: 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.
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
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. 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.
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 you’re building a custom theme for a client, the licence probably doesn’t 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 “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. 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
8
Presents: The ultimate guide to WordPress
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! 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/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. 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
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 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.
Presents: The ultimate guide to WordPress 9
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. 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.
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 doesn’t have to be difficult, but many people aren’t 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:
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
It’s 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
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
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, 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?
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
Presents: The ultimate guide to WordPress
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. 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.
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 you’ve 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)
Presents: The ultimate guide to WordPress 11
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
Presents: The ultimate guide to 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
Presents: The ultimate guide to WordPress 13
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 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!
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 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
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, 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 IfVimeography 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
Presents: The ultimate guide to WordPress
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. It’s 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 platform’s huge popularity, means there’s 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 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
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
Presents: The ultimate guide to WordPress 15
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
[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.
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
Presents: The ultimate guide to WordPress
function the_generator( $type ) { echo apply_filters('the_generator', get_the_ generator($type), $type) . "\n"; }
Expert tips
Secure your WordPress site
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]
Presents: The ultimate guide to WordPress 17
Expert tips
Secure your WordPress site
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.
Presents: The ultimate guide to WordPress
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
Presents: The ultimate guide to WordPress
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
Getting started
and really meeting a lot of people who are new to WordPress, is that they get a theme that’s 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 there’s 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 they’ve put in there. And that shouldn’t 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, it’s out of date” “Yes, add features to do with presenting the data in nice ways and all the rest of it,” he says, “but don’t 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 don’t want to annoy them. The next time you bring out an even better theme, your existing customers can’t change to it because they’ve 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 don’t 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 it’s 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 that’s available in WordPress,” Little says. “It lets you learn how to build these things and how to compose so you’re 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 they’re more concerned with producing new and prettier themes,” he says. “But you then see the situation where you can’t install a plug-in that does something different with your post thumbnails because you’re not using the standard WordPress API and so the plug-in can’t change the way your theme behaves. I think that’s a shame. It disappoints people because they’ve 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 doesn’t 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 you’ve 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. “I’ve actually customised off-the-shelf StudioPress themes for sites literally with a plug-in,” he says. “I’ve 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 don’t like the fact the backend interface doesn’t 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 don’t have to write all this code out: there’s 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, it’s probably out of date and, if it’s more than two years old, it’s definitely out of date. And if it’s got code and it’s more than a year old, it is absolutely out of date. It’s only half tongue-incheek, that.” l
Presents: The ultimate guide to WordPress 21
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
l
Stay updated on new web technologies
l
Exclusive access to the world’s leading experts
l
It’s the perfect gift for
SAVE
Hand-picked jobs by Creative Bloq, the UK’s 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
Key WordPress skills
Expert tips: Key WordPress skills 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 doesn’t 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 won’t be able to do much harm. Do not post content under an Administrator account to further limit people’s ability to guess your Administrator username.
Prefix 03 Table In general, it’s 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, it’s 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 It’s 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 wouldn’t 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 it’s 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 aren’t gods 06 All Some are but most, well, aren’t. That’s 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 isn’t all that difficult and with 20,000 of them there we need to make sure we aren’t assuming that they are all gems. Do your research on the developer and the plug-in or theme before you activate it.
let’s play nice! 07 Plug-ins, As stated above plug-ins aren’t always perfectly developed or utilising best practices set forth by WordPress. When you’re activating new plug-ins, make sure you do them one by one. Don’t 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 wasn’t 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 you’re posting your needs in the right place and accurately describing the problem you have.
Don’t assume that anyone knows anything about your system and don’t 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 didn’t mean to yell, but it’s so easy and so many people don’t do it. I shouldn’t 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
Presents: The ultimate guide to WordPress 25
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 It’s very important to make sure you’re 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 isn’t too hard if it’s 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 you’re 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 it’s common knowledge that tables by default start with “wp_” which means if you don’t change the table prefix, your Site Options table is “wp_ options”. It’s 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 won’t have to think about it again in the future.
replacing salts and keys 04 Not If you don’t 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, you’d be
Change your table prefix to increase security (see tip 03)
26
Presents: The ultimate guide to WordPress
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 We’ve 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 you’re 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 it’s the absolute best solution out there. Here’s 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 you’re 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 isn’t true (go to appearance -> menus -> screen options and turn on posts and tags). In content-heavy sites I’ll 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 aren’t using caching or don’t know what it is you’re 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 it’s probably vulnerable. It’s so easy to update WordPress with a single click – you shouldn’t 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 it’s not even funny. It’s very unlikely that your site will break on update but you should test to make sure if you’re 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 you’re looking for managed hosting and don’t want to worry about all this, WP Engine provides the best built-in caching I’ve seen and makes your life extremely easy.
WordPress updates 08 Ignoring I get it, it’s 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
Avoiding common problems
MYTHS… Some things still being said about WordPress just aren’t true. Thousands of developers around the world are working to make WordPress better and bring it into the new web future. So it’s a bit frustrating to build a 20,000 page directory that is secure, fast, reliable and easily editable, then hear a client tell us “Isn’t WordPress just for blogging?”
isn’t secure 09 WordPress Secure is a relative term, and no system is perfect. Here’s the deal, WordPress is powering 10 times more sites than most CMSs combined. If you’re 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 doesn’t 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 you’re 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. It’s 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,
Presents: The ultimate guide to WordPress 27
Getting started
Avoiding common problems
WordPress is not just for amateur bloggers – massive global companies use it, too (see tip 12)
there is no reason it can’t do what whatever you’re dreaming up.
WordPress is only for blogging 11 We just touched on this a bit but it’s 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 Mullenweg’s bio for WordCamp San Fran. It’s 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 don’t 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.
doesn’t 13 WordPress provide support WordPress is open source – how can it provide support? Well, if you’re looking for an 800 number, you’re right, it doesn’t exist. However, the idea that you can’t 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 can’t support WordPress 14 Speaking of giving back… Another common myth is that you can’t 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.
It’s 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 don’t 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 doesn’t 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
Presents: The ultimate guide to WordPress
Ever built a beautiful website that delivers a fantastic user experience and a client says “yeah, that’s all great but why is the logo so small?”
Getting started
Avoiding common problems
You can easily manage all your WordPress websites at once (see tip 15)
Sometimes we aren’t 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 can’t afford to exclude from being considered for bigger web projects. Let’s 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 wasn’t made to manage products and stores.
advanced web functionality but that literally doesn’t 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.
can’t do anything 18 WordPress out of the box I’ve 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 Here’s a little secret: the CMSs and systems that were made specifically for creating online stores aren’t very good. It’s true, there is no system that is as good at ecommerce as WordPress is at blogging or websites. That isn’t enough of a reason to go with WordPress and if it were 2010 I’d probably suggest that you don’t 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 you’ll be pleasantly surprised.
can’t be responsive 17 WordPress I’m not even sure I understand this one. I hear all the time that WordPress can’t support
a static site is that WordPress sites get their content from a database. It’s your job to use WordPress to convert database content into HTML markup. Once it’s 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. Don’t 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 doesn’t 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 it’s free, it isn’t good enough or doesn’t provide enough support.”
Here’s the thing, the money you’d 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 aren’t perfect You should hesitate before putting someone else’s 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 you’re using is well done, supported and highly rated. When you’re in the WordPress Plug-in Repository make sure the plug-ins you’re 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 isn’t 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 aren’t you just using WordPress for this project?” and I hear back “Umm... I don’t 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
Presents: The ultimate guide to WordPress 29
Feature
30
Futureproof WordPress
Presents: The ultimate guide to WordPress
Feature
Futureproof WordPress
Futureproof WordPress
Want to limit user admin damage and prevent your responsive WordPress theme from breaking? Follow Jesse Friedman’s top tips
Words Jesse Friedman (@professor) is a veteran WordPress developer, author and speaker. He’s director of web interface and development at Astonish, a professor at Johnson and Wales University, and co-ordinates two WordPress meetups and WordCamps. 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 2012’s 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 site’s integrity. WordPress has, for several reasons, become the world’s 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. You’re likely turning your responsive WP theme over to someone with no knowledge of either RWD or WordPress theming. If you don’t 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. It’s your job as a developer to both educate and provide resources to protect 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 it’s fitting we start here – but you should be prepared for an anticlimatic response. The answer is: “You shouldn’t.” WordPress is a CMS or web framework that connects a database of content to a frontend website. Whether you’re 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
Presents: The ultimate guide to WordPress 31
Feature
Futureproof WordPress
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 you’ve developed to power their site. They’re not necessarily the website’s 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. You’ve been working with them to create a website for months. They’ve signed off on wireframes, designs and now are being handed the keys to their shiny new website. You’ve probably done a great job of getting them excited, but without the proper education they’re going to get lost in the box the toy came in. This applies whether you’ve built a custom theme for a specific client, or you’re 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. That’s 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. That’s 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 It’s 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 you’ll be pleasantly surprised by what WordPress can do. If you take a look at some of the awesome WordPress-powered sites out there, they didn’t 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. It’s also important to note that all your favourite frameworks, tools and strategies will still work with WordPress. This goes for anything from ZURB’s Foundation to adaptive images. The most important takeaway is simply to not feel constrained or confined by WordPress.
Media There’s 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: As you can see in the above markup, there are static width and height attributes included in the tag. The problem is, the attribute values are based on the image’s 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 don’t need to include the full size image every time. If they’re
Presents: The ultimate guide to WordPress
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 you’re 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 aren’t 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 can’t 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 don’t run wild. If you haven’t 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 you’re working on a theme for a specific client, or building one to be released to everyone, you’re 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 one’s going to add this many main nav items,” then you’re wrong.
Feature
Futureproof WordPress
l Don’t 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 it’s all powered by WordPress
It’s 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 isn’t 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 didn’t 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 phone’s 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' => '%3$s', 'depth' => 0, 'walker' => '' ); wp_nav_menu( $defaults ); Shortly we’ll 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, you’ll find the same image used in many different places, in many different
Breaking point Jesse Friedman’s responsive robot (http://netm.ag/robot-242) provides a tragicomic reminder of why RWD needs to consider large as well as small screens
Presents: The ultimate guide to WordPress 33
Feature
Futureproof WordPress
sizes. The user admin didn’t have to open Photoshop, crop and resize all these images, then upload them. How does this relate to responsive integrity? Well, you’re 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 you’ve set in place.
WP mobile detect I spoke on this topic at last year’s 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 user’s 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 isn’t 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 don’t give users a choice. Let’s 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, you’ve decided to write an article showcasing the top 10 infographics related to WordPress. As a user of your site, I’ve arrived ready to read your most recent articles. I’m on a bus, heading to work, and am using my AT&T iPhone 5. I don’t have unlimited data, and my coverage can be sketchy. Upon arriving at your site, I’m now automatically downloading 10 full size infographics, unknowingly. Immediately, my experience is poor. Not only am I downloading data that’s 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][/ notdevice] [phone][/ phone]
This experience is far better: users aren’t 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 needn’t 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 aren’t 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 I’ve 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 is only called 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. That’s 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: ‘Isn’t 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 that’s easy to learn, open source and backed by thousands of developers eager to share and help. Because WordPress is open source, it’s free. But it’s also waiting for you to make a contribution – which you can do in a range of different ways. So many of us owe our careers
Presents: The ultimate guide to WordPress
to WordPress that it only seems right that we all support it. I believe in this so heavily that I dedicated an entire chapter of my book, Web Designers’ Guide to WordPress, to discussing the many ways that you can contribute to the project. Here’s the kicker: if you make a contribution to WordPress core, you’re 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. There’ll be times this isn’t the best solution, but there are many reasons you’d want to use it.
Having fun With RWD, we’re so focused on what works, the strategies and user testing that we often forget to have fun. There’s 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 Don’t 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
WordPress’s 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 doesn’t 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 isn’t just about mobile. I also had fun last year creating a responsive robot. He’s 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. Wouldn’t 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 a mention 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
Futureproof WordPress
UX design Comments appear alongside post content
(http://jetpack.me/support/photon). Photon is a free CDN 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. You’ll 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. It’s 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 I’d 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 Designer’s 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 theme’s integrity. l
Content heavy Smashingmagazine.com still maintains its responsive integrity
Presents: The ultimate guide to WordPress 35
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!
You’ll find additional imagery, exclusive audio and video content, and we’ve partnered with Tuts+ Premium to bring you superb screencasts that tie in with the practical projects in every issue. Don’t 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
Customise the admin area 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
Filter with Infinite Scroll Design sites with impact!
Page 58
Page 52
62
Build a WordPress folio Expert portfolio design skills
66
Presents: The ultimate guide to WordPress 37
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 we’ll 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 isn’t always the most efficient in terms of getting the task done. When using WordPress in combination with paid-for WordPress products, it’s 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, we’ll be discussing how to create a unique upsell for your customers, through a customised toolkit plug-in, to enhance your WordPress-powered projects.
We’re 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, we’ll create an additional plug-in that uses Gravity Form’s hooks and filters to do so. This may require some additional digging around and familiarising yourself with Gravity Forms. If you’re customising a theme, we’d recommend that you use a child theme. If you are already using one of these, we’d also recommend storing your customisations in a separate plug-in. Developers often view each child theme as an individual project – but this shouldn’t 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 project’s development. This is important in order for our toolkit to scale well across a wide array of projects.
Before diving into our toolkit, it’s important that we fully assess the environment we’re 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 it’s possible for us to leverage the power of Canvas’s 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
Presents: The ultimate guide to WordPress
Many developers aren’t 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, it’s important to see how you can leverage the products you’re using and help them to work together
Create your own WP toolkit
Out the box Before we begin working on the toolkit, we should make a list of the various items we’d like to include. We can refer to this as the project scope
Now that we understand what we’re going to be doing – and how – let’s get a 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; it’s not just for the end-user. WooDojo has been carefully crafted with both end-users and business owners 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 project’s 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.
Let’s 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; we’ll use a PHP class to store our code and
Many developers aren’t 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 is the 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
Presents: The ultimate guide to WordPress 39
Tutorial
Create your own WP toolkit
‘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 doesn’t 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 can’t 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 we’re 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: global $yourname_wordpress_toolkit; $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: global $yourname_wordpress_toolkit; $yourname_wordpress_toolkit = new YourName_WordPress_Toolkit();
40
Presents: The ultimate guide to WordPress
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 scope of 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:
