SlideShare a Scribd company logo
1 of 35
Download to read offline
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




         www.techliminal.com         3   Content © 2012, Tech Liminal
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
What kind of Sites?




    www.techliminal.com   5   Content © 2012, Tech Liminal
Marketing Sites




                                   Site by Exygy (exygy.com)




    www.techliminal.com   6   Content © 2012, Tech Liminal
Events & Online Catalogs




                          Site by Mister Machine




    www.techliminal.com                            7   Content © 2012, Tech Liminal
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
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
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
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 Defines 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 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
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
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
Where do Themes Go?




                              wp-content/themes




   www.techliminal.com   16    Content © 2012, Tech Liminal
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
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
Example: 2011 Theme




   www.techliminal.com   19   Content © 2012, Tech Liminal
Theme Hierarchy




                              http://codex.wordpress.org/Template_Hierarchy


   www.techliminal.com   20                                       Content © 2012, Tech Liminal
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
The Loop + HTML
                                     Template Tags




                              http://codex.wordpress.org/The_Loop_in_Action




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



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




www.techliminal.com    35   Content © 2012, Tech Liminal

More Related Content

What's hot

Modernizing Adobe Experience Manager (AEM)
Modernizing Adobe Experience Manager (AEM)Modernizing Adobe Experience Manager (AEM)
Modernizing Adobe Experience Manager (AEM)Gabriel Walt
 
AEM Best Practices for Component Development
AEM Best Practices for Component DevelopmentAEM Best Practices for Component Development
AEM Best Practices for Component DevelopmentGabriel Walt
 
Report from iron_mountain
Report from iron_mountainReport from iron_mountain
Report from iron_mountainSteph Cliche
 
Magento Functional Testing Framework a way to seriously write automated tests...
Magento Functional Testing Framework a way to seriously write automated tests...Magento Functional Testing Framework a way to seriously write automated tests...
Magento Functional Testing Framework a way to seriously write automated tests...Divante
 
HTML Semantic Elements
HTML Semantic ElementsHTML Semantic Elements
HTML Semantic ElementsReema
 
Bootstrap for Beginners
Bootstrap for BeginnersBootstrap for Beginners
Bootstrap for BeginnersD'arce Hess
 
An Introduction to the DOM
An Introduction to the DOMAn Introduction to the DOM
An Introduction to the DOMMindy McAdams
 
Billing System
Billing SystemBilling System
Billing Systemdrake kjm
 
Final Year Project of Online Food Ordering System
Final Year Project of Online Food Ordering SystemFinal Year Project of Online Food Ordering System
Final Year Project of Online Food Ordering SystemSidraShehbaz
 
Business Requirement Specification
Business Requirement SpecificationBusiness Requirement Specification
Business Requirement Specificationsuhasreddy1
 
коммерческое предложение по мобильным приложениям
коммерческое предложение по мобильным приложениямкоммерческое предложение по мобильным приложениям
коммерческое предложение по мобильным приложениямgeniiweb
 
Buyer Presentation
Buyer PresentationBuyer Presentation
Buyer Presentationrmmarti2
 
AEM (CQ) Dispatcher Caching Webinar 2013
AEM (CQ) Dispatcher Caching Webinar 2013AEM (CQ) Dispatcher Caching Webinar 2013
AEM (CQ) Dispatcher Caching Webinar 2013Andrew Khoury
 
Restaurant Kitchen Order Ticket Management System
Restaurant Kitchen Order Ticket Management SystemRestaurant Kitchen Order Ticket Management System
Restaurant Kitchen Order Ticket Management SystemSyamimRosli
 

What's hot (18)

Html5 semantics
Html5 semanticsHtml5 semantics
Html5 semantics
 
Modernizing Adobe Experience Manager (AEM)
Modernizing Adobe Experience Manager (AEM)Modernizing Adobe Experience Manager (AEM)
Modernizing Adobe Experience Manager (AEM)
 
Bootstrap.pptx
Bootstrap.pptxBootstrap.pptx
Bootstrap.pptx
 
AEM Best Practices for Component Development
AEM Best Practices for Component DevelopmentAEM Best Practices for Component Development
AEM Best Practices for Component Development
 
Validation controls ASP .NET
Validation controls ASP .NETValidation controls ASP .NET
Validation controls ASP .NET
 
Report from iron_mountain
Report from iron_mountainReport from iron_mountain
Report from iron_mountain
 
Magento Functional Testing Framework a way to seriously write automated tests...
Magento Functional Testing Framework a way to seriously write automated tests...Magento Functional Testing Framework a way to seriously write automated tests...
Magento Functional Testing Framework a way to seriously write automated tests...
 
HTML Semantic Elements
HTML Semantic ElementsHTML Semantic Elements
HTML Semantic Elements
 
Bootstrap for Beginners
Bootstrap for BeginnersBootstrap for Beginners
Bootstrap for Beginners
 
Content security policy
Content security policyContent security policy
Content security policy
 
An Introduction to the DOM
An Introduction to the DOMAn Introduction to the DOM
An Introduction to the DOM
 
Billing System
Billing SystemBilling System
Billing System
 
Final Year Project of Online Food Ordering System
Final Year Project of Online Food Ordering SystemFinal Year Project of Online Food Ordering System
Final Year Project of Online Food Ordering System
 
Business Requirement Specification
Business Requirement SpecificationBusiness Requirement Specification
Business Requirement Specification
 
коммерческое предложение по мобильным приложениям
коммерческое предложение по мобильным приложениямкоммерческое предложение по мобильным приложениям
коммерческое предложение по мобильным приложениям
 
Buyer Presentation
Buyer PresentationBuyer Presentation
Buyer Presentation
 
AEM (CQ) Dispatcher Caching Webinar 2013
AEM (CQ) Dispatcher Caching Webinar 2013AEM (CQ) Dispatcher Caching Webinar 2013
AEM (CQ) Dispatcher Caching Webinar 2013
 
Restaurant Kitchen Order Ticket Management System
Restaurant Kitchen Order Ticket Management SystemRestaurant Kitchen Order Ticket Management System
Restaurant Kitchen Order Ticket Management System
 

Similar to WordPress Theme Development Basics

Getting Started with Drupal and Acuqia
Getting Started with Drupal and AcuqiaGetting Started with Drupal and Acuqia
Getting Started with Drupal and AcuqiaAcquia
 
Just dev it presenation modified word press 101
Just dev it presenation   modified word press 101Just dev it presenation   modified word press 101
Just dev it presenation modified word press 101roguevoice
 
From WordPress With Love
From WordPress With LoveFrom WordPress With Love
From WordPress With LoveUp2 Technology
 
WordPress 3.x for the sake of your sanity
WordPress 3.x for the sake of your sanityWordPress 3.x for the sake of your sanity
WordPress 3.x for the sake of your sanityShelley Keith, MSIQ
 
2011 05 word-press-not-just-for-blogging-anymore
2011 05 word-press-not-just-for-blogging-anymore2011 05 word-press-not-just-for-blogging-anymore
2011 05 word-press-not-just-for-blogging-anymoreRudy Duke
 
Wordpress For Begineer
Wordpress For BegineerWordpress For Begineer
Wordpress For BegineerBinita Neupane
 
Business 2.0 with WordPress
Business 2.0 with WordPressBusiness 2.0 with WordPress
Business 2.0 with WordPressMario Peshev
 
WordPress as a CMS - Case Study of an Organizational Intranet
WordPress as a CMS - Case Study of an Organizational IntranetWordPress as a CMS - Case Study of an Organizational Intranet
WordPress as a CMS - Case Study of an Organizational IntranetTech Liminal
 
All Roads Lead to WordPress
All Roads Lead to WordPress All Roads Lead to WordPress
All Roads Lead to WordPress CMS2CMS
 
Microsoft WebMatrix Platform Overview
Microsoft WebMatrix Platform OverviewMicrosoft WebMatrix Platform Overview
Microsoft WebMatrix Platform OverviewSpiffy
 
Diwd 2011-111011223430-phpapp01
Diwd 2011-111011223430-phpapp01Diwd 2011-111011223430-phpapp01
Diwd 2011-111011223430-phpapp01alexkirmse
 
Kick start your career with WordPress
Kick start your career with WordPressKick start your career with WordPress
Kick start your career with WordPressJignasa Naik
 
How to create a WordPress Site
How to create a WordPress Site How to create a WordPress Site
How to create a WordPress Site MuhammadUsaid2
 
Lazy Coder Camp Edition 1
Lazy Coder Camp Edition 1Lazy Coder Camp Edition 1
Lazy Coder Camp Edition 1phpfactory
 
SharePoint 2013 Sneak Peek
SharePoint 2013 Sneak PeekSharePoint 2013 Sneak Peek
SharePoint 2013 Sneak PeekK.Mohamed Faizal
 

Similar to WordPress Theme Development Basics (20)

Wordpress podcamp2011
Wordpress podcamp2011Wordpress podcamp2011
Wordpress podcamp2011
 
Getting Started with Drupal and Acuqia
Getting Started with Drupal and AcuqiaGetting Started with Drupal and Acuqia
Getting Started with Drupal and Acuqia
 
Introduction to WordPress
Introduction to WordPressIntroduction to WordPress
Introduction to WordPress
 
WordPress 101
WordPress 101WordPress 101
WordPress 101
 
Just dev it presenation modified word press 101
Just dev it presenation   modified word press 101Just dev it presenation   modified word press 101
Just dev it presenation modified word press 101
 
From WordPress With Love
From WordPress With LoveFrom WordPress With Love
From WordPress With Love
 
WordPress 3.x for the sake of your sanity
WordPress 3.x for the sake of your sanityWordPress 3.x for the sake of your sanity
WordPress 3.x for the sake of your sanity
 
2011 05 word-press-not-just-for-blogging-anymore
2011 05 word-press-not-just-for-blogging-anymore2011 05 word-press-not-just-for-blogging-anymore
2011 05 word-press-not-just-for-blogging-anymore
 
Wordpress For Begineer
Wordpress For BegineerWordpress For Begineer
Wordpress For Begineer
 
Business 2.0 with WordPress
Business 2.0 with WordPressBusiness 2.0 with WordPress
Business 2.0 with WordPress
 
WordPress as a CMS - Case Study of an Organizational Intranet
WordPress as a CMS - Case Study of an Organizational IntranetWordPress as a CMS - Case Study of an Organizational Intranet
WordPress as a CMS - Case Study of an Organizational Intranet
 
All Roads Lead to WordPress
All Roads Lead to WordPress All Roads Lead to WordPress
All Roads Lead to WordPress
 
Microsoft WebMatrix Platform Overview
Microsoft WebMatrix Platform OverviewMicrosoft WebMatrix Platform Overview
Microsoft WebMatrix Platform Overview
 
Diwd 2011-111011223430-phpapp01
Diwd 2011-111011223430-phpapp01Diwd 2011-111011223430-phpapp01
Diwd 2011-111011223430-phpapp01
 
Kick start your career with WordPress
Kick start your career with WordPressKick start your career with WordPress
Kick start your career with WordPress
 
How to create a WordPress Site
How to create a WordPress Site How to create a WordPress Site
How to create a WordPress Site
 
Lazy Coder Camp Edition 1
Lazy Coder Camp Edition 1Lazy Coder Camp Edition 1
Lazy Coder Camp Edition 1
 
WebMatrix2
WebMatrix2WebMatrix2
WebMatrix2
 
Share point 2013 cop v4
Share point 2013 cop v4Share point 2013 cop v4
Share point 2013 cop v4
 
SharePoint 2013 Sneak Peek
SharePoint 2013 Sneak PeekSharePoint 2013 Sneak Peek
SharePoint 2013 Sneak Peek
 

More from Tech Liminal

WordPress and Business Intelligence
WordPress and Business IntelligenceWordPress and Business Intelligence
WordPress and Business IntelligenceTech Liminal
 
WordPress Custom Fields and Metaboxes
WordPress Custom Fields and MetaboxesWordPress Custom Fields and Metaboxes
WordPress Custom Fields and MetaboxesTech Liminal
 
WordPress In the Enterprise - East Bay WordPress Meetup
WordPress In the Enterprise - East Bay WordPress MeetupWordPress In the Enterprise - East Bay WordPress Meetup
WordPress In the Enterprise - East Bay WordPress MeetupTech Liminal
 
Blogging for Job Seekers
Blogging for Job SeekersBlogging for Job Seekers
Blogging for Job SeekersTech Liminal
 
WordPress for eCommerce - Dukapress, Cart66
WordPress for eCommerce - Dukapress, Cart66WordPress for eCommerce - Dukapress, Cart66
WordPress for eCommerce - Dukapress, Cart66Tech Liminal
 

More from Tech Liminal (6)

WordPress and Business Intelligence
WordPress and Business IntelligenceWordPress and Business Intelligence
WordPress and Business Intelligence
 
Web Hosting 101
Web Hosting 101Web Hosting 101
Web Hosting 101
 
WordPress Custom Fields and Metaboxes
WordPress Custom Fields and MetaboxesWordPress Custom Fields and Metaboxes
WordPress Custom Fields and Metaboxes
 
WordPress In the Enterprise - East Bay WordPress Meetup
WordPress In the Enterprise - East Bay WordPress MeetupWordPress In the Enterprise - East Bay WordPress Meetup
WordPress In the Enterprise - East Bay WordPress Meetup
 
Blogging for Job Seekers
Blogging for Job SeekersBlogging for Job Seekers
Blogging for Job Seekers
 
WordPress for eCommerce - Dukapress, Cart66
WordPress for eCommerce - Dukapress, Cart66WordPress for eCommerce - Dukapress, Cart66
WordPress for eCommerce - Dukapress, Cart66
 

WordPress Theme Development Basics

  • 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