WordPress Theme Development Basics

Technology Hotspot & Salon

Basic WordPress
Themes for Developers
March 26, 2012 (SF WordPress Meetup)
Anca Mosoiu, Tech Liminal

268 14th Street, Oakland, CA 94612 | Open 9:30 -7 Monday - Friday | Drop-in co-working space, workshops and technology services | More info: http://www.techliminal.com
1
Content in this presentation is Copyright (c) 2012 Tech Liminal. CC-Share-Alike. Feel free to use stuff from this presentation, but leave a link to Tech Liminal

Introduction
Anca Tech Liminal

• Web Developer • Technology Hotspot & Salon
• Information Architect • Co-Working & Hackspace
• 15 years of experience in • Workshops, Meetups
technology & marketing orgs • Expert, friendly help with web &
• Freelancer, Entrepreneur social media

anca@techliminal.com

www.techliminal.com 2 Content © 2011, Tech Liminal

Agenda

• Why WordPress

• Basic Architecture

• Template Hierarchy

• The Loop / Modifying the Query

• Hooks and Filters

• Resources for Learning


So, Why WordPress?

• Lots of people are using it

• It’s simple* to set up and get going

• Has powerful features for building sites

• But can be extended to some interesting applications

• Inexpensive to host

* Your mileage may vary


What kind of Sites?


Marketing Sites

Site by Exygy (exygy.com)


Events & Online Catalogs

Site by Mister Machine


The Universe of WordPress
Core Developers

Contribute
wordpress.org Contribute
Theme
Developers
Ofﬁcial site for:
the WordPress software software, help, Plugin Developers
free themes and plugins resources, meetups
Automattic Inc. community support
User Community

Download for free
Operates

wordpress.com Your Site Premium Theme
Developers
An online service where you can use the An installation of the WordPress software,
WordPress software, operated by on your own web hosting provider Premium Plugin
Automattic Inc. (BlueHost, Page.ly, GoDaddy, etc) Developers

Enhancements, themes and plugins that Themes and Plugins that you’ve chosen to WordPress
make wordpress.com suitable for hosting install to make your site do what you want it Designers & Devs
2M+ blogs and millions of users to.
Sell customization services,
Themes, and Plugins


How Does WordPress Work? An Infographic
You

In the Dashboard

Create C
ontent Dashboard Content
(Back-End)

Front-End Content

e
g
(Websites)
Pa
eb
W
Your
a

WordPress software
es

Reader
uc
od
Pr

Plugins Theme Options

Enhancements Database

PHP, HTML, CSS MySQL
and JavaScript code

In Their Browser


And the Files...
It’s all Files!

Web Hosting Provider

Dashboard
Content
(Back-End)

Content
Front-End
Database (Websites)
(Content)
WordPress software

Plugins Theme
Enhancements


What is a Theme?

• A WordPress theme provides the visual structure (layout)
for your site’s content

• Colors, fonts, positioning

• Navigation elements

• Can also provide additional functionality

• Slideshows

• Editor enhancements / “Theme Options”

• Custom Post Types *

• The HTML layout can affect SEO
CSS File + HTML/JS + PHP
11 www.techliminal.com

Your Theme Deﬁnes Your Site

• Blog Site?

• Magazine Site?

• Brochure?

• Social Network?

• Intranet?

• Storefront?

• Portfolio?

12 www.techliminal.com

To Get Started

• Development Environment where you can install WordPress (Web Server,
MySQL database)

• Shared Hosting (with ﬁle access)

• MAMP / WAMP (local dev environment)

• Code Editor (text editor)

• Plain-text editor (nothing w/ weird formatting)

• Notepad, TextMate, TextWrangler, VI(M),

• IDE (Coda, BBedit, UltraEdit, Eclipse, etc)


Theme Building Blocks

• Database

• Files

• Style.css

• Functions.php

• Index.php - the basic rendering loop

• Templates

• The Loop

• Sidebars & Widgets

• Child Themes


Dashboard to Database
Posts, Pages,
Media, Categories,
Tags, Comments,
Users, Options

11 tables in the WordPress
database.


Where do Themes Go?

wp-content/themes


Style.css

• Adds the theme information to your dashboard

• Deﬁnes the display of all the HTML elements output by the Templates.

style.css for twentyten theme

CSS deﬁnitions appear below


Templates

• Customize how you display archives, individual posts, individual pages,
tags, authors, etc.

• Default: index.php

• Examples:

• category.php / category-events.php

• page.php

• 404.php, search.php

• Sidebars and Widget Areas (sidebar-left.php)

• Header and Footer (header.php, footer.php)


Example: 2011 Theme


Theme Hierarchy

http://codex.wordpress.org/Template_Hierarchy


The Loop
• Each template displays posts - via a loop that lets you examine and render
each post at a time

http://codex.wordpress.org/The_Loop_in_Action


The Loop + HTML
Template Tags

http://codex.wordpress.org/The_Loop_in_Action


Changing the Loop - query_posts
• The Loop produces a list of posts based on a query into the database.

• You can change the display by using query_posts

http://codex.wordpress.org/Class_Reference/WP_Query


Template Tags

• These are designed to display HTML (or just get data) for your theme

• the_content()

• the_title()

• the_post()

• get_bloginfo()

• ... lots of them are in the codex


Themes and Child Themes

• A WordPress theme can allow its function to be inherited by a “child theme”

• Child theme just needs a style.css ﬁle - it gets all the other features of the
parent theme

• Page Templates

• Search

• JavaScript

• Widgets

• You can customize your own template ﬁles

• You can add your own features, usually through Hooks

http://codex.wordpress.org/Child_Themes


Theme Frameworks

• Provide functionality (such as widgets, options, templates)

• You can build child themes to enhance the functionality

• thematic (wordpress.org)

• carrington

• hybrid

• genesis (premium theme framework)


Lots More Topics:

• Debugging and Troubleshooting

• Actions and Filters

• Custom Post Types

• Search

• Sidebars and Widget Areas

• Widgets

• Theme Options

• ...


Future-Prooﬁng Your Theme

• How can I tell if my theme is compatible w/ the latest version of
WordPress?

• Keep track of what’s being changed - are your functions becoming
deprecated?

• http://core.trac.wordpress.org/

• Keep up with the theme development standards

• http://codex.wordpress.org/Theme_Review

• use template tags/functions, rather than direct database queries


Learn More...

• Tech Liminal offers hands-on training for designers and developers:

• http://techliminal.com/develop-wordpress-themes/

• One-on-one coaching w/ our development staff by appointment


WordPress Codex - Pages You’ll Love

• http://codex.wordpress.org/

• http://codex.wordpress.org/Theme_Development

• http://codex.wordpress.org/Template_Hierarchy

• http://codex.wordpress.org/The_Loop_in_Action

• http://codex.wordpress.org/Function_Reference

• http://codex.wordpress.org/Class_Reference/WP_Query

• http://codex.wordpress.org/Child_Themes

• http://codex.wordpress.org/Theme_Review - if you want to post your own
themes to WordPress.org, or learn about the minimum standards


More from WordPress

• Learn to read the code

• wp-hackers@lists.automattic.com - Programmers talking about themes,
plugins, hosting, etc

• theme-reviewers@lists.wordpress.org - Wordpress.org theme developers and
reviewers.


Other Useful Links

• http://php.net - PHP reference

• Date Formatting: http://php.net/manual/en/function.date.php

• Arrays:

• http://api.jquery.com - JQuery documentation

• http://w3schools.com - General Reference (HTML, CSS, JavaScript, PHP)

• http://yoast.com/wordpress-theme-anatomy/ - Great infographic of how it all
works

• https://github.com/menslow/moon-base - Basic theme framework from Michael
Enslow (Mister Machine)

• https://github.com/doolin/nanosity - Bare-bones theme with sample template ﬁles
for you to ﬁll in


Tech Liminal Workshop

• Early March

• Two Weekday Sessions (4 hours each)

• Tell us more: http://techliminal.com/wp-dev/

• Limited to 4 students per session


Q&A


WordPress Theme Development Basics

More Related Content

Similar to WordPress Theme Development Basics(20)

More from Tech Liminal(6)

Recently uploaded(20)

WordPress Theme Development Basics