WordPress 3 2 theme design beginner's guide silver, tessa blakeley 2010kaiser

WordPress Theme Development

Beginner's Guide Third Edition

Table of Contents

WordPress Theme Development

Beginner's GuideThird Edition

Credits

About the Authors

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount

offers and more

Why Subscribe?

Free Access for Packt account

holders

Preface

What this book covers

Who this book is for

Conventions

Time for action – heading

What just happened?

Pop quiz – heading

Have a go hero – heading

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. 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

Drawbacks of using an off-the-shelf

theme

What about premium themes and

frameworks?

What exactly is a premium theme

What is a framework theme

Core technology you should

understand

WordPress

CSS

HTML

PHP

Other helpful technologies

Tools of the trade

HTML editor

Graphics editor

Web browser

Basics of a WordPress theme

The template hierarchy

The Loop

Template tags and API hooks

Our development strategies

Fonts and typefaces

A CSS strategy – font sizing with

ems

A CSS strategy – working with a

CSS framework

960

Blueprint

Layoutcore

Setting up your WordPress sandbox

Using WAMP

Using MAMP

Choosing a hosting provider

Rolling out WordPress

Summary

2. Preparing a Design for Our

WordPress Theme

Getting ready to design

Designing in the browser

Starting our design

Planning and sketching our design

Time for action – planning our

design

What just happened?

Creating your design – from the

sketch to the screen

Time for action – creating our static

HTML file

What just happened?

The semantic body

Time for action – adding in basic

HTML structure

What just happened?

Time for action – adding in the

semantic structure

What just happened?

Attaching our CSS stylesheet

Time for action – creating and

including a style.css shell into your

index.php page

What just happened?

Prepping for responsiveness –

viewport and apple-mobile meta tags

Time for action – adding in the

viewport and apple-mobile meta tags

What just happened?

Adding in content

Starting with the text

Time for action – adding sample

text to our semantic sections

What just happened?

Styling our fonts

Styling font families

Time for Action – assigning your

font families

What just happened?

@font-face techniques

Styling font sizes

Time for action – sizing your fonts

What just happened?

Time for action – handling search

engine bots/screen reader text

What just happened?

Setting up our layout with CSS

Time for action – referencing our

layout core to set up our positions

What just happened?

Time for Action – Adding our

media queries

What just happened?

Setting up the desktop view

Time for action – standard settings

What just happened?

Time for action – checking in on

larger desktops

What just happened?

Time for action – making sure

smaller screens are handled

What just happened?

Setting up the tablet view

Time for action – adjusting the

standard layout for tablets

What just happened?

Setting up the small screen view

Time for action – setting up our

small screen layout

What just happened?

Adding design treatments

Time for action – setting up our

graphic treatments in the stylesheet

What just happened?

Adding graphics and background

images

Setting up our background images

in our stylesheet

Time for action – adding

background images to our design

What just happened?

Time for action – adding

background image styling to the media

queries

What just happened?

Don't forget the favicon and touch

icon

Adding a favicon

Time for action – adding the

favicon you just created

What just happened?

Have a go hero – making your

favicon high-resolution

Touch icons

Time for action – adding a touch

icon

What just happened?

Pop quiz – questions about theme

design

Summary

3. Coding it Up

WordPress theme basics

The Template hierarchy

Why the Template hierarchy works

the way it does

The WordPress theme API

Setting up your WordPress

workflow

Building your WordPress theme

template files

Starting with a blank slate

Creating a new theme directory

Time for action – setting up our

theme directory

What just happened?

Including WordPress content

Time for action – getting your CSS

styles to show up

What just happened?

Understanding WordPress template

tags and hooks

Template tags

Hooks

Looping it! – The WordPress Loop

The Loop in a nutshell – how it

works

Time for action – creating a basic

Loop

What just happened?

Time for action – adding content

What just happened?

Time for action – adding metadata,

the timestamp, and author template tags

What just happened?

Keeping up-to-date with

WordPress

Adding to the Loop

Time for action – displaying the

number of comments

What just happened?

Time for action – adding in

autogenerated classes

What just happened?

One last look – our full loop

Breaking the code up into template

files

Including everyone

Creating a header file

Time for action – creating the

header.php file

What just happened?

Separating out our sidebar

Time for action – creating the

sidebar.php file

What just happened?

Finishing off with the footer

Time for action – creating the

footer.php template file

What just happened

Time for action – don't forget the

plugin hooks

What just happened

Creating a template file for static

pages

Time for action – creating a custom

page.php template file

What just happened?

Pop Quiz – questions about

WordPress theme structure

Summary

4. Advanced Theme Features

Site settings

Time for action – configuring your

site settings

What just happened?