![Page 1: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/1.jpg)
To build a WordPress theme
James Bonham
![Page 2: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/2.jpg)
WordPress Copenhagen
![Page 3: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/3.jpg)
324 members13 meetups
20-45 attendees
![Page 4: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/4.jpg)
Thank you!Surftown, One.com, Peytz & Co, IT-Kompetence
Founders House, KraftWerket
All speakers & attendeesAnnette, Jes, Lisa, Patrick, Martin, Nicolas, Thor,
Flyver
![Page 5: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/5.jpg)
We’re growing!WordPress Developer
Frontend Developer, Digital Designer,
Analysis Consultant, Drupal Architect, Drupal Developers
![Page 6: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/6.jpg)
To build a WordPress theme
James Bonham
![Page 7: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/7.jpg)
Theme types
● Themeo Child themeo Framework as a drop-in
● Theme Frameworko Child theme
![Page 8: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/8.jpg)
Theme types
● Themeo Child themeo Framework as a drop-in
● Theme Frameworko Child theme
![Page 9: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/9.jpg)
Theme Basics
![Page 10: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/10.jpg)
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
![Page 11: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/11.jpg)
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
![Page 12: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/12.jpg)
What is a theme? (conceptually)
Presentation- organisation of information (HTML, js)
Skin- look & feel across devices (CSS, js)
![Page 13: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/13.jpg)
What is a theme? (technically)
● It’s a folder with HTML, PHP, CSS and js
![Page 14: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/14.jpg)
![Page 15: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/15.jpg)
![Page 16: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/16.jpg)
<<< Specific Generic >>>
![Page 17: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/17.jpg)
What is a theme? (technically)
functions.php templates,
etc.
Browser
requests... includes...
Hooks, functions,HTML
HTML
![Page 18: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/18.jpg)
What is a theme? (technically)
Browser| | | | | | | | | | | | | | | | | | | | | | | |
Hooks
PLUGINS
THEME
![Page 19: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/19.jpg)
Before you fall asleep...
![Page 20: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/20.jpg)
Plugins and Themes
The theme and plugin architecture is very loose.
Browser| | | | | | | | | | | | | | | | | | | | | | | |
Hooks
PLUGINS
THEME
![Page 21: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/21.jpg)
Loose architecture
The GoodFreedomFast to learn and build
The BadOften a weak separation of presentation and functionality
Bloated themes
![Page 22: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/22.jpg)
Remember the definition?
Presentation- organisation of information (HTML, js)
Skin- look & feel across devices (CSS, js)
![Page 23: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/23.jpg)
...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)
![Page 24: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/24.jpg)
Custom theme, managed plugins
Functionality Presentation Skin
Theme
Plugins
![Page 25: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/25.jpg)
Custom theme, various plugins
Functionality Presentation Skin
Theme
Plugins
![Page 26: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/26.jpg)
Feature-heavy theme & +++plugins
Functionality Presentation Skin
Theme
Plugins
![Page 27: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/27.jpg)
![Page 28: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/28.jpg)
Why bloat kinda sucks
![Page 29: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/29.jpg)
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
![Page 30: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/30.jpg)
Upgrades are scarier
● More tricky to find problems
● Dependencies get messy
● Built-in theme features get left as is, while plugins get updated
![Page 31: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/31.jpg)
Performance can suffer
● Too many HTTP requests
● Multiple loading of the same or similar scripts
● Bloated css, due to a lot of overwriting
![Page 32: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/32.jpg)
Others don’t get it
● Harder for others to understand what there is and where it is
● More training & documentation needed
![Page 33: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/33.jpg)
What to do?
![Page 34: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/34.jpg)
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
![Page 35: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/35.jpg)
Also...
● Write plugins so it’s always possible too override the presentationo unhook css
![Page 36: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/36.jpg)
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 );
![Page 37: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/37.jpg)
<?php wp_deregister_style( 'evil-styles' ); ?>
<?php wp_deregister_script( 'evil-script' ); ?>
![Page 38: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/38.jpg)
Think first. Keep it clean.
![Page 39: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/39.jpg)
… and have fun
![Page 40: To build a WordPress Theme: Wordcamp Denmark 2014](https://reader034.vdocuments.site/reader034/viewer/2022052619/5558c5edd8b42a235c8b47aa/html5/thumbnails/40.jpg)
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!