To build a WordPress Theme: Wordcamp Denmark 2014

1,136 views

Published on

My slides from a talk about building custom themes for WordPress, and how themes fit into the WordPress universe in relation to plugins. I also mentioned the drawbacks of bloated sites with big feature-rich themes and plugins that take on the role of themes in relation to theming.

Published in: Internet, Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,136
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • full-service web bureau
    awesome jobs
    come work with us
    learn a crazy amount
  • 5 years
  • Concept
    Technically - files, code
  • weblog
  • Examples:
    Presentation: Positioning of elements - where are the widgets? How an element is displayed. pagination - next link, or a page numbers. Menu structure. Infinite scroll?
    Skin: Color, typography, mood, whitespace.
  • In a bit: How this fits into the wordpress architecture
  • Template Hierarchy
  • You look bored
  • Both can set up new post types.
    Both can call external libraries.
    Both can call and include css and js files
    Both can set custom image sizes
  • Copy and paste all kinds of stuff into functions.php
    Mixture of business logic and presentation.
  • Often find this in purchased themes. All kinds of features are built into themes… portfolio post types, meta data
  • Theme that is responsible for the skin and presentation
    Mix of 3rd party and custom plugins
    - without extra stylesheets etc.
    - most suitable for pro sites with high traffic
    Takes a lot of time and skill
  • Good outcome, most typical for devs
    Custom theme, some 3rd party plugins
    Takes time
  • Typical site built with “feature-packed” themes
    Built into theme (post types - portfolio, employees, social media & SEO, backend builder tools)
    Large (or large number of) 3rd party plugins
    Fastest to build
    Problematic
  • “feature-packed” themes & very many plugins that interfere with skin
  • Is it the theme, a plugin or wordpress? Or two?
    Everything is in everything. Which to fix?
    Lazy with heavy php in themes - doesn’t get updated - e.g. external libraries (FB API)
  • Plugins add css files, js files
  • - Is it new functionality, that would work as a plugin? (or can already get?) - e.g. tool to find nearest store
    - Less friction
    - If little functionality is in the theme, functions file won’t be that long
  • But most of all...
  • To build a WordPress Theme: Wordcamp Denmark 2014

    1. 1. To build a WordPress theme James Bonham
    2. 2. WordPress Copenhagen
    3. 3. 324 members 13 meetups 20-45 attendees
    4. 4. Thank you! Surftown, One.com, Peytz & Co, IT-Kompetence Founders House, KraftWerket All speakers & attendees Annette, Jes, Lisa, Patrick, Martin, Nicolas, Thor, Flyver
    5. 5. We’re growing! WordPress Developer Frontend Developer, Digital Designer, Analysis Consultant, Drupal Architect, Drupal Developers
    6. 6. To build a WordPress theme James Bonham
    7. 7. Theme types ● Theme o Child theme o Framework as a drop-in ● Theme Framework o Child theme
    8. 8. Theme types ● Theme o Child theme o Framework as a drop-in ● Theme Framework o Child theme
    9. 9. Theme Basics
    10. 10. What is a theme? (conceptually) Fundamentally, the WordPress Theme system is a way to "skin" your weblog. Yet, it is more than just a "skin." Skinning your site implies that only the design is changed. “ “WordPress Codex
    11. 11. What is a theme? (conceptually) WordPress Themes can provide much more control over the look and presentation of the material on your website. “ “ WordPress Codex
    12. 12. What is a theme? (conceptually) Presentation - organisation of information (HTML, js) Skin - look & feel across devices (CSS, js)
    13. 13. What is a theme? (technically) ● It’s a folder with HTML, PHP, CSS and js
    14. 14. <<< Specific Generic >>>
    15. 15. What is a theme? (technically) functions.php templates, etc. Browser requests... includes... Hooks, functions, HTML HTML
    16. 16. What is a theme? (technically) Browser| | | | | | | | | | | | | | | | | | | | | | | | Hooks PLUGIN S THEM E
    17. 17. Before you fall asleep...
    18. 18. Plugins and Themes The theme and plugin architecture is very loose. Browser| | | | | | | | | | | | | | | | | | | | | | | | Hooks PLUGIN S THEM E
    19. 19. Loose architecture The Good Freedom Fast to learn and build The Bad Often a weak separation of presentation and functionality Bloated themes
    20. 20. Remember the definition? Presentation - organisation of information (HTML, js) Skin - look & feel across devices (CSS, js)
    21. 21. ...often it’s actually like this... Functionality - new post types, integrations, tools (PHP) Presentation - organisation of information (HTML, js) Skin - look & feel across devices (CSS, js)
    22. 22. Custom theme, managed plugins Functionality Presentation Skin Theme Plugins
    23. 23. Custom theme, various plugins Functionality Presentation Skin Theme Plugins
    24. 24. Feature-heavy theme & +++plugins Functionality Presentation Skin Theme Plugins
    25. 25. Why bloat kinda sucks
    26. 26. Maintenance is harder ● Cause and effect ● OMG! Functions.php had 10,000 lines ● Can’t remember what’s there ● Can’t just switch off features without breaking stuff ● Imagine having 50 sites like this
    27. 27. Upgrades are scarier ● More tricky to find problems ● Dependencies get messy ● Built-in theme features get left as is, while plugins get updated
    28. 28. Performance can suffer ● Too many HTTP requests ● Multiple loading of the same or similar scripts ● Bloated css, due to a lot of overwriting
    29. 29. Others don’t get it ● Harder for others to understand what there is and where it is ● More training & documentation needed
    30. 30. What to do?
    31. 31. In the theme ● Think about the architecture ● Break functions.php up o theme features, hooks, widgets, admin ● Check performance & HTTP requests on plugin activation ● Compress or unhook little css and js files
    32. 32. Also... ● Write plugins so it’s always possible to o override the presentation o unhook css
    33. 33. 01 function myplugin_review_template() { 02 // Target only the single review page 03 if ( !is_single() || get_post_type() != 'review' ) { 04 return; 05 } 06 07 // If it’s in the theme, return it, else use the plugin version 08 if ( $file = locate_template( array( 'single-review.php' ) ) ) { 09 return $file; 10 } else { 11 return plugin_dir_path( __FILE__ ) . '/templates/single-review.php'; 12 } 13 } 14 add_filter( 'template_include', 'myplugin_review_template', 1 );
    34. 34. <?php wp_deregister_style( 'evil-styles' ); ?> <?php wp_deregister_script( 'evil-script' ); ?>
    35. 35. Think first. Keep it clean.
    36. 36. … and have fun
    37. 37. Photo Credits (all CC) John Ward - https://www.flickr.com/photos/spadgy/313250749/ Thor Kristiansen (uploaded to the meetup group) Ed Shipl - https://www.flickr.com/photos/eschipul/6224599604/ slworking2 - https://www.flickr.com/photos/slworking/6173188780 Maciej Lewandowski - https://www.flickr.com/photos/macieklew/454570443 @jamesbonham jamesbonham.com Remember the jobs @Peytz ...and see you at the happiness bar!

    ×