Responsive design with wordpress how to make great responsive themes and plugins

final spine = 0.346" 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 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 determining breakpoints, accessibility, and preventing website bloat for better user experience no matter the user’s connection speed Finally, you’ll apply the principles you learn to specific tutorials, such as building a photo gallery, map page, and products page • Learn when to rely on themes and when it’s best to use plugins • Apply your responsive CSS to a WordPress theme • Learn various navigation techniques, such as Jump to with smooth scrolling or Select box • Use popular responsive techniques, like picturefill.js, to make images respond to different screen resolutions and connection speeds Responsive Design with WordPress Responsive Design Responsive Design WordPress with How to make great responsive themes and plugins Joe Casabona is a web developer, teacher, speaker, and writer currently working for the University of Scranton He has been making websites since 2002 and using WordPress since 2004 He is also the author of Building WordPress Themes 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 www.newriders.com 9780321957412_ResponsiveWordPress_Cvr.indd Level: Intermediate Category: Web Development/Web Design Cover Design: Aren Straiger Joe Casabona 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: errata@peachpit.com 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 permissions@peachpit.com 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 infringement 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 Contents Foreword  viii Introduction  x Chapter What Is Responsive Web Design?   Responsive Web Design Origins    Breakpoints & Media Queries   The Current State of Devices   Consider Connection Speeds   Wrapping Up  11 Chapter Creating a Basic WordPress Theme   Meet Our Website   16 Template Structure  16 The Loop  23 Custom Post Types   26 Plugins and Shortcodes   29 Wrapping Up  33 Chapter Making Your Theme Responsive: The Ground Floor   35 Responsive Techniques  36 Adding the Responsive Layout   42 Testing WordPress’ Default CSS Classes   Wrapping Up  55 47 13 v vi RESPONSIVE DESIGN WITH WORDPRESS Chapter Making Your Theme Responsive: Core Features  57 Handling Navigation   58 Handling Images   75 Handling Widgets   81 Wrapping Up  88 Chapter Making Your Theme Responsive: Blog Features  91 Handling Comments   92 Handling Archives   103 Wrapping Up  119 Chapter Using Responsive Theme Frameworks  121 Some Principles of Reuse to Keep in Mind   About WordPress Frameworks   Popular WordPress Frameworks   122 129 132 Wrapping Up  140 Chapter 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 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   Books  181 Meetups  184 Links  185 Index  186 180 vii viii RESPONSIVE DESIGN WITH WORDPRESS Foreword By Jesse Friedman Today WordPress powers 20% of all websites, and we can look forward to it powering in 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 developing 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 solutions 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 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 compliment 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 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 in 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! ix Resources Books Building WordPress Themes from Scratch Joe Casabona, Rockable Press, 2012 My first book will take you through the process of creating a WordPress theme out of HTML and CSS files I teach you how to use WordPress, as well as how to leverage the API to create your own custom themes, plugins, and content types We’ll also look at how to create widgets, theme options, and more Web Designer’s Guide to WordPress: Plan, Theme, Build, Launch Jesse Friedman, New Riders, 2012 If you want to dig deeper into WordPress, Jesse Friedman’s book will take you through the entire WordPress process, from installing and using it, to developing themes, plugins, and shortcodes, to testing and launching I highly recommend it! 181 182 RESPONSIVE DESIGN WITH WORDPRESS Professional WordPress: Design and Development Brad Williams, David Damstra, Hal Stern, WROX, 2013 This comprehensive work focuses squarely on development, looking at plugin and theme development, security, scaling, spam, and more This team does great work, and this is a book that should be on every WordPress developer’s bookshelf WordPress for Web Developers Stephanie Leary, Apress, 2013 Stephanie’s fantastic resource takes you from installing WordPress and using every facet of the admin panel to deploying it securely on your server, to developing themes It really is a one-stop shop for WordPress use/development Responsive Web Design Ethan Marcotte, A Book Apart, 2011 The first book written on the topic, this provides an incredible base and teaches you everything you need to know to get started in RWD It has examples, code, and some best practices to help you create great responsive sites Resources Mobile First Luke Wroblewski, A Book Apart, 2011 This book goes hand in hand with Responsive Web Design There is no hands-on coding, but there are stats, screens, and lots of great reasons why when you design a website, you should take a “Mobile First” approach and start from the smallest screen Implementing Responsive Design Tim Kadlec, New Riders, 2012 After reading Responsive Web Design, this should be your next stop Tim Kadlec builds upon everything from Ethan Marcotte’s book while talking about more recent developments in the field regarding better practices, as well as RESS, workflow, and more 183 184 RESPONSIVE DESIGN WITH WORDPRESS Meetups Meetups are a great way to network with individuals, talk through problems, and learn! Meetup.com http://www.meetup.com/ Meetup.com is the definitive place to find meetups in your area I recommend doing searches for “WordPress,” “Web Design,” and “Tech.” The site will also ask you for some words to describe you if you create an account, and then it will recommend meetups near you WordCamp Central http://central.wordcamp.org/ WordCamps are conferences that focus solely on WordPress, and they are fantastic They are held all over the world and attract all kinds of WordPress users from bloggers to developers WordCamp Central features a list of upcoming events as well as links to talks from previous camps An Event Apart http://aneventapart.com/ An Event Apart conferences bring in the best in the business, including some of the authors listed above These are two-day, single-track conferences with an optional workshop on the third day, and they are packed with tons of information regarding the latest and greatest in the field They are held in various cities throughout the United States Resources Links Though all of the links mentioned in the book are located at http://rwdwp.com/ links/, there are some great online resources that were not mentioned in the book Here’s a quick list: Websites A List Apart: http://alistapart.com Brad Frost: http://bradfrostweb.com net Magazine: http://creativebloq.com/net-magazine Smashing Magazine: www.smashingmagazine.com Tuts+: https://tutsplus.com/ Luke Wroblewski: http://lukew.com This Is Responsive: http://responsive.rga.com/ CSS-Tricks: http://css-tricks.com/ Podcasts The Big Web Show: www.muleradio.net/thebigwebshow/ Happy Monday Podcast: http://happymondaypodcast.com/ Shop Talk Show: http://shoptalkshow.com/ The Gently Mad: http://thegentlymad.com/ 185 186 RESPONSIVE DESIGN WITH WORDPRESS Index - (dashes), xiii _ (underscores), xiii 3G/4G connections, 125 320press, 132 A A/B testing, 74 actions, 31–32, 34 add_image_size() function, 76 Adobe Edge Inspect, 126 AJAX Comment Loading plugin, 98–99, 118 aligncenter class, 49 alignleft class, 47, 49, 50 alignright class, 47, 49, 50 alistapart.com, 185 A List Apart webzine, 2, 12, 185 Android, 2, 4, 7, 124 An Event Apart, 184 Apple, archive.php, 105 archives, 103–118 Archives by Date widget, 104–110 archives.php, 21, 105–107, 110, 113 Archives widget, 105 archive templates, 105–106 attachments, 27, 34 author pages, 105 Autocompleter plugin, 117 Automattic, 137 B best practices CSS, 18–19 RWD, 2, 4, 182 WordPress, 15, 18, 143 Beta Tester, WordPress, 128 beta testing, 119, 125 Big Web Show, 185 Blackberry, 124 Blazer, xi blog features, 92–120 handling archives, 103–118 handling comments, 92–103 blog posts, 27 See also posts body_class() function, 55 tag, 20 Boilerplate, 135 Bootstrap, 132–133, 134, 140 brackets, xiii bradfrostweb.com, 185 breakpoints, 3–8, 12, 143 Brighthand.com, broadband connections, 125 Browsershots, 126 BrowserStack, 126 browser testing, 119, 125, 126, 143 Building WordPress Themes from Scratch (Casabona), 19, 181 business directories, 15, 27 C Calendar widget, 54 camel case, xiii captions, 19, 48, 149–150 Casabona, Joe, 181 Casabona.org, 60, 103 catalog pages, 167, 177 categories, 24, 28, 115 Categories widget, 115 category.php page, 105 Cederholm, Dan, 83 child themes, 138–139, 140 Chrome, 119, 125 classes, CSS, xiii, 19, 47–55, 146 clearfix class, 83 closing brackets, xiii CMS, 26 code conflicts, 143 designing, 122 documenting, 122 reusing, 122–129, 140 testing, 122 Codex See WordPress Codex coding conventions, xiii, 118 See also WordPress Codex columns, 81, 87, 89 comment forms, 96–97, 100 commenting systems, 93 Comment Loading plugin, AJAX, 98–99, 118 Index comment pagination, 98, 102 comments, 92–103 counting, 103 creating form for entering, 96–97 creating page for, 101–103 displaying photos with, 93 incremental loading of, 98–101 styles associated with, 50–52 styling, 92–95 and User Experience, 92 comments_number() function, 103 comments page, 101–103 commercial themes, 132 Compact Archives plugin, 105, 107 Compaq iPAQ, x compressing files, 10–11 conferences, 184 connection speeds, 8–11, 125 Contact Form 7, 161–167 contact forms, 142, 161–167 container argument, 66, 70 content, separating features from, 14, 122 content-based breakpoints, 5–8, 12 Content Management Systems, 26 content sliders, 154 Content stack, 81 Core, modifying the, 15, 29 Coyier, Chris, 75 CPTs and CMSes, 26 coding, 28 creating new taxonomies for, 171 frameworks/templates for, 28 and functions.php, 19 for image slider, 159–160 meaning of acronym, 15 planning, 28, 142 for products page, 168, 170–176 purpose of, 26 registering, 28 tips for developing, 28 ways of using, 27, 28 creativebloq.com, 185 Creative Market, 131, 140 cropping images, 76 CSS adding to style.css, 145, 157, 178 for aligning images, 19 best practices, 18–19 classes, xiii, 19, 47–55, 146 coding conventions, xiii consolidating into single file, 18 for contact form, 165–166 frameworks, 9, 127 gzipping, 11 license considerations, 32 modifying, 145 for photo gallery, 146–150 and plugins, 118 resets, 44 for responsive forms, 161 and RWD, for styling captions, 19 vs JavaScript, 41 and WordPress site development, xi, CSS-Tricks, 185 custom logos, 19 Custom Post Types, xii, 15 See also CPTs D Damstra, David, 182 Dashboard, 14 dashes (-), xiii data, storing, 32 database errors, 128 database tables, 32 Date Archive widget, 115 debugging, 128 definition lists/tags, 149 design patterns, 123 Design Patterns: Elements of Reusable ObjectOriented Software (Gamma), 123 desktop systems, device detection, 19, 37, 38–40 device testing, 123–124, 143 Digging into WordPress blog, 53 directories, 14–15, 27 See also folders Disqus, 93 documentation, 122, 143 Dolphin, 119, 125 “Do Nothing” navigation, 58–60, 89 “Do Some Things” navigation, 60 dot releases, 120, 128 download speeds, 11 E e-commerce sites, 29, 161, 168 Edge Inspect, Adobe, 126 Elegant Themes, 131, 140 em-based breakpoints, 4–5, 12 em-to-px conversion, 187 188 RESPONSIVE DESIGN WITH WORDPRESS end_el function, 64–65 end_lvl function, 64 enqueue_script() function, 143 Envato, 130 e-Readers, 124 excerpts, 24, 25 extract() function, 152, 178 F Facebook, 93 featured images, 79, 80, 88, 159, 168, 169 file-size considerations, 10, 41 filters, 31–32, 34 Firefox, 125 fitvid.js, 41 flexible text, 4, FlexSlider, 154, 156, 160 Flickr, 144 floating styles, 50 folders, 29–30, 127 See also directories font size, “Footer Anchor” navigation, 60–62, 66 footer.php, 20–21, 74 footer widgets, 86 Forecast.io, 67 form labels, 165, 166 forms plugins, 161 Foundation, 133–134, 140 frameworks CPT, 28 CSS, 9, 127 customizing, 134 defining needs for, 126–129 descriptions of popular, 132–139 developing your own, 128–129, 139 evolution of, 127–128 sources of, 129–131 testing, 139 theme, 126–139 WordPress, 129–139 Friedman, Jesse, viii–ix, 17, 74, 80, 181 front-page.php, 21, 22 Frost, Brad, 9, 58, 59, 124, 185 FTP, xi functions.php, 19, 45, 127 G gallery, photo, 144–150 gallery_shortcode function, 149 gallery_style hook, 145 Gamma, Erich, 123 Genesis, 136 Gently Mad, 185 get_footer() function, 20, 101, 107 get_header() function, 20, 101, 107 get_posts() function, 24, 25–26 get_the_post_thumbnail() function, 159 Ghostlab, 126 Gingerbread phones, 124 GitHub, xiv, 28, 37, 42, 101 GNU General Public License, 32 See also GPL Google Glass, 7, 180 Maps, 150–153 mobile devices, Web Fonts, 45, 127 GPL, 18, 30, 32, 131 Gravatar, 93 Gravity Forms, 161 group class, 83 gzip, 10–11 H “hamburger” icon, 72, 74 Happy Monday Podcast, 185 have_posts() function, 24 header.php, 20–21, 44–46, 66, 70, 73 tag, 20 “Hello World” shortcode, 33 “Hide and Cry” navigation, 59 hierarchical data, 64 home page, 21–22 home.php, 21–22 hooks, 19, 31–32 HTC phones, 124 HTML, xi, 2, 11, 41 HTML5, xiii, 9, 127, 135, 137, 151 I #ids, xiii IE, 9, 41, 46, 75, 83, 125 if/else statements, 24 image gallery, 144–150 ImageOptim, 10 images aligning, 19, 47 cropping, 76 featured, 79, 80, 88, 159, 168, 169 how WordPress uploads, 75–76 license considerations, 32 Index limiting width of, 50 managing, 144 optimizing, 10 overriding set width/height of, 80–81 resizing, 10, 76, 80–81, 147, 175–176 scalable, 75 Image Slider tutorial, 154–160 tag, 75 Implementing Responsive Design (Kadlec), 183 index.php, 16, 19, 21–22 Internet Explorer See IE iPad, 5, 7, 124 iPAQ, x iPhone, xi, 5, 7, 124 items_wrap argument, 66 J JavaScript deciding when to include, 56 and file size, 41 gzipping, 11 libraries, loading, 20 and “Off Canvas” navigation, 67 picturefill.js, 76–80 placing comments on webpage with, 93 responsive-nav.js, 68–72 and RWD, xi, 41 vs HTML/CSS, 41 Jehl, Scott, xii, 76 jQuery, 9, 20, 63, 67, 117, 138 Jumbotron, 133 “Jump To” navigation, 60–62, 63 K–L K2 theme, 126 Kadlec, Tim, 183 Kindle, 7, 124 labels, form, 165, 166 layouts multicolumn, 81, 87, 89 non-fluid/fixed, 82 responsive, 42–46 testing, 83 lazy loading, 36 Lifehacker, 124 lightbox, 145 links, 180, 185 See also permalinks login screens, 19 logos, 19 Loops, 23–26 lukew.com, 185 M Main Loop, 24, 26 Map Page tutorial, 150–153 Marcotte, Ethan, 2, 5, 12, 182 Masonry, jQuery, 138 Media Manager, 144 Media Queries, 3–4, 19, 36, 55, 125 Media Uploader, 144, 145 meetups, 184 menu icon, 72 menus See navigation menus mfp_register() function, 170–171 mfs_get_slider() function, 158 Microsoft Xbox, Millennium Flights Archive by Date section, 109 comments page, 102 custom CSS, 44 default styles, 48 Destinations CPT, 27 footer.php, 20–21 header.php, 44–46 HTML Template, 42 navigation menus, 58–72 sidebar, 82, 84–88 minifying files, 10, 41 mobile browsers, 119 mobile devices See also specific devices detecting, 38–40 hiding navigation from, 59 popularity of, ix, screen size/resolution, testing design on multiple, 119, 124 Mobile First (Wroblewski), 10, 183 “Mobile First” design, 9–10, 81, 125 modifying the Core, 15, 29 Motorola phones, 124 muleradio.net, 185 Mullenweg, Matt, 32 multicolumn layouts, 81, 87, 89 MySQL, xi N–O navigation.js, 137 navigation menus adding smooth scrolling to, 63 changing on server side, 72–74 189 190 RESPONSIVE DESIGN WITH WORDPRESS navigation menus (continued ) creating, 58–72 and functions.php file, 19 getting user feedback on, 74 hiding from mobile users, 59, 89 managing, 27 testing, 74 net magazine, viii, 131, 185 NextGen Gallery, 149 Nexus phone, 7, 124 Ninja Forms, 161 “Off Canvas” navigation, 67–68 Off Canvas website, 68 online resources, 184–185 Open Device Labs, 119, 123, 125 open source software, 32, 128, 129 Opera/Opera Mini, 119, 125 optimizing images, 10 options functions, 32 P pages applying styles to specfic, 55 as WordPress post types, 27 page structure, 81, 89 page weight, 11 pagination, comment, 98, 102 Palm devices, x–xi parent themes, 138–139, 140 permalinks, 23, 24, 25, 107 Photo Gallery tutorial, 144–150 PHP, xi, xiii, 19, 128, 152, 178 phpdoc, 143 picturefill.js, 41, 76–80, 89, 159, 160 pixel-based breakpoints, pixel-to-em conversion, Plugin Directory, WordPress, 149, 161 Plugin Repository, 74 plugins, 29–32 autocomplete, 117 choosing responsive-friendly, 117–119 coding conventions, 30 defining, 30, 155 developing your own, 84 documenting, 143 forms, 161 free vs commercial, 132 and GPL, 32 guidelines for developing, 118, 142 keeping CPTs in separate, 28 loading information from, 20 loading too many, 118 photo gallery, 149 purpose of, 29 storing data for later use, 32 vs themes, 14–15 and WordPress Codex, 15 Plugins area, WordPress admin, 29 /plugins/ directory, 14 podcasts, 185 polyfills, 41, 55 portfolios, 142, 173 post_class() function, 55 posts applying styles to specfic, 55 displaying, 24, 25 listing by date, 54 modifying, 25 post types, 27, 34 prices, product, 172, 173, 174 print.css, 18, 19 Products Page tutorial, 167–177 Professional WordPress: Design and Development (Williams et al.), 182 progress bars, 113 px-to-em conversion, Q–R query_posts() function, 25, 34, 107 Reading settings, WordPress admin, 22 README file, 143 real estate listings, 28 register_post_type() function, 28 register_taxonomy() function, 28 remote code inspection, 126 Resizer, Window, resizing images, 10, 76, 80–81, 147, 175–176 resolution, screen, 5, 7–8, 19 respond.js, 41 Responsive Design + Server Side Components, xiv, 56 See also RESS responsive frameworks, 129, 132–139, 140 responsive layout, 42–46 Responsive Nav home page, 69 responsive-nav.js, 68–72, 137 Responsive Nav script, 41 responsive.rga.com, 185 “Responsive” theme, 130 Responsive Web Design best practices, 2, 4, 182 books about, 182–183 Index breakpoints, 3–8, 12, 143 and connection speeds, 8–11 image-handling techniques, 75–81 importance of learning, ix and JavaScript (See JavaScript) and Media Queries (See Media Queries) navigation techniques, 58–74 origins of, 2–3 purpose of, xi resources, 180–185 and RESS, 37–40 (See also RESS) testing, 119 tutorials, 144–177 widgets, 81–88 Responsive Web Design (Marcotte), 182 RESS, xiv, 37–40, 55, 56, 73, 89 reuse, software, 122–129, 140 revisions, 27 RFPs, 123 Rieger, Stephanie, 4, RIOT, 10 roundups, 131, 140 RSS widget, 19 RWD, xiv See also Responsive Web Design rwdwp.com, xiv, 180, 185 S SaaS, 132 Safari, 125 Samsung Galaxy phones, 7, 124 Scalable Vector Graphics, 75 ScientiaMobile, 19 screen resolution, 5, 7–8, 19 screenshots, 18, 126 screen size, scripts, 20, 41, 143, 156–160 See also JavaScript scroll effect, jQuery, 63 SearchAutocomplete plugin, 117 search bars, 116 search engine optimization, 81 search forms, 54 search function, 104, 117 search results page, 21 Search widget, 116 Secondary Loop, 24 security patches, 120 “Select Box” navigation, 62–67, 72–73 Select_Nav_Walker class, 64, 66 separation of concerns, 14, 122, 140 Server Side Components, xiv server-side device detection, 19, 37 Settings>Permalinks section, WordPress admin, 23 setup_postdata() function, 26 SFTP, xi Shop Talk Show, 185 shortcode for image slider, 157–158 for map page, 151–153 for products page, 168–170 purpose of, 29, 33 shortcode_atts() function, 152 sidebars, 19, 53, 81–88 Skins, 136 sliders, xii, 156–160 smartphones, x–xi, 7, 124 See also specific devices Smashing Magazine, viii, 131, 185 Software as a Service, 132 software reuse, 122–129, 140 Sony mobile devices, spec docs, 123 Speedtest app, 11 speed testing, 11, 119, 125 start_el function, 64–65 start_lvl function, 64 StatCounter, Stern, Hal, 182 Storage APIs, xiii storing data, 32 StudioPress, 136 style.css, 16, 18–19, 42, 70, 138 SVG images, 75 Swappa, 124 T tabular data, 105 tag clouds, 110–115 Tag Cloud widget, 114 tag pages, 105 tags, 18, 28, 115 See also template tags taxonomies, 28, 32, 171 Template Hierarchy, 17, 21 templates archive, 105–106 CPT, 28 fallback structure for, 17 serving up device-based, 19 template tags, 23, 24–25, 32, 149, 157–158, 168–170 191 192 RESPONSIVE DESIGN WITH WORDPRESS testing automated multi-device, 126 browser, 119, 125, 126, 143 code, 122–123 device, 123–124, 143 frameworks, 139 layouts, 83 navigation menus, 74 speed, 119, 125 websites, xiv, 119 text fields, 28 text size, The Codex See WordPress Codex the_content() function, 19, 25 the_excerpt() function, 25 thegentlymad.com, 185 theme development, 15–34 See also themes Custom Post Types, 26–28 (See also CPTs) Loops, 23–26 template structure, 16–22 ThemeForest, 130–131, 140 theme frameworks, 126–140 See also themes customizing, 134 defining needs for, 126–127 descriptions of popular, 132–139 developing your own, 128–129, 139 evolution of, 127–128 free vs commercial, 132 sources of, 129–131 testing, 139 themes applying general templates to, 42–46 default WordPress, 137 defined, 16 defining needs for, 126–127 documenting, 143 feature-loading, 15 free vs commercial, 132 and GPL, 32 making searchable, 18 modifying, 139, 140 pages required for, 16 removing functionality from, xii simple boilerplate, 42 sources of, 129–131 using child/parent, 138–139 vs plugins, 14–15 what to include in, 142 and WordPress Codex, 15 Themes directory, 135 /themes/ directory, 14 the_permalink() function, 25 the_post() function, 24 Thesis, 135–136 This Is Responsive, 185 thumbnails, 19, 75, 76, 159, 176 titles, 24 “Top Nav” navigation, 58–60 touchscreen devices, 84 Treo, x–xi trolls, 92 “’Trouble’ with Android, The,” tutorials, 142–177 autocomplete feature, 117 child themes, 138 comment form, 97 contact form, 161–167 image slider, 154–160 map page, 150–153 photo gallery, 144–150 products page, 167–177 Tuts+, 185 tutsplus.com, 138, 185 tweets, 31 See also Twitter Twenty Fourteen theme, 138 Twenty Ten theme, 146 Twenty Thirteen theme, 137–138 Twitter, 93, 132 U–V underscores (_), xiii Underscores framework, 137 updates, WordPress, 120 URLs, 23, 107 See also permalinks User Agent detection, 36, 40 User Experience (UX), 41, 58, 92, 104 variables, 32, 152, 155 W–Z walker argument, 66 Walker_Nav_Menu class, 64 Weaver, Jason, 68 web browsers, testing on multiple, 119, 125, 126, 143 Web Designer’s Guide to WordPress (Friedman), viii, 17, 80, 181 Web Fonts, Google, 45, 127 websites controlling how they’re viewed, xi creating custom home page for, 21–22 creating responsive, xii (See also Responsive Web Design) Index and download speeds, 11 e-commerce, 29 lazy loading of, 36 Millennium Flights (See Millennium Flights) “Mobile First” approach to designing, 9–10, 81 optimal load time for, popularity of WordPress for powering, viii presenting products on, 167 search considerations, 116–117 testing, xiv, 119, 122–126 URL for this book’s, xiv, 180, 185 WordPress resources, 185 Web Sockets, xiii widgets, 52–54, 81–88 Williams, Brad, 182 Window Resizer, Windows Phone, 124 Wireless Universal Resource FiLe, 37, 56 See also WURFLs WooThemes, 117, 131, 140 WordCamp Central, 184 WordPress APIs, 15 best practices, 15, 18, 143 Beta Tester, 128 blog features, 92–120 books about, viii, 17, 19, 181–182 as CMS, 26 Codex (See WordPress Codex) comments, 50–52 (See also comments) core features, 58–89 creating responsive websites with, xii (See also Responsive Web Design) Dashboard, 14 default CSS classes, 47–55 directories, 14–15 and download speeds, 11 extending functionality of sites created with, 29 frameworks, 129–140 and GPL, 32 installing betas/nightly releases of, 128 Loops, 23–26 Media Manager, 144 Media Uploader, 144, 145 native post types, 27 as open source software, 32 page URLs in, 23 Plugin Directory, 149, 161 popularity of, viii, ix, xi resources, 180–185 search feature, 117 separation of content/function, 14, 122 and SVG images, 75 Template Hierarchy, 17, 21 themes (See themes) tutorials (See tutorials) updating, 120 widgets, 52–54 WordPress admin Plugins area, 29 Reading settings, 22 Settings>Permalinks section, 23 Themes/Appearance section, 18 WordPress Codex and CPTs, 28, 171 and CSS, 18, 19, 118 and database tables, 32 and hooks, 31 and Loops, 23, 24, 25 and page URLs, 23 and plugins, 118 purpose of, xiv, 15 and query_post() function, 25 and template tags, 24 WordPress directory, 129–130, 143 WordPress for Web Developers (Leary), 182 WordPress.org, 129, 140 WP-Bootstrap, 132 wp-caption class, 48, 49–50 wp-comments-page plugin, 101 /wp-content/ directory, 14, 15 /wp-content/plugins directory, 29 WP e-commerce, 168 wp_enqueue_script() function, 20, 46, 69, 79, 156, 178 wp_footer() function, 20 wp_head() function, 20, 21 wp_is_mobile() function, 38–40 WP Mobile Detect plugin, 74 wpmu.org, 129, 134 wp_nav_menu() function, 66 WP_Query() function, 24, 25–26 wp_tag_cloud() function, 110 WPTuts+, 117 Wroblewski, Luke, 7, 10, 68, 183, 185 WURFLs, 37, 40, 56 ZURB, 133 193 Unlimited online access to all Peachpit, Adobe Press, Apple Training and New Riders videos and books, as well as content from other leading publishers including: O’Reilly Media, Focal Press, Sams, Que, Total Training, John Wiley & Sons, Course Technology PTR, Class on Demand, VTC and more No time commitment or contract required! Sign up for one month or a year All for $19.99 a month SIGN UP TODAY peachpit.com /creativeedge Join the Peachpit Affiliate Team! You love our books and you love to share them with your colleagues and friends why not earn some $$ doing it! If you have a website, blog or even a Facebook page, you can start earning money by putting a Peachpit link on your page If a visitor clicks on that link and purchases something on peachpit.com, you earn commissions* on all sales! Every sale you bring to our site will earn you a commission All you have to is post an ad and we’ll take care of the rest Apply and get started! It’s quick and easy to apply To learn more go to: http://www.peachpit.com/affiliates/ *Valid for all books, eBooks and video sales at www.Peachpit.com .. .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,... 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 How. .. directory structure and how to use FTP/SFTP xi 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