wordpress theme development basics

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

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

Technology Hotspot & Salon

1

Basic WordPress Themes for Developers

March 26, 2012 (SF WordPress Meetup)Anca Mosoiu, Tech Liminal

www.techliminal.com Content © 2011, Tech Liminal

Introduction

• Web Developer• Information Architect• 15 years of experience in

technology & marketing orgs• Freelancer, Entrepreneur

• Technology Hotspot & Salon• Co-Working & Hackspace• Workshops, Meetups• Expert, friendly help with web &

social media

Anca Tech Liminal

[email protected]

2


Agenda

• Why WordPress

• Basic Architecture

• Template Hierarchy

• The Loop / Modifying the Query

• Hooks and Filters

• Resources for Learning

3


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

4

* Your mileage may vary


What kind of Sites?

5


Marketing Sites

6

Site by Exygy (exygy.com)


Events & Online Catalogs

7

Site by Mister Machine


The Universe of WordPress

8

wordpress.orgOfficial site for:

the WordPress softwarefree themes and pluginscommunity support

wordpress.comAn online service where you can use the WordPress software, operated by Automattic Inc.

Enhancements, themes and plugins that make wordpress.com suitable for hosting 2M+ blogs and millions of users

Theme Developers

Plugin Developers

Premium Theme Developers

Premium Plugin Developers

WordPress Designers & Devs

Core Developers

Your SiteAn installation of the WordPress software, on your own web hosting provider (BlueHost, Page.ly, GoDaddy, etc)

Themes and Plugins that you’ve chosen to install to make your site do what you want it to.

User Community

Contribute

Download for free

Sell customization services,Themes, and Plugins

Operates

Contribute

Automattic Inc.

software, help, resources, meetups


DatabaseEnhancementsThemePlugins

WordPress software

Dashboard(Back-End)

Front-End (Websites)

Content

Content

Options

How Does WordPress Work? An Infographic

9

Create Content

Produc

es a

Web Pag

e

In the Dashboard

You

Your Reader

PHP, HTML, CSS and JavaScript code

MySQL

In Their Browser


And the Files...

10

Web Hosting Provider

Database(Content)

WordPress software

Dashboard(Back-End)

EnhancementsThemePlugins

It’s all Files!

Front-End (Websites)Content

Content

www.techliminal.com

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

11

CSS File + HTML/JS + PHP

www.techliminal.com

Your Theme Defines Your Site

• Blog Site?

• Magazine Site?

• Brochure?

• Social Network?

• Intranet?

• Storefront?

• Portfolio?

12


To Get Started

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

• Shared Hosting (with file 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)

13


Theme Building Blocks

• Database

• Files

• Style.css

• Functions.php

• Index.php - the basic rendering loop

• Templates

• The Loop

• Sidebars & Widgets

• Child Themes

14


Dashboard to Database

15

11 tables in the WordPress database.

Posts, Pages, Media, Categories, Tags, Comments,

Users, Options


Where do Themes Go?

16

wp-content/themes


Style.css

• Adds the theme information to your dashboard

• Defines the display of all the HTML elements output by the Templates.

17

style.css for twentyten theme

CSS definitions 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)

18


Example: 2011 Theme

19


Theme Hierarchy

20

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

21

http://codex.wordpress.org/The_Loop_in_Action


The Loop + HTML

22

http://codex.wordpress.org/The_Loop_in_Action

Template Tags


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

23

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

24


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 file - it gets all the other features of the parent theme

• Page Templates

• Search

• JavaScript

• Widgets

• You can customize your own template files

• You can add your own features, usually through Hooks

25

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)

26


Lots More Topics:

• Debugging and Troubleshooting

• Actions and Filters

• Custom Post Types

• Search

• Sidebars and Widget Areas

• Widgets

• Theme Options

• ...

27


Future-Proofing 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

28


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

29

Resources

30


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

31


More from WordPress

• Learn to read the code

• [email protected] - Programmers talking about themes, plugins, hosting, etc

• [email protected] - Wordpress.org theme developers and reviewers.

32


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 files for you to fill in

33


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

34

wordpress theme development basics

Self Improvement