Learn the basics of building WordPress themes. This presentation is appropriate for people who are somewhat familiar with PHP and databases. To Learn More, check out http://techliminal.com

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

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

3. Agenda
• Why WordPress
• Basic Architecture
• Template Hierarchy
• The Loop / Modifying the Query
• Hooks and Filters
• Resources for Learning
www.techliminal.com 3 Content © 2012, Tech Liminal

4. 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
www.techliminal.com 4 Content © 2012, Tech Liminal

5. What kind of Sites?
www.techliminal.com 5 Content © 2012, Tech Liminal

6. Marketing Sites
Site by Exygy (exygy.com)
www.techliminal.com 6 Content © 2012, Tech Liminal

7. Events & Online Catalogs
Site by Mister Machine
www.techliminal.com 7 Content © 2012, Tech Liminal

8. The Universe of WordPress
Core Developers
Contribute
wordpress.org Contribute
Theme
Developers
Official 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
www.techliminal.com 8 Content © 2012, Tech Liminal

9. 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
www.techliminal.com 9 Content © 2012, Tech Liminal

10. 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
www.techliminal.com 10 Content © 2012, Tech Liminal

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

12. Your Theme Defines Your Site
• Blog Site?
• Magazine Site?
• Brochure?
• Social Network?
• Intranet?
• Storefront?
• Portfolio?
12 www.techliminal.com

13. 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)
www.techliminal.com 13 Content © 2012, Tech Liminal

14. Theme Building Blocks
• Database
• Files
• Style.css
• Functions.php
• Index.php - the basic rendering loop
• Templates
• The Loop
• Sidebars & Widgets
• Child Themes
www.techliminal.com 14 Content © 2012, Tech Liminal

15. Dashboard to Database
Posts, Pages,
Media, Categories,
Tags, Comments,
Users, Options
11 tables in the WordPress
database.
www.techliminal.com 15 Content © 2012, Tech Liminal

16. Where do Themes Go?
wp-content/themes
www.techliminal.com 16 Content © 2012, Tech Liminal

17. Style.css
• Adds the theme information to your dashboard
• Defines the display of all the HTML elements output by the Templates.
style.css for twentyten theme
CSS definitions appear below
www.techliminal.com 17 Content © 2012, Tech Liminal

18. 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)
www.techliminal.com 18 Content © 2012, Tech Liminal

19. Example: 2011 Theme
www.techliminal.com 19 Content © 2012, Tech Liminal

20. Theme Hierarchy
http://codex.wordpress.org/Template_Hierarchy
www.techliminal.com 20 Content © 2012, Tech Liminal

21. 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
www.techliminal.com 21 Content © 2012, Tech Liminal

22. The Loop + HTML
Template Tags
http://codex.wordpress.org/The_Loop_in_Action
www.techliminal.com 22 Content © 2012, Tech Liminal

23. 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
www.techliminal.com 23 Content © 2012, Tech Liminal

24. 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
www.techliminal.com 24 Content © 2012, Tech Liminal

25. 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
http://codex.wordpress.org/Child_Themes
www.techliminal.com 25 Content © 2012, Tech Liminal

26. 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)
www.techliminal.com 26 Content © 2012, Tech Liminal

27. Lots More Topics:
• Debugging and Troubleshooting
• Actions and Filters
• Custom Post Types
• Search
• Sidebars and Widget Areas
• Widgets
• Theme Options
• ...
www.techliminal.com 27 Content © 2012, Tech Liminal

28. 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
www.techliminal.com 28 Content © 2012, Tech Liminal

29. 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
www.techliminal.com 29 Content © 2012, Tech Liminal

30. Resources
30

31. 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
www.techliminal.com 31 Content © 2012, Tech Liminal

32. 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.
www.techliminal.com 32 Content © 2012, Tech Liminal

33. 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
www.techliminal.com 33 Content © 2012, Tech Liminal

34. 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
www.techliminal.com 34 Content © 2012, Tech Liminal

35. Q&A
www.techliminal.com 35 Content © 2012, Tech Liminal