PacktLib: WordPress Theme Development - Beginner's Guide

WordPress Theme Development Beginner's GuideThird Edition

Credits

About the Authors

About the Reviewers

www.PacktPub.com

Preface

Pop Quiz Answers

Getting Started as a WordPress Theme Designer

Overview of WordPress perks

Does a WordPress site have to be a blog ?

Pick a theme or design of your own

What about premium themes and frameworks?

Core technology you should understand

Tools of the trade

Basics of a WordPress theme

Our development strategies

Setting up your WordPress sandbox

Summary

Preparing a Design for Our WordPress Theme

Getting ready to design

Starting our design

Time for action – planning our design

Creating your design – from the sketch to the screen

Time for action – creating our static HTML file

Time for action – adding in basic HTML structure

Time for action – adding in the semantic structure

Time for action – creating and including a style.css shell into your index.php page

Time for action – adding in the viewport and apple-mobile meta tags

Time for action – adding sample text to our semantic sections

Time for Action – assigning your font families

Time for action – sizing your fonts

Time for action – handling search engine bots/screen reader text

Time for action – referencing our layout core to set up our positions

Time for Action – Adding our media queries

Time for action – standard settings

Time for action – checking in on larger desktops

Time for action – making sure smaller screens are handled

Time for action – adjusting the standard layout for tablets

Time for action – setting up our small screen layout

Adding design treatments

Time for action – setting up our graphic treatments in the stylesheet

Adding graphics and background images

Time for action – adding background images to our design

Time for action – adding background image styling to the media queries

Don't forget the favicon and touch icon

Time for action – adding the favicon you just created

Time for action – adding a touch icon

Summary

Coding it Up

WordPress theme basics

Building your WordPress theme template files

Time for action – setting up our theme directory

Time for action – getting your CSS styles to show up

Time for action – creating a basic Loop

Time for action – adding content

Time for action – adding metadata, the timestamp, and author template tags

Time for action – displaying the number of comments

Time for action – adding in autogenerated classes

Breaking the code up into template files

Time for action – creating the header.php file

Time for action – creating the sidebar.php file

Time for action – creating the footer.php template file

Time for action – don't forget the plugin hooks

Time for action – creating a custom page.php template file

Summary

Advanced Theme Features

Site settings

Time for action – configuring your site settings

Time for action – adding the site title and description to your theme

Pretty permalinks

Time for action – setting up pretty permalinks

Menus

Time for action – registering a navigation menu

Time for action – adding menus to our theme's header.php file

Time for action – defining Reading settings

Time for action – creating a new WordPress menu

Time for action – adding pages to a menu

Time for action – adding a custom link to the menu

Time for action – adding a category link to the menu

Widgets

Time for action – registering sidebars in functions.php

Time for action – adding widget areas to sidebar.php

Time for action –adding widget areas to footer.php

Time for action – adding sidebar widgets

Time for action – adding footer widgets

Featured images

Time for action – adding featured images to our theme

Time for action – adding featured images to the site

Time for action – displaying featured images differently in different template files

Parent and child themes

Summary

Debugging and Validation

Debugging and validation workflow

Browser tools for debugging

Validation

Time for action – validating your HTML

Time for action – finding and fixing errors

Time for action – fixing our code

Time for action – using the W3C's CSS validator

Testing on multiple browsers and platforms

Troubleshooting basics

Fixing CSS across browsers

Time for action – setting up an alternative IE stylesheet

Checking your work in Internet Explorer

Time for action – testing our theme with BrowserLab

Testing on mobile devices

Summary

Your Theme in Action

The WordPress Theme Review guidelines

The theme preview screenshot

Time for action – snagging a thumbnail of your theme

Packaging your theme up

Time for action – tidying up your theme

Time for action – describing your theme

Time for action – adding license information to our theme

Zipping up your theme

Time for action – zipping up your theme

One last test

Time for action – testing the theme

Summary

Tips and tricks

Adding more template files to your theme

Time for action – creating a search.php template file

Time for action – creating a custom page template

Time for action – assigning a custom page template to a page in our site

Working with conditional tags

Time for action – using CSS to hide our home page's title

Time for action – using a conditional tag to hide our home page's title

Time for action - adding the Theme Customizer to our theme

Time for action – adding some more options to the Theme Customizer

Time for action – ensuring Theme Customizer changes are carried through to the CSS

Search engine optimization

Time for action – optimizing a logo for SEO

Time for action – optimizing our theme's page meta tags

Summary

Index