Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Theming in WordPress - Where do I Start?

2,121 views

Published on

Slides from my presentation at WordCampEU 2016 in Vienna, Austria on getting started with theming in WordPress.

Published in: Internet
  • Be the first to comment

Theming in WordPress - Where do I Start?

  1. 1. Theming in WordPress Where Do I Start? Edmund Turbin, Solutions Engineer @spicecadet
  2. 2. 1. Introduction 2. Theme Anatomy 3. Starter Themes 4. Child Themes 5. Theme Frameworks 6. Summary Agenda
  3. 3. THEME ANATOMY
  4. 4. Anatomy of a Theme Stylesheet • controls visual design/layout • comments for theme meta info
  5. 5. Anatomy of a Theme Templates •Control how content is displayed •HTML and PHP
  6. 6. Anatomy of a Theme Functions •Optional - customize what the theme does •Need to understand WP coding standards
  7. 7. Anatomy of a Theme
  8. 8. Theme Information /* Theme Name: Where do I start? Theme URI: Your theme's URL Author: Your name or WordPress.org's username Author URI: Your web address Description: This is the minimum for creating a custom theme. Version: 1.0 Tags: one-column, custom-colors, custom-header, blog, education */
  9. 9. Theme Information
  10. 10. Templates • Control display logic • Generate the structure of your HTML • Can be created for pages, posts, CPTs, etc. • Can include partials https://developer.wordpress.org/themes/basics/template-hierarchy/ https://developer.wordpress.org/themes/template-files-section/page-template-files/page-templates/
  11. 11. functions.php • Acts as a plugin • Load scripts and styles • Enable theme features • sidebars, nav menus, post formats, etc • Define functions used across several templates • Customize your theme’s behavior https://codex.wordpress.org/Functions_File_Explained
  12. 12. WORKING WITH STARTER THEMES
  13. 13. What is a Starter Theme? • A foundation to start customizing • Leverage existing code • Incorporates best practices • Created to be re-used and customized
  14. 14. When Should I Use a Starter Theme? • Your first theme • Functionality, layouts, patterns exist already
  15. 15. Starter Theme Best Practices • Don’t update your theme • New functionality or changes my break it https://themeshaper.com/2013/10/11/dont-update-your-theme/
  16. 16. CREATING A SITE WITH CHILD THEMES
  17. 17. When to Use a Child Theme • A theme exists and can be extended • Speed up development time Child Tmp CSS Func Parent Tmp CSS Func
  18. 18. Benefits of a Child Theme • Inherits parent functionality • Extend styles, functions and templates • Can be updated • Don’t have to modify parent code Child Tmp CSS Func Parent Tmp CSS Func
  19. 19. How to Create a Child Theme • Create a new directory in wp-themes • Create a style.css file • Change the Template: directory • Add templates, functions, styles Child Tmp CSS Func Parent Tmp CSS Func
  20. 20. How to Create a Child Theme /*   Theme Name: Where Do I Start Child Theme   Description: Description of your Child Theme   Author: Your name here   Template: folder   */
  21. 21. Add Stylesheet add_action( ‘wp_enqueue_scripts', 'enqueue_styles' ); function enqueue_styles() { wp_enqueue_style( ‘theme-css', get_template_directory_uri() . '/style.css' ); }
  22. 22. Things to Know about Child Templates • Parent templates inherited • Child templates override parent templates • Can be specific to a page • page-{slug}.php Child Tmp CSS Func Parent Tmp CSS Func
  23. 23. Things to Know about Child Functions • Parent functions will run automatically • Child functions load before parent functions • Parent functions can be overridden Child Tmp CSS Func Parent Tmp CSS Func
  24. 24. OVERRIDING PARENT FUNCTIONS
  25. 25. Pluggable Functions if ( ! function_exists( ‘my_function' ) ): function my_function() { // Your code goes here } endif;
  26. 26. Function Priority • Function priority defaults to ’10’ • Child functions run after parent functions via priority
  27. 27. Example: Overriding Functions with Function Priority add_action( 'init', ‘my_function’ , 15 ); function my_function() { // Your code goes here. }
  28. 28. Removing Functions • Completely removes the function • remove_action() • Called after the initial function http://code.tutsplus.com/tutorials/a-guide-to-overriding-parent-theme-functions-in-your-child-theme--cms-22623 function()
  29. 29. Example: Removing Functions with remove_action() add_action( 'wp_loaded', 'remove_parent' ); function remove_parent() { remove_action( 'init', 'parent_function' ); }
  30. 30. Can it be Easier? • There’s a plugin for that! https://wordpress.org/plugins/one-click-child-theme/
  31. 31. UNDERSTANDING THEME FRAMEWORKS
  32. 32. What is a Theme Framework? • Code library with tools for commonly used tasks • Parent theme allows for updates • Support different development approaches • Many existing themes already built
  33. 33. Theme Framework Benefits • Maintain features and optimizations across themes • Many built by commercial theme developers • Commonly used • Support and updates • Development ongoing
  34. 34. Theme Framework Examples http://athemes.com/collections/best-wordpress-theme-frameworks/
  35. 35. SUMMARY
  36. 36. Solid Foundation Starter Themes, Child Themes and Theme Frameworks
  37. 37. Theme Frameworks Well known, supported and reusable
  38. 38. You can always build your own theme from scratch. No harm in using an existing theme and customizing.
  39. 39. Let’s chat @ the Happiness Bar :) Halle G Foyer @spicecadet edmund.turbin@wpengine.com
  40. 40. Thank you! @spicecadet edmund.turbin@wpengine.com
  41. 41. Learn More The Theme Handbook https://developer.wordpress.org/themes/ Starter Themes http://www.designbombs.com/8-best-wordpress-starter- themes-frameworks-new-wp-developers/ Theme Frameworks http://athemes.com/collections/best-wordpress-theme- frameworks/

×