WordPress 2.8 Theme Design电子书

WordPress 2.8 Theme Design

Table of Contents

WordPress 2.8 Theme Design

Credits

About the Author

About the Reviewer

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Errata

Piracy

Questions

1. Getting Started as a WordPress Theme Designer

WordPress perks

Does a WordPress site have to be a blog?

Pick a theme or design your own?

Drawbacks to using an already built theme

Using theme frameworks

This book's approach

Core technology you should understand

WordPress

CSS

XHTML

PHP

Other helpful technologies

Tools of the trade

HTML editor

Graphic editor

Firefox

Developing for Firefox first

Summary

2. Theme Design and Approach

Things to consider

Types of blogs

Plugins and widgets

Getting ready to design

A common problem

The solution: Rapid design comping

The radical, new process—is not so new or radical?

Overview of rapid design comping

Getting started

Sketching It

Considering usability

Starting with the structure

Creating your design

The DOCTYPE

The main body

Adding the XHTML file requirements

Attaching the basic stylesheet

Attaching the CSS file

Creating a style.css file and including this basic shell

Basic semantic XHTML structure

Building out the body

Adding text—typography

Starting with the text

Choosing your fonts

Cascading fonts

Font stacks

sIFR

Font sizing

Why pixels?

Keeping it in proportion

Paragraphs

Default links

The layout

Column Layout: Floating div tags versus CSS tables

Posts

Making sure WordPress sticky posts get styled

Forms

Threaded and paginated comments

Navigation

Styling the main navigation

WordPress-specific styles for navigation

Color schemes

Two-minute color schemes

Color schemes with GIMP or Photoshop

Adding color to your CSS

Styling the special TOC headers

Creating the graphical elements

Relax and have fun designing

Slicing and exporting images

Don't forget your favicon!

Making your favicon high-res

Summary

3. Coding It Up

Got WordPress?

Understanding the WordPress theme

Creating your WordPress workflow

Building our WordPress theme

Starting with a blank slate: Tabula rasa

Create a new theme directory

Including WordPress content

Understanding template tags

Getting a handle on hooks

Learning the Loop

Creating a basic loop

Modifying the timestamp and author template tags

Modifying the basic comments display

Including threaded comments

Styling threaded comments

Adding and styling comment pagination

Breaking it up: Header, footer, and sidebar template files

Creating the footer.php template file

Hooking it up: Plugin API hooks

Creating the sidebar.php template file

Making the sidebar dynamic

Hooking it up: Plugin API hooks

The header

Creating the header.php file

Hooking it up: Plugin API hooks

More template files: Home, internal, and static pages

The home page

Creating a custom home.php template file

Creating a second sidebar

Internal pages

Updating the index.php file to be an internal page

Static pages

Creating a custom page.php template file

Quick review

Fun with other page layouts

Don't forget about your 404 page

Creating a custom 404 template file

Even more template files

Adding in the favicon

Activating the favicon

Summary

4. Debugging and Validation

Testing other browsers and platforms

Introduction to debugging

Troubleshooting basics

Why validate?

PHP template tags

CSS quick fixes

Advanced troubleshooting

Quirks mode

Fixing CSS across browsers

Box model issues

Everything is relative

To hack or not to hack

Out of the box model thinking

The road to validation

Advanced validation

Firefox's JavaScript/Error Console

The Web Developer Toolbar

Firebug

Checking your work in Internet Explorer

Run multiple versions of IE

IE Developer Toolbar

Don't forget about the QorSMode bookmarklet

Optimizing for text and mobile browsers

The new mobile Safari browser

Summary

5. Putting Your Theme into Action

A picture's worth

Theme packaging basics

Describing your theme

Licensing

Creating a ReadMe.txt file

Zipping it up

No way to zip?

Performing one last test

Getting some feedback and tracking it

Summary

6. WordPress Template Tag, Function, and CSS Reference

Class styles generated by WordPress

The search bar ID

Classes output by the media manager

Classes output by the sidebar widgets

Classes output by the wp_list_pages template tag

Classes output by the wp_list_categories template tag

post_class class styles

body_class class styles

Why add custom class styles to template tags?

Using the template selector feature

Creating a custom page template

Template hierarchy

Template tags

Author template tag updates in 2.8

Template tags for tags

Adding tag display to your theme

General template tags—the least you need to know

Conditional tags

Including tags into your themes

Creating custom header, footer, sidebar includes

Completely custom—streamlining your theme

Creating a custom include in your theme

The Loop functions

Plugin hooks

WordPress core functions

WordPress shortcodes

Creating a basic shortcode

Summary

7. AJAX / Dynamic Content and Interactive Forms

Preparing for dynamic content and interactive forms

Assessing if AJAX is appropriate for your site

Do it yourself or use plugins

Plugin pros and cons

The AJAX factor

jQuery now comes bundled with WordPress

Including jQuery in WordPress

Avoiding problems registering jQuery

Linking to jQuery from Google Code's CDN

Using WordPress' bundled includes versus including your own or using a CDN

jQuery plugins

Problem with setting up a Lightbox effect in WordPress

jQuery lightBox

Adding jQuery lightBox to your template

Implementing lightBox

jQuery's ThickBox and ColorBox plugins

Plugins and widgets

Plugins

Widgets

Getting your theme ready for plugins and widgets

Preparing your theme for plugins

Installing a plugin

Installing the AJAX comment preview plugin

Preparing your theme for widgets

Making your theme compatible with widgets

Google Reader widget

Installing the Google Reader widget

A small problem you may run into while installing the Google Reader widget

AJAX––it's not just for your site's users

New work space features

pageMash

Installing the pageMash plugin

Summary

8. Dynamic Menus and Interactive Elements

Dynamic menus

Drop-down menus

DIY SuckerFish menus in WordPress

Applying CSS to WordPress

Applying the DOM script to WordPress

Allowing only selected pages to display

Hiding pages the easy way with pageMash

Adding Flash to your theme

Flash in your theme

Handling users without Flash, older versions of Flash, and IE6 users

Is the ActiveX restriction still around?

swfObject

Adding a swf to the template using swfObject

jQuery Flash plugin

Embedding Flash files using the jQuery Flash plugin

Passing Flash a WordPress variable

Adding sIFR text with the jQuery Flash plugin

Flash in a WordPress post or page

Adding You Tube video to a WordPress post

Summary

9. Design Tips for Working with WordPress

The cool factor essentials

Backgrounds

Lists

See it in action

Rounded corners

The classic—all four corners

The two-image cheat

CSS3—the new way to round corners

Creative posting

Breaking boundaries

Keeping tabs on current design trends

Creative fonts

Graphic text

Using PHP to make graphic headers easy

Custom fonts with CSS3

Good design isn't always visual—looking at SEO

Search engine friendly URLs

Keywords and descriptions

DYI meta tags

Meta tag plugins

Summary

Index