You are previewing WordPress Responsive Theme Design.
O'Reilly logo
WordPress Responsive Theme Design

Book Description

Develop and customize your very own responsive WordPress themes quickly and efficiently

In Detail

WordPress is a free and open source blogging tool, which runs on a web hosting service. It is used to implement responsive themes, to make WordPress sites optimized for mobile devices.

This book will teach you how to design and develop your very own responsive WordPress theme and also submit your theme to the repository. The book starts with an introduction to the Responsive Web Design concepts and techniques. Then, it explains how to set up a local WordPress environment and also helps you understand the structure of the WordPress theme. Finally, we learn to create responsive comments in WordPress and also have a look at static pages and index templates. By the end of this book, you will have a better understanding of responsive theme development in WordPress and a WordPress Codex.

What You Will Learn

  • Set up a proper local environment for the theme development on both Windows and Mac, while following the WordPress Codex

  • Create the WordPress menu and make it responsive

  • Customize post templates to match the theme design and functionality of the theme

  • Understand the overall template architecture and the purpose of the template files

  • Create, style, and make the widgets responsive

  • Work with comments, images, and index templates

  • Create, style, and customize templates for static pages

  • Discover where to find guidelines, how to test the theme, and how to properly submit the theme to

  • Learn more about WordPress template hierarchy and archive pages

  • Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at If you purchased this book elsewhere, you can visit and register to have the files e-mailed directly to you.

    Table of Contents

    1. WordPress Responsive Theme Design
      1. Table of Contents
      2. WordPress Responsive Theme Design
      3. Credits
      4. About the Author
      5. About the Reviewers
        1. Support files, eBooks, discount offers, and more
          1. Why subscribe?
          2. Free access for Packt account holders
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Downloading the example code
          2. Downloading the color images of this book
          3. Errata
          4. Piracy
          5. Questions
      8. 1. Responsive Web Design with WordPress
        1. The concepts of RWD
          1. Controlling Viewport
          2. Scaling
            1. The screen density
          3. Problems and solutions with the screen density
        2. Techniques in RWD
          1. Media queries
            1. Breakpoints
          2. Fluid grids
            1. Frameworks positives
            2. Frameworks negatives
          3. Flexible images and media
        3. Setting up the WordPress environment
          1. Installing and setting up WordPress
          2. Setting up the underscores theme
          3. Installing the WordPress theme's unit test data
          4. Installing the Developer plugin
        4. Summary
      9. 2. Understanding the WordPress Theme Structure
        1. Setting WordPress permalinks
          1. What is a WordPress theme?
          2. Template files
          3. The page structure of template files
          4. Theme subfolders
        2. Summary
      10. 3. Getting Started with Responsive Layout
        1. Choosing the right tool for our project
          1. How to set up functions.php
          2. How to set up styles.css
          3. The em and rem values
        2. Adding media queries
        3. Summary
      11. 4. Learn How to Create the Header and Navigation
        1. Making our layout centered
        2. Dealing with the header
        3. How to create a menu and make it responsive and accessible
          1. Menu basics
          2. Styling our menu
        4. How to make our menu accessible
        5. How to make our menu responsive
        6. Summary
      12. 5. Customizing Single Post Templates
        1. Analyzing single post templates
        2. Analyzing the content-single.php file
          1. Template improvements
            1. Header improvements
          2. Implementing changes to the post template
          3. Styling post's metadata
          4. Content section
        3. Tags
          1. Post navigation
        4. Summary
      13. 6. Responsive Widgets, Footer, and Comments
        1. Widgets
          1. Sidebars
          2. Styling sidebars
          3. Editing the footer
        2. Working with comments
          1. Styling comments title
          2. Styling comments
          3. Comments navigation
        3. Summary
      14. 7. Working with Images and Videos
        1. Featured images
        2. Setting up a featured image
        3. Resizing featured images
        4. Image captions
        5. Image galleries
        6. Making the gallery responsive
        7. Working with videos
        8. Summary
      15. 8. Working with Template Files
        1. The WordPress template hierarchy
        2. Excerpts
        3. Featured images
        4. Customizing the paging navigation
        5. Styling sticky posts
        6. Modifying archive.php
        7. Modifying 404.php
        8. Modifying search.php
        9. Summary
      16. 9. Working with Static Pages and Adding the Extra Functionality with Plugins
        1. Home page
        2. The home page template
        3. Styles for the home template
        4. Slider plugin
        5. The Services section (list of services)
        6. Making our home page responsive
        7. The Contact Us page
        8. Summary
      17. 10. Submitting Your Theme to
        1. Polishing code before submission
        2. Applying the editor styles
        3. Validating the HTML and CSS code
        4. Validating the JavaScript code
        5. Validating the PHP code
        6. Debugging the setup
        7. Multiple wp-config.php sets
          1. Adding the readme.txt file
          2. Adding the screenshot.png file
        8. Running a theme check plugin
        9. Summary
      18. Index