O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

WordPress Responsive Theme Design

Book Description

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

  • Structured learning for new developers and technical consultants to enable you to build responsive WordPress themes
  • Concise and easy-to-follow walkthroughs of WordPress, PHP, and CSS code
  • Packed with examples and key tips on how to avoid potential pitfalls

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 WordPress.org 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 WordPress.org
  • Learn more about WordPress template hierarchy and archive pages

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
    6. www.PacktPub.com
      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 WordPress.org
      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