WordPress Responsive Theme Design Table of Contents WordPress Responsive Theme Design Credits About the Author About the Reviewers www.PacktPub.com Support files, eBooks, discount offers, and more Why subscribe? Free access for Packt account holders Preface What this book covers What you need for this book Who this book is for Conventions Reader feedback Customer support Downloading the example code Downloading the color images of this book Errata Piracy Questions Responsive Web Design with WordPress The concepts of RWD Controlling Viewport Scaling The screen density Problems and solutions with the screen density Techniques in RWD Media queries Breakpoints Fluid grids Frameworks positives Frameworks negatives Flexible images and media Setting up the WordPress environment Installing and setting up WordPress Setting up the underscores theme Installing the WordPress theme’s unit test data Installing the Developer plugin Summary Understanding the WordPress Theme Structure Setting WordPress permalinks What is a WordPress theme? Template files The page structure of template files Theme subfolders Summary Getting Started with Responsive Layout Choosing the right tool for our project How to set up functions.php How to set up styles.css The em and rem values Adding media queries Summary Learn How to Create the Header and Navigation Making our layout centered Dealing with the header How to create a menu and make it responsive and accessible Menu basics Styling our menu How to make our menu accessible How to make our menu responsive Summary Customizing Single Post Templates Analyzing single post templates Analyzing the content-single.php file Template improvements Header improvements Implementing changes to the post template Styling post’s metadata Content section Tags Post navigation Summary Responsive Widgets, Footer, and Comments Widgets Sidebars Styling sidebars Editing the footer Working with comments Styling comments title Styling comments Comments navigation Summary Working with Images and Videos Featured images Setting up a featured image Resizing featured images Image captions Image galleries Making the gallery responsive Working with videos Summary Working with Template Files The WordPress template hierarchy Excerpts Featured images Customizing the paging navigation Styling sticky posts Modifying archive.php Modifying 404.php Modifying search.php Summary Working with Static Pages and Adding the Extra Functionality with Plugins Home page The home page template Styles for the home template Slider plugin The Services section (list of services) Making our home page responsive The Contact Us page Summary 10 Submitting Your Theme to WordPress.org Polishing code before submission Applying the editor styles Validating the HTML and CSS code Validating the JavaScript code Validating the PHP code Debugging the setup Multiple wp-config.php sets Adding the readme.txt file Adding the screenshot.png file Running a theme check plugin Summary Index WordPress Responsive Theme Design I image captions resizing / Image captions image galleries about / Image galleries J JavaScript code validating / Validating the JavaScript code Jetpack about / Theme subfolders L LayerSlider URL / Slider plugin layout making centered / Making our layout centered M masonry URL / Editing the footer media queries adding / Adding media queries media queries, RWD about / Media queries URL / Media queries breakpoints / Breakpoints menu creating / How to create a menu and make it responsive and accessible basics / Menu basics styling / Styling our menu accessibility / How to make our menu accessible responsive / How to make our menu responsive Modernizr URL / How to set up functions.php N NetBeans URL / Choosing the right tool for our project O Open Sans URL / How to set up functions.php P 404.php template modifying / Modifying 404.php page view (PV) about / Analyzing the content-single.php file paging navigation customizing / Customizing the paging navigation PHP code validating / Validating the PHP code PHPEclipse URL / Choosing the right tool for our project PhpStorm URL / Choosing the right tool for our project pixels per inch (PPI) / The screen density post template modifying / Implementing changes to the post template metadata, styling / Styling post’s metadata post thumbnails about / Featured images R readme.txt file reference link / Adding the readme.txt file register_sidebar() function codex page, URL / Sidebars rem values about / The em and rem values run-time notices / Multiple wp-config.php sets run-time warnings / Multiple wp-config.php sets RWD concepts / The concepts of RWD Viewport, controlling / Controlling Viewport scaling / Scaling screen density, problems / Problems and solutions with the screen density screen density, solutions / Problems and solutions with the screen density URL / Techniques in RWD media queries / Media queries fluid grids / Fluid grids flexible images / Flexible images and media S scaling, RWD about / Scaling screen density / The screen density screen density about / The screen density solutions / Problems and solutions with the screen density problems / Problems and solutions with the screen density screenshot.png file reference link / Adding the screenshot.png file search.php template modifying / Modifying search.php Search Engine Optimization (SEO) about / Analyzing the content-single.php file services section about / The Services section (list of services) setup debugging / Debugging the setup setup styles.css setting up / How to set up styles.css sidebars about / Sidebars styling / Styling sidebars single post templates analyzing / Analyzing single post templates slider plugin about / Slider plugin URL / Slider plugin sticky posts styling / Styling sticky posts Superfish jQuery plugin URL / How to make our menu accessible T tags displaying / Tags post navigation / Post navigation template, content-single.php file improving / Template improvements header, improving / Header improvements template files about / Template files Theme Name / Template files Theme URI / Template files Author / Template files Author URI / Template files Description / Template files Version / Template files License / Template files License URI / Template files Text Domain / Template files Tags / Template files page structure / The page structure of template files TGM Plugin Activation URL / The Services section (list of services) theme URL / Setting up the underscores theme about / What is a WordPress theme? subfolders / Theme subfolders theme check plugin running / Running a theme check plugin theme testing URL / Installing the WordPress theme’s unit test data Theme Unit Test Data URL / Content section tool selecting, for project / Choosing the right tool for our project U underscores theme about / Setting up the underscores theme URL / Setting up the underscores theme unit test data URL / Installing the WordPress theme’s unit test data V videos working with / Working with videos Viewport controlling / Controlling Viewport W WAMPP about / Installing and setting up WordPress Web Developer plugin URL / Validating the HTML and CSS code widgets about / Widgets sidebars / Sidebars sidebars, styling / Styling sidebars footer, editing / Editing the footer WordPress installing, URL / Installing and setting up WordPress permalinks, setting / Setting WordPress permalinks theme / What is a WordPress theme? template files / Template files theme, subfolders / Theme subfolders WordPress CSS Coding Standards URL / Choosing the right tool for our project WordPress environment setting up / Setting up the WordPress environment, Installing and setting up WordPress installing / Installing and setting up WordPress underscores theme, setting up / Setting up the underscores theme Developer plugin, installing / Installing the Developer plugin WordPress HTML Coding Standards URL / Choosing the right tool for our project WordPress JavaScript Coding Standards URL / Choosing the right tool for our project WordPress PHP Coding Standards URL / Choosing the right tool for our project WordPress template hierarchy, analyzing / The WordPress template hierarchy hierarchy, URL / The WordPress template hierarchy WordPress theme unit test data, installing / Installing the WordPress theme’s unit test data World Wide Web (WWW) about / Analyzing the content-single.php file wp-config.php sets about / Multiple wp-config.php sets reference link / Multiple wp-config.php sets readme.txt file, adding / Adding the readme.txt file screenshot.png file, adding / Adding the screenshot.png file wpadmin URL / The Services section (list of services) WP Tavern article URL / The Services section (list of services) X XAMPP about / Installing and setting up WordPress ... Adding the screenshot.png file Running a theme check plugin Summary Index WordPress Responsive Theme Design WordPress Responsive Theme Design Copyright © 2015 Packt Publishing All rights reserved... WordPress Responsive Theme Design Table of Contents WordPress Responsive Theme Design Credits About the Author About the Reviewers www.PacktPub.com... Understanding the WordPress Theme Structure Setting WordPress permalinks What is a WordPress theme? Template files The page structure of template files Theme subfolders Summary Getting Started with Responsive Layout