Book Image

WordPress Responsive Theme Design

By : Dejan Markovic
Book Image

WordPress Responsive Theme Design

By: Dejan Markovic

Overview of this book

<p>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.</p> <p>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.</p>
Table of Contents (17 chapters)
WordPress Responsive Theme Design
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Applying the editor styles


Before we submit our work to WordPress.org, we have to double-check our theme to make sure it's valid and meets all requirements of WordPress.org. As the _underscores theme is a starter theme, it currently doesn't provide editor styles. Editor styles are the styles for the WordPress editor in wpadmin (the backend). The purpose of these styles is to match the look of pages or posts on frontend when the end user goes to the editor. For example, if we go to the http://localhost/topcat/markup-html-tags-and-formatting/ post, we'll see the following screenshot:

Then, if we open the same post in the editor in wpadmin, we get the following:

From the preceding screenshot, we can see that the font family is not the same (step 1), the font color is not the same (step 2), and the blockquote styling (custom HTML tag styling) is not applied (step 3). To fix this issue, we have to do the following two things:

  1. Implement custom editor styles, custom-editor-style.css. In this file...