Book Image

WordPress Theme Design

By : Tessa Blakeley Silver
Book Image

WordPress Theme Design

By: Tessa Blakeley Silver

Overview of this book

<p>This title will take you through the ins and outs of creating sophisticated professional themes for the WordPress personal publishing platform. It will walk you through clear, step-by-step instructions to build a custom WordPress theme. From development tools and setting up your WordPress sandbox, through design tips and suggestions, to setting up your theme's template structure, coding markup, testing and debugging, to taking it live it reviews the best practices. The last three chapters are dedicated to additional tips, tricks and various cookbook recipes for adding popular site enhancements to your WordPress theme designs using third-party plugins.<br /><br />Whether you're working with a pre-existing theme or creating a new one from the ground up, WordPress Theme Design will give you the know-how to understand how themes work within the WordPress blog system, enabling you to take full control over your site's design and branding.</p>
Table of Contents (13 chapters)
WordPress Theme Design
Credits
About the Author
Preface

Preface

The goal of this title is to explain the basic steps of creating a WordPress theme. This book focuses on the development, creation, and enhancement of WordPress themes, and therefore does not cover general 'how to' information about WordPress and all its many features and capabilities. This title assumes you have some level of understanding and experience with the basics of the WordPress publishing platform.The WordPress publishing platform has excellent online documentation, which can be found at http://codex.wordpress.org. This title does not try to replace or duplicate that documentation, but is intended as a companion to it.

My hope is to save you some time finding relevant information on how to create and modify themes in the extensive WordPress codex, help you understand how WordPress themes work, and show you how to design and build rich, in-depth WordPress themes yourself. Throughout the book, wherever applicable, I'll point you to the relevant WordPress codex documentation along with many other useful online articles and sites.

I've attempted to create a realistic WordPress theme example that anyone can take the basic concepts from and apply to a standard blog, while at the same time, show how flexible WordPress and its theme capabilities are. I hope this book's theme example shows that WordPress can be used to create unique websites that one wouldn't think of as 'just another blog'.

What This Book Covers

Chapter 1 Getting Started as a WordPress Theme Designer introduces you to the WordPress blog system and lets you know what you'll need to be aware of regarding the WordPress theme project you're ready to embark on. The chapter also covers the development tools that are recommended and web skills that you'll need to begin developing a WordPress theme.

Chapter 2 Template Design and Approach takes a look at the essential elements you need to consider when planning your WordPress theme design. It discusses the best tools and processes for making your theme design a reality. I explain my own 'Rapid Design Comping' technique and give you some tips and tricks for developing color schemes and graphic styles for your WordPress theme. By the end of the chapter, you'll have a working XHTML and CSS based 'comp' or mockup of your theme design, ready to be coded up and assembled into a fully functional WordPress theme.

Chapter 3 Coding It Up uses the final XHTML and CSS mockup from Chapter 2 and shows you how to add WordPress PHP template tag code to it and break it down into the template pages a theme requires. Along the way, this chapter covers the essentials of what makes a WordPress theme work. At the end of the chapter, you'll have a basic, working WordPress theme.

Chapter 4 Debugging and Validation discusses the basic techniques of debugging and validation that you should be employing throughout your theme's development. It covers the W3C's XHTML and CSS validation services and how to use the FireFox browser and some of its extensions as a development tool, not just another browser. This chapter also covers troubleshooting some of the most common reasons 'good code goes bad', especially in IE, and best practices for fixing those problems, giving you a great-looking theme across all browsers and platforms.

Chapter 5 Your Theme in Action discuss how to properly set up your WordPress theme's CSS style sheet so that it loads into WordPress installations correctly. It also discuss compressing your theme files into the ZIP file format and running some test installations of your theme package in WordPress's administration panel so you can share your WordPress theme with the world.

Chapter 6 WordPress Reference covers key information under easy-to-look-up headers that will help you with your WordPress theme development, from the two CSS class styles that WordPress itself outputs, to WordPress's PHP template tag code, to a breakdown of "The Loop" along with WordPress functions and features you can take advantage of in your theme development. Information in this chapter is listed along with key links to bookmark to make your theme development as easy as possible.

Chapter 7 Dynamic Menus and Interactive Elements dives into taking your working, debugged, validated, and properly packaged WordPress theme from the earlier chapters, and start enhancing it with dynamic menus using the SuckerFish CSS-based method and Adobe Flash media.

Chapter 8 AJAX/Dynamic Content and Interactive Forms continues showing you how to enhance your WordPress theme by taking a look at the most popular methods for leveraging AJAX techniques in WordPress using plugins and widgets. I'll also give you a complete background on AJAX and when it's best to use those techniques or skip them. The chapter also reviews some cool JavaScript toolkits, libraries, and scripts you can use to simply make your WordPress theme appear 'Ajaxy'.

Chapter 9 Design Tips for Working with WordPress reviews the main tips from the previous chapters and covere some key tips for easily implementing today's coolest CSS tricks into your theme as well as a few final SEO tips that you'll probably run into once you really start putting content into your WordPress site.

What You Need for This Book

Essentially, you'll need a code editor, the latest Firefox browser and any other web browsers you'd like your theme to display well in. Most importantly, you'll need an installation of the latest, stable version of WordPress.

WordPress 2.5 requires the following to be installed:

  • PHP version 4.3 or greater

  • MySQL version 4.0 or greater

For more information on WordPress 2.5's requirements, please browse to:

http://wordpress.org/about/requirements/

Chapter 1 covers in detail the software, tools, and skills recommended for WordPress theme development.

Who This Book is For

This book can be used by WordPress users or visual designers (with no server-side scripting or programming experience) who are used to working with the common industry-standard tools like PhotoShop and Dreamweaver or other popular graphic, HTML, and text editors.

Regardless of your web development skill-set or level, you'll be walked through the clear, step-by-step instructions, but there are many web development skills and much WordPress know-how that you'll need to be familiar with to gain maximum benefit from this book.

Conventions

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text are shown as follows: "In your index.html file, add your css import link within the header file:"

A block of code will be set as follows:

<head>
<title>OpenSource Online Magazine</title>
<script type="text/javascript" src=""></script>
<style type="text/css" media="screen">
@import url("style.css");
</style>
</head>

When we wish to draw your attention to a particular part of a code block, the relevant lines or items will be made bold:

<head>
<title>OpenSource Online Magazine</title>
<script type="text/javascript" src=""></script>
<style type="text/css" media="screen">
@import url("style.css");
</style>
</head>

New terms and important words are introduced in a bold-type font. Words that you see on the screen, in menus or dialog boxes for example, appear in our text like this: "In your WordPress go to Administration | Design | Themes (or Administration | Presentation | Themes in 2.3). There, you'll be able to select the new theme you just duplicated and renamed. (Look carefully! The image is still the same as the default theme.)"

Note

Important notes appear in a box like this.

Note

Tips and tricks appear like this.

Reader Feedback

Feedback from our readers is always welcome. Let us know what you think about this book, what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply drop an email to , making sure to mention the book title in the subject of your message.

If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or email to .

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Customer Support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the Example Code for the Book

Visit http://www.packtpub.com/files/code/3094_Code.zip to directly download the example code.

The downloadable files contain instructions on how to use them.

Errata

Although we have taken every care to ensure the accuracy of our contents, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in text or code—we would be grateful if you would report this to us. By doing this you can save other readers from frustration, and help to improve subsequent versions of this book. If you find any errata, report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the let us know link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be added to the list of existing errata. The existing errata can be viewed by selecting your title from http://www.packtpub.com/support.

Questions

You can contact us at if you are having a problem with some aspect of the book, and we will do our best to address it.