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 2.8 Theme Design

Book Description

Create flexible, powerful, and professional themes for your WordPress blogs and web sites

  • Take control of the look and feel of your WordPress site by creating fully functional unique themes that cover the latest WordPress features

  • Add interactivity to your themes using Flash and AJAX techniques

  • Expert guidance with practical step-by-step instructions for custom theme design

  • Includes design tips, tricks, and troubleshooting ideas

  • In More Detail

In Detail

Themes are among the most powerful features that can be used to customize a web site, especially in WordPress. Using custom themes you can brand your site for a particular corporate image, ensure standards compliance, and create easily navigable layouts. But most WordPress users still continue to use default themes as developing and deploying themes that are flexible and easily maintainable is not always straightforward.

It's easy to create powerful and professional themes for your WordPress web site when you've got this book to hand. It provides clear, step-by-step instructions to create a robust and flexible WordPress theme, along with best practices for theme development. It will take you through the ins and outs of creating sophisticated professional themes for the WordPress personal publishing platform. It reviews the best practices 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. 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

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.

Table of Contents

  1. WordPress 2.8 Theme Design
    1. WordPress 2.8 Theme Design
    2. Credits
    3. About the Author
    4. About the Reviewer
    5. 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. Errata
        2. Piracy
        3. Questions
    6. 1. Getting Started as a WordPress Theme Designer
      1. WordPress perks
      2. Does a WordPress site have to be a blog?
      3. Pick a theme or design your own?
        1. Drawbacks to using an already built theme
        2. Using theme frameworks
      4. This book's approach
      5. Core technology you should understand
        1. WordPress
        2. CSS
        3. XHTML
        4. PHP
        5. Other helpful technologies
      6. Tools of the trade
        1. HTML editor
        2. Graphic editor
        3. Firefox
        4. Developing for Firefox first
      7. Summary
    7. 2. Theme Design and Approach
      1. Things to consider
        1. Types of blogs
        2. Plugins and widgets
      2. Getting ready to design
        1. A common problem
      3. The solution: Rapid design comping
        1. The radical, new process—is not so new or radical?
        2. Overview of rapid design comping
      4. Getting started
        1. Sketching It
          1. Considering usability
        2. Starting with the structure
          1. Creating your design
          2. The DOCTYPE
          3. The main body
            1. Adding the XHTML file requirements
          4. Attaching the basic stylesheet
            1. Attaching the CSS file
            2. Creating a style.css file and including this basic shell
          5. Basic semantic XHTML structure
            1. Building out the body
      5. Adding text—typography
        1. Starting with the text
        2. Choosing your fonts
          1. Cascading fonts
            1. Font stacks
            2. sIFR
          2. Font sizing
            1. Why pixels?
            2. Keeping it in proportion
            3. Paragraphs
            4. Default links
        3. The layout
          1. Column Layout: Floating div tags versus CSS tables
          2. Posts
            1. Making sure WordPress sticky posts get styled
          3. Forms
            1. Threaded and paginated comments
          4. Navigation
            1. Styling the main navigation
            2. WordPress-specific styles for navigation
          5. Color schemes
            1. Two-minute color schemes
            2. Color schemes with GIMP or Photoshop
            3. Adding color to your CSS
            4. Styling the special TOC headers
          6. Creating the graphical elements
        4. Relax and have fun designing
        5. Slicing and exporting images
          1. Don't forget your favicon!
            1. Making your favicon high-res
        6. Summary
    8. 3. Coding It Up
      1. Got WordPress?
      2. Understanding the WordPress theme
      3. Creating your WordPress workflow
      4. Building our WordPress theme
        1. Starting with a blank slate: Tabula rasa
        2. Create a new theme directory
        3. Including WordPress content
          1. Understanding template tags
          2. Getting a handle on hooks
          3. Learning the Loop
          4. Creating a basic loop
        4. Modifying the timestamp and author template tags
        5. Modifying the basic comments display
        6. Including threaded comments
          1. Styling threaded comments
            1. Adding and styling comment pagination
      5. Breaking it up: Header, footer, and sidebar template files
          1. Creating the footer.php template file
            1. Hooking it up: Plugin API hooks
          2. Creating the sidebar.php template file
            1. Making the sidebar dynamic
            2. Hooking it up: Plugin API hooks
          3. The header
            1. Creating the header.php file
            2. Hooking it up: Plugin API hooks
        1. More template files: Home, internal, and static pages
          1. The home page
            1. Creating a custom home.php template file
            2. Creating a second sidebar
          2. Internal pages
            1. Updating the index.php file to be an internal page
          3. Static pages
            1. Creating a custom page.php template file
          4. Quick review
          5. Fun with other page layouts
          6. Don't forget about your 404 page
            1. Creating a custom 404 template file
        2. Even more template files
        3. Adding in the favicon
          1. Activating the favicon
      6. Summary
    9. 4. Debugging and Validation
      1. Testing other browsers and platforms
      2. Introduction to debugging
      3. Troubleshooting basics
        1. Why validate?
        2. PHP template tags
        3. CSS quick fixes
        4. Advanced troubleshooting
          1. Quirks mode
      4. Fixing CSS across browsers
        1. Box model issues
        2. Everything is relative
      5. To hack or not to hack
      6. Out of the box model thinking
      7. The road to validation
      8. Advanced validation
        1. Firefox's JavaScript/Error Console
        2. The Web Developer Toolbar
        3. Firebug
        4. Checking your work in Internet Explorer
          1. Run multiple versions of IE
          2. IE Developer Toolbar
          3. Don't forget about the QorSMode bookmarklet
        5. Optimizing for text and mobile browsers
          1. The new mobile Safari browser
      9. Summary
    10. 5. Putting Your Theme into Action
      1. A picture's worth
      2. Theme packaging basics
      3. Describing your theme
      4. Licensing
      5. Creating a ReadMe.txt file
      6. Zipping it up
      7. No way to zip?
      8. Performing one last test
      9. Getting some feedback and tracking it
      10. Summary
    11. 6. WordPress Template Tag, Function, and CSS Reference
      1. Class styles generated by WordPress
        1. The search bar ID
        2. Classes output by the media manager
        3. Classes output by the sidebar widgets
        4. Classes output by the wp_list_pages template tag
        5. Classes output by the wp_list_categories template tag
        6. post_class class styles
        7. body_class class styles
          1. Why add custom class styles to template tags?
      2. Using the template selector feature
        1. Creating a custom page template
      3. Template hierarchy
      4. Template tags
        1. Author template tag updates in 2.8
        2. Template tags for tags
        3. Adding tag display to your theme
        4. General template tags—the least you need to know
      5. Conditional tags
      6. Including tags into your themes
        1. Creating custom header, footer, sidebar includes
        2. Completely custom—streamlining your theme
        3. Creating a custom include in your theme
      7. The Loop functions
      8. Plugin hooks
        1. WordPress core functions
          1. WordPress shortcodes
            1. Creating a basic shortcode
        2. Summary
    12. 7. AJAX / Dynamic Content and Interactive Forms
      1. Preparing for dynamic content and interactive forms
        1. Assessing if AJAX is appropriate for your site
        2. Do it yourself or use plugins
        3. Plugin pros and cons
      2. The AJAX factor
        1. jQuery now comes bundled with WordPress
          1. Including jQuery in WordPress
          2. Avoiding problems registering jQuery
          3. Linking to jQuery from Google Code's CDN
          4. Using WordPress' bundled includes versus including your own or using a CDN
          5. jQuery plugins
        2. Problem with setting up a Lightbox effect in WordPress
          1. jQuery lightBox
          2. Adding jQuery lightBox to your template
          3. Implementing lightBox
          4. jQuery's ThickBox and ColorBox plugins
      3. Plugins and widgets
        1. Plugins
        2. Widgets
        3. Getting your theme ready for plugins and widgets
        4. Preparing your theme for plugins
        5. Installing a plugin
          1. Installing the AJAX comment preview plugin
        6. Preparing your theme for widgets
          1. Making your theme compatible with widgets
          2. Google Reader widget
            1. Installing the Google Reader widget
            2. A small problem you may run into while installing the Google Reader widget
      4. AJAX—it's not just for your site's users
        1. New work space features
        2. pageMash
          1. Installing the pageMash plugin
      5. Summary
    13. 8. Dynamic Menus and Interactive Elements
      1. Dynamic menus
        1. Drop-down menus
        2. DIY SuckerFish menus in WordPress
          1. Applying CSS to WordPress
          2. Applying the DOM script to WordPress
          3. Allowing only selected pages to display
          4. Hiding pages the easy way with pageMash
      2. Adding Flash to your theme
        1. Flash in your theme
        2. Handling users without Flash, older versions of Flash, and IE6 users
          1. Is the ActiveX restriction still around?
            1. swfObject
          2. Adding a SWF to the template using swfObject
          3. jQuery Flash plugin
            1. Embedding Flash files using the jQuery Flash plugin
          4. Passing Flash a WordPress variable
          5. Adding sIFR text with the jQuery Flash plugin
        3. Flash in a WordPress post or page
          1. Adding You Tube video to a WordPress post
      3. Summary
    14. 9. Design Tips for Working with WordPress
      1. The cool factor essentials
        1. Backgrounds
        2. Lists
          1. See it in action
        3. Rounded corners
          1. The classic—all four corners
          2. The two-image cheat
          3. CSS3—the new way to round corners
        4. Creative posting
        5. Breaking boundaries
        6. Keeping tabs on current design trends
        7. Creative fonts
          1. Graphic text
          2. Using PHP to make graphic headers easy
          3. Custom fonts with CSS3
      2. Good design isn't always visual—looking at SEO
        1. Search engine friendly URLs
        2. Keywords and descriptions
          1. DYI meta tags
          2. Meta tag plugins
      3. Summary