A comprehensive masterclass

W to becoming an instant expert

NE
VOLUME 2

Master the expert skills needed to create better blogs

Become a
WordPress
guru!

Protect your site Customise with CSS3 Pro guide to plugins

 A comprehensive masterclass to
becoming an instant expert

Welcome to
WORDPRESS
WordPress is one of the most advanced content management systems on the
planet. Not only does it offer simple ways to maintain your website, but endless
customisation options mean you can add plugins and widgets to fantastic pre-built
themes. Whats more, with WordPress you dont have to stick to what they give you,
its possible to buld your very own theme framework and this book will walk you
through how. Inside you will find in-depth guides to essential settings,
recommended themes and plugins, and loads of tutorials for personalising your
blog or site. WordPress is a treasure trove of goodies and its amazing what you can
achieve with the assistance of CSS, HTML and Photoshop. This newly revised edition
will help you build on your existing knowledge, so you can become a true
WordPress genius.
 WordPress Imagine Publishing Ltd
Richmond House
33 Richmond Hill
Bournemouth
Dorset BH2 6EZ
 +44 (0) 1202 586200
Website: www.imagine-publishing.co.uk
Twitter: @Books_Imagine
Facebook: www.facebook.com/ImagineBookazines

Publishing Director
Aaron Asadi

Head of Design
Ross Andrews

Production Editor
Fiona Hudson

Senior Art Editor

Greg Whitaker

Art Editor
Alison Innes

Printed by
William Gibbons, 26 Planetary Road, Willenhall, West Midlands, WV13 3XT

Distributed in the UK, Eire & the Rest of the World by:
Marketforce, 5 Churchill Place, Canary Wharf, London, E14 5HU
Tel 0203 787 9060 www.marketforce.co.uk

Distributed in Australia by
Network Services (a division of Bauer Media Group), Level 21 Civic Tower, 66-68 Goulburn Street,
Sydney, New South Wales 2000, Australia Tel +61 2 8667 5288

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

WordPress Genius Guide Volume 2 Revised Edition 2015 Imagine Publishing Ltd

ISBN 9781785461491

Part of the

bookazine series
Contents
Everything you need to
become a WordPress PAGE
master and expand the 16
functionality of your blog

Master
the new
update
Page 8

PAGE
82
GETTING STARTED
24 The Settings 46 Control user profiles 82 Convert a static site with a
30 Use widgets in WordPress 48 Back up your WP blog child theme
31 Get to grips with plugins 50 Secure your WP site 86 Create a mobile-friendly site
32 Manage WordPress 90 Transform HTML to WP
Comments THEMES PLUGINS
34 Posting WordPress content 56 The 20 best WordPress
36 Mastering the Media Library themes 100 Pro guide to plugins
38 Getting hosted with WP 66 Create your own theme 106 Edit widgets and plugins
42 Set up a host 74 Build a responsive 110 Protect your blog from spam
44 Manage your different WordPress theme 114 Increase site visits with SEO
domains 78 Customise a WP theme 118 Add a social author box

66 WordPress
Mac OS X Genius Guide
 WordPress
Genius Guide

PAGE
168

PAGE PAGE
110 142
120 Build a WordPress slideshow 144 Make an animated off-screen
124 Schedule your blog posts 3D menu
148 Master animated pop-up
effects
CUSTOMISATION 150 Create a rotating product
128 Add multiple moving viewer
backgrounds
130 Create an animated logo
with CSS3
BEYOND WORDPRESS
154 Master Google Analytics
134 Blur and focus your text
with Font Font 160 Speed up WordPress
136 Build circular on-hover 164 Code an input form in 3D
navigation with CSS
148 Create animated buttons 168 Design layered backgrounds
with CSS3 in Photoshop
142 Code a fixed image scroll- 172 Create an eCommerce web
over effect element with CSS3

77
 Master the new update

Master
the new
update
WORDPRESS HAS UNDERGONE ONE OF ITS MOST
SIGNIFICANT UPDATES, BUT IS IT REALLY ALL THAT
DIFFERENT? WHATS REALLY NEW IN VERSION 4.3?
WORDPRESS 4.3 IS out now, WordPress experience. Enhancements to
and includes a selection of new managing images and videos help us
features and security fixes to save time with previews, while browsing
help bring your blog or website for new plugins has become a far better
right up to date. experience, allowing you to see small
A host of new features are available in previews in advance.
WordPress 4.3, from improvements to In the background, various
the Theme Customizer view and Media security fixes have been implemented,
Library interface to enhanced media ensuring that your blog, your posts and
handling in the Visual Posting view and a any user data such as email addresses is
brand new interface for installing plugins. protected against online intruders.
Youll also find some changes to the Iit is important to make sure your blog
TinyMCE UI when creating a new post is up to date. This means reviewing
and it is now possible to select a plugins regularly as well as making a
language when you install WordPress for backup before you upgrade. If youve
the first time. been holding off on recent updates, you
These improvements all work together shouldnt miss the most recent iteration
to deliver an updated, polished of WordPress version 4.3.

8 WordPress Genius Guide

 WordPress
Genius Guide

WordPress Genius Guide 9

 Master the new update

Get to know the Dashboard

A NEW LOOK TELLS YOU EVERYTHING YOU NEED TO KNOW WHEN YOU LOGIN TO WORDPRESS
AT FIRST GLANCE, the Dashboard may not seem all Elsewhere on the Dashboard, the At a Glance panel, Options to determine which boxes appear and which
that different in WordPress v.4, but on closer your blogs comments Activity, the Quick Draft box and remain hidden (see page 15).
inspection you should spot the Welcome panel, the WordPress News (useful for spotting when new Further items will be added to the Dashboard as you
where a collection of shortcuts can be found. updates are imminent!) are also available, and are as install plugins. Several prominent apps add important
Ideal for newcomers to WordPress, the panel which customisable as they were before, you are able to drag at a glance-style information to the Dashboard, such
provides shortcuts for adding widgets, installing a new and drop for your own liking. You can use the Screen as Jetpacks visitor stats plugin.
theme, writing a new post and adding an About page,
as well as managing widgets and menus, turning Further items will be added to the Dashboard
comments on and off and more can be dismissed if
youre a more experienced user. as you install plugins

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

Plugins At a Glance Rearrange panels Welcome panel News panel

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

10 WordPress Genius Guide

 WordPress
Genius Guide

Get WordPress 4.3

UPGRADE TO WORDPRESS 4.3 FOR ALL THE LATEST FEATURES
ONE OF THE greatest aspects of WordPress is its much-admired easy installation, and the
latest version is no different. If your blog is already running WordPress, ensure your database is
backed up, then sign into the Dashboard, find the notification informing you that WordPress 4.3 is
available and click the link to begin the upgrade process.
The latest incarnation of WordPress includes all the previous features in v.4, but before checking
them out check your current plugins and themes. This is to ensure that they are compatible with
the latest version of WordPress just installed. Modify, update and change accordingly.
So, what does the latest version have to offer? The big three are menus in Customizer, formatting
shortcuts and site icons. Customizer allows users to quickly modify, update and live-preview menus,
while the formatting options mean no need to head into the code or select text and choose an
option, just add the right characters. Finally, add site icons to display in the Address Bar.

After the update completes, youll be

presented with the new Dashboard page
Creating posts

Blogging made easier

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

02: Format your posts

Use post formats to style the published article
appropriately for instance, a video post might have
the clip at the top of the page.

03: Visual Posting

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

WordPress Genius Guide 11

 Master the new update

Revised media library

CHANGES TO THE WORDPRESS MEDIA LIBRARY MAKE CHOOSING IMAGES SIMPLER
ONE KEY ADDITION to WordPress v.4 is an
improvement to the Media Library. It is now possible
to view a larger-resolution version of an uploaded
image and make the necessary changes with ease.
Improvements in how your images are handled in the
Edit screen (Media>Library>{Select your image}>Edit
Image) meanwhile allow you to make and save edits
without worrying whether or not the changes you make
will be applied.
Although it isnt advisable to edit images on the server
of a busy website, sometimes it just cannot be avoided (we
would advise that image editing usually takes place on
your computer or tablet).
You can also add a new title for the image, set a caption
to be displayed when it is embedded in a post as well as
display alt text when the image doesnt load. A description
is also useful!
Whether youre editing images or words you can cycle
between attachments uploaded by using the arrows in the
top-right corner of the Attachment Details view.
Top tip
Intelligent resizing
rearranges the left and right
The software will display the video preview, menus to fit above and below
the editing box, enabling you to
as it would on the sites it originates edit your blog on smaller devices.

Easily embed videos

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

12 WordPress Genius Guide

 WordPress
Genius Guide

Installing plugins in WordPress

USE THE NEW INSTALLER TOOL TO PREVIEW PLUGINS AND SAVE TIME

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

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

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

Plugin details
Full details about the
plugin youre considering
can be viewed by clicking
More Details

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

Top tip
When checking new

Plugins made easy plugins, always view the

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

WordPress Genius Guide 13

 Master the new update

Get the language right

ADJUST YOUR LANGUAGE SETTINGS FOR YOUR CONTRIBUTORS
IF YOU RUN a blog that is targeted at a foreign country, and have a team of bloggers
who speak the language of that region, then it might be a wise strategy to ensure that
they can use WordPress effectively.
The best way to do this is to setup the blog software using their preferred language, which is
now an option when you install WordPress v.4 onto a new server.
Youre probably familiar with the WordPress installation screen, seen as you open your
domain name in your browser after uploading the latest unzipped version of the blog software.
Setting your preferred language is the first option here. If youre used to using automated
installers in cPanel or similar server admin tools, the language option will also be found here.
Once the language is set, it cannot be changed without reinstalling, so ensure you have
selected the right option.

You can now get a full preview in the Theme

Customizer as you make changes Live widgets

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

02: Adding a widget

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

03: Save your changes

Widgets can be reordered by clicking and dragging
and like other changes will update in the preview.
When youre happy click Save & Publish.
<above> The Theme Customizer has become a more versatile tool that allows you to preview your widgets

14 WordPress Genius Guide

 WordPress
Genius Guide

Adjust your Screen Options Top tip

The Screen Options button
CUSTOMISE YOUR WORDPRESS V.4 EXPERIENCE BY CONFIGURING SCREEN OPTIONS
is available across several
HOW DO YOU use WordPress? For most, it is a case of Dashboard, you can customise the blogging softwares admin screens in WordPress
sign in, scramble around looking for the link or feature back-end to see only what you need. v.4, such as the Add New Post,
youre looking for on the Dashboard or New Post page, For instance, youve installed several plugins to your All Posts and Dashboard. These
write your post, and then logout. With the addition of more WordPress v.4 blog, and the Dashboard is beginning to options offer freedom to
and more plugins over time, this process can become look a bit cluttered. All you need to do in this situation is personalise the back-end so
increasingly slow. open the Screen Options box at the top of the browser you only see the elements
The reason for this is simple: youre not using window, and disable items that you dont need to see, you need to edit.
WordPress right. Using the Screen Options button, dont use, or dont need to access through the Dashboard.
available at the top of almost every admin screen in the Click the Screen Options button when youre done.

Open the Options

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

The Options are flexible

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

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

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

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

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

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

Dont hide, minimise

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

Tailor menus
These controls are tailored to the
Dashboard screen

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

WordPress Genius Guide 15

 Supercharge WordPress

UNLEASH THE FULL POTENTIAL OF WORDPRESS WITH CUSTOM POST TYPES, TAXONOMIES AND PLUGINS
WORDPRESS, THE WORLDS largest CMS, taxonomies. These are two of the sharpest tools for tweak them to be more tailored for your needs by
is powerful right out of the box. For simpler WordPress developers when they are looking to build creating your own custom post types. You can even
sites you can probably make do with its more complex sites where there are several different unregister the standard posts and pages and replace
posts and their categories and tags, and its types of content and there is a need for more advanced them with custom post types that better fit your needs
pages for more static content. Whatever you might levels of categorisation. if you wish.
need beyond that can often be solved by a plugin. To understand what custom post types are, all you The same goes for custom taxonomies. The default
But if you want to take your WordPress site further really need to know is that the posts and pages, which categories and tags are in fact taxonomies and you
and utilise the platforms true CMS capabilities, you will WordPress supports by default, are in fact two post can create your own. This opens the door to a ton of
probably want custom post types and/or custom types. You can recreate them with new names and possibilities, as you will soon see.

16 WordPress Genius Guide

 WordPress
Genius Guide

<above> The Custom Post Type UI interface

isnt pretty, but it gets the job done

Using a plugin
If you dont want to get down
and dirty with the code, there
are plugins thatll create
<above> The Book custom post type from http://tdh.me, as seen in the admin interface custom post types for you
There is a WordPress plugin for just about
everything now and creating custom post types

Create custom post types isnt any different. The thing youll have to
remember is that these plugins create the post
type for you, which means they register it with the
CUSTOM POST TYPES UNLOCK THE TRUE CMS POTENTIAL IN WORDPRESS AND IN parameters (name, permalink structure, support,
JUST A LITTLE WHILE, SO WILL YOU and so forth) youve chosen, which lets you
manage them in the admin interface. What the
What are they? Why you should use them plugins wont do is give your theme the necessary
Custom post types are anything you want, Whats the point of using custom post types functionality to display the custom post types.
basically. Technically, its a little more and should you really extend beyond the Granted, most themes will be able to display the
complicated than that default posts and pages at all? posts using the default templates, but you
probably had more in mind for your custom post
As weve already established, custom post types are the The default posts and pages post types are more than types. The point is, you will still need to create the
same as the default posts and pages that the standard enough for most sites. Youve got your news sections necessary theme template files for your custom
WordPress install comes shipped with. Posts have their and blogs and whatnot as posts, while your static post types and custom taxonomies for that
own set of rules, like being able to be associated with information, the About section for example, is a page. matter if you want them to be any different to
categories and tags. Pages, on the other hand, dont Add menu functionality (again, a post type) and media the themes defaults.
support categories and tags but they have other rules uploads (attachment post type) and youve got One of the better plugins for creating custom
like being capable of a hierarchical structure where everything most sites need. post types is Custom Post Type UI. Its been
one page is organised below another, and so on. When you want or need to step beyond that though, around for a long time and has a good reputation
Despite these differences, both posts and pages are youll want to create custom post types. This could be and it even supports creating custom
post types. Those are not the only post types that something as simple as a custom post type for your taxonomies, despite its name. That means that
WordPress comes with though; there are also books, or the groundworks of a complicated site you can create both custom post types and
attachments (media uploads), revision (post revisions) structure with so many types of content that youll want custom taxonomies with this one plugin, giving
and nav_menu_item (used for media items). In total, to separate them from each other. It might even be for you a head start if you prefer to do as much as
WordPress ships with five post types. creating hidden search indexes (something we wont possible in the admin interface.
When creating a custom post type, you are usually delve deeper into here as its advanced stuff most

adding another one, although you can both alter and people wont have to worry about) ticking in the
remove existing post types. This means that you could, background, or its content meant to go into widgets for
if you wanted to, add a custom post type that shares all more flexibility. The possibilities are, as they say, endless. It could be as
the features of the default WordPress page post type You should use custom post types to simplify and
but includes support for categories as well. What a organise things. However, that doesnt mean that its simple as a custom
custom post type actually supports is something you appropriate to use them everywhere and all the time. It
decide. You can even hide a custom post type from might be tempting to have one custom post type for post type for your
view altogether if you want, not even showing it in the News, another for Reports, and a third one for
admin interface, if thats what you need. Interviews but this is generally a bad idea. Dont books, or the
The custom post types you create have the freedom recreate sections that could just as well be categories
grounds of a complex

of being exactly what you want, stored as a specific (the section) and posts with custom post types, as
post type in the database just like with your posts thats making things more complicated than necessary
and pages. for yourself. site structure
WordPress Genius Guide 17
 Supercharge WordPress

Code Library
Custom post types
Obviously there are a lot of settings and alternatives when it comes to creating a custom
post type, so in this code snippet weve kept things reasonable. The code works in a
Adding a separate
selection in the
admin interface
themes functions.php, but should be in a compatibility plugin
might be more
// Register Custom Post Type//
manageable than
001 function custom_post_type() {
having an overload

002 $labels = array( All the code for creating a
003
004
name
singular_name
=> Movies,
=> Movies,
custom post type (or several)
should go in a function. At
the end well add that
of categories
005 menu_name => Movies, cfunction to the init action with
006 parent_item_colon => Parent Movies:, add_action() Where to use them
007 all_items => All Movies, With the power of the custom post type
008 view_item => View Movie, unlocked, its hard to imagine not using them
009 add_new_item => Add New Movie, everywhere, right?
010 add_new => Add New,
011 edit_item => Edit Movie, Custom post types are great. So great in fact, that its
012 update_item => Update Movie, easy to start using them too much; while custom post
013 search_items => Search Movies, types are great, they come with a few caveats. One of
014 not_found => Not found, the first things you need to remember is that adding
015 not_found_in_trash => Not found in Trash, more options in the WordPress admin interface might
016 ); not be a good thing. Less technical users will be
017 $rewrite = array( The array for supports daunted by more things to manage, if thats the overall
018 slug => movie, contains information about
what sort of elements the feeling of making additions. On the other hand, adding
019 with_front => true, post type should support. In a separate selection in the admin interface might be
020 pages => true, this case its the post title field,
more manageable than having an overload of
021 feeds => true, the editor, the excerpt,
choosing an author, and categories to consider when working with content. As
022 ); featured images always, theres a thin line as to what is reasonable and
023 $args = array( whats not.
024 label => movies, Custom post types really shine on content that
025 description => Movies, differs a lot from the traditional posts and pages.
026 labels => $labels, Product directories are an obvious choice, because
027 supports => array( title, here youll not only want to separate the products (ie
028 editor, excerpt, author, thumbnail, ), product post type posts) from the regular post flow of,
029 taxonomies => array say, a news section. Its also likely that your product
030 ( post_tag, actor ), posts will need more boxes and settings than most
031 hierarchical => false,
032 public => true,
033 show_ui => true,
034
035
show_in_menu
show_in_nav_menus
=> true,
=> true,
Theme template
036
037
show_in_admin_bar
menu_position
=> true,
=> 5,
files for custom
038
039
menu_icon
can_export
=> ,
=> true, post types
040 has_archive => true, Custom post types will use your themes
All the details are collected
041 exclude_from_search => false, in $args, including $labels template files if possible, just like any other post
042 publicly_queryable => true, and $rewrite, which youll find type. These are the ones youll probably be most
043 rewrite => $rewrite, in the $args array as well.
These, along with the post type interested in:
044 capability_type => page, name, are passed to
045 ); register_post_type() Archive template: archive-X.php, where
046 register_post_type( movies, $args ); X is the name of the custom post type.
047 }
Single template: single-X.php, where X is
// Hook into the init action the name of the custom post type.
add_action( init, custom_post_type, 0 );

18 WordPress Genius Guide

 WordPress
Genius Guide

Create a custom taxonomy

SOMETIMES THE DEFAULT CATEGORIES AND TAGS WONT CUT IT THIS IS WHERE
CUSTOM TAXONOMIES COME IN

What are they? Why you should use them

Understanding what a taxonomy actually is Taxonomies bring order to the WordPress
will help you put your custom taxonomies to galaxy of posts, giving you even more tools to
better use tie your posts together

WordPress ships with a set of post types and also Categories are among the most powerful tools in the
has two taxonomies per default. Both categories and WordPress arsenal. Most sites can manage with just
tags are taxonomies, albeit working a bit differently. posts and pages (and attachments, obviously) and
You can see that when using the admin interface. categories. With categories, you can easily create
Categories are a set of checkboxes where you sections on your site, consisting of a flow of posts.
<above> The purpose of the Book post type is to give the choose one or several, and they can also be Thats what taxonomies do best: they bring order to
books their own part of the site, keeping them separate hierarchical, which is to say that a category can your content.
from posts and pages have another category as its parent. Tags arent like Creating additional taxonomies gives you
other post types; you dont want to litter your posts and that at all; theyre not hierarchical and therefore have additional order, at least if you think things through
pages with boxes pertaining to size and shipping and no relationship to each other. In the admin and dont overdo it with a taxonomy for
weight and costs and whatever it else it is you need to interface that means that the tag box is free text, everything. That said, some content might need
describe and work with a product in such a site. which often means that the tags will be a little bit more some sort of sorting, be it category- or tag-like, but
On http://tdh.me, theres a custom post type for chaotic and less ordered than the categories due to it shouldnt be mixed with the standard posts.
books, for exactly the same reason as stated above. user behaviour. Thats when you create a custom taxonomy and
These are the times where custom post types really A taxonomy has terms associated to it. This means thats where they shine. There are obviously other
work: when you need a different set of content, that a category, in the category taxonomy, is a term. A times when custom taxonomies hold their own as
whether its in the interests of being user friendly in tag in the tag taxonomy is also a term. When you create well, such as plugins registering hidden taxonomy
terms of the need for a lot of boxes and settings, or your own custom taxonomy, the items within it will also terms and such, but thats a bit out of the scope of
because the content just doesnt belong with the be terms. this article.
regular flows of posts. There is actually a third taxonomy shipping Much like categories and tags, custom
Obviously there are so many other uses for custom with WordPress, being the Post Format taxonomy. taxonomies can have their own archives. This is
post types as well. Sliders, if you have to have them, fit This one has special rules, such as that its not really useful, because it means that youre not
perfectly. Just use a post in a custom post type for each meant to be extended (but obviously you can just limited to sorting content by itself, but you can
item in the slider, cut everything not needed for the do that), and youre only allowed to choose one also make the archives stand out if you like. In
slider posts content, and youll have something thats of the defined terms (Quote, Image, Standard, fact, much like categories can be used to
easy to manage for the users. Posts wouldnt do at all and so forth) for your post. You shouldnt worry create sections on a site, you could do the same
here because obviously you dont want slider posts to (or possibly mess with) the Post Format with your custom taxonomies, bringing further
show up in search results, so thats another strength of taxonomy, but its good to know what the feature order to the user experience as well as the
custom post types thats worth remembering. actually is. administrative one.

Dont forget mobile users

Remember that mobile apps arent on par
with the browser at all times

Something to remember about custom post types is

that they might not work in the apps your users rely
on. At the moment most mobile apps for both iOS
and Android dont support custom post types at all,
which means that the users are tied to the web browser
when working with these things. Granted, the
WordPress admin interface will work in most modern
mobile web browsers, but the experience is not as slick
as the apps at this time. Its important to be aware of
these things because if youve built a news site and
want to snap and post a breaking news item really
quickly, being able to use an app to do this might be the
upper hand you need.
Not surprisingly, this is also an issue for custom
taxonomies, so do your homework first if mobile apps
are important to the workflow. <above> Custom taxonomies look and behave like categories and tags, blending well with the WordPress interface

WordPress Genius Guide 19

 Supercharge WordPress

Code Library
Custom taxonomy
// Register Custom Taxonomy
function custom_taxonomy() {

001 $labels = array(

002 name => Actors, Custom taxonomies
are created in a
003 singular_name => Actor, function that is added
004 menu_name => Actor, to the init action with
005 all_items => All Actors, add_action() in the end
006 parent_item => Parent Actor,
007 parent_item_colon => Parten Actor:, <above> Showing the Actor taxonomy with some terms
008 new_item_name => New Actor,
009 add_new_item => Add New Actor,
010 edit_item => Edit Actor, Where to use them
011 update_item => Update Actor, Fine-grained control of your content through
012 separate_items_with_commas => Separate Actors custom taxonomies is nice but where do
with commas, they really shine?
013 search_items => Search Actors,
014 add_or_remove_items => Add or remove There are a lot of great examples of places where
Actors, Whether a custom custom taxonomies can help. Much like the category-
015 choose_from_most_used => Choose from the taxonomy is powered sections of a simple site, you can add more
most used Actors, hierarchical or not
decides if its like ways to tie content together. The first thing you need to
016 not_found => Not Found, categories (value set to remember is that you decide which post types be it
017 ); true) or like tags (value default ones shipped with WordPress or custom post
018 $rewrite = array( set to false)
types youve created support the custom taxonomies
019 slug => actor, that you create. This means that you can add in
020 with_front => true, additional taxonomies where you want to, making them
021 hierarchical => false, relevant across the post types. The same goes for the
022 ); default categories and tags.
023 $args = array( Custom taxonomies are often used to create
024 labels => $labels, database-like functionality. One of the better examples
025 hierarchical => false, is the movie analog, where you use custom post types
026 public => true, for things like genre, year of release and actors. This
register_taxonomy()
027 show_ui => true, registers the actual would mean that the genre custom taxonomy would be
028 show_admin_column => true, custom taxonomy, with hierarchical, acting much like the standard categories
029 show_in_nav_menus => true, its name (actor), what
post types it should do. The year of release and actor custom taxonomies
030 show_tagcloud => true, work on (posts) and would be non-hierarchical, which means theyll behave
031 rewrite => $rewrite, with what rules (passed like the standard tags do. The purpose of storing this
032 ); through $args)
sort of data in a custom taxonomy, rather than a post
033 register_taxonomy( actor, array( post ), $args ); meta box (custom field), is because of the archives
034 } youll get. Lets say for example that you want all the
Action movies, Action being a term in the genre
// Hook into the init action taxonomy. Well, just like with any term, you can get an
add_action( init, custom_taxonomy, 0 ); archive easily enough. The same goes for all the
movies released in 1987 (the term 1987 within the
year of release taxonomy), or the ones where Roger

Template files for custom taxonomies Moore is an actor (the term Roger Moore in the
actors taxonomy).
If you want additional control over your custom taxonomies, youll need to add the The way you can get archives and therefore
appropriate template files to your theme, otherwise theyll just revert to the default ones. useful sections on your site from taxonomies makes
These are the template files that youll probably want to consider adding: them a very useful tool. Obviously its also data you can
query should you need to; for example, by creating a
TAXONOMY ARCHIVE FOR A TAXONOMY ARCHIVE: GENERAL TAXONOMY ARCHIVE: page template detailing all the James Bond movies by
SPECIFIC TAXONOMY: TAXONOMY-X.PHP, WHERE X TAXONOMY.PHP, WHICH WILL BE
actor. Youd have to write a separate WordPress query,
TAXONOMY-X-Y.PHP, WHERE IS THE NAME OF THE USED FOR ALL TAXONOMIES.
X IS THE NAME OF THE CUSTOM CUSTOM TAXONOMY. using WP_Query, for that page template, but since the
TAXONOMY, AND Y IS THE data is there as terms in various taxonomies its not
TERM SLUG. such a big step.

20 WordPress Genius Guide

 WordPress
Genius Guide

Needless to say there are a lot of things that can be

done with custom taxonomies, much like there are a lot
of things being done with the default tags and
Compatibility plugins
categories. The big difference is that here you have full NOW THAT YOUVE CREATED YOUR CUSTOM POST TYPES AND TAXONOMIES, LETS
control to decide what rules there are for the ENSURE THAT THEYRE PORTABLE
taxonomies that you create.
If youve ever read about custom post types and should not be in the theme
Term descriptions are useful custom taxonomies before in tutorials and blog posts, functions.php file, so they are
Describe your terms for more useful youll notice that the most common instruction is to put here instead.
archive pages the necessary code in your themes functions.php file. 006 Version: 1.0
That works, technically, but its a bad idea. 007 Author: Thord Daniel Hedengren
Terms, whether theyre residing in the default categories Think about it: sometimes you change your theme, 008 Author URI: http://tdh.me
or tags taxonomies, or in a custom taxonomy created which means youll get a new functions.php file. That in 009 License: GPL3
by you, have a description field. Most themes forget turn means that youll have to move your custom post 010 */
about this, which is a shame since its the perfect spot type and custom taxonomy code to the new functions. // Put your custom post type and custom
to add a little more reference as to what the archive php, manually copying and pasting. This isnt a big thing taxonomy functions here!
page the user is viewing is actually all about. The obviously, but its another thing to remember and a bit 011 ?>
description is managed on your term page in the of a nuisance.
WordPress admin interface, where you can also change The better way to do this is using a compatibility Thats it, a plugin header with some basic information
the name and the permalink of the description. Dont plugin, which really is a plugin like any other, but it for WordPress. Having done that, all you then need to
forget this very useful tool when developing sites, with contains the code you need for things like custom post do is put the necessary functions, as described
or without custom taxonomies. types and custom taxonomies. These are features and previously, in the plugin file. Upload to wp-content/
additions to your WordPress site that youll want to have plugins/ and activate the plugin and there you have it!
access to no matter what theme youre using, so the
code for them should be portable between themes. By Plugins are versatile
sticking the code in a plugin, itll always be there and Compatibility plugins can be useful for
the only related things youll need in your theme will be many things
things that belong there, like the template files for
custom post type single posts, or custom taxonomy Its not only custom post type and custom taxonomy
archives, and so forth. code that belongs in a compatibility plugin there are
You create a compatibility plugin much the same plenty of other features that do as well. The general rule
<above> Adding some information about Roger Moore, a
way as you do any other plugin. If youre unfamiliar with is that everything that needs to work if you change
term in the Actor taxonomy this, its straightforward enough to pick up. All you need your theme should be placed in a compatibility plugin.
is one file, lets call it compatibilty.php, with the One of the most common mistakes are themes with
Getting weird 404s? necessary plugin header telling WordPress that its a shortcode functionality, perhaps for including fancy pull
When working with custom post types and custom plugin, in a similar way to how the header in a themes quotes or product listings, or whatever really.
taxonomies, sometimes youll get completely style.css does for themes. Shortcodes are great, but if the necessary code
unexpected 404 errors when trying to view archives containing their functionality is missing, then theyre
and such. This is usually WordPress permalinks going 001 <?php just text in brackets thatll show up within your content.
wonky, so just go to Settings>Permalinks and update 002 /* You can easily avoid this by putting the necessary code
permalinks (you dont have to change anything) and 003 Plugin Name: Compatibility Plugin for the shortcode functionality in your compatibility
things should be working fine again assuming you did 004 Plugin URI: http://tdh.me plugin, much like you do with custom post types and
everything right in the first place, of course! 005 Description: These functions custom taxonomies.

Useful plugins THERE ARE OBVIOUSLY A LOT OF PLUGINS RELATED TO CUSTOM POST TYPES AND
CUSTOM TAXONOMIES IN SOME FASHION OR ANOTHER HERE ARE SOME TOP PICKS
THAT MIGHT HELP YOU DECIDE WHICH TO USE

Post Type Switcher Term Management Tools Types - Custom Fields and
wordpress.org/plugins/post- wordpress.org/plugins/term-management- Custom Post Types
type-switcher tools Management
Post Type Switcher is an excellent plugin that comes in Term Management Tools is one of those plugins that is bit.ly/1h4ILt0
handy when you need to reorganise your posts a bit. just plain awesome. It not only lets you change terms Types is one of those everything-and-the-kitchen-sink
Basically, the plugin lets you move one post from one between taxonomies, letting you make categories from plugins you should be wary about using. This ones
post type to another, which means that you can use your tags for example, but it also has the ability to pretty good though; it gives you the tools to manage
Post Type Switcher to transform posts to pages and merge several terms into one. Its very useful and has custom post types, taxonomies and fields. There are
vice versa. It also means that any registered post type the added bonus of being completely compatible with some premium features you can unlock, but the plugin
is available. custom taxonomies. works just fine without paying anything.

WordPress Genius Guide 21

Getting started
The top tools and techniques
24 The Settings
Get to grips with the depths of WP settings

30 Use widgets in WordPress

Learn how to cusotmise your blog

31 Get to grips with plugins

Add an extra element to your website

32 Manage WordPress
Comments
Start discussions on your blog

34 Posting WordPress
content
Format your posts and get used to editing

36 Mastering the Media

Library
Take control of the 4.0 Media Library

38 Getting hosted with WP

Explore the things to consider about hosts

42 Set up a host
Get your blog self-hosted easily

44 Manage your different

domains
Handle your domains with ease

46 Control user profiles

Add contributors and authors to your site

48 Back up your WP blog

Never lose your content again

50 Secure your WP site

Fight the hackers with ease

By achieving mastery over

the settings and their options
youre halfway to turning your
blog into a success

22 WordPress Genius Guide

 WordPress
Genius Guide

WordPress Genius Guide 23

 Getting started

The Settings
MASTER THE SETTINGS AND GAIN FULL CONTROL OF YOUR WORDPRESS BLOG

Site title
Once added, your sites
title will appear at the top of Timezone
the browser window, so Ensure your blogs
make sure its memorable timezone city is set
and catchy! correctly to ensure that
post scheduling works.
Some apps also rely on
this being setup

Style Date
How do you want the date to
appear on your blog?
Choose from one of the
available options or select a
custom format
Set E-mail
When you setup WordPress,
your email address is
required for sending plugin Start Date
and moderation updates to. If you plan on using
You can change it by calendar plugins, use the
updating this field Week Starts On drop down
to select the first day of
your week

CONFIGURING YOUR WORDPRESS website correctly is vital to getting should appear on a single page? All of these options, and more, can be managed in
your blog working effectively. Options for discussion, managing media, the Settings menus, which is split into six sections: General, Writing, Reading,
specifying a home page and managing permalinks and much more can Discussion, Media and Permalinks. If you are able to achieve mastery over the
be accessed via the Settings screens. Need to determine how comments settings and their options, you will be halfway there in terms of turning your blog
are displayed, or how avatars appear? Want to specify how many blog entries into a success.

Name your blog

01: Site title details 02: Specify the URL 03: Manage the timezone
Your site must have a title and a tagline. Both are Specify if WordPress is installed in a subfolder on Setting the right timezone for your blog will help
important, but the tagline is particularly vital for your domain in the WordPress Address (URL) field. with scheduling posts and managing plugins. You
ensuring the most basic level of SEO. Site Address (URL) is the URL for readers to use. can configure a Date Format and a Time Format.

24 WordPress Genius Guide

 WordPress
Genius Guide

Writing Settings Top tip

WANT TO UPDATE YOUR BLOG VIA EMAIL? CONFIGURE WRITING SETTINGS!
Using Press This can
THE WRITING SETTINGS page covers a range of
options, from deciding how emoticons should
to specify a Mail Server and Port, a Login Name/
email address used solely for this purpose and a
streamline your
appear to specifying update services. Password. Because any message sent to the email workflow considerably,
One of the most powerful options in the address will be published automatically, these allowing you to embed
WordPress Settings menu is found here, the ability details should remain secret. You can also specify
to post by email. While you will probably have a Default Mail Category for your emailed posts.
images or post or
access to a WordPress mobile app (available on Note that there is also a Default Post Category create drafts on
almost all smartphones) there is a chance that you option (along with Default Post Format) for posts the fly.
may have restricted access in some situations. In added in the usual manner. Remember to always
this scenario, you can use the Post via email tool click Save Changes.

Email Post
Category To post by email, ensure
Setting a default post you have entered a mail
category can save a lot of server name, and also
time when writing posts, create a unique email
creating drafts and using address to send your
the Press This bookmarklet posts to

Password
If you have trouble creating a
password for posting by email,
use one of those created at
random by WordPress and
displayed here

Press This Ping Posts

The Press This bookmarklet Add ping services to help
can be dragged to your publicise your blog. You can
browsers toolbar. Use it to find a list of update services
clip media from any web to include in this field on the
page to include on your blog WordPress.org website

Emoticons and more

01: Formatting emoticons 02: Press This bookmarklet 03: Ping Update Services
If youre a blogger who likes to use emoticons, use Drag this bookmarklet to your browser favourites Get more views for your blog by adding a list of the
the Formatting option to specify whether you bar. When you spot a post you want to link to, click most popular update services to ping. The more
would like WordPress to show graphical smilies. Press This to copy the link into a draft post. you add, the more services will pick-up your posts.

WordPress Genius Guide 25

 Getting started

Reading Settings Top tip

MANAGE HOW YOUR BLOG DISPLAYS POSTS, AND WHERE THEY CAN BE FOUND
By configuring the
IS YOUR BLOG a blog, or is it a website? There are page option to be set in order to display a flexible two email text boxes
many reasons for using WordPress as a content home page.)
management system, and if this is the path youve Significantly, the Reading Settings also display the
with some amusing
chosen then heading to the Settings>Reading screen Follower Settings, one of the key ways to introduce promises about your
will enable you to alter what the front page of your site your blog to readers who follow your blog or one of blog, you can ensure
displays. If you want to show the blog, then display the posts on it. Here, ensure you add a professional,
Your latest posts. However, if you want a static page customised response rather than relying on the
readers return
to be displayed, use A static page to select the default option, and make sure your reader feels regularly.
appropriate option from one of the drop-down welcome. After all, you want them to come back again
menus. (Some WordPress themes require the static and again!

Front page
Whether youre using
WordPress as a blog or as a
content management
system for a static website, Blog count
use Front page displays to How many posts do you
configure as needed want to see on your blogs
front page? You can
configure this setting here,
clicking the arrows to adjust

RSS Feeds
Search RSS/Atom feeds are created
Want to keep your blog automatically each time
private and off the radar? your blog is updated. Use
Tick the Search Engine this counter to determine
Visibility box to discourage how many recent items
Google and other services should be included
indexing your site

Email text
Enter a custom email
message to your readers in
these fields, introducing
your blog and its aims when
someone follows your blog
or posts

Page display

01: Blog page count 02: Feed management 03: Search Engine Visibility
The blog page on your site is set to display ten Syndication feeds (such as RSS/Atom) display ten If you dont want your site to be picked up by
posts by default. Increasing this will provide more feeds, and this can also be increased. Choose search engines, the best way to do this is to select
content for your readers. whether to display the full article or a summary. Discourage search engines from indexing this site.

26 WordPress Genius Guide

 WordPress
Genius Guide

Discussion Settings
ENCOURAGE DISCUSSION AND BUILD COMMUNITY ON YOUR BLOG, WHILE MINIMISING SPAM
CONFIGURING THE DISCUSSION settings correctly will enable you to make a the Comment author must fill out name and e-mail and Users must be registered
definitive statement about what you expect from your readers, and what they and logged in to comment options to require your readers to take responsibility for
should expect from your blog. their comments. Team these settings with the Akismet plugin and you can virtually
Use the Allow people to post comments on new articles option to accept guarantee your readers zero comment spam when they visit your blog. Show
comments in the first place (individual post settings will override this). Move onto readers you have a spam-free blog and theyll join in with the discussion.

Pingbacks
Sending and receiving
pingbacks with other blogs is
an automated method of Move On
creating reciprocal links. These Keeping old articles live by adding new
defaults can be overridden on comments to them will affect caching
individual posts on your site. Close comments on older
articles to reduce this

Approval
To reduce spam, you
can determine that
comments must be
manually approved.
To save time, force
commenters to
have previously
approved comments Moderation
To help with moderating
comments, specify words,
Use alerts URLs, names, email
You need to know when addresses and even IPs to
comments arrive on your be held for moderation
blog, especially when a
moderation action is
required, so enable these
email alerts

Top tip
Dont restrict your
readers too much from
Reduce spam and readers will be encouraged commenting, lest you
scare them off. Try the
to join in with any discussion you inspire Comment author must
fill out name and
e-mail option.
Moderate and manage comments

01: Using nested comments 02: Comment moderation emails 03: Moderation and Blacklist
Make reading comments easy for readers by using Use the Email me whenever and the Before a The Comment Moderation and Comment Blacklist
nested comments, the method of indenting each comment appears settings to have email alerts fields can be used to filter out comments from
reply to a single comment. sent to you when comments require moderation. spammers and troublesome users.

WordPress Genius Guide 27

 Getting started

Media Settings
SPECIFY DIMENSIONS FOR IMAGES ADDED TO YOUR BLOG FOR UNIFORM MEDIA RICHNESS

Resize
The default dimensions for thumbnails
Pixels and featured images can be resized on
How wide and how high your blog from this screen, along with
should your images be? any images you include in posts
These dimensions are
measured in pixels and can
be easily adjusted
Cropping
Rather than having your thumbnail images
appear extremely small, use the cropping
option to have WordPress crop them to show a
segment of the image

Uploading
Specifying which directory
images are uploaded to
should occur during setup.
To change, alter this file
path. You can also specify a
full URL path
Saving
Made changes? Remember
to save them and then check
how the images are sized on
your main blog page,
adjusting anything that
doesnt seem right

GETTING THE IMAGE sizes right on your blog is very important. One Be aware that some themes will override any dimensions you add here, so to
wrong dimension and your layout could struggle to contain the information make sure theyre being applied check the Theme Options page where appropriate.
youre sharing! It is also possible to instruct WordPress to upload images to a specific file path,
Hopefully this wont happen, and certainly shouldnt with WordPress Media but in most cases you wont want to change this.
Settings, where image sizes can be specified to the pixel for thumbnails, medium
and large images. Just input the sizes you want and click Save Changes. You can Image sizes can be specified to the
also decide whether to crop thumbnails or have them resized to the exact
dimensions you selected. pixel for thumbnails

Fine-tune your images

01: Specifying image dimensions 02: Check image sizes 03: Organise your images
Setting a new dimension for your images is easy. You shouldnt just leave it at that, however: open Ensure that the Organize my uploads into month-
Once the width and height have been added, save your blogs front page and check that the image and year-based folders option remains ticked.
changes. Fine-tune by using up and down arrows. sizes have been applied correctly. Disabling can result in problems later.

28 WordPress Genius Guide

 WordPress
Genius Guide

Permalink Settings Top tip

YOUR BLOG WILL LIVE OR DIE BY YOUR PERMALINK CHOICE. CHOOSE WELL!
If you run a busy blog
PERMALINKS CAN BE a problem for many users. So each of which includes useful information. (Note with regular updates
many blogs have fallen by the wayside simply because that changing permalink style may cause problems
the owners didnt understand the importance of using with some plugins, which will need time to re-index
throughout the day, use
permalinks to build attractive URLs, addresses that your posts.) the Day and name
search engines are likely to index favourably. With a choice made, all you need to do is click Save
permalink. For less busy
Instead, these blogs were left to struggle with URLs Changes and wait a couple of moments before
of the format www.yourblog.co.uk/?p=123. It tells checking your website. The original URL format will still blogs, choose Post
Google nothing, and it tells you nothing. work and any links to it will resolve (hence permalinks) name.
WordPress Permalink Settings provides you with the but it is now masked with something that is more
option to choose four easy-to-read permalink styles, user-friendly, and ideal for Google to index.

Permalinks
Select the permalink format
you would like to create
friendly URLs for search
engines and readers to use to
The choice find content on your blog
There are so many
permalink formats to
choose from, making a Other tags
choice should be based If these permalink settings
on how often your blog arent to your liking, a number
is updated of alternatives are available,
with a vast selection of these
listed on WordPress.org

Customised
To use one of the custom
permalink formats, select
Custom Structure and enter
it into the space provided,
taking are to include
necessary spaces
Categories
You can also select a
category-based structure
for your permalinks, by
specifying a Category base
(such as topics) in the
corresponding field

Customise permalinks

01: Which permalink option? 02: Set Custom Structure 03: Category base permalinks
Choosing the correct permalink option depends on You may also consider a custom structure for Tag- and category-based permalinks can also be
your strategy for SEO and promotion. It can also be focusing on employing user- and search engine- established, but this only really works if your blog
based on how regularly your blog is updated. friendly permalinks for your blog entry URLs. has a heavy reliance on categories and limited tags.

WordPress Genius Guide 29

 Getting started

Using widgets in WordPress

WIDGETS CAN ADD INTERACTIVITY TO A WORDPRESS SITE
WIDGETS ARE NOT the most well-known to show the latest posts or display a gallery of images,
feature of WordPress, but you will likely carefully placed widgets can act as a gateway to what Widgets can act as a
see them in action every time you visit a
WordPress powered site. A selection of
would otherwise be hidden areas of your site and you
can also download specialist widgets on almost any
gateway to what would
useful examples is built into the platform by default and
these can be customised in limited ways, but you can
topic. The main point to remember with widgets is that
overuse can lead to an ugly interface so try to limit
be otherwise hidden
also use the text widget as a method of quickly adding their use to only the ones that add worth to your site areas of your site
your own code to the home page. Whether you want and which look consistent with your site.

Customise
The Editor can be used to Defaults
customise the areas holding The default widgets
your widgets using code. You included in WordPress
can build consistency can be customised in
limited, but useful ways

Sidebar
A sidebar with too many
widgets can look busy and
draw the visitors attention
away from your content

Plugins option
Widgets are available from
the Plugins option. Its not Text widget
obvious, but many are The text widget is a gateway
available to try for you to use your own
code to add something
special to your page

Find and edit widgets

01: A compatible theme 02: Find new widgets 03: Edits and previews 04: Use your code
You need to make sure your theme Widgets are stored in the plugins Go to Appearance / Customise to see The text widget included by default
supports widgets before you start. Go area and can be found by searching a preview of your main page. In the looks quite innocuous, but you can
to Appearance and then select the for widgets. Before selecting any left-hand column you can now use embedding code, Javascript and
Widgets option. The available areas widget, click the Details option and customise each widget and see the HTML to add advanced functionality
for widgets will be displayed then Screenshots to ensure it will fit changes previewed immediately. Its to your sidebar without using a
alongside a list of widgets. your site design. simple and very efficient. specialist widget.

30 WordPress Genius Guide

 WordPress
Genius Guide

Get to grips with plugins

PLUGINS CAN MAKE ANY WORDPRESS SITE UNIQUE
IT IS EASY to be all too consumed by web should be careful to not use too many as this can lead
design and producing quality content to slower performance and a bloated design which Plugins are the
when setting up a WordPress blog, but
plugins should never be ignored because
does little more than confuse. Each plugin is different
and each will come with its own set of instructions so
jewel in the crown of
they are the jewel in the crown of the platform and
can help to make any WordPress site unique,
we will concentrate on giving advice on the best ways to
use individual plugins and the system as a whole. If you
the platform
intuitive and a generally better experience for the use them for just the features that you require to be your blog which will keep visitors coming back time and
reader. Used wisely, they can add useful features, but you essential, they will add a huge amount of capability to time again.

Add new plugins

There are literally thousands
of useful plugins available by
simply clicking this button

Suspicious plugin
If you suspect a plugin is
causing performance
issues, deactivate it to
test the theory

Visit the site

Change settings The plugin sites are great
The settings for each plugin, sources of added
if available, will be located in information and for
the left sidebar sourcing developer help

Edit plugins
You can edit plugins by hand
if you are versed in the art of
PHP coding

Choose your plugins wisely

01: Limit your plugins 02: Add new plugins 03: Plugin options 04: Edit the plugins
When you first click the Plugins Click Add new to see plugins that are When a new plugin has been Most plugins can be edited by hand
option you will likely see two plugins available and then search for any installed, if there are settings and if you know how to code, simply
already installed. You should activate, relevant term. Before installing any included you will see them in the left click the Edit option for the plugin
or install, Akismet as it deals with plugin tap on the Details option to sidebar at the bottom. The settings in the main list to be taken to the
spam comments, but remember to ensure it is compatible with your are separated from your main .php file for that plugin. You have
not use too many plugins. WordPress version. WordPress installation for stability. complete control.

WordPress Genius Guide 31

 Getting started

Manage TUTORIAL WITH A POPULAR blog you should be

OBJECTIVE attracting at least a couple of comments
Efficiently manage per post. Its great to engage with your
WordPress comments,
block spam and readers, but sometimes they can prove
make changes based on
problematic, leaving links to unsavoury sites, being

WordPress
site policy
aggressive to other readers or simply spamming.
TIME REQUIRED Fortunately, WordPress offers a collection of tools
30 minutes
that you can use to deal with bad comments, such as
marking them as spam (in conjunction with the Akismet

Comments plugin that installs with WordPress), viewing the history

of your commenters and tracing their IP address. You
can even edit comments that are left on your blog.
Once you have got to grips with these tools, youll be
able to manage comments effortlessly, perhaps
ONE OF THE MAIN REASONS FOR BLOGGING IS TO SPEAK scheduling a time to login and check for any pending
TO PEOPLE, BUT WHEN THEY BEGIN TALKING BACK thoughts and problems that might arise from them.
YOULL NEED TO MAKE SURE THEIR VOICES ARE HEARD Keep your readers happy!
ABOVE THE NOISE
01 Quickly check comments
You can start checking your comments by
signing into the Dashboard and clicking on the
Comments menu but its a bit slow, isnt it? So stop it.
Instead, whenever youre signed into your WordPress
site, use the WordPress Admin Bar that is striped across
the top of your sites posts and pages.
The fourth icon from the left is a speech bubble. Click
to jump straight to the comments page.

Top tip
Allowing the use of
avatars in comments
will allow for you to
identify different users
more easily. Which is
great for being user
friendly as well as
02 Comments page dissected
Youve probably used the comments page
before, but do you really know it? As well as the ability
adding a splash of to switch between All, Pending, Approved, Spam and
colour to the page. Trash views, youll find bulk actions and a filter to
distinguish comments and pings from other blogs.
The left column displays details about the
commenters, their email and IP addresses. The middle
column displays the comment and the date it was left.

<top>
s
&WFSZ
DPNNFOU
PO
ZPVS
CMPH
DBO
CF
NBOBHFE

using the menu, enabling you to trash, edit,
mark as spam and much more
<left>
s
$PNNFOUT
EFUFDUFE
BT
TQBN
CZ
"LJTNFU

are collected in a separate page where they
can be reviewed and bulk deleted or restored
if mislabelled

32 WordPress Genius Guide

 WordPress
Genius Guide

04 Editing
comment
a
Although you may
reasonably consider your
blog a bastion of free
speech, there might be
cause to alter a comment
slightly, perhaps for legal
reasons or to remove a
link if you dont feel that it
is relevant.
This is easily done by
hovering over the
comment with your

03 Bulk editing comments

While it is easy to approve or mark comments as spam
individually, what do you do if you need to discard with several
mouse pointer and
selecting one of the two
editing options, Quick Edit
unwanted items of feedback from visitors? or Edit. With your changes
WordPress features a bulk comments management tool, just tick the made, click Update
box to the left of each comment you want to reclassify, then use the Comment to save.
drop-down menu to select the appropriate action.

Outsourcing comments
05 Identifying commenters
Who is commenting on your blog?
More to the point, who is spamming or trolling
your readers? Use the information on the left,
particularly the email address and IP address to
view any data collected by WordPress about
the commenter.
If you consider a commenter to be trouble,
you can use an IP blocking plugin like Ban User
By IP to prevent them engaging with your blog in 01: Facebook comments
the future. Rather than leave your web server to
handle comments, employ third party
services. Readers who leave feedback
through a Facebook comments plugin
will lure friends with similar interests.

06 View comment history

With any luck youll collect a group of regular commenters as your
blog grows, and you can check their activity over time by clicking on the IP
07 View post
comments
If your blog is particularly busy with many
address and viewing all comments sent from the same device. comments on various posts, you might
You can also view the background to an entry in the Comments screen by prefer to moderate your readers thoughts
hovering the mouse over a comment and clicking History, which will show if on a more focused basis. This is possible
the comment has been moderated. by clicking the post title on the right-hand
side of the Comments screen.
The edit post view will open, and youll 02: Plugin to Disqus
find the comments for that post Disqus is popular, used on newspaper
websites and WordPress blogs alike.
somewhere beneath the text entry box, Like Facebook, it offers a single sign-in
where they can be edited, reclassified as so readers dont have to login each
spam, etc. time they visit your site.

03: The Jetpack plugin

To coax responses from your readers,
activate the comments function in the
Jetpack plugin, enabling readers to
sign-in with existing Facebook, Twitter
and WordPress.com accounts.

WordPress Genius Guide 33

 Getting started

Posting TUTORIAL WHEN CREATING A blog, no matter what

OBJECTIVE platform you are using, the content is by far
Post new content to your the most important aspect of what you are
WordPress blog
building. It builds a readership initially, it will

WordPress
TIME REQUIRED keep visitors coming back and it will help improve your
10 minutes clout with the all important search engines. Content
should be formatted in a consistent manner and it
should be obvious as to what the topic is, and

content
WordPress is well placed to help you create attractive
online articles without the need to code every piece of
formatting in each paragraph. You can still use
advanced code when necessary, but we will highlight
some general rules for content creation and also show
UNDERSTAND HOW TO QUICKLY POST PROFESSIONALLY
you some of the more useful features available on the
FORMATTED AND ATTRACTIVE CONTENT, AND HOW TO
WordPress platform. If you remember that content is
SCHEDULE YOUR POSTS IN A LOGICAL ORDER SO THAT YOUR
king, your blog will be much more popular than you
BLOG IS REGULARLY UPDATED
ever expected.

01 The formatting bar

Even if you like to code your posts by hand,
take some time to familiarise yourself with the
formatting bar. It is much quicker in normal use for
formatting text, adding bullet points and especially
for inserting media. If you wish to see and amend
the underlying code, just click the Text option and
continue working.

Top tip
With the recent 4.0
update, if youre
writing a long post, the
toolbar, previously
known as the kitchen
sink, will stick to the
top of the window so
you can access it
at all times!
02 Focus on content
The WordPress dashboard can be a busy
place to work in, but clicking the Distraction Free Writing
icon top-right will remove all of the extra tools and let
you work in a much cleaner environment. Your work will
be saved as you continue and it could replace your
standard writing software.
<top>
s
Try to format your text and post layouts
in the same way for each article as this
adds consistency to the overall look of
your blog
<left>
s
Make time to categorise every post you
write as you are publishing it. This will
make site navigation much easier for
your readers

34 WordPress Genius Guide

 WordPress
Genius Guide

04 Perfect
previews
You will see a preview
option in the right-hand
column when adding new
posts and you should
always use this before
publishing any content.
When selected it will show
your content exactly how
your readers will see it
and will highlight any
inconsistencies. Dont rely
on just your knowledge

03 Insert Media
Try to use the automated tools to add images to any post.
You will be able to add a description for the image and also more
and assume everything
looks correct.

information which is useful for search engine results. Media is often

overlooked as a method of gaining more traffic so use the tools
WordPress offers to increase your readership.

Publish your blog post

05 Displaying code
The use of <code> and </code>
to surround text is useful for transforming
code into a format that looks realistic. It
will immediately make the reader
understand what they are looking at and
is particularly useful if you are
demonstrating code within a much longer
article that is filled with varied content.
01: A public post
By default all of your posts should be
set for public viewing, but you should
double check this by clicking the
Visibility option in the publish panel on
the right.

06 Edit the stylesheet

To change the font for all of your posts, navigate to Editor and then
look for the Stylesheet (style.css) file. When opened, you should see the
07 Understand
styles
writing
Clicking the Toggle Toolbar option will
Global font choices at the top and all you need to do is type over the current bring up a selection of new formatting
font and change the font weight, size etc. You can also insert your own tools to use and the headings option
preferences, but back up the contents of the file before making changes. which is the most important. Appropriate
use of headings will draw the readers into
the content of your post and make it less 02: In the future
likely that they will skim past it without Click the Publish immediately option
and then select a time and date of your
fully engaging in your work. choosing. The publish icon will change
to Schedule and when clicked the post
will be saved.

03: Published and

scheduled
See an overview of your content by
clicking Posts in the left-hand sidebar.
Scheduled items will be listed at the
top with publishing date displayed.

WordPress Genius Guide 35

 Getting started

Mastering TUTORIAL IN ADDITION TO the text you publish

OBJECTIVE within your WordPress blog, youll have a
Uploading, editing and wealth of media assets alongside. Whether
allocating images or
video via the WordPress its images, video or sound clips, WordPress

the Media
Media Library makes the process of managing these files via the
TIME REQUIRED Media Library. Accessible via the latest version 4
10 Minutes Dashboard sidebar, you will find all of the existing
uploads itemised chronologically by default. As you
add more this list can invariably grow fairly large and

Library
THE WORDPRESS MEDIA LIBRARY IS ESSENTIAL FOR MANAGING
the Media Library is therefore essential for
good WordPress housekeeping. Over the next few
steps well guide you through the more important
features of the Media Library, along with deeper
pointers for advanced use. With a focus on uploading,
editing, attaching and detaching media, plus a
YOUR BLOG ASSETS, CHIEFLY IMAGES AND VIDEOS. HERE WE
glimpse at the Add Media facility, you should find
EXAMINE THE LATEST VERSION AND HOW TO PERFORM THE KEY everything required for a quick course in WordPress
ACTIONS, SUCH AS UPLOADING AND EDITING media management!

01 The Media Library

The Media Library is found below the Posts
option within the Dashboard sidebar. Hover over the
option and a popup menu has direct links to the Library
or Add New facilities. Selecting the Library provides
access to the typical list view, itemising each file
currently uploaded. You can also toggle the Gallery view
to preview every file with larger thumbnails.

Sidebar Uploaded files Options Add new Uploaded to

5IF
.FEJB
-JCSBSZ
Uploaded files are Hover over an asset The Add New button Uploaded to
is located below the in chronological in within your launches the Upload identifies the post
Posts section of the order by default, library and link .FEJB
TDSFFO
XIJDI
the asset is
WordPress listing a thumbnail options to Edit, is where you can attached to. Author
Dashboard sidebar preview, filename
and file type
Delete Permanently
and View appear
browse or upload
new files
identifies who
uploaded the post 02 Uploading files
Click the Add New button with either view
selected and you will be presented with a dotted box.
Here you can simply drag and drop multiple desired
<left>
files into this area or click the Select Files button to
s
5IF
.FEJB

Library opens by browse. Each file should not exceed the maximum file
listing the size (8MB) and if you do experience problems, you may
uploaded files
chronologically, switch to the built-in browser upload instead.
giving basic
details on name,
file type, the user
who uploaded and
the current
attachment

36 WordPress Genius Guide

 WordPress
Genius Guide

04 Edit
media
Once files are uploaded,
an Edit link appears below
the upload box. You can
also access the Edit
options from the main
Media Library and this
where you assign
information to the asset.
The fields are the same
for each type and will be
applied by default to that
file when added to a post.

03 Various file types

Typically you will be uploading images and video. WordPress
accepts JPG, JPEG, .PNG and GIF, along with MP4/M4V, MOV, WMV, AVI,
Name, Caption and
Description can be set
and you can also grab the
MPG, OGV, 3GP and 3G2. Besides audio WAV and MP3 formats, you direct download link.
can also upload PDF or Microsoft Office document types. These can
be linked within your posts to provide a download link.

Manage new blogs

05 Edit Image
In addition, image assets may
be edited very basically by clicking the
Edit Image button. You should really
process your images before upload but
the options here are useful for
performing rotations or flips and chiefly
for applying crops. New dimensions can
also be set to scale the image larger or 01: Posts>Add Media
smaller as desired, choosing to retain the When adding new media directly into a
new post, youll see a slightly different
original image within the thumbnail. screen. The Insert Media dialog lets you
pick library assets or drop onto the
Upload Files tab.

06 Attaching media
Media assets will reside in your library whether you allocate them to
a post or not. To insert them you can use the Add Media button within the
07 Deleting media
Media files within your Library
can be deleted at any time. Hover over
post editor, or use the Attach link within the Media Library to allocate. From the file in the list view and click Delete
here you can select an existing post from the list. This just associates the file. Permanently, or use the same link within
Edit Media. Click OK when prompted to
02: Create Gallery
Here you can make multiple image
confirm and the file will be removed from selections by checking each image you
the Library and any associated post. want in your gallery. Clicking Create
New Gallery lets you drag the images
into a desired order before inserting.

03: Set Featured Image

This is where you allocate the main
image representing the post on the front
of your blog. The principle remains the
same, allowing asset selection from the
library or drag and drop upload.

WordPress Genius Guide 37

 Getting started

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

38 WordPress Genius Guide

 WordPress
Genius Guide

Managed WordPress hosting

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

Shared hosting is not always

an ideal solution
4)"3&%
)045*/(
*4 a very common platform for hosts to sell WordPress
solutions on and their main advantage is that these plans are often cheap in
comparison to others. Boasts of unlimited bandwidth and disk space are all very
well, but you should be aware that on a shared plan you are sharing servers with
other users. This may cause intermittent performance from time to time and likely a
generally slower service than you would experience from a dedicated server for
your site. There is a place, however, for shared hosting and that is when starting out. <above>
If your potential host offers an easy upgrade path to a singular server for your site
s
4IBSFE
IPTUJOH
DBO
XPSL
GPS
UIPTF

who are starting out in the world of Top tip
then you may wish to risk a shared plan while you ascertain the exact needs for WordPress blogging, but is not ideal
for long-term usage
Try to understand
your online presence. Shared hosting can work as a short-term solution and it will
save you money while your are testing.
your requirements and
learn about how
WordPress works before
you begin researching
hosts to make sure
Always you get the right
look for service.
WordPress
IT CAN FEEL romantic to decide to set up every single part of your hosting
manually and there are of course many advantages to doing so, the main one
being a forced gain of knowledge during the process. However, you can still
maintain a lot of control over your WordPress installation if you choose a provider
that will do a lot of the legwork for you. From the initial installation of the software
to systems that are designed to work alongside WordPress, a host that offers
WordPress hosting will likely be a better bet for the majority of bloggers. Database
limits should be ample and because so many other WordPress installations are
working on their servers, the entire space should be tried and tested for added
reliability. It is basically a half-way house between standard hosting and Managed
WordPress setups and works well for the majority of users.
<above>
s
)PTUT
EFEJDBUFE
UP
8PSE1SFTT

tend to offer a more reliable
experience
Pricing is important, but even
more so is the reputation of a host
WordPress Genius Guide 39
 Getting started
Top tip
Almost every web
host will boast uptime
figures of +99 per cent,
but you should research
What thoroughly to ensure
should that the figures claimed
are accurate.
you really
pay for?
THERE IS NO definite advice for what features should be included when
choosing a web host, but you should be aware of a trend in the industry
of selling individual features at separate prices. Web hosts will usually sell
domains, but it is often cheaper to buy one from a dedicated supplier. Some also
offer services such as domain privacy, Outlook support and other web related
features that can soon add up to a much higher cost than you initially expected.
When deciding what you need, make sure that the main features are available
at reasonable prices and do not be afraid to use multiple organisations for your
hosting and domains. Sometimes it can actually be advantageous to use more than
one company for resilience and to ensure that not all of your online eggs are in one
virtual basket. Pricing should always be obvious and very easy to understand.
<above>
s
1SJDJOH
DBO
CF
DPNQMJDBUFE
but it really should not be
that way Be careful when checking all
of the features a host offers

Understand the technical limits of WordPress hosting

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

Other specifics to be aware of

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

40 WordPress Genius Guide

 WordPress
Genius Guide

Four of the best hosts

A DIVERSE COLLECTION OF WEB HOSTS AND SERVICES FOR HOME USERS, SMALL BUSINESSES, DESIGNERS AND DEVELOPERS

bluehost HostGator
www.bluehost.com
$24.99 - $169.99 www.hostgator.com
bluehost is one of the oldest WordPress providers and offers very impressive features,
$7.46 - $56.21
but the price range may be too high for some. Every plan includes dedicated backup There are a variety of low-priced hosting package along with specialist
storage so your data is always safe. The blogger package include 2GB of RAM, 30GB WordPress hosting packages. The WP options come in three varieties, Starter,
of storage and 30GB of backup storage. Business and Pro. All packages offer unlimited email accounts and storage space
and allow for one site on the cheapest package going up to 20 .

TSOHOST Media Temple

www.mediatemple.net
www.tsohost.com $20.00 - $240.00
1.25 - 19.99 A popular web host with web professionals and agencies, it provides a range of
A UK-based provider with low-cost plans starting at 14.99 a year. The Lite specialist WordPress packages that covers all bases. Its Personal package offers 30Gb
package offers 500MB of web space and 3 MySQL databases. For larger sites of web space. For $60 a month users can get 100GB of storage, 10 sites, 1 free domain
there is the Standard package at 2.99 a month. For 10GB of web space try the and 2 Google Apps for work. If more is needed try the Agency package at $240 pm.
Pro package. Alternatively, get 100GB of web space with the Ultimate package

WordPress Genius Guide 41

 Getting started

Set up a host for

TUTORIAL
OBJECTIVE
Set up a host for your
WordPress.org site

TIME REQUIRED

your WordPress
30-45 minutes

YOU HAVE OPTIONS AVAILABLE TO YOU WHEN SETTING UP A NEW WORDPRESS HOST AND WE
WILL EXPLAIN THE BASICS OF MANUAL AND AUTOMATIC INSTALLATIONS
WHEN YOU SIGN up for a host, you should be new site is secure and reliable and also offer some instructions
given all of the tools you need to manage a on what you need to do and the tools you will require. One
WordPress installation. This will include database common mistake is to edit WordPress files using a word
facilities and ftp data to upload large files, but some processor which you should never do. Make sure you use a
hosts will also offer automatic install scripts to make the initial standard text editor and that you do not have any
WordPress setup as efficient as can be. You can choose to capitalisation features enabled in your ftp software. This is due
undertake every step of the process manually using the to certain features of processors that will create havoc with
detailed instructions available from WordPress or you can use any coding in the files, for example, when coding you do not
a script, but no matter what you use there are some areas to want to have smart quotes () in your text rather than straight
look out for. We will cover the main points to ensure that your quotes (").

Dashboard Updates Database

Once installed, Updates should
Text editor The database
you should never Be prepared to have
be installed as setup is crucial
need to visit any to manually amend
soon as they are to ensuring a
screen apart from WordPress files using
available and can smooth
the WordPress a text editor
be done WordPress
Dashboard automatically implementation

42 WordPress Genius Guide

 WordPress
Genius Guide

01 The control panel

Once you have signed up for a host you
should be given your account details, including a user
02 Download WordPress
Go to wordpress.org and download
WordPress. Unzip it and then rename the wp-config-
03 Create a database
In the MySQL section of your hosts control
panel, create a new Wordpress database, making sure
name and password for the control panel. Enter these sample.php file to wp-config.php. Before you proceed you have full admin permissions. You will need to make
and make sure that you have all of the options you make sure you have an ftp client installed and a text a note of the MySQL DB Name, MySQL User Name
require available. You may also see WordPress options. editor. Do not use a word processor to amend files. and MySQL Host Name plus the MySQL password.

04 Dive into PHPMyAdmin

You can access the PHPMyAdmin facility in
your control panel from the MySQL screen and this
05 Understand the structure
WordPress offers a Famous 5-Minute Install
resource at bit.ly/1kbYHGz which shows you the exact
06 Use a script
If you have chosen a host that works with
WordPress, you should see a one-click option to install
will be required to let you add new users and to see structure for a new WordPress installation. You can the software. The process is quick and the databases
the exact passwords for each user. This area is open either follow the basic guide or use the detailed you require should configure automatically. This option
to error so read up before you make changes. instructions to ensure the manual install works. is recommended unless you have specific needs.

07 Security is important
You will be asked during the automatic install
process to choose a user name and password. You
08 Remember the details
Once the install has completed, you will be
given the URL to manage your WordPress site with.
09 Check for updates
When the WordPress dashboard is displayed,
you should click the Updates option first. Make sure you
should always change the user name from Admin to Remember this and consider if you want WordPress to are running the latest version to ensure security and
something unique and make the password as long and be installed in a sub-directory or home. Choose a even your plugins can be updated and maintained from
complex as possible. Hackers like to attack WordPress. sub-directory if you will use your space for other tasks. the same screen. Always remember updates.

WordPress Genius Guide 43

 Getting started

Manage your
TUTORIAL
OBJECTIVE
Set up a domain name for
your blog

TIME REQUIRED

different domains
15 minutes

IF YOU MANAGE AND SET UP YOUR DOMAINS CORRECTLY, THE REWARD WILL BE A SMOOTHER
AND POTENTIALLY HIGHER AMOUNT OF TRAFFIC COMING TO YOUR BLOG
SETTING UP AND managing a domain for your a setup process, but remember that these can vary depending
WordPress blog is a part of a process that is on who your web host is, and we will also offer advice on areas
crucial to get right and will make a huge that are often forgotten or completely ignored. If you give as
difference to the eventual popularity of your much care and attention to your domain setup and
online presence. The name is important, of course, and management as you do to the design of your site, this will act
demands proper research, and the settings will also ensure as the perfect springboard to create a group of followers who
that popular search engines and anyone else interested can can find and follow you without restriction. Take your time,
see your work without seeing errors. We will take you through understand the details and it will work.

Home directory
Point your domain to
your home directory or
the /wordpress folder

Provider
Check your domain
provider privacy
options or those
available from ICANN

Subdomains
Subdomains help to
break up a big site
and to offer easier
visitor navigation

DNS
The way DNS works
should be understood
to ensure domains
work properly

44 WordPress Genius Guide

 WordPress
Genius Guide

01 The domain name

Choosing a name for your blog is hugely
important so be prepared to take some time to find
02 Domain management
Once you have purchased a domain, your
provider will offer an interface where you can manage
03 Web host details
Your web host should provide all of the
information you require, but the least you will need is a
one that works well. Expect to see most names already how your domain works with your site. Expect to see target host address and a forwarding address. With
taken, but persevere and you will be rewarded. All Email, Forwards and DNS options which are required to luck, they will provide a step-by-step guide to linking
domain providers offer simple domain search tools. ensure your domain works in search engines etc. your domain with all the relevant information included.

04 Create a CNAME
In the DNS area of your domain providers
control panel you will need to create a new CNAME
05 Forwarding your domain
Once the CNAME has been created, you will
need to forward your domain which will initially be set
06 Link the host
To complete the setup, go to your web hosts
control panel and make sure you input your domain in
and enter it as instructed by your web host. You will to go to your domain provider. In the main domain the required field in general settings. This is necessary
also need to have an @ record listed with a default IP control panel look for the Forward option and enter to mask the underlying web host address and ensure
address, but the specifics will come from your host. your new domain name into the field. that your domain is always used and remembered.

07 Create a subdomain
Under your domain name in the main control
panel you should see an option to create a subdomain.
08 Domain privacy
Remember that your personal details will be
added to your domain registration (with good reason).
09 Understand your rights
When you purchase and run a domain you
should make yourself fully aware of your rights and
These can be used for major parts of your website and Most domain providers, however, will offer a privacy responsibilities. Go to www.icann.org to read about
will be placed before your main domain name. Follow package which you should investigate if you are privacy services and understand every technical term to
the instructions to add it and wait for activation. concerned about publishing your details online. ensure you are using your domain correctly.

WordPress Genius Guide 45

 Getting started

<above>
s
The Dashboard includes a dedicated
section where users can be added,
managed and deleted as required. Youll
find it within the Users tab
<left>
s
With the right permissions your invited
users can create, upload and edit their
own posts. You can retain full control
over what content is published

TUTORIAL
OBJECTIVE
Learn how to set up
new users with suitable
permissions to work on
Control your
user profiles
your blog.

TIME REQUIRED
5 minutes

WORDPRESS CAN CATER FOR LARGER PROJECTS REQUIRING MULTIPLE USERS TO CREATE AND
UPLOAD CONTENT. AS AN ADMINISTRATOR YOU CAN SET UP VARYING LEVELS OF ACCESS
ITS NOT UNUSUAL to find that some WordPress with this WordPress also includes a hierarchy of roles that can
based sites are made possible due to the be assigned out as required. These range from the basic role
contributions of multiple people (as opposed to of a Follower who can read and comment on posts. At the
being the work of one person). This is made other end of the spectrum is the Administrator, for whom
possible thanks to the support of multiple users that is built nothing is off limits. Then there is the life of the in-between,
into the WordPress Dashboard. As an owner of a WordPress you have your Contributors who edit posts and delete them
blog you can invite other people to your site as a user. With but cannot publish them. An Author can publish posts but
multiple people being involved on a project you will need to cannot customise the blog the way Administrators and Super
control the level of access available to each individual. To help Admins can!

46 WordPress Genius Guide

 WordPress
Genius Guide

01 Adding a user
You can invite new users to your blog via the
Users section of the Wordpress dashboard. Simply
02 Invite accepted
Your invited recipients will receive an email
requesting them to accept the invite. However, they will
03 Your user list
Back on your Dashboard you are able to view
your blogs users via the Users tab. If you have multiple
enter a Wordpress username or an email address. Up need to set up an account (they will be walked through users you can select from the role types above main
to ten invites can be sent at once. Use the Role box to the process). Once this is done they will be able to window to filter out a particular group. Roles can be
decide which role will be available to your invitees. access your blog as per the permissions you set up. adjusted and unwanted entries can be deleted.

Types of User Roles

01: Contributors
Contributors can create and edit their
own posts but cannot publish them.
This is done by the Administrator.

04 Managing users 05 Your other blogs

Once published the Contributor cannot
edit it further.
Making changes to users and their If you have been invited to contribute
permissions is simple. Select the check box next to a content to another blog you can find it within the My
user and select a role from the Change Role To menu. Blogs section of the WordPress dashboard. This will list
Click on the Change button to apply the selected role. sites hosted on Wordpress.com for which you are a
This process is also used to delete users. Contributor, Author, Editor or Administrator.

02: Authors
Authors can create, edit, publish and
delete only their own posts. They can
also upload images and files. They
cannot modify other users posts nor
can they edit the pages.

06 Content control
Granting users with basic Author privileges is
handy for when you want to keep control over what
07 Role flexibility
The roles available do come with limitations.
For example, a Contributor can delete their own posts
03: Editor
The Editor can create, publish, edit
content is published on your blog. Any content created which may not be ideal for an Administrator. There are and delete any post, as well as
moderate comments, manage
by an Author is saved as a draft. As the Administrator plugins, such as the User Role Editor, that allow you to categories, links and tags. It is a step
you have control over whether it is published online. adjust the finer details of permissions for each role. below The Administrator.

WordPress Genius Guide 47

 Getting started

TUTORIAL
OBJECTIVE
Learn how to create back
up files for restoring your
WordPress database
Back up your
TIME REQUIRED
5 minutes

WordPress blog
PREPARE FOR THE WORST BY CREATING A BACKUP OF EVERYTHING STORED IN YOUR WORDPRESS
INSTALLATION. YOUR BACKUPS CAN THEN BE USED TO RESTORE LOST OR CORRUPTED INSTALLS
TAKE A MOMENT to think about everything is a question of how much you are prepared to lose if the
on your blog. Every post, every shared link, worst happened.
every image that you have ever put on your The process of performing a backup can vary from
site since starting it. If your installation was one setup to the next. There is also a difference depending
somehow corrupted would you be comfortable with losing on whether your blog is hosted by WordPress or by
all of it? This is why backing up your site is a recommended yourself. WordPress hosted blogs have the luxury of
task. The question of how regularly is largely down to having WordPress themselves handling the backups.
your own preference. If you post often, then more frequent Self-hosted users should find that their provider likely provides
backups may be required. Heavier users are known to a backup solution. Check with them to find out what services
keeps backups on a local drive plus an external drive. It really they can offer.

Databases Help Current database Tools

The left hand side phpMyAdmin can be a The larger right hand side The main tools and
panel lists the little daunting for section will display whatever functions (including
databases within newcomers. The fourth database has been selected the Export function)
your installation. icon along (the question from the list on the left hand can be found along
Click on an entry mark) contains helpful side. You can select individual the top of the right
to select it documentation to assist entries from here if required hand section

48 WordPress Genius Guide

 WordPress
Genius Guide

01 WordPress-based backup 02 Self-hosted backup

If your blog is hosted on WordPress (ie has a
wordpress.com url) you can use the Export tool to
Depending on which hosting service you
have chosen, you may have a database backup service
03 Self-hosted full backup
Your hosting company may also provide a
full back-up solution that encapsulates all of the files
save an XML file. This can save posts, pages and available to you. Look for a MySQL option. In here you stored on the server itself. This may take time to save
comments but not media such as images. Use the may find a back-up option for the database that but would include everything that makes your website
import function to restore your saved data. contains your WordPress installation. what it is.

04 The Automated Solution

There are also plugins that can simplify the
back-up process for you. These can be useful for less
05 Introducing BackWPup
A well-regarded free plugin is BackWPup. It
provides an impressive set of tools that can back up
06 Creating a job
In the job dialogue screen you can select the
data that is to be backed up. Tabs across the top of the
experienced users as it bypasses the need for the your files to services such as Dropbox. It works by screen allow you to select where on your server your
trickier aspects such as MySQL and PHPMyAdmin. creating jobs where you control what is backed up and backups are kept. If you have multiple plugins installed
These tools can also be used to automate the process. when. Install the plugin and select Create a Job. it can also back those up to save time when restoring.

07 Backup with phpMyAdmin 08 phpMyAdmin Export

The common tool phpMyAdmin can be
used to back up your WordPress database. To get
If you have more than one Database,
select the one that applies to your installation. The
09 Copy your files
Using an FTP client you can also log in to the
server side of your WordPress installation. You can then
started, click on Databases in your phpMyAdmin Structures view tab will display your default tables. browse to the WordPress folders and copy/download
panel. This step may not apply depending on your Use the export option to determine the data you wish them to your local drive. You can also zip or compress
version of phpMyAdmin. to backup. them once downloaded to further save on space.

WordPress Genius Guide 49

 Getting started

Secure
TUTORIAL IT IS ESTIMATED that WordPress is
OBJECTIVE currently used to power over 60
Secure your WordPress million websites worldwide. Around 25 per
blog from the hackers with
a few simple steps cent of new sites also choose the free CMS

your
as their foundation. WordPress has become
TIME REQUIRED exceptionally popular with users and, as a result,
30 minutes
exceptionally popular with the army of hackers and
spammers lurking out there who would like nothing
better than to exploit your website for a variety of

WordPress nefarious purposes.

WordPress is a solid and secure platform. But, like
any web-based system, it requires constant upkeep
and attention to stay one step ahead of the ever-

site from evolving security threats. The platform is updated

often and goes to great lengths to address new
security issues with each subsequent release. However,
there are several techniques and resources you can

hackers
IN THIS TUTORIAL YOULL LEARN SOME ESSENTIAL
implement to ensure that your website remains as
fortified as possible.
Some of these tips are very simple things to
employ that will make a difference to the ongoing
security of your site, and indeed your PC or laptop and
HANDS-ON TECHNIQUES AND RESOURCES WHICH CAN general online presence. Some require a little more
HELP TO HARDEN YOUR WORDPRESS SITE AGAINST know-how but once complete will ensure that youre
MULTIPLE THREATS safely protected.

01 Change your login

Still using the original Admin username? This is
the first thing bots and exploits will look for, so change it.
03 Keep it updated
One of the most common causes of
vulnerabilities for WordPress sites is continuous use of
Log in with that username and create a new Administrator- outdated versions. It is vital that you keep your installation
level account with a more distinctive username. Then log up to date. WordPress will notify you in the Dashboard
out and log back in again using the new account so you when a new version has been released. Follow the prompts
can delete the original one. and update. It takes a few minutes and could save you a few
hours in the long run.

05 Plugin awareness
Plugins can be vital additions to your site, giving
you great functionality beyond the basics. However, some
plugins can present an open door to hackers. Make sure
you get your plugins only through the WordPress

02 Creative passwords
Nobody likes having to remember 20 different
passwords, but its vital that your account password is as
extension, and check the reviews for any warnings. And, like
the platform, be sure to keep them updated.

unique and character-rich, as possible. Use uppercase and

lowercase letters, numbers and punctuation characters. If it
resembles somebody swearing in a comic book (B*%1#S!)
youre on the right track. 04 Avoid free themes
There are countless websites out there that offer
free, pre-built themes for your WordPress site. Beware.
Most of these themes come packaged with a few invisible
surprises under the hood. Its much better to stick to
trusted sources through the WordPress.org site, build your
own theme using a free framework, or buy one at
reputable sites such as Theme Forest.

50 WordPress Genius Guide

 WordPress
Genius Guide

<above>
s
As with all online accounts, your password is your first line of defence. Its easy to fall into bad habits, using the same password for multiple accounts and utilising words
and phrases that are easily guessed. Make the effort to keep it complex, keep it impersonal and, as much as possible, keep it changing

Top tip
For that little extra
06 Keep only what you need
Do you have a bunch of plugins on your
site that you dont use? Even a deactivated plugin can be
clean reinstall of the site and content is the only way to be
sure you are rid of any malware. precaution, there are
security plugins available,
a threat. Remove as many inactive plugins, themes and files
as you can, including the readme file in the root including Better WP
folder. Simple rule: the fewer the scripts, the fewer Security, Wordfence,
the vulnerabilities. and Sucuri Scanner.

08 Keep your PC clean

Its not just your WordPress website that you
need to keep an eagle eye on. It is essential that you make
sure you have a good antivirus running on your PC or
laptop, too. Ensure that this is reputable and also kept up to

07 Back it up
The importance of keeping your site backed up
at regular intervals cannot be stressed enough. Not all
date. You dont want to end up being the one that infected
your own website simply because you placed a few
corrupted files there! This should be a matter of course
attacks and hacks will cause you to lose it, but you dont even if you dont own a website and can save you a lot of
want to be the one who got caught out. And sometimes, a time and money in just a few clicks.

WordPress Genius Guide 51

 Getting started

09 SFTP not FTP

All connections to your server for file updates
should be done through SFTP, rather than just FTP,
assuming your host provider allows it. If they dont, consider
moving to a host that does. The extra encryption protocol is
a valuable safeguard against your login details being
intercepted by bad boys and girls.

Changing WordPress prefix for live sites

10 Protect the config file

We covered changing the wp_ prefix for database tables on a fresh install in Step 11. The method for existing
Advanced security can be achieved by adding an sites is a little more involved. You will need access to your database through PHPMyAdmin.
.htaccess file in your sites root. If you dont already have Perform a full backup of your database and keep it safe somewhere. Then take two exports of your database in
one, open a text file and rename it .htaccess. Place it into text file format. Keep one as an original and open the other in a text editor. Replace all instances of wp_ with your
your sites root folder with the code listed below. The code new prefix. Go to your site admin area and deactivate all your plug-ins. Then drop your existing database and
listed above # BEGIN WordPress prevents your database import your new, edited, text file. Edit the wp_config.php as in Step 11, then reactivate your plug-ins and check
login details from being accessed in the browser in the functionality. Lastly, got to Settings> Permalinks and refresh them by clicking Save Changes.
event of a PHP failure.

001 # dont allow wp-config.php to load Top tip

002 <Files wp-config.php> If you dont want to undertake
003 order allow,deny
these .htaccess changes
004 deny from all
005 </Files>
yourself, then Bulletproof
006 # BEGIN WordPress Security is an excellent, free
007 <IfModule mod_rewrite.c> plug-in that does all the
008 RewriteEngine On work for you. Highly
009 RewriteBase / recommended.
010 RewriteRule ^index\.php$ - [L]
011 RewriteCond %{REQUEST_FILENAME} !-f
012 RewriteCond %{REQUEST_FILENAME} !-d 001 # protect the htaccess file, _____________
013 RewriteRule . /index.php [L] 002 <files .htaccess>
014 </IfModule> 003 order allow,deny
015 # END WordPress 004 deny from all

12 Prevent directory browsing

005 </files>
To prevent anyone from accessing files in your
WordPress directory by typing the directory path into the
browser, place the code below into the .htaccess file, above
# BEGIN WordPress. Placing a blank index.html file into
14 IP address restrictions
If you and your contributors have static IP
addresses, you can use the .htaccess file to restrict admin
every directory will have the same effect. However, this is access to just those IPs. This technique offers a great

11 Change WordPress prefix

This is a step for fresh installs only (see the box
above for existing sites). By removing the default wp prefix
quicker and simpler.

001 # prevent directory browsing

security option, with obvious restrictions to accessing your
own site should you suddenly find yourself at an
unauthorised IP address. Just pop the code into the
for all database entries, you make it much harder for attacks 002 Options -Indexes .htaccess file, filling in the IPs.
to find access. Simply open wp-config.php in the root, scroll

13 Protect the .htaccess file

down to find the table prefix and change the wp_ to 001 AuthUserFile /dev/null
something else, such as movie_. It may seem odd to place code within the . 002 AuthGroupFile /dev/null
htaccess file that, in essence, protects itself, but with a great 003 AuthName Access Control
001 $table_prefix = wp_; deal of your security nested here, why not play it safe? Any 004 AuthType Basic
002 To access to this file could mean access to the fortifications you 005 order deny,allow
003 $table_prefix = movie_; have worked so hard to put up. Lets lock every door. 006 deny from all

52 WordPress Genius Guide

 WordPress
Genius Guide

007 # authorised IP address

008
009
allow from ??.???.???.???
# authorized IP address
Code library
010 allow from ??.???.???.??? The HTACCESS file in full
Although there are some security measures that can be implemented in the

15 Limit login attempts

Restricting the amount of login attempts that can
be made by any IP gives you an added layer of security
.htaccess file at a cost to site functionality, they have been avoided here

001 # dont allow wp-config.php to load

The .htaccess file is a vital 002 <Files wp-config.php>
against brute force attacks. Install the Limit Login Attempts and versatile resource for
plug-in through the plug-in search facility. This gives you a adding extra layers of 003 order allow,deny
customisable series of features and notifies you when an IP security to your site. Use it 004 deny from all
lockout has been enforced. 005 </Files>
006 # prevent directory browsing
007 Options -Indexes
008 # protect the htaccess file
009 <files .htaccess>
010 order allow,deny
011 deny from all
012 </files>
013 AuthUserFile /dev/null
014 AuthGroupFile /dev/null
015 AuthName Access Control
016 AuthType Basic
This is a comprehensive

16 Disable HTTP Trace list of .htaccess tricks, but

017 order deny,allow
Cross Site Tracing (XST) and Cross Site Scripting further research will 018 deny from all
uncover some more 019 # authorised IP address
(XSS) are common attack methods. They work by using a advanced ideas
servers default trace HTTP TRACE function to steal cookie 020 allow from ??.???.???.???
and server information through header requests. You can 021 # authorized IP address
guard against these attacks by turning off the functionality. 022 allow from ??.???.???.???
Just place the above code in your .htaccess file, above 023 RewriteEngine On
# BEGIN WordPress. 024 RewriteCond %{REQUEST_METHOD} ^TRACE
025 RewriteRule .* - [F]# BEGIN WordPress
001 RewriteEngine On If you get 500 Internal 026 <IfModule mod_rewrite.c>
002 RewriteCond %{REQUEST_METHOD} ^TRACE Server errors when trying 027 RewriteEngine On
003 RewriteRule .* - [F] to load the site, the 028 RewriteBase /
.htaccess file is always worth
exploring first 029 # return 403 Forbidden when someone puts script tags or

17 Protect against SQL GLOBALS or _REQUEST stuff in the URL

injections 030 #
SQL injections are one of the more common forms of 031 RewriteCond %{QUERY_STRING} (\<|%3C).*script.*(\>|%3E)
attack on WordPress sites. Most web hosts take every [NC,OR]
precaution to protect against these exploits, but you can 032 RewriteCond %{QUERY_STRING} GLOBALS(=|\[|\%[0-9A-Z]{0,2})
add your own check by inserting this code into the . [OR]
htaccess file. Place it just underneath RewriteBase /, below 033 RewriteCond %{QUERY_STRING} _REQUEST(=|\[|\%[0-9A-Z]{0,2})
# BEGIN WordPress 034 RewriteRule ^(.*)$ index.php [F,L]
035 RewriteRule ^index\.php$ - [L]
001 # return 403 Forbidden when someone puts 036 RewriteCond %{REQUEST_FILENAME} !-f
script tags or GLOBALS or _REQUEST stuff in Remember that 037 RewriteCond %{REQUEST_FILENAME} !-d
the URL WordPress is able to edit 038 RewriteRule . /index.php [L]
002 # any code between the 039 </IfModule>
BEGIN and END
003 RewriteCond %{QUERY_STRING} WordPress tags 040 # END WordPress
(\<|%3C).*script.*(\>|%3E) [NC,OR]
004 RewriteCond %{QUERY_STRING} GLOBALS(=|\

[|\%[0- 9A-Z]{0,2}) [OR]
005 RewriteCond %{QUERY_STRING} _REQUEST(=|\
[|\%[0- 9A-Z]{0,2})
It is vital that you keep your installation
006 RewriteRule ^(.*)$ index.php [F,L] up to date. WordPress will notify you in the
Dashboard when a new version has been
released. Follow the prompts and update

WordPress Genius Guide 53
Themes
Add personality to your blog
56 The 20 best WordPress
themes
Make your website your own with a
beautiful WordPress theme

66 Create your own theme

Start from scratch and create your own
theme framework

74 Build a responsive
WordPress theme
Take the next step and make sure your
website is responsive

78 Customise a WP theme
Make a standard WordPress them your
own with the customisation tools

82 Convert a static site with

a child theme
Convert an static website so it is
compatible with WordPress

86 Create a mobile-friendly
site
Take your WordPress site into the
modern age by making it adaptable

90 Transform HTML to WP
Take your HTML site and make it
WordPress compatible

One of the
most powerful
things with
WordPress is its
versatility when it
comes to themes
54 WordPress Genius Guide
 WordPress
Genius Guide

Top tip
As an easy option, a
mobile plugin such
as WPTouch can
convert your content
into a mobile-friendly
layout.

WordPress Genius Guide 55

 Themes

The 20 best
WordPress
themes
56 WordPress Genius Guide
 WordPress
Genius Guide

THEMES AND WORDPRESS GO

HAND-IN-HAND. THE SCIENCE
BEHIND CHOOSING THE RIGHT
THEME FOR THE RIGHT JOB IS
EXPLAINED HERE...
WordPress Genius Guide 57
 Themes

Source: bit.ly/1p1lDIU

Pangaea Price: $17

Best used for: Multi-purpose

THE PANGAEA THEME is built by bradweb and is a fullscreen,

contemporary, responsive multi-purpose site. The fullscreen nature
of the theme makes it ideal for any site that wants to make an instant
impact with some stunning photography or imagery. The design has
a spacious and minimalist aesthetic that works across desktop, tablet
and smartphone.
If the fullscreen slider doesnt work for what you want then there are a
host of alternative home page designs. In fact there are eight designs in
total. These come under the titles of standard, video, Ken Burns, slider,
one page, portfolio, freelance and corporate, hence the multi-purpose
nature of the theme.
Layouts are critical to the appearance of a website and the option to
choose a layout that works well for your content is important. Again, the
theme excels with an impressive selection of layouts to choose from.
There are 2, 3 and 4 column layouts in various guises: grid, gapless and
fullscreen. The alternative, and currently popular option, is single
portfolio page, again in different guises.
In addition to the home page style, the Pangaea theme provides a
host of pages eg About Us, that can be added at will, and work with the
selected style. The fluid nature of this theme means that there are
hundreds of options for creating a contemporary and unique site design.

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

FOR THOSE LOOKING to display their portfolio in a clean and

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

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

58 WordPress Genius Guide

 WordPress
Genius Guide

Source: www.ceeceee.com/gridify

Gridify Price: $44

Best used for: Portfolio/Photography

GRIDS ARE POPULAR. They lay out content in a neat and easy to
digest format for the user and they neatly slot into the responsive
style. Plus, with the right image selection they look visually appealing,
modern and artistic. Everyones a winner.
As its name suggests, Gridify stays true to the popular grid-based
theme, which is very much image-led and visual. The theme uses a full
width image header to introduce the subject matter, while neatly
arranging the rest of the imagery into five columns. Each and every
image had its very own rollover effect which introduces the title of the
associated post.
To break up the barrage of imagery blocks of text can replace an
image. This can come in the form of a standard post, a comment and
audio or video. Be careful with what you choose, as too much will spoil
the aesthetic of the site design.
Individual posts are simple and clean, but still very much in keeping
with the themes stance. An image heads the centred post window
with the text running underneath. Nothing too clever, but it works
perfectly for the theme. Sitting to the side is an off canvas menu that
only makes an appearance when called into action.

Each and every image had

its very own rollover effect
which introduces the title of
the associated post
Source: jrny.wpengine.com

JRNY Price: $43

Best used for: Photo blog

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

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

WordPress Genius Guide 59

 Themes

Source: www.gt3themes.com/wordpress-themes/knoxville

Knoxville Price: $44

Best used for: Storytelling

EVERY WEBSITE TELLS A STORY, it just depends what type of story

it is selling. The Knoxville theme looks to the personal and allows
users to tell the story of their life. Relive those great moments, retell
glorious tales and reveal your inner most feelings to the world.
Knoxville is a personal blog theme that leans heavily on visual
impact to tell a story. The background is kept to a minimal white to
give more impact to the images that will wow visitors. The colour
palette for the theme is kept to a minimum with shades of black and
yellow adding a splash of colour. Sitting alongside the minimal colour
palette is a complimentary sans serif font in the form of Inconsolata.
This is used across the whole blog is varying sizes and a couple of
weights to bring the design together.
There are five different layouts on offer, all of which adopt a clean
and modern style, with the option to deviate from the default colour
scheme and typography choices thanks to the Live Customizer. There
is also the almost obligatory slider hogging the major headspace of
the home page. In addition there are different post formats available
and in keeping with its modern theme Knoxville is responsive and
retina-ready.

The background is kept to

a minimal white to give more
impact to the images that will
wow visitors
Source: bit.ly/1KUTFdc

Mont Price: $42

Best used for: Magazine/blog

THE MONT THEME adopts the magazine style but adds

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

60 WordPress Genius Guide

 WordPress
Genius Guide

Source: bit.ly/1Oa0E91

UD Price: $49
Best used for: Directory

UD IS SHORT for Ultimate Directory which gives a big clue to

what this WordPress theme is all about. The theme is a content-
focused directory portal that can be used to list any type of
business entity or activity. Its flexibility is what makes it appealing to
users who can modify the theme to work with any type of directory
or listing they want. As with most contemporary theme it boasts a
responsive design making it mobile-friendly. Plus, it offers PayPal
integration, an FAQ and 404 page template to complement the
themes core purpose.
Theres a lot going on with Ultimate Directory. The theme is
designed and laid out so it pushes a lot of information to the viewer.
The core component is a large map, which offers a search facility
that allows users to add a keyword, choose a location and select a
type before the outcome on the map. As you might expect, each
location on the map comes with a neat popup with an image and
more information.
All the appropriate elements that are needed for a directory are
included, including submission forms, a Yelp-like reviews section and
the option to create different membership levels.
This is a very comprehensive theme thats perfect for those
looking to create a directory for their specific subject matter.

Mono
Source: demo.favethemes.com/wp/mono
Roua
Price: $48 Source: demo.stylishthemes.co/roua/
Best used for: Personal blog Price: $43
Best used for: Portfolio/Personal Blog

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

MODERN AND MINIMAL is a simple and concise description of the Mono theme.
The theme is aimed at the personal blogger but avoids the clichs and adds style.
The layout of the theme is grid-based which it uses to great effect for mobile devices
such as tablets and smartphones.
The navigation is an element that avoids the clichs, adopting a simple vertical strip
to the left of the page. Easy access to the complete menu is provided via the popular
hamburger icon. The search facility doesnt hide away with a singleclick taking it
fullscreen. On the home page posts are accompanied by a featured image, which can
be switched out for an alternative such as a video. Individual posts adopt the same
minimalist design but scaled up. They also make good use of the sidebar to add
further content.

WordPress Genius Guide 61

 Themes

Source: themes.fastwp.net/vastudio1

VAstudio Price: $43

Best used for: Portfolio/Agency site
Everything
Source: themes.kubasto.com/everything
Price: $64
Best used for: Multi-purpose

THIS THEME CLAIMS to have everything and while this may

not be quite true it does have a massive amount of options.
Everything has the potential to be suitable for a variety of site
types from creative portfolio to big corporate site to personal
blog. If you are looking for something more functional then the
site could take on the role of an online shop, or a video or image
driven site. In fact, as the creators state, you name it, and
Everything can create it. The flexibility instantly makes the
theme an interesting and welcoming option. The theme offers a
couple of colour schemes, dark and bright and as you might
expect its 100% responsive. And, in keeping with modern
mobile devices it is also retina ready so your sites will look good
on all the latest high resolution screens.

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

Source: http://klbtheme.com/itsme

Its me Price: $44

Best used for: Portfolio/CV

AN ONLINE PRESENCE is critical for anyone looking for a new job and even more important for
those in the creative industry. An online portfolio/resume/CV is instantly available for prospective
Everything has the
employers to look at. So, it needs to be good, it needs to make an impact and the Its me theme potential to be suitable for a
covers all these bases.
The theme splits itself straight down the middle with space for a big image to introduce yourself variety of site types, from
and plenty of space to the right to add details. The left-sided image is fixed meaning that it will
always be in view so make sure that its a good one. Sitting in the top left corner is the option to add creative portfolio to
a personal thumbnail to allow viewers to see what you look like. Again make sure its a good one. The
right side of the page is dedicated to content. It is here that the user places all their relevant
personal blog
information. This is a space to sell yourself, so make sure that its good.

62 WordPress Genius Guide

 WordPress
Genius Guide

Source: bit.ly/1unY3fc

Snaptube Price: $48

Best used for: Video

THE VIDEO IS an often forgotten element of the WordPress

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

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

WHEN IT COMES to WordPress themes it can be difficult

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

WordPress Genius Guide 63

 Themes

Source: bit.ly/1ro2ypX

Sequoia Price: $59

Best used for: Online shop

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

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

With the main parent

theme there are an additional
three child themes
Source: alexgurghis.com/themes/wpjobus/

WPJobus Price: $53

Best used for: Business

THE WPJOBUS IS a theme with more than just one

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

64 WordPress Genius Guide

 WordPress
Genius Guide

Source: http://maxi.themeo.us/

Maxi Price: $44

Best used for: News
Literatum
Source: kohette.com/wpthemes/literatum
Price: $43
Best used for: Personal blog

LITERATUM IS AN excellent theme for those who want to

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

NEWS THEMES ARE multi-talented creations, they can be used for almost any type of blog or
site. The Maxi theme is dedicated to displaying an impressive number of stories or posts in a visually
appealing manner. The centrepiece of the default layout is the image-led slider that uses different
sizes to create a hierarchy and entice the user to click.
Further down the page it is white space that pulls apart posts and stories and gives them plenty
of breathing space. The design continues as its heads towards the footer, ensuring that the reader is
always getting plenty of content to choose from without being distracted.
Maxi is a lightweight which means quick theme thanks to its minified CSS and JavaScript and
balanced image sizes. It is also optimised for search engines and has extra layouts if desired.

Source: www.webdingo.net/eightdegree

Eight Degree Price: $43

Best used for: Multi-purpose

EIGHT DEGREE COMES in a number of guises making it a very flexible theme. The popular
fullscreen image background is employed here and coupled with contemporary fonts to make it Literatum offers the
very now. The basic option is a simple fullscreen image background while there are parallax slider
and image slider options to take control of the top of the page. These are only the icing on the cake, option to replace the
or topping on the theme. Each version of the theme offers a lot more that users will love.
The theme proves all the popular sections you would expect in a site: about, team, portfolio, featured image with a video
clients, blog, contact and as an added extra, prices. It is these pages that give the theme its flexibility.
Alongside its more functional talents it boasts a modern and clean design and a layout that makes
at the top of each post
it stand out from its competitors.

WordPress Genius Guide 65

 Themes

Create
your
own
theme

LEARN HOW TO CREATE YOUR VERY OWN WORDPRESS THEME FRAMEWORK FROM SCRATCH
ONE OF THE most powerful things with WordPress is its installation with at least one theme installed and FTP access to your
versatility when it comes to themes. Despite the fact that WordPress installation (but this is not essential).
WordPress blogs are largely built upon the same building The next step is to come up with a name for your theme. Something
blocks the differences between one project and the next can simple will do for now as were only building a theme for our own blog
be staggering. This is why it can be such a rewarding process to get (as opposed to sharing it with the WordPress community). Once you
stuck into theme building. With just a little knowledge on HTML and CSS settled on a name you can create a folder named after your theme and
you can assemble a blog that is truly your own creation. Over the next save it somewhere on your hard drive. Eventually we will upload this
few pages we will build a theme from scratch and at the end you will folder to the wp-content/themes folder either via FTP or through the
have a theme that you can keep handy as a starting point for any of WordPress Dashboard.
your future projects. With regards to this tutorial we will be making a simple theme
Before you get started there are a couple of things that you will need. consisting of a header, main area, sidebar and footer. You can find all the
Firstly, a code editing program such as Notepad++, a working WordPress code and source files at www.web-designer.co.uk/tutorial-files.

66 WordPress Genius Guide

 WordPress
Genius Guide

Theme structure
WordPress themes are made up of template files
that dictate the layout of your content. The actual
content (posts, images, etc) does not form part of
these templates. Instead, the content is stored
elsewhere within the WordPress database. The
template files reside within a specific folder for
your theme within wp-content/themes. Think of
them as the building blocks of your WordPress
site. They all come together to create the web
pages on your site. Within the folder you will
also find a style sheet that will dictate the look of
your theme (background colours etc.). At its
most basic level the folder for your theme
should include at least the first five of
these templates.

header.php - This file contains the code for the header

section of the theme;
index.php - This is the main file for the theme. It
contains code for the Main Area and specifies where
the other files will be included; <above> The bare bones of our
WordPress theme
sidebar.php - This file contains the information about
the sidebar;
footer.php - This file will handle the footer;
style.css - This file will handle the styling of your theme;
single.php how a single post appears on your blog
page.php for single pages
Top tip
As you become more confident more template
type can be added to the directory to cover other
A useful way of
testing your creation is to
What about
aspects of your blog. These include templates for
viewing a single post, pages and comments. set up a free web hosting child themes?
account. Sites such as Child themes allow you to modify an existing
Template tags and code theme without actually making any direct edits
A template tag is essentially an instruction that
hostawesome.com can its code or templates. It works by importing the
commands WordPress to do or get something. An supply enough attributes of an existing theme (in this case
known as the parent theme) via a command in
example of this can be found in the header.php file resource. the style.css file. Extra coding can then be
where WordPress can be instructed to display the added to the style.css file that takes precedent
name of your blog. The code may look like this: over what has been imported from the original
parent theme.
<h1><?php bloginfo('name');?></h1> Mobile adapation You can create a child theme from any
Its important to bear in mind how your website already existing theme and it will reside within
At each end of the code we have H1 instructions will appear on a mobile device. More and more a separate self-named directory within your
to apply a Header 1 size text. Everything else people are accessing the internet whilst on the themes folder. In your WordPress Dashboard it
between these is the template tag. Note how the move. Whilst you can create code that can adapt will also appear as a new entry. This is how the
original theme stays unaltered; the child and
actual title of the blog does not appear in the tag your theme to be mobile we dont have the space
parent themes exist as two separate entries
itself. That is because the template tag gets this here to cover all of the aspects. As a quick (and
where one (the child) is dependent on the other
information from your user profile. In this example somewhat effective) workaround a mobile plug-in (the parent).
the name section instructs the tag to fetch the such as WPTouch can convert your content into a
name of the blog (this is known as a parameter). If mobile-friendly layout.
you swapped the name for another parameter
another piece of information would be displayed About this build
instead. Description for example would display This build is a pretty basic setup. Its more
the tagline for your blog whilst url would show designed to get you up and running and give you
the website address. an idea of how the main pieces come together. To
This approach means that the code can that effect its not going to be the prettiest theme
be installed to any other blog and it will in the world. Theme building is something of a
perform the same function without the need for long term skill, even experienced users find new
it to be altered. techniques and approaches from time to time.

WordPress Genius Guide 67

 Themes

Create the header

The header is an essential component of your
WordPress theme. It will most likely be the first thing
that people see when they stumble upon your
03 Applying the style
We need to tell WordPress how everything
needs to look. So here we are linking to the
<nav>
<?php wp_nav_menu();?>
</nav>
creation. In the header you can perform tasks such as stylesheet. Weve opened a link tag and used rel to <div id="container">
displaying your blog name, adding a tagline or define the relationship. Weve gone for an approach </html>
perhaps applying an image at the top of your blog. that will tell WordPress to look for the style.css file that
From a code perspective the header is where
everything begins. It is also in the header that you link
to your stylesheet, further setting up how the theme
will be saved within our theme folder. Below this is
another php tag that uses a hook to grab information
stored in the WordPress core files. Essentially its a tag
06 Bring it together
So this is how our header.php file should
look with all of our code in it. Enter it all into a
will look in a web browser. that works with WordPress settings. notepad program and save it as header.php. You can
either upload it as it is to your theme folder in your

01 Marking a start
<link rel="stylesheet" type-"rext/css" WordPress via FTP or wait to zip it later for upload
Open your notepad program and enter the href="<?php bloginfo( 'template_url' );?>/ (well cover this approach later on).
above code into a new file. The first line is a style.css">
declaration of the DOCTYPE, we have gone for a <?php wp_head();?> <!doctype html>
HTML5 version which is recommended. This is </head> <html>
followed by an opening <html> tag. Weve also added <head>
an attribute for the character encoding, its nothing
major to be clued up about, just be sure to include it.
Were now ready to start adding the HTML that will
04 Display the title
Here is the command that puts our blog
title at the top of the page. Firstly weve placed a
<meta charset="utf-8" />
<title><?php
wp_title('|', 'true', 'right');
set up our header. command that will apply a border as per the style.css bloginfo( 'name' );
file (more on that later). Following this is a command ?>
<!DOCTYPE html> to generate a URL link for the home page which is </title>
<html> then applied to the title. You can also put normal text <link rel="stylesheet" href="<?php
<head> between the H1 markers but the idea here is to make bloginfo('stylesheet_url')?>" />
<meta charset=utf-8 /> the theme dynamic so it can be used with any blog. <?php wp_head()?>
</head>

02 Fetching the title

Next well get WordPress to retrieve the
information about our blog. The php tag after <title>
<div id="header">
<header>
<h1><a href="<?php echo home_
<div id="header">
</header>
<h1><a href="<?php echo home_
requests the page information from the wordpress url('/')?>"><?php bloginfo('name')?></a></h1> url('/')?>"><?php bloginfo('name')?></a></h1>
database. Weve added a | as a separator for the </header> </header>
information for that and the blog name which has

05 Navigation bar
been requested in the bloginfo line. Then we close off <nav>
the <title> tag at the end. This part is now added to the code. It adds <?php wp_nav_menu();?>
a little navigation section underneath our blog title. </nav>
< title> This can be used for navigating to the other pages <body>
<?php wp_title('|', 'true', 'right'); that are on your blog. This is a default WordPress <div id="wrapper">
bloginfo( 'name' );?> navigation menu where the links are displayed as
</title> bullet points. </div>

68 WordPress Genius Guide

 WordPress
Genius Guide

Code library
Exploring the header
001 <!doctype html>
It is essential to keep the
<html>, <head>, <title> tags as 002 <html>
these will remain important 003 <head>
even in your new code 004 <meta charset="utf-8" />
005 <title><?php
006 wp_title('|', 'true', 'right');
007 bloginfo( 'name' );
The id tag allows you to
identify the element of the
008 ?>
CSS coding so you can 009 </title>
edit the style sheet 010 <link rel="stylesheet" href="<?php
without having to locate a
specific part of the code bloginfo('stylesheet_url')?>" />
011 <?php wp_head()?>
012 </head>
013 <div id="header">
For usability it is best to 014 </header>
keep your navigation bar 015 <h1><a href="<?php echo home_url('/')?>"><?php
at the top. By using this bloginfo('name')?></a></h1>
piece of code you can
ensure that it remain near 016 </header>
the blog header
017 <nav>
018 <?php wp_nav_menu();?>
019 </nav>
Once you are done with the 020 <body>
header and navigation. 021 <div id="wrapper">
youll be able to add in 022
everything else after it. So
end the <nav> tag a and it is 023 </div>
time to start with the body

So this is how our header.php file should

look with all of our code in it. Enter it all into a
notepad program and save it as header.php. You
can either upload it as it is to your theme folder
in your WordPress via FTP or wait to zip it later
for upload (well cover this approach later on

WordPress Genius Guide 69

 Themes

Creating sidebars Creating a sidebar is done by entering the

relevant code into a blank notepad program and <div id="sidebar">
A sidebar is usually a narrow vertical column saving the file as sidebar.php. This will then sit in <h2 ><?php _e('Categories'); ?></h2>
that runs down the side of the screen (although the corresponding theme folder within your <ul >
sometimes it can also be a horizontal section installation. When a web browser loads your <?php wp_list_cats('sort_column=name&optionco
below the main content). Some blogs have webpage it will then be requested by the index. unt=1&hierarchical=0'); ?>
multiple sidebars set up within a theme but for php file and added to the relevant part of the </ul>
our project we will keep things simple and just display layout. <h2 ><?php _e('Archives'); ?></h2>
stick to one. For our theme we have kept things simple. We <ul >
Sidebars are a useful feature to add to a blog have added a categories section and a list of <?php wp_get_archives('type=monthly'); ?>
as they can display content that would not archived posts. These are applied by using </ul>
necessarily form part of the main articles. internal WordPress functions that generate these </div>
Beyond this they can also provide navigation to details. As with the header the actual details
other areas of blog, list categories, your previous themselves are not entered directly into the
posts or hold widgets that can perform various code for the sidebar. Instead the information is
functions. fetched via php enquires.

Creating the footer border-radius: 5px;

}
The footer resides at the bottom of your design. It can
contain links, menus, navigation icons, pretty much
anything you like. On a basic level it closes the HTML
tags that have been opened in the header such as
<body> and <html>. In the case of our created theme
weve kept things pretty simple.

01 Add the code

Here is a basic example of what to put inside a
footer. We have opened a footer tag and entered some
basic text to highlight that what is at the bottom of the
page is indeed the footer. Add this code to a text file and
save it as footer.php

<div id="footer">
<footer>
And down here we have the footer
</footer>
<?php wp_footer(); ?>
</div>
</div>
</body>
</html>

02 Style and content

The code in this footer is purely text only, it
does nothing in regard to how the footer will actually
look. The code is below is what will eventually be added
to the style.css file in order to make it look a bit more
pleasing to the eye. In this case it will be 90% of the post
body, have a black background and white text.

footer {
The footer can contain links,
width: 90%;
background: #000;
menus, navigation icons, pretty
color: #fff; much anything you like

70 WordPress Genius Guide

 WordPress
Genius Guide

Index informs WordPress what needs to be done with

the information.
<?php get_footer(); ?>

One of the main files of your WordPress installation The complete code
<div id="main">
will be index.php. Its the first file that loads when
someone visits your WordPress site. It controls what
functions the site will display and how.
<div id="content">
<?php if (have_posts()) : while (have_
04 Here is how the full list of code will
look within our index file. Its a fairly
simple arrangement compared to index files
posts()) : the_post(); ?> from the default WordPress themes but for the
The basics <h1><?php the_title(); ?></h1> purposes of our blog it will work just fine.

01 In its most basic form this is what our

index file will do. These commands will
request the templates for the header, sidebar
<h4>Posted on <?php the_time('F jS, Y') ?></
h4>
<p><?php the_content(__('(more...)')); ?></p>
<?php get_header(); ?>
<div id="main">
and footer and then display them on our page. <hr> <?php endwhile; else: ?> <div id="content">
We also need to insert the content (ie our posts). <p><?php _e('Sorry, no posts matched your <?php if (have_posts()) : while (have_
This is not requested from a separate template. criteria.'); ?></p><?php endif; ?> posts()) : the_post(); ?>
Instead, the layout is created within this file. This </div> <h1><?php the_title(); ?></h1>
layout will be known as the WordPress loop. <h4>Posted on <?php the_time('F jS, Y') ?></
Rounding things up h4>

03
<?php get_header(); ?> These lines finish the code for our <p><?php the_content(__('(more...)')); ?></p>
<?php get_sidebar(); ?> index file. They break up the main area <hr> <?php endwhile; else: ?>
<?php get_footer(); ?> from the sidebar and the footer. At the very <p><?php _e('Sorry, no posts matched your
bottom is the request for the footer which will sit criteria.'); ?></p>
Grabbing your posts at the bottom of our web page. <?php endif; ?>
</div>

02 This code needs to be inserted after

the first line of Step 1 and deals with
the main content of the blog ie your posts. It
</div>
<?php get_sidebar(); ?>
<?php get_sidebar(); ?>
</div>
initially makes WordPress check for any posts </div> <div id="delimiter">
that have been created in your database. Once <div id=delimiter> </div>
the posts have been found, the code then </div> <?php get_footer(); ?>

Content
Among the files in your WordPress installation there will also be a file $postid = $post->ID;
named functions.php. Its a powerful file that can add extra functionality $title = $post->post_title;
to your WordPress installation. It works like a plugin within your theme $commentcount = $post->comment_count;
so you can modify features without editing any of the core WordPress if ($commentcount != 0) { ?>
files. As per the other templates these functions are called upon when <li><a href="<?php echo get_permalink($postid); ?>"
needed by the index.php file. title="<?php echo $title ?>">
If youre using a child theme its worth noting that functions do not <?php echo $title ?></a> {<?php echo $commentcount ?>}</
work in the same way as the style.css. In the case of style.css the choice li>
made there will override the parent theme. With functions.php both files <?php } } ?>
from the child and parent theme will combine and complement each </ul>
other. To that extent, if you dont need any new functions for your child
theme then you dont even need to create a function.php file.
There are too many options to list here when it comes to adding
functions so its worth scouring the internet for the kind of functions you
feel you may need. As an example this code will add section to your blog
that displays the most popular posts.

<h2>Popular Posts</h2>
<ul>
<?php $result = $wpdb->get_results("SELECT comment_
count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC
LIMIT 0 , 5");
foreach ($result as $post) {
setup_postdata($post);

WordPress Genius Guide 71

 Themes

Content
<ul> <?php get_header(); ?>
<li><?php next_post_link(); ?></li> <div id="main">
Content from your blog is displayed within an area <li><?php previous_post_link(); ?></li> <div id="content">
known as the loop. Arguably one of the most </ul> <?php if (have_posts()) : while (have_
powerful sections of your blog, the loop is a special </div> posts()) : the_post(); ?>
section of code that displays your posts and <h1><?php the_title(); ?></h1>
comments wherever you place it. </article> <h4>Posted on <?php the_time('F jS, Y') ?></
h4>

01 Locate the loop

Weve actually already featured the loop
within our index.php from earlier in the tutorial. Here
03 Other loop elements
These are other examples of the elements
that can also be added to the loop and applied to the
<p><?php the_content(__('(more...)')); ?></p>

<?php comment_form(); ?>

is the section of code from the index.php file where appearance of your posts. Its a good example of
it appears. how much control WordPress offer with regards to <div class="prev-next-links">
building a theme. More Loop examples can be found <ul>
<?php if (have_posts()) : while (have_ on The WordPress Codex at http://codex.wordpress. <li><?php next_post_link(); ?></li>
posts()) : the_post(); ?> org/The_Loop. <li><?php previous_post_link(); ?></
<h1><?php the_title(); ?></h1> li>
<h4>Posted on <?php the_time('F jS, Y') ?></ the_category Displays the category or categories </ul>
h4> associated to the post or page being viewed
<p><?php the_content(__('(more...)')); ?></p> the_author Displays the author of the post or page </div>
<hr> <?php endwhile; else: ?> the_content Displays the main content for a post or
<p><?php _e('Sorry, no posts matched your page </article>
criteria.'); ?></p> the_excerpt Displays the first 55 words of a posts
<?php endif; ?> main content then with a [...] or read more link that
goes to the full post. The length of excerpts can be <hr> <?php endwhile; else: ?>

02 Adding extra features

The example of the loop from Step 1 is a
fairly simple application of the code. Its possible to
controlled by using this slightly advanced method or
by using the Excerpt field on the post edit page.
the_shortlink Displays a link to the page or post
<p><?php _e('Sorry, no posts matched your
criteria.'); ?></p><?php endif; ?>
</div>
add code to enhance how the posts are applied to using the url of the site using the ID of the post or <?php get_sidebar(); ?>
your blog. In this case the code will add web links page </div>
under every post that navigate to the previous post <div id="delimiter">
and the next post.

<?php comment_form(); ?>

04 Our enhanced index
So here is how the loop will appear within
the Index code. To apply this we need to add it to the
</div>
<?php get_footer(); ?>

index.php file. Open your browser and refresh the

<div class="prev-next-links"> page to see how the new changes look on your blog.

Top tip
While the theme were
building works as a
jumping off point, its
worth planning ahead for
your future projects.
Sketch out your
ideal blog.

72 WordPress Genius Guide

 WordPress
Genius Guide

Style Description: An example of a theme that I made

Version: 1.0
Weve mentioned previously about how the code in your template is just Author: Paul
that. It sets up the layout of your blog but does not instruct on how it will Author URL: https://munkeyplustypewriter.wordpress.com
look. You will need to create a file called style.css and enter the code below Tags: theme
into it. The code in this example is largely made up of two parts. The first */
section is what helps WordPress recognise that this file is part of a theme.
The text between the /* and */ markers are used as meta data which body { text-align: center; }
WordPress will use as a description for your theme on the Dashboard. #wrapper { display: block; border: 1px #a2a2a2 solid; width:90%;
The second part is the actual instruction on how each section will look. margin:0px auto; border-radius: 16px}
Weve have applied a selection of blue colours via hexadecimal code and #header { border: 2px #a2a2a2 solid; border-radius: 16px}
decided on the font that will be applied. Margins and sizes of areas have #content { width: 75%; border: 2px #a2a2a2 solid; float: left;
also been addressed. The benefit of this approach is that when it comes to border-radius: 16px }
making more themes you can keep the templates the same but really #sidebar { width: 23%; border: 2px #a2a2a2 solid; float: right;
change things up in the style.css file. border-radius: 16px }
#delimiter { clear: both; }
/* #footer { background: #000; color: #fff; border-radius: 5px;}
Theme Name: mynewtheme .title { font-size: 11pt; font-family: arial; verdana; font-
Theme URL: http://mynewtheme.esy.es weight: bold; }

The finished product

With your templates and style.css files coded all you your installation and upload your new folder to the the WordPress Dashboard you can select
need to do now is add them to your WordPress WordPress themes directory. Alternatively you could Appearance>Themes>Add Theme>Upload Theme and
installation. You can use an FTP program to access compress you local theme folder into a zip file. From select your newly zipped folder.

Top tip
Create a 600px by
450px image. Save as
screenshot.png in the
theme folder. It adds a
theme screenshot to
your dashboards
Theme panel.

When it comes to
making more themes
you can keep the
templates the same

WordPress Genius Guide 73

 Themes

Build a
TUTORIAL THERE ARE MANY great themes on
OBJECTIVE WordPress you can customise. We will be
Create a theme that adapts
using Zurbs Foundation framework for the
to mobile devices purposes of this tutorial. Previously to

responsive
incorporate the theme into WordPress you had to
TIME REQUIRED manually link the necessary JavaScript and CSS using
2 hours
the WordPress functions wp_enqueue_script and wp_
enqueue_style. But now, thanks to Zurb and the

WordPress
popularity of WordPress, Zurb has provided a starter
theme called FoundationPress, which you can
download directly from its GitHub page to start building
your own WordPress theme.

theme
The purpose of this ultimate starter theme is to act as
a springboard; it comes packed with useful reuseable
components, a 12-column responsive grid, JavaScript
functions and much more. This starter theme contains
all the necessary design elements, including the
AS THE MOST ADVANCED RESPONSIVE FRAMEWORK JavaScript and CSS libraries.
AVAILABLE, ZURBS FOUNDATION IS IDEAL FOR YOUR Still, FoundationPress is not an all-in-one WordPress
LATEST WORDPRESS PROJECT theme with plugins, shortcodes, custom options or
custom templates it is only to be used as a starting
point. Luckily it has done most of the hard work for us
including setting up widgets, navigations, displaying
blog posts and general clean-up of WordPress.

01 Download FoundationPress
To begin, make sure you have the latest version
of WordPress installed and set up. Head over to the
including a gradient background. Open up the header.
php and paste in the following HTML code.

FoundationPress starter theme GitHub page: github.com/ 001 <header class=main-head>

olefredrik/foundationpress and download this theme. 002 <div class=row>
Once youve downloaded it, extract it and upload it to your 003 <div class=large-12 columns>
themes directory in WordPress and activate it. 004 <h1 class=title><?php bloginfo
( name ); ?></h1>

02 Custom stylesheet 005 </div>

Start by opening up the header.php file in your 006 </div>
text editor. Youll want to add in your own custom 007 </header>
stylesheet so that when it comes to upgrading

<above>
s
Start building responsive WordPress themes
using Zurbs own advance Foundation
FoundationPress it wont override any custom work. You
may use Sass with Foundation, but to allow beginners to
follow along this tutorial, well be using pure CSS.
05 Style the header
With our header implemented well now need to
style it. Open up style.css in the FoundationPress starter
framework starter theme
theme, start by giving the main header a gradient
001 <link rel=stylesheet href=<?php echo get background, using CSS3 gradient. Position the main h1
_template_directory_uri(); ?>/style.css /> above the header. Lets make all characters upper-case and
give it a text shadow to stand out from the light backdrop.

03 Customise the menu

WordPress already features a built-in
Appearance Menus Screen, enabling users to create
001 .main-head {
002 margin-bottom: 2em;
custom navigation. FoundationPress takes this a step 003 padding: 1.2em;
further by allowing us to create multiple navigations on 004 background: #00b3d3;
either side on the nav bar. When you create a new menu 005 background: -moz-radial-gradient(center,
in WordPress, you have the option to enable your ellipse cover, #00b3d3 0%, #007295
navigations for mobile devices. 100%);
006 background: -webkit-gradient(radial,

04 Customise the header

<above> center center, 0px, center center, 100%,
s
:PV
DBO
download Zurbs Foundation FoundationPress has already pre-written a lot color-stop(0%,#00b3d3), color-stop
WordPress starter theme, FoundationPress, (100%,#007295));
with ease over on GitHub of the WordPress basic theming. Were going to dive in
and modify it. To give this theme a visual punch were 007 background: -webkit-radial-gradient
going to add in a header with the website name, (center, ellipse cover, #00b3d3 0%,

74 WordPress Genius Guide

 WordPress
Genius Guide

<above>
s
We used Foundations grid
system on the search form, which
will auto scale down for mobile and
<top> tablet devices
s
In WordPress, activate FoundationPress starter theme. This theme includes all <left>
the Foundation framework library s
Enabling navigation to appear
<bottom> on mobile devices can be
s
FoundationPress allows you to order menus to be on the left or right side of the controlled all through the Menus
menu and enable for mobiles panel in WordPress

008 }
#007295 100%);
003
searchform_top); ?>
<div class=large-8 columns searchbox>
Top tip
009 .main-head h1 { 004 <input type=text value= name=s Make sure that you have
010 text-align: center; id=s placeholder=<?php esc_attr_e Node.js, Grunt and Bower
011 font-weight: 900; (Search, FoundationPress); ?>> installed locally so you
012 text-transform: uppercase; 005 </div>
013 letter-spacing: 10px; 006 <?php do_action(foundationPress_
can perform an update
014 text-shadow: 1px 1px 2px rgba searchform_before_search_button); ?> to the Foundation
(50, 50, 50, 0.59); 007 <div class=large-4 columns framework.
015 font-size: 2.5rem; searchbutton>
016 color: #fff; 008 <input type=submit id=searchsubmit
017 } value=<?php esc_attr_e(Search,
FoundationPress); ?> class=prefix next to each other on a large monitor. Using the grid

06 Add a search button> system will force our layout to be responsive. Remove
Currently in our widgets list, the search form is 009 </div> the original code all the way down to the <footer> tag
located in the sidebar. In WordPress Widgets we can in content.php.
disable the search widget. Now inside our head.php at
the very bottom, paste in the following function, which
will print out the search form. Were going to place our
08 Modify index.php
The index.php is the main template in
WordPress theming hierarchy. Were going to modify
001 <div class=large-4 columns role=main>
002 <article id=post-<?php the_ID(); ?>
search form just below the header of our website. it and remove some of the grid components and <?php post_class(panel); ?> data-
place them in content.php instead. Remove the equalizer-watch>
001 <?php get_search_form(); ?> <div> row and grid classes just below the get_header 003 <header>
function and replace it with the code below. Finally, 004 <h2><a href=<?php the_permalink();

07 Customise search migrate the <?php get_sidebar(); ?> just above the get_ ?>><?php the_title(); ?></a></h2>
With the get search form function added in footer function. 005 </header>
our header.php we can now structure this search form 006 <div class=entry-content>
by editing the searchform.php. Directly below the form 001 <?php get_header(); ?> 007 <figure><a href=<?php the_permalink
tag we have applied a row <div> and changed the default 002 <div class=row data-equalizer> (); ?>><?php if ( has_post_
grid layout to use the large grid system as well as setting thumbnail() ) {the_post_thumbnail

09 Blog post
some custom classes to be referenced in our CSS. (large); } ?></a></figure>
With the home page structure completed, 008 <?php the_excerpt(); ?>
001 <div class=row> well want to structure each blog post in a grid column 009 <p>Posted on <?php the_time(F jS, Y
002 <?php do_action(foundationPress_ of four rows; this will lay out three blog posts organised ); ?> in <?php the_category(, );

WordPress Genius Guide 75

 Themes

<above>
s
)FSF
XF
IBWF
PVS
fully responsive WordPress site,
resizing to perfectly display on all screen sizes
<top left>
s
Easily set up and use shortcodes in your site to take
advantage of Foundations library of components
< bottom left>
s
Using WordPress shortcodes, we were able to add
Foundations alert box components throughout the site

?></p> of threes, our search field and search button are

Top tip
010 <p class=byline author>Written by not quite aligned with the rest of the design. Lets fix
All Sass variables are
<?php the_author_posts_link(); ?> this by adding some padding. With a mobile-first located in scss/config/_
</p>
011 <a href=<?php the_permalink(); ?>
approach, Foundation takes care of the responsive variables.scss and your
nature its unnecessary to add styles for mobile or
class=button>Read more</a> site structure within
tablet devices.
012 </div> scss/site/_structure.
001 .searchbox, .searchbutton {

10 Style the blog

002 padding: 0 15px;
With our blog post structure set up in a grid 003 }

14 Widgets
column in a set of threes, well now implement some 004
simple styling to this home page. Back in our style.css, Now to actually lay out our widgets, we will
well add some box shadow so the panels dont look so
flat. We dont need to style the panels themselves as
these styles are already set up inside Foundation.
12 Move the sidebar
Rather than having our sidebar situated on
the right-hand column, we will position it directly
need to open up the widget-areas.php located in the
library directory. Inside the first array on line 8, remove
what is currently there and replace it with the below,
below all the blog posts and just above the footer. which uses the large-4 grid and a data-equalizer-watch
001 .panel { Inside the sidebar.php were going to use attribute that the Equalizer component requires to set
002 box-shadow: 0 1px 5px #D5DEE5; Foundations Equalizer component, which will set equal heights to each panel.
003 } equal height to all the widget panels. We simply
004 figure { place the data-equalizer attribute to the parent 001 before_widget => <article id=%1$s
005 margin: 0; container here. class=widget %2$s large-4 columns><div
006 } class=panel data-equalizer-watch>,
007 .entry-content figure img { 001 <div class=bottom-sidebar>

15 Style the sidebar

008 margin: 10px 0; 002 <aside id=sidebar class=row data-
009 } equalizer> Within WordPress in the Widgets panel, we only
010 @media only screen and 003 <?php do_action(foundationPress_ require three widgets so remove any of the other
(min-width: 40.063em) { before_sidebar); ?> existing ones. When you check the homepage you will
011 h2 { 004 <?php dynamic_sidebar(sidebar- notice our widget panels all have equal heights to the
012 font-size: 1.8rem; widgets); ?> tallest panel. To finish up with our sidebar beneath our
013 } 005 <?php do_action(foundationPress_ blog posts, we will give this section its own background
014 } after_sidebar); ?> colour and some padding.
006 </aside>

11 Style search form

007 </div> 001 .bottom-sidebar {
With our blog posts neatly organised in a row 008 002 padding-top: 10px;

76 WordPress Genius Guide

 WordPress
Genius Guide

003 background-color: #cecece; the add_shortcode method. The first parameter defines
004 } the shortcode in the editor while the second points to
the function that we created previously.

16 Set up shortcodes
Because there is a vast amount of
components available in Foundation, we convert some
001 function register_shortcodes() {
002 add_shortcode(alert, foundation_add_
of them into shortcodes so that we can reuse these alerts);
components whenever were in the editor. Creating 003 }
shortcodes requires two steps: create a primary handler 004 add_action(init, register_shortcodes);
method and hook up the handler into WordPress.
Inside the functions.php we need to set up our
primary function. 20 Shortcodes to use
We can now use the following shortcodes in
the editor to display alert boxes, which is a native
001 function foundation_add_alerts component from the Foundation framework. All we have
( $atts, $content = null ) { to do is pass in which type of alert box type we want
002 extract( shortcode_atts( array( displayed by selecting the attributes: success, secondary
003 type => , or alert. We can even choose what type of shape to use
Store all your shortcodes in
004 shape => , and whether we want a close off function.
a separate file
005 close => true, In this tutorial our code for the WordPress
006 class => 001 [alert type=success shape=radius shortcodes are placed in the functions.php.
007 ), $atts ) ); close=true]This is a success message While this is valid, to keep our functions.php
[/alert] clean and easy to maintain its good practice to

17 Shortcode array 002 [alert type=secondary) shape=radius copy all of the shortcodes into a separate file
In the previous code snippet we noted that our close=true]This is a standard message instead. The benefit of having this separate file is
function receives the parameters of type, shape and [/alert] that it becomes more modular and, should you
close. Were going to use this to display alert boxes 003 [alert type=alert shape=round close= have lots of shortcodes, it wont become
using one of Foundations components. The type false]This is an alert message[/alert] cluttered in unnecessary code compared to
attribute will display success, warnings or informative being in the functions.php.
information using this shortcode. Lets set up an array
that will capture these attributes. 21 Alert boxes
Without any CSS styling or JavaScript and just
using the shortcodes we have set up, we can
To follow FoundationPress standards we can
copy all our shortcodes into a new file called
foundation-shortcodes.php. Within the
001 $class_array[] = ( $shape ) ? $shape : ; implement alert boxes wherever we like in our functions.php we can just reference this with:
002 $class_array[] = ( $type ) ? $type : ; WordPress site. By simply using shortcodes we can
003 $class_array[] = ( $class ) ? $class : ; easily convert many of the rich components from
require_once(library/foundation-
004 $class_array = array_filter( $class_array ); Foundation to be used easily throughout our site.
shortcodes.php);
005 $classes = implode( , $class_array );
You could even store all of your shortcodes

18 Shortcode markup
When this shortcode is executed we want to
22 Footer
To finish up were just going to add in a footer
navigation by using the WordPress WP list pages. Open
within a separate plugin. That way, in the event
that you switch themes, they will always be
available and working.
make sure that its using the correct formatted markup up the footer.php and just belowthe closing </section>
and CSS classes. We need to use a wrapping class tag, remove everything including the <footer> tag.
alert-box. This is very important because we want to Replace it with the following code, which will display a styling up our footer. Through this tutorial weve taken
make sure that Foundation calls the Alert JavaScript list of all pages on our site. the starter theme FoundationPress and quickly
plugin for us. This particular plugin is in fact handled in customised it as our own theme using a variety of
the foundation.alert.js. 001 <footer class=main-footer> Foundations components and functionality. Using
002 <div class=row FoundationPress allowed us to focus on the front-end
001 $output = <div class=alert-box . $ 003 <ul> development and less on the actual backend efforts.
classes . >; 004 <?php wp_list_pages(); ?>
002 $output .= do_shortcode( $content ); 005 </ul> 001 .main-footer {
003 $output .= ( false != $close ) ? <a 006 <?php do_action(foundationPress_ 002 padding: 10px 0;
class=close href=>&times;</a> : ; before_footer); ?> 003 background-color: #9c9c9c;
004 $output .= </div>; 007 <?php dynamic_sidebar(footer- 004 }
005 return $output; widgets); ?> 005 .pagenav ul {
006 } 008 <?php do_action(foundationPress_ 006 margin: 10px 0 0 0;
after_footer); ?> 007 }

19 Hook into WordPress

009 </div> 008 .main-footer li {
Before finishing off our shortcode were going 010 </footer> 009 float:left;
to ensure that it has all been registered correctly, 010 margin-right: 10px;

23 Style the footer

otherwise WordPress wont know what to do with it. To 011 list-style: none;
do this we use the register_shortcodes function and Finally, were just adding the final touches by 012 }

WordPress Genius Guide 77

 Themes

Customise a
THEMES ARE A key part of your
TUTORIAL WordPress blog, as they dictate how
OBJECTIVE
Learn some basic
your website will appear to your
tweaks that can be visitors. The choices you make with
applied to personalise a

WordPress
WordPress theme regards to aesthetics and layout will determine
whether your users will want to delve further
TIME REQUIRED into your content or avoid making a return trip
20 minutes
in the future. WordPress has plenty of themes

theme
for you to choose from and you can also make
your own customisations to really add that
personal touch. Making such customisations
does involve a certain amount of coding but
even with a minimal amount of knowledge you
THERE ARE PLENTY OF PRE-MADE THEMES THAT YOU CAN can learn a few tricks to get you up and running.
MAKE USE OF FOR YOUR WORDPRESS BLOG. WITH A LITTLE BIT If you make the correct preparations you can
also make edits without putting your installation
OF WORK UNDER-THE-HOOD YOU CAN GIVE YOUR OWN BLOG at risk. This is done by creating a child theme
A LOOK THAT DIFFERS FROM THE REST OF THE CROWD that inherits the traits of a pre-existing parent
theme. In this tutorial we show you how to do
exactly that, customising the CSS for themes to
create a look that you are hoping for rather than
The choices you make with relying on the themes that are provided by

regards to aesthetics will determine WordPress. We also take you through setting up
fonts for your theme, guide you trough
whether your users will want to delve hexidecimal colours, adding notes and borders
to your work to make a cohesive theme that has
further into your content that personalised touch.

<left>
s
Make customisations
and design alterations
to your installed
theme without the
need for learning
code via the
WordPress Dashboard

01Create child theme

Create a new folder on your local computer.
Give it the same name as your current WordPress theme
your WordPress installation. This can be done by using
an FTP program to connect to your web host. Weve
used FileZilla in our example. Use your FTP program to
theme should now be visible within your selection of
themes. If you wish you can preview it to check that it
has inherited the attributes of the parent theme. To make
but add a marker after it. The theme weve used in our browse to the /wp-content/themes folder and upload further edits you will need to activate the theme.
example is twentythirteen so weve named the folder your newly created child theme folder. Alternatively, zip
twentythirteen -child. Open a text editor and create a file
titled style.css within this folder, within that file add the
text above. Make sure to add the name of your own
the folder and upload it by using the WordPress theme
uploader. You can find it in Appearance>Themes>Install
Themes>Upload.
04Dashboard based
customisation
Depending on your chosen theme, you may have the
theme to the relevant lines. In this example, where we option of making customisations via the WordPress
have used twentythirteen you will need to use your own
selected theme name. 03Open WordPress
Dashboard
In your web browser, log in to your WordPress
Dashboard. This can control features such as the layout,
the title, background images and so on. These are helpful
for getting the main aspects of your site organised. What

02 Upload child folder

The next step is to upload your child folder to
Dashboard. On the left hand side of the screen, click on
Appearance followed by Themes. Your newly added child
were looking at however are more specific changes that
can be made by adding code to the style.css file.

78 WordPress Genius Guide

 WordPress
Genius Guide

<top left>
s
Use in-browser developer tools
to create non-destructive edits
to your blog whilst gaining a
better understanding of CSS
code and how it works
<bottom left>
s
When it comes to uploading
your child theme you can use an
FTP program (as above) or the
upload theme function in the
WordPress Dashboard
<bottom right>
s
Once your child theme has
been uploaded successfully it
will appear within the
Dashboard. Youll need to
activate it in order to keep
making edits to it

Top tip
Plugins such as
05Understanding
commands
CSS
Now we have a child theme installed we can customise
are applying is uppercase. When we apply this code
it will force all of the text in Heading1 to appear
in uppercase.
Widgets on Pages make
it possible for widget
areas to display within
it without disturbing the parent theme. This is done the content of a page
001 /*
by adding extra lines of CSS code into the style.css file. or post by means of
002 Theme Name: TwentyThirteen Child
On a basic level they work like the example above.
003 Description: my fabulous child theme
shortcodes that the
The Item is the feature that youre editing. This is
004 Author: Lisa Sabin-Wilson
user pastes into
followed by a curly bracket and the Property which is the
005 Version: 1.0
the text.
aspect of the item that is being changed. Value is what
the new setting will be, ie a colour or font. Note the use of 006 Template: twentythirteen
the colon and semi-colon, these are required as part of 007 */ have been made, click on Update File to finalise your
the coding. 008 @import url('../twentythirteen/style.css'); changes and update your blog.
009 h1 {

08Set up fonts
001 Item { Property: value; } 010 text-transform: uppercase;
011 } Once youve mastered one command you can

06 Adding code
When it comes to adding new code it needs
to be added after the @import line. If you add 07View changes
If you wish you can edit the local style.css file
move on and start applying multiple commands. This is
an example provided by WordPress that illustrates the
many possibilities regarding fonts. We have set the body
commands before the @import line, the alterations on your computer and upload it again via FTP to your text to be either Arial, Helvetica or Sans Serif (depending
will not take effect. Working from the example in the WordPress installation (overwriting the old file). on what fonts the end user has installed) with a size of 14
previous step, the item that we are editing is Heading Alternatively you can edit the file within the WordPress pixels. Headings one and two have been set to two times
1 (known as H1). The property that were changing is dashboard. Click on Appearance>Editor. This will open and one and a half times larger than the body text
the text format (text-transform) and the value that we the stylesheet within your web browser. Once your edits respectively. Any strong text elements, such as widget

WordPress Genius Guide 79

 Themes

<top left>
s
5P
TBWF
UJNF
ZPV
DBO
BMXBZT
USZ
DVTUPNJTJOH
ZPVS
UIFNF
WJB
UIF
%BTICPBSE
"WBJMBCMF
PQUJPOT
XJMM

WBSZ
EFQFOEJOH
PO
UIF
UIFNF
ZPV
IBWF
BDUJWBUFE

<bottom left>
s
5IF
$44
FEJUPS
JO
8PSE1SFTT
JT
B
RVJDLFS
XBZ
PG
VQEBUJOH
ZPVS
TUZMFDTT
JMF
DPNQBSFE
UP
VQMPBEJOH
JU

WJB
'51

<bottom right>
s
"WBJMBCMF
JO
CSPXTFST
TVDI
BT
$ISPNF
'JSFGPY
BOE
4BGBSJ
5IF
%FW
5PPMT
BSF
B
HSFBU
XBZ
PG

FYQFSJNFOUJOH
XJUI
BEKVTUNFOUT
UP
UIF
$44
DPEF

titles, will appear in italic and uppercase to draw extra 004 border-left-width: 10px; that is being used for this item. Scroll down this window
attention to them. 005 border-right-width: 10px; to view the code that has been applied. Here we have
006 border-color: black; located the code from earlier that has forced our header
001 body { 007 } text to be all uppercase.
002 font-family: arial, helvetica, sans-serif;

10Add notes 13Toggling edits

003 font-size: 14px;
004 } Once youve got a few tweaks up and Depending on whether a particular piece of
005 h1 { running youre going to find that it can be a bit easy code is active you may be able to toggle the code on or
006 font-size: 2em; to get lost in all that code. Its worthwhile getting into off. This is shown by a box that appears to the left of the
007 } the habits of leaving notes for yourself. This is done particular line of code. As you click the toggle box the
008 h2 { by using /* and */ like in the example above. The idea changes will appear in real-time. Its a great tool for quickly
009 font-size: 1.5em; is that if you come back to your code at a later you seeing how small design changes can play out on your
010 } can quickly find the elements that you wish to blog. More importantly whilst youre working in the Dev
011 strong { work on. Tool your actual website will not be altered. Only you can
012 font-style: italic; see the changes.
013 text-transform: uppercase; 001 /* This is how you add notes*/

14Manual edits
014 }

09 Add borders
You can also add borders to particular elements
11 Developer Tools
Web browsers such as Firefox and
Chrome can do more than just search the web. They
You can also manually change code by selecting
a value and typing in a new entry. Here we are altering
the colour of the website title. When it comes to colour
of your page. Here we have added a dashed border also now feature developer tools that allow you to you can enter a colour, RGB value or hexadecimal code.
to Heading Size 1. It will be 3 pixels wide at the top and inspect various elements of a web page. Well focus Its more preferable to use a hexadecimal value as there is
bottom plus 10 pixels wide at either side. The border will on Chrome in our example. Open your webpage, far more variety available. Here we have clicked the value
also be black. Its a good example of how you set up the right-click on an element you wish to change and select and used the arrow keys to scroll through the code values
item first then follow with curly brackets containing the Inspect Element. until we have found a value that fits.
specifics of what you want to edit.

001 h1 {
002 border-style: dashed;
12Viewing the code
The bottom of the screen will now display
two panels. On the left is the HTML elements with our
15Apply your edit
Once youve found the correct setting you can
then copy the code straight from the dev tool. Select the
003 border-width: 3px; selected item highlighted. On the right is the CSS code code beginning with the Item (in this case .site header

80 WordPress Genius Guide

 WordPress
Genius Guide

Hexadecimal
colour codes
Weve briefly touched up
hexadecimal colour codes in the
main tutorial. In basic terms this is a
six digit code where each colour
relates to a different code. Using
hexadecimal codes means that up to
16,777,216 colours are available for
you to use. There is a logic to the Top tip
codes but thankfully there are also 5P
TUPQ
QFPQMF

some great online tools to save you TFFJOH
ZPVS

the hard work of figuring out the
EFWFMPQJOH
CMPH
TFU
JU

codes for yourself. Of particular note
is http://colourco.de/ . Its website
UP
QSJWBUF
'SPN
UIF

that not only provides you with codes
%BTICPBSE
DMJDL

for colours but also suggest other
4FUUJOHT3FBEJOH
BOE

colours that will compliment your TFMFDU
A*
XPVME
MJLF
NZ

initial colour selection. This is TJUF
UP
CF
QSJWBUF
invaluable for creating a good look
on your site. Simply drag your mouse
pointer around the screen and
colourco.de will display the codes for
each corresponding colour.

.home link) and ending with the closing

curly bracket and copy it. You can then paste
this into your style.css file and save it. The
applied tweak will then be visible to your
website visitors.

16Taking it further
So far youve gained a basic idea of
how CSS works and how to apply it. There is
a lot more to cover, much more than what we
can fit in here. WordPress has links to some
great online material to help you out. Such <top>
an example is XXXIUNMEPHDPNHVJEFT s
#Z
TFMFDUJOH
BO
FMFNFOU
PO
UIF
QBHF
UIF

DTT which covers various aspects of HTML, %FW
5PPM
DBO
UBLF
ZPV
TUSBJHIU
UP
UIF
$44

DPEF
UIBU
SFMBUFT
UP
JU
'SPN
IFSF
UIF

Javascript and CSS. UXFBLJOH
DBO
CFHJO

<middle>
s
)FSF
XF
IBWF
VOUJDLFE
UIF
AVQQFSDBTF

Top tip DPNNBOE
PO
UIF
IFBEJOHT
/PUJDF
UIBU
UIF

UFYU
PO
UIF
XFCQBHF
IBT
BMTP
VQEBUFE
BU

*G
ZPVSF
DSFBUJOH
UIF
TBNF
UJNF

BOE
UXFBLJOH
B
CMPH
<bottom>
ZPV
DBO
BMTP
EP
TP
JO
s
:PV
DBO
BMTP
DMJDL
EJSFDUMZ
PO
B
WBMVF
BOE

BO
P
MJOF
FOWJSPONFOU
NBOVBMMZ
FOUFS
ZPVS
DIPTFO
NFBTVSFNFOU

"HBJO
UIF
QBHF
XJMM
VQEBUF
JO
SFBMUJNF
CFGPSF
ZPV
QVCMJTI

DIBOHFT
POMJOF
5SZ

www.wampserver.
com/en/

WordPress Genius Guide 81

 Themes

Convert a
TUTORIAL THE POPULARITY OF WordPress has
OBJECTIVE refused to abate over the last few years,
Convert your HTML theme with over 60 million websites worldwide
into a WordPress theme
and around 25 per cent of new sites

static site to
TIME REQUIRED choosing the free content management system as
2 hours
their foundation. Running your website with a CMS
has obvious benefits, from ease of changes for site
owners, to the wealth of extra functions available. But

WordPress
what can you do if you have an existing non-CMS site
that you would like to use in the WordPress format
without changing the look of the site? Well, thankfully
its not as difficult as you may think to take an existing

with a child
theme and replicate your site with it.
WordPress comes with a selection of own
out-of-the-box themes pre-installed, including Twenty
Fifteen, which is the most recent. They offer a basic

theme
responsive framework and are solid, secure, and
dependable themes which stand up to heavy editing.
This exercise uses an older iteration of the theme,
Twenty Twelve. Themes are updated by WordPress
regularly, so to avoid all the changes being lost with
TRANSFORM A HTML SITE USING A CHILD OF THE NATIVE each update, well be creating a child theme. Using
WORDPRESS TWENTY TWELVE THEME child themes allows you to draw your files and styling
from an existing theme while creating changes and
making amendments in a separate sub-folder, giving
you complete control.

01 Back up your site

Before doing anything else, take a backup of
your existing site. In this case the site is called Cat Stuff, via
You can see the folder for Twenty Twelve here. Create a
new folder and name it after your website in this instance
well call it Catstuff. This folder will contain all our child files
05 Create a screenshot
You can also create a screenshot of your old site,
or whatever you want to use, to display in the Themes
FTP or control panel. This is good advice at any time, but and styles. section of the Dashboard. Take your image (it should be
you will also need to migrate many of the files, not least the around 600px x 450px) and save it as screenshot.png.
images, to your new WordPress installation. Place it in the child folder and upload the whole thing to
your live themes folder. Go to Appearance>Themes in the
left-hand menu of your dashboard.

04 Create new stylesheet

Open a new CSS stylesheet and name it style.

02 Install WordPress
Install WordPress where the site was and enter
css. Its important that you stick to this naming structure as
this is what WordPress will look for. Save it to the child
the details into the fields. Log in to your Dashboard and
view the site by clicking on the site title in the top-left of the
window. Youll see it as it looks in the unedited Twenty
folder. Add the following, or equivalent, declaration to the
top of the sheet. The template name must match exactly
the folder name of the parent theme.
06 Activate your theme
Activate the new theme by clicking the Activate
link, which youll be able to locate below the screenshot.
Twelve theme. Now we need to set up our child theme. Youll see the screenshot move to the top. If you look at the
001 Theme Name: Cat Stuff site again, youll notice that nothing has changed, but we

03 Make the child folder

002 Description: Child theme for Twenty Twelve now have the ability to edit and change whatever we like
Grab all your WordPress files and navigate 003 Author: Richard Lamb and make the site identical to the original with the help of
through them to the themes folder at wp-content>themes. 004 Template: twentytwelve our child stylesheet.

82 WordPress Genius Guide

 WordPress
Genius Guide

07 Custom home page

Copy page.php from the original twentytwelve
folder and paste it into the new child folder. Rename it
home.php. WordPress will automatically load this as your
front page. Copy and paste header.php but leave it with
the same name. Remove the following code from home.
php normally used to call the blog posts and sidebar
and replace with the code that follows.

001 <?php while ( have_posts() ) : the_post();

?>
002 <?php get_template_part( content, page
); ?>
003 <?php comments_template( , true ); ?>
004 <?php endwhile; // end of the loop. ?>
005
006 <?php get_sidebar(); ?> <above>
s
5IF
8PSE1SFTT
UFYU
FEJUPS
IBT
DPNF
B
MPOH
XBZ
JO
JUT
IBOEMJOH
PG
)5.-
JO
SFDFOU
ZFBST

08 Start adding custom CSS

Although there are a few admin options for

10 Image
customisation in the Twenty Twelve theme, using CSS gives bloginfo(stylesheet_directory); ?>/images/
us far greater control. Now we are writing new versions of To put our original cat header in place we need to logo.png/></div>
CSS declarations, rather than changing the originals. This is take the header image from the original site (head.jpg) and 003 </hgroup>
where referring to both the original theme CSS and using place it in a new images folder, in our child theme. Place the 004 #logo {
browser developer tools to identify which CSS classes we following styles into the CSS sheet, overriding those of the 005 text-align: center;
need to amend is invaluable. original and calling our image as a background. Add the 006 }
img value for responsive purposes.

001
002
img {
max-width:100%;
12 Navigation
The navigation currently sits halfway up the
header image. We can fix that, but first we need to create
003 } some pages and assign a WordPress menu so we can see
004 .site-header { the elements we need to style (see In Detail). Once you
005 background: url(images/head.jpg); have the menu assigned, you can apply the following styles
006 background-repeat:no-repeat; wrapped in a media query so the mobile navigation can be
007 background-position:center; addressed separately.
008 height:300px;

09 Main body changes

009 padding:0; 001 @media screen and (min-width: 600px) {
Twenty Twelve comes with chunky margins and 010 } 002 .main-navigation ul.nav-menu {
padding which will need changing to replicate our sites 003 border:none;

11 The logo
edge-to-edge design. Removing the body padding will 004 background:rgba(203,205,15,0.3);
leave us having to add content padding here and there to There are two ways to remove the title and 005 margin-top: 124px;
compensate, but its not too much trouble. You can change description, either by deleting the H1 and H2 tags from the 006 }
the body colour (#333) in the CSS or in the customisation <hgroup> in header.php, or deleting the content in the 007 .main-navigation li {
options for the theme. admin and overriding the CSS. The former is easier. Delete 008 margin:0 20px;
the tags and add the logo image to the images folder, then 009 }
001 body .site { place a logo div between the <hgroup> tags which calls the 010 .main-navigation li a {
002 margin:0 auto; image, and add some CSS. 011 font-family:Verdana, Geneva, sans-serif;
003 padding:0px; 012 color:#fff;
004 } 001 <hgroup> 013 font-size:16px;
005 002 <div id=logo><img src=<?php 014 text-transform:none;

WordPress Genius Guide 83

 Themes

Changing
.site-content to .front-
content maintains the
CSS for .site-content
015 line-height: 2.692308;
016 }
017 }

13 Customise the content

Our page is set up to accommodate a sidebar,
despite the fact that we have removed the code that calls it.
The best way around this allowing for the introduction of
the sidebar to other pages is to make a slight change to
the class name of our home pages main content. By
changing .site-content to .front-content we maintain the
CSS for .site-content.

001 <div id=primary class=front-content>

002 <div id=content role=main>
003 </div><!-- #content -->
004 </div><!-- #primary -->

<above> <above>
s

5IF
NFOV
TUJMM
OFFET
XPSL
BU
NPCJMF
TJ[F
1MBDF

TPNF
DIBOHFT
JO
UIF
NBYXJEUI
QY
NFEJB
RVFSZ
s

(JWF
ANFOVUPHHMF
B
CMBDL
CBDLHSPVOE
XJUI
XIJUF

UFYU
BOE
HJWF
ANBJOOBWJHBUJPO
B
NBSHJOUPQ
PG
QY 14 The slider
Download the plugin Meteor Slides through
the admin, and install it. Activate it and upload your
slide images from the original site by clicking Slides>
Add New. Go to Slides>Settings and set the base slide
width and height. Then, create a slider div on your
child home.php and place the following inside it to call
the slider.

001 <div id=primary class=front-content>

002 <div id=content role=main>
003 <div id=slider><?php if ( function_
exists( meteor_slideshow ) ) { meteor_
slideshow(); } ?></div>
004 </div><!-- #content -->
005 </div><!-- #primary -->
006

15 Home page content

The easiest thing to do would be to hard code
the content into the home.php file, replicating the
original. However, that would leave it uneditable
through the admin area, which is the main point of
having a content management system. The ideal solution is
to use an admin page for the content and have the home.
php load it.

<above> <above>
16 Create the page
Click on Pages>Add New in the left-hand
menu and call your new page Home Page Content.
s

3FEVDF
AMPHP
CZ
HJWJOH
JU
B
XJEUI
PG
BSPVOE

s

(JWF
ANBJOOBWJHBUJPO
B
DCDEG
BOE
OP
UFYU
XJUI
B

NBSHJO
MFGU
BOE
SJHIU
JO
PSEFS
UP
BMMPX
GPS
EFDPSBUJPO
BOE
ANBJOOBWJHBUJPO
MJ
B
QU
GPOU
XJUI
The content for the three columns on the original
NPSF
SPPN QY
MJOFIFJHIU home page were divided into three sections. Copy the
HTML for those sections into the text editor, making sure

84 WordPress Genius Guide

 WordPress
Genius Guide

18 Home content CSS

If you click Publish, youll see that the sections are
and paste it into the child folder. Open it and remove the
PHP snippet containing the Twenty Twelve credits,
Top tip now stacked one above the other theyre missing the CSS
from the original site. Those were fixed widths and this site
replacing it with the copyright notice of the original site. We
can preserve the WordPress footer functionality if required
There is a difference in is now responsive so youll want to consider the necessary at a later date. Now add the new styles. Replace the code
calling images for parent changes when importing the old styles. Some percentages below with the code that follows immediately after.
themes and child themes: in place of pixels and a media query will help that.
<?php echo get_template_ 001 <div class=site-info>
001 section { 002 <?php do_action( twentytwelve_credits );
directory_uri(); ?> for 002 float:left; ?><a href=<?php echo esc_url( __( http://
parents and <?php 003 width:30%; wordpress.org/, twentytwelve ) ); ?>
bloginfo(stylesheet_ 004 padding:10px 1.666666%; title=<?php esc_attr_e( Semantic Personal
directory); ?> for child. 005 text-align:center; Publishing Platform, twentytwelve );
006 font-size:12px; ?>><?php printf( __( Proudly powered by %s,
007 margin-bottom:30px; 003 twentytwelve ), WordPress ); ?></a>
008 } 004 </div><!-- .site-info -->
that it is set to Text rather than Visual. The Text tab allows 009 hr {
HTML input. 010 display: block; 001 <div class=site-info>
011 height: 1px; 002 <h2>Copyright&copy; 2013 Cat Stuff</h2>
001 <div class=section> 012 border: 0; 003 </div><!-- .site-info -->
002 <hr /> 013 border-top: 1px solid #222; 004 CSS
003 <h1>MEOW</h1> 014 margin: 1em 0; 005 footer[role=contentinfo] {
004 Sed quia consequuntur magni dolores eos 015 padding: 0; 006 background: #000;
qui ratione voluptatem sequi nesciunt. Neque 016 } 007 border:none;
porro quisquam est, qui dolorem ipsum quia 017 @media screen and (max-width: 600px) { 008 margin-top:0;
dolor sit amet, consectetur, adipisci velit, 018 .section { 009 padding:10px 0;
sed quia non numquam eius modi tempora incidunt 019 float:left; 010 }
ut labore et dolore magnam aliquam quaerat 020 width:90%; 011 footer h2 {
voluptatem. 021 padding:10px 5%; 012 font-family:Verdana, Geneva, sans-serif;
005 </div> 022 text-align:center; 013 text-align:center;
006 <div class=section> 023 font-size:12px; 014 color:#cbcd0f;
007 <hr /> 024 margin-bottom:30px; 015 font-size:13px;
008 <h1>PURR</h1> 025 } 016 font-weight:normal;
009 Sed ut perspiciatis unde omnis iste natus 026 }

21 Inner pages
error sit voluptatem accusantium doloremque 027
laudantium, totam rem aperiam, eaque ipsa quae Copy page.php and the folder page-templates

19 H1 Tag
ab illo inventore veritatis et quasi architecto into your child. All inner pages can now be created
beatae vitae dicta sunt explicabo. Nemo enim The three H1 section titles used a Google font, so using the internal pages made earlier, either with HTML
ipsam voluptatem quia voluptas sit aspernatur you can bring that in now. Place the href in the header.php, in the Text tab or through the Visual tab, and use these
aut odit aut fugit. in the <head> tag as you normally would. Dont forget to templates. If you want to keep the sidebar removed, select
010 </div> include the styling from the original site, too. Also, you need full-width page under Templates in the page editor.
011 <div class=section> to add some styling to .front-content to match the

22 Removing comments
012 <hr /> background colour of the original.
013 <h1>REOW</h1> <link href=http://fonts.googleapis.com/css?family=Denk+ If you want to remove the comments
014 Ut enim ad minima veniam, quis nostrum One rel=stylesheet type=text/css> functionality from your pages, leaving them matching the
exercitationem ullam corporis suscipit originals, you need to either delete or comment out the
laboriosam, nisi ut aliquid ex ea commodi 001 .section h1 { relevant PHP snippet in both page.php and full-width.php.
consequatur? Quis autem vel eum iure 002 font-family: Denk One, sans-serif; There is also a little CSS snippet you can place at the top of
reprehenderit qui in ea voluptate velit esse 003 text-align:center; each page in the editor to hide the page title.
quam nihil molestiae consequatur, vel illum qui 004 font-size:35px;
dolorem eum fugiat quo voluptas nulla pariatur? 005 margin:20px 0; 001 Hide the Page Title <style>
015 </div> 006 } 002 .entry-title{display:none;}
007 .front-content { 003 </style>

17 Call the content

008 float:left; 004 Hide Comment Functions
Now youll need a little PHP snippet to call 009 background:#ccc;
the content for that particular page into the home 010 width:100%; Change the below with the following:
page. Include the loop below, placed below the slider 011 }
div, which will call the page by ID. So make sure you replace 001 <?php comments_template( , true ); ?>
the page_id=26 with the ID number of your particular
page. This can be found in the url or on the page listing. 20 The Footer
Copy footer.php from the Twenty Twelve folder 001 <?php //comments_template( , true ); ?>

WordPress Genius Guide 85

 Themes

Create a
THE WAY WE access the internet
TUTORIAL has changed dramatically over the
OBJECTIVE
Make adjustments to your
last few years. Previously, your
theme so it can adapt to the WordPress blog would have most
screen sizes web browsers

mobile-
on mobile devices likely been accessed by desktop browsers.
These days you are more likely to find that an
TIME REQUIRED increasing number of your viewers are
30 minutes
accessing your blog via a mobile device or

friendly site
tablet. To that extent it is important to make sure
that your website is optimised to work on such
platforms. Taking the time to do so will not only
improve the experience of your audience but
also help ensure that they return to your blog in
WITH MORE AND MORE USERS ACCESSING THE INTERNET ON the future. Some themes (known as responsive
MOBILE DEVICES IT IS MORE IMPORTANT THAN EVER TO themes) can adapt the content accordingly
when a mobile browser is detected. Alternatively
ENSURE THAT YOUR SITE CAN STILL WORK PROPERLY WHEN there are plugins and code modifications that
VIEWED ON A SMALLER SCREEN can be applied to adjust your theme accordingly.

Taking the time to optimise your

website will not only improve the
experience of your audience but also
help ensure they keep returning

<left>
s
Youll find that a lot of
themes are catering
for mobile devices
straight out of the box
with no need for extra
tweaking by yourself

01Use responsive themes

One of the easiest ways to make your site
mobile friendly is to install a responsive WordPress
version there are always plugins that can be installed
to configure your website. Popular examples include
the WordPress Mobile Pack and WPTouch. Open the
posts look and add social networking links. There
is also a Pro version that opens up more themes
and extensions.
theme. Some of these are free while others come at a plugins menu from Dashboard, click on Add New
cost. These can make your website mobile friendly
without the need for getting under the hood and
messing around with code. In the Writr theme that were
and try the search term Mobile. Extra plugins
such as these are only available on self-WordPress
hosted blogs.
04Install a theme
Many themes are now equipped with a
responsive design which saves you the hassle of
using we can go into the customisation screen and setting things up yourself. If youve already made
toggle previews between desktop, tablet and
mobile devices. 03Using WPTouch
With WPTouch installed you can create a
mobile friendly theme within minutes with no need
your own theme however you can still apply some
CSS to make your theme more responsive. To
demonstrate this we will use the older Twenty

02Install a plugin
If your theme does not include a mobile
to know how to use CSS code. The settings for
WPTouch allow you to apply colours, select how your
Ten theme which is non-responsive. Most likely
you will need to install it first. Click on Appearance

86 WordPress Genius Guide

 WordPress
Genius Guide

<left>
s
When viewed on a mobile
device your content will adapt to
the screen size, videos will
appear in line and menus can
retract to save space
<top right>
s
More and more themes are
capable of being responsive
straight out of the box. In this
example we can see how our
blog will appear in varying
screen sizes
<bottom right>
s
Plugins such as WPTouch can
turn your blog into a mobile
friendly site with no need to
learn any new code

Top tip
001 @media only screen and (max-width: 640px) If youre unfamiliar
followed by Add New. Type Twenty Ten into the
search box and click install from the relevant {} with coding, there
search result. are plugins that
exist to make your
05 Create child theme
If this is going to be theme that you wish
07Adjusting the layout
These lines of code need to be placed
within the curly brackets at the end of the code from
theme mobile
adaptable. Including
to keep it might be worth considering installing a the previous step. Here we are setting the main frame
WPTouch.
child theme. That way if your current theme receives size to 400px and the container layer to match the
an update it wont overwrite the changes we are main frame size. These settings only take effect once
making over the next few steps. Steps for this can the screen size drops below 640px. To check if the
be found in the previous tutorial for customising code is working you can try resizing your desktop 5) and the image will be hidden on devices using a
a theme. browser window. smaller screen.

06Screen width limit

001 #access .menu- 001 #branding img {
Add this code to the very bottom of your 002 header,dimenu,#colophon,#branding,#main 002 display:none;
style.CSS file. This is a conditional styling code which #wrapper, #site-title {width:400px} 003 }
will instruct the browser to alter the display the website #container {width:100%;}
if the screen size or less than or equal to 640px.
Were using 640px as an arbitrary example, in truth
there are varying sizes for all kinds of smartphones 08 Remove header image
If your theme has a header image you may
09Resize header image
If you dont want to hide the header image
on your blog you can choose to resize it instead. Add
these days. Within the curly brackets we will insert wish to remove it altogether on smaller web browsers. the code above instead of the code from Step 7. In this
the instructions for the browser to follow for screen sizes Add this line to the code in your style.css file (again, example the code has set the image size to 100% of the
below 640px. somewhere between those two curly brackets from Step main frame (as in Step 6).

WordPress Genius Guide 87

 Themes

<left>
s
8JUIJO
OP
UJNF
BU
BMM
815PVDI
DBO
UVSO
ZPVS
CMPH
JOUP
B
NPCJMF
GSJFOEMZ
XFCTJUF
5IF
GSFF
WFSTJPO
BMMPXT
KVTU
FOPVHI
JO

UIF
XBZ
PG
PQUJPOT
UP
NBLF
JU
WJBCMF
<bottom>
s
*G
ZPV
XBOU
UP
GPMMPX
PVS
FYBNQMF
GPS
NBLJOH
ZPVS
PXO
SFTQPOTJWF
BEKVTUNFOUT
UIFO
UIF
5XFOUZ
5FO
UIFNF
JT
B
HPPE

QMBDF
UP
TUBSU

14Powered by Wordpress
001 #branding img { 005 width:100%;
002 width:100% 006 } The Twenty Ten theme also features a powered
003 } by WordPress tagline that appears along the bottom

10 Manage blog description

Your blog description may take up screen
12Adjust text placement
You can make adjustments to how your blog
content is positioned on the display. In the example
of the display. The code above moves it to the left of
the screen. If you want you can swap everything in the
brackets with display:none; this will remove the banner
space that youd rather use for actual content. Add above we have moved the margin of the post content line altogether.
this code and the description will be removed on layer 13px to the left. It may not sound like much but
smaller screen sizes. Alternatively you can also when it comes to working on a smaller screen every little 001 #site-generator {
reposition the description into a more optimal position. bit of space helps. 002 float:left;
To do this you will need to replace the display:none; 003 margin-top:5px;
line from the example above with another 001 .hentry{ 004 }
command. For example, to position it to the left 002 margin-left:13px;

15Resize lower border

add float:left; 003 }
The Twenty Ten theme has a black border line

13
001 #site-description{ Tidying up that runs across the bottom of the page. We will need
002 display:none; With the previous piece of code we have to make sure that it does not overrun the edge of the
003 } found that our content and sidebar have clashed over screen. The code above will take care of this problem by
the top of each other. This is when deciding what to resizing it to the same 100% value as used before.

11Setting more aspects

The code above refers to the navigation bar
size and the width of the content container. As per the
keep and what to rearrange comes into play. The
first section from the code above removes the sidebar
completely. The lower section resizes the footer section
001 #colophon {
002 width:100%;
previous steps were not setting a specific size for these of your blog. 003 }
two items. Instead we are instructing it to be the same

16Job done
size as the main frame (as per Step 8). 001 #primary{
002 display:none;} If youve made it this far well done! Your theme
001 #access{ 003 <blockquote> can now adapt to a smaller screen size. It may not be as
002 width:100%; 004 #footer{ comprehensive as a fully responsive theme but at least
003 } 005 width:100%; you now have a backup plan for browsers running on
004 #content{ 006 } smaller screen sizes.

88 WordPress Genius Guide

 WordPress
Genius Guide

Testing your
theme Top tip
Part of getting your mobile based
theme right is seeing what it will look If youre planning to
like on other platforms. This can be optimise your website
tricky if you dont have access to for mobile users, bear in
devices such as tablets. Fortunately mind the slower data
there are online tools that can connections they may
simulate the experience. Such be using. Try to avoid
examples include mobiletest.me or overloading pages.
responsinator.com. With these tools Compress images
you simply enter your WordPress before uploading
URL into the website and select a them.
device. You can also browse within
the simulators to see how your links
and embedded content will work.
There are also similar tools
embedded into Firefox and Chrome
which can simulate smaller screen
devices. With Firefox hold down
CTRL, SHIFT and M to activate the
feature. With Chrome press F12 and
select Emulation from the dev tool
menu (availability will depend on
whether it has been activated in dev
tool settings).

Bear in mind
the slower data
connections of <top>
s
You will need to upload your child theme
to your WordPress installation as per the
mobile users steps in our previous tutorial
<middle>
s
You can check to see if your theme is
becoming responsive by reducing your
browser window. On the left we can see
Top tip our theme resizing, on the right it is not
<bottom>
Part of optimising your s
The sidebar is crashing into our main
site for mobile is content. We either need to move it to the
streamlining the content bottom of the screen or hide it altogether

itself. Users viewing on a

mobile screen may be
inclined to skip through
long posts. Try using
bold headers and
paragraph breaks.

WordPress Genius Guide 89

 Themes

90 WordPress Genius Guide

 WordPress
Genius Guide

TRANSFORM HTML TO
WORDPRESS
We show you how to avoid the potential
pitfalls when transforming a HTML
mockup into a custom WordPress theme
THERE ARE MANY ways to go about designing a website in general, and a WordPress
theme in particular. A design idea can spark from something youve seen, or perhaps come
together in your mind based on your clients specifications. Either way, youll get an idea, youll
draw it out in your mind or using some sort of tool youll probably do a mockup or three,
and then start developing. Of course it usually isnt that simple. All those pesky clients have their own
ideas and want input, even though you know that you know best.
Some people think you should design in the browser, and while perhaps that might not be a universal
truth to subscribe to, it can be useful to employ it at times perhaps completely avoiding Photoshop all
together. Even among all the technology we have these days, it can be incredibly useful to do sketches
on paper before moving on to doing elements in something like Sketch. After that you can start cranking
out the markup to see how well it works in a web browser.
Thats what this is all about. Youve got an idea, a sketch, possibly a mockup, and then you write the
HTML and CSS to test everything out. Perhaps youll even use your HTML version as the client mockup,
making sure that the client actually sees what theyll get, or you do it as a part of your process. No
matter what the methods used are, should you employ the HTML mockup technique rather than just
jumping directly into coding a theme based on any PSD files, youll find that there is a lot of time to be
saved and several wins to be gained as well.
Considering this, this feature will show how to create a WordPress theme. Theres an idea,
there are sketches, there are thoughts and suggestions regarding mockups, traditional as well
as HTML based. Then theres taking an HTML mockup and creating a WordPress theme
out of it. Perhaps youve never done this before or youre a seasoned veteran who used
to and sell themes based on your PSD mockups. Either way, there might be
something in this methodology to help you improve your process.

WordPress Genius Guide 91

 Themes
STAGE 1: THE PLANNING

Failing to plan is planning to fail

To kick off a project, get a design idea, some sketches, and then a quick mockup. This will have all the first phase bases covered

Get some ideas colours, since we wont know what sort of background image thatll be used, but thats
a fair compromise. It does limit the use of colours on the site, especially concerning
Todays publishing landscape looks very different to how it did before blogs entered links, but the idea is to keep it muted and classy anyway. Besides, changing colours
the market. Blogs are more than personal diaries, and the concept is used on just with CSS in a child theme is simple enough, so its almost a moot point.
about every modern publication. With this, the possibility of doing a professional
publication powered by the best of the blogs has opened a lot of doors, and has given
us great sites such as The Loop (www.loopinsight.com) and SplatF (www.splatf.com).
These are modern publications using the best of the blogs, in a modern way.
Design mockups
This project will borrow heavily from this approach, but not forget about the For a client project it would be prudent to not only show off (and clear) sketches like
publishing landscapes past. In other words, the WordPress theme that youll end up these, but also design mockups. The beauty of doing an HTML version first is that
with will rely on typography and content first, but it wont be limited to personal nor it can be your mockup, and as a result, a lot more true than any Photoshop image
professional blogging as such. Not that any theme truly is of course, but themes can you might be presenting to your clients. With HTML, you can get the correct font
surely be more or less suitable for one or the other. rendering, transitional effects work as intended, the mockup will be viewed in a web
browser, and viewing it on mobile is a breeze.
Larger projects with a lot of different templates and design elements might benefit
Start sketching from having a mixture of traditional
mockups, as well as ones done in
This project started with some freehand sketches on paper, as it can be more suited HTML. You could benefit from using
to small and straightforward projects as this one. The absence of eraser tools and software that supports exporting to Top tip
layers can be a nuisance, but it can also be an asset since everything you do is HTML, which might mean youll get Be sure to clear the type
committed to paper. That fact might help you focus, but as always your mileage a near-finished HTML mockup to
will vary. work with. Do remember however,
of mockups youll deliver
The design is simple. There will be a strong yet thin frame that connects to the that exported HTML from software to your client beforehand.
various headings by underlining them. The typography is the visual element that can feature some truly awful markup, Some clients expect a
carries this design, but since WordPress supports custom backgrounds, and there is so dont always count on using that
the outer frame to part the content area with whatever background is chosen, well code. It is often best to simply write
certain type of delivery,
take that into account as well. This means that were being limited to near black border the HTML mockup code yourself, and you dont want to
making sure that, should the design get off on the
be cleared, youll have proper markup wrong foot.
Benefits of planning ahead that you can use for when the real
development gets going.
Clear for the client
Sometimes the client has a hard time visualising how a design will turn out. HTML
mockups put this to rest by inviting the client to click around in the web browser.

Get a head start

When the client approves the mockup, youll have a head start on the
development since a considerable bulk of markup and the stylesheet is ready. That
is, if you write the code yourself and dont rely on exports from mockup software.

Mobile makes sense

Looking at a traditional mockup and trying to understand how the design will
work on a mobile device is hard for most clients. Mobile design is driven by actual
interaction, so thats what youll want to show off. With a HTML mockup, you can.

HTML conveys visual effects

If your design employs any kind of effect, transition, or something flashy that
makes it pop just like the client wanted, theres no way to convey that in an image.

Its honest
Your client might love your Photoshop mockup, but when they look at it on their
Windows XP laptop, everything just looks dirty and jagged. If you show them a
HTML mockup, theyll see the real deal instead. <above> These simple sketches show the design in both a desktop and mobile state.
This will be the first phase in the process. Remember to make some notes.

92 WordPress Genius Guide

 WordPress
Genius Guide

STAGE 1: THE PLANNING

Mobile first Begin developing the bare bones of the project

by exploring the mobile platform first

Clear content However, there might be a menu that needs to be

handled, so add a specific mobile-only menu to the
The content templates on mobile will actually share mobile version, right at the very top.
a lot of their desktop counterparts, which is one of
the advantages of the cleaner, more content-focused
design seen around the web today. The site title will be
positioned up top, small but clear enough, and then well
White space
give the page title more room with large clear type, and Archive pages (pages listing several pieces of content),
centred. Therell be a line connecting to the sides, but have less in common with the desktop. Centre the titles,
well cut the avatar to save in http requests and space. cut the avatar, and rely on a simple line across the page.
The actual content is one column on the desktop site Providing ample white space between the posts will
as well, and the only things that differ between these help avoid any confusion.
two are the size of the font and the various scaling of The front pages top widget area needs dealing
images. Floating an image on the right-hand side wont with. Well keep the background but the widgets will be
look particularly good on mobile if the image covers stacked rather than side by side. This is something that
almost all the screen, so well size it down accordingly. needs considering for a lot of designs, and especially for
Other than that, its pretty straightforward. the devices between smartphones and tablets/desktop
The right-hand column is cut out altogether on the to stack or to scale down? For our purposes, well stack
mobile version so we wont have to worry about that. them as it mingles well with the content.

Why go mobile first?

By designing the mobile version first, youll get to the heart of things, and then you can add to
Top tip
the design as you scale up in screen size. This is also a good exercise to get to the gist of your
Horizontal menus tend
project, as only the most important things will make sense on mobile. to scale poorly, so many
sites rely on the
hamburger menu. Having
multiple menus is the
easiest way, hiding them
with media queries.
On the desktop
Scaling up content Archive
Scaling up from the mobile version is easy when youve decided to go The archive pages on desktop and tablets have an additional column
with a single-column design. Creating a site where the content is easy on the right-hand side. This column is only present on archive pages,
to read and with ample room for images is more important than adding which hopefully means that the end user will employ it accordingly,
clutter with a right-hand column that wont add anything important on by adding features that help the visitor find whatever it is that they
single pages. The side-column is of more use when youre searching for are looking for. Search fields, latest posts, menus and whatnot are
something, which is why it sticks around on archive pages. appropriate, Twitter and Facebook boxes might be okay, but the
The content page on desktop and tablet borrows all the features from general rule still applies: Do not add clutter.
the mobile version, but with some additional carefully chosen elements. The post listings differ a bit as well. The titles are underlined and
Theres an avatar, for example, which adds a bit of personality to the site, connected to the outer frame, and well implement the author avatar
and were connecting with the line under title concept by mingling the in listings too. For this site well let the site owner decide where the
avatar with the line that connects to the outer frame. Aside from this, posts should be cut, by inserting a Read More link using WordPresss
everything should be relatively straightforward. built-in feature for this but depending on your needs, an excerpt
The logo and site title are smaller on archives, which gives more room might just be a bit more prudent.
to the large strong page title. Well use a desktop-only top menu here, Finally, the front page has got a dedicated widget area position at
should the site owner have such needs. the top, made with two widgets in mind.

WordPress Genius Guide 93

 Themes
STAGE 2: THE TRANSFORMATION

Key WordPress components A WordPress theme is made up of

individual parts that all have a place

The menu Front page widgets

WordPress has a handy built-in menu The front page features a widget area
interface that well make good use below the header, which of course
of. As always, you should use the can feature both text and a logo. This
default features whenever possible area is meant to host two widgets, but
because it makes the theme a lot it can display more should the user
more futureproof. Since horizontal require it. When viewing the site on the
menus are a nuisance on mobile, desktop, the widgets sit side by side,
well have two menus: one for but on lower resolutions theyll stack
desktop and one for mobile, showing up instead, taking up the full width.
the appropriate one via CSS. In this This is the only important thing worth
case we wont do a hamburger or remembering when populating this
dropdown menu for mobile, but a area with widgets. In the HTML mockup
site with a lot of sections would likely there are only two text blocks here, but
need something like that. the widgets could be used for anything
perhaps a cover and blurb pointing to
your latest book?

The site title

Some sites will find it perfectly
reasonable to have a text-only title (and
a tagline), but most will probably want
to have a logo of some kind. To please Use the
both camps, do a check for a header
image (a standard WordPress feature default features
that can be activated in the theme)
and if there is one it can be outputted when possible to
with that, and no text title or tagline.
If no header image is uploaded, then make themes
just display the site title and tagline as
entered in the WordPress settings. futureproof

The post flow

While the HTML mockup depicts the
front page, the method of displaying
the river of posts will be the same in The side column
all archive pages, including categories, The side column on the right-hand side
tags and search results. Its a pretty will only be present on archive pages.
basic flow, chronological with the Much like the front-page widget area,
newest addition up top, which well this consists of widgets only. Unlike the
output using a standard loop. For this front page widgets, the side column
design there is no support for post wont be visible on smaller devices,
formats (such as asides, dedicated meaning that you shouldnt rely on it
video posts, and so on), but it would for important things. To keep things
be a small feat to add them and make interesting, and possibly problematic
them stand out, thanks to the strong due to floating issues, the sidebar is
titles for the standard posts. actually floating to the right, with the
posts wrapping around it. You can
fetch it using the standard get_sidebar()
template tag.

94 WordPress Genius Guide

 WordPress
Genius Guide

STAGE 2: THE TRANSFORMATION

Essential elements Side column

The stylesheet, functions file, header and footer are key inclusions The sidebar.php file
There is a great template tag called get_sidebar(),

Adding style to the public. This means weve gotten started, with a
folder called woi, and a copy of our style.css file, with the
which also includes sidebar.php for you. This
template tag will go into the archive templates
(including search), which are the only ones
The stylesheet, or style.css, is one of the mandatory files necessary theme declaration added up top. displaying the side column.
in a WordPress theme. Its not so different from regular The sidebar.php file consists only of the
stylesheets but for the heading, which consists of every 001 /*
minimal markup needed for outputting the
detail needed for WordPress to understand that this is 002 Theme Name: Words Of Importance
widgets in the side-column widget area, which
in fact a theme, and not just some random collection of 003 Theme URI: http://tdh.me/wordpress/
was registered in functions.php. You can do that
files. If you want, it is possible to have several stylesheets 004 Description: A clean theme meant for
with dynamic_sidebar(), and by passing the ID of
and load them as needed, but as always this should be online publishing, what else?
the widget area wanted, which is side-column,
carefully considered since it means additional requests 005 Version: 1.0
again as registered in functions.php. This means
and potentially longer loading times. 006 Author: Thord Daniel Hedengren
that the sidebar.php is pretty straightforward
This theme is called Words Of Importance, because 007 Author URI: http://tdh.me
to say the least. Note the ID for the section tag,
hopefully thats what itll be used for when released 008 */
which is hidden on smaller resolutions, and not
displaying any sidebar no matter what.

Get functional $args );

008 // Register menus
001 <section id=sidebar>
002 <ul>
The functions.php file is the place where you add 009 register_nav_menu( desktop-menu, __( 003 <?php dynamic_sidebar( side
support for various things in your theme, as well as add Desktop Menu, woi ) ); -column ); ?>
any other theme-related functions you might want. 010 register_nav_menu( mobile-menu, __( 004 </ul>
Common things that functions.php should be used for Mobile Menu, woi ) ); 005 </section><!-- #sidebar ends -->
include activating support for custom header images 011 }
and backgrounds, registering menus, and of course 012 add_action( after_setup_theme, woi_
declaring the widget areas. We need to do all that, and setup );
other than the widget areas well do it by adding the
necessary code to a theme setup function. Theme setup is added to the after_setup_theme action,
whereas the same for our two widget areas (the front-
Top tip
001 function woi_setup() { page widgets and the side-column widgets) will be Make sure that
002 // Add RSS feed links to <head> added to the widgets_init action. Get the full code from whatever feature you
003 add_theme_support( automatic-feed-links
004 );
the website.
add using functions.php
005 // Add custom background support 001 function woi_widgets_init() { isnt crucial when switching
006 add_custom_background(); 002 // Front page widgets themes. If your feature
007 add_theme_support( custom-header, 003 register_sidebar( array(
should carry across
themes, then it should be
in a plugin instead.

Header and footer Including header.php and footer.php

Breaking out the header and footer from the HTML While there are a number of things youll have to This only adds the support for custom headers,
mockup is mostly a matter of simply copying and change (and should add) when creating the header. youll need to actually output it in your header.
pasting it over. The only thing you absolutely must php file from the HTML mockup, two things stand out php file as well. Since the site should work and look
remember to have if you want your theme to function more than others. First, theres the title, as in the title good without a header image as well, a check to see
properly in all instances, is the wp_head() template tag title, which should change depending on where on whether there is one or not needs to be done, and
tag just before the closing head tag. There are some the site you are. then act upon that.
things that usually need to be swapped out, such as Next, theres the site title/header image feature. Compared to all this, the footer.php template is
every place where the title of the page appears (be it A header image needs uploading, which means almost ridiculously simple. The only thing you truly
the site title or just the page title) should be dynamic having to add it to the woi_setup() function created need, except your already present markup, is the
for example. Another aspect that is usually involved is in functions.php. The code will add the support for wp_footer() tag, that wraps up WordPress, much as
the menu, including the one created in functions.php, custom header images, allow them to be just about wp_head() kicked it off. Put the wp_footer() template
as well as custom headers. any size, and remove the site title output when used. tag just before the closing body tag and youre done.

WordPress Genius Guide 95

 Themes
STAGE 2: THE TRANSFORMATION

Posts and pages Whats the

Displaying the actual content is a key element for most sites.
With WordPress, this generally involves working across the
various posts and pages
difference between
Posts and pages have a lot in common, and although most themes will have separate
templates for these, they rarely differ all that much. First of all, as with every template
posts and pages?
Posts and pages arent so different and/or tags (which in turn are
that deals with the things between the header and footer, you need to include said from each other. They are both taxonomies, and yes, you can add
header and footer. This is done with the get_header() and get_footer() template tags. post types, and you can add more your own). Pages on the other hand,
Second, you need the loop to output the appropriate content. This would be different of those yourself using code or a are meant as more static things
posts or pages just one, depending on the situation. Here the templates for posts plug-in. The standard posts and that wont show up in any category
and pages are almost identical, consisting of the loop, and then an inclusion of another pages differ from each other by the archive. In short, posts are the
template using get_template_part(), and calling for content-single.php (for posts) way that they can be used. Posts are updates and news on your site, while
and content-page.php (for pages). These templates consist the actual output of the meant to hold continued updates, pages are the About Us and Contact
content, but the loop is whats telling WordPress to go look for content. sometimes sorted into categories information parts.
The page.php template is used for pages, and single.php for posts. The former is
reprinted here. Remember that there is no side column in single posts and pages in
this design, so the get_sidebar() template tag is absent, and not including the sidebar.
The loop is used whenever content should be outputted, which means that youll 006 <h1 class=entry-title-single>
see this again when you get to the archives. 007 <?php the_title(); ?>
The actual output is in the content-X.php files. This is much like the HTML markup 008 </h1>
you wrote for your mockup, but with the dynamic parts swapped out for various 009 <div class=avatar-single><?php echo get_avatar( get_the_author_
template tags. This includes the post/page title, categories and tags if such are to be meta( user_email ), $size = 96 ); ?></div>
used and displayed, the author, and so on as well as the actual content of course. 010 </header>
Most important will be the_title() and the_content(), for title and content, but adding 011 <section class=entry-content>
post_class() to your wrapping element (an article tag in our case) is also important if 012 <?php the_content(); ?>
you want some default CSS classes added. For reference, see the content-single.php 013 <?php wp_link_pages( array( before => <div class=page-
code, which is an adaptation of the HTML mockup created. link> . __( Pages:, woi ), after => </div> ) ); ?>
014 </section>
015 </article>

All of these tags that are used to output titles, dates and whatnot are integral to the site
and at the heart of WordPress, because these are the ones that manage to actually
deliver the all-important content to your site visitors. Theres a template tag for just
about anything youll want to output, so if youre a bit uncertain, just have a quick
search for it in the WordPress Codex (codex.wordpress.org).

Make a comment
Comments are worthy of a specific mention. There used to be a time when every
site should have a comment form, but today with the widespread popularity of social
media, its obviously not that clear. A lot of popular publications, mostly niche ones,
are cutting the comment area all together in favour of communication solely through
social media. However, theres nothing that says that you cant do both.
If thats not enough, fewer sites rely on the built-in comment functionality in
WordPress, instead relying on external services such as Disqus and Facebook
comments that provide great functionality and are easy to use. These are all easy
<above> A simple post consisting of the ever-important lorem ipsum copy note how to implement as well, especially if you include the comments_template() tag in your
easily the text is lifted through imagery theme, because plug-ins can add something like Disqus through that.
Besides adding the comments_template() tag to your templates for single posts
and possibly pages, you can either create a comments.php template file with the
001 <article id=post-<?php the_ID(); ?> <?php post_class(); ?>> necessary markup for your comments, or just use a function in functions.php. For
002 <header class=entry-header> your copy-paste needs, and since you most likely will end up using Disqus anyway,
003 <p class=postmeta postmeta-single> the function for doing so can be found in the full code. Naturally, youll need to add
004 <span class=postmeta-date><?php the_date(); ?></span> &bull; the appropriate stylings to your stylesheet to make this look any good, and you may
<span class=postmeta-section><?php the_category( ); ?></span> want to consider queueing the stock comment JavaScript as well. You can find more
005 </p> information on the queueing scripts in the WordPress codex: bit.ly/9seNB2.

96 WordPress Genius Guide

96 ____________________________________________________________________feature
 WordPress
Genius Guide

STAGE 3: THE FINISHED ARTICLE

Front Page Welcome to the site, with front page-only widgets,

controlled by the home.php template file
Archives
Taking control of post listings pertaining
to specific categories or tags
Archives in WordPress usually means category,
tag, or even date-based archives. There are
dedicated template files for all of these, should
you want precise control over tag archives (tag.
php) or category archives (category.php), but
chances are you think all these should look and
feel the same. Then you can use archive.php
instead, which is the fallback for all kinds
of archives.
Basically, the archive.php template file consists
of a heading (the visitor needs to know where
they are on the site after all), what kind of archive
it is that they are viewing, and a loop that outputs
the archive contents as defined in the read
settings in WordPress.

Search
The search.php template is pretty handy if you
want to have a little more control of the search
result. Its basically an archive when the search
returns true, but when its not, you need to tell the
visitor something. The easiest way to do this is
<above> Add an
image, change the to add an if clause to your loop, and then being
background if you like, able to complement it with an else thats only
and get publishing its true when theres nothing to output. Also, note
as simple as that
the echo get_search_query() part, that will tell the
visitor what they searched for.

Here the front page is basically the archive template, tweak and to take care of, but those are a bit outside the
with an added widget area positioned at the top. scope of taking a simple HTML mockup and converting
404
The 404 template is one of the simplest, and
Through CSS, the site title, assuming you stick with it into a WordPress theme. One thing you should notice
hardest, ones to create. Its a template called 404.
just the text version, is larger on the front page. This is is that there are a lot of little details to take care of to
php, and its usually almost identical to a page.php
thanks to that the body_class() tag, which gives body make your WordPress theme complete, something that
template. The difference is, the message delivered
proper CSS classes for example. the front page is is easy to forget about. Remember to make sure you
when someone gets to a 404 Page Not Found
conveniently named home. leave time to address these little touches as well, before
page on the site is a static one, that (usually)
The final step for this theme would be to find out leaving a quote to your client.
resides in the 404.php template file.
where all the kinks are and adjust them, add all the If after reading this feature you are interested in
In the case of this theme, this file was created
necessary classes for image alignment and such, as well following the development for the Words Of Importance
by merging page.php and content-page.php
as run it through the Theme Check plug-in (wordpress. theme, then be sure to check in on tdh.me/wordpress
swapping out all the dynamic titles to a hard-
org/plugins/theme-check). There are some things to for links to the most recently updated version.
coded message.

Fallback
Where next? A required template file in WordPress themes is
index.php. The idea is that this is the themes last
line of defence, the template file thatll be used
The HTML mockup is now a WordPress theme, ready if no other file fits. In other words, if the theme
to use on just about any self-hosted WordPress install. Now what? doesnt have a category.php file, and WordPress
wants to render a category archive, then the
Like most themes, there are things to do. This particular plug-ins you use, some page templates for your specific
system will look for others. First itll check for
theme would do well to receive a favicon and an needs, and so on. Maybe you just dont like some minor
archive.php, the fallback for archives, then itll go
Apple touch icon, and before you launch anything you things, which could be sorted out with a child theme, or
back to index.php, the final fallback. Treat index.
should obviously have web analytics software in place. maybe you just want to fork the theme.
php that way, and make sure it returns something.
Then theres the obvious development points, such Theres always things to do, change and develop with
as featured images for the posts, individual styling for WordPress themes, for some mysterious reason. Enjoy.

WordPress Genius Guide 97

feature_____________________________________________________________________ 97
Plugins
Extend your blogs functions
100 Pro guide to Plugins
Get the inside scoop on using plugins
from industry experts

106 Edit widgets and plugins

Change the plugins and widgets you are
using on your site

110 Protect your blog

from spam
Stop spam comments from making their
way onto your blog wth Akismet

114 Increase your site visits

with SEO
Use Search Engine Optimisation to get
more hits for your site

118 Add a social author box

Give your site authors a friendly face with
a social author box

120 Build a WordPress

slideshow
Showcase your pictures in style with
a slideshow

124 Schedule your blog posts

Set a timer for your blog posts with the
Editorial Calendar to view your flow

There are
thousands of
plugins available
to be installed onto
your theme and
implemented
within your site
98 WordPress Genius Guide
 WordPress
Genius Guide

WordPress Genius Guide 99

 Plugins

Pro guide to

WordPress
plugins
100 WordPress Genius Guide
DISCOVER SOME OF THE BEST
ADD-ONS, AS SELECTED BY
INDUSTRY EXPERTS
 WordPress
Genius Guide

<inset> Beef up your edit

screens with bespoke
components for more flexibility

Take content management to the How to choose

next level the right plugin
Advanced Custom Fields by Elliot
Condon
advancedcustomfields.com
A great example for using the Advanced Custom
Fields plugin would be to create a manually
manageable Related Articles or Related Content area
01 Do your research
Unfortunately, WordPress plugins dont
always play nice with each other. When selecting a
The Advanced Custom Fields plugin seriously beefs up within one of your template files. Youd create this using plugin, you should always check the WordPress
your WordPress edit screens. With fields ranging from the Post Object field, which displays a selectable list of plugin directory for information such as
simple text and image inputs, a support network of posts from all, or specific post types that your site has compatibility issues, last updated, number of active
users and a documentation site that makes even the in place. This gives webmasters additional options when installs and user ratings.
most advanced task effortless, like the go-to Swiss Army creating pages in order to cross-promote articles,
knife of WordPress page management.
Once installed, how to utilise the power of Advanced
Custom Fields becomes apparent after setting up your
products or just about any type of content. When called
upon, WordPress default functions can be introduced
into the code of the Post Object, such as get_the_post_
02 Set up a testing
environment
If you are using a particularly high number of
first field group. Telling the field group which page thumbnail or the_title to make the list of posts more plugins on your site, or are simply concerned by the
template you want it to appear on, or which custom visually appealing to site visitors. You can also include lack of support for a particular plugin, it makes
post type you would like it to appear within, is easy. And any of the Advanced Custom Fields field data that has perfect sense to set up a duplicate of your site and
although Advanced Custom Fields is built specifically been added to the edit screen of a post type template. then just test the hell out of it. This is particularly
for developers to create next-level WordPress websites Advanced Custom Fields will open up a whole new useful when you are adding plugins to a live client
for their clients, the usability of the fields in WordPress corridor of opportunity for your WordPress builds, one site because it can save you from any potential
CMS feel as familiar as the existing WordPress user that your clients and development team will want to banana skins.
interface. This will ensure webmasters have an easy explore again and again.
time using the newly added content boxes.
Including Advanced Custom Fields functions in your
template files couldnt be simpler. Create a group, add
ALTERNATIVE PLUGIN 03 Send a support ticket
Well, why not? Sending a support ticket to
the plugin developer could give you an idea of just
some fields, then add functions such as <?php the_
Simple Fields how long the developer takes to respond to any
simple-fields.com
field(second_wysiwyg); ?> to your template files potential future issues. If you dont get a response,
wherever you want the new content to appear. Style the Simple Fields is a slightly less in-depth solution to or if the response you do get seems a little lax, it
custom fields. The plugin offers an array of options to
resulting functions by wrapping them in the same CSS extend the WordPress edit screens functionality with might be better to leave it alone because it could
classes that you have created within your websites a simple, easy-to-use interface. indicate that support isnt there.
stylesheet it really is mind-blowingly easy.

WordPress Genius Guide 101

 Plugins

Back up now
SOMETIMES THE WORST happens, and you just
wont have time to fix it. Adding too many
plugins can turn your WordPress build into a
potential game of Jenga, and sometimes the
white screen of death will rear its ugly head.
Adding a plugin? Back it up first. Updating the
theme? Back it up first. Updating WordPress to
the latest version? Back it up first. Always,
always, always back up your WordPress site
before changing anything to do with your sites
functionality, database, theme or base files.
The Duplicator plugin, found at wordpress.
org/plugins/duplicator, is a rapid-fire way to
generate a quick launching backup of all
WordPress files and your database, in a
downloadable, neatly compressed ZIP file. The
plugins very own easy-to-use interface and
download facility allow you to create a zipped
up Archive copy of your entire site and
database as well as an installer.php file that is
uploaded to your hosting accounts root folder,
along with the zipped-up back-up copy, that
installs your website to its previous location
without any fuss or hassle.
The Duplicator plugin is also great for
migrating your site to a new hosting account or
even to a new domain. When using the installer.
php file to run the installation, you can specify a
new URL for your site. Now, once youve
deployed the backup to the new hosting
account, all URLs found within the site will be
automatically updated to the new URL, meaning
all of the database data has been edited without
Add multi-language support
having to go anywhere near phpMyAdmin.
Whats more, it then gives you a handy list of
WordPress Multi Language from over 40 initial languages with the added ability to
things to check once the installation is wpml.org add your own custom language variants. An out-of-the-
successfully complete. WordPress Multi Language is an easy-to-use translation box language picker can be added to your header or
If you take nothing else from this article, this
management plugin built by a translation company. The sidebar via the plugins settings area, or you can choose
plugin should become your go-to tool for
backing up your WordPress site. plugin boasts some incredible features that doesnt just to create your own and add it to your themes template
include easy management of languages, its an all-in files where you want the picker to appear.

collection of language management tools built to work You also have the choice of how to display your
within a single WordPress install. Everything from multilingual content, such as using a different domain
Updating menus to footer credits can be translated into the per language, for example myblog.co.uk, myblog.de or
language that you want with ease with built-in support myblog.fr and so on, by using subdomains, like en.
WordPress to the latest for custom themes and even other plugins. myblog.com, de.myblog.com or fr.myblog.com, or by
The plugin comes with a great set-up wizard that using the default of keeping the multiple languages
version? Always back

takes you through the whole initial setup. Once you within the same domain.
have selected your base language, adding new Once youve selected your chosen languages, you
it up first languages can be done at the click of a button, select can then simply navigate to your pages edit screen

Elliot Condon Chris Spooner Speckyboy Responsive LabZip

@elliotcondon @chrisspooner @speckyboy Design @WPLabZip
The developer behind the A self-proclaimed maker of Speckyboy is an online @RWD The perfect WordPress
Advanced Custom Fields set pretty pictures, Chris magazine run by Paul RWD has everything you Twitter account. Its an
of plugins, Elliot Condon is Spooner offers a great Andrew, who is based in need to know about Aladdins cave of all kinds of
also a user interface insight into the life of a Scotland. Speckyboy is a responsive web web goodies. From
specialist. Follow Elliots freelancer and gives away superb resource for web development. Great for resources to tutorials,
social media and never many time-saving tips for design and development polishing up your plugins and themes to well,
stray far from the latest ACF the world of graphic and tips, tricks and general techniques or looking for just about anything. All of
features sneak-peeks, web design. Perfect for inspiration, from CSS to new ways to customise a this is of course all in one
updates, news, server seasoned designers and fonts and everything else plugin to ensure it fits in place too. Make sure you
downtimes and fixes. developers alike. thats in-between. with the mobile world. give them a follow.

102 WordPress Genius Guide

 WordPress
Genius Guide

where you will find WPML has added some extra

settings to your list of pages. As well as displaying
published pages and drafts, you will also be able to see
how many pages you have amongst your selected
languages, which is a great way to see a quick overview
of how many of your master languages pages have
already been converted into your desired language.
WPML also adds a great visual helper in the form of
country flag images when you click into the posts or
pages menu within the backend, and from there you
can add content for each of your chosen languages as
you probably would do for any other page or post.
WPML offers a unique way for you to manage your
translation team, with the ability to turn WordPress
users into translators. These translators can then be
assigned specific pages and posts to translate and a
handy overview of all translations and translators can
be easily viewed. Here you can see the status of each
translation assigned to a specific translator the whole
management process is as streamlined as it gets.
WPML also offers a vast amount of support for
commerce sites using WooCommerce and this includes
adding translation options for your products, related
products, sales, promotions, cart, checkout and even
confirmation emails.
If youre having some trouble generating your Create custom post types inside
translations, WPML has the perfect answer in the form
of an optional connection to a paid-for translation
service that is built right into the plugin. From the
WordPress quickly
translation dashboard, you can send content for Custom Post Type UI up post types fail-safe. Code created by CPT UI can also
translation to your chosen languages and, when bit.ly/1eCYM8P be copied into your functions.php file for sound and
complete, itll appear right back in your edit pages Custom Post Type UI offers a great way to create stable creation of custom post types when releasing a
ready to be published straight onto your site. custom post types and taxonomies from inside the theme to market.
WordPress CMS admin area. Say you need a custom
ALTERNATIVE PLUGIN post type called Movies, and you need to add some ALTERNATIVE PLUGIN
taxonomies for actors, year, rating and genre well this
qTranslate Types
qianqin.de/qtranslate can all be done in seconds with CPT UI. Lots of options wordpress.org/plugins/types
are offered up for customisation of post types,
QTranslate is another multilanguage WordPress including: custom slug, hierarchical (true/false) and Types is a great way to manage custom post types
plugin. With translations all kept in the same edit page and taxonomies with the benefit of handling basic
it can create more clunky-looking edit screens, but it customisation of the display labels within the WordPress custom fields too. Types lets you add extra image
has many features of a paid-for plugin. backend. The CPT UI plugin can also be used to import fields and text areas within your custom post types.
and export existing custom post types, making backing

Chris Woodley
Lead developer
Forme Creative
02 MemberPress
memberpress.com
Need to create a membership site with paid-for content
04 WordPress SEO
yoast.com/wordpress/plugins
The only SEO tools you will need that comes with a
formecreative.co.uk
and integrated payment gateways? Then MemberPress traffic light scoring system. This plugin has a host of
HERE ARE FIVE plugins I simply could not do is the plugin that you need. It is ideal for services selling extremely useful features including content analysis
without. These plugins have become as important to digital downloads. functionality, assistance in writing better content, the
my daily workflow as Illustrator, Photoshop and option to automatically generate XML sitemaps and
Dreamweaver and are an integral part of my
Wordpress backend landscape. 03 TablePress
tablepress.org
remove code bloat.

01 Essential Grids
essential.themepunch.com
Creating tables in WordPress is not simple. It involves
adding custom code and is time-consuming. Who wants
to do that? This is a free plugin that enables users to
05 Contact Form 7
contactform7.com
This is the hassle-free option for creating simple
Highly customisable grid builder for displaying posts create and manage tables easily and quickly. A table can contact forms for file upload. Its a flexible and
with uber modern templates. Great for creating include different types of data and there is even the powerful plugin that is easy to use. Create a form, pick
portfolios, product sliders, galleries and more. option to add formulae. options and copy the shortcode to a post.

WordPress Genius Guide 103

 Plugins

<inset> The new

MPLSystems website
uses the Slider Get responsive-
ready sliders
Revolution plugin for its
home page slider, with
a second fullscreen
slider optimised for
mobile view
Slider Revolution
revolution.themepunch.com
The Slider Revolution plugin gives you an ocean of
customisation options for website sliders. With options
like fullscreen display, responsive-ready (out-of-the-box)
transition effects and custom animations, youll never
see the same transition twice.
A unique feature of the Slider Revolution plugin is its
Slide Template option. The slides can then be easily
created on the fly by using information found within
posts or custom post types and presented in a prebuilt
or custom-made template.
Slider Revolution supports YouTube and Vimeo video
content and image-based content within the same slide.
JQuery transitions, multiple layers, Google Fonts,
custom CSS and many more great features have helped
make Slider Revolution the most popular slider plugin
on Envato as well as being extremely popular among
theme developers.
With its application-like interface it does take some
getting used to you wouldnt want to hand this plugin
over to a less-than tech savvy client. However, things
like the plugins drag-and-drop caption placement
functionality and the slide duplication feature mean that
once you have finally settled on a layout, creating new
slides is a breeze.

ALTERNATIVE PLUGIN

WooSlider
bit.ly/1ItYDAV
WooSlider is a simple and straightforward alternative
to Slider Revolution. WooSlider offers a slimmed-
down set of functionality with the added benefit of
Instagram slides and a carousel slideshow option.

104 WordPress Genius Guide

 WordPress
Genius Guide

Explore these must-know

plugins & resources

PLUGIN PLUGIN

WP Maintenance Mode Max Mega Menu

bit.ly/1zFgcHT maxmegamenu.com

This is a simple, yet amazingly effective Max Mega Menu is a ready-made mega
WordPress plugin. WP Maintenance menu replacement for your WordPress
Mode is perfect for new sites not yet theme. Just drop it in and youre good to
launched with its timer count-down go. It uses a simple column system in
feature and coming-soon splash page. order to help create user-friendly and
Its also perfect for instances when you easy-to-navigate mega menus. With easy
are working on a live site if you dont CSS editing you can use this plugin and
want your visitors to see your half- customise it to complement or match
finished masterpiece. any brand or colour scheme.

PLUGIN

BuddyPress
buddypress.org

BuddyPress is the ultimate social network plugin for WordPress. With groups, private PLUGIN RESOURCE
messaging, activity streams and notifications to mention just some of the great
features this plugin offers you really dont need any other social network plugin in WooCommerce Lynda.com
order to get up and running, for any type of subject, for any number of members. bit.ly/1rUkc7M lynda.com

Possibly the best-known WordPress From Adobe Certified Experts to

plugin, its power matches that of world-renowned coding gurus, lynda.
WordPress itself. Its ecommerce out of com is the type of online video tutorial
the box, giving developers and store resource where the knowledge of and
owners total control over their online teachings from the contributors is
store. With over 29 per cent of market second to none. The information found
share, WooCommerce is now the most within it can be trusted to be accurate,
popular ecommerce platform. up to date and reliable.

PLUGIN RESOURCE

W3 Total Cache Template Tag

bit.ly/1K16aUr Reference Guide
bit.ly/1OQFFW9
Everybody wants a faster and more
efficient WordPress install. Why? Because This site, produced by DBS Interactive, a
it engages more visitors and of course US-based digital agency, is a
Google likes it as well. A faster site equals comprehensive reference guide for
a better ranking. Ever since Googles WordPress template tags listed in an PLUGIN RESOURCE
recent algorithm upgrade speed has easy-to-follow format. Whats included in
become a very important factor in its guide? Author tags, bookmark tags, WP Smush WordPress.org
getting a good ranking. The W3 Total category tags, comment tags, date & bit.ly/1DcZmpB wordpress.org
Cache is one of the most widely used time tags, Include tags, post tags and
speed and performance WordPress much more. The beauty of the site is that WP Smush is a superpower image Perhaps a little obvious, but constantly
plugins. W3 Total Cache is a complete each tag is displayed inside a collapsible optimising tool for your site. Scan and overlooked, WordPress.org is where the
framework that improves site panel. All you need to do is click the reduce your image file sizes upon developers responsible for bringing us
performance by up to ten times by desired tag and a host of information upload, reduce load times, keep those WordPress go to hang out. You can
combining a series of minifying tasks appears. This will give you a brief high-quality visuals and make search learn about every function, find out
and caching processes that dramatically overview of the tag, the code in action engines love your site even more. WP about the most popular themes and get
improve the overall user experience. In and what each element of the code Smush is a worthy inclusion for each and involved yourself by contributing
addition it also offers transparent content means. If you need to, simply copy and every WordPress website that you end towards the WP core or by joining the
delivery network (CDN) integration. paste the code and modify accordingly. up building. support team.

WordPress Genius Guide 105

 Plugins

Edit your
WIDGETS CAN PLAY a useful role
TUTORIAL within your website and they can be
OBJECTIVE
Make edits to widgets and
easily applied to your blog via the
plugins that feature on your WordPress Dashboard. They can be
WordPress blog

widgets &
used to add a search function, list recent posts
TIME REQUIRED and display your categories. Many themes tend
40 minutes to use the same styling rules for the widgets
within a given section. If you have a specific look

plugins
to your website you may wish to make the
widgets a bit more customised. To achieve this
you can edit the style.css file within your
WordPress installation and have it change the
appearance of your widgets.
Its also possible to edit the plugins that you
WIDGETS AND PLUGINS ARE GREAT EXTRA FEATURES TO ADD have installed. Depending on the edits you are
TO YOUR SITE. UNFORTUNATELY, THEY MAY NOT ALWAYS FIT making, this is a process that should not be
THE AESTHETICS OF YOUR DESIGN. THATS WHERE A LITTLE taken lightly. If you are not careful you could
destabilise the security of the installed plugin.
TWEAKING CAN HELP

Widgets play a useful role within

your website. They can be used to
add a search function, list recent
posts and display your categories

<left>
s
Development tools
built into browsers
such as Chrome,
Firefox and Safari are a
useful way of locating
the code required for
working on widgets

01 Select a widget
In order to edit a widget we will need
to decide upon a widget to edit. Aside from selecting
02 Locate information
Here we are looking to modify the text within
the prologue section of our website. We need to find the
03 Create the code
Above is the code that will make the
adjustments to the text in the prologue box. Weve
the widget, we will also need to find out the name specific parts of the webpage code that relates to this set our target, in this case it is #text-2 and the changes
of the widget within the CSS code so we know how section. In this case, the text that resides within widgets are within the curly brackets. In this case it will change
to refer to it in our own lines of code. An easy way are given a specific ID (usually text- followed by a number). the colour of the text to green and display all of the text
to do this is by opening a browser such as Firefox, In our case it is #text-2 so we need to apply that in bold.
Chrome or Safari and using the develop tools to reference number within our code. When it comes to
track down the name that we require on the the examples in the following steps you will need to 001 #text-2 {
internet. This is done by right clicking on the location substitute text-2 with your own reference number, or 002 color: #58D948;
you want to inspect and selecting the relevant else the edits that you make wont apply to your 003 font-weight: bold;
Developer option. desired widget. 004 }

106 WordPress Genius Guide

 WordPress
Genius Guide

<top left>
s
8JUI
B
GFX
$44
DPEF
FEJUT
XF

DBO
UBLF
B
XJEHFU
GSPN
MPPL
B
CJU

QMBJO
UP
TPNFUIJOH
UIBU
MPPLT
B

CJU
NPSF
TUZMJTFE
<bottom left>
s
)FSF
XF
BSF
VTJOH
'JSFGPY

UP
JOTQFDU
UIF
XFCQBHF

FMFNFOUT
8F
IBWF
SJHIU
DMJDLFE

PO
UIF
1SPMPHVF
TFDUJPO
GSPN

IFSF
XFMM
TFMFDU
UIF
*OTQFDU

&MFNFOU
PQUJPO
<bottom middle>
s
5IF
%FWFMPQFS
5PPM
IBT

IJHIMJHIUFE
CPUI
UIF
DPEF
JO
UIF

MPXFS
TFDUJPO
PG
UIF
TDSFFO
BT

XFMM
BT
UIF
TFDUJPO
PO
UIF

XFCQBHF
UIBU
XF
XBOU
UP
FEJU
<bottom right>
s
:PV
DBO
BMUFS
UIF
4UZMFDTT
JMF

XJUIJO
8PSE1SFTT
BOE
VQEBUF
JU

GSPN
UIF
%BTICPBSE
:PV
DBO

BMTP
VTF
BO
'51
VQMPBEFS

Top tip
5IJT
BMNPTU
HPFT
XJUIPVU

04 Add the code 011 #text-2 { TBZJOH
CVU
JUT
BMXBZT
XPSUI

Now we know what changes we are making 012 color: #58D948; CSJOHJOH
VQ
4FFJOH
BT
XFSF

we need to add them to the Style.css file of our child 013 font-weight: bold; UJOLFSJOH
XJUI
DPEF
JUT
BMXBZT

theme. Above is how the entire section of text should 014 } XPSUI
LFFQJOH
B
CBDL
VQ
PG

look within the file (although the upper section relating XIBU
ZPVWF
DIBOHFE
PS
FEJUFE

to the theme will contain your own specific theme
details). Note that the changes to the text have been
added below the @import line. Either we can edit the
05 Check the difference
By opening our blog in another web
browser we can see that the font has indeed
:PVMM
OFWFS
LOPX
XIFO
ZPV

NBZ
OFFE
UP
UBLF
B

TUFQ
CBDL
file locally and upload it via FTP or open Appearance> changed colour and style. Everything else about the
Editor from the WordPress Dashboard and add the widgets stays the same as per the theme. So now we
code below the @import line. know how to make an edit to the widget. From here its 001 #text-2 {
simply a matter of deciding on what else we would like 002 border: 3px solid #000000;
001 /* to do. 003 }
002 Theme Name: Child Theme
003 Theme URI: http://mysite.com/
004 Description: This is my custom child
theme.
06 Add a border
In the code above we have removed the
green font and bold characteristics. In its place we have
07 Change
colour
background
Here we have used the background colour
005 Author: My Name inserted a border command. This will generate a border command to change the widget background. In this
006 'Author URI: http://mysite.com/ around the widget that is 3px in thickness. The solid example it now a light purple colour. Its a good
007 Template: twentyten command will create a border consisting of a solid line example of how you can apply a widget but still make it
008 'Version: 1.0 (alternatives include dotted, dashed, groove, ridge and blend with the design of your blog. You can also use
009 */ more). The final part, the #000000, refers to the colour. normal colour terms such as purple rather than
010 @import url('../twentyten/style.css'); In this case, black. hexadecimal values.

WordPress Genius Guide 107

 Plugins

<top left>
s
#Z
IBWJOH
UIF
SFMFWBOU
XFCQBHF
PQFO
JO
B
XFC
CSPXTFS
XF
DBO
SFGSFTI
UIF
QBHF
BOE
TFF
JG
UIF

DIBOHFT
IBWF
UBLFO
FGFDU
TPNFUJNFT
B
GPSDF
SFGSFTI
NBZ
CF
SFRVJSFE

<bottom left>
s
6TJOH
$44
DPEF
ZPV
DBO
BMTP
BEE
CPSEFST
UP
ZPVS
XJEHFUT
#PSEFST
DBO
IBWF
WBSZJOH
MFWFMT
PG

UIJDLOFTT
BOE
FBDI
TJEF
DBO
EJGFS
JO
TUZMF
<below>
s
:PV
DBO
BQQMZ
B
DPMPVS
UP
UIF
CBDLHSPVOE
PG
ZPVS
XJEHFU
PS
BO
JNBHF
BT
XF
IBWF
EPOF
IFSF
5IF

JNBHF
IBT
CFFO
MJOLFE
WJB
B
VSM

001 #text-2 { 001 #text-2 { more to the left and negative values more to the
002 background-color: #b0c4de; 002 background-image: url("https:// right. The second value is vertical placement:
003 } dl.dropboxusercontent.com/u/6726157/DEMO.jpg"); positive values place the shadow lower down
003 background-position: bottom right; whilst negative numbers move it higher up. The third

08 Add background image

Rather than just using a colour you can also
004 } value is the blur distance: the higher the number the
stronger the blur effect. The final value is the colour of
choose to insert a background image via a url. Bear in
mind that larger images may have an adverse effect on
your website load times. Youll also want to make sure
10 Formatting text
Using the code above we have made some
basic amendments to the text within the widget. Weve
the shadow.

001 #text-2 {
that your text is still easy to read when imposed over changed the colour to teal, and the text is now also 002 color: teal;
your chosen image. Images can also be repeated if they centred. We have all transformed all of the text so it 003 text-align: center;
are being spread over a larger area. In the example appears in uppercase. These are very basic changes 004 text-transform: uppercase;
above the background-repeat function is repeating the but its minor customisations such as these that can add 005 text-shadow: 2px 2px 5px teal;
image in a horizontal fashion. to the whole layout of a blog. Also available but not 006 }
shown here is a text-indent tweak that can specify the
001 #text-2 {
002 background-image: url("insert weblink
here");
indentation on a first line of text (ie text-ident: 60px;).

001 #text-2 {
12 Adding extra touches
At this point our widget just needs some
final touches. The first lines are to do with padding.
003 background-repeat: repeat-x; 002 color: teal; These will insert 5px worth of space on each side of
004 } 003 text-align: center; the text column. This will stop the text from making
004 text-transform: uppercase; contact with the border on each side. The final line

09 Alter image positioning

With adding an image into a widget you may
005 } border-radius is a CCS3 command. Its a quick and easy
way of adding rounded edges to your border. The
find that the wrong part of the image has been applied.
With the example above we have added an extra line of
code. Here we have instructed the image to be displayed
11 Add text shadowing
An extra line has been added to the code
from Step 9. It has added an extra layer of shadowing
higher the number the more pronounced the curved
corners will be.

inside the widget from the bottom right corner. We can to the text. It contains four values regarding 001 padding-right: 5px;
see the changes once we save the code within the editor positioning, shadow thickness and colour. The first 002 padding-left: 5px;
and refresh our view of the original webpage. value is horizontal placement: positive values place it 003 border-radius: 10px;

108 WordPress Genius Guide

 WordPress
Genius Guide

<top left>
s
8JUI
KVTU
B
GFX
FEJUT
UP
UIF
UFYU

GPSNBUUJOH
ZPVS
XJEHFU
DBO
TUBSU

UP
CFDPNF
TPNFUIJOH
XJUI
ZPVS

PXO
NBSL
PO
JU
<bottom left>
s
/FXFS
$44
DPEJOH
UPPMT
TVDI

BT
UFYU
TIBEPXJOH
NBLF
JU
FBTJFS

UP
GVSUIFS
FOIBODF
B
XJEHFU
BOE

CSS3 codes SFBMMZ
IFMQ
NBLF
JU
QPQ

<bottom right>
5IF
TIBEPX
DPNNBOE
BOE
SPVOEFE
s
"U
UIJT
TUBHF
XFSF
OFBSMZ
UIFSF

CPSEFS
VTFE
JO
4UFQT

BOE

8F
IBWF
TPNF
TIBEPXJOH
B

CPSEFS
BOE
B
OJDF
CBDLHSPVOE

SFTQFDUJWFMZ
JT
BDUVBMMZ
B
$44
JNBHF
5IFSFT
KVTU
B
MJUUMF

DPNNBOE
BT
PQQPTFE
UP
B
$44
SFJOJOH
SFRVJSFE
DPNNBOE

$44
JT
UIF
MBUFTU
TUBOEBSE

GPS
$44
JUT
CBDLXBSET
DPNQBUJCMF

XJUI
FBSMJFS
WFSTJPOT
PG
$44
BOE
DBO
CF

BQQMJFE
XJUIJO
ZPVS
DPEF
*U
JODMVEFT

TPNF
HSFBU
OFX
GVODUJPOBMJUZ
XIJDI

XPVME
IBWF
QSFWJPVTMZ
UBLFO
B
MPU

NPSF
XPSL
UP
JNQMFNFOU
#FZPOE
UIF

DPNNBOET
XFWF
BQQMJFE
IFSF
UIFSF

BSF
BMTP
DPNNBOET
GPS
BOJNBUJOH

DPOUFOU
BEEJOH
HSBEJFOU
CBDLHSPVOET

JOTUFBE
PG
VTJOH
JNBHFT

BOE

USBOTGPSNJOH
FMFNFOUT

8IJMTU
UIFTF
OFX
UPPMT
BSF
HSFBU
UP

Top tip
8IFO
JU
DPNFT
UP
FEJUJOH

VTF,
UIF
$$4
TQFDJJDBUJPO
JT
TUJMM
JO
UIF
DPEF
JO
UIF
4UZMFDTT
JMF

EFWFMPQNFOU
CZ
8$
5IF
8PSME
8JEF
LFFQJOH
B
CBDLVQ
JT
BT

8FC
$POTPSUJVN

"MUIPVHI
NBOZ
PG
TJNQMF
BT
IBWJOH
B
OPUFQBE

UIF
$44
QSPQFSUJFT
IBWF
CFFO
JMF
PQFO
PO
ZPVS
EFTLUPQ

JNQMFNFOUFE
JO
NPEFSO
CSPXTFST,
$PQZ
BOE
QBTUF
DPEF
JOUP

VTFST
PG
BOZUIJOH
PMEFS
NBZ
JOE
UIBU
UIJT
UP
LFFQ
JU
IBOEZ
BT
B

UIFJS
CSPXTFST
BSF
OPU
DBQBCMF
PG
TQBSF
CBDLVQ
BQQMZJOH
UIF
DPEF
'PS
NPSF

JOGPSNBUJPO
PO
$44
TFF
www.
w3schools.com/css/css3_intro.asp

13 Bringing it together
Here is our final result where we have combined
the last few steps. Weve added an extra instruction at the
009
010
011
text-transform: uppercase;
text-shadow: 4px 4px 10px black;
border: 2px solid #000000;
top regarding what preferred fonts to use. Just below this 012 border-radius: 10px;
are instructions to add a little space (ie padding) to each 013 background-color: #b0c4de;
side of the column of text. This will stop the text from 014 background-image: url("https://
touching the border on either side. Theres also a little dl.dropboxusercontent.com/u/6726157/14328387394
padding at the top to centre the text vertically. Weve also _950b6ef36b_b.jpg");
chosen to add a background colour as a backup to the 015 background-position: top left;
background image, just in case it fails to load. Lastly, we 016 }
have also removed the prologue title through the
WordPress Dashboard.

001 #text-2 {
14 Editing plugins
The WordPress Dashboard has a plugin editor
which is located within Plugins>Editor, and works as a
002 font-family: Arial, Helvetica, sans-serif; simple text editor. The top right of the display has a
003 color: white; drop down menu where you can select the plugin to
004 padding-right: 5px; edit. The resulting code will appear in the main window. <above>
005 padding-left: 5px; s
5IFSF
BSF
UPPMT
JO
QMBDF
GPS
FEJUJOH
XJEHFUT,

Bear in mind that any edits to this section are lost BMUIPVHI
UIFTF
EBZT
JUT
OPU
PWFSMZ

006 padding-top: 15px; whenever the plugin is updated. To that extent its not SFDPNNFOEFE
*G
ZPV
OFFE
UP
EP
B
TQFDJJD

007 text-align: center; always an advised option to directly alter the core files UXFBL
UP
B
QMVHJO
USZ
BTLJOH
UIF
EFWFMPQFS
008 font-weight: bold; due to the security implications involved.

WordPress Genius Guide 109

 Plugins

Protect
GETTING YOUR NEW blog out into
TUTORIAL the big wide world is exciting.
OBJECTIVE
Prevent spam comments
Unfortunately youll need to protect
from making their presence yourself from the more unscrupulous

your blog
elements of the internet, namely spam.
TIME REQUIRED
15 minutes If your blog is equipped with a comments
section you may find that it will start to swell in
size thanks to spam bots sending replies to your
blog posts. Of course, these arent the type of

from spam
comments you are looking for, and they dont
particularly add to the content of your blog.
These replies are engineered to generate mouse
clicks to not only to locations away from your
blog but also to potential online hazards. This
SET UP AKISMET TO HELP PREVENT UNWELCOME SPAM can be as much a problem for little known blogs
COMMENTS FROM TAKING UP RESIDENCE ON YOUR BLOG as well as the more commonly known online
locations. Even the biggest websites, such as
news and entertainment websites, have to deal
with spambots.
To keep these pesky spam pirates off your
site, an essential add-on to your blog is Akismet.

Spam comments are engineered This tool will block spam comments before they
even become visible. It works by checking your
to generate mouse clicks not only to incoming comments against the Askimet Web
Service. Depending on what it finds it will either
locations away from your blog but to pass the comment or contain it in a spam folder
for you to review. This way, almost no spam will
potential online hazards be able to come through without being spotted.

<left>
s
A few captured spam
comments. Typical signs of
spam include dialogue
unrelated to the content,
questionable email sources,
nonsensical user names
and general poor grammar
and spelling

110 WordPress Genius Guide

 WordPress
Genius Guide

<top left>
s
Whether youre just starting out
or a fully established outfit,
Akismet can cater to your size
and requirements with a variety
of packages and services
<bottom left>
s
Wordpress hosted blogs
come with Akismet as standard.
If your WordPress blog is
self-hosted you will need to
install the plugin manually
<bottom right>
s
The process of obtaining your
Akismet API key starts from your
WordPress Dashboard. Go to
Akismet entry in the plugin
menu and continue from there

Top tip
01 Download the plugin
First off you will need to install the Akismet
plugin if it is not already displayed within your list of
that is most applicable to you (most likely the Personal
option). Youll be asked to complete some minimal
contact information and also set a donation level to
You can always
avoid spam by
plugins. Click on the Plugins tab on the Dashboard donate money to the developers. Note that for personal removing the
followed by Add New. Enter Akismet into the search box accounts donations are not mandatory. comment section via
and select Search Plugins. The Akismet plugin should Settings>Discussion
and un-tick Allow
appear at the top of your search results. Select Install
now to add it to your plugin collection. 04 API key delivered
Your API key should now be emailed to the
email address you supplied in the previous step. Copy
people to post
comments on
new articles.
02 Activating the plugin
Activating the plugin is a simple as select the
Activate link underneath the title for the plugin. In order
this and go back to your WordPress Dashboard. Open
the Plugin tab and select Installed Plugins. Paste your
API Key into the corresponding box on this page. You
for the plugin to work properly you will need to obtain can also tag extra options relating to how incoming Dashboard click Settings followed by Discussion. You
an Akismet API key. Click on the link in the plugin spam is handled. can dictate whether credentials (such as an email
description titled Sign Up For An Akismet API Key. address) are required in order to leave a comment.

03 Your API key

You will be taken to the Akismet website from
05 Blocking hyperlinks
in comments
You can also add additional controls on any incoming
There is also an option to hold back any comments that
contain more than one hyperlink. A common approach
of spam is to feature a notable number of links in order
which you can obtain your API key. Select the service comments to your blog. From the WordPress to drive traffic away from your site.

WordPress Genius Guide 111

 Plugins

<top left>
s
0ODF
ZPV
IBWF
ZPVS
"1*
DPEF
ZPV
XJMM
OFFE
UP
FOUFS
JU
JOUP
UIF
"LJTNFU
QMVHJO
TDSFFO
XJUIJO
ZPVS

8PSE1SFTT
DBTICPBSE
<middle left>
s
:PV
DBO
TFU
VQ
JMUFST
UIBU
XJMM
TDSFFO
PVU
DPNNFOUT
UIBU
DPOUBJO
QBSUJDVMBS
XPSET
PS
IZQFSMJOLT
*U
DBO

CF
B
QPXFSGVM
UPPM
TP
HP
FBTZ
<bottom left>
s
6TF
UIF
%JTDVTTJPO
TFDUJPO
XJUIJO
UIF
4FUUJOHT
UBC
PO
UIF
%BTICPBSE
UP
DMPTF
DPNNFOUT
PO
PMEFS

QPTUT
BOE
CMPDL
QJOHUSBDLCBDLT
UP
ZPVS
TJUF

<above>
s
$IFDL
UIF
TQBN
QPUFOUJBM
PG
B
SFDFJWFE
DPNNFOU
CZ
GPPHMJOH
LFZ
QISBTFT
GSPN
JU
*G
ZPV
HFU
NVMUJQMF

FYBDU
NBUDIFT
DIBODFT
BSF
UIBU
JUT
BVUPNBUFE
TQBN

Spam commenters are getting smarter; as a comment it will hold it for a number of days before
deleting it from your database. Some users argue that

result the comment you receive could fool you its worthwhile checking your spam page roughly once
a week to ensure the plugin hasnt pounced on
into thinking you have an inquisitive reader anything legitimate. Click on Comments followed by the
Spam link. You can hover over a comment and select
the Not Spam link to remove it from the spam queue.

06 Adding filter words

Within the discussion section you can also
add your own keywords that you feel should be
spammers from attacking older articles that may have
more established web traffic.

scanned for within any incoming comments. Any posts

contain these words can be either added to the
moderation queue before publication or immediately
08 Moderating
comments
incoming
When a comment passes through the Akismet filter
marked as spam. Bear in mind that any partial matches dont just assume that it is safe to publish it. Spam
are also removed so blacklisting the word bum will commenters are getting smarter; as a result the
block comments including words such as album, comments you receive could fool you into thinking that
bumper and so on. you have an inquisitive reader. If in doubt try Googling a
line from the comment. If you see the exact same

07 Close comments
Within the Discussion settings section is an
option to close comments on older posts. You can
comment in the search result then chances are that you
have a spam comment on your hands.
<above>
s
)PWFS
ZPVS
NPVTF
PWFS
B
DPNNFOU
IFBEFS
JO

ZPVS
TQBN
RVFVF
UP
WJFX
UIF
BWBJMBCMF
PQUJPOT

1PTUT
DBO
CF
EFMFUFE
PS
NBSLFE
BT
OPU
TQBN
determine how long this period by setting a timeframe
in the respective menu. This can help prevent 09 Checking your spam
Once Akismet has captured a spam

112 WordPress Genius Guide

 WordPress
Genius Guide

Trackbacks
and
Pingbacks
Trackbacks and Pingbacks are
designed to operate as a way for
bloggers to share traffic around
related online content.
"
USBDLCBDL
JT

BLJO
UP
B
CMPHHFS
SFGFSFODJOH
ZPVS

QPTU
JO
UIFJS
PXO
CMPH
WJB
B
MJOL

BOE

TFOEJOH
B
USBDLCBDL
5IJT
XJMM
BQQFBS

JO
ZPVS
DPNNFOUT
RVFVF
BT
B

USBDLCBDL
*G
NBOVBMMZ
BQQSPWFE
JU
XJMM

BQQFBS
JO
ZPVS
CMPH
BT
B
UJUMF
BO

FYDFSQU
BOE
UIF
MJOL
UP
ZPVS
CMPH

1JOHCBDLT
MBSHFMZ
XPSL
JO
B
TJNJMBS
<above>
s
5IFSF
JT
BMTP
BO
PQUJPO
UP
WJFX

XBZ
CVU
UIF
QSPDFTT
JT
NPSF

UIF
IJTUPSZ
PG
B
DPNNFOU
5IJT

BVUPNBUFE
6OGPSUVOBUFMZ
JU
DBO
CF
XJMM
QSPWJEF
JOTJHIU
JOUP
XIFO
JU

VTFE
BT
B
XBZ
GPS
TQBNNFST
UP
XBT
DBVHIU
CZ
"LJTNFU
JOJMUSBUF
ZPVS
TJUF
XJUI
UIF
WBHVF
<left>
s
$BQUDIB
DBO
BMTP
CF
B
VTFGVM

QSPNJTF
PG
FYUSB
FYQPTVSF
GPS
ZPVS
UPPM
JO
QSFWFOUJOH
TQBN

DPOUFOU
*O
NPTU
DBTFT
UIF
USBDLCBDLT
DPNNFOUT
5SZ
TFBSDIJOH
UIF

QMVHJOT
EJSFDUPSZ
GPS
TVJUBCMF

BOE
QJOHCBDLT
ZPV
NBZ
SFDFJWF
NBZ

$BQUDIB
UPPMT
NPTU
MJLFMZ
CF
TQBN
:PV
DBO
EJTBCMF

UIFTF
JO
UIF
EJTDVTTJPO
TFDUJPO
PG
UIF

TFUUJOHT
UBC

Top tip
5IF
"LJTNFU
XJEHFU

EJTQMBZT
UIF
OVNCFS
PG

DBVHIU
TQBN
DPNNFOUT

"EE
UIJT
UP
ZPVS
CMPH
CZ

DMJDLJOH
"QQFBSBODF
8JEHFUT
BOE
ESBHHJOH

UIF
"LJTNFU
8JEHFU

who comment frequently. Search the Wordpress plugins
CPY
UP
UIF
SFMFWBOU

directory for Captcha to see whats on offer.
XJEHFU
BSF
001 <blockquote>
002 Your comment is currently in the
moderation queue. Please do not submit

10 Adjusting Akismets your comment twice it will appear

strictness shortly.
Akismet has two simple ways of operating. It can either 003 </blockquote>
instantly remove the most blatant examples of spam, or 004 <input name=submit type=submit
hold all spam for 15 days in the spam folder before tabindex=5 value=<?php _e(Say it!); ?> />
removing it automatically, depending on your 005 </p>
<above>
preferences. To change this setting, click on plugins s
$MJDL
1MVHJOT>"LJTNFU
4FUUJOHT
UP
BDDFTT
UIF

followed by the Settings link in the Akismet section. The
option is available just below your stats summary. 12 Prevent repeat comments
Your users may not be aware that you have
comments awaiting moderation. As a result they may
GSPOU
QBHF
PG
UIF
QMVHJO
+VTU
CFMPX
UIF
TUBUT

BSF
UIF
UXP
EJGFSFOU
PQUJPOT
GPS
UPHHMJOH

"LJTNFUT
SFBDUJWFOFTT

11 Add Captcha
Captcha has been a useful tool in reducing
spam comments. It uses random images which the user
impatiently post the same comment again in the belief
that their first comment was not received. Its not
necessarily spam but it can still be a frustrating name=submit type=submit tabindex=5 value=<?php
must enter manually in order to post a comment. Whilst knock-on effect of spam management. Open your _e(Say it!); ?> /> with the code above. This will help
it can reduce spam it may also annoy regular site users comments.php file and replace the code <input manage expectations and reassure your visitors.

WordPress Genius Guide 113

 Plugins

Increase
SEO MANAGEMENT IS one of the
TUTORIAL most overlooked parts of promoting
OBJECTIVE
Understand how different
your blog or website. Its important
SEO tools and techniques to market your site to potential visitors
can be used to increase

your site
your sites viewership via social networks and through the creation of
new content, but if you want to increase your
TIME REQUIRED viewership and bring in new viewers who you
1 hour
might otherwise not be able to access through

visits
social networks then its time to get into SEO.
There are plenty of SEO plugins available for
Wordpress. Some are very simple to use but
offer limited tools, others are highly advanced.

with SEO
The WordPress SEO plugin by Yoast is a
comprehensive SEO tool that includes a lot of
advanced features. The developer also offers a
lot of tutorials, posts and support to users
making it the perfect plugin for wrapping your
SEARCH ENGINE OPTIMISATION COVERS A MULTITUDE OF head around SEO.

DIFFERENT TOOLS AND TECHNIQUES TO HELP TO INCREASE

YOUR SITES PROMINENCE ON SEARCH ENGINES

The WordPress SEO plugin by

Yoast is a comprehensive SEO tool
with lots of advanced features

<left>
s
Get a better ranking
and more visits for
your site on search
engines by adding
meta data for your
posts titles and
descriptions

01SEO Plugins
If you have a working knowledge of WordPress
but are new to SEO then consider checking out some
02Dashboard The Yoast plugin dashboard provides you with
general settings for SEO management of your WordPress
03Verify your site
Click on a webmaster link below the
Webmaster Tools subheading, such as Google
simple SEO plugins. The WordPress SEO plugin by Yoast site. If you are new to SEO management then under the Webmaster Tools. You will be prompted to sign in with a
offers users more advanced options and preferences General subheading click Start Tour for a detailed walk Google account. To Verify via Google you will need to
when working with SEO on your site. In these steps the through of all the tools available in the Yoast SEO Plugin. download a HTML verification file from Google. You will
WordPress SEO plugin will be explored and explained. You can also reset all of your plugin settings from here. At then need to upload the file to your site then click Verify.
Install the plugin via the WordPress plugin tool then the bottom of the Dashboard is the webmaster tools.
activate it. The plugin will appear under the title SEO on
your WordPress toolbar.
Here Yoast has setup a selection of links that can be
followed to verify your site with various webmasters. 04Titles & Metas
From the Yoast SEO plugin click on the Titles &

114 WordPress Genius Guide

 WordPress
Genius Guide

<top left>
s
8JUI
EP[FOT
PG
EJGFSFOU
4&0

UPPMT
BWBJMBCMF
UIF
8PSE1SFTT

4&0
1MVHJO
MFUT
ZPV
NBOBHF

FWFSZ
BTQFDU
PG
ZPVS
TJUFT
TFBSDI

FOHJOF
QSFTFODF
<bottom left>
s
$IFDL
PVU
UIF
EFTDSJQUJPOT
BOE

TDSFFOTIPUT
GPS
4&0
QMVHJOT
UP

HFU
BO
JEFB
GPS
IPX
CBTJD
PS

BEWBODFE
FBDI
PG
UIFN
BSF
<bottom right>
s
5IF
8PSE1SFTT
4&0
QMVHJO

GSPN
:PBTU
QSPWJEFT
ZPV
XJUI
BO

JOUSPEVDUJPO
UPVS
PG
UIF
QMVHJO

JG
ZPV
BSF
OPU
GBNJMJBS
XJUI

4&0
NBOBHFNFOU

Top tip
*UT
WFSZ
JNQPSUBOU
UIBU

Metas tool. On this page you can adjust how titles and than date or through a sequence of numbers will ZPV
UBH
ZPVS
QPTU

meta data from your website are going to be presented help make your posts easier to find on search DPSSFDUMZ
5BHT
OPU
POMZ

to those viewing it from a search engine. To begin, under engines. Under the Post Types subheading you can BMMPX
WJFXFST
UP
OBWJHBUF

the General tab you can adjust your meta data settings. add Meta Descriptions to posts, pages, quotes, ZPVS
QPTUT
FBTJMZ
CVU
UIFZ

A lot of the general settings are for tidying your sites portfolio pages and any other types of publishable IFMQ
NBLF
ZPVS
QPTUT

meta data and the way that site links are presented. content. This information will appear below your post title
FBTJFS
UP
JOE
POMJOF
WJB

For Example, checking the noindex subpages of archives in search engines, again helping to increase the your
option will tidy a URL to hide /page/2/ in the URL of ranking and show potential visitors more information
TFBSDI
FOHJOFT
your site. about your site.

05Home page Titles & Metas 07SEO Social tools

In the Titles & Metas page click on the Home
tab. By default Yoast presents your sites title information
Click on the Social tool in the SEO sub-menu.
The Yoast plugin is compatible with Facebook insights,
08XML Sitemaps
The XML Sitemap of your site is what allows
search engines to see that your site has been updated.
with the Site name, the page name and the site Twitter and Google+. With Yoasts social tools you can This is a key aspect of SEO and by making sure that sites
description. Edit the Title Template text box to change enhance the SEO of your sites social networks. To work such as Google know that youre site is being updated as
this. Add a meta description in the Meta description with Facebook SEO click Add Facebook Admin in the often as possible, you will see an improvement in your
template. Click Post types to work with your title and Facebook subheading. You will be linked to Facebook sites presence in search engines. The Yoast XML Sitemap
meta information for all of your websites posts. and Yoast will ask for permission to access your profile. also includes image posts, helping your site appear
Once a Facebook admin has been assigned add a higher on image results for search engines.

06Importance of titles
The proper use of titles in your posts is one of
the simplest ways of increasing your rank ship on a
Facebook page URL, then add the Front Page settings
including an Image URL, title and description. For Twitter
and Google+ add your details in each of the social 09Enabling Sitemaps
In the XML Sitemaps window check the box to
search engine. Having posts titled by their name rather networks subheadings. enable XML sitemap functionality. From now on any

WordPress Genius Guide 115

 Plugins

<top left>
s
5IF
NPSF
JOGPSNBUJPO
ZPV
QSPWJEF
JO
UIF
5JUMFT

.FUBT
XJOEPX
UIF
NPSF
EFUBJMT
XJMM
BQQFBS
PO

TFBSDI
FOHJOF
SFTVMUT
GPS
ZPVS
TJUF
BOE
QPTUT
<bottom left>
s
4&0
JTOU
KVTU
BCPVU
QSPNPUJOH
ZPVS
TJUF
JUT
JNQPSUBOU
UIBU
QFPQMF
JOE
UIF
TPDJBM
OFUXPSLT
XIFSF
ZPV

BSF
QPTUJOH
ZPVS
MBUFTU
VQEBUFT
UP
<below>
s
,FFQ
ZPVS
XFCTJUF
VQ
UP
EBUF
UP
IFMQ
JU
BDIJFWF
B
CFUUFS
SBOL
JO
TFBSDI
FOHJOFT
5IF
9.-
TJUFNBQ

FOTVSFT
UIBU
VQEBUFT
BSF
BMXBZT
SFHJTUFSFE
CZ
TFBSDI
FOHJOFT

updates made to your site will be sent to Google and

Bing. You can also include Yahoo and Ask.com to receive
One of the newest features of Yoasts SEO
updates to your site. With XML Sitemaps you can exclude
certain site content that you dont want to be pushed to
plugin is the Bulk Editor. From here you can access
search engines whenever an update is completed, this and edit all of your sites posts
can also be applied to site taxonomies.

10 Tidying permalinks
Under the SEO Permalinks subheading you can
12Inserting breadcrumbs
A PHP code is provided at the bottom of
the page for you to insert into your theme, so that
setup the plugin how you want it for your site, its settings
can be easily applied to other sites, with only a few minor
tweaks needing to be made to suit each individual site.
activate or deactivate a selection of permalink settings breadcrumbs will appear at the top of your posts. A plugin
that can help to tidy your sites permanent URLs for posts
and pages. Before changing permalink settings within
the Yoast Plugin open your WordPress settings and click
from Yoast called Yoast Breadcrumbs is also available for
you to install breadcrumbs into your site if you are not
code savvy. For more details on how breadcrumbs work
15Re-importing data
Under the export subheading click Import
Settings. A zip file titled settings.zip will be downloaded.
Permalinks. Here its advised by Yoast that you select in WordPress and with the Yoast SEO plugin visit Upload the zip file to your FTP. Install the WordPress SEO
either Post name or Custom Structure for your post URLs. yoast.com/wordpress/plugins/breadcrumbs/ for a plugin on another WordPress site then re-visit the Import
This approach makes your posts more timeless, as the tutorial on inserting breadcrumbs into your sites theme. & Export window. At the bottom of the page click Import
URL title refers to the post title rather than the date it was settings. The settings.zip file will be imported and its data
published. Return to the Yoast SEO Permalinks window to
then select your preferred permalink settings. 13Importing SEO data
If you have dabbled in SEO plugins previous to
will be applied to the plugin.

11 Breadcrumbs settings
Breadcrumbs refer to the displayed path in which
using Yoasts SEO plugin then you may have a collection
of SEO data that you want to import into the WordPress
SEO plugin. Open the Import & Export window in the
16Bulk Editor
One of the newest features of the plugin is the
Bulk Editor. From here you can access and edit all of your
a visitor has taken to get to a post. This path is normally plugins sub-menu. Check the box next to the name of sites posts. You can also quickly create Yoast SEO titles
visible at the top of a site. A typical Breadcrumb would one of the compatible plugins that you want to import for all of your posts using the text box provided next
be Home>Blog>Blog title. The Breadcrumb settings data from, then click Import. to each post URL. Bulk editing can be performed with
can be found under the Internal Links window in the titles and descriptions of posts. Switch between titles and
SEO sub-menu. Under Breadcrumbs settings you can
enable breadcrumbs and adjust the layout of your sites 14Export SEO data
In the Import & Export window you can also
descriptions at the top of the Bulk Editor window.

breadcrumbs. The taxonomy to be displayed for your

posts, quotes and portfolio pages can be changed in the
Internal Links window.
export all of your SEO settings from the WordPress SEO
plugin. The reason to do this is if you want to import your
exported data into another WordPress site. Once youve
17More tools
Open the Edit Files window to edit the .htaccess
and robots.text files. Dont change any of these files if you

116 WordPress Genius Guide

 WordPress
Genius Guide

The basics
of SEO
Once the WordPress SEO plugin has
been installed you will find a panel for
it at the bottom of any new post that
you create. In this panel you can add
details to your post to help its online
presence. You will also be provided
with a preview of the post as it would
appear on a search engine. Add
keywords and an SEO title as well as a
Meta description. Once youve added
these details click on the Page Analysis
subheading. Here you will be able to
see the strengths and weaknesses of
your post in relation to its SEO
potential. If you would like to, make
some changes to the post. This could
get you more green circles in the Page
Analysis. Use the Advanced
subheading to add more information
such as Breadcrumbs title and Sitemap
options. Finally, use the Social
subheading to create meta data for
both Facebook and Google+ updates
linking to the post.

are not one hundred percent sure of

what you are doing as you can make
irreversible changes to the plugin. Below this
tool in the tool bar is the extensions option.
Here you can download more extensions <top>
for the plugin, including WordPress SEO s
One of the easiest ways to help optimise
Premium, which offers even more features for your site for search engines is to manage
your permalinks, this can be done without
SEO management. an SEO plugin
<middle>
s
WordPress SEO is compatible with data
from other SEO plugins, allowing you to
import your data for your sites SEO that
Top tip you have already setup
WordPress does provide <bottom>
a few simple yet very s
The Bulk Editor is the fastest and easiest
way to update titles and descriptions for
important tools to help your posts
you manage your SEO.
Go to the Settings tool in
the WordPress tool bar.
Under the General
settings fill in all of
these details.

WordPress Genius Guide 117

 Plugins

Add a Social
THE USER BIO of any WordPress site
TUTORIAL is an important part of your website
OBJECTIVE
Insert a detailed Author Bio
or blog. It provides viewers with details
section to your website or as to who has created the post and
blog, featuring an avatar,

author bio
bio and social links. makes it easier for those who want to follow your
site to connect with you via different social
TIME REQUIRED networks. When creating blog posts in WordPress
15 minutes
your post will be accompanied with information
on the person who created the post. Details on
ADD PRE-SET AND CUSTOM LINKS TO ALL OF YOUR DIFFERENT the poster can be created with the User tool in
SOCIAL NETWORKS AND SITES TO AN AUTHOR BIO WINDOW WordPress. Here you can create new users and
include bio information and an avatar image. With
THAT WILL APPEAR AT THE BOTTOM OF YOUR WEBSITES PAGES the Social Author Bio plugin you can fully
AND POSTS customise your bio information providing viewers
with quick links to your social networks. You will
also be able to create custom links to any website
of your choosing.

When creating blog posts in Top tip

Author information
WordPress your post will be is a must if you want to
promote yourself and other
accompanied with information authors so that visitors can
associate your posts with
on the person who created it you and link to your social
networks, thus increasing
your potential hits
and followers.

<left>
s
The Social Author Box will
appear at the bottom of
any posts or pages that
you include it in, linking to
the authors social media
pages and sites

01 Social Author Bio

Open the Add New window of WordPresss
Plugin tool. Search for Social Author Bio by Nick Powers.
appear at the bottom of your pages and posts by
default. You can change the positioning in the General
window of the plugin. Enable the Social Author Bio on
you can then place it anywhere on the page or post that
you like.

Install the plugin then activate it. The Plugin will appear
with its own icon in your WordPress toolbar. The Social
your posts then preview a post to see how it looks.
04 Add the code
Now we know what changes we are making
Author Bio plugin is broken up into three sub-sections.
General, Custom Links and Advanced HTML/ Style. 03 Use Shortcode
Selecting the Shortcode option allows you to
copy and paste the provided shortcodes into pages and
we need to add them to the Style.css file of our child
theme. Above is how the entire section of text should
look within the file. Note that the changes to the text

02 General Settings
Open the plugins general window. Under the
When to Display Social Author Bio subheading select
posts that you want to include the bio information. Two
Shortcodes are provided, one of just the bio and one
that includes all selected social links. The added benefit
have been added below the @import line. Either we can
edit the file locally and upload it via FTP or open
Appearance > Editor from the WordPress Dashboard
where you want the Bio to be displayed. The Bio will of working with shortcode placement for your bio is that and add the code below the @import line.

118 WordPress Genius Guide

 WordPress
Genius Guide

<top left>
s
5IF
Plugin
QSPWJEFT
B
OFX

TFDUJPO
UP
UIF
:PVS
1SPJMF

XJOEPX
XJUIJO
UIF
6TFS
UPPM
PG

8PSE1SFTT
UP
JOQVU
MJOLT
UP
ZPVS

TPDJBM
TJUFT
<bottom from left>
s
5IF
4PDJBM
"VUIPS
BJP
DBO
CF

BEEFE
UP
QPTUT
BOE
QBHFT

FJUIFS
CZ
TXJUDIJOH
JU
PO
JO
UIF

(FOFSBM
4FUUJOHT
PS
VTJOH
UIF

QSPWJEFE
TIPSUDPEF
s
#Z
DSFBUJOH
DVTUPN
TPDJBM
MJOLT

ZPV
DBO
MJOL
UP
BO
VOMJNJUFE

BNPVOU
PG
TJUFT
GSPN
ZPVS
4PDJBM

"VUIPS
#PY
BOE
VTe
ZPVS
PXO

QSFGFSSFE
JDPO
s
6TJOH
"EWBODFE
)5.-
4UZMF

PQUJPOT
XJUI
ZPVS
4PDJBM
"VUIPS

#JP
ZPV
DBO
NPEJGZ
FWFSZ
QBSU
PG

UIF
CJPT
MBZPVU
s
TIF
TPDJBM
MJOLT
EJTQMBZFE
PO

ZPVS
#JP
DBO
CF
SFQMBDFE
XJUI

VQUPEBUe
WFSTJPOT
WJB
'51

05 Custom Links
Returning back to the Social Author Bio plugin
open Custom Links to create your own custom links to
you can edit the HTML code for your Social Author Bio
plugin, changing the layout, ordering and arrangement
of information that is displayed. You can also edit the
More author
sites that you want to appear. Add a link name and
Image URL as well as prepend URL text and Append
style of the bio manually. tools
5IFSF
BSF
QMFOUZ
PG
PUIFS
BVUIPS
TFUUJOHT
BOE

URL text if necessary. You can add up to ten custom
social links, and remember to click Save Changes. Keep
in mind that the image URL provided will appear in full
08 Match your theme
In the Advanced HTML/Style window
scroll down to the Edit Style for Social Author Bio
QMVHJOT
BWBJMBCMF
XJUIin
8PSE1SFTT
5IF
"VUIPS

*NBHF
QMVHJO
BMMPXT
GPS
FBTZ
SFQMBDFNFOU
BOE

VQEBUJOH
PG
UIF
JNBHF
BTTPDJBUFE
XJUI
FBDI

size so you will want to use 32x32 pixel images to keep HTML window. Adjust the font weight and size as DSFBUFE
BVUIPS
PO
ZPVS
8PSE1SFTT
TJUF
5IF
"VUIPS

with the continuity of the pre-set social link thumbnails. you like to match your current theme. In the 3FDFOU
1PTUT
QMVHJO
XPSLT
BT
Bn
FNCFEEBCMF

HTML window go to the Bio Socials area to modify XJEHFU
UIBU
XJMM
EJTQMBZ
BMM
PG
UIF
MBUFTU
QPTUT
GSPN

06 Publishing custom links

Once youve created a custom social link
return to WordPresss Users>Your Profile window. Below
the spacing and arrangement of your social
links icons.
BO
BVUIPS
*G
UIJT
GFBUVSF
JT
OPU
QSFTFOU
JO
ZPVS

8PSE1SFTT
UIFNF
UIFO
JU
JT
B
HSFBU
XBZ
UP
JEFOUJGZ

BOE
QSPNPUF
QBSUJDVMBS
BVUIPST
QPTUT
PO
ZPVS
TJUF

the pre-set social icons any custom social urls that
youve created will appear. Input a weblink in the text
box below the image. Activate your custom links from
09 Replacing social link
images
The Social Author Bio plugin provides you with image
PS
CMPH
5IF
JOUFSGBDF
GPS
UIJT
XJEHFU
JT
GVMMZ

DVTUPNJTBCMF,
BMMPXJOH
ZPV
UP
JODMVEF
JNBHF

UIVNCOBJMT
BOE
EFTDSJQUJPOT
PG
FBDI
PG
UIF
MJTUFE

here and they will appear at the bottom of your social thumbnails for your social links, however some of these QPTUT
5IF
5PQ
"VUIPST
QMVHJO
XPSLT
JO
B
TJNJMBS

author bio. icons can fall out of date. Some of the icons may not be XBZ
FYDFQU
JU
MJTUT
UIF
UPQ
QPTUJOH
BVUIPST
PG
B
CMPH

to your taste either. Access your sites FTP folder and go XJUIJO
UIF
XJEHFU
BHBJO
IFMQJOH
UP
QSFTFOU
WJFXFST

07 Advanced HTML/ Style

Return to the Social Author Bio plugin and
open the Advanced HTML/ Style window. In this window
to /wp-content/plugins/social-autho-bio/images. Here
you can replace any of the provide images with your
own thumbnails.
XJUI
ZPVS
TJUFT
UPQ
DPOUFOU
*U
BMTP
QSPWJEFT
ZPVS

WJFXFST
XJUI
B
HPPE

JNQSFTTJPO
PG
ZPVS
DPOUFOU

WordPress Genius Guide 119

 Plugins

Build a
SLIDESHOWS ARE ONE of the
TUTORIAL easiest assets to add to your
OBJECTIVE
Install a WordPress
WordPress website. They can be
slideshow gallery plugin used in a variety of different ways

WordPress
so that you can Link to blog
posts and pages or create depending on how you want to utilise them.
a gallery of images on your Slideshows can hold a series of high-res images
webpage, creating a visual
navigation tool for you, working as an interactive portfolio of
your work. This is especially useful for designers,
TIME REQUIRED

slideshow
artists and photographers. A slideshow can
10 minutes
also work as a great header to your site or
blog, displaying header images for your latest
blog posts. If you know exactly how you want
to use a slideshow in your site then it is worth
INSTALL A WORDPRESS SLIDESHOW GALLERY PLUGIN SO THAT finding a plugin that is specific to your needs.
YOU CAN LINK TO BLOG POSTS AND PAGES OR CREATE A However, there are a lot of general slideshow
GALLERY OF IMAGES ON YOUR WEBPAGE, CREATING A VISUAL plugins to choose from. In the following steps
you will learn how to embed a slideshow gallery
NAVIGATION TOOL
into your site.

If you know exactly how you

want to use a slideshow in your site
then it is worth finding a plugin that
is specific to your blogs needs

<left>
s
This is a much more
minimalist approach
to a slideshow, taking
away navigation
control. A link icon
appears in the image
when hovered over

120 WordPress Genius Guide

 WordPress
Genius Guide

<top>
s
Every time you create a new
slide (which contains one image)
it will appear in the Slides
manager window listed in the
same way that blog posts are
<bottom left>
s
Every gallery comes with a
short code that can be copied
and pasted into a post or page
in WordPress
<bottom right>
s
If you are using the slideshow
as a header for your site consider
adding a short description to
each of the images used in
your slideshow

Top tip
By default your slideshow
01 Slideshow plugins
In WordPress go down to the Plugins
tool from the tool bar and click Add New. Search
slideshow with ten images you will need ten slides. One
image per slide.
will be set to a black and
white colour scheme. Go
to the Appearance &
Gallery Slideshow in the search bar. There are
hundreds of Slideshow plugins to choose from,
each offering different tools and options. Browse
04 Working with Galleries
The second tool youll be using to create
your slideshow is Galleries. Each slide that you create
Styles subheading in the
Configuration window to
add new colour codes to
through the details on each plugin to find one that must be associated with a gallery within the plugin. your slideshow.
suits your needs. Once youve associated multiple slides to a gallery you
can then paste a galleries PHP code into a post, page

02 Slideshow gallery plugin

The top rated slideshow gallery plugin is
or portfolio.
tool bar click Manage Slides. Click Add New. Begin by
called Slideshow Gallery developed by Tribulant
Software. Click Install to install the Slideshow Gallery
plugin. After installation click Activate Plugin. A
05 Create a gallery
Hover over Slideshow at the bottom of your
WordPress tool bar then click Manage Galleries. Click
adding a title and description to your slide. Remember
that all slide information will be associated with the
image that you link to that particular slide. Under the
slideshow icon will appear below your settings icon in Add New. To add a new Gallery all you have to do is Show Information subheading select what information
the WordPress tool bar. Go to Plugins>Installed Plugins add a title then tap Save Gallery. You will be taken you want the slide to display. Any information will
to deactivate the plugin. back to the Manage Galleries window. Next to each appear at the bottom of an image when being viewed
newly created gallery a shortcode will be displayed. in a slideshow.

03 Working with slides

The Slideshow Gallery plugin uses two key
tools to create a slideshow for you. Each image that you
It is this code that you can use to embed your
galleries into posts.
07 Slide options
Since you have already setup a gallery you
add is attached to a slide. The slide will have a title and
description as well as a link if need be. To create a 06 Create new slides
Under the Slideshow plugin in the WordPress
can now link your slide to it. Under the Galleries
subheading select a gallery. Now when you paste the

WordPress Genius Guide 121

 Plugins

<left>
s
#Z
BUUBDIJOH
MJOLT
UP
FBDI
PG
ZPVS
TMJEFTIPX
JNBHFT
ZPV
DBO
BMMPX
WJTJUPST
UP
OBWJHBUF
ZPVS
TJUF

UISPVHI
UIF
TMJEFTIPX
<below>
s
5IF
DPOJHVSBUJPO
TFUUJOHT
BMMPX
ZPV
UP
DPOUSPM
FWFS
BTQFDU
PG
ZPVS
TMJEFTIPX
#Z
EFGBVMU
ZPVS

TMJEFTIPX
XJMM
NPWF
CFUXFFO
JNBHFT
BVUPNBUJDBMMZ

<above>
s
1SFWJFXJOH
ZPVS
TMJEFTIPX
JO
B
QPTU
XJMM
IFMQ
HJWF
ZPV

BO
JEFB
PG
UIF
GPSNBUUJOH
PG
ZPVS
JNBHFT
XIJDI
DBO
CF

BEKVTU
MBUFS

Galleries shortcode into a post this image will be

displayed. You can add a slide to as many galleries as
you like.
By default the slideshow is set to a certain size. The
slideshow will automatically scroll through your images.
Click on the image to test the web link that you
12 Show Thumbnails
Turn on the Show Thumbnails option to
display thumbnails of all the images in the slideshow at
associated with the image. the bottom of the slideshow. As with navigation controls

08 Image upload
Images can be imported straight from your
computer or through a URL. The Slideshow plugin does 10 Order your slides
If your slideshow is working correctly return
you can adjust the positioning, size and opacity of your
thumbnails. Use of thumbnails depends on what you

not use the WordPress media tool to import images so to the Manage Galleries window. Hover over your
you cant access images already stored in your media gallery title then click Order Slides. In this window you
library other than adding the images URL. Finally click can arrange your slides by dragging and dropping
Yes under the Use Link subheading if you want to link them in the order that you want all of your images to
to another webpage from this image. Links can be appear in.
opened in the current window or in a new window. Click
Save Slide. Repeat this process for as many images as
you want to include in your post. 11 Configure your slideshow
Under the Slideshow plugin in the tool bar click
Configuration. In this window you can effect and modify

09 Test your slideshow

Return to the Manage Galleries window. Copy
the shortcode from the gallery you have created, which
almost every single aspect of your slideshow. The
General settings can be used to adjust the slide controls
of a slideshow as well as the speed that the gallery goes <above>
now includes the slides you just created. In WordPress between slides. You can include navigation controls for s
*UT
WJUBM
ZPV
TQFOE
TPNF
UJNF
BEKVTUJOH
UIF

BQQFBSBODF
BOE
TUZMF
TFUUJOHT
PG
ZPVS

create a new Post or Page. In the post edit window click people and decide at what point the slideshow stops TMJEFTIPX
FPSNBU
ZPVS
JNBHFT
CFGPSF

Text then paste in the shortcode. Click Preview. A rolling. You can also turn on image information or turn it VQMPBEJOH
UIFN
UP
UIF
TBNF
EJNFOTJPOT
slideshow of your images will now appear in the post. off for mobile users.

122 WordPress Genius Guide

 WordPress
Genius Guide

want to use your slideshow for. If its to exhibit making sure that an image is seen in full without
photography then Thumbnails are a great way to allow being cropped.
people to navigate between images. If your slideshow is
to be used as a header to preview sections of your site
you may want to turn off thumbnails and just give users
navigational control.
14 Fixed slideshows
Selecting a fixed layout for your slideshow will
fix the dimensions of a slideshow to a set pixel height
and width, which you can determine under the

Formatting 13 Responsive
slideshows
Appearance & Styles subheading. If you are using a
slideshow to preview posts or pages on your site then a

Top tip Under the Appearance & Style fixed slideshow is advised. Ideally you will format all of
images Under the Appearance & subheading you will want to
use either a responsive or
the images in the slideshow to the same size to create a
more visually appealing slideshow. The default size of
For the most high quality gallery Style subheading select
fixed layout depending on the fixed slideshow is 450x250px, creating a web
slideshow you should format your Responsive in the
your image types. A banner sized slideshow. Play around with dimensions
images first. The slideshow plugin will Confriguration window for
responsive slideshow will and preview them to see what works for you.
accept different image sizes and the quickest and tidiest
adjust its dimensions
formats, however you may find some slideshow setup. Next to
inconsistency between images as the
slideshow slides between images.
Resize Images select No
then choose a gallery
according to the size of an
image. You can select the
height of a slideshow in
15 Media slideshow
Search for the GMedia Gallery plugin in the
Add New window from the Plugin section of the
Within the configuration window of width and height that
pixels or percentage and WordPress toolbar. This plugin allows you to create
the plugin you can set your slideshow suits your site.
switch on the Auto Height tool to slideshow galleries for all forms of media including
to adjust its size for each image. This
adjust a slideshow to accommodate video and audio files. With GMedia you can embed
means that each image will be
the height of each image. A responsive videos from sites like YouTube or SoundCloud and
presented as is, although there will be
slideshow is useful when exhibiting photography, implement them in a slideshow layout.
no continuity between photos. Using
simple photo editing software such as
Photoshop, or a browser based editor
like pixlr.com, crop your images down
Using simple photo editing software such as
to the same size, quality and image Photoshop, or a browser based editor like
format. In this example the image has
been cropped down to a banner size, pixlr.com, crop your images down to the same
perfect for the header of your site.
size, quality and image format

<left>
s
There are WordPress
plugins for all kinds of
gallery slideshows
allowing you to
include media such as
audio tracks and video

WordPress Genius Guide 123

 Plugins

Schedule TUTORIAL
OBJECTIVE
Schedule posts with the
Editorial Calendars easy to
use interface
THE EDITORIAL CALENDAR
QMVHJO
CZ

$PMJO
7FSOPO
QSPWJEFT
8PSE1SFTT
VTFST

XJUI
BO
FBTZUPOBWJHBUF
TDIFEVMJOH
TZTUFN

UP
IFMQ
ZPV
XJUI
NBOBHJOH
ZPVS
CMPHT

your blog TIME REQUIRED

5 minutes
TDIFEVMF
When creating a new post in WordPress you
can assign a date and time at which the post will be
published. Reviewing and changing the publish date of
a post can be a little clunky in WordPress and this is

posts
where the Editorial Calendar plugin really comes in
handy. With its Calendar layout you can easily drag and
drop posts into the calendar to determine when theyll
be published, as well as being able to go into posts to
edit them from the plugin. The Editorial Calendar makes
it easy for you to amend and review your publishing
dates for posts within your WordPress blog.
SCHEDULE THE TIME AND DATE FOR POSTS WITH
THE WORDPRESS EDITORIAL CALENDAR PLUGIN. USE
THE EDITORIAL CALENDARS SIMPLE DRAG AND DROP
INTERFACE TO SCHEDULE POSTS EASILY

<above>
s
%BZT
UIBU
IBWF
BMSFBEZ
QBTTFE
XJMM
CF
TIBEFE
JO
HSFZ
4JNQMZ
ESBH
BOE
ESPQ
B
QPTU
UP
BEKVTU
JUT
TDIFEVMFE
QPTUJOH
EBUF
5IF
QPTU
XJMM
CF
VQEBUFE
BVUPNBUJDBMMZ

124 WordPress Genius Guide

 WordPress
Genius Guide

<top left>
Top tip
"MUIPVHI
UIF
DPOUFOU
UFYU
CPY

s
:PV
XPOU
CF
BCMF
UP
ESBH
BOE
ESPQ
QPTUT
UIBU

IBWF
BMSFBEZ
CFFO
QVCMJTIFE
CVU
ZPV
DBO
TUJMM
FEJU
JO
UIF
$BMFOEBS
QPTU
DSFBUJPO

UIFJS
TDIFEVMF
BT
ZPV
OPSNBMMZ
XPVME
JO
B
XJOEPX
JT
NVDI
NPSF
MJNJUFE

8PSE1SFTT
CMPH
UIBO
DSFBUJOH
B
OPSNBM

<top right>
s
6TJOH
UIF
&EJUPSJBM
$BMFOEBS
2VJDL
&EJU
UPPM

8PSE1SFTT
CMPH
ZPV
DBO
QBTUF

QSPWJEFT
ZPV
XJUI
BO
FBTZ
XBZ
UP
FEJU
B
QPTU
TIPSU
DPEF
BOE
)5.-
JOUP
UIF

XJUIPVU
IBWJOH
UP
MPBE
JU
VQ
UISPVHI
UIF
8PSE1SFTT
DPOUFOU
CPY
5IJT
JT
VTFGVM
JG

QPTU
XJOEPX
ZPV
IBWF
QSFTFU
DPEJOH
GPS

<left>
s
6TF
UIF
&EJUPSJBM
$BMFOEBS
4DSFFO
0QUJPOT
UP
FWFSZ
QPTU
BEKVTU
UIF
MBZPVU
PG
ZPVS
DBMFOEBS
BOE
UIF
EFUBJMT

QSFTFOUFE
BMPOHTJEF
QPTUT
XJUIJO
UIF
DBMFOEBS

01 Install Editorial Calendar

Go down to the Add New section of the Plugins
tool of WordPress and search for the Editorial Calendar
Quick Edit tool to setup a publishing time for the post. Posts
can also be dragged into the Unscheduled Draft window.
Draft posts can be dragged from the Unscheduled list into
plugin. Click Install Now. Once installed, click Activate Plugin. the calendar and setup with a scheduled publishing date.
You can access the Editorial Calendar plugin by clicking on
Post in the WordPress tool bar then clicking Calendar from
the sub-menu. 05 Managing your calendar
At the top of the calendar window click Screen
Options. Here you can adjust what information is displayed

02 Navigating Editorial Calendar

When viewing the Editorial Calendar you will be
taken to the current Month. Any posts that are scheduled to
in the calendar cell. You can also determine how many
weeks are displayed in the calendar. You can use the scroll
wheel on a mouse to change the displayed month with a
Portfolio Calendar
5IF
&EJUPSJBM
$BMFOEBS
QMVHJO
JT

be published within that month will be displayed. You can post selected, however this tool can sometimes be a bit BQQMJFE
UP
UIF
QPSUGPMJP
UPPM
JO

8PSE1SFTT
BT
XFMM
BT
QPTUT

also go back to previous months where already published buggy so extending the amount of weeks displayed gives
1PSUGPMJP
JUFNT
NBZ
OPU
OFFE
UP
CF

posts can be found. Click Show Unscheduled Drafts in the you more flexibility for dragging and dropping a post.
TFFO
JO
PSEFS
PG
EBUF
OPS
XJMM
UIFZ

top right corner of the window to display any Draft posts
EJTQMBZ
EBUF
JOGPSNBUJPO
8IFO
ZPV

that have yet to be scheduled for publishing.
06 Create New Posts
Hover over a date on the Editorial Calendar then
BSF
CVJMEJOH
B
TJUF
UIBU
IBT
QPSUGPMJP

JUFNT
GFBUVSFE
PO
UIF
GSPOU
QBHF
PS

03 Editing a post
Hover over any post that is displayed in the
Editorial Calendar. A sub-menu will appear with the option to
click New Post to open the Quick Edit window for a new
post. Creating a new post in the Editorial Calendar is more
limited than building a post in the WordPress post window,
IBT
QPSUGPMJP
JUFNT
UIBU
BSF
PSEFSFE

CZ
EBUF
UIFO
UIF
&EJUPSJBM
$BMFOEBS

DBO
CF
VTFE
BT
B
XBZ
PG
FEJUJOH
BOE

Edit, Quick Edit, View or Delete the post. By clicking Edit you however you can quickly add text content and setup a BSSBOHJOH
ZPVS
TJUFT
QPSUGPMJP
JUFNT

will be taken to the WordPress Post edit window. The scheduled posting time through this window. +VTU
7JTJU
ZPVS
UIFNF
TFUUJOHT
UP

NBLF
TVSF
UIBU
DPOUFOU
JT
EJTQMBZFE

Editorial Calendar has its own Quick Edit floating window
JO
EBUF
PSEFS
UIFO
ZPV
DBO
QSJPSJUJTF

that will appear when using the Quick Edit tool. In the Quick
Edit window you can edit a posts title, content, posting time
and status.
07 Saved calendar posts
Under the content box select a time either in AM
or PM and then a status. Either select Draft, Pending Review
ZPVS
QPTUT
BOE
QPSUGPMJPT
XJUIJO

ZPVS
$BMFOEBS
UP
EFUFSNJOF
XIBU

DPOUFOU
BQQFBST
XIFSF
PO
ZPVS
TJUF

or Scheduled. Then click save. Once a post has been created :PV
DBO
RVJDLMZ
MJOF
VQ
BMM
PG
ZPVS

04 Adjusting posts
If a post has not yet been published you can click
and drag on it within the calendar. Drag the post to the date
within the calendar it will display its current status, showing
you if it is a draft, pending or scheduled post. Once the time
and date arrives that the post is setup to be published on it
QPSUGPMJP
QPTUT
JO
B
TJNQMF
PSEFS

POF
QPTU
QFS
EBZ
UP
PSEFS
BOE

BSSBOHF
UIFN
that you want it to be published on. You can then use the will then be made live on your site.

WordPress Genius Guide 125

Customisation
Transform your WordPress site
128 Add multiple moving
backgrounds
Add moving background elements to
your site

130 Create an animated logo

with CSS3
Animate your sites logo with this
great tutorial

134 Blur and focus your text

with Font Font
Use Font Font to create a fun flur and
focus effect

136 Build circular on-hover

navigation
Improve your site navigation with on-
hover animation effects

138 Create animated buttons

with CSS3
Make anitmated buttons for your website
with CSS3

142 Code a fixed image

scroll-over effect
Create a scroll-over hover effect
with HugeInc

144 Make an animated off-

screen 3D menu
Make the most of your virtual real estate
by implementing an off-screen menu

148 Master animated

pop-up effects
Make great pop-ups for your website with
this tutorial

150 Create a rotating product

viewer
Display your products for your visitors to
see from every angle

126 WordPress Genius Guide

 WordPress
Genius Guide

Top tip
By adding
individually coded
elements to your
site, you can make it
stand heads above
the rest.

WordPress Genius Guide 127

 Customisation

Add multiple moving

TUTORIAL
OBJECTIVE
Use HTML5 to create an
animated header

TIME REQUIRED
1 Hour 30 Minutes

backgrounds
ADDING A SPECTACULAR VISUAL EFFECT TO YOUR WEBPAGE WILL DRASTICALLY IMPROVE
YOUR VIEWERS EXPERIENCE, AND HERES HOW YOU CAN DO IT
ZURICH-BASED CREATIVE AGENCY Hinderling excels is in combining these techniques and integrating them into
Volkarts tag line is Integrated at heart and its work the story that it is telling on its clients behalf. This is a website that
for Swiss International Air Lines showcases the demands to be explored; it puts you in the shoes of their pilots,
agencys commitment to this philosophy in action. You aircrew and passengers. It tells the stories that help express the
will have seen many of the effects used here before, from parallax values of the airline in such a way that you become fully immersed
backgrounds to fullscreen video, but where Hinderling Volkart in the world Hinderling Volkart has created: the World of Swiss.

Top tip
Available from github.
com/Prinzhorn/skrollr,
Skrollr is a standalone
library and, at around 12kb
2
minified, wont keep your
users waiting. It defines
animations and takes
care of vendor
prefixes.
1
3

Background Clean type Viewport Engaging video Minimal interface

If you were a Swiss airline Having a Swiss client whose The site detects the The videos are a must The interface encourages
youd be missing a trick if values include minimalism, viewport width and if watch and are cleverly you to explore and there are
you didnt make use of precision and attention to you dont have the integrated as part of the ample visual cues to point
the amazing alpine detail assists the design pixels, you dont see site experience. You can out the availability of
landscape. It provides effort a great deal. As far as the show. Sometimes enjoy a flight from the content. The menu in the
the perfect backdrop for typography goes, there its better to just say cockpit, with the crew, or top-right provides more
the story wont be a serif in sight sorry and move on travel as a customer direct access to content

128 WordPress Genius Guide

 WordPress
Genius Guide

1 Inspiration Where do you want to go today? 3 Technique

When Microsoft threw down this
challenge during the Nineties, it was
dynamic user experience enables
designers to explore new options and
Skrollr lets you animate any CSS
property depending on the horizontal
Multiple moving
encouraging people to explore Alexander Prinzhorns Skrollr library scrollbar position. Just decide on the backgrounds
possibilities with the tools available. ranks as one of the best tools for animation(s) you require and define
When it comes to animating pages, less is
Having a rich set of tools to provide a creating visually rich user experiences. key frames for each element.
often more. Its important to consider the
best way of communicating your content

2
and which techniques will best support that.

Technique Standalone animation library

01 HTML first
Skrollr animates your page elements when you
assign data attributes to them and specify the animation
shorthand for saying keep things as they were at the
previous scroll point.

state that is required for a particular scroll point. The simplest 001 <div id=transform data-500=
task to set up is any parallax background you may require. transform:scale(0) rotate(0deg);
Skrollr can handle any size of graphic, including tiled and data-1000=transform:scale(1)

01 Clouds
non-tiled images. rotate(360deg);opacity:1; data-
1600= data-1700=transform: This is one huge tile at
001 <div id=bg1 data-0=background- scale(2) rotate(0deg);opacity:0;> 1500x900px but it weighs in at just 38kb. Its
position:0px 0px; data-end= 002 <h2>Parallax</h2> starting to look artefact-y, but if site visitors
background-position:-450px 003 <p>Is only part of it</p> are looking closely at your backgrounds
-10000px;></div> 004 </div> then its likely you have more important
002 <div id=bg2 data-0=background- 005 issues to deal with.
position:0px 0px; data-end=

04 Content blocks
background-position:-250px
-8000px;></div> Skrollr also handles content blocks and here the
003 <div id=bg3 data-0=background- content is brought into view as the scroll continues, made
position:0px 0px; data-end= sticky for a few hundred pixels before then scrolling up
background-position: 0px -6000px and off screen again. Skrollr will handle multiple animations
;></div> concurrently and the range of effects that is achievable is
virtually unlimited.

02 Animated <div>s
You animate an element by specifying its position 001 <div id=properties data-1700=

02 First background
on screen at the first scroll point: here 30% from the top at top:100%; data-2200=top:0%;
scroll point 0 (the top of the page) and the final position: top data-2300=display:block; data- This background needs to be a
0% (top of the page) then the page has scrolled up 500px. 2500=top:-100%;display:none;> 24-bit PNG to enable the transparency and
You can also apply many other transformations. Here, the 002 <h2>Total control</h2> quality the format provides. As well as the
opacity of the <div> changes from 0.7 to 0 as the page 003 <p>Anywhere on the page</p> balloons scrolling, Skrollr enables
scrolls up. 004 </div> transformations along the X-axis, which
helps to reduce the appearance of

05 No surprises in CSS
001 <div id=intro data-0=opacity:0.7; uniformed repetitive tiles.
top:30%; data-500=opacity:0; top:0%;> The CSS is all standard stuff. When using multiple
002 <h1>Multiple Moving layers youll need to use z-index to keep your layers in order
Backgrounds</h1> and thats really all there is to it. However, if you want to
003 <h2>Using Skrollr</h2> stand out from the competition, this tool is so easy to use
004 <p class=arrow>W</p> that youll need to work especially hard to create something
004 </div> fresh and original.

03 Flying in
001 #intro {
To create a relatively complex animation using 002 position:fixed;
these tools is quite straightforward. This animation makes 003 left:50%;

03 Second background
the <div> appear from nowhere (scale 0) and do a 004 width:500px;
360-degree rotate. Once the user has had the chance to 005 margin-left:-266px; A little trial and error is necessary
read the content, it continues to fly towards the user (scale 006 background: rgba(255,255,255,0.7); to balance the relationship between the
2), spinning round again and disappearing into thin air. Not 007 text-align:center; backgrounds but dont get too carried
bad work for three or four data statements. The empty 008 z-index:49; away fine-tuning, as the relationships will
specification in data-1600 is a code-efficient useful 009 } tend to shift in different-sized viewpoints.

WordPress Genius Guide 129

 Customisation

Create an TUTORIAL
OBJECTIVE
Create an animated
logo for your website
using CSS3
CREATING ANIMATIONS USING CSS3 is
becoming more and more popular
because of the ease of use and the
browser support the new properties

animated
now have. Also, as interactive projects get more
TIME REQUIRED aggressive and mobile devices are now a priority,
1 hour
performance has become increasingly important.
Animating the scale, rotation, and position of an

logo using
element is now common. In CSS, theyre all
crammed into one transform property, making
them impossible to animate in a truly distinct way
on a single element. For example, what if you
wanted to animate rotation independently, with

CSS3
different timings and eases? The @keyframe rule
lets authors control the intermediate steps in a CSS
animation sequence by establishing keyframes (or
waypoints) along the animation sequence that must
be reached by certain points during the animation.
This gives you more specific control over the steps
ADD ANIMATION TO SIMPLE DIVS USING CSS3 KEYFRAMES of the sequence.
AND TRANSFORMS In this tutorial, we look at using keyframes
combined with other animation properties, such as
translate, transform and transition, and create an
animated cube you could use as a logo for your site.

01 New HTML document that to give us even more control on positioning any 006 <div class=side></div>
The first step is to create a new HTML5 elements within. 007 <div class=side></div>
document and call it index.html and then add in the 008 </div>
meta data, which includes the viewport meta name. The 001 <section id=wrapper>

06 Cube content
viewport meta tag is added just in case we want to 002 <div class=cube-wrapper>
make our page responsive. And lastly we can add in our 003 </div> Having added our side divs in the last step,
link to our style sheet. 004 </section><!-- END wrapper --> we now need to add an extra class to each one. As
you can see each new class represents the side of

04 Logo text
001 <meta name=description content=Animated that cube. Then lastly we want each side to show
Logo using CSS3> Adding in the HTML for our logo is going to be some text within and the only sides we wont be
002 <meta name=viewport content=width= pretty straightforward as all we are going to do is add in seeing as the cube spins are the top and bottom, so
device-width, user-scalable=no> a div with a class name of logo_text. And then within that leave those empty.
003 <!-- css --> we will add an h1 tag and use a span tag with a class
004 <link rel=stylesheet href=styles.css> name of green to wrap around the first word, so we can 001 <div class=cube>
then give it a green colour using CSS. 002 <div class=side front>CSS3</div>

02 Google fonts
003 <div class=side back>HTML5</div>
Even though were not going to be using a 001 <div class=logo_text> 004 <div class=side top></div>
large amount of text, its still a good idea to pick the font 002 <h1><span class=green>iCube 005 <div class=side bottom></div>
that we think would enhance the style of our logo and </span> Designs</h1> 006 <div class=side left>Wordpress</div>
what better way than to use Google fonts (www.google. 003 </div> 007 <div class=side right>Graphic Design
com/fonts) to accomplish this. Simply enough we just </div>

05 Building the cube

choose the font we want to use and then point to it 008 </div>
within our head section. The idea of this tutorial is to have a rotating

001 <!-- Google fonts -->

002 <link href=http://fonts.googleapis.com/
cube that just sits below our logo, so the next step will be
to add a div with a class name of cube. Then inside that
we add another six divs all with a class name of side. Im
07 Adding our CSS
As always when we open a new CSS file, we
add in some default styles to our page. Here we give our
css?family=Questrial rel=stylesheet type sure you can guess each side div represents each side background an off-white colour and set the font to
=text/css> of the cube, so lets finish that off in the next step. Questrial which is what we chose from Google fonts. We
then centre everything and push it down by 100 pixels to

03 Page and cube wrapper

001 <div class=cube> give our cube some room.
Using the section element, we can add in 002 <div class=side></div>
a wrapper section that we will use to centre all our 003 <div class=side></div> 001 body{
content. Then within this wrapper we can add in 004 <div class=side></div> 002 background: #f9f9f9;
another wrapper called cube-wrapper and use 005 <div class=side></div> 003 font-family: Questrial, sans-serif;

130 WordPress Genius Guide

 WordPress
Genius Guide

<top left>
s
/PX
UIBU
XF
IBWF
BMM
UIF

)5.-
DPNQMFUFE
XF
BSF
MFGU

XJUI
KVTU
UIF
CBSFCPOFT
PG

PVS
QSPKFDU
<top right>
s
5IF
JSTU
CJU
PG
$44
IBT
OPX

CFFO
BEEFE
XJUI
PVS

(PPHMF
GPOU
BOE

CBDLHSPVOE
DPMPVS
DMFBSMZ

CFJOH
TFFO
<bottom left>
s
8JUI
UIF
JSTU
BOJNBUJPO

TFRVFODF
BEEFE
XF
DBO
TFF

UIF
DPOUFOU
TQJO
BSPVOE
<bottom right>
s
/PX
UIBU
XFWF
BEEFE

TPNF
TUZMFT
UP
UIF
TJEF

QBOFMT
UIJOHT
BSF

UBLJOH
TIBQF

Top tip
004 } 003 from { -webkit-transform: rotateY(0); } 5IF
AQSFTFSWFE
WBMVF

005 #wrapper { 004 to { -webkit-transform: EFUFSNJOFT
JG
UIBU
FMFNFOUT

006 width: 900px; rotateY(360deg); } DIJMESFO
BSF
QPTJUJPOFE

007 margin: 100px auto; 005 } JO
%
TQBDF
PS

008 }
MBUUFOFE

08 Cube perspective
The cube isnt a cube until we give it some
10 Spinning the cube
Now that we have set the starting point
and finishing point of our spin animation sequence, 001 /* cube sides */
perspective, and we can do that by targeting the we can add that to our cube using animation: spin 002 .side{
cube-wrapper class. We first set its positioning to and set its speed to four seconds and make it infinite. 003 position:absolute;
relative and then we give it some perspective. One thing to remember is the keyframe identifier 004 width:200px;
can be called anything you want, weve called it 005 height:200px;
001 /* cube wrapper */ spin so we then know what that animation identifier 006 display:block;
002 will do. 007 background:rgba(255,255,255,0.1);
003 .cube-wrapper { 008 box-shadow:inset 0 0 30px
004 position:relative; 001 .cube { rgba(0,0,0,0.2);
005 -webkit-perspective: 500; 002 position: relative; 009 font-size:20px;
006 -webkit-perspective-origin: 50% 100px; 003 margin: 0 auto; 010 text-align:center;
007 } 004 width: 200px; 011 line-height:200px;
008 005 -webkit-transform-style: preserve-3d; 012 color:rgba(0,0,0,0.5);
006 -webkit-animation: spin 4s infinite 013 text-transform:uppercase;

09 @keyframe rule linear; 014 -webkit-transition: all 1s linear;

With the @keyframe rule, we can specify 007 -webkit-transition: all 1s linear; 015
where an animation starts and where it finishes and tie 008 } 016 }
that into any CSS animation property such as transform. 009
So here we are rotating our cube from 0 to 360
degrees. We then add what is known as an identifier
called spin which allows us to add that identifier to any 11 Side panels
If we viewed this in the browser now, we would
12 Back side
Now that we have some styles added to our
side panels, we want to think about moving our side
CSS rule. see nothing but our cubes content spinning around, lost panels away from the centre to give us that cube look.
and confused. So lets now add some CSS to the side We can achieve this by using the transform: translate
001 /* keyframes for rotating animation */ panels of our cube so we can start making things look property and position the back panel using the z axis
002 @-webkit-keyframes spin { how we want them to look. and rotate it 180 degrees.

WordPress Genius Guide 131

 Customisation

< top left>

s
)FSF
XF
IBWF
QPTJUJPOFE

UIF
CBDL
QBOFM
CZ
VTJOH

AUSBOTMBUF;
BOE
ASPUBUF:
< top right>
s
5IF
SJHIU
TJEF
IBT
OPX

CFFO
BEEFE
BOE
ZPV
DBO
TFF

UIJOHT
TUBSUJOH
UP
UBLF
TIBQF
< bottom left>
s
/PX
XF
IBWF
BEEFE
JO
UIF

MFGU
TJEF
ZPV
DBO
DMFBSMZ
TFF

XIBU
QBOFM
JT
XIBU
CZ

SFBEJOH
UIF
DPOUFOU
< bottom right>
s
5IF
UPQ
TJEF
JT
BEEFE
BOE

QPTJUJPOFE
JO
UIJT
TUFQ
BOE

XF
BSF
BMNPTU
EPOF

15 The top panel 17 The typing animation

001 .back
002 { We have three more panels left and those To add some more animation to our project, we
003 -webkit-transform: translateZ(-100px) are the top, bottom and front. Both the top and can create a typing animation to our title. So again lets
rotateY(180deg); bottom panels dont have any content within them as add in a start and stop sequence with a custom identifier
004 } we didnt add that within the HTML, simply because called typing. We have set the ending point to a width of
we wouldnt really see it once we have positioned 7em, but you may want to adjust this depending on the

13 The right panel

In this step we are going to rotate our
right-sided panel on the Y axis and translate it on the X
them. But looking at the animation now, we can
clearly see what panel is what by referring to the
HTML content.
length of your own title.

001 @-webkit-keyframes typing {

axis. To help us position the panel to exactly where we 002 from { width: 0 }
want it, we make sure we set the rotation point top right 001 .top{ 003 to { width:7em }
by using the transform-origin property. 002 -webkit-transform:rotateX(-90deg) 004 }
translateY(-100px);

18 Blinking cursor
001 .right{ 003 -webkit-transform-origin: top center;
002 -webkit-transform:rotateY 004 } Now that we have the typing animation
(-270deg) translateX(100px); sequence set we need to create a blinking cursor

16 Bottom and front panels

003 -webkit-transform-origin: top right; animation sequence so it looks like the text is being
004 } To finish off our cube we can now position typed. Again to keep things nice and simple and
our bottom and front panels. The bottom panel is descriptive, lets give this animation sequence the name

14 The left-sided panel

The left-sided panel is going to sit exactly the
opposite to our right-sided panel. So all we really need to
self-explanatory, but the front panel doesnt need
much work because it is already at the correct angle.
So all we need to do is push it forward on the Z axis by
blink and a default colour of black.

001 @-webkit-keyframes blink {

do is use the same set of properties and values as our 100 pixels. 002 from, to { border-color: transparent }
right-sided CSS rule, but make sure we use a positive and 003 50% { border-color: black }
negative accordingly. We then set the rotation point to be 001 .bottom{ 004 }
centre left. 002 -webkit-transform:rotateX(90deg)

20 Logo text styles

translateY(100px);
001 .left{ 003 -webkit-transform-origin: bottom center; So now we need to style our text and
002 -webkit-transform:rotateY(270deg) 004 } position it accordingly using absolute positioning.
translateX(-100px); 005 .front{ We then use the Google font we chose (Questrial)
003 -webkit-transform-origin: center left; 006 -webkit-transform: translateZ(100px); and set its size. Then lets create the cursor and we
004 } 007 } will make the blink by adding a border right. Then

132 WordPress Genius Guide

 WordPress
Genius Guide

The @keyframes at-rule

The first unusual thing youll notice about any CSS3
animation code is the keyframe @ rule. According
to the spec, this specialised CSS @ rule is followed
by an identifier that is referred to in another part of
the CSS.

001 @-webkit-keyframes blink {

002 }

The word Blink is an identifier and its chosen

by us, the developer. The @ rule and its identifier
are then followed by a number of rule sets (ie
< top left> style rules with declaration blocks, as in normal
s
With the bottom and front panels added, we now have a rotating cube all ready to add our cursor animation CSS code).

001 @-webkit-keyframes blink {

to shorten the cursor we can add in a line height
Top tip 002 from, to {
of 1 pixel.
The transform-origin property 003 }
is used in conjunction with CSS
001 .logo_text { transforms, letting you change 001 50% {
002 position: absolute; the point of origin of 002 }
003 top: -70px; a transform.
004 left: 350px; 001 80% {
005 font-family: Questrial, sans-serif; 002 }
006 font-size: 2em; 003 }
007 white-space:nowrap; of green and give it a default green colour. We will also set
008 overflow:hidden; the font weight to bold so its more prominent, and thats it. With the addition of those new rule sets, weve
009 border-right: .1em solid black; introduced keyframe keywords and selectors. In
010 line-height: 1px; 001 .logo_text .green { font-weight: bold; the code example above, the keyframe selectors
011 color: green;} are 50% and 80%. And the keywords are from and
to which is what we used throughout this
tutorial, but you can use either of these to get the

21 Animate the cursor

To animate the right border to look like a
cursor, all we need to do is add this next bit of CSS to the
23 Final thoughts
CSS animations can be used to really bring a
website to life. While the code for our cube logo may not
same result.

end of the same rule as in the last step (.logo_text) The be the most semantic, it hopefully shows how simple it
values we have set here allow us to control the speed of can be to bring almost anything on the page to life using
our animation and how many steps it will go through, so CSS. So go forth and animate! We use the same
in our case the number of characters which is 13
(including the space in between the words). set of properties and
001 -webkit-animation: typing 2s steps
(13, end),
values as our right-
002
003
blink 1s step-end infinite; sided CSS rule, but
004 } we use a positive
and negative
22 Finishing off our logo
To give our logo text a bit of colour, were going
to target the <span> tag we added with the class name accordingly
WordPress Genius Guide 133
 Customisation

Blur and focus your

TUTORIAL
OBJECTIVE
Use HTML5 to create an
animated header

TIME REQUIRED

text with Font Font

1 Hour 30 Minutes

THE RIGHT FONT CAN BE THE ICING ON YOUR WEBSITE CAKE. CHOOSING WHICH
IS BEST, AND HOW TO ADAPT ITS LOOK, IS VITAL TO ANY WEBSITE
WHEN TYPEFACES ARE the very change them and see them in action
nature of your business, such as with
Font Font, who design and produce
before purchasing the associated
type. Users are able to get as
Top tip
some of the best typefaces in the creative as they want with all the
Type geeks may spot Eric
industry, then your site must show these off in possibilities at hand, and the site
Spiekermann in the video of
all their glory. The ffmark.com site has some offers a great source of
ffmark.com who is a
lovely touches on the website, such as being able inspiration. This site really shows
self-pronounced typophile
to edit type on books, page layouts and even off the rich typography that is
and one of the worlds
with a world clock. Not only does the user have now available for all web
leading experts on
the ability to edit these typefaces but they can designers to use today.
typography.

1 2

Info button Keep the focus Fixed and fading More to explore Try it yourself
The info button contains The main headline of As the user scrolls down The arrow at the bottom of Once the user scrolls
instructions to scroll down the site is in focus while the page the text and the screen is essential in down the page, other
just in case the user doesnt the remaining text and video remain fixed in allowing the user to know content becomes
understand the arrow. The the background, which place but the headline that there is more content available with more
icon is kept consistent is a video, is blurred so starts to fade out, while below. This is always interactive features that
with site branding and the that the user cannot see the other text and video particularly useful when enable the user to try
social icons the content fade into focus the video fills the full screen out the typography

134 WordPress Genius Guide

 WordPress
Genius Guide

1 Inspiration Focusing the typography 3 Technique

One of the most stunning aspects of
the ffmark.com site is the blurred text
starts to blur, while the background
and second text area are brought into
technique can also be applied to text
but we have shown another way using
Create the map
and background video that appears focus. The blurring is fairly the text shadow effect and making the
The background to the world time section of
when you enter the site. As the user straightforward to do: just add text transparent over the top. Then just
the site features a large and engaging world
scrolls down the page the headline -webkit-filter: blur(32px);. The same change the amount of blur.
map. Here we show how to create and
customise a world map for use in your own

2
backgrounds to your sites.

Technique Blur text with Scrollr

01 Style the body

Were going to start this project by adding
some CSS which can be placed either in the head of the
JavaScript with the Scrollr (github.com/Prinzhorn/
skrollr) library that well add in the final step.

document or in a separate CSS file. Here we are making 001 <div id=intro>
the font weight bold and increasing the default size of 002 <div class=top data-0=color:

01 Get the map

the text on the page. As we are blurring text, its a good transparent; text-shadow: 0 0 0.1px
idea to make it just a little bigger. rgba(0,0,0,1); data-1000= text- Its virtually impossible to start
shadow: 0 0 32px rgba(0,0,0,0.5);> drawing a world map and why bother

02 Position the text

003 <h1>FOCUS YOUR MIND</h1> when there are so many available online?
We now position our text that will be placed 004 <p>Scroll down to focus the text</ Head over to Wikipedia (bit.ly/pTfg9) as they
into a container with the ID of intro. We are making this p> have several maps available in SVG format,
fixed on the screen so that as the scrollbar moves down 005 </div> so can be scaled easily to fit any page. Click
the page we can still see the text. This is important as one that you think will best suit your needs,
well be blurring the text. We centre the text on the page.

001 #intro {
04 The remaining text
The first text will blur out as the user scrolls
and the next text will become sharp. We are doing this
it will be displayed on its own page, save this
page in order to save the SVG image.

002 position: fixed; by setting a 32px text-shadow blur at 0px scroll, while at
003 width:80%; 1000px scroll we change the text-shadow blur to 0 so
004 left:50%; top:1em; no blurring at all. We then hide the original text so that
005 margin-left:-40%; we can only see the text shadow.
006 padding:2em;
007 text-align:center; 001 <div data-0=color: transparent;

02 Edit the map

008 } text-shadow: 0 0 32px rgba(0,0,0,0.5);
009 .top { margin-bottom: 80px;} data-1000=text-shadow: 0 0 0 SVG files can be opened in vector
010 </style> rgba(0,0,0,1);> editing applications such as Illustrator or
002 <h2>ALL WILL BE REVEALED</h2> Inkscape. Open the file and change the

03 Add body copy

003 <p>CSS text-shadow blur controlled colour of the fill to one that will suit the
We will now move to the body section of our by scrolling</p> design you are creating. You can also select
HTML document and add in the intro ID <div> to place 004 </div> local areas such as Antarctica which you
our text inside. We then add our text to another <div> 005 </div> perhaps dont want to display.
that has a data element. This will be picked up by

04 Finishing touches
Download the Scrollr library from GitHub and
move the dist folder into your local folder. Then, before
closing the body tag, add the code shown below to link
up the library and start it all up. Now save the document
and view it in the browser to see everything in action.

001 <script type=text/javascript

03 Save for use

src=dist/skrollr.min.js></script>
002 <!--[if lt IE 9]> The final step is to use the image
003 <script type=text/javascript on the web so you can either choose
Here we are controlling the text blurring by hiding src=dist/skrollr.ie.min.js></script> File>Save for Web and save as a transparent
the original text and turning on the text shadow. 004 <![endif]--> PNG image or choose File>Save As and
By increasing and decreasing the shadow 005 <script type=text/javascript>
blurriness we can make the text fade in and out of
choose SVG. Modern browsers will be able
006 var s = skrollr.init(); to display either one of these in the
focus quite easily, making for a great effect.
007 </script> document.

WordPress Genius Guide 135

 Customisation

Build circular
on-hover navigation
IMPLEMENT A MINIMALIST GEOMETRIC DESIGN WITH ON-HOVER EFFECT FOR EASIER SITE Inside content
The navigation items
NAVIGATION, AS INSPIRED BY HENGE07.COM/TRAVEL are made as regular
HTML containers, so
any content type can
be inserted like images

Animation trigger
The animations on the
page are triggered when
the user hovers the mouse
cursor over one of the
navigation items

Circular shape
The circle shape of the
items is achieved by using
a border radius of 100 per
cent, enabling any sized
circle to be made

Navigation items Container control

The items are regular Each navigation item
navigation links refined displays with a navigation
to show as table cell container, allowing size
style elements for control and location of
content flow and sizing the navigation items

136 WordPress Genius Guide

 WordPress
Genius Guide

TUTORIAL SOME TYPES OF navigation design are is used to define an animation transition for an opacity
OBJECTIVE intended to be highly noticeable. In the case of one second for later CSS states.
Create animated hover of the inspiration for this tutorial, it is clear that
effects to make menu
elements stand out

TIME REQUIRED
the navigations purpose is to present itself in
a way that directs the user straight to a specific part of
the website. This type of navigation is ideal for areas of a
05 Navigation interaction
The circular navigation items should fade to
become semi-transparent when the user hovers over an
1 hour
website that different types of visitor are accessing by item that isnt being selected. This is achieved in two
making it clear where the information of interest can be stages the first defines all navigations to have a quarter
found. This approach to website design can be highly opacity, then the second stage will select the item to
useful for projects that rely on making enquiries or sales have full opacity.
conversions from users who have never previously
visited the website. In these scenarios, users who dont 001 nav:hover a{
immediately see what they want are more likely to click 002 opacity: 0.25;
on the back button, meaning that the website has failed 003 }
to achieved its purpose. The consequences of these 004 nav:hover a:hover{
bounces can be costly in terms of lost opportunities to 005 opacity: 1;
produce conversions and actual cash expenditure. The 006 }
ability to present clear options doesnt have to be
restricted to multipage websites the same concept can
also be used to navigate to sections on the same page.
Just use ID names for page content elements and refer
06 Background animation
The appearing circle animation used in the
background is made from the first <span> item used as a
to them in your navigation elements using # followed by square block refined into a circle using clip-path. Only
the ID name to navigate to in the href attribute. Make the first <span> element has the properties applied to it
sure you download the full tutorial code by following this to show as the animated circle when the user hovers
link: http://goo.gl/VS9ejb. over the nav item.

01 Define HTML
001 nav a span{
First create the main HTML content that 002 position: absolute;
contains the effects elements. Well use a <nav> element 003 display: table-cell;
to contain the <a> links that become the menu items. 004 vertical-align: middle;
The HTML links to CSS and some JavaScript for the 005 text-align: center;
visual effects. 006 z-index: 0;
007 top: 0;

02 Adapt navigation HTML

008 left: 0;
Create a file called menu.js. Our technique 009 width: 100%;
requires the HTML navigation items to have two span 010 height: 100%;
items the first is used as the background circle and the 011 }
second will contain visible content. Adapting navigation 012 nav a span:first-child{
items with JavaScript means that the default HTML is 013 background: #c00;
good for SEO. 014 opacity: 0.5;
015 transition: -webkit-clip-path 1s, -moz-

03 Define page basics

clip-path 1s, clip-path 1s, border-color 1s;,
Create a new file called styles.css. Insert the opacity 1s;
initial element formatting CSS to define the page body 016 -webkit-clip-path: circle(0% at center);
and navigation. This example will have the navigation set 017 -moz-clip-path: circle(0% at center);
to have child content placed in the middle and display as 018 clip-path: circle(0% at center);
a block element to display at full screen width. 019 }
Pay-per-click 020 nav a:hover span:first-child{
clarity
04 Navigation Items
021 -webkit-clip-path: circle(30% at center);
This type of navigation can be Page navigation items are the <a> links inside 022 -moz-clip-path: circle(50% at center);
highly useful for pay-per-click 023 clip-path: circle(50% at center);
the navigation container. These display with a red border
campaigns that are designed 024 border-color: rgba(0,0,0,0);
and have a bigger font size. Navigation items will
to direct people to a targeted 025 }
animate when hovered, therefore the transition property
landing page. People often
want to see an overview of
the information and then
select for themselves to see The navigations purpose is to present itself in
the parts that interest them,
which this type of navigation a way that directs the user straight to a specific
can be made to provide.
part of the website

WordPress Genius Guide 137

 Customisation

Use CSS3 TUTORIAL CSS3 TRANSFORM HAS been doing the

OBJECTIVE rounds for quite some time. Browsers like
Create animated buttons Firefox, Chrome and Opera have full support
for your WordPress blog
with CSS3 for CSS3 2D and 3D transform techniques.

to create
Along with transform, we also have another cool
TIME REQUIRED property called perspective.
60 minutes
The perspective property defines the intensity of the
3D effect. This is because it defines how far the object is

animated
away from the user. So, a lower value will result in a
more intensive 3D effect than a higher value. But one
thing we need to remember is, when defining the
perspective property for an element, it is the child

buttons
elements that get the perspective view, not the element
itself. When the transform and perspective properties
are combined, you can create some great-looking 3D
animations on a number of different elements.
In this tutorial were going to work with the transform
USING THE TRANSFORM PROPERTY, WELL CREATE and perspective properties and their values to create
SOME COOL-LOOKING 3D BUTTONS THAT WILL ADD four cool-looking 3D buttons that you can use on your
THAT EXTRA POLISH TO YOUR SITE webpages. Each button will be slightly different in its
perspective, which will allow us to really get to know
how the perspective property works. So, open up your
favourite text editor and lets get started!

01 Get ahead
004 </section> 004 <h2>Creative 3D buttons</h2>
After creating a new HTML5 file, open it up 005 </div><!-- END container --> 005 <p class=btn_perspective>
within your favourite text editor and add in the head 006 </body> 006 <button class=btn btn-3d btn-3da>Submit
section. We will need to add in the link to our CSS file and 007 </html> </button>
make sure we have good browser support for our 007 </p>

03 Button HTML
HTML5 and CSS3 so we will use Modernizr. Head over 008 <p class=btn_perspective>
to modernizr.com and grab the latest version. Within the <section> element, we add in a 009 <button class=btn btn-3d btn-3db>Submit
paragraph tag with a class name of btn_perspective, </button>
001 <!DOCTYPE html> which well target later using the perspective CSS3 010 </p>
002 <html lang=en class=no-js> attribute. We then add in our first button, which will 011 <br />
003 <head> contain several class names that well target later on. 012 <p class=btn_perspective>
004 <meta charset=UTF-8 /> 013 <button class=btn btn-3d btn-3dc>Submit
005 <meta http-equiv=X-UA-Compatible 001 <body> </button>
content=IE=edge,chrome=1> 002 <div class=container> 014 </p>
006 <meta name=viewport content= 003 <section class=3d-buttons> 015 <p class=btn_perspective>
width=device-width, initial-scale=1.0> 004 <p class=btn_perspective> 016 <button class=btn btn-3d btn-3dd>Submit
007 <title>Creative 3D Buttons</title> 005 <button class=btn btn-3d btn-3da>Submit </button>
008 <link rel=stylesheet type= </button> 017 </p>
text/css href=css/main.css /> 006 </p> 018 </section>
009 <script src=js/modernizr.custom.js> 007 </section> 019 </div><!-- END container -->
</script> 008 </div><!-- END container 020 </body>
010 </head> 009 </body> 021 </html>
010 </html>

02 Content body
With the head section done, we can now move
on and start adding some HTML within the <body> 04 Finish up the HTML
We already have the HTML for one button, but
05 The CSS Its important to start every project with some
default CSS that we often add to an external CSS reset
section. As always, we are going to add in a container we want to create another three so we can really test out file. For this tutorial well just keep it simple and go ahead
element with a class name of container to allow us to our 3D skills. So, copy and paste the paragraph tag we and add some CSS to the top of a file called main.css,
centre things easily. Then, we will use the <section> created in the last step and make sure the last class and with this CSS we are making sure our box model is
element and give it a class name of 3D-buttons. name is changed accordingly. set properly to every single element that uses the box
model (css-tricks.com/box-sizing).
001 <body> 001 <body>
002 <div class=container> 002 <div class=container> 001 *, *:after, *:before {
003 <section class=3d-buttons> 003 <section class=3d-buttons> 002 -webkit-box-sizing: border-box;

138 WordPress Genius Guide

 WordPress
Genius Guide

<top left>
s
8JUI
PVS
)5.-
OPX
DPNQMFUF

XF
BSF
TFFJOH
UIF
CVUUPOT
BOE

UIJOHT
BSF
OJDFMZ
DFOUSFE
<top right>
s
/PX
UIBU
TPNF
TUZMJOH
JT

BEEFE
UP
PVS
CVUUPOT
XF

DBO
TFF
UIJOHT
TUBSUJOH
UP

UBLF
TIBQF
<bottom left>
s
*O
UIJT
TUFQ
XF
BEEFE
UIF

QFSTQFDUJWF
WBMVFT
CVU
BMTP

TFU
UIF
EJTQMBZ
WBMVF
UP

JOMJOFCMPDL
<bottom right>
s
/PX
XF
DBO
TFF
PVS
CVUUPOT

MPPLJOH
NPSF
QPMJTIFE
XJUI

UIBU
MBU
MPPL
XF
XFSF
BGUFS

09 Button styles
003 -moz-box-sizing: border-box; wraps around our content. Were going to set the height
004 box-sizing: border-box; of the outer container to 100% and position it relative. The idea is to give our buttons that flat look,
005 } Then we use a child combinator selector (>) to target which can easily be achieved by not adding any rounded
006 body, html { our <section> element and centre everything within corners or drop shadows. We will make sure they are
007 font-size: 100%; and add some other default styles. fairly large so we can clearly see the 3D effect once we
008 padding: 0; are finished and, as they are buttons, lets not forget to
009 margin: 0; 001 .container { add the cursor: pointer at the bottom of our rule.
010 height: 100%; 002 height: 100%;
011 } 003 position: relative; 001 /* General button styles */
012 004 } 002 .btn {
005 .container > section { 003 border: none;

06 Body styles
006 margin: 0 auto; 004 position: relative;
Next we need to add in some default styles for 007 padding: 6em 3em; 005 background: none;
our body and links. This is not vital but makes things nice 008 text-align: center; 006 padding: 28px 90px;
and simple as it keeps it all in one place. The background 009 color: #fff; 007 display: inline-block;
colour is going to be a nice light blue and were going to 010 } 008 text-transform: uppercase;
stick to using Arial as our main font. 011 009 margin: 15px 30px;
010 color: inherit;

08 Heading styles
001 body { 011 letter-spacing: 2px;
002 font-family: Arial, sans-serif; What would a page be without a page 012 font-size: .9em;
003 background: #0e83cd; title? Lets add some styles to that. Were going to keep 013 outline: none;
004 } it simple and make the text white with a 20px margin 014 -moz-transition: all 0.4s;
005 a { all around. Then we align it centre and make it 015 -webkit-transition: all 0.4s;
006 color: #888; uppercase. All nice and straightforward so lets move 016 transition: all 0.4s;
007 text-decoration: none; on to the buttons. 017 cursor: pointer;
008 } 018 }
009 a:hover, 001 h2 {

10 Button pseudo
010 a:active { 002 color: #fff;
011 color: #333; 003 margin: 20px; Using the :after pseudo-element, we will make
012 } 004 text-align: center; sure any content behind our button is taken out by using
005 text-transform: uppercase; the content: property. We then ensure that everything is

07 Contain it
006 } positioned absolute so we can then set its index to -1,
Now we need to create a container that 007 with everything else behind.

WordPress Genius Guide 139

 Customisation

<top left>
s
Our first 3D button is done
and we have a nice prominent
3D effect
<top right>
s
The second button is now
done, only this time we have
rotated this at the bottom
<bottom left>
s
Now the third button is
done, with this one rotated on
the X axis
<bottom right>
s
This is our final button
the 3D effect isnt as
prominent here but it looks
good nevertheless

Top tip
There are several different transform
functions, each applying a 12 Button 3D
The transform-style property will determine
whether that element is in 3D space or is flattened. Of
14 Hover state
Now this is where the magic happens. We are
going to rotate the whole button when we hover over it,
different visual effect. Be sure
to experiment and find course we want it to be in 3D, so we add the preserve- making the rotate quite big so that we can see the 3D
your favourites. 3d value to bring the button into 3D space and not be effect more prominently. To do that we add a -45
flattened (which is the default). degree tilt to the button on the x plane.

001 .btn-3d { 001 .btn-3da:hover {

001 .btn:after { 002 display: block; 002 transform: rotateX(-45deg);
002 content: ; 003 background: #5cbcf6; 003 }
003 position: absolute; 004 outline: 1px solid transparent;

15 Button B
004 z-index: -1; 005 transform-style: preserve-3d;
005 -webkit-transition: all 0.4s; 006 } The next button (button B) will be using similar
006 -moz-transition: all 0.4s; 007 .btn-3d:active { styles as our first button, but with a few changes. First
007 transition: all 0.4s; 008 background: #55b7f3; we make sure that the button is positioned 100% to the
008 } 009 } top and origin values both set to 0%. Then we just need
to rotate this -90 degrees.

11 Button perspective
The perspective: CSS property gives an
element a 3D-space by effecting the distance between
13 3D animation
Here we add our first 3D animation to our first
button (a) and set some other styles. The transform-
001 /* Button 3db */
002 .btn-3db:after {
the Z plane and the user. The strength of the effect is origin property sets the point of origin of a transform; 003 width: 100%;
determined by the value. The smaller the value, the the first value is the horizontal position, the second is the 004 height: 40%;
closer you get from the Z plane and the more vertical position. We rotate the x plane to 90 degrees. 005 left: 0;
impressive the visual effect is. The greater the value, the 006 top: 100%;
more subtle the effect will be. 001 .btn-3da:after { 007 background: #53a6d7;
002 width: 100%; 008 transform-origin: 0% 0%;
001 /* Button */ 003 height: 42%; 009 transform: rotateX(-90deg);
002 .btn_perspective { 004 left: 0; 010 }
003 -webkit-perspective: 800px; 005 top: -40%;

16 Hover state B
004 -moz-perspective: 800px; 006 background: #53a6d7;
005 perspective: 800px; 007 transform-origin: 0% 100%; Now we have our first button animated in all its
006 display: inline-block; 008 transform: rotateX(90deg); glory, we just need to use the same property on this
007 } 010 } one. To give us some variation, we will not make this as

140 WordPress Genius Guide

 WordPress
Genius Guide

21 Responsiveness
007 background: #53a6d7;
008 -webkit-transform-origin: 100% 0%; Its only natural that before we wrap this
009 -webkit-transform: rotateY(-90deg); little project up, we think about making the buttons
010 -moz-transform-origin: 100% 0%; responsive. By default the buttons will fall
011 -moz-transform: rotateY(-90deg); underneath each other when the browser window
012 -ms-transform-origin: 100% 0%; is resized, but we want to think about making these
013 -ms-transform: rotateY(-90deg); buttons slightly bigger so that they are easily clickable
014 transform-origin: 100% 0%; using your finger. So, all we do is increase the font size
015 transform: rotateY(-90deg); as shown.
016 }
001 @media screen and (max-width:480px) {

18 C button animation 002 .container {

Lets animate button C by using the same rule 003 font-size: 1.2em;
as before. This time we need to make sure we are 004 }
rotating the Y axis. Again, well change things up a little 005 }
by making this 3D effect less prominent by giving it a
smaller value of 25 degrees.

001 .btn-3dc:hover {
22 Final thoughts
Creating 3D buttons can really help
enhance your web projects. Hopefully this tutorial
002 transform: rotateY(25deg); has demonstrated that not only is it a fun thing to
003 } do, but its fairly straightforward to implement as well.
A challenge for you now would be to try this

19 Finish up
Now we are almost done with our 3D buttons.
All we need to do is add some styles to our last button.
technique to other elements on your page, such
as vertical menus it can look really great on
logos, too.
Again, theres only some small adjustments in this rule,
<above> but we are staying on the Y axis at a positive 90
s
All done! Now we can see how things look degrees and our origin top and left is 0%.
when we resize the browser window
001 /* Button 3dd */

Top tip 002 .btn-3dd:after {

003 width: 20%;
Even with a small project like this, 004 height: 100%;
you should always think about 005 left: 100%;
making it responsive and suitable 006 top: 0;
for mobile like how we made 007 background: #53a6d7;
our buttons larger. 008 -webkit-transform-origin: 0% 0%;
009 -webkit-transform: rotateY(90deg);
Understanding
010 -moz-transform-origin: 0% 0%; transform-origin
011 -moz-transform: rotateY(90deg); As indicated throughout this tutorial, the
deep as the first button, so we give the rotateX property
012 -ms-transform-origin: 0% 0%; transform-origin property can take up to two
a value of just 35 degrees. space-separated keywords or length values for a 2D
013 -ms-transform: rotateY(90deg);
transform and up to three values for a 3D transform.
001 .btn-3db:hover { 014 transform-origin: 0% 0%;
002 transform: rotateX(35deg); 015 transform: rotateY(90deg); .square {
003 } 016 } transform-origin: top left;
transform: rotate(360deg);

17 Button C styles 20 Button D animation

}
Here we continue on to our next button and Finally we will add in our animation for Button Using the code above on a 100 x 100px box, with the
add some slightly different styles. The thing to note here D. We are going to rotate this one on the Y axis and transform applied to a transition using a click event,
is that the origin is now set to 100% at the top and we are again we will make this a lot less prominent than before a box would swing around 360 degrees once clicked
on. By default, the origin of a transform is 50% 50%,
rotating the Y axis, not the X. Also, to make sure we are by lowering the value to 15 degrees. Weve also added
which is exactly in the centre of any given element.
targeting all browsers, weve added the browser prefixes in our browser prefixes too.
Changing the origin to top left (as in the code
to this rule (which you should do for the previous rules)
above) causes the element to use the top-left corner
001 .btn-3dd:hover {
of the element as a rotation point.
001 /* Button 3dc */ 002 -webkit-transform: rotateY(-15deg);
The first value is the horizontal position, the
002 .btn-3dc:after { 003 -moz-transform: rotateY(-15deg); second value is the vertical position and the third
003 width: 20%; 004 -ms-transform: rotateY(-15deg); value represents the position on the Z axis. The third
004 height: 100%; 005 transform: rotateY(-15deg); value will only work if you are using 3D transforms
005 left: -20%; 006 } and it cannot be a percentage.
006 top: 0; 007

WordPress Genius Guide 141

 Customisation

Code a fixed image

TUTORIAL
OBJECTIVE
Create this simple effect
to live by the less is more
philopsophy

scroll-over effect
TIME REQUIRED
1 hour

FOLLOW THIS TUTORIAL TO EMULATE THIS ACE DESIGN INSPIRED BY THE FOLKS AT
WWW.HUGEINC.COM
SIMPLICITY IS A goal many designers story of the brand and how it works
seek but with its less, but better
philosophy, Huge seems to achieve
with clients. On arriving at the site,
three full-page slides demonstrate
Top tip
Huges Wes Hatch
so much more than the rest. When the agencys approach and
discusses the fullscreen
redesigning its own website, Huge continued to values, and when that message
scroller at bit.ly/1jxW2HY
realise opportunities to evolve, and has has been delivered, the site flows
providing a fascinating
masterfully engineered an online experience that into a magazine-style
glimpse into the
powerfully communicates its brand. presentation of what it means to
development process.
Positioning their emblematic H front and be Huge. Less, but better it
centre provides a perfect vehicle for telling the certainly is.

2
1

Colour palette Accessible content Keep it simple Candid moments Consistency

If youre looking for a Huge The hamburger menu There is so much to appreciate Definitely check out the video The home page adopts the
colour, magentas not a bad provides ready access to in the simplicity of this page. of the people holding axes! popular long single-page
choice. It has a confident, the content youd With only one graphic and ten Other candid photos and videos approach but by scrolling up in
simple purity that is also typically see on a main words it communicates so of the Huge team in action also whole page chunks for the first
conveyed through absence menu without making much what was done, who it help explain what the agency is three sections, the simplicity
of anything remotely round you have to look at them was for and how it was all about much better than a and consistency of the H
cornered or drop shadowed the whole time received. Job done traditional About page emblem remains in place

142 WordPress Genius Guide

 WordPress
Genius Guide

1 Inspiration Huge inspiration 3 Technique

At Huge, we really try to understand
our audience and design for them. So
two groups: those who want to work
with us and those who want us to
simplicity for both groups. What we
came up with is the iconic H: a way to
Initial ideas
In homage to Huges iconic Hs, the
when the time came for our own do work for them. So, we set out to celebrate great client work, but always
workshop files use the World Wide Webs
redesign, we found that the majority of create an experience that showed off through the lens of the Huge brand
recent 25th birthday for its inspiration. You
people visiting agency websites fell into the work that we do, with style and and the great people who make it.
could choose your own letter or initials, or
maybe create an original party invitation, the

2
possibilities are endless!

Technique Scroll-over effect using fullPage.js

can do this using one of the plugin configuration

01 HTML head
This technique uses the jQuery library
and jQuery-UI if you want easing effects. The
options, slidesColor.

001 @import url(http://fonts.

fullPage.js plugin is well documented in the googleapis.com/
README.md file. There are more than twenty css?family=Righteous);
configurable options and advanced settings. For this 002 h1{
workshop the verticalCentered option has been set 003 font-size: 70px;

01 Beauty and boards

to false so that the titles can appear at top of the 004 line-height: 75px;
page rather than over the main graphic. The 005 padding-top: 40px; People images are a good choice
continuous scrolling and page navigation feature have 006 font-family: for creating full-page designs and Flickrs
been set to true. Righteous,arial,helvetica; Creative Commons library is a great free
007 color: #eee; source. You can also find plenty of public

02 HTML body
008 text-shadow: 3px 3px #000; domain images online or simply create
To simulate the effect used on the Huge 009 } your own.
site, the layout and functionality has been kept nice 010 .section{ text-align:center; }
and simple for its visitors. However, you can obviously 011 .w1 {
populate each <div> with whatever content you would 012 background: url(imgs/w1.jpg)
like, as well as make use of the many additional options no-repeat center center fixed;
offered by the fullPage.js plugin. For example you can 013 background-size: cover;
introduce the addition of a landscape slider just by 014 }
adding in some nested <div>s. There are ten examples 015
within the plugin package.

03 Style the content 04 Space out the pips

The jquery.fullPage.css file gives you access
This example uses only a fullscreen
background for each section and a single heading.
You just need to create a new class for each
to the styling applied by the plugin. In the tutorial, the
navigation pips on the right-hand side have been made
much bigger and lighter and these changes were made
02 Consistency
and contrast
The key to mastering the effect is to ensure
background you want to display and then apply the in the .fullPage-slidesNav li and span. Increasing the that your central element stays put on each
class to the relevant section. If you just want to height enables the pips to be spaced out. section, so youll probably want to copy your
change the background colour of each section you layer letter into a new Group for each
001 .fullPage-slidesNav li { section that you need.
002 display: block;
003 width: 14px;
004 height: 40px;
005 margin: 7px;
006 position:relative;
007 }

05 Grow and colour the pips

The pip heights and widths have been
increased to 30px each. As the border radius was set to
Spanish developer lvaro Trigo is the creator
behind the fullPage.js plugin. It is well
documented and under active development. If
50 per cent, there was no need to change that value to
have it render the square as a circle. RGBa colours with
80 per cent and 30 per cent opacity were used to
03 Create the
unexpected
Do something out of the ordinary if you
you want to extend the functionality you are sure
enable the background to show through the new white really want to be remembered. Whatever
to be able to find support on Trigos GitHub page,
at github.com/alvarotrigo/fullPage.js. controls. There you have it, your scroll-over effect is you do, make it your own. Here we have
ready to go! celebrated the completion of the project

WordPress Genius Guide 143

 Customisation

Make an
A LOT OF THE projects that are featured
TUTORIAL in this bookazine demonstrate how to
OBJECTIVE
Add engagement to approach the implementation of some
navigation with 45-degree really unique features. Most of these have
page views

animated
some quirky way of interacting with the menu, and as
TIME REQUIRED the user tends to do most of the interaction with the
1 hour 30 minutes menu, its usually a good place to start when creating
a unique focal point for your site. In this tutorial we

off-screen
are going to look at CSS3 transformations that, by
default, are hardware accelerated. As such, we can
add lovely 3D effects and transitions to our content
by adding and removing classes that will trigger the

3D menu
animations. In this menu we will have an off-screen
menu that slides in from the left-hand side. Theres
nothing out of the ordinary about that, except that
our page content will flip out of the way using a 3D
transform that will enable the menu to take full focus
GET YOUR MENU TO STAND OUT WITH A on the page. Then, when its time to bring the page
45-DEGREE PAGE VIEW OFF SCREEN back, the user can simply click on the page to get the
menu to slide back out and the page to rotate back
into full view. A little trick here to make this work is to
stop the page from being scrollable while the page is
rotated out to one side. Experiment with the effect on
your site, starting by downloading resources from the
following link: http://goo.gl/S1BkT0.

01 Start the project

Open the start folder in Brackets or place it in
your local web server folder. Take a look at the page,
design on the screen. Its given a z-index thats higher
than the rest of the menu so that all the main content will
be visible above this.
05 Tidy up the open page
When the menu opens, the container that
holds the regular page content is made to have no
before starting the project, in a web browser to see that overflow. This helps it to twist out with a 3D perspective
there is a basic page on display a menu needs to be 001 .container { to it without having the rest of the page on display. At this
added to this. There is a comment in the index.html page 002 background: #fff; point the cursor is set as a pointer so that the container
showing the end of the twist div. Add the menu in here. 003 min-height: 100%; becomes the button to bring the page back into the
004 position: relative; main view.
001 <nav class="offscreen-nav"> 005 outline: 1px solid rgba(0,0,0,0);
002 <a href="#">Home</a> 006 z-index: 10; 001 .open .container {
003 <a href="#">News</a> 007 -webkit-transform: translateZ(0) 002 position: absolute;
004 <a href="#">Blog</a> translateX(0) rotateY(0deg); 003 overflow: hidden;
005 <a href="#">Portfolio</a> 008 transform: translateZ(0) translateX(0) 004 width: 100%;
006 <a href="#">Contact</a> rotateY(0deg); 005 height: 100%;
007 <a href="#">About</a> 009 006 cursor: pointer;
008 </nav> 007 -webkit-backface-visibility: hidden;

04 More page positioning

008 backface-visibility: hidden;

02 Switch to the CSS There is a wrapper class just inside the 009 }
Save the index page and move to the style.css container, again this needs to be set to relative so that
in the CSS folder. Add the following code in here. It can
go at the bottom of the document, just make sure that it
isnt inside a media query. Here the twist class is being
when the design opens, it works correctly. When the
menu is opened a class gets added to it and this is called
open. Here the twist class is made to be fixed and the
06 Add functionality
As the content is being animated in 3D space
the open wrapper is given a CSS transformation on the z
given a relative position on the page. This will hold the perspective added. axis. The container is slightly altered when it is in
menu outside the page. animation to be slightly bigger than the screen with full
001 .wrapper { opacity. The transition takes less than a third of a second.
001 .twist { 002 position: relative;
002 position: relative; 003 } 001 .open .wrapper {
003 } 004 .twist.open { 002 -webkit-transform: translateZ(-1px);
005 position: fixed; 003 }

03 Build the content

006 -webkit-perspective: 1500px; 004 .animate .container::after {
All of the real pages go inside the container 007 perspective: 1500px; 005 opacity: 1;
class. Here it is given a white background because later 008 } 006 height: 101%;
the menu will be given a red background to match the 009 007 -webkit-transition: opacity 0.3s;

144 WordPress Genius Guide

 WordPress
Genius Guide

< Top left>

s
5IF
CBTJD
QBHF
MBZPVU
JT

already set up, the tutorial
concentrates on adding the
menu elements and
functionality of this
< Top right>
s
5IF
NFOV
JT
BEEFE
BOE

immediately appears on the
screen, however it isnt
styled up yet or set in the
right position
< Bottom left>
s
5IF
NFOV
JT
DPOUSPMMFE
CZ

the icon in the top left-hand
corner. The burger menu is
later given the functionality
to bring out the menu and
cause the page to rotate out
< Bottom right>
s
5IF
NFOV
JT
TUZMFE
JO
XIJUF

text and brought onto the
screen from the left

Normalize.css file
08 Menu items
006 }
The project makes use of 007 .effect-persp {
Each menu element needs to be styled up in
normalize.css, which makes 008 background: #b40000;
the right font weight, with the underline and the margin
browsers rendering all elements 009 }
taken off to make it appear in the right place on the
more consistently and in-line
screen. A transition is added so that the text colour can
with modern standards. Its
available from necolas
.github.io/normalize
change on rollover and to make it all visible.

001 .offscreen-nav a {
10 Add the transition
In order to make the container swing out and
twist in 3D space we need to change its transform origin
.css. 002 display: inline-block; point to the centre of it. This is given a slightly longer
003 white-space: nowrap; transition time than in Step 6, but it all works together to
008 transition: opacity 0.3s; 004 font-weight: 300; bring the effect on the screen.
009 } 005 text-decoration: none;
006 margin: 0 0 30px 0; 001 .effect-persp .container {

07 Position the navigation menu 007 color: #fff; 002 -webkit-transition: -webkit-transform 0.4s;
Here the navigation for the off-screen menu is 008 -webkit-transition: color 0.3s; 003 transition: transform 0.4s;
set in the CSS. The position is set at absolute so that it 009 transition: color 0.3s; 004 -webkit-transform-origin: 50% 50%;
can be animated from the side and made to have a 010 -webkit-transform-style: preserve-3d; 005 transform-origin: 50% 50%;
height that fits its content. This is given the transform 011 transform-style: preserve-3d; 006 }
position of 50% of the height and to ensure hardware 012 }
acceleration the preserve-3d is set.

001 .offscreen-nav { 09 Finish the menu items

The next CSS will give the hover a bright
11 Close the row
When the container is swinging out, a class of
animate will be added to it. This is the class that will
002 position: absolute; yellow colour to make it stand out against the red actually contain the animation effect. As you can see, the
003 height: auto; background. The background is set in the effect-persp animation rotates the interface on the y axis by 45
004 font-size: 2em; class to a red colour to match the logo in the page. The degrees. Try and imagine that there is a pin in the top of
005 top: 50%; white page will rotate out to the right while the menu will the screen that rotates the page 45 degrees away from
006 -webkit-transform: translateY(-50%); animate in from the left on the red background. the view.
007 transform: translateY(-50%);
008 -webkit-transform-style: preserve-3d; 001 .offscreen-nav a:hover { 001 .effect-persp.animate .container {
009 transform-style: preserve-3d; 002 color: #fff72f; 002 -webkit-transform: translateZ(-1500px)
010 left: 25%; 003 } translateX(100%) rotateY(-45deg);
011 } 004 .offscreen-nav a { 003 transform: translateZ(-1500px)
012 005 display: block; translateX(100%) rotateY(-45deg);

WordPress Genius Guide 145

 Customisation

< Top left>

s
5IF
SPMMPWFS
GPS
UIF
NFOV

elements is set to yellow to
bring a transition highlight
colour to the interface
< Top right>
s
5IF
$44
DPOUSPMT
UIF
QBHF

rotating on the y axis so that
it moves slightly over to the
right and rotates 45 degrees
< Bottom left>
s
5IF
NFOV
JT
JO
NJE
transition as the page
rotates out of the way and
the menu fades in from the
left of the browser window
< Bottom right>
s
8IFO
UIF
NFOV
JT
PQFO

the page that is rotated
becomes the link to bring
this back to the forefront.
Notice that scroll is disabled
in the menu view

Project add-ons 001 .effect-persp.animate .offscreen-nav a { 006 'OTransition': 'oTransitionEnd',

The project uses classie.js, a 002 opacity: 1; 007 'msTransition': 'MSTransitionEnd',
lightweight class editor that 003 -webkit-transform: translateX(0); 008 'transition': 'transitionend'
saves using the whole of 004 transform: translateX(0); 009 },
jQuery, its available from 005 } 010 transEndEventName = transEndEventNames[
github.com/desandro 'transition' ],

14 Start the JavaScript

/classie. 011 docscroll = 0;
Open the file twist.js and you will see that it is an

12 Second row of columns

The actual links are positioned off the screen to
empty document ready for us to begin. This tutorial is
using the classie.js external library for adding and
removing classes with JavaScript to CSS. In this function
16 Initialise the interface
Most applications have an init function to
initialise all the things that are necessary. The first part of
the left so the translateX CSS transform is applied to keep the code returns how much the page has scrolled. this function will get a reference to all the necessary
them 150 pixels off the screen to the left. These are elements in the DOM so that these can be manipulated
animated in from a transparent opacity, in the next step 001 function scrollY() { through the code without having to continuously
theyll be given full opacity to be fully visible to the viewer. 002 return window.pageYOffset || docElem. traverse the DOM.
scrollTop;
001 .effect-persp .offscreen-nav a { 003 } 001 function init() {
002 opacity: 0; 004 002 var showMenu = document.getElementById(
003 -webkit-transform: translateX(-150px); 'showMenu' ),

15 Setting variables
004 transform: translateX(-150px); 003 twistWrapper = document.getElementById(
005 -webkit-transition: -webkit-transform 0.4s, The next part of the code sets out some 'twist' ),
opacity 0.4s; variables that are needed in the code. The biggest 004 container = twistWrapper.querySelector(
006 transition: transform 0.4s, opacity 0.4s; section is an object containing the browser prefix names. '.container' ),
007 } These are used to check when the transition has ended 005 contentWrapper = container.querySelector(
008 by dynamically adding an event listener to the transition '.wrapper' );
later in the code.

13 Final CSS
Finally the menu is brought onto the screen
with the full opacity for each menu element. Save the
001 var docElem = window.document.
documentElement,
17 Show the menu
Here the menu button is detected for when a
user clicks on it. The click event fires the remaining
style.css now because it has been completed. There 002 support = "transition", function, which is only partially shown in this step. The
wont be anything to see in the browser though because 003 transEndEventNames = { event is stopped from propagating and the default action
there is no functionality added to the page yet. That will 004 'WebkitTransition': 'webkitTransitionEnd', of the button is also prevented. This enables the code to
come next by applying the CSS classes with JavaScript. 005 'MozTransition': 'transitionend', run without default actions interfering.

146 WordPress Genius Guide

 WordPress
Genius Guide

< Above>
s
5IF
JOBM
EFTJHO
XPSLT
PO
B
WBSJFUZ
PG
EJGFSFOU

TDSFFO
TJ[FT
XJUI
UIF
NFOV
CFJOH
QMBDFE
JO
UIF

TQBDF
BWBJMBCMF

Integrate the menu
This menu could easily be implemented with a responsive framework such as Bootstrap or Foundation as an
alternative to their respective menus. Remember that each of those frameworks give you a custom download of what
001 showMenu.addEventListener( 'click', is available, you dont need the whole framework. As such, you can leave out the existing menu that comes with those
function( ev ) { frameworks and add your own. Doing this is a great way of customising and making the design look less like an existing
002 ev.stopPropagation(); framework because those menus are very obvious. Custom web design menus will always create a more appropriate
003 ev.preventDefault(); look for your web projects and with so many responsive frameworks, its almost possible to take the best parts of each
004 docscroll = scrollY(); to kick-start your own work.
005

18 21 Removing the animate class

Finish the image 001 container.addEventListener( 'click',
The rest of the function is shown here. The function( ev ) { Similar to the previous step the twistWrapper
scrolling is set to stop at this point as the class of open is 002 if( classie.has( twistWrapper, 'animate') ) has an event listener added that detects that the
set to the twistWrapper element. Just marginally after { transition has finished. When it does it removes the class
this, triggered by the setTimeout command, another 003 var onEndTransFn = function( ev ) { of animate as this is no longer applicable to it. Just the
class is added called the animate class and this therefore 004 if( support && ( ev.target.className !== final finishing off of the init function is left.
starts the animation. 'container' || ev.propertyName.indexOf(
'transform' ) == -1 ) ) return; 001 twistWrapper.addEventListener(
001 contentWrapper.style.top = docscroll * -1 + transEndEventName, onEndTransFn );

20 Remove the event

'px'; 002 classie.remove( twistWrapper, 'animate' );
002 document.body.scrollTop = document. If the transitions have finished then the open 003 }
documentElement.scrollTop = 0; class needs to be removed, which makes sense as the 004 });
003 classie.add( twistWrapper, 'open' ); menu isnt open any more. At this point scrolling is

22 Finish off
004 setTimeout( function() { classie.add( returned to the user so that the page can carry on like a
twistWrapper, 'animate' ); }, 25 ); normal web page under the control of the user. Add the final code and bracket to close off the
005 }); init function. The final line calls this function so that the
006 001 this.removeEventListener( previous code is applied. Now save this JavaScript and
transEndEventName, onEndTransFn ); open the index.html page in your browser to see the

19 Return the menu

002 classie.remove( twistWrapper, 'open' ); menu open and close while the transition takes full effect.
The container gets an event listener added to it, 003 document.body.scrollTop = document.
which also detects input from a click. This should only documentElement.scrollTop = docscroll; 001 twistWrapper.addEventListener( 'click',
fire if it has the animate class already added to it 004 contentWrapper.style.top = '0px'; function( ev ) { return false; } );
because that means its actually open and needs to go 005 }; 002 }
back when clicked, otherwise it wont fire. 006 003 init();

WordPress Genius Guide 147

 Customisation

Master animated
TUTORIAL
OBJECTIVE
Give your blog a great
pop-up animated effect

TIME REQUIRED
1 hour

pop-up effects
CREATE THIS AWESOME EFFECT THAT WAS INSPIRED BY
WWW.PINKANOVA.COM
AVIDEO PRODUCTION with what can be achieved digitally
Top tip
Pinkanova created the
COMPANY, Pinkanova is based with video but all too often the
designs, but the technical
in Toulouse in the south-west results look like after thoughts.
build was completed by
of France. With the European Where Pinkanova distinguishes
Toulouse-based agency Gle
headquarters of Intel and world-renowned itself is in the integration of
Design. Youd struggle to find
university located nearby its certainly digital elements, with the
better words to describe their
not a bad place to have your creation of fun, memorable and
work than their strapline:
companys headquarters. engaging sights into exciting
passion, rigour, envie,
Pinkanova is the epitome of the digital new worlds where the real and
innovation, creative,
native. Many video companies are catching up virtual co-exist.
emotion.

1 2

Fullscreen video No loops Frame rate Console bar Subtle suggestion

As a video production The video plays once and The animated frames are The site features an attractive The Why Trust Us? and
company, the fullscreen video ends leaving the last contained with a PNG and and functional console that rises Why Use Video? links
background rightly takes frame on display. This played at about half the up when you select Follow Us. move slightly, and the
centre stage. With each visit, removes the need for a rate of a typical video, so The simple horizontal movement user is treated to a
the home page alternates tricky loop and ensures its a little jerky. This of the console bar hides the Jack-in-the-box style
between two videos to keep the video doesnt technique can be adjusted social icons as the console animated sequence when
the site fresh become annoying to suit you opens, adding sophistication they mouse-over

148 WordPress Genius Guide

 WordPress
Genius Guide

1 Inspiration Attention grabbing 3 Technique

The home pages actors break the
fourth wall by looking into your world
wall-to-wall video. For the key
navigation on the home page, they
Used here as a pop-up effect and all
achieved using CSS, this code-light
Heavy on
just as you look into theirs. The site have brought back to life the technique provides plenty of scope for the graphics
makes use of moving images but it old-school, frame-by-frame technique you to really unleash your animation
You can add extra pop-ups by creating a
would become tedious if it was all used in animated GIFs and flipbooks. skills and create your own effects.
new class specifying the new image as its
background. Its worth spending time

2
getting the graphics right, but keep an eye
on the file sizes you are generating.
Technique Easy on the code
01 The head 002 max-width: 800px;
For the purposes of the workshop, a fullscreen 003 min-width: 620px;
image is used and loaded by linking the background 004 margin: 150px auto;
stylesheet. This is achieved by assigning a background 005 }
image to the HTML. Here the background-size keyword 006 .left {
cover is used. This scales the background image, 007 float: left;
preserving the original aspect ratio so that the 008 }
background is completely covered. 009 .right {

01 Choose your style

010 float: right;
001 <!DOCTYPE html> 011 } If you are going for a video style,
002 <html> 012 you may want to shoot some video or use a
003 <head> camera with a high burst rate to take some

04 The pop-ups
004 <meta charset="utf-8"> original footage. Youll need to remove the
005 <title>Animated Popups</title> The graphics for the pop-up are background background if you want a non-rectangular
006 <link rel="stylesheet" type="text/ images, so the links are set to display as block elements look, keep this in mind when shooting!
css" href="styles/background.css"> at the appropriate height and width. This workshop
007 <link rel="stylesheet" type="text/ avoids the increasingly disavowed negative text-indent
css" href="styles/popups.css"> technique to hide unwanted text, instead opting for the
008 </head> Zeldman-approved Kellum Method (no longer used by
Scott Kellum, who now prefers custom font sets).

02 The body The two pop-ups are contained within a <div>

with the class main. Each of the pop-ups sits within its
001 a {
002 display: block;
own <div> left and right and the graphics themselves 003 height:400px;
are displayed by assigning appropriate classes to the 004 width:300px;

02 Create your canvas

links, in this case for men and women retrospectively. 005 text-indent: 100%;
The link text is hidden using CSS. 006 white-space: nowrap; In Photoshop, open a new file with
007 overflow: hidden; the height of your animation. The width will
001 <body> 008 } be the number of steps times the width of
002 <div class="main"> 009 .men { the frame. Set your ruler to pixel units and
003 <div class="left"><a class="men" 010 background: url(../images/ add guides at the start of each frame.
href="#">Menswear</a></div> men.png);
004 <div class="right"><a class="women" 011 }
href="#">Womenwear</a></div> 012 .women {
005 </div> 013 background: url(../images/
006 </body> women.png);
007 </html> 014 }

03 The container
The main class provides a container for the
two pop-ups. Max-width and min-width are used to
05 The animation
The pop-up graphics are comprised of
eleven frames, each occupying a 300px-wide area.
provide an element of responsiveness in the layout, but
you will undoubtedly need to create your own container
styling to meet the needs of your own page. The float
In order to animate the pop-up, it is simply a case
of stepping through each of these frames by
moving the graphic left ten times (eg 3000px/10 =
03 Lose the
background
Remove the background in your raw
property is used to position each pop-up <div> at the 300px steps) to the last frame. If you want to use footage. Then, copy the result into the
far-left and far-right of the container <div>. a different number of frames, all you need to do is multi-frame graphic. Repeat this until done
ensure that the step distance matches the width of and tweak the PNG optimisation options
001 .main { each frame. until happy. Save and youre done!

WordPress Genius Guide 149

 Customisation

Create a rotating
product viewer
DISPLAY YOUR PRODUCTS FROM EVERY ANGLE WITH A ROTATING PRODUCT
Signposted URL
Getting sales for the bike is key
so a large pre-order label in the
VIEWER, AS SEEN ON NUABIKES.COM top-right of the screen will
always provide access to it

Fixed menu
The menu is fixed into
position on the left side of
the screen and remains in
place as the rest of the
page is scrolled through

Fullscreen photos
The photography is key to
this site and the large,
fullscreen images provide
a way to view the bike from
different angles

Fluid sections Pausable scroll

The page is a one-page site The right-hand navigation
that enables the user to controls the images and
scroll down each section or the user can click on the
use the menu on the image, pause it or watch it
left-hand side from different sides

150 WordPress Genius Guide

 WordPress
Genius Guide

NUA BIKES PRODUCE an elegant and clean 010 height: auto;

TUTORIAL urban bike that has a minimal impact on the
OBJECTIVE 011 }
Create 360 degree views of
environment due to the simplicity in its 012 </style>
a product for e-commerce design. The bikes are handcrafted and reflect
platforms
the conscious commuter who needs to get around
TIME REQUIRED
1 hour
urban environments with ease. The company website
needs to reflect the style of the bike, which is always
03 Library link
The images have to be hidden and positioned
on top of each other, so a link to the jQuery library is
easy to do with photography when the product is
needed. This will aid the adding and removing of CSS to
strong. The home page features a fullscreen image of
make each of the images appear at the appropriate time.
the bike that has been photographed from different
angles so that the user can see the bike rotating on 001 <script src="https://code.jquery.com/
screen automatically so the viewer can see the design in jquery-
detail. When the product has such clean, elegant lines 002 2.1.3.min.js"></script>
and is made from quality materials such as titanium,
carbon fibre and aluminium, then it is important that the
styling of the site reflects the construction aesthetic. It is
so easy for designers to get carried away by adding
04 Move through the images
After the link to the jQuery library the following
code can be added. This hides all the images except the
more and more complex content to sites but sometimes
first one. They are positioned within the div tag so that they
all that is needed is good typography, navigation, simple
will be in the right position when they are called to fade in
colour and the product itself. Organising the content can
with the code in the next step.
be tricky, but the Nua Bikes site has managed to do this
without overstating the simplicity of the design. See how 001 <script>
to get the function for yourself. 002 $(function() {
003 $('#fader img:not(:first)').hide();

01 Add the images

004 $('#fader img').css('position',
To create a rotating image of a bike, we need to 'absolute');
add five images to the body section of the page. Using 005 $('#fader img').css('top', '0px');
jQuery a simple image rotator can be created which moves 006 $('#fader img').css('left', '50%');
the image on every few seconds. 007 $('#fader img').each(function() {
008 var img = $(this);
001 <div id="fader"> 009 $('<img>').attr('src', $(this).
002 <img src="img/bike1.png"/> attr('src')).
003 <img src="img/bike2.png"/> 010 load(function() {
004 <img src="img/bike3.png"/> 011 img.css('margin-left', -this.width / 2 +
005 <img src="img/bike4.png"/> 'px');
006 <img src="img/bike5.png"/> 012 });
007 </div> 013 });

02 Style the images

Now move to the head section of your page and
add the style tags for the div tag that holds the images. This
05 Switch images
The fadeNext function does the hard work of
fading out the old image while fading in the next. This is
simply positions them relatively so that the JavaScript can called every three seconds by the set interval, which in turn
change the images later on. calls the fadeNext function. Save this now and test it in your
browser to see the images appear on the screen.
001 <style>
002 html, body{ 001 function fadeNext() {
Keep navigation 003 height: 100%; 002 $('#fader img').first().fadeOut().
simple 004 background-color: #f0f0f0; 003 appendTo($('#fader'));
On the homepage the 005 padding: 20px; 004 $('#fader img').first().fadeIn();
navigation is hidden away in 006 } 005 }
an offscreen menu, giving 007 #fader { 006 var rotate = setInterval(fadeNext, 3000);
space on the page to create 008 position: relative; 007 });
more of a showcase for the 009 width: 100%; 008 </script>
site. As the user moves
through onto content pages,
the menu is on hand to
provide easier browsing and Sometimes all that is needed is good
there are even previous and
next buttons to move through typography, navigation, simple colour and the
the content.
product itself
WordPress Genius Guide 151
Beyond WordPress
Take your blog to the next level
154 Google Analytics
Get the low-down on how to interpret
your stats and improve site traffic

160 Speed up WordPress

Use Varnish software to boost the
performance of your site

164 Create a single input 3D

form with CSS3
Add a 3D form to your WordPress site to
let people sign up to your site

168 Design layered

backgrounds in
Photoshop
Utilise your Photoshop skills to create a
fabulous layered background

172 Create an eCommerce

web element with CSS3
Make money from your website by
turning it into a web shop

Selling online
allows businesses
to reach out to
huge markets
152 WordPress Genius Guide
 WordPress
Genius Guide

Top tip
Recent studies show
that 40% of users will
abandon your site if it
takes over three
seconds to load.

WordPress Genius Guide 153

 Beyond WordPress

GOOGLE
ANALYTICS
GOOGLE ANALYTICS IS THE MOST WIDELY USED WEB ANALYTICS SERVICE IN THE
WORLD AND ITS FREE. FIND OUT THE MOST IMPORTANT PARTS OF THE DATA TO
STUDY AND MASTER KEY FEATURES TO GET MORE HITS FOR YOUR SITE

Google Analytics is the

window into your sites data.
Use it to understand who is
visiting, what they are looking
at, and what you can do to get
them to stay longer
154 WordPress Genius Guide
 WordPress
Genius Guide

Know your audience

Your first port of call for getting insights into your audience and visitor behaviour
should be the Acquisition>All Traffic Channels report

T
he Channels report enables you to see at a for example, paid search CPC, organic and so on. Google then uses rules
glance where your visitors are coming from based on these dimensions (not restricted to the ones mentioned) to define
according to Googles rules. Not all your traffic their channels.
will be captured by Google automatically, specific For example the organic search channel is defined by all traffic that has a
traffic such as Email will not automatically go under the Email channel. medium exactly matching organic.
Google uses their Direct channel as a catch-all mechanism for traffic The default channel grouping Google provides to you would cover most
that it just cannot categorise in any of its other channels. So its important business needs, but if you think you need a custom channel, Google
that you familiarise yourself with the UTM tags in order to make sure all enables you to create custom groupings based on these specific needs of
campaigns you are running are accounted for. yours. Just like the default ones, the custom channels are based on rules
To understand how Google uses these tags, its important to get familiar with the that you will have already defined in the interface utilising dimensions set
concept of source this could be Google, Bing, Facebook; and the concept of medium out by Google Analytics.

Understand key metrics

Get to grips with the terminology used in the Google Analytics interface

Channels
Googles Default channel grouping splits traffic into
eight groups and these are: Direct, Organic, Referral,
Paid Search, Other Advertising, Email, Social and
Display. You cannot change how these channels are
defined but Google may evolve them in future. By
using these groupings you will be able to clearly
review visitor behaviour from a particular source
and determine the channels effectiveness without
being muddled up by another channel.

UTM tags
If youre planning some activity that will drive traffic
to your site email or social for example, its key that
you identify this traffic and make sure you can
understand and measure the yield of your efforts.
Google uses custom campaign parameters called
UTM tags to enable you to identify each piece of
activity or campaign. For example, these identifiable
activities can include the source, the keyword or Sessions Pageviews insight into how users navigate
term used, the content and ads or the specific name The number of periods in which any The total number of page around your site. A live website
of a brand. By tagging the links to your posts, for user interacts with your website. If a impressions during user sessions overlay indicates the proportion of
example in an email newsletter, you can ensure that user leaves the site and returns after within the selected date range. clicks made from any page to each
this traffic is correctly identified as it comes through. 30 minutes or more, a new session linked page, enabling you to
Google has a handy URL builder tool that makes it is recorded. Explaining establish the most popular paths
very easy to identify the most effective URLs. relationship taken to explore your content.
Users A session consists of a grouping of
Real-time This is the number of unique users one or more pageviews or other Audience behaviour
Once you have tagged your campaign URLs you who have visited your site for at interactions which take place on The Audience>Behavior report
can test everything is working as it should be by least one session during the your site. A session ends once a reveals how loyal your visitors are
looking at the Real Time analytics report by going to selected date range. user has been inactive for 30 and how often they return to the
Real Time>Traffic Sources. By clicking through to minutes, or leaves your site and site. Its possible to compare the
your site using your newly tagged link, you should Bounce rate returns via a different channel. behaviour and performance of new
see this visit showing the correct medium and The proportion of total sessions versus returning visitors and also
source in the report if youve done this right. You will which consist of only a single In-page analytics see the number of sessions each
then be able to monitor spikes and trends as they pageview being generated before Accessed from the Behavior user generated during the selected
happen on your website. the user leaves your website. section, In-Page Analytics offers date range.

WordPress Genius Guide 155

 Beyond WordPress

Best new features

Google Analytics is regularly updated with new features and reports. Here are some
recent additions that you need to know about
Spreadsheets add-on Cohort analysis Benchmarking
This handy Google Analytics add-on for Google Currently in beta and rolling out across Google The Audience Benchmarking reports enable your
Spreadsheets enables easy access to your data via Analytics accounts, Cohort Analysis splits your performance to be compared against aggregate
the Analytics API. Its possible to build your own audience into distinct groups. These are based on data from other sites of a similar size in the
reports that query multiple Analytics views and a particular behaviour or attribute and enables industry and country. Youll be able to see how
manipulate the returned data. With a little setup deeper level analysis. There is no such thing as an your traffic sources and engagement metrics
you can create your own regularly updated average user and at present much analysis does compare to other sites in the sector and discover
custom dashboards merging Analytics data with not distinguish between differing behaviours, areas where you outperform your competitors and
any other measurements and making use of the instead bundling all users into a single pot. Each those where you underperform. To access
Google Spreadsheets charts in order to visualise grouping, or cohort, shares common benchmarking reports you need to agree to share
the results. characteristics and new trends may be unearthed. your data anonymously with Google.

Audience groups Content Experiments Intelligence Events

Googles DoubleClick advertising technology Content Experiments enables easy webpage Intelligence Events are a commonly overlooked
collects anonymous information about web surfers split-testing which can help when working towards feature. Analytics continuously checks for metrics
and shares this in Google Analytics. This enables improving the performance of your website. When that have seen statistically significant variations
you to discover more about who is actually using setting up a content experiment you must define a over recent days or weeks and highlights these
your website. Its possible to view an estimated age goal or conversion metric for which you are anomalies. Intelligence Events help to surface any
and gender breakdown of site visitors, user looking to enhance. For example, an eCommerce unexpected changes which could been indicative
affinities and the products and services users are site could monitor revenue or the total number of of a problem or a success on a particular page. Its
seeking through In-Market Segments. Your transactions, whilst a lead generation site could also possible to set up automated email or text
audience can be segmented by these filters to look to increase the number of overall completed alerts which are triggered when a particular metric
enable you to find your most valuable user types. form fills. changes outside a defined threshold.

Plan your content

When it comes to creating content for your audience,
making a decision can take up time. Luckily, it doesnt
have to be this way.

Best performing existing content: pageviews

Use the All pages report to check your most popular
posts. If one topic outstrips the others in terms of
pageviews then see if you can address another aspect
of the same topic.

Most engaging existing content: time on page 1

If you find an unusually high time spent on a post then 2
write another with a similar angle, and interlink for the
same effect. Use All pages report again to find this out.

Internal site search 3

This one is straightforward. Found in the Behavior tab,
the site search lets you know what your visitors have
been looking for within your website.

Affinity Categories
The Affinity Categories report can reveal visitors
01 Demographic reports
can be viewed to reveal
your visitors data, including
02 User Affinity Categories
can give insight into
what else your users do online.
03 The In-Market Segments
report highlights areas
of commercial intent in which
interests. Including a post on a related interest and aspects like their gender split and Affinities reveal a more detailed your users have expressed a
referencing effectively can provide new engagement. age groupings. interest breakdown. degree of interest.

156 WordPress Genius Guide

 WordPress
Genius Guide

Customise the Google Analytics UI

Intelligence Events Custom dashboards Custom reports Automated emails
and custom alerts The usefulness of GA goes beyond the Just like custom dashboards, GA enables Its very easy to set up GA so that it can
GA generates automatic web alerts standard reports they provide the you to create custom reports that are send you customised reports via email
whenever there is a significant change in interface is completely customisable and very powerful for drilling down into your at a frequency that suits. This will then
usage or traffic metrics. It can generate enables you to create bespoke site data. Here you will get to choose and save you from having to go in and
AdWords alerts in the GA interface if dashboards and reports to match your select only the dimensions and metrics generate them each time and ensures
your accounts are linked. You can also needs. While most of the default that you want to display. This is so that that you are comparing like-for-like each
set up custom alerts to be generated dashboard provided out of the box may you can easily and quickly access the week or month. These emails also act as
when traffic reaches or decreases to a suffice, there are countless widgets you data relevant to you without spending a handy prompt to go in and have a
certain threshold. Google enables you to can create to really enhance your data ages clicking around in Google Analytics further dig around in your Google
receive these alerts via email or text analysis. Along with this, Google provides each and every time you want that kind Analytics data so that youre always on
message so that you can stay in the a great dashboard, report and segment of specific data. top of the latest trends on your website.
know even though you are not checking repository called the Solution Gallery a Googles help section is very useful Intelligence Events reports can also be
your GA reports. crowdsourced area where Google here as it has a handy list of all the set up to alert you with an email when
There are four reports Google has Analytics users publish their own dimensions and metrics that GA uses, certain criteria are met. If set up correctly
available in terms of Intelligence Events: dashboards, reports, anything that they and also gives hints on the valid these can be utilised as an extremely
Overview, Daily Events, Weekly Events have found useful for the benefit of dimensions or metrics combinations as useful warning system that will alert you
and Monthly events. fellow GA fans. This is a great shortcut not all of them can be queried together. to problems with your site or server that
There are also some useful alerts you and a brilliant resource too as the As mentioned, the Solutions Gallery may need urgent attention, like if the
can set up like, if revenue drops by 10 uploaded shortcuts are rated with stars has a large repository of well-made, bounce rate or page load time has
per cent, if a landing pages bounce rate by other users. You can download any of crowdsourced custom reports from increased significantly for example.
increases by 20 per cent, or if a PPC these premade dashboards to your own other Google Analytics users that you Alternatively, the reports can be set up to
campaign performance increases account and start using them straight can easily download, utilise and make you aware of large traffic spikes
revenue by 10 per cent, for example. away for your own site analysis. customise for your websites needs. that may warrant further investigation.

WordPress Genius Guide 157

 Beyond WordPress

Internal site search

If your site utilises an internal search
function to display a filtered selection of
products or list of related articles, GA can
Determine
track and report on this data. The Site
Search report, accessed under the
Behavior section, provides details of the
the issues
most commonly searched for keywords
and the pages from which users make
Identify your poor-performing pages
such queries. via presentable data
A quick look through these terms will
enable you to identify the content that Bounce rate
users are actively seeking on your site. If Pages that record having a high bounce rate are usually an indication that the
this content exists, its prominence content is not what the user expected to find. On eCommerce websites, product
If youre not
should be improved, if not, you have a pages frequently have high bounce rates as users may land on them from a a regular Google
list that is all ready to go with
suggestions for future content additions.
search engine when looking for a particular product. It is possible to decrease
bounce rate on these kinds of pages by ensuring that all possible related
Analytics user,
products are interlinked. spending just
Search queries A page that records a bounce rate significantly greater than other pages of half an hour or so
Connecting your Google Webmaster the same type should be investigated further.
Tools account to Google Analytics Its also possible to view bounce rate by channel, which may reveal that users looking through
enables Webmaster Tools off-site data to from social platforms are interested primarily in a single piece of content and the reports could
be combined with the on-site data in GA less in exploring the rest of your site.
and unlocks the Search Engine
reveal some easy
Optimisation series of reports. The most Time on page opportunities to
useful of these reports,
Acquisition>Search Engine
As well as recording average session duration, GA also reports on the average
duration of pageviews of each individual URL on your site. Pages can easily be
boost traffic
Optimisation>Queries, lists the different sorted by the average time on page metric, and this can be accessed through Philip Gamble
Google search queries for which your Behavior>Site Content>All Pages to reveal the pages where users are leaving Technical SEO manager, Found
site has appeared in results. The data quickly. This data suggests that users do not find these pages engaging enough
returned shows an estimate of the to stay on.
number of times your site was shown for The Content Drilldown report aggregates page-level metrics by a sites URL
each query as well as the average directory structure, which can quickly highlight particular subfolders such as
ranking position and click-through rate. product categories that are under-performing.
With most keyword referral data now
reported as not provided, this report can Low converting pages
give you visibility on the search terms If youve set up eCommerce or goal-tracking then Google Analytics will be able
that are sending traffic. to report on a true monetary value of a page. Selecting the eCommerce option
at the top of Behavior>Site Content>Landing Page will reveal a report on the
Pinpoint the best number of sessions, transactions and revenue that has been generated through
As well as identifying pages that are visitors who have landed on a particular page that you want to analyse. Its also
performing below par, its important to possible for you to view the average order value, eCommerce conversion rate
understand and learn from the success and per-session monetary value for that particular landing page, which can flag
of your best performing content. If you
can identify common themes in this
up any poor-performing pages for your attention. This will then enable easier
fixing later on.
The Users
content then similar content could be Selecting a Goal Set option at the top of the same report enables conversion Flow report is
developed to bring in more traffic. The rates for different predefined goals to easily be compared. an overview of
Behavior>Site Content>Landing Pages
report reveals details of the sessions Pages with low click-through rates your best and
which result from a user landing via a The Acquisition>Search Engine Optimization>Queries report can highlight pages worst performing
certain channel. Ecommerce and goal
conversion data can be particularly
which rank highly in search results but arent delivering much traffic. It will
identify a troublesome query, for which your site occupies a high average
pages. Its useful
insightful here as after landing on a position but has a low click-through rate and this will suggest that your listing is for gathering
particular page, users may go on to
explore your site and convert at a
not as enticing as other competing sites at encouraging searchers to go ahead
and click through to your website.
ideas on user
different URL. Its possible that a page You can effortlessly improve upon this by updating webpage title tags and journeys needing
with a low average time on page may in meta descriptions to ensure they contain the related search query and a strong improvement
fact be extremely valuable, for instance a call to action. This is a quick-and-easy optimisation that should increase
category page which funnels users to click-through rate and result in additional traffic. Dora Moldovan
products they then go on to purchase. Head of technology, Found

158 WordPress Genius Guide

 WordPress
Genius Guide

PPC
If you are running a PPC campaign, its
example, a subscription to your mailing
list or a form submission can be a goal Social media
Social media visitors have generally
additional content on your site? Does a
particular type of post generate more
and assigned a value. interactions than the others? Do they
important that you understand whether Remember that PPC traffic should arrived with far less intent to go on to find other content from your

Vs
the traffic thats being generated is always have clear objectives and convert and have followed an site and share that with their network of
money well spent. By setting up goals be directed at the most relevant interesting article or post that has friends and followers? This information
in Analytics and assigning a monetary landing page on your website. This led them to your site as opposed is invaluable for growing your audience
value to those goals, you can quickly will also need to be via the keywords to an advert or offer. Understanding and maximising the effectiveness of
establish the ROI on your PPC spend that you are already using in order to their behaviour, however, is no less what you do for your site on social
even if you arent selling something. For give it the best chance at converting. important. Do they go on to read media and for building your brand.

Tracking your conversions

The best way to determine if your site is successful is by measuring your goals
Once you set up the Google Analytics tracking code for Goals between goals and events is that while goals are
your site, its important to set up some conversion Google Analytics goals represent completed activities counted once per session, events are counted once per
points for your site. Your business goals can vary from and conversions that measure your business objective interaction. So if someone plays a video five times in a
tracking your online transactions to tracking whether success. Having properly defined goals enables GA to visit, that would register as five events. If they submit a
someone has filled in your contact form, signed up to a provide you with great insights on the effectiveness of form twice, that would count as a single goal. It is
newsletter or clicked to view a video. your website page design or marketing campaigns. You important that this difference is understood and the
Defining your conversions in conjunction with your can define up to 20 goals per reporting view. goals and conversions are implemented accordingly.
channel is key to your campaign success. For example, GA lets you define your goals in several ways: Another difference between goals and events is that
you may find that your paid search campaigns might Destination where the goal is defined by reaching a the events need to be implemented programmatically
be better at getting users to convert, whereas your specific page; Duration, a session that lasts a set via JavaScript code on the site, while goals can simply
social media campaigns might be better at creating amount of time or longer; Pages/Screens per session, be defined in the GA interface. Using Google Tag
awareness of your brand and is a better traffic driver. where your goal might be to make sure the users see manager makes goal implementation easy, so you
Define conversion points wisely and check your an x number of pages per session; and Event, where should make sure that this is a consideration.
channels so you can understand your website and you can set up a goal based on an event, and this is
know where to channel your marketing efforts. useful if you want that event to be part of an attribution Ecommerce tracking
model like video play. Based on information like products bought,
Types of conversions in GA You can also define funnels for your goals and these transactions, and the time it takes for a user to purchase.
GA lets you set up different conversions for different are specific paths the users take to conversion. This is you can get insights on your best-selling products or
needs. For example, Goals can be used for tracking key useful if you want to view where users abandon the brands or categories, which channels are your best
actions that occur on the site that usually reach a funnel and where optimisation efforts should be spent. performers, your paid search ROI, and how long it takes
confirmation page, eg submitting a contact form, customers to make a decision to purchase.
whereas Events is used to keep track of interactions Events You can set up eCommerce tracking
that are actions typically tied in with page elements, like Events are user interactions that can be tracked programmatically, but many kinds of shopping cart
clicking a button. GA provides a powerful API to enable independently from a page visit or load like video plays, software will include GA eCommerce out of the box or
merchants to track their website sales. AJAX content, button clicks and so on. The difference provide easy-to-install extensions.

Glossary
Conversion Event Goal Segment Channel Attribution
Any completed action A type of user User interaction A subset of sessions or grouping model
that helps your business interaction with the measured by the user users that share A roll-up of traffic This model determines
measure success. They page content to track reaching a specific URL common attributes so sources in the the channels your sales
can be macro or micro conversions when the or closely tied to a page you can isolate and Acquisition reports that and conversions get
conversions depending interaction is load. Examples would better analyse sessions groups marketing assigned to. This is
on importance. A independent on a page be a user reaching some or users. You can apply activities together to let based on contribution.
completed purchase load. Examples can form of a Thank you up to four at a time and you compare User models include a
would be a macro include AJAX loaded page, a purchase use predefined aggregated metrics by Last Interaction model
conversion and a content, link clicks, social completed or a specified segments or import channel name, individual that assigns the credit
Facebook like would be buttons interactions, amount of time spent them from the Analytics traffic source, medium to the last click before
a micro conversion. flash elements etc. on a specific page. Solution Gallery. or campaign name. its conversion.

WordPress Genius Guide 159

 Beyond WordPress

Speed up
TUTORIAL NOBODY LIKES TO wait ages for a
OBJECTIVE page to load. If your site is loading
Use Varnish software to slowly people will just go somewhere
increase the performance
of content-heavy sites else before they get to look at all the

WordPress
content on your site or read the great article you
TIME REQUIRED wrote. Page speed is still an issue for many sites,
1 hour 30 minutes
and recent studies show that 40 per cent of users
will abandon your site if it takes more than three
seconds to load.

with Varnish This is where Varnish comes in. Varnish is a HTTP

accelerator or caching HTTP reverse proxy. It
receives requests from clients and tries to answer
them from the cache. If it cannot answer from the

software
cache it will forward it to the origin server, fetch the
response, store it in the cache and deliver it to the
client. When Varnish has a cached response ready,
it is typically delivered in a matter of microseconds:
two orders of magnitude faster than the average
INCREASE THE PERFORMANCE OF WORDPRESS USING origin server, so make sure that Varnish answers as
VARNISH AND OPTIMISE YOUR CONTENT-HEAVY SITES much as possible from the cache.
In this tutorial we will go through some of the
common steps required to install and configure
Varnish and integrate it with WordPress to take your
site to the next level.

01 Install Varnish
Varnish packages are readily available for many Linux distributions including
Red Hat, Centos, Debian and Ubuntu. In this tutorial we will assume that Ubuntu 14.04.1
04 Move Apache
Before we configure Varnish to handle all the web traffic to our WordPress
site, we will need to move Apache to a different port. Lets then change all occurrences
LTS as the underlying operative system and well be installing the latest version of of port 80 with a text editor in /etc/apache2/ports.conf and any files under /etc/
Varnish. For other operating systems check the latest releases on varnish-cache.org/ apache2/sites-enabled/ to 8080.
releases. Open a command prompt and type the following as root.

001 apt-get install apt-transport-https

002 curl https://repo.varnish-cache.org/ubuntu/GPG-key.txt |
05 Serve from Varnish
Now that port 80 is available we can update the Varnish configuration,
effectively putting it in front of Apache and WordPress. On the default installation
apt-key add - echo "deb Varnish will wait for connections on port 6081. With this in mind lets change /etc/
https://repo.varnish-cache.org/ubuntu/ trusty varnish-4.0" default/varnish with a text editor and replace 6081 with 80.
003 >> /etc/apt/sources.list.d/varnish-cache.list
004 apt-get update 001 DAEMON_OPTS="-a :80 \
005 apt-get install varnish 002 -T localhost:6082 \
006 003 -f /etc/varnish/default.vcl \
004 -S /etc/varnish/secret \

02 Add the plugin

005 -s malloc,256m"
After installing Varnish we need to instruct WordPress to purge the cached
content whenever modified. There are several plugins to achieve this. In this tutorial we
will use Varnish HTTP Purge. Go to the WordPress dashboard and click on Plugins>Add
New and search for Varnish HTTP Purge. Click on Install Now and confirm. Finally
06 Set the backend
Varnish uses the concept of backend or origin server to define where it
should retrieve the content from if its not present in its cache. In this case we will be
activate it. using the Apache location that we defined in step 4. Edit /etc/varnish/default.vcl with a
text editor and ensure the following is present.

03 Enable custom permalinks

For the Varnish HTTP Purge plugin to work correctly we need to enable
mod_rewrite and use a custom URL structure for permalinks and archives.
001 backend default {
002 .host = "127.0.0.1";
In the WordPress dashboard click on Settings>Permalinks and select Custom 003 .port = "8080";
Structure. Then type /%year%/%monthnum%/%post_id% and click on Save Changes. 004 }
To finalise, open a command prompt and run the following as root.

001
002 a2enmod rewrite
07 Make it effective
Now we are ready to start Varnish and restart Apache. Once this is done, all
traffic to our WordPress site will pass through Varnish before it hits the Apache server.
003 Open the command prompt again and run the following as root.

160 WordPress Genius Guide

 WordPress
Genius Guide

<Above>
s
*OTUBMM
UIF
7BSOJTI
)551
1VSHF
QMVHJO
JO
8PSE1SFTT
UP
FWJDU
UIF
DPOUFOU
JO
UIF
DBDIF
XIFO
JU
JT
VQEBUFE

001 service varnish start 001 if (req.url ~ "wp-admin|wp-login") {

002 service apache2 restart 002 return (pass);
003 }

08 Ignore cookies
By default, Varnish will not cache content for requests including the Cookie
header or responses including the Set-Cookie header. WordPress sets many cookies 10 Extend caching
Varnish uses the max-age parameter in the Cache-Control HTTP header to
that are safe to ignore during normal browsing so lets update establish how long the content is considered fresh before contacting the backend
/etc/varnish/default.vcl and add the following inside vcl_recv to remove them. again. Varnish will use 120 seconds by default if this value is missing or is equal to zero.
To extend this period to one hour we could update /etc/varnish/default.vcl.
001 set req.http.cookie = regsuball(req.http.cookie, "wp-
settings-\d+=[^;]+(; )?", ""); 001 sub vcl_backend_response {
002 set req.http.cookie = regsuball(req.http.cookie, "wp- 002 if (beresp.ttl == 120s) {
settings-time-\d+=[^;]+(; )?", ""); 003 set beresp.ttl = 1h;
003 set req.http.cookie = regsuball(req.http.cookie, 004 }
004 "wordpress_test_cookie=[^;]+(; )?", ""); 005 }
005 if (req.http.cookie == "") {

11 Handle purge requests

006 unset req.http.cookie;
007 } Whenever existing content in WordPress is updated the Varnish HTTP Purge
008 plugin will ask Varnish to remove it from the cache. The next time its requested, the
most up-to-date version will be retrieved from the backend. But in order to do this we

09 Exclude URLs
In most web applications there are some URLs that shouldnt be cached no
matter what and WordPress is no exception. We will be excluding any admin or login
will need to add the following at the top of vcl_recv in /etc/varnish/default.vcl.

001 if (req.method == "PURGE") {

related pages from hitting the cache. Once again open /etc/varnish/default.vcl and add 002 if (req.http.X-Purge-Method == "regex") {
the following before we remove the cookies from the previous step. 003

WordPress Genius Guide 161

 Beyond WordPress

<Above>
s
)FSF
ZPV
DBO
TFU
B
DVTUPN
63-
TUSVDUVSF
GPS
QFSNBMJOLT
BOE
BSDIJWFT

Varnish Book
Varnish has also released an
entire PDF document detailing
how to utilise the software to its
full potential, including sections
on HTTP protocols, VCL basics
and threading parameters.
Check it out at
bit.ly/1z1alPk

003 ban("req.url ~ " + req.url + " && req.

<Above>
s
8BOU
UP
FNQUZ
ZPVS
DBDIF
CFGPSF
UFTUJOH
TPNF
DIBOHFT
/P
QSPCMFN
KVTU
DMJDL
PO
http.host ~ " + req.http.host);
Purge Varnish 004 return (synth(200, "Banned."));
005 } else {
006 return (purge);
007 }
008 }
009

12 Secure purge
In the previous step we added the necessary code to handle purge
requests but we have left it open for anyone to do just that. Lets add some
code to restrict it. Edit /etc/varnish/default.vcl and after the backend add the acl
below using your server IP address or hostname. Then modify the code in the
previous step to use it.
<Above>
s
&YBNJOF
BMM
JODPNJOH
BOE
PVUHPJOH
XFC
USBJD
JO
SFBMUJNF
BT
JU
MPXT
UISPVHI
7BSOJTI 001 acl purge {
002 "localhost";

162 WordPress Genius Guide

 WordPress
Genius Guide

<Above>
s
%PDVNFOUBUJPO
JOGPSNBUJPO
BCPVU
UIF
QSPKFDU
BOE
NPSF
JT
BWBJMBCMF
POMJOF
BU
UIF
7BSOJTI
XFCTJUF

003 "<server ip address or hostname>"; 001

004 } 002 varnishlog
005 .. 003
006 if (req.method == "PURGE") {

16 Volume matcher/measure
007 if (client.ip !~ purge) {
008 return (synth(405)); Varnish is very powerful but can be daunting at first. Luckily for us there are
009 } many resources online and has an active community behind ready to help. If you are
010 stuck or want to know more you can visit the Varnish website at varnish-cache.org.

13 Reload the configuration

Before our changes to /etc/varnish/default.vcl take effect, Varnish needs to be
told to reread its configuration. To avoid any potential downtime, Varnish can be
17 Go further
If you are interested in Varnish, you can always give Varnish Plus a go. Theres
a free trial available on the Varnish website (bit.ly/12hJpx8) and you can capture
instructed to reload the configuration while it keeps serving requests. Open the real-time traffic statistics, create a paywall for premium content, simultaneously work on
command prompt again and type the following as root. administration across all Varnish cache servers, record relationships between web pages
for easy content maintenance, detect devices used for browsing and accelerate API.
001
002 service varnish reload
003

14 Empty the cache

Chances are that as we worked our way through the configuration, some
content found its way into the cache even if it wasnt supposed to. In this situation we
can use the Varnish HTTP Plugin to empty the cache and then we can start afresh. Go
to the WordPress dashboard and click on Purge Varnish at the very top.

15 Examine the traffic

Everything is working; browse some pages, login, logout, pages are loading
fast. Or are they? Varnish come with a set of tools that will help you understand whats
going on behind the scenes and debug any potential problems. To see the requests as
they are passing through Varnish run the following on a command prompt:

WordPress Genius Guide 163

 Beyond WordPress

Code an TUTORIAL
OBJECTIVE
Add an input form to your
website with CSS
ONE OF THE most common and useful
online interactions that web designers and
developers can do is devote time to
encouraging visitors to subscribe to a

input form TIME REQUIRED newsletter or blog. Once signed up, visitors can then
1 hour be included in online promotional activities and
hopefully be converted into paying customers in
due course.

in 3D with
To part with an email address, however, visitors need
to trust the website and be sufficiently interested in the
product, service or blog even so, this by itself might
not be enough. Then again, if your website looks the

CSS
part and has an original-looking and slick method for
encouraging signup, this could provide the extra nudge
some visitors need in order for you to secure those
all-important email addresses.
The technique demonstrated in this tutorial makes
IF YOU HAVE LIMITED SPACE BUT WANT TO ingenious use of CSS and JavaScript to create a 3D box
CAPTURE INPUT WITH MAXIMUM STYLE, THIS IS providing all of the required functionality, user prompts
THE TECHNIQUE FOR YOU and confirmation within the space of a single input field.
If you want to increase the number of subscribers to
your website, for example, this could be just the solution
you are looking for. Lets give it a go.

01 HTML first
div*4(cuboid faces) --> message is displayed. The final face of the cuboid (on the
This technique works in all modern and even 004 <div id=cuboid> long side of the cuboid, that is) is used for displaying the
not-so-modern browsers. Please do check the 005 <form> success message and an icon to enable the form to be
functionality if you need to ensure compatibility with 006 <!-- #1 hover button --> refreshed and therefore reused.
older browsers like IE8. The HTML starts with the now 007 <div>
familiar HTML5 declaration. The customary utf-8 008 <p class=cuboid-text>Subscribe</p> 001 <!-- #3 loading message -->
character set is declared, assuming you use this 009 </div> 002 <div>
character set, the page title is put in place and the link to 003 <p class=cuboid-text loader>

03 Fill the form

the stylesheet established. Were submitting your request</p>
The text input face has several more elements 004 </div>
001 <!DOCTYPE html> to it, as a submit icon is required. The autocomplete 005 <!-- #4 success message -->
002 <html> property is set to off as you dont want the field 006 <div>
003 <head> pre-filling with someone elses email address and 007 <!-- reset/retry button -->
004 <meta charset=utf-8> inadvertently sending it to you. Forms will generally 008 <span class=reset-icon>
005 <title>Be the first to know</title> require a Submit button, but since this is being handled <i class=fa fa-refresh></i></span>
006 <link rel=stylesheet href=css/ within the field, the #submit <div> sets the display of the 009 <p class=cuboid-text> Thankyou.
screen.css> Submit button to none. Youre all signed up! </p>
007 </head> 010 </div>
008 <body> 001 <!-- #2 text input --> 011 </form>
002 <div> 012 </div>

02 Decoration and heading

003 <!-- Label to trigger #submit -->

05 Join the JavaScript

This technique uses Font Awesome icons as 004 <label for=submit class=submit-icon>
part of the styling. Here, the envelope class is applied to a 005 <i class=fa fa-chevron-right></i> Finally, jQuery and small JavaScript are
<div>. The class is used to increase the size of the icon to 006 </label> loaded. You could use a CDN for the jQuery. Remember
be displayed and to knock back its opacity. The #cuboid 007 <input type=text id=email class= to load a minified version. Occasionally links to an
<div> is the container for the main action and each of the cuboid-text placeholder= uncompressed version at nearly 300kb are found in
four faces of the cuboid are set starting with the Your Email autocomplete=off/> source code. Do your users a favour, use a minified
invitation to Subscribe. 008 <!-- hidden submit button --> version and save about 200kb. The 3dform.js weighs
009 <input type=submit id=submit /> in at only 34 lines and is less then 1kb.
001 <div class=envelope> 010 </div>
<i class=fa fa-envelope></i></div> 001 <!-- jQuery -->

04 Complete the cuboid

002 <h1>Be the first to know</h1> 002 <script src=js/jquery-1.11.0.min.js>
003 <!-- heirarchy: #cuboid > form > While the form is being submitted, a short </script>

164 WordPress Genius Guide

 WordPress
Genius Guide

<left>
s
This minimal approach
helps ensure that there
are no distractions
usability studies have
shown that sign-up rates
improve when the user
is given fewer options
to consider. You can,
of course, integrate
this type of form within
a complete page
layout too

003 <script src=js/3dform.js></script> necessary to keep setting this font for each of the page
Top tip
This tutorial is based on the walkthrough
004 </body> elements. The ghostly envelope shape is created by published by thecodeplayer.com/
005 </html> increasing a Font Awesome icons size tenfold and then walkthrough/single-input-3d-form.
reducing its opacity to 0.1 (where 1 is completely opaque). Be sure to check out their other

06 Coding the CSS

The two custom fonts used are imported first.
The font used for the text is imported from Googles
The container for the form is created here.

001 /*general styles*/

walkthroughs too.

content delivery network but the minified Font 002 h1 {font-weight: normal; font-size: 006 /*propogate 3d space for children*/
Awesome file is linked locally. Youll also need local 36px; margin-bottom: 75px;} 007 -webkit-transform-style: preserve-3d;
versions of the Font Awesome EOT, SVG, TTF, WOFF 003 .envelope i {-webkit-transform: scale(10);- 008 transform-style: preserve-3d;
and OTF files all saved in a fonts folder, which is where ms-transform: scale(10);transform: scale 009 /*prevent height collapse as children
the font-awesome.min.css expect to find them. (10); opacity: 0.1;} are absolutely positioned*/
004 #cuboid { 010 height: 40px;
001 /*Custom fonts - Raleway and FontAwesome*/ 005 width: 400px; margin: 0 auto; 011 /*for smooth animations*/
002 @import url(http://fonts.googleapis.com/ 006 /*this also makes #cuboid a container 012 -webkit-transition: all 0.35s;
css?family=Raleway); for absolutely positioned descendants*/ 013 transition: all 0.35s;
003 @import url(font-awesome.min.css); 007 -webkit-perspective: 1000px; 014 }
004 * {margin: 0; padding: 0;} 008 perspective: 1000px;

09 Form the faces

005 body { 009 }
006 background: url(../img/bg.jpg) Height sets the height of the text area and

08 Set the space

no-repeat center center fixed; line-height sets the distance between each line of text
007 -webkit-background-size: cover; Preserve-3d is set to enable the elements to (also known as leading). A line-height of 40px positions
008 -moz-background-size: cover; be positioned in 3D space. As the height of the input the single line of text in exactly the right place within a
009 -o-background-size: cover; field is 40px, the elements are translated half that 40px space. The colour of the loader face is set here
010 background-size: cover; height to create the illusion of the cuboid being rotated together with the animation that is to be used.
011 padding-top: 150px; through its centre. Feel free to experiment with the
012 font: normal 18px Raleway; color: transition speed to suit your own requirements. 001 /*faces*/
white; text-align: center; 002 .cuboid-text {
013 } 001 #cuboid form { 003 /*each face will be 40px high*/
002 /*counter translate*/ 004 line-height: 40px; height: 40px;

07 Start the styling

003 -webkit-transform: translateZ(-20px); 005 background: hsl(200, 40%, 20%);
Raleway has already been set in body as the 004 -ms-transform: translateZ(-20px); 006 }
font to be used everywhere on the page, so its not 005 transform: translateZ(-20px); 007 .loader {

WordPress Genius Guide 165

 Beyond WordPress

Choose your colour model

Every designer must surely be familiar with the
hexadecimal system for setting colours, which in
many cases this is the perfectly good go to
system for defining your colours. Youve probably
also used the three-digit short form at some point
as well (eg #09C in place of #0099CC). But, did
you know 140 different color names are defined in
HTML and CSS? Youve probably seen color: gray
or red but arent palegoldenrod and
papayawhip worth exploring too?
There are other systems available that have
their own uses. RGB and HSL and their more
advanced counterparts RGBa and HSLa (that
includes an alpha channel) can certainly make
things easier for you depending on the colour job
at hand. If you need transparency youll certainly
need to use of these systems, but they can also be
There are many ways of using
colour online and you can often achieve useful when managing groups of colours as a
better results more easily if you choose palette or making more intuitive selective changes
Image: SharkD
your system carefully http://isometricland.net
(like the pulsing effect in this tutorial).

border: 0 none;
Top tip 010 font: inherit; text-align: left; color:
cuboid <div> is defined, positioned absolutely and
completely fills the container.
When influencing online behaviour, hsl(200, 40%, 30%);
its important to get the balance right 011 display: block; width: 100%; padding: 001 /*.active = when the user is typing
between giving people enough 0 10px; something*/
reasons to sign up and not 012 -webkit-box-sizing: border-box; 002 .submit-icon.active {color: hsl
distracting them so much 013 -moz-box-sizing: border-box; (30, 70%, 70%);}
that they forget to 014 box-sizing: border-box; 003 .reset-icon {color: hsla
actually do it. 015 } (0, 100%, 100%, 0.25); font-size: 14px;}
004 #cuboid div {position: absolute; top: 0;

11 Styled into submission

left: 0; width: 100%;}
The default Submit button is rendered invisible

13 Rotate the result

008 background: hsl(200, 40%, 30%); using display: none. Again, 40px line-height is used to
009 -webkit-animation: phase 1s infinite; ensure the correct vertical positioning of the icons. One of Watch out here as the vendor prefixes have
010 animation: phase 1s infinite; the many benefits of using icons from a font file is that you been removed from this step for brevity make sure
011 } can apply all of the font properties to them. Here, HSLa you check the tutorial files for the full code. Rotating
colour is used to change the opacity of the icons to 25%. each face 90 degrees in the X dimension and moving

10 Hue, saturation, luminance

As HSL colour is specified its easy to create a
pulsing effect by animating a colour between different
001 #submit {display: none;}
002 .submit-icon, .reset-icon {
each face in and out by 40px (20px from -20px)
completes the cuboid illusion.

saturation values in this case between 40% and 70%. 003 position: absolute; top: 0; right: 0; 001 /*3D transforms. Each face will be rotated
The styling for the email input field is set including the 004 color: hsla(30, 50%, 30%, 0.20); in multiples of -90deg and moved 20px(half
white background and the coloured text. Border-box is 005 line-height: 40px; padding: 0 10px; of their 40px height) out*/
used here in order to ensure that the whole box appears 006 /*smooth transitions when user activates 002 #cuboid div:nth-child(1) {transform:
within the space allocated. input and types something*/ rotateX(0deg) translateZ(20px);}
007 -webkit-transition: all 0.5s; 003 #cuboid div:nth-child(2) {transform:
001 /*Lets create a pulsating animation for 008 transition: all 0.5s; rotateX(-90deg) translateZ(20px);}
the loader face*/ 009 /*to make the icons feel like buttons*/ 004 #cuboid div:nth-child(3) {transform:
002 @-webkit-keyframes phase { 010 cursor: pointer; rotateX(-180deg) translateZ(20px);}
003 50% {background: hsl(200, 70%, 30%);} 011 } 005 #cuboid div:nth-child(4) { transform:
004 } rotateX(-270deg) translateZ(20px);}

12 Recognise the input

005 @keyframes phase { 006 /*the form will have 4 states/classes
006 50% {background: hsl(200, 70%, 30%);} The Submit icon is made more prominent once (default+3) for rotation*/
007 } content has been entered into this field. The JS shown in 007 #cuboid form:hover,
008 #email { the Code Library is responsible for adding the .active 008 #cuboid form.ready {transform: translateZ
009 background: white; outline: none; class when content has been added to the field. The (-20px) rotateX(90deg);}

166 WordPress Genius Guide

 WordPress
Genius Guide

009 #cuboid form.loading {transform:

translateZ(-20px) rotateX(180deg);}
010 #cuboid form.complete {transform:
Code library
translateZ(-20px) rotateX(270deg);} Understanding the JavaScript
While CSS can deliver most of the solution, a sprinkling of JavaScript

14 Take it further
This technique really suits an ultra-minimal
Coming soon page layout no distractions, just sign up
is needed to bring it all together

001 //add .ready to form when user focuses on it

please. You could adapt it by creating extra <div>s and 002 $(#email).focus(function(){
When the mouse passes into 003 $(#cuboid form).addClass(ready);
classes but it would soon become tiresome for the user the input field, the .ready
a little like being forced to open one advent calendar class is added to the #cuboid 004 })
door after another but without the reward of chocolate! form <div>. This initiates a 005 //remove .ready when user blurs away but only if there
90-degree rotation and 20px is no content
translation to expose the first
face of the input form 006 $(#email).blur(function(){
007 if($(this).val() == )
008 $(#cuboid form).removeClass(ready);
If the user subsequently
mouses away, the cuboid is 009 })
returned to the default
hover state but only if 010 //If the user is typing something change the arrow colour/
nothing has been typed
into the input field .active
011 $(#email).keyup(function(){
012 //this adds .active class only if the input has some text
More visual feedback is 013 $(.submit-icon).toggleClass(active, $(this).val(
provided to the user by

15 Other solutions ).length > 0);

changing the colour of the
Having your labels jump out of the way when arrow once content has 014 })
you enter the field has a similar space-saving quality and been typed into the field
surprise appeal as the single 3D input field, but lends 015 //on form submit remove .ready and add .loading to the form
itself better to multiple fields. TheCodePlayer also has a 016 $(#cuboid form).submit(function(){
The loading class is added
great solution for this, check it out at thecodeplayer. to the #cuboid form for
017 $(this).removeClass(ready).addClass(loading);
com/walkthrough/animating-float-labels-jquery-css3. three seconds after the 018 //finish loading in 3s
form is submitted. If youre 019 setTimeout(complete, 3000);
switching between classes
in this way, remember that 020 //prevent default form submission
when adding a new class 021 return false;
you need to remove any 022 })
classes that have been
added previously 023 function complete()
024 {
025 $(#cuboid form).removeClass(loading).addClass
(complete);
026 }
027 //reset/refresh functionality
028 $(.reset-icon).click(function(){
029 $(#cuboid form).removeClass(complete);

16 Icons as fonts
030 })
Font Awesome, used here, is one of the most
popular icon font solutions but it is by no means the only
way to go. Fontello provides an incredibly useful online
tool for creating your own custom icon fonts, so you can
choose just what you need from a wide range of sets
and keep the file size down to an absolute minimum. 17 Do you DIY?
If you have the time,
skill and inclination, often it will
be better to create your own
bespoke forms. However,
sometimes the smart thing to
do is to reach for a solution
that already exists. One relative
newcomer to the forms party
is the Barcelona-based
Typeform you should
definitely check out how their
forms look and work.

WordPress Genius Guide 167

 Beyond WordPress

Design TUTORIAL ITS OFTEN SAID that we know more about

OBJECTIVE the moon than we do about the depths of
Create a layered our own oceans. Wouldnt it be incredible if
background for
your WordPress site we could see what it is that lives beneath the

layered
in Photoshop
waves? Over the next four pages, youll learn the
TIME REQUIRED various techniques required for creating a partial-
45 minutes submersion scene; a cross section of the ocean,
revealing what might be hiding in the depths.

backgrounds
Well be using some beautiful stock imagery,
Photoshops blending modes and some masking magic
to create our submersion effect. In this tutorial well also
touch on the blur tools and using colour to set the

in Photoshop
mood of your image. Youll need an image of an
elephant or large animal, an image of the ocean, an
underwater shot and a mountain range. Well be
producing a surreal scene but you can use these same
techniques to create more realistic images.
USE PHOTOSHOP CS6 TO MAKE A STUNNING
PARTIAL-SUBMERSION OCEAN SCENE AND SHOW
WHAT LIES IN THE DEEP

01 Set up your document

To get going, open a landscape A4 (210mm x
297mm) canvas in Photoshop. Make sure your
resolution is set to 300 dpi and Color Mode is set to
RGB. This will be the base for producing your partial
submersion scene. Place your elephant (or main
element) into the canvas and resize to fit.

Wouldnt it be incredible if we could

02 Cut it out
Use the Pen or Lasso tool to draw around the
shape of your elephant. Once you have a selection, go
to Layer>Layer Mask>Reveal Selection. This should
see what lives beneath the waves? Here mask out any white or background colour and leave
you with just your elephant. Position the elephant at the
youll learn the techniques required right side of the canvas, facing left.

168 WordPress Genius Guide

 WordPress
Genius Guide

03 Add some ocean

Next, place an image of the ocean onto your
canvas. A relatively calm, ocean scene with a few waves
should be perfect. Resize the image until it fills your
whole canvas and covers the whole of your elephant.
Were only going to need the bottom part of this picture
to create the surface of our ocean.

04 Crop the waves

Lower the Opacity of your ocean picture
and position it so that the horizon line sits just above
05 Skys the limit
Increase the Opacity of the water to 100%. Then,
paste in the same image as before. This time, using the
the elephants eye. Use the rectangle Marquee tool Marquee tool, select the sky and crop the image.
to select the sky section of the waves and use Layer Reposition the sky so its sitting on your newly created
Mask>Hide Selection to crop it out. Use the Distort horizon. Now you should have some great-looking sky
tool and drag out the bottom corners of this layer. above your water layer. Merge the sky and ocean layers.

Trees and waterfalls

06 Reveal elephant 07 Deep blue sea Top tip

Create a clipping mask on Now, add the image youve For projects such as
your sky and ocean layer. Cmd/ chosen for the underwater section of your this, image quality 01: Add the trees
Find a tree picture that suits the shape of
Ctrl+click on the elephant layer mask scene. Crop the image using a layer mask really matters. If you your mountains. Place it into your
to select the elephants outline. Click and position underneath the surface of the can afford it, stock sites document, lower the opacity and position
it in place somewhere on your mountains.
on the sky and ocean clipping mask ocean. Use Hue and Saturation to match are the best option.
and select a black brush. Use this to the colour more closely to the waters Flickr and Stock Xchng
erase the sky and ocean so your surface. Copy this layer and place it just are great free options
elephant looks submerged. below the elephant layer. though. Just make
sure youve read the
smallprint!

02: Mask the trees

Add a layer mask to the trees layer, using
Layer>Layer Mask>Hide All. Then, with a
50% hardness brush, paint in trees along
ridges and valleys of your mountains.

08 Underwater effect
The water will now look a little intense. To fix
this, Cmd/Ctrl+click on the elephant layer mask in the 09 Blurring the lines
Next we want to add a bit of perspective to
layers palette, inverse the selection and select the the image. Copy your sky and ocean layer and select a
ocean layer thats on top. Using a soft brush at 50% small section at the bottom. Crop this section and select 03: Falling water
Create a scatter brush with 80% scatter and
Opacity, erase the ocean around the elephant before Blur>Gaussian Blur and change the radius to 5px. Move create a new layer. Using white, draw
setting the blending mode to Hard Light. The elephant it down 1 or 2px from its original position. The front of waterfalls rushing down the mountains.
should now look more like its underwater. the water should now look out of focus. Adjust opacity for a more realistic look.

WordPress Genius Guide 169

 Beyond WordPress

10 Getting rocky
Now were going to create the more surreal
aspects of our partial-submersion scene. Place your
11 Mask the mountains
Using the Pen or Marquee tool, select just the
mountains imaged. Create a layer mask on this layer and,
mountain image on the canvas. Lower the opacity using a black brush, erase everything except for the parts
and line it up with your elephant. Were going to you want to keep. You may find that you need to sculpt the
make it look like the elephants back is made of mountains so that they come down to meet the water
mountains on an island rising out of the sea. where the elephants head does.

12 Elephant texture
Create a copy of your elephant layer, then
Cmd/Ctrl+click on the mountains layer mask to make a
selection. Crop the elephant to this selection so you
now have an elephant skin texture in the shape of the
mountain range. Use the clone tool to fill in any gaps
between the elephant and the top of the mountain.

13 Merge mountain and elephant

Set the blending mode of this texture layer to Soft
Light. Copy this layer and set the blending mode of the
new layer to Colour. Change the Opacity to 85%. The first
texture should give the mountains the elephant skin texture
and the second one should give you a more elephant-like
colour, so the two blend together seamlessly.

14 Add some atmosphere

Now that our partial submersion image is
coming together, we want to make it a little more moody.
The bright sunny day doesnt quite suit the surreal feel
that were going for with this image, so we need to create
Use adjustment layers
a night-time feel using adjustment layers.
in Photoshop CS6
Photoshops adjustment layers are a
fantastic tool for making reversible
changes to elements such as 15 Adjustment layers
Create a copy of your sky in a new layer, using the Top tip
brightness, contrast and saturation. Marquee tool. In the Adjustments panel, click on Brightness The techniques here
Although users can change all of and Contrast to add an adjustment layer. Make sure you
these properties through the Image click on the Clip to Layer at the bottom of the Options
could come in handy
option in the toolbar, this only allows panel. Set Contrast to 100 and Brightness to -92. This will
when building a quirky
the user to make permanent changes give the image a slightly darker sky. parallax website with a
where the image information is scrolling land or seascape
discarded. Using adjustment layers in the background. See
allows users to go back and edit
www.pojeta.cz for a
properties again and again, to get the
effect that suits the final work.
great example.
It is also possible to turn them on
and off like any normal layer to see
what has been changed and which
layers are affecting each other.
Adjustment layers are a must for any
kind of photo manipulation work, in
case users go overboard or need to
back and fix something that went
wrong. They can also let users
16 More adjustment layers
Create a Hue and Saturation adjustment layer on
top of the same sky layer were working on. Make sure to
achieve some pretty cool effects by click Clip to Layer, then set the Saturation to -50 and play
editing multiple layers all at once. with the Hue to make it a little greener. You can play with
these options to get the effect you want.

170 WordPress Genius Guide

 WordPress
Genius Guide

17 The murky depths

We still want to make the water feel a little darker to give
the impression that the elephants swimming through the depths
18 Make
dark
it
The image is definitely
of the ocean. To do this, use the Marquee tool to select the water. looking darker but its not
Choose a deep, sea green and another similar but darker tone and quite moody enough yet.
create a gradient. Set the blending mode to Multiply and the Add another Brightness
Opacity to 50%. and Contrast adjustment
layer, this time making sure
it affects all the layers below
it. Set the Brightness at -75
and Contrast to 100. As
youll see, this will darken
the tone of the whole image.

19 Hue and Saturation

Our partial-submersion image is nearly complete. Now
that its nice and dark, we need to tone down some of those very
saturated colours. Add another adjustment layer, this time for Hue
and Saturation. Make sure its affecting all layers and set the
Preset option to Old Style. This will tone down the mountains and
sea for a more subtle look.

20 Add Noise
To finish off our partial-submersion image, we want
to add some nice noise. This will make the image pop and add
to the surreal feel. Create a new layer, under your top two
adjustment layers, and fill it with white. Go to Filter>Noise>
Add Noise. Set the amount to 15% and choose Gaussian
and Monochromatic.

21 Finishing touches
Select your noise layer and change the blending mode to Multiply. Some areas of the image
might look a little too noisy. If this is the case, go to Layer>Layer Mask>Reveal All and with a soft, 50%
Opacity, black brush, go over any areas that need toning down.

Adjustment layers are a must for any

kind of photo manipulation work
WordPress Genius Guide 171
 Beyond WordPress

Add an TUTORIAL
OBJECTIVE
Get selling online with a
CSS3 web element
SELLING ONLINE PROVIDES the
opportunity for many businesses to
reach out to huge, untapped markets.
When your store can be open 24 hours a

eCommerce TIME REQUIRED day and you can reach a global market without the
1 hour costs of mailings and call centres, it can provide a
huge boost to your business. But there are plenty of
things to consider when designing an eCommerce

web element
site. Its not as simple as throwing up some shopping
cart software and plopping products into a database.
With the power of CSS3, it is possible to create some
very cool and effective web elements that can just

with CSS3
slot into place on any eCommerce website.
The products that you or your client are selling
need to stand out and the all-important buttons such
as Add to Cart need to be prominent and stylish. It is
essential to think about the presentation of customer
USING CSS3, CREATE A SIMPLE AND APPEALING reviews, the price and product description. All of
SHOPPING CART WEB ELEMENT THAT WOULD BE these things need to be easy to accomplish, and with
USEFUL ON AN ECOMMERCE WEBSITE CSS3, those things just got a whole lot easier. So in
this tutorial, we will look at how we can create a
fictional product and turn it into an appealing and
interactive web element using the power of CSS3
lets get started!

01 Set everything up
05 The CSS
006 </div>
First thing we need to do is create a new HTML5 007 Open up a CSS file and start adding some styles.
document with a link to your stylesheet within the head. 008 </div><!-- END product --> First add in some default styles within the body selector.
Then within the <body> tag, we can create two <div>s with 009 Weve set our font to Arial and given it a light grey colour,
a class name of container and then block, making sure we and well use a patterned background for the page. Finish
comment the closing tags for better readability.

001 <body>
03 Product information
Now lets add in some information about our
product. Firstly create a <div> with a class name of info and
off by giving our container <div> some width and margin.

001 body {
002 then add in the product title, wrapped within a <h4> header 002 font-family: Arial, sans-serif;
003 <div class=container> element. We then add in a little text describing our product 003 color: #aaaeb2;
004 and then finish off with the price and a Buy now button. 004 background: #f1f1f1 url(../images/
005 <div class=block> bg.png);

04
006 Star ratings 005 }
007 </div><!-- END block --> In the final bit of HTML, were going to add in a 006
008 star rating section that will be positioned at the very 007 .container {
009 </div><!-- END container --> bottom of our product block. We just simply add a <div> 008
010 with a class name of details and create an unordered list 009 width: 900px;
011 </body> with a class called rating. In a later step, were going to use 010 margin: 0 auto;
a CSS sprite to show a different-coloured star. 011 }

02 Product image and buttons

Next were going to add in an image and some
buttons for our product. Firstly we create a <div> with a
001 <div class=details>
002 <span class=time>12 hours ago</span> 06 Style the block
Things are not looking that great, so lets start
class name of product. We then pull in our product image 003 <ul class=rating> shaping it all up. By targeting the block class, we can give
and then add in two buttons. One of the buttons is a Add 004 <li class=rated></li> the body of our product information some shape and
to Cart button with a class name of buy and the other is a 005 <li class=rated></li> some nice subtle effects by using the border-radius and
View Item button with a class name of preview. 006 <li class=rated></li> box-shadow properties. We do want to make sure that the
007 <li class=rated></li> position is set to relative, as this will allow us to absolutely
001 <div class=product> 008 <li></li> position other elements within such as the buttons.
002 <img src=images/placeholder.png> 009 <li></li>
003 <div class=buttons> 010 </ul> 001 .block {
004 <a class=buy href=#>Add to cart</a> 011 </div><!-- END details --> 002 margin: 30px 0;
005 <a class=preview href=#>View item</a> 012 003 display: block;

172 WordPress Genius Guide

 WordPress
Genius Guide

<above> <above>
s
"EEJOH
UIF
QSPEVDU
JNBHF
IFSF
IBT
HJWFO
VT
TPNFUIJOH
UP
XPSL
BSPVOE
s
5IF
$44
GPS
UIF
A"EE
UP
$BSU
CVUUPO
JT
DPNQMFUF
OPX
XF
NPWF
PO
UP
UIF
OFYU
CVUUPO

<above>
s
4PNF
PG
UIF
CBTJD
TUZMJOH
BEEFE
UP
UIF
NBJO
CVUUPOT
A"EE
UP
$BSU
BOE
A7JFX
<above>
*UFN

XJMM
CF
WJFXBCMF
PODF
UIF
QSPEVDU
JNBHF
JT
NPVTFE
PWFS
s
*O
UIJT
TUFQ
XFSF
KVTU
BEEing
B
TJNQMF
BDUJWF
TUBUF
PO
UIF
A7JFX
*UFN
CVUUPO

08 Info and details 10 Button styles

004 position: relative;
005 width: 300px; Next we will give our product text and other This is where we will start giving the buttons
006 border-radius: 5px; information some shape. Firstly lets target the info class, some basic styling. Because we set the .product class to
007 background: #fff; which holds the product title and description. We then relative, we can easily use absolute positioning to give
008 box-shadow: 0 3px 8px rgba(0, 0, 0, separate the details section which is the star ratings by ourselves complete control of exactly where these buttons
.2); adding a top border and then finish this off by giving it should be. We can then give them some nice, rounded
009 } some padding all around. corners and hide them by using opacity: 0.

07 Product image
001 .info { 001 .buttons a {
Now lets set some styles for our product image. 002 display: block; 002 display: block;
Ensure the image is set to block and position is set to 003 position: relative; 003 position: absolute;
relative. Then we can set the width to 100% so it drops into 004 padding: 20px; 004 left: 50px;
the main product block. After that, we finish off by giving 005 } 005 width: 115px;
the top corners the same radius as the block. 006 006 border-radius: 2px;
007 .details { 007 padding: 18px 10px 15px 65px;
001 .product { 008 border-top: 1px solid #e5e5e5; 008 font-family: Helvetica, sans-serif;
002 display: block; 009 padding: 18px 20px; 009 font-size: 14px;
003 position: relative; 010 } 010 font-weight: bold;
004 } 011 text-transform: uppercase;

09 The large buttons

005 012 color: #fff;
006 .product img { The buttons we are talking about here are the 013 text-decoration: none;
007 width: 100%; Add to Cart and View Item buttons that we will position at 014 opacity: 0;
008 border-top-left-radius: 5px; the centre of the product image. We then hide them until 015 text-align: center;
009 border-top-right-radius: 5px; the user mouses over the product image. We wont see 016 }
010 } much in the way of buttons yet, but well tackle that soon. 017

WordPress Genius Guide 173

 Beyond WordPress

<above left>
s
5IJOHT
BSF
TUBSUJOH
UP
UBLF
TIBQF
RVJUF
OJDFMZ
OPX
UIBU
TPNF
TUZMJOH
IBT
CFFO
BEEFE
UP
UIF

QSPEVDU
EFTDSJQUJPO
<above right>
s
5IJOHT
BSF
SFBMMZ
TUBSUJOH
UP
UBLF
TIBQF
OPX
XF
IBWF
BEEFE
TPNF
TUZMFT
UP
PVS
QSPEVDU
QSJDF

<top right>
s
5IF
#VZ
/PX
CVUUPO
JT
UIF
MBTU
TUFQ
UP
JOJTI
PG
UIF
QSPEVDU
EFTDSJQUJPO
TFDUJPO
<bottom right>
s
5IF
JOBM
FMFNFOU
JT
UIF
TUBS
SBUJOH
TFDUJPO
*U
JT
IFSF
UIBU
UIF
MJTU
FMFNFOUT
BSF
USBOTGPSNFE
JOUP
TUBST

11 Icon styling
003 background: #414141; 009 background-size: 400px 80px;
Here we set some styling for the icons that will be 004 background: rgba(0, 0, 0, .85); 010 background-repeat: no-repeat;
added in the next step to both of the large buttons. Make 005 transition: background .2s ease-in; 011 box-shadow: 0 2px 0 #165181;
sure the content is empty and then set a height and width. 006 } 012 transition: background-position .2s
Then, divide the area where the icon will be by adding a 1px 007 .buy:hover { ease-in;
border to the right. Then add a subtle drop shadow. 008 background: #515151; 013 }
009 background: rgba(45, 45, 45, .85); 014 .preview:hover, .buy_now:hover {
001 .buttons a::after 010 } 015 background-position: 0 0;
002{ 011 016 }
003 content: ; 012 .buy::after {

14 Finish the buttons

004 display: block; 013 background: url(../images/cart.png);
005 position: absolute; 014 background-repeat: no-repeat; In this step, well add a simple active state on the
006 height: 48px; 015 background-position: 16px 18px; View Item button. All we are going to do is move the
007 width: 50px; 016 } button down by two pixels using the translateY value of
008 border-right: 1px solid rgba(0, 0, 0, the transform property when we click the button. In the

13 View Item button

.25); next rule, we add in the icon like we did previously.
009 box-shadow: 1px 0 0 rgba(255, 255, 255, Next up will be to add the styles to our View Item
.17); button that will sit underneath the Add to Cart button. We 001 .preview:active, .buy_now:active {
010 top: 0; are going to give this a blue colour and also give it a linear 002 transform: translateY(2px);
011 left: 0; gradient. Then, lets give it a subtle drop shadow and finish 003 box-shadow: none;
012 z-index: 1; up by giving it a two-second transition on hover. 004 }
013 } 005
001 a.preview { 006 .preview::after {

12 Add to Cart button

002 bottom: 20%; 007 background: url(../images/eye-icon.
In this step, were going to just focus on the Add 003 text-shadow: 0 -1px 1px rgba(0, 0, 0, png);
to Cart button. After positioning it 20% from the top, we .4); 008 background-repeat: no-repeat;
can give it a dark background colour. Then we can give it a 004 009 background-position: 16px 17px;
subtle transition and lower its opacity for when we hover 005 background: #286398; 010 }
over it. Lastly, we will add in our icon that will be positioned 006 background: -webkit-linear-

15 Information arrow
to the left. gradient(bottom, #1d4970, #639ed3);
007 background: -moz-linear- Lets create the small arrow that we see pointing
001 a.buy { gradient(bottom, #286398, #639ed3); up to the product image just above the products title. This
002 top: 20%; 008 background-position: 0 -15px; is going to be very simple. All we need to do is create a

174 WordPress Genius Guide

 WordPress
Genius Guide

white 25 x 25px square, position it absolutely and rotate it

by 45 degrees. Then we move it down using top -12px so
all we can see is one of the corners.
19 Buy Now button
The Buy Now button is the last step to finish off
the product description section. Were going to float this
right and use relative positioning in order to position it right
001 .info::after where we want it. Were then going to continue to give it
{ the same styling as our View Item button finishing up
002 display: block; with a nice transition and drop shadow.
003 position: absolute;
004 top: -12px; 001 .buy_now {
005 left: 23px; 002 float: right; The CSS transform property allows you to visually
006 content: ; 003 position: relative; manipulate an element, transforming its appearance.
007 height: 25px; 004 top: -5px; There are many functions to the transform property
008 background: #fff; 005 display: block; and one we used in this tutorial (Step 14, for example)
009 transform: rotate(45deg); 006 padding: 10px 10px; is called translate.

010 transform: rotate(45deg); 007 border-radius: 3px; transform: translateY(2px);

011 008 The translate(x, y) function is similar to relative
009 font-family: Helvetica Neue, positioning, translating, or relocating an element by

16 Product title Helvetica, Arial, sans-serif; x from the left, and y from the top. Its a handy way
In this simple step, we will apply some styles to 010 color: #fff; to move elements as it gives you full control of its
the product title to give our product description some 011 font-weight: bold; positioning from using only one line of code.
shape. Start by setting the position to relative and giving it 012 text-decoration: none;
some padding and margin. Then set the font family, font 013 font-size: 15px; transform: translate(2px, 10px);

weight and size. Finish up by pulling all the letters in slightly, 014 text-shadow: 0 -1px 1px rgba(0, 0, 0, To give us greater control, we can also use negative
using a negative value to the letter spacing. .4); values on either the x or y values. The line of code
015 below, for example, allows us to move an element

17 Product description 016 background: #286398; horizontally by 20 pixels.

Everything is taking shape quite nicely now and 017 background: -webkit-linear- transform: translateX(-20px)
the next step is to think about the product description. First, gradient(bottom, #1d4970, #639ed3);
lets add a two-pixel blue line just underneath the title. The 018 background: -moz-linear-
good thing about doing lines like this is the ease at which gradient(bottom, #286398, #639ed3);
019 background-position: 0 -15px;
Top tip
you can change the height. Then we give the product Icons are a highly important part
020 background-size: 400px 80px;
description some styling. of designing elements for
021 background-repeat: no-repeat;
001 .info h4::after { 022 transition: background-position .2s
eCommerce sites, so make
002 display: block; ease-in;
sure that you use them
003 position: absolute; 023 effectively.
004 bottom: 0px; 024 box-shadow: 0 2px 0 #165181;
005 content: ; 025 }
006 width: 40px; 001 .rating li {

20
007 height: 2px; The rating section 002 float: left;
008 background: #3b86c4; Here we deal with the star rating section. We 003 display: block;
009 } position the unordered list over to the right and zero out 004 height: 16px;
010 any default margin or padding. Once we do this, the block 005 width: 16px;
011 .info .description { will become shorter and our bullet points will be 006 margin-left: 5px;
012 display: block; overflowing. Lets sort that out next. 007 background: url(../images/stars.png)
013 padding-bottom: 20px; no-repeat 0 0;
014 font-family: Arial, sans-serif; 001 .rating { 008 }
015 font-size: 14px; 002 position: relative; 009
016 font-weight: 600; 003 top: 2px; 010 .rating li.rated {
017 color: #5f5f5f; 004 float: right; 011 background-position: 0px -16px;
018 } 005 margin: 0; 012 }
019 006 padding: 0; 013
007 }

18 The price
Having now got a lot of the product description
done, there are only two things left to do, one of which is 21 Seeing stars
On this final CSS rule, we are going to add in our
22 Final thoughts
eCommerce is forever growing on the web,
and the need to design cool and functional web
simple: give the product price a little bit of much-needed stars. We have included a PNG file called stars.png on the elements is becoming more and more achievable
styling. Ensure that you have a play around with this; resource disc that you can use. Were going to use this as a when using CSS3. So, experiment with what youve
sometimes a bigger font would look better, or perhaps CSS sprite and first position the green stars that have the learned throughout this tutorial and see what you
even a different colour would work well. class name of .rated added to the <li> item. can produce!

WordPress Genius Guide 175

 ffe l
l o ia
r
ia c
tr Spe

Enjoyed
this book?
Exclusive offer for new

Try
3 issues
for just
5 *

* This offer entitles new UK Direct Debit subscribers to receive their rst 3 issues for 5. After these issues, subscribers will then pay
25.15 every 6 issues. Subscribers can cancel this subscription at any time. New subscriptions will start from the next available issue.
Offer code ZGGZINE must be quoted to receive this special subscription price. Direct Debit Guarantee available on request.
This offer will expire on 31 October 2016.
** This is a US subscription offer. The USA issue rate is based on an annual subscription price of 65 for 13 issues which is equivalent
to $102 at the time of writing compared with the newsstand price of $14.99 for 13 issues being $194.87. Your subscription will start
from the next available issue. This offer expires on 31 October 2016.
 Uncover the
secrets of
web design
Practical projects
Every issue is packed with step-by-step tutorials
for Flash, Dreamweaver, Photoshop and more
About In-depth features
the Discover the latest hot topics in the industry

mag Join the community

Get involved. Visit the website, submit a portfolio
and follow Web Designer on Twitter

subscribers to

Try 3 issues for 5 in the UK*

or just $7.85 per issue in the USA**
(saving 48% off the newsstand price)
For amazing offers please visit
www.imaginesubs.co.uk/wed
Quote code ZGGZINE
Or telephone: UK 0844 848 8413+ Overseas +44 (0) 1795 592 878
+Calls will cost 7p per minute plus your telephone companys access charge
 From the makers of

WEB

THE

BOOK
DESIGN
Perfect coding with the brand-new Web Design Book. Packed
with in-depth features and step-by-step guides covering
everything from HTML & CSS to designing mobile apps, youll
find everything you need to know to become a master.

Also available

A world of content at your fingertips

Whether you love gaming, history,
animals, photography, Photoshop,
sci-fi or anything in between, every
magazine and bookazine from
Imagine Publishing is packed with
expert advice and fascinating facts.

BUY YOUR COPY TODAY

Print edition available at www.imagineshop.co.uk
Digital edition available at www.greatdigitalmags.com
 A comprehensive masterclass
to becoming an instant expert

WORDPRESS
Master the expert skills needed to create better blogs

Getting started Themes Plugins

 Navigate essential settings  Discover top WordPress themes  Explore recommended add-ons
 Set up a WordPress host  Create or customise a theme  Edit widgets and plugins
 Secure your site against hackers  Make your blog mobile-adaptable  Implement a slideshow gallery

Customisation Beyond WordPress

 Create an animated logo  Decode Google Analytics
 Add an off-screen 3D menu  Speed up WordPress
 Build a product viewer  Design layered backgrounds