Downloaded 26 times
Uploaded byEdmund Turbin
Theming in WordPress - Where do I Start?
The document provides an introduction to theming in WordPress, covering key concepts such as theme anatomy, starter themes, child themes, and theme frameworks. It explains the components and functionality of each aspect, including templates, styles, and customization methods. The summary emphasizes the benefits of using starter and child themes while suggesting that building a custom theme is also a viable option.
More Related Content
Similar to Theming in WordPress - Where do I Start?
Theming in WordPress - Where do I Start?
- 1. Theming in WordPress WhereDo I Start? Edmund Turbin, Solutions Engineer @spicecadet
- 2. 1. Introduction 2. ThemeAnatomy 3. Starter Themes 4. Child Themes 5. Theme Frameworks 6. Summary Agenda
- 3.
- 4. Anatomy of aTheme Stylesheet • controls visual design/layout • comments for theme meta info
- 5. Anatomy of aTheme Templates •Control how content is displayed •HTML and PHP
- 6. Anatomy of aTheme Functions •Optional - customize what the theme does •Need to understand WP coding standards
- 7. Anatomy of aTheme
- 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.
- 10. Templates • Control displaylogic • 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. functions.php • Acts asa 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.
- 13. What is aStarter Theme? • A foundation to start customizing • Leverage existing code • Incorporates best practices • Created to be re-used and customized
- 14. When Should IUse a Starter Theme? • Your first theme • Functionality, layouts, patterns exist already
- 15. Starter Theme BestPractices • Don’t update your theme • New functionality or changes my break it https://themeshaper.com/2013/10/11/dont-update-your-theme/
- 16. CREATING A SITEWITH CHILD THEMES
- 17. When to Usea Child Theme • A theme exists and can be extended • Speed up development time Child Tmp CSS Func Parent Tmp CSS Func
- 18. Benefits of aChild 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. How to Createa 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. How to Createa Child Theme /* Theme Name: Where Do I Start Child Theme Description: Description of your Child Theme Author: Your name here Template: folder */
- 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. Things to Knowabout 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. Things to Knowabout 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.
- 25. Pluggable Functions if (! function_exists( ‘my_function' ) ): function my_function() { // Your code goes here } endif;
- 26. Function Priority • Functionpriority defaults to ’10’ • Child functions run after parent functions via priority
- 27. Example: Overriding Functionswith Function Priority add_action( 'init', ‘my_function’ , 15 ); function my_function() { // Your code goes here. }
- 28. Removing Functions • Completelyremoves 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. Example: Removing Functionswith remove_action() add_action( 'wp_loaded', 'remove_parent' ); function remove_parent() { remove_action( 'init', 'parent_function' ); }
- 30. Can it beEasier? • There’s a plugin for that! https://wordpress.org/plugins/one-click-child-theme/
- 31.
- 32. What is aTheme Framework? • Code library with tools for commonly used tasks • Parent theme allows for updates • Support different development approaches • Many existing themes already built
- 33. Theme Framework Benefits •Maintain features and optimizations across themes • Many built by commercial theme developers • Commonly used • Support and updates • Development ongoing
- 34.
- 35.
- 36. Solid Foundation Starter Themes,Child Themes and Theme Frameworks
- 37. Theme Frameworks Well known,supported and reusable
- 38. You can alwaysbuild your own theme from scratch. No harm in using an existing theme and customizing.
- 39. Let’s chat @the Happiness Bar :) Halle G Foyer @spicecadet edmund.turbin@wpengine.com
- 40.
- 41. Learn More The ThemeHandbook 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/