To build a WordPress Theme: Wordcamp Denmark 2014
•Download as PPTX, PDF•
2 likes•1,450 views
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.
Report
Share
To build a WordPress Theme: Wordcamp Denmark 2014
- 1. To build a WordPress theme James Bonham
- 3. 324 members 13 meetups 20-45 attendees
- 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. We’re growing! WordPress Developer Frontend Developer, Digital Designer, Analysis Consultant, Drupal Architect, Drupal Developers
- 6. To build a WordPress theme James Bonham
- 7. Theme types ● Theme o Child theme o Framework as a drop-in ● Theme Framework o Child theme
- 8. Theme types ● Theme o Child theme o Framework as a drop-in ● Theme Framework o Child theme
- 9. Theme Basics
- 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. 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. What is a theme? (conceptually) Presentation - organisation of information (HTML, js) Skin - look & feel across devices (CSS, js)
- 13. What is a theme? (technically) ● It’s a folder with HTML, PHP, CSS and js
- 16. <<< Specific Generic >>>
- 17. What is a theme? (technically) functions.php templates, etc. Browser requests... includes... Hooks, functions, HTML HTML
- 18. What is a theme? (technically) Browser| | | | | | | | | | | | | | | | | | | | | | | | Hooks PLUGIN S THEM E
- 19. Before you fall asleep...
- 20. Plugins and Themes The theme and plugin architecture is very loose. Browser| | | | | | | | | | | | | | | | | | | | | | | | Hooks PLUGIN S THEM E
- 21. Loose architecture The Good Freedom Fast to learn and build The Bad Often a weak separation of presentation and functionality Bloated themes
- 22. Remember the definition? Presentation - organisation of information (HTML, js) Skin - look & feel across devices (CSS, js)
- 23. ...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)
- 24. Custom theme, managed plugins Functionality Presentation Skin Theme Plugins
- 25. Custom theme, various plugins Functionality Presentation Skin Theme Plugins
- 26. Feature-heavy theme & +++plugins Functionality Presentation Skin Theme Plugins
- 28. Why bloat kinda sucks
- 29. 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
- 30. Upgrades are scarier ● More tricky to find problems ● Dependencies get messy ● Built-in theme features get left as is, while plugins get updated
- 31. Performance can suffer ● Too many HTTP requests ● Multiple loading of the same or similar scripts ● Bloated css, due to a lot of overwriting
- 32. Others don’t get it ● Harder for others to understand what there is and where it is ● More training & documentation needed
- 33. What to do?
- 34. 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
- 35. Also... ● Write plugins so it’s always possible to o override the presentation o unhook css
- 36. 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 );
- 37. <?php wp_deregister_style( 'evil-styles' ); ?> <?php wp_deregister_script( 'evil-script' ); ?>
- 38. Think first. Keep it clean.
- 39. … and have fun
- 40. 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!
Editor's Notes
- 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...