final spine = 0.

346"

Responsive Design
Responsive

Responsive Design with WordPress

withWordPress
With the ever-increasing need to view websites on mobile devices,
websites have to be adaptable to thousands of different screen
resolutions. In Responsive Design with WordPress, expert web

Design
WordPress
developer Joe Casabona teaches you how to leverage WordPress
to get the most out of responsive design, implement best practices,
automate important processes, and make your life easier overall.
You’ll start with a refresher on the core functionality of WordPress,
then dive into developing responsive themes and plugins. Find out
what to consider at the outset of the design process to save hours of
work during redesigns. Learn up-to-date best practices for deter-
mining breakpoints, accessibility, and preventing website bloat for
with
better user experience no matter the user’s connection speed.
Finally, you’ll apply the principles you learn to specific tutorials,

How to make great responsive

such as building a photo gallery, map page, and products page.
Joe Casabona is a web
• Learn when to rely on themes and when it’s best to use plugins.
• Apply your responsive CSS to a WordPress theme.
developer, teacher, speaker, and
writer currently working for the themes and plugins
• Learn various navigation techniques, such as Jump to with University of Scranton. He has
smooth scrolling or Select box. been making websites since
2002 and using WordPress
• Use popular responsive techniques, like picturefill.js, to make since 2004. He is also the author
images respond to different screen resolutions and connection of Building WordPress Themes
speeds. from Scratch.
• Explore frameworks, including Bootstrap and Foundation.
• Download dozens of code samples to help implement responsive
design techniques, and test yourself with end-of-chapter quizzes.

Casabona

US $39.99 Can $41.99

Level: Intermediate
Category: Web Development/Web Design
www.newriders.com

Joe Casabona
Cover Design: Aren Straiger

9780321957412_ResponsiveWordPress_Cvr.indd 1 11/13/13 10:56 AM

Responsive
DESIGN
WordPress
with
How to make great responsive
themes and plugins

Joe Casabona
Responsive Design with WordPress
Joe Casabona
New Riders
www.newriders.com
To report errors, please send a note to: [email protected]
New Riders is an imprint of Peachpit, a division of Pearson Education.
Copyright © 2014 by Joseph Casabona
Acquisitions Editor: Michael Nolan
Project Editor: Nancy Peterson
Development Editor: Eric Schumacher-Rasmussen
Copyeditor: Joanne Gosnell
Proofreader: Scout Festa
Technical Reviewer: Stephen N. Mekosh
Production Coordinator: David Van Ness
Compositor: Danielle Foster
Cover Designer: Aren Straiger
Interior Designer: Danielle Foster
Indexer: FireCrystal Communications
Notice of Rights
All rights reserved. No part of this book may be reproduced or transmitted in any form by
any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior
written permission of the publisher. For information on getting permission for reprints and
excerpts, contact [email protected].
Image of Treo used courtesy Jonathan Vasata/Shutterstock.
Notice of Liability
The information in this book is distributed on an “As Is” basis, without warranty. While every
precaution has been taken in the preparation of the book, neither the author nor Peachpit
shall have any liability to any person or entity with respect to any loss or damage caused or
alleged to be caused directly or indirectly by the instructions contained in this book or by
the computer software and hardware products described in it.
Trademarks
WordPress is a registered trademark of the WordPress Foundation in the United States
and/or other countries.
Many of the designations used by manufacturers and sellers to distinguish their products
are claimed as trademarks. Where those designations appear in this book, and Peachpit
was aware of a trademark claim, the designations appear as requested by the owner of the
trademark. All other product names and services identified throughout this book are used
in editorial fashion only and for the benefit of such companies with no intention of infringe-
ment of the trademark. No such use, or the use of any trade name, is intended to convey
endorsement or other affiliation with this book.
ISBN 13: 978-0-321-95741-2
ISBN 10: 0-321-95741-5
9 8 7 6 5 4 3 2 1
Printed and bound in the United States of America
Dedication
To my parents, Louis and Marie, for their continued support. And to Joe and Jean
Rizzi, whose advice, kindness, and patience helped me get to where I am today.
iv RESPONSIVE DESIGN WITH WORDPRESS

Acknowledgments
I’d like to thank the following people, without whom this book wouldn’t be in
your hands:

RR Stephen Mekosh for not only being a fantastic tech editor and a good friend,
but also being the first person to show me both CSS and WordPress.

RR Michael Nolan for giving me the chance to write this book and welcoming me
to Peachpit Press/New Riders.

RR Nancy Peterson and Eric Schumacher-Rasmussen for advice and guidance,

editing, keeping me on track, and our weekly talks.

RR Joanne Gosnell and Scout Festa for copyediting and proofreading, respec-
tively, and for making it seem like I have a good command over grammar and
the English language.

RR The design team at Peachpit Press for making this book look amazing.

RR Jesse Friedman for the wonderful foreword and kind words.

RR Jason Coleman, Stephanie Leary, Lisa Sabin-Wilson, and Pippin Williamson for
letting me pick their brains on both WordPress and the art of writing a book.

RR My family and friends, especially my parents; my brothers Phil, Mike, and

Rob; Dave Redding; Rob McManus; Matt Wren; and my wonderful girlfriend,
Erin Holman.

I’d also like to make a quick mention of my brother Phil’s website,

http://phil.casabona.org. He took the headshot used in this book, and
I love his work.
 Contents v

Contents
Foreword  viii
Introduction  x

Chapter 1 What Is Responsive Web Design?   1

Responsive Web Design Origins    2
Breakpoints & Media Queries   3
The Current State of Devices   7
Consider Connection Speeds   8
Wrapping Up  11

Chapter 2 Creating a Basic WordPress Theme   13

Meet Our Website   16
Template Structure  16
The Loop  23
Custom Post Types   26
Plugins and Shortcodes   29
Wrapping Up  33

Chapter 3 Making Your Theme Responsive:

The Ground Floor   35
Responsive Techniques  36
Adding the Responsive Layout   42
Testing WordPress’ Default CSS Classes   47
Wrapping Up  55
vi RESPONSIVE DESIGN WITH WORDPRESS

Chapter 4 Making Your Theme Responsive:

Core Features  57
Handling Navigation   58
Handling Images   75
Handling Widgets   81
Wrapping Up  88

Chapter 5 Making Your Theme Responsive:

Blog Features  91
Handling Comments   92
Handling Archives   103
Wrapping Up  119

Chapter 6 Using Responsive Theme

Frameworks  121
Some Principles of Reuse to Keep in Mind   122
About WordPress Frameworks   129
Popular WordPress Frameworks   132
Wrapping Up  140

Chapter 7 Techniques and Tutorials   141

Introduction  142
How to Build a Responsive WordPress
Photo Gallery  144
How to Build a Responsive WordPress Map Page
Using Google Maps   150
How to Build a Responsive WordPress
Image Slider  154
 Contents vii

How to Build a Responsive WordPress

Contact Form  161
How to Build a Responsive WordPress
Products Page  167
Wrapping Up  177

Appendix Resources  179
A Few Words to Sum Up   180
Books  181
Meetups  184
Links  185

Index  186
viii RESPONSIVE DESIGN WITH WORDPRESS

Foreword

By Jesse Friedman
Today WordPress powers 20% of all websites, and we can look forward to it
powering 1 in 4 sites launched in 2014. I launched my first WordPress-powered
website in 2005, before all the “cool kids” were doing it. I am very proud to be a
veteran developer and strategist for a product used by millions of people all over
the world.

Since I launched that first site back in 2005, I have written my own book on devel-
oping for WordPress, and I have a few more coming out in spring 2014. I have also
contributed to other books and written articles for online publications such as
Smashing Magazine and net Magazine, and I teach both in universities and online.
I have also spoken at conferences all over the world, including one where I met
Joe Casabona.

I was honored when Joe asked me to write the foreword for this book, because I
knew it was going to be great. Joe has a real talent for turning complicated solu-
tions into very simple step-by-step directions. WordPress was built to be simple—
simple to set up, simple to install, and simple to extend. Still, it can be somewhat
challenging to understand for novice designers and developers who are looking to
build on basic WordPress functionality.

These challenges prompted me to write my book Web Designer’s Guide to

WordPress: Plan, Theme, Build, Launch in 2012 and is exactly why Joe wrote his
book this year. We are both veteran developers who want to help grow the
WordPress community. The best way to do that is to help educate the community
and share our experiences and knowledge around a product we use every day. Joe
has done just that with Responsive Design with WordPress. This is a solid book with
lots of great examples.

As a professor at two universities in Rhode Island, I know this book will compli-
ment my class curriculum beautifully. The lessons, examples, and even questions
at the end of each chapter help you build a great foundation on WordPress and
Responsive Web Design. You also will develop a WordPress theme as you follow
along with the book, so you’ll be reinforcing the skills you’re building as you read.
 Foreword ix

Not to mention you’ll be learning two skills at the same time. You’ll be learning
WordPress and, at the same time, gaining experience specifically in Responsive
Web Design. This approach will not only help to strengthen your skills in both
areas but will also make you an expert in a very profitable niche.

As I mentioned earlier, WordPress will power 25% of all websites launched

in 2014. This means that 1 in 4 new sites will need a developer who knows
WordPress. What’s more, as of this year more information is being consumed on
mobile devices than on traditional computers. If you didn’t have strong skills in
Responsive Web Design in 2013, you’re definitely going to need them in 2014
and beyond.

In my opinion, there is no better way to learn a skill than by doing it yourself. This
book is the best way to learn both WordPress and Responsive Web Design at the
same time. Great job, Joe!
 x RESPONSIVE DESIGN WITH WORDPRESS

Introduction
I got my first portable device when I was a freshman in high school. It was the
Palm m100 and I loved it dearly. It didn’t do much, and, well, at 13 or 14 I didn’t
have much to use it for. But having a computer in my pocket? Crazy! As a result,
it went everywhere with me (and may have gotten taken away once or twice after
I used it in class).

Then I moved to the Compaq iPAQ, which ran Windows and had a color screen.
Even crazier, I thought. I could run real programs on this. I even asked about
campus Wi-Fi when I was visiting colleges in the early 2000s, when it was just
becoming popular. I thought of all the amazing things I could do with a tiny com-
puter that came with a pen (stylus) and fit in my pocket. Still, I found myself want-
ing more after a while. This brings me to my first smartphone: the Palm Treo 650
(Figure 0.1).

Figure 0.1 Oh, Treo

650. I still miss you
sometimes.
 Introduction xi

I would do everything on this phone—make calls, take photos, sync my Google

Account to it. It even had a primitive browser called Blazer. I could visit websites
from my phone!

Since then, of course, the mobile landscape has changed. The iPhone brought
a full-featured browser to mobile devices, capable of everything from CSS to
JavaScript. It didn’t solve one problem, though: the problem of the small screen.
That’s where Responsive Web Design comes in.

Perhaps you’ve heard of it. It’s apparently pretty popular right now. Lots of
people—developers, designers, agencies, and users—are asking about it. And why
shouldn’t they? On top of catering to what is a quickly growing market, it’s pretty
cool. Responsive Web Design has become one of those things people check for
when they visit a site (resizing a webpage is totally the new “check the source for
table layouts”).

If you’re designing a website, you ultimately have no control over how it’s viewed;
you don’t get to decide where it’s viewed or what it’s viewed on or the connection
on which it’s viewed. That might sound scary to some, but to me (and I bet to you,
too) it’s quite the contrary. I love solving that problem. That’s not to say it’s not a
little daunting. I mean, you need to create a website that is easy to use on mobile
but that totally “wows” on the desktop. That’s what Responsive Web Design is
all about.

WordPress is pretty great too. It powers millions of webpages. Hundreds of mil-

lions, even. As you read in the Foreword, it will run 1 of every 4 websites launched
in 2014. It does a lot for us while allowing us to do a lot. So how does WordPress
fit in with Responsive Web Design? Well, as it turns out, it can be really helpful
when creating responsive themes; it has a lot of really great built-in features that
we, as developers, can leverage to create better responsive sites. And that’s just
what I’m going to show you how to do.

Who Is This Book for?

I’d like to tell you that this book is for anyone looking to develop WordPress sites,
but in order to get into the real heart of why I wrote this book, I need to make a
few assumptions about you, dear reader.

First, I assume you have a working knowledge of HTML, CSS, PHP, JavaScript,
and MySQL. I also assume you have some familiarity with WordPress—you’ve
installed it, you use it, you’ve possibly even coded a theme for it. Finally, I assume
you’ve used a server in some capacity; you should at least know the WordPress
directory structure and how to use FTP/SFTP.
xii RESPONSIVE DESIGN WITH WORDPRESS

So this book is for web developers and WordPress developers who want to take
advantage of what WordPress has to offer in order to create great responsive
websites. In this book, we are going to cover a wide range of topics and techniques
for converting website elements to responsive WordPress theme features.

I will provide a bit of a primer, however. In the first chapter, we will take a closer
look at Responsive Web Design: what it is, where it came from, and best practices
for using it. Then, there will be a brief overview of WordPress theme develop-
ment; this will go over some of the major parts of the WordPress theme—impor-
tant files, the Loop, Custom Post Types, plugins, and more. Then, we’ll get into the
real fun part.

The real meat of the book—making a responsive WordPress theme—is divided

into three parts. Chapter 3 will cover prominent responsive techniques and
how to integrate them into the WordPress theme. Chapters 4 and 5 will look at
specific components of a WordPress website, including navigation, images, com-
ments, widgets, archives, and plugins.

We will wrap up the book by looking at responsive theme frameworks and child
themes in Chapter 6, followed by a cookbook-style section full of tutorials for
responsive development in Chapter 7.

Why Did I Write This Book?

When I came up with the idea for this book, there were a lot of things floating
through my head. Responsive Web Design is always changing; WordPress is
always changing. The best practices of a couple of years ago have changed in both
fields, and it’s important to get that information out.

There is a big movement in the web development community toward “doing

responsive responsibly” (a phrase coined by Scott Jehl); this is the idea that
responsive isn’t just about screen sizes. There is another big movement in the
WordPress community to remove functionality from themes (features such as
sliders and Custom Post Types that rely on content). I wanted to create a single
place that talks about these things, as a lot of web developers are likely working
with both responsive design and WordPress.
 Introduction xiii

Coding Conventions
First of all, any code you come across in the book will be presented in one of two
ways. It could be inline, like this: <?php echo “Hello World!”; ?>, or it could be in
its own block, which looks like this:

function hello_world(){
$s= “Hello World”;
return $s;
}
print hello_world();

Either way, you should be able to recognize it pretty quickly. As far as standards,
the WordPress Codex lays out quite a few (http://rwdwp.com/16). I will do my
best to adhere to these coding standards.

To denote that the code on the page takes place in the middle of a block of code
(that is, there was some code skipped between the first line listed and the next),
look for an ellipses (...).

A couple of things I’d like to point out: I will be using HTML5 markup here, but we
won’t do anything with the more advanced facets of HTML5, like Web Sockets or
Storage APIs.

In most cases, the CSS will use .classes instead of #ids. This should make for
cleaner CSS while eliminating the need for really specific selectors. All of my CSS
will be formatted like this:

.class-name{
color: #FFFFFF;
background: #000000;
}

Notice the use of dashes (-) instead of camel case or underscores, and the fact TIP
that the closing bracket is also indented. This makes it easier to read the CSS, Look for text like
especially when there is a lot. this in the margins
for Tips and Notes.
Conversely, my PHP function names will always use underscores (_) and be pre-
fixed with mf_, like this: mf_get_featured_images().
xiv RESPONSIVE DESIGN WITH WORDPRESS

Finally, sometimes the layout limitations of a print publication mean that we have
to stretch single lines of code over more than one line. In those cases, you’ll see
a light gray arrow (p) to indicate that these lines of code should not be broken
when you use them. If you’ve got the digital version of this book, you may find that
code breaks unpredictably in the text. In that case, it’s important to rely on the
downloadable files (www.rwdwp.com) for accuracy.

Other Book Notes

There is a lot of code in the book. Most of the time I will point out where
you can find that code. If I don’t, all of it is available on the book’s website,
www.rwdwp.com, as well as on GitHub. You will also find a list of all the
short URLs and the sites they point to.

As you code throughout the book, you’ll notice that I don’t make much mention
of testing before Chapter 6; it’s important to test on at least a couple of devices,
especially if you plan on using these techniques in production-ready sites (and I
hope you do).

Finally, I tend to use a lot of acronyms, which are usually defined in context.
In case they aren’t, here are the most common ones:

RR RWD: Responsive Web Design

RR WP: WordPress

RR RESS: Responsive Design + Server Side Components

RR The Codex: the WordPress Codex (or documentation of the API)

 4
Chapter

Making
Your Theme
Responsive:
Core Features
58 RESPONSIVE DESIGN WITH WORDPRESS

So far, you’ve seen multiple ways to make a website responsive. Now it’s time to
really dig in and combine those techniques with WordPress’ unique capabilities.

In Chapter 3, you learned how to apply your responsive CSS to a WordPress theme.
You also got an in-depth look at WordPress’ generated CSS classes and created
some default styles for what are considered the “essential” ones. From here on out,
you’ll go even further, focusing on two types of features: core and blog.

This chapter looks at some of the core features of WordPress instrumental to

a good User Experience. The next chapters are about using what WordPress
provides developers and leveraging those tools to create better responsive sites.
That said, you’ll look at three areas of development in this chapter: navigation
menus, images, and widgets.

Handling Navigation
Responsive navigation techniques are bountiful in books and blog posts;
many developers have come up with their own implementations for navigation
menus on responsive sites. Brad Frost outlines some of the most popular ones at
http://rwdwp.com/32.

In this section, we will look at a few popular techniques and how they look on the
Millennium Flights site, and then decide what’s best.

A Look at Popular Techniques

If you looked at Brad Frost’s post, you’ll see that he also wrote a second one and
linked to several others. In other words, there are lots of navigation menu pat-
terns to choose from.

We will explore three possible options for the Millennium Flights navigation: Do
Nothing (or Top Nav), Jump to (or Footer nav), and the Select box…plus a bonus
technique that may surprise you. While we won’t be implementing it, we will also
look at the Off-Canvas technique, which is a bit more advanced

DO NOTHING (OR TOP NAV)

This is the easiest one to implement. You simply leave the navigation as is at the
top of your site; you’ll see what the “technique” looks like in Figure 4.1.
 Making Your Theme Responsive: Core Features 59

“Hide and Cry”

Frost mentions one technique in which you hide your navigation from mobile users, naming it “Hide
and Cry.” This reflects the all-too-prevalent thinking that users on mobile don’t need as much function-
ality as those on the desktop, and it’s wrong. 31% of American adults in 2012 used their phones for the
majority of their Internet access. In essence, you’re punishing mobile users by limiting their experience
and making them download content that they’ll never see. It might be a convenient way to handle other
pages—saving on page height and adjusting the navigation—but it’s a bad practice, for some of the
reasons discussed in Chapter 1, primarily that you make users download sections of websites they will
never see, increasing bandwidth required to download the site and slowing things down.

Figure 4.1 Millennium Flights with the

“Do Nothing” responsive navigation technique.

As long as your navigation styles are not limited by a specific Media Query, they
will apply to the entire site if you employ the Do Nothing technique. It is easy to
apply because you don’t have to make changes to your code, but there are some
pitfalls. Luckily the navigation for Millennium Flights uses big text, but imagine a
site with smaller text using this approach. Users may have difficulty selecting the
menu items on smaller screens (Figure 4.2).

Figure 4.2 On the left is how this website navigation renders on an Android phone. On the right,
you see what happens when you resize the browser. In both cases, the nav appears small and
difficult to press without zooming.
 60 RESPONSIVE DESIGN WITH WORDPRESS

The other big issue with the technique is that as a user adds more menu items, the
height of the page increases. You don’t want to have a situation where the user
only sees a logo and menu items on page load on a smart phone.

“DO SOME THINGS”

I have a slight modification to this approach, which I’ve very cleverly called
“Do Some Things.” It’s the idea that functionally, nothing about the navigation
changes; it doesn’t change locations or implementations. It’s still an unordered
list at the top of the page. That is, it will stay in the same place and it will be a list
of menu items, exactly the same on both layouts. However, you do make slight
tweaks and changes to the CSS, optimizing it a little bit for mobile. An example
can be seen on my personal site, Casabona.org (Figure 4.3).

Figure 4.3 Casabona.org’s navigation on both mobile and desktop layouts. The position of the navigation doesn’t change,
but the items become more button-like on mobile to make pressing them easier for the user.

NOTE Not too much has changed in the overall webpage layout, but you’ll see each menu
It should be men- item on smaller screens is its own individual button (as opposed to the contiguous
tioned that this grey bar on wider screens), and the font gets a little bolder on smaller screens.
section isn’t going
to present a single This slightly modified approach still runs into some of the pitfalls of the “Do
“right” approach; it Nothing” approach, like taking up a lot of screen real estate on small screens.
all depends on the
situation. These are
JUMP TO OR FOOTER ANCHOR
just the options.
In this technique, as the screen gets smaller, the navigation is replaced by a single
link that jumps the user to navigation in the footer. This, like the “Do Nothing”
approach, is easy to implement, but it saves on screen real estate, as the menu is
no longer at the top to take up space (Figure 4.4).
 Making Your Theme Responsive: Core Features 61

Figure 4.4 The Jump

to navigation. The menu
items are replaced with
a single link that brings
users to the bottom of
the page.

There are a couple of ways to code this technique. The most common one is to
use CSS’s display: none; to hide the navigations that should not be in use. For
example, if this is the header and footer markup:

Header Markup

<nav id=”main”>
<div class=”full”>
<?php wp_nav_menu( array(‘menu’ => ‘Main’ )); ?>
</div>
<div class=”jump”>
<a href=”#footernav”>Jump to Nav</a>
</div>
</nav>

Footer Markup

<nav id=”footernav”>
<?php wp_nav_menu( array(‘menu’ => ‘Main’ )); ?>
</nav>

The CSS would look like this:

nav#main .full{ display: none; }

#footernav ul{
margin: 0;
padding: 0;
}

#footernav li{
font-size: 1.5em;
62 RESPONSIVE DESIGN WITH WORDPRESS

border-bottom: 1px solid #FFFFFF;

}

#footernav li a{
padding: 10px;
}

...
@media screen and (min-width: 34.188em){

...

nav#main .full{
display: block;
}
#footernav, nav#main .jump{
display: none;
}

...
}

This code works fine, but it’s forcing the user to download code that he isn’t going
to see. Later in this section, you are going to see how this method can be improved
using RESS.

Aside from the extra code, this experience might be a jarring one for the user.
The page view would change from the top of the page to the bottom without
any scrolling or animations, changing everything the user was looking at; it’s not
very smooth. A better solution, and one that takes into account the issues we’ve
seen with the techniques we’ve looked at, would be to convert the navigation to a
Select box for mobile.

THE SELECT BOX

The Select box is a clean, user-friendly method that places the navigation at the
top of the page without taking up too much screen space. One drawback is that
it’s not as easy to implement as the previous methods because you actually need
to code up two separate menus—one normal menu, and one inside of a select box
(Figure 4.5).
 Making Your Theme Responsive: Core Features 63

Adding Smooth Scrolling to the “Jump to” Technique

You can make the transition a bit smoother using a jQuery scroll effect. After adding jQuery, add this
function to your header (or functions.php using the wp_head action):

$(function() {
$(‘a[href*=#]:not([href=#])’).click(function() {
if (location.pathname.replace(/^\//,’’) ==
pthis.pathname.replace(/^\//,’’)
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $(‘[name=’ +
pthis.hash.slice(1) +’]’);
if (target.length) {
$(‘html,body’).animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});

Figure 4.5 The Select box navigation

approach clears up a lot of room while still
keeping navigation at the top; however,
the user still has to download two different
navigation menus.
64 RESPONSIVE DESIGN WITH WORDPRESS

Let’s think outside of WordPress for a second, and look at the HTML structure for
a select menu navigation:

<select onchange=”location=this.options[this.selectedIndex].
pvalue;”>
<option value=”” selected=”selected”>Go to...</option>
<option value=”/home/”>Home</option>
<option value=”/about/”>About</option>
<option value=”/destinations/”>Destinations</option>
<option value=”/contact/”>Contact</option>
</select>

While this seems like a pretty standard implementation, it’s actually going to take
a little bit of work to get this properly working in WordPress because it changes
the entire structure of the menu. Luckily, WordPress allows developers to do just
that with the Walker_Nav_Menu class. A “Walker” in programming is a way to tra-
verse, or process, tree-like data structures, which create hierarchical data. In this
case, it’s traversing HTML to create an unordered list of nav items. You will create
a file called Select_Nav_Walker.php, where you will write a class that extends
Walker_Nav_Menu, using the four functions it uses to display the menu:

class Select_Nav_Walker extends Walker_Nav_Menu {

public function start_lvl(&$output, $depth){}

public function end_lvl(&$output, $depth){}
public function start_el(&$output, $item, $depth, $args){}
public function end_el(&$output, $item, $depth){}
}

The functions start_lvl and end_lvl print the opening and closing elements for
the menu; by default this is <ul> and </ul>. You will actually add the new markup
(the <select> tags from above) in a different area, so both of those functions will
remain as is: blank.

The other two functions, start_el and end_el, will be used to print the individual
menu items. end_el is incredibly simple:

public function end_el(&$output, $item, $depth){

$output .= “</option>\n”;
}
 Making Your Theme Responsive: Core Features 65

The function is just one line—the markup that closes the menu item. By default,
it is </li>, but since this is a select menu, you are changing it to </option>. The
variable $output is what this class continually adds to before sending it back to be
printed on the screen. Because of that, it’s important to use “.=” and not just “=”.
If you don’t, your menu will just be </option>.

The start_el function is a little more complicated than that, and it will make use
of the $item argument passed to it:

public function start_el(&$output, $item, $depth, $args){

$item->title = esc_attr($item->title);
parent::
start_el(&$output, $item, $depth, $args);
$output .= ‘ <option value=”’. $item->url .’”>’.
p$item->title;
}

The first line escapes the title, converting special characters to HTML entities.
Then it calls the parent function (remember this class is extending the built-in
Walker_Nav_Menu class), which will apply all CSS classes that would otherwise be
applied. Finally, we send the <option> element to $output. $item is an array that
has several values, including url and title.

That completes the class, with the entire thing looking like this:

class Select_Nav_Walker extends Walker_Nav_Menu {

public function start_lvl(&$output, $depth){}

public function end_lvl(&$output, $depth){}

public function start_el(&$output, $item, $depth, $args){

$item->title = esc_attr($item->title);
parent::start_el(&$output, $item, $depth, $args);
$output .= ‘ <option value=”’. $item->url .’”>’.
p$item->title;
}

public function end_el(&$output, $item, $depth){

$output .= “</option>\n”;
}
}
66 RESPONSIVE DESIGN WITH WORDPRESS

You can either place it directly into functions.php or in its own file, including it in
functions.php.

After that, you’ll need to attend to the header.php markup, which looks like this:

<nav id=”main”>
<div class=”full”>
<?php wp_nav_menu( array(‘menu’ => ‘Main’ )); ?>
</div>
<div class=”select-menu”>
<?php
wp_nav_menu(array(
‘menu’ => ‘Main’,
‘walker’ => new Select_Nav_Walker(),
‘items_wrap’ => ‘<select ONCHANGE=
p”location=this.options[this.selectedIndex].
pvalue;”><option>Go to..</option>%3$s</select>’,
‘container’ => false
)
);
?>
</div>
</nav>

You will show/hide the proper menu the same way you did with the Footer
Anchor technique, but we will explore a better option later in this section.

What should be pointed out here are the new entries for the select-menu version
of wp_nav_menu(). There are three new arguments being passed to it:

RR walker: The value of the Walker is the instantiation of your Select_Nav_

Walker class. This tells WordPress to use this walker instead of the default to
construct the menu.

RR items_wrap: By default, this is the <ul> wrapper for the normal walker. Since
your walker is for a select menu, the appropriate markup should be sent. You’ll
also notice the %3$s. This is necessary to make sure $output is included.

RR container: This by default wraps the entire list in a div, which we don’t
need to do.
 Making Your Theme Responsive: Core Features 67

That’s everything. Now you should have the regular menu at full width and the TIP
select menu for smaller screens. This still has the issue of multiple menus being There are Word-
downloaded, but we will fix that later. Press plugins that
achieve this same
effect. It seems the
OFF CANVAS most popular one
This technique is by far the most advanced one we’ll cover, but it’s also the slick- is this one: http://
rwdwp.com/33.
est. With this method, you’ll have your main content on screen and then a button
(or even swipe) to reveal more content off to the left or right. This is used by a
lot of mobile applications to place the navigation on the left side, hidden away
(Figure 4.6).

Figure 4.6 Forecast.io,

an incredible mobile
website, employs the
off canvas technique.

This technique completely frees up screen space so the user only sees content.
The biggest drawback is the difficulty in implementing it. Depending on how you
do it, you could be hiding content, and you will almost definitely use JavaScript
(probably jQuery) for the animation effect. It would also, in essence, create
an entirely new page section you would have to manage. If you want to see
 68 RESPONSIVE DESIGN WITH WORDPRESS

this technique in action or take a crack at it yourself, Jason Weaver and Luke
Wroblewski have released code, resources, and examples at http://rwdwp.
com/34 (Figure 4.7).

Figure 4.7 The Off Canvas website has a live demo, sample code, and resources for those interested in trying it out.

This is not the only implementation of the off canvas approach. If menus (or any
content) slide down from the top or up from the bottom, it’s also considered off
canvas, which is really just the viewable area on the screen. Due to its popularity, an
open source JavaScript plugin was created to easily implement it. It’s called respon-
sive-nav.js. Let’s look at implementing that into the Millennium Flights theme.

RESPONSIVE-NAV.JS
In Chapter 3, we saw some questions that should be asked when considering
using some piece of JavaScript; questions like, “Do I need this?” and “How large is
the file?” Truth be told, we really don’t need to use responsive-nav.js. However, it is
one of the best and most lightweight implementations of the off canvas approach
out there. At 1.7 KB, it’s considered small by anyone’s standard.

Everything you’ll need to implement this can be found at http://rwdwp.com/26

(Figure 4.8).
 Making Your Theme Responsive: Core Features 69

Figure 4.8
The Responsive Nav
home page, illustrating
how the JavaScript
works.

A few things need to happen in order to make responsive-nav.js work in the

Millennium Flights theme. First, you’ll need to enqueue the script (after down-
loading the files). Since there is already a function to do that in the theme, you can
just add a new line to it:

function mf_scripts() {
wp_enqueue_style( ‘googlewebfonts’,
p‘http://fonts.googleapis.com/css?family=
pOpen+Sans+Condensed:300’ );
wp_enqueue_script( ‘responsivenav’,
pTEMPPATH.’/js/responsive-nav.min.js’, array());
echo ‘<!--[if lt IE 9]>’;
echo ‘<script src=”http://html5shim.googlecode.com/
psvn/trunk/html5.js”></script>’;
echo ‘<script src=”’. TEMPPATH .’/js/respond.min.js”>
p</script>’;
echo ‘![endif]-->’;

}
70 RESPONSIVE DESIGN WITH WORDPRESS

Since the script requires the containing div to have a CSS ID, you’ll have to modify
the nav function slightly. In header.php, change the wp_nav_menu function to this:

<nav id=”main”>
<?php wp_nav_menu( array(‘menu’ => ‘Main’,
p‘container_id’ => ‘top-menu’)); ?>
</nav>

You’re adding one more argument, container_id, which will add id=”top-menu”
to the div containing the nav menu. Then it’s time to add the CSS.

From the downloaded files, you’ll also find a style sheet called responsive-nav.
css. You can copy that CSS into your theme’s style.css file, but you’ll need to make
some modifications. This will go before any Media Queries:

#top-menu ul {
margin: 0;
padding: 0;
width: 100%;
display: block;
list-style: none;
}

#top-menu li {
width: 100%;
}

.js #top-menu {
clip: rect(0 0 0 0);
max-height: 0;
position: absolute;
display: block;
overflow: hidden;
zoom: 1;
}
 Making Your Theme Responsive: Core Features 71

nav.opened {
max-height: 9999px;
}

This is a slight modification of the default CSS, changed only to match our new
menu selector. The same thing goes for the CSS added after the first Media Query:

@media screen and (min-width: 34.188em){

.js #top-menu {
position: relative;
}
.js #top-menu {
max-height: none;
}
#nav-toggle {
display: none;
}
...
}

Finally, there is a bit of JavaScript that should go before the </body> tag. To insert
it into the theme, we can use the wp_footer action:

function mf_responsive_nav(){
echo ‘<script>
var navigation = responsiveNav(“#top-menu”);
</script>’;
}

add_action(‘wp_footer’, ‘mf_responsive_nav’);

This will tell responsive-nav.js to look for the div with the ID top-menu and apply
the changes to the menu in that container. Once that is done, you should be able
to refresh your page and see the results (Figure 4.9).
 72 RESPONSIVE DESIGN WITH WORDPRESS

Figure 4.9 Millennium

Flights with the default
settings for responsive-
nav.js. Most of what’s
seen here is customiz-
able through JavaScript
or CSS.

Most of what can be seen in the screenshot is customizable using CSS or the
arguments you pass to the responsiveNav() function. In the final version of
the theme, instead of the text, “Menu,” the common menu icon (often called
the “hamburger” for some unfortunate reason) is used.

Changing Navigation on the Server Side

Up until this point, the techniques you’ve been using relied completely on
CSS—namely showing and hiding navigation based on breakpoints. However,
in Chapter 3, you saw a function that could be especially helpful for navigation:
mf_is_mobile_device(). Using this, you can choose to conditionally show one
version of the site’s navigation over another instead of loading both. Let’s first
look at the select box navigation. Instead of having this:

<nav id=”main”>
<div class=”full”>
<?php wp_nav_menu( array(‘menu’ => ‘Main’ )); ?>
</div>
<div class=”select-menu”>
<?php
wp_nav_menu(array(
‘menu’ => ‘Main’,
‘walker’ => new Select_Nav_Walker(),
‘items_wrap’ => ‘<select ONCHANGE=
p”location=this.options[this.selectedIndex].
pvalue;”><option>Go to..</option>%3$s</select>’,
‘container’ => false
)
);
?>
</div>
</nav>
 Making Your Theme Responsive: Core Features 73

…we can have something much cleaner, and requiring much less CSS:

<nav id=”main”>
<?php
if(!ISMOBILE){
wp_nav_menu( array(‘menu’ => ‘Main’, ‘container_id’ =>
p‘top-menu’));
}else{
wp_nav_menu(array(
‘menu’ => ‘Main’,
‘walker’ => new Select_Nav_Walker(),
‘items_wrap’ => ‘<select ONCHANGE=
p”location=this.options[this.selectedIndex].
pvalue;”><option>Go to..</option>%3$s</select>’,
‘container’ => false
)
);
}
?>
</nav>

Notice there isn’t an extra class to hide one menu over the other. It simply says, “If the NOTE
user is not on a mobile device, print the normal menu. Otherwise, print the select box When testing a
menu.” This means the user isn’t downloading two sets of navigation, and you don’t layout using RESS,
have to write extra CSS to hide or show that navigation based on breakpoints. you won’t be able
to just resize your
The same thing can be done with the Jump to or Footer Anchor approach. browser window;
In header.php, you’ll have: you will have to do
device testing.
<nav id=”main”>
<?php
if(!ISMOBILE){
wp_nav_menu( array(‘menu’ => ‘Main’,
p‘container_id’ => ‘top-menu’));
}else{
echo ‘<a href=”#footernav”>Jump to Nav</a>’;
}
?>
</nav>
 74 RESPONSIVE DESIGN WITH WORDPRESS

This is constructed just like the Select box code above, except there is a jump link
to the footer. And here is what the footer.php markup looks like:

<?php if(ISMOBILE){ ?>

<nav id=”footernav”>
<?php wp_nav_menu( array(‘menu’ => ‘Main’ )); ?>
</nav>
<?php } ?>

TIP In the footer, you are checking to make sure the user is on a mobile device before
If you are having printing out the navigation.
issues implement-
Moving forward, we will be able to employ this technique in several other areas
ing RESS into your
theme or need some of the theme. So with all of these techniques and more, how do you decide which
added functionality, one to use?
Jesse Friedman’s
WP Mobile Detect
plugin is available in Ask What’s Best for the Users
the Plugin Reposi- As with just about anything in the field of web development (nay, design and
tory http://rwdwp. development in general), it’s best to ask what’s best for your users. In many cases,
com/35.
that might be whatever takes up the least amount of screen real estate.

However, maybe your users would understand the navigation better if they saw
it all laid out in front of them. Maybe your users don’t realize what the “ham-
burger” icon is. The best thing to do is some research into how your users use
your website. Do some A/B testing, or at the very least, get the opinion of friends
and family. Ask your users for feedback. As with a lot of things in coding, simple is
probably better than clever.

To determine what’s best for your users, ask yourself a few questions:

RR From what class/type of devices do my users access the site?

RR Are my users there to see what’s on the home page, or do they usually go to a
different page?

RR What information do I want to present as most important?

RR How tech-savvy are my users?

And, as mentioned earlier, give them some options and see what works out best.
 Making Your Theme Responsive: Core Features 75

Using SVG Images

We won’t discuss Scalable Vector Graphics (SVG) extensively here because it’s not specific to
WordPress, but it is a very good technique to use when it comes to scalable images. SVGs have no set
pixel widths or heights associated with them (though there is a default width and height). Because of
this, they scale well without losing quality, and even look great on Apple Retina displays.
Using them is as easy as using the <img> tag, though there are some support issues, namely for
IE 8 and below and Android 2.3 and below. Chris Coyier has a really great tutorial for getting started
here: http://rwdwp.com/36. In order to allow SVG uploads in WordPress, you will also need this
function (also courtesy of Chris Coyier):

function mf_allow_svg( $mimes ){

$mimes[‘svg’] = ‘image/svg+xml’;
return $mimes;
}
add_filter( ‘upload_mimes’, ‘mf_allow_svg’ );

Handling Images
Images are one of the biggest sticking points for making a website truly respon-
sive; it’s not good enough to just resize them along with the layout or container.
There are a lot of tools and techniques out there to aid in better resizing, smaller
file sizes, faster loading, and more. What really helps is the way WordPress pro-
cesses uploaded images.

How WordPress Uploads Images

By default, when you upload an image, the WordPress media uploader creates
several different sizes: thumbnail (150x150px max), medium (300x300px max),
large (1024x1024px max), and full, which is the original size of the uploaded
image. You can also specify different sizes using the_post_thumbnail() or
get_the_post_thumbnail(), but this will only return an <img> tag with width and
height specified. If you want just an image URL, you can use wp_get_attachment_
image_src(), which returns an array with URL, width, height, and a Boolean; the
Boolean tells you if the image is a resized version (true) or the original (false).
 76 RESPONSIVE DESIGN WITH WORDPRESS

TIP You can add new image sizes associated with keywords like “thumbnail,” or
This is also really “medium,” for example, which will get resized. That function is add_image_size();
useful if you want if you want to create a feature Destination image for the Millennium Flights CPT,
to create a more di- you would use this code:
verse image range
for the technique add_image_size(‘mf_destinations_featured’, 650, 300, true);
we are going to
implement in the In order, the parameters are: $name (which can be used in functions like
next section. the_post_thumbnail()), $width, $height, and $crop. $crop (which is false
by default) tells WordPress if it should do a hard crop. A hard crop will crop to
the exact dimensions specified, regardless of aspect ratio. If $crop is false, it
will do a soft or proportional crop. The image’s width and height are treated as
maximum dimensions.

So when you upload an image, at least three new images (or different sizes) are
created. Because of this, the file size is affected; smaller images will have smaller
files sizes. We can take advantage of these images by calling them using a light-
weight JavaScript library called picturefill.js to show the appropriately sized
images based on screen size.

Using picturefill.js
picturefill.js was created by Scott Jehl to mimic functionality for a proposed
<picture> HTML element that would nicely handle responsive (and even
Retina-ready) images. All of the information about it can be found at
http://rwdwp.com/23.

To use it, you list several lines in this format:

<span data-src=”image.jpg” data-media=”(min-width: 400px)”></span>

The data-src is the image source, and the data-media is the Media Query at which
the image should be used. A full block might look like this example on GitHub:

<span data-picture data-alt=”A giant stone face at The Bayon

temple in Angkor Thom, Cambodia”>
<span data-src=”small.jpg”></span>
<span data-src=”medium.jpg”
pdata-media=”(min-width: 400px)”></span>
<span data-src=”large.jpg”
pdata-media=”(min-width: 800px)”></span>
 Making Your Theme Responsive: Core Features 77

<span data-src=”extralarge.jpg”
pdata-media=”(min-width: 1000px)”></span>

<!-- Fallback content for non-JS browsers. Same img src

pas the initial, unqualified source element. -->
<noscript>
<img src=”external/imgs/small.jpg” alt=”A giant stone face at
pThe Bayon temple in Angkor Thom, Cambodia”>
</noscript>
</span>

The first one is assumed to be for the smallest screens, and you can have as many
entries/Media Queries as you like. The GitHub page talks about various uses
before the basic example here, but this will serve us well.

As you might imagine, we can use this script along with the multiple image sizes
produced by WordPress’ Media Manager to automatically generate a picturefill
object that can be called in your themes:

function mf_get_featured_image($html, $aid=false){

$sizes= array(‘thumbnail’, ‘medium’, ‘large’, ‘full’);

$img= ‘<span data-picture data-alt=”’.get_the_title().’”>’;

$ct= 0;
$aid= (!$aid) ? get_post_thumbnail_id() : $aid;

foreach($sizes as $size){
$url= wp_get_attachment_image_src($aid, $size);

$width= ($ct < sizeof($sizes)-1) ? ($url[1]*0.66) :
p($width/0.66)+25;

$img.= ‘
<span data-src=”’. $url[0] .’”’;
$img.= ($ct > 0) ? ‘ data-media=”(min-width: ‘.
p$width .’px)”></span>’ :’></span>’;

$ct++;
}
78 RESPONSIVE DESIGN WITH WORDPRESS

$url= wp_get_attachment_image_src( $aid, $sizes[1]);

$img.= ‘<noscript>
<img src=”’.$url[0] .’” alt=”’.
pget_the_title().’”>
</noscript>
</span>’;
return $img;
}

There are a few things going on here. The first is that the function has an array of all
the default sizes in WordPress. If you have your own sizes defined, you will have to
add them here. This is so the picturefill element is accurately populated. After some
setup (defining the image sizes, opening the picturefill element, initializing a coun-
ter), it moves through the $sizes, printing an image entry for each size.

For each entry, wp_get_attachment_image_src() is called to grab the URL of the

image based on the image’s ID (which get_post_thumbnail_id() returns based
on the post ID) and the size. wp_get_attachement_image_src() returns an array
that includes the image, the width, the height, and whether or not it’s cropped.
The first time through the Loop, we don’t need to specify a minimum width, since
that image will be a default. That’s where the counter comes in. For the rest of the
iterations, the width is calculated using a simple formula and an assumption. Let’s
look at that line again:

$width= ($ct < sizeof($sizes)-1) ? ($url[1]*0.66) :

p($width/0.66)+25;

What’s happening here in most cases is that we start showing the next image
size up at 66% the width of the image; so if the image is 1000px, it will start being
shown at 660px. However, if it is the last image in the array, the assumption is that
this is the biggest image (the image at full width). There are some strange results
returned in some cases with this image, so you can’t rely on the width and height
returned with the full width image. We simply take the previous image’s width
and add 25px to it.

The last thing this function does before returning the picturefill code is set a
default image in case JavaScript is disabled. The medium image is the default.

Since this plugin requires picturefill, one more task needs to be performed, and
that’s to actually add picturefill.js to the rest of the JavaScript loaded on the site.
Looking at the mf_scripts() we’ve used throughout the book, you’ll notice that
 Making Your Theme Responsive: Core Features 79

the line wp_enqueue_script( ‘picturefill’, TEMPPATH.’/js/picturefill.

js’, array()); has already been added.
If you’d rather continue to use the_post_thumbnail() instead of a new function,
or if you want this to apply to all features images/instances of the_post_
thumbnail(), you can easily do that by adding this filter to your functions.php file:

add_filter( ‘post_thumbnail_html’, ‘mf_get_featured_image’);

It’s important to note that this function will not automatically run for all images NOTE
on pages and blog posts; this is strictly for getting featured post images. To To support
replace all post images would require content filters, as well as some regex magic featured images,
to replace the <img> tag with the picturefill script. you will need to
add add_theme_
There is a plugin available that will replace content images with picturefill, located support( ‘post-
at http://rwdwp.com/37. Based on my testing, it works fairly well, but you may see thumbnails’ );
performance issues. That said, this might be your best bet as what I was experi- to your functions.
menting with returned worse performance than the plugin. php file.

Moving forward, you can also use a shortcode, along with the above function.
I didn’t touch on the arguments the function accepts, but the first is $html; this
is the HTML send by the post_thumbnail_html filter. The second is $aid, for
attachment ID. This will allow you to call the function on any image you want,
not just featured ones.

The shortcode you’re going to create is [mf_image src=’path/to/image’]. This

is a shortcode that will accept a URL for an argument and print out the picturefill
markup for that image. The function that does the heavy lifting is a modified ver-
sion of one by wpmu.org (http://rwdwp.com/38) and is listed below, but first let’s
look at the function used for the actual shortcode:

function mf_responsive_image($atts, $content=null){

extract( shortcode_atts( array(
‘src’ => false
), $atts ) );

if(!$src){
return ‘’;
}else{
$aid= mf_get_attachment_id_from_src($src);
$img= mf_get_featured_image(‘’, $aid);
}
 80 RESPONSIVE DESIGN WITH WORDPRESS

return $img;

add_shortcode(‘mf_image’, ‘mf_responsive_image’);

The function will check to make sure a URL is passed, then grab the ID for that
URL (that’s where wpmu.org’s function comes in) before passing that ID off to the
mf_get_featured_image function. It will then return the HTML generated. Here
is the function that grabs the attachment ID based on the URL:

function mf_get_attachment_id_from_src($url) {
global $wpdb;
$prefix = $wpdb->prefix;
$attachment = $wpdb->get_col($wpdb->prepare(“SELECT ID
pFROM “ . $prefix . “posts” . “ WHERE guid=’%s’;”, $url ));
return $attachment[0];
}

NOTE Between the shortcode and the featured image function, you have two good
Unfortunately, the methods for using picturefill and responsive images moving forward. Hopefully
shortcode means an efficient way to do all images will emerge in the near future. In the mean-
you won’t be able time, there is another method that can be used to make images a bit more
to use the media responsive-friendly.
uploader to insert
images into posts.
Overriding Set Width and Height
This is a technique that Jesse Friedman put forth in his book, Web Designer’s Guide
to WordPress. jQuery would allow us to search for all <img> tags in the content and
remove the set width and height attributes applied to images. This will, at the very
least, ensure that the images resize properly:

$(function(){
$(“.post img).removeAttr(“width”).removeAttribute(“height”);
}

You can add this function to your header (or even better, using add_action) and
enqueue jQuery, and you’re all set.
 Making Your Theme Responsive: Core Features 81

CSS may also be used for the technique, though results may vary based on
custom posts, images, and other CSS rules; because of that, this code may need
to be tweaked:

img[class*=”align”],
img[class*=”wp-image-”] {
height: auto; }

img.size-full {
width: auto; }

Handling Widgets
Sidebars and widgets are a staple of many sites, including those powered by
WordPress. The WordPress admin makes it incredibly easy for end users to
manage their own sidebars; however, it’s up to you to ensure that the sidebars
and widgets don’t break when it comes to responsive design. First, let’s look at
responsive sidebars.

The Sidebar
It’s worth noting right off the bat that using the term sidebar (at least in this book) TIP
doesn’t necessarily mean the physical location of this content. The sidebar can be Proper page
any auxiliary content. It just so happens that the main example of our sidebar is on structure also helps
the right side. with search engine
optimization. By
Responsive sidebar development starts right at the beginning of the coding placing the main
process, in determining where in the markup the sidebar will go. It’s important to content first, it tells
structure and stack each column properly, especially when taking a Mobile First search engines,
approach to development; if we don’t, it might be the case that on small screens, “This is more
the sidebar shows first, and then the main content area. important.”

The way content should be structured or stacked is Header > Main Content >
Sidebars > Footer (Figure 4.10).

Figure 4.10
Here is the Content
stack, illustrated for a
three-column layout.
82 RESPONSIVE DESIGN WITH WORDPRESS

The Millennium Flights site actually only has a right sidebar, so the structure of
things in the HTML will look like this:

<div id=”content” class=”group”>

<div class=”entry”>
<!--Content Goes Here-->
</div>
<aside class=”sidebar”>
<!--Widgets Go Here-->
</aside>
</div>

Notice that the div with the id “content” serves as a container for both the main
content area and the sidebar. The div “entry” will be for the site’s main content,
and the aside element will house the sidebar.

Since the sections are in the proper order, there is actually no CSS required for
smaller screens, layout wise. Any pre–Media Query styles will be strictly for some
padding, font adjustments, image aligning, and so on. However, once the screen
reaches a certain width, it’s time to move the entire sidebar up to the right, next
to the main content area. The CSS looks like this:

@media screen and (min-width: 40.625em){

#wrapper #content .entry{
float: left;
width: 66%;
}

#wrapper #content aside{
margin-left: 68%;
width: 30%;
}

If you’ve worked with non-fluid (or fixed) layouts, this should look familiar to you.
The main content area, .entry, is being floated to the left and limited to a width of
66%. The sidebar is then given a slightly larger margin and a width that accounts
for the extra spacing. As users expand out even more, we may want the sidebar
and content area to adjust further so the content and sidebar look proportionally
better compared to the width of the screen:
 Making Your Theme Responsive: Core Features 83

@media screen and (min-width: 55.652em){

#wrapper #content .entry{
float: left;
width: 75%;
}

#wrapper #content aside{
margin-left: 78%;
width: 22%;
}
}

As you develop, it’s important to test and try different layouts along the way.
Remember—the breakpoints are based on content, not device! Do what’s best for
your own content.

That’s all we need as far as structural CSS goes for the sidebar. Of course, now
there is the question of handling widgets…

The .group Class

In order to ensure there is no runaway floating content without using the
common .clearfix class, the .group class can be used. This technique was
put forth by Dan Cederholm as a better alternative that cuts down on
markup. The CSS looks like this:

.group:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
This will make the containing class “self-clearing” and alleviate the
need for an empty container. It’s worth noting that the :after pseudo-class
does not work in IE7 and below.
 84 RESPONSIVE DESIGN WITH WORDPRESS

Sidebar Widgets
A widget in WordPress is defined as adding features and content to sidebars.
Generally speaking, they are boxes placed outside the main content area that
can contain any kind of content—text, images, forms, and so on. As designers and
developers, we should plan to support these elements and more, as there are
hundreds (perhaps thousands) of widgets out there.

TIP First, you must properly register your sidebars to use containers and class names
When developing you assign. Here’s what’s added in the Millennium Flights theme:
your own plugins or
widgets for release, register_sidebar( array (
use the least ‘name’ => __( ‘Sidebar’, ‘main-sidebar’ ),
amount of CSS ‘id’ => ‘primary-widget-area’,
possible and make
‘description’ => __( ‘The primary widget area’, ‘wpbp’ ),
it easily available
to theme editors
‘before_widget’ => ‘<div class=”widget”>’,
who might want to ‘after_widget’ => “</div>”,
change it. ‘before_title’ => ‘<h3 class=”widget-title”>’,
‘after_title’ => ‘</h3>’,
) );

register_sidebar( array (
‘name’ => __( ‘Sidebar2’, ‘secondary-sidebar’ ),
‘id’ => ‘secondary-widget-area’,
‘description’ => __( ‘The secondary widget area’, ‘wpbp’ ),
‘before_widget’ => ‘<div class=”widget”>’,
‘after_widget’ => “</div>”,
‘before_title’ => ‘<h3 class=”widget-title”>’,
‘after_title’ => ‘</h3>’,
) );

You can see that the same structure is used for both sidebars. Each widget gets
the class “widget,” and the titles are <h3> tags with the class “widget-title.” This
will allow you to apply general styles to HTML elements without them being over-
ridden by other plugins.

In the Millennium Flights theme, before any Media Queries, there are some basic
styles applied to elements you might find in a sidebar widget. These will also
optimize certain elements (like form fields) for touchscreen devices.
 Making Your Theme Responsive: Core Features 85

aside .widget h3{

margin-top: 0px;
color: #8E6DD7;
}

aside .widget{
border-bottom: 2px solid #FFFFFF;
margin: 10px 1.5%;
text-align: left;
padding: 5px 0.4%;
}

aside .widget p, aside .widget ul,

aside .widget ol, aside .widget dl{
margin: 0;
padding: 0;
font-size: 1.2em;
}

aside .widget li{

padding: 0;
margin: 0 0 0 1em;
list-style-type: none;
}

aside .widget input, aside .widget select{
margin: 1%;
padding: 7px;
font-size: 1.6em;
width: 100%;
border: 1px solid #CFCFCF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
 86 RESPONSIVE DESIGN WITH WORDPRESS

Then, as users move to larger screens, only slight adjustments are needed:

@media screen and (min-width: 40.625em){

aside .widget input[type=submit], aside .widget
input[type=button]{
margin: 0 auto;
padding: 3px;
font-size: 1.25em;
width: 40%;
}

footer aside .widget{
width: 30%;
margin: 10px 1.2%;
float: left;
text-align: left;
}
}

As a matter of fact, very little needs to be done here. There is a small adjustment
for submits and buttons, and some styles for the widgets found in the footer, which
should be placed three per line. However, there is a small issue with this approach.

I ran into a situation where a breakpoint was already added to a previous layout
I was using, so I kept it in. If you look at the page with a screen width of 40em
(650px), the widgets are a bit scrunched (Figure 4.11).

Figure 4.11
The footer widgets
at 650px are a bit too
scrunched to be three
per line.
 Making Your Theme Responsive: Core Features 87

Because of this, I needed to determine new breakpoints. Here’s what the new
adjustments look like in the CSS:

@media screen and (min-width: 34.188em){

...
footer aside .widget{
width: 46%;
margin: 10px 1.2%;
float: left;
text-align: left;
}
}
@media screen and (min-width: 51em){
footer aside .widget{
width: 30%;
}
}

I created two new breakpoints—one for a two-column widget layout and one for
a three-column layout. Things look much better with the 3-column layout now
(Figure 4.12).

Figure 4.12 With the

adjusted breakpoints,
the widgets look much
better.
88 RESPONSIVE DESIGN WITH WORDPRESS

As you continue to add widgets to your theme, it’s important to consider

the following:

RR Is the widget properly coded? Will it use the HTML structure you defined
when registering the sidebars?

RR Does it come with its own complicated CSS? If it does, overriding styles
(especially if they are inline) might be a pain in the neck due to the need to
nest classes and be incredibly specific with your style selectors.

RR Does the author make the class names intuitive and easy to find (through
documentation)? If so, you’ll have an easier time styling for them.

If you properly plan and code consistently, you shouldn’t run into issues with your
widgets. Between the reset, default element styles, and default widget styles
discussed in this chapter, most bases should be covered.

Wrapping Up
We explored quite a bit in this chapter, from several navigation techniques using
Media Queries, RESS, and JavaScript to making our images respond to both
screen resolutions and connection speeds, as well as making the most out of our
sidebar widgets.

Images proved to be a tough task to tackle, but we can now replace featured
images automatically and post images with a shortcode. While images still remain
a bit of a question mark as far as the best way to replace in-content images on a
large scale due to some possible performance issues, what we looked at will at
least help you and your users moving forward. Trying to fix all images at load time
puts a lot of stress on the website that results in it being visibly slower. Hopefully
we will see this improved upon in the near future.

Since this chapter focused primarily on layout elements, in the next chapter we
will go back to WordPress’ roots and look at making elements of the blog por-
tion of a site responsive. Specifically, we’ll look at comments, archives, and other
developers’ plugins.
 Making Your Theme Responsive: Core Features 89

Questions
1. What is the biggest pitfall of the “Do Nothing” navigation approach?
2. When should RESS be employed in regard to navigation?
3. What does picturefill.js do?
4. How do you ensure content integrity as far as multicolumn layouts
are concerned?

Answers
1. It will take up a lot of vertical space, pushing the content down the page.
2. RESS should be employed when we are hiding navigation/markup based on
screen width.
3. It replaces a single <img> with multiple image options, to be displayed based
on screen width.
4. Structure the columns so the main content is on top, followed by the sidebars.
This page intentionally left blank
186 RESPONSIVE DESIGN WITH WORDPRESS

Index
- (dashes), xiii <body> tag, 20
_ (underscores), xiii Boilerplate, 135
3G/4G connections, 125 Bootstrap, 132–133, 134, 140
320press, 132 brackets, xiii
bradfrostweb.com, 185
breakpoints, 3–8, 12, 143
A Brighthand.com, 7
A/B testing, 74
broadband connections, 125
actions, 31–32, 34
Browsershots, 126
add_image_size() function, 76
BrowserStack, 126
Adobe Edge Inspect, 126
browser testing, 119, 125, 126, 143
AJAX Comment Loading plugin, 98–99, 118
Building WordPress Themes from Scratch
.aligncenter class, 49
(Casabona), 19, 181
.alignleft class, 47, 49, 50
business directories, 15, 27
.alignright class, 47, 49, 50
alistapart.com, 185
A List Apart webzine, 2, 12, 185 C
Android, 2, 4, 7, 124 Calendar widget, 54
An Event Apart, 184 camel case, xiii
Apple, 7 captions, 19, 48, 149–150
archive.php, 105 Casabona, Joe, 181
archives, 103–118 Casabona.org, 60, 103
Archives by Date widget, 104–110 catalog pages, 167, 177
archives.php, 21, 105–107, 110, 113 categories, 24, 28, 115
Archives widget, 105 Categories widget, 115
archive templates, 105–106 category.php page, 105
attachments, 27, 34 Cederholm, Dan, 83
author pages, 105 child themes, 138–139, 140
Autocompleter plugin, 117 Chrome, 119, 125
Automattic, 137 classes, CSS, xiii, 19, 47–55, 146
.clearfix class, 83
closing brackets, xiii
B CMS, 26
best practices
code
CSS, 18–19
conflicts, 143
RWD, 2, 4, 182
designing, 122
WordPress, 15, 18, 143
documenting, 122
Beta Tester, WordPress, 128
reusing, 122–129, 140
beta testing, 119, 125
testing, 122
Big Web Show, 185
Codex. See WordPress Codex
Blackberry, 124
coding conventions, xiii, 118. See also
Blazer, xi
WordPress Codex
blog features, 92–120
columns, 81, 87, 89
handling archives, 103–118
comment forms, 96–97, 100
handling comments, 92–103
commenting systems, 93
blog posts, 27. See also posts
Comment Loading plugin, AJAX, 98–99, 118
body_class() function, 55
 Index 187

comment pagination, 98, 102 consolidating into single file, 18

comments, 92–103 for contact form, 165–166
counting, 103 frameworks, 9, 127
creating form for entering, 96–97 gzipping, 11
creating page for, 101–103 license considerations, 32
displaying photos with, 93 modifying, 145
incremental loading of, 98–101 for photo gallery, 146–150
styles associated with, 50–52 and plugins, 118
styling, 92–95 resets, 44
and User Experience, 92 for responsive forms, 161
comments_number() function, 103 and RWD, 2
comments page, 101–103 for styling captions, 19
commercial themes, 132 vs. JavaScript, 41
Compact Archives plugin, 105, 107 and WordPress site development, xi, 2
Compaq iPAQ, x CSS-Tricks, 185
compressing files, 10–11 custom logos, 19
conferences, 184 Custom Post Types, xii, 15. See also CPTs
connection speeds, 8–11, 125
Contact Form 7, 161–167
contact forms, 142, 161–167
D
Damstra, David, 182
container argument, 66, 70
Dashboard, 14
content, separating features from, 14, 122
dashes (-), xiii
content-based breakpoints, 5–8, 12
data, storing, 32
Content Management Systems, 26
database errors, 128
content sliders, 154
database tables, 32
Content stack, 81
Date Archive widget, 115
Core, modifying the, 15, 29
debugging, 128
Coyier, Chris, 75
definition lists/tags, 149
CPTs
design patterns, 123
and CMSes, 26
Design Patterns: Elements of Reusable Object-
coding, 28
Oriented Software (Gamma), 123
creating new taxonomies for, 171
desktop systems, 5
frameworks/templates for, 28
device detection, 19, 37, 38–40
and functions.php, 19
device testing, 123–124, 143
for image slider, 159–160
Digging into WordPress blog, 53
meaning of acronym, 15
directories, 14–15, 27. See also folders
planning, 28, 142
Disqus, 93
for products page, 168, 170–176
documentation, 122, 143
purpose of, 26
Dolphin, 119, 125
registering, 28
“Do Nothing” navigation, 58–60, 89
tips for developing, 28
“Do Some Things” navigation, 60
ways of using, 27, 28
dot releases, 120, 128
creativebloq.com, 185
download speeds, 11
Creative Market, 131, 140
cropping images, 76
CSS E
adding to style.css, 145, 157, 178 e-commerce sites, 29, 161, 168
for aligning images, 19 Edge Inspect, Adobe, 126
best practices, 18–19 Elegant Themes, 131, 140
classes, xiii, 19, 47–55, 146 em-based breakpoints, 4–5, 12
coding conventions, xiii em-to-px conversion, 5
188 RESPONSIVE DESIGN WITH WORDPRESS

end_el function, 64–65 Gamma, Erich, 123

end_lvl function, 64 Genesis, 136
enqueue_script() function, 143 Gently Mad, 185
Envato, 130 get_footer() function, 20, 101, 107
e-Readers, 124 get_header() function, 20, 101, 107
excerpts, 24, 25 get_posts() function, 24, 25–26
extract() function, 152, 178 get_the_post_thumbnail() function, 159
Ghostlab, 126
Gingerbread phones, 124
F GitHub, xiv, 28, 37, 42, 101
Facebook, 93
GNU General Public License, 32. See also GPL
featured images, 79, 80, 88, 159, 168, 169
Google
file-size considerations, 10, 41
Glass, 7, 180
filters, 31–32, 34
Maps, 150–153
Firefox, 125
mobile devices, 7
fitvid.js, 41
Web Fonts, 45, 127
flexible text, 4, 5
GPL, 18, 30, 32, 131
FlexSlider, 154, 156, 160
Gravatar, 93
Flickr, 144
Gravity Forms, 161
floating styles, 50
.group class, 83
folders, 29–30, 127. See also directories
gzip, 10–11
font size, 4
“Footer Anchor” navigation, 60–62, 66
footer.php, 20–21, 74 H
footer widgets, 86 “hamburger” icon, 72, 74
Forecast.io, 67 Happy Monday Podcast, 185
form labels, 165, 166 have_posts() function, 24
forms plugins, 161 header.php, 20–21, 44–46, 66, 70, 73
Foundation, 133–134, 140 <head> tag, 20
frameworks “Hello World” shortcode, 33
CPT, 28 “Hide and Cry” navigation, 59
CSS, 9, 127 hierarchical data, 64
customizing, 134 home page, 21–22
defining needs for, 126–129 home.php, 21–22
descriptions of popular, 132–139 hooks, 19, 31–32
developing your own, 128–129, 139 HTC phones, 124
evolution of, 127–128 HTML, xi, 2, 11, 41
sources of, 129–131 HTML5, xiii, 9, 127, 135, 137, 151
testing, 139
theme, 126–139
WordPress, 129–139
I
#ids, xiii
Friedman, Jesse, viii–ix, 17, 74, 80, 181
IE, 9, 41, 46, 75, 83, 125
front-page.php, 21, 22
if/else statements, 24
Frost, Brad, 9, 58, 59, 124, 185
image gallery, 144–150
FTP, xi
ImageOptim, 10
functions.php, 19, 45, 127
images
aligning, 19, 47
G cropping, 76
gallery, photo, 144–150 featured, 79, 80, 88, 159, 168, 169
gallery_shortcode function, 149 how WordPress uploads, 75–76
gallery_style hook, 145 license considerations, 32
 Index 189

limiting width of, 50 Loops, 23–26

managing, 144 lukew.com, 185
optimizing, 10
overriding set width/height of, 80–81
resizing, 10, 76, 80–81, 147, 175–176
M
Main Loop, 24, 26
scalable, 75
Map Page tutorial, 150–153
Image Slider tutorial, 154–160
Marcotte, Ethan, 2, 5, 12, 182
<img> tag, 75
Masonry, jQuery, 138
Implementing Responsive Design (Kadlec), 183
Media Manager, 144
index.php, 16, 19, 21–22
Media Queries, 3–4, 19, 36, 55, 125
Internet Explorer. See IE
Media Uploader, 144, 145
iPad, 5, 7, 124
meetups, 184
iPAQ, x
menu icon, 72
iPhone, xi, 5, 7, 124
menus. See navigation menus
items_wrap argument, 66
mfp_register() function, 170–171
mfs_get_slider() function, 158
J Microsoft Xbox, 7
JavaScript Millennium Flights
deciding when to include, 56 Archive by Date section, 109
and file size, 41 comments page, 102
gzipping, 11 custom CSS, 44
libraries, 9 default styles, 48
loading, 20 Destinations CPT, 27
and “Off Canvas” navigation, 67 footer.php, 20–21
picturefill.js, 76–80 header.php, 44–46
placing comments on webpage with, 93 HTML Template, 42
responsive-nav.js, 68–72 navigation menus, 58–72
and RWD, xi, 41 sidebar, 82, 84–88
vs. HTML/CSS, 41 minifying files, 10, 41
Jehl, Scott, xii, 76 mobile browsers, 119
jQuery, 9, 20, 63, 67, 117, 138 mobile devices. See also specific devices
Jumbotron, 133 detecting, 38–40
“Jump To” navigation, 60–62, 63 hiding navigation from, 59
popularity of, ix, 3
screen size/resolution, 7
K–L testing design on multiple, 119, 124
K2 theme, 126
Mobile First (Wroblewski), 10, 183
Kadlec, Tim, 183
“Mobile First” design, 9–10, 81, 125
Kindle, 7, 124
modifying the Core, 15, 29
labels, form, 165, 166
Motorola phones, 124
layouts
muleradio.net, 185
multicolumn, 81, 87, 89
Mullenweg, Matt, 32
non-fluid/fixed, 82
multicolumn layouts, 81, 87, 89
responsive, 42–46
MySQL, xi
testing, 83
lazy loading, 36
Lifehacker, 124 N–O
lightbox, 145 navigation.js, 137
links, 180, 185. See also permalinks navigation menus
login screens, 19 adding smooth scrolling to, 63
logos, 19 changing on server side, 72–74
190 RESPONSIVE DESIGN WITH WORDPRESS

navigation menus (continued ) loading too many, 118

creating, 58–72 photo gallery, 149
and functions.php file, 19 purpose of, 29
getting user feedback on, 74 storing data for later use, 32
hiding from mobile users, 59, 89 vs. themes, 14–15
managing, 27 and WordPress Codex, 15
testing, 74 Plugins area, WordPress admin, 29
.net magazine, viii, 131, 185 /plugins/ directory, 14
NextGen Gallery, 149 podcasts, 185
Nexus phone, 7, 124 polyfills, 41, 55
Ninja Forms, 161 portfolios, 142, 173
“Off Canvas” navigation, 67–68 post_class() function, 55
Off Canvas website, 68 posts
online resources, 184–185 applying styles to specfic, 55
Open Device Labs, 119, 123, 125 displaying, 24, 25
open source software, 32, 128, 129 listing by date, 54
Opera/Opera Mini, 119, 125 modifying, 25
optimizing images, 10 post types, 27, 34
options functions, 32 prices, product, 172, 173, 174
print.css, 18, 19
Products Page tutorial, 167–177
P Professional WordPress: Design and
pages
Development (Williams et al.), 182
applying styles to specfic, 55
progress bars, 113
as WordPress post types, 27
px-to-em conversion, 5
page structure, 81, 89
page weight, 11
pagination, comment, 98, 102 Q–R
Palm devices, x–xi query_posts() function, 25, 34, 107
parent themes, 138–139, 140 Reading settings, WordPress admin, 22
permalinks, 23, 24, 25, 107 README file, 143
Photo Gallery tutorial, 144–150 real estate listings, 28
PHP, xi, xiii, 19, 128, 152, 178 register_post_type() function, 28
phpdoc, 143 register_taxonomy() function, 28
picturefill.js, 41, 76–80, 89, 159, 160 remote code inspection, 126
pixel-based breakpoints, 4 Resizer, Window, 6
pixel-to-em conversion, 5 resizing images, 10, 76, 80–81, 147,
Plugin Directory, WordPress, 149, 161 175–176
Plugin Repository, 74 resolution, screen, 5, 7–8, 19
plugins, 29–32 respond.js, 41
autocomplete, 117 Responsive Design + Server Side
choosing responsive-friendly, 117–119 Components, xiv, 56. See also RESS
coding conventions, 30 responsive frameworks, 129, 132–139, 140
defining, 30, 155 responsive layout, 42–46
developing your own, 84 Responsive Nav home page, 69
documenting, 143 responsive-nav.js, 68–72, 137
forms, 161 Responsive Nav script, 41
free vs. commercial, 132 responsive.rga.com, 185
and GPL, 32 “Responsive” theme, 130
guidelines for developing, 118, 142 Responsive Web Design
keeping CPTs in separate, 28 best practices, 2, 4, 182
loading information from, 20 books about, 182–183
 Index 191

breakpoints, 3–8, 12, 143 Server Side Components, xiv

and connection speeds, 8–11 server-side device detection, 19, 37
image-handling techniques, 75–81 Settings>Permalinks section, WordPress
importance of learning, ix admin, 23
and JavaScript (See JavaScript) setup_postdata() function, 26
and Media Queries (See Media Queries) SFTP, xi
navigation techniques, 58–74 Shop Talk Show, 185
origins of, 2–3 shortcode
purpose of, xi for image slider, 157–158
resources, 180–185 for map page, 151–153
and RESS, 37–40 (See also RESS) for products page, 168–170
testing, 119 purpose of, 29, 33
tutorials, 144–177 shortcode_atts() function, 152
widgets, 81–88 sidebars, 19, 53, 81–88
Responsive Web Design (Marcotte), 182 Skins, 136
RESS, xiv, 37–40, 55, 56, 73, 89 sliders, xii, 156–160
reuse, software, 122–129, 140 smartphones, x–xi, 7, 124. See also specific
revisions, 27 devices
RFPs, 123 Smashing Magazine, viii, 131, 185
Rieger, Stephanie, 4, 5 Software as a Service, 132
RIOT, 10 software reuse, 122–129, 140
roundups, 131, 140 Sony mobile devices, 7
RSS widget, 19 spec docs, 123
RWD, xiv. See also Responsive Web Design Speedtest app, 11
rwdwp.com, xiv, 180, 185 speed testing, 11, 119, 125
start_el function, 64–65
start_lvl function, 64
S StatCounter, 8
SaaS, 132
Stern, Hal, 182
Safari, 125
Storage APIs, xiii
Samsung Galaxy phones, 7, 124
storing data, 32
Scalable Vector Graphics, 75
StudioPress, 136
ScientiaMobile, 19
style.css, 16, 18–19, 42, 70, 138
screen resolution, 5, 7–8, 19
SVG images, 75
screenshots, 18, 126
Swappa, 124
screen size, 7
scripts, 20, 41, 143, 156–160. See also
JavaScript T
scroll effect, jQuery, 63 tabular data, 105
SearchAutocomplete plugin, 117 tag clouds, 110–115
search bars, 116 Tag Cloud widget, 114
search engine optimization, 81 tag pages, 105
search forms, 54 tags, 18, 28, 115. See also template tags
search function, 104, 117 taxonomies, 28, 32, 171
search results page, 21 Template Hierarchy, 17, 21
Search widget, 116 templates
Secondary Loop, 24 archive, 105–106
security patches, 120 CPT, 28
“Select Box” navigation, 62–67, 72–73 fallback structure for, 17
Select_Nav_Walker class, 64, 66 serving up device-based, 19
separation of concerns, 14, 122, 140 template tags, 23, 24–25, 32, 149,
157–158, 168–170
192 RESPONSIVE DESIGN WITH WORDPRESS

testing the_permalink() function, 25

automated multi-device, 126 the_post() function, 24
browser, 119, 125, 126, 143 Thesis, 135–136
code, 122–123 This Is Responsive, 185
device, 123–124, 143 thumbnails, 19, 75, 76, 159, 176
frameworks, 139 titles, 24
layouts, 83 “Top Nav” navigation, 58–60
navigation menus, 74 touchscreen devices, 84
speed, 119, 125 Treo, x–xi
websites, xiv, 119 trolls, 92
text fields, 28 “’Trouble’ with Android, The,” 4
text size, 4 tutorials, 142–177
The Codex. See WordPress Codex autocomplete feature, 117
the_content() function, 19, 25 child themes, 138
the_excerpt() function, 25 comment form, 97
thegentlymad.com, 185 contact form, 161–167
theme development, 15–34. See also themes image slider, 154–160
Custom Post Types, 26–28 (See also CPTs) map page, 150–153
Loops, 23–26 photo gallery, 144–150
template structure, 16–22 products page, 167–177
ThemeForest, 130–131, 140 Tuts+, 185
theme frameworks, 126–140. See also tutsplus.com, 138, 185
themes tweets, 31. See also Twitter
customizing, 134 Twenty Fourteen theme, 138
defining needs for, 126–127 Twenty Ten theme, 146
descriptions of popular, 132–139 Twenty Thirteen theme, 137–138
developing your own, 128–129, 139 Twitter, 93, 132
evolution of, 127–128
free vs. commercial, 132
sources of, 129–131
U–V
underscores (_), xiii
testing, 139
Underscores framework, 137
themes
updates, WordPress, 120
applying general templates to, 42–46
URLs, 23, 107. See also permalinks
default WordPress, 137
User Agent detection, 36, 40
defined, 16
User Experience (UX), 41, 58, 92, 104
defining needs for, 126–127
variables, 32, 152, 155
documenting, 143
feature-loading, 15
free vs. commercial, 132 W–Z
and GPL, 32 walker argument, 66
making searchable, 18 Walker_Nav_Menu class, 64
modifying, 139, 140 Weaver, Jason, 68
pages required for, 16 web browsers, testing on multiple, 119,
removing functionality from, xii 125, 126, 143
simple boilerplate, 42 Web Designer’s Guide to WordPress
sources of, 129–131 (Friedman), viii, 17, 80, 181
using child/parent, 138–139 Web Fonts, Google, 45, 127
vs. plugins, 14–15 websites
what to include in, 142 controlling how they’re viewed, xi
and WordPress Codex, 15 creating custom home page for, 21–22
Themes directory, 135 creating responsive, xii (See also
/themes/ directory, 14 Responsive Web Design)
 Index 193

and download speeds, 11 popularity of, viii, ix, xi

e-commerce, 29 resources, 180–185
lazy loading of, 36 search feature, 117
Millennium Flights (See Millennium separation of content/function, 14, 122
Flights) and SVG images, 75
“Mobile First” approach to designing, Template Hierarchy, 17, 21
9–10, 81 themes (See themes)
optimal load time for, 9 tutorials (See tutorials)
popularity of WordPress for powering, viii updating, 120
presenting products on, 167 widgets, 52–54
search considerations, 116–117 WordPress admin
testing, xiv, 119, 122–126 Plugins area, 29
URL for this book’s, xiv, 180, 185 Reading settings, 22
WordPress resources, 185 Settings>Permalinks section, 23
Web Sockets, xiii Themes/Appearance section, 18
widgets, 52–54, 81–88 WordPress Codex
Williams, Brad, 182 and CPTs, 28, 171
Window Resizer, 6 and CSS, 18, 19, 118
Windows Phone, 124 and database tables, 32
Wireless Universal Resource FiLe, 37, 56. and hooks, 31
See also WURFLs and Loops, 23, 24, 25
WooThemes, 117, 131, 140 and page URLs, 23
WordCamp Central, 184 and plugins, 118
WordPress purpose of, xiv, 15
APIs, 15 and query_post() function, 25
best practices, 15, 18, 143 and template tags, 24
Beta Tester, 128 WordPress directory, 129–130, 143
blog features, 92–120 WordPress for Web Developers (Leary), 182
books about, viii, 17, 19, 181–182 WordPress.org, 129, 140
as CMS, 26 WP-Bootstrap, 132
Codex (See WordPress Codex) .wp-caption class, 48, 49–50
comments, 50–52 (See also comments) wp-comments-page plugin, 101
core features, 58–89 /wp-content/ directory, 14, 15
creating responsive websites with, xii /wp-content/plugins directory, 29
(See also Responsive Web Design) WP e-commerce, 168
Dashboard, 14 wp_enqueue_script() function, 20, 46, 69,
default CSS classes, 47–55 79, 156, 178
directories, 14–15 wp_footer() function, 20
and download speeds, 11 wp_head() function, 20, 21
extending functionality of sites created wp_is_mobile() function, 38–40
with, 29 WP Mobile Detect plugin, 74
frameworks, 129–140 wpmu.org, 129, 134
and GPL, 32 wp_nav_menu() function, 66
installing betas/nightly releases of, 128 WP_Query() function, 24, 25–26
Loops, 23–26 wp_tag_cloud() function, 110
Media Manager, 144 WPTuts+, 117
Media Uploader, 144, 145 Wroblewski, Luke, 7, 10, 68, 183, 185
native post types, 27 WURFLs, 37, 40, 56
as open source software, 32 ZURB, 133
page URLs in, 23
Plugin Directory, 149, 161