WordPress Theme Development Basics
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

WordPress Theme Development Basics

on

  • 4,751 views

Learn the basics of building WordPress themes. This presentation is appropriate for people who are somewhat familiar with PHP and databases.

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

Statistics

Views

Total Views
4,751
Views on SlideShare
3,590
Embed Views
1,161

Actions

Likes
3
Downloads
215
Comments
2

14 Embeds 1,161

http://www.techiegyan.com 698
http://techliminal.com 148
http://www.testingbaires.com 100
http://beeffective.eu 93
http://testingbaires.com 85
http://santa-cruz-web-design.com 23
http://feeds.feedburner.com 4
http://us-w1.rockmelt.com 3
http://localhost 2
http://www.onlydoo.com 1
http://webcache.googleusercontent.com 1
http://translate.googleusercontent.com 1
https://si0.twimg.com 1
http://techiegyan.myhbtidays.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

WordPress Theme Development Basics Presentation Transcript

  • 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