WordPress Theme Development Basics


Published on

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

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

WordPress Theme Development Basics

  1. Technology Hotspot & Salon Basic WordPress Themes for Developers March 26, 2012 (SF WordPress Meetup) Anca Mosoiu, Tech Liminal268 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&Awww.techliminal.com 35 Content © 2012, Tech Liminal