to build a wordpress theme: wordcamp denmark 2014
DESCRIPTION
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.TRANSCRIPT
To build a WordPress theme
James Bonham
WordPress Copenhagen
324 members13 meetups
20-45 attendees
Thank you!Surftown, One.com, Peytz & Co, IT-Kompetence
Founders House, KraftWerket
All speakers & attendeesAnnette, Jes, Lisa, Patrick, Martin, Nicolas, Thor,
Flyver
We’re growing!WordPress Developer
Frontend Developer, Digital Designer,
Analysis Consultant, Drupal Architect, Drupal Developers
To build a WordPress theme
James Bonham
Theme types
● Themeo Child themeo Framework as a drop-in
● Theme Frameworko Child theme
Theme types
● Themeo Child themeo Framework as a drop-in
● Theme Frameworko Child theme
Theme Basics
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
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
What is a theme? (conceptually)
Presentation- organisation of information (HTML, js)
Skin- look & feel across devices (CSS, js)
What is a theme? (technically)
● It’s a folder with HTML, PHP, CSS and js
<<< Specific Generic >>>
What is a theme? (technically)
functions.php templates,
etc.
Browser
requests... includes...
Hooks, functions,HTML
HTML
What is a theme? (technically)
Browser| | | | | | | | | | | | | | | | | | | | | | | |
Hooks
PLUGINS
THEME
Before you fall asleep...
Plugins and Themes
The theme and plugin architecture is very loose.
Browser| | | | | | | | | | | | | | | | | | | | | | | |
Hooks
PLUGINS
THEME
Loose architecture
The GoodFreedomFast to learn and build
The BadOften a weak separation of presentation and functionality
Bloated themes
Remember the definition?
Presentation- organisation of information (HTML, js)
Skin- look & feel across devices (CSS, js)
...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)
Custom theme, managed plugins
Functionality Presentation Skin
Theme
Plugins
Custom theme, various plugins
Functionality Presentation Skin
Theme
Plugins
Feature-heavy theme & +++plugins
Functionality Presentation Skin
Theme
Plugins
Why bloat kinda sucks
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
Upgrades are scarier
● More tricky to find problems
● Dependencies get messy
● Built-in theme features get left as is, while plugins get updated
Performance can suffer
● Too many HTTP requests
● Multiple loading of the same or similar scripts
● Bloated css, due to a lot of overwriting
Others don’t get it
● Harder for others to understand what there is and where it is
● More training & documentation needed
What to do?
In the theme
● Think about the architecture
● Break functions.php upo theme features, hooks, widgets, admin
● Check performance & HTTP requests on plugin activation
● Compress or unhook little css and js files
Also...
● Write plugins so it’s always possible too override the presentationo unhook css
01 function myplugin_review_template() {02 // Target only the single review page03 if ( !is_single() || get_post_type() != 'review' ) {04 return;05 }0607 // If it’s in the theme, return it, else use the plugin version08 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 );
<?php wp_deregister_style( 'evil-styles' ); ?>
<?php wp_deregister_script( 'evil-script' ); ?>
Think first. Keep it clean.
… and have fun
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/6173188780Maciej Lewandowski - https://www.flickr.com/photos/macieklew/454570443
@jamesbonham jamesbonham.com
Remember the jobs @Peytz...and see you at the happiness bar!