the way to theme enlightenment
TRANSCRIPT
![Page 1: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/1.jpg)
The Way to Theme Enlightenment
Amanda Giles
@AmandaGilesNH
http://amandagiles.com/enlightenment
![Page 2: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/2.jpg)
Who am I?• Programmer since 1985 (Basic & Logo!)
• Made my first website in 1994
• Professionally coding for 20 years
• Independent Consultant since 2006
• Working with WordPress since 2009
• Started the Seacoast NH WordPress Meetup in 2011
• Co-Created Spark Development WordPress Development Agency
![Page 3: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/3.jpg)
Beginning WordPress Development
http://www.usgamesinc.com/tarotblog/
![Page 4: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/4.jpg)
Beginning WordPress Development
http://www.soulgeniusbranding.com/blog/2015/10/19/trading-in-my-know-it-all-for-a-beginners-mind
![Page 5: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/5.jpg)
Child ThemesIf you’re editing an existing theme,
USE A CHILD THEME!
The existing theme becomes your “parent” theme and both themes are installed on your site.
A child theme separates your changes from the underlying theme, allowing for upgrades of the parent theme or support from the theme maker.
WordPress looks to the child theme first for files it needs. If not found, it then looks in the parent.
https://codex.wordpress.org/Child_Themes
![Page 6: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/6.jpg)
Child Themes
1. Make a child theme by adding a new folder under wp-content/themes
2. Create style.css with informational header:
/* Theme Name: John’s New Theme Theme URI: http://janedoes.com/johns-theme/ Description: Child theme for John’s companyTheme Author: Jane Doe Author URI: http://janedoes.com Template: twentysixteen */
![Page 7: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/7.jpg)
Child Themes3. Create functions.php and include parent theme’s CSS file:
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
//Include parent theme style wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
//Include child theme style (dependent on parent style) wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ) ); }
![Page 8: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/8.jpg)
Template HierarchyHow WordPress determines which template file (in your theme) to use to display a particular page on your website.
Called a “hierarchy” because WordPress looks in a specific order (from most specific to least specific) to determine which file to use.
Important to understand so you don’t repeat yourself unnecessarily in theme files.
Your entire theme could consist of just 2 files: style.css + index.php
But that’s not usually the case!
![Page 9: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/9.jpg)
Template Hierarchy
https://developer.wordpress.org/themes/basics/template-hierarchy/ https://wphierarchy.com/
![Page 10: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/10.jpg)
Template Hierarchy Example
1. category-$slug.php Variable Template2. category-$id.php Variable Template3. category.php Secondary Template4. archive.php Primary Template5. paged.php Secondary Template6. index.php Primary Template
![Page 11: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/11.jpg)
Useful Theme Functions
get_header ( string $name = null )
get_sidebar (string $name = null )
get_footer (string $name = null )
get_template_part ( string $slug, string $name = null )
get_bloginfo ( string $show = '', string $filter = 'raw' )
![Page 12: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/12.jpg)
Conditional Tags
Examples include:
• is_front_page()• is_admin()• is_single()• is_page() / is_page(43) / is_page(‘about’)• Is_page_template()• is_category() / is_category(7) / is_category(‘news’)• is_post_type_archive() • Is_tax()
https://developer.wordpress.org/themes/basics/conditional-tags/
![Page 13: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/13.jpg)
Content Functions
Examples include:
the_title() get_the_title()
the_permalink() get_the_permalink()
the_date() get_the_date()
the_post_thumbnail() get_the_post_thumbnail()
the_excerpt() get_the_excerpt()
the_content() get_the_content()
$content = apply_filters('the_content', get_the_content());
![Page 14: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/14.jpg)
Functions.php
If you have a functions.php file in your active theme directory, WordPress will automatically load this file when viewing both the front and back-end of your website.
Within this file, you can write your own functions and call WordPress core or plugin functions.
Function names should be unique to avoid conflicts.
https://codex.wordpress.org/Functions_File_Explained
![Page 15: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/15.jpg)
CSS Classes – body_class()
Most WordPress themes use body_class() on the body tag and this gives you a very helpful set of CSS classes.
<body <?php body_class(); ?>>
<body class="page page-id-89 page-template-default">
<body class="archive category category-news category-1 logged-in admin-bar no-customize-support">
<body class="single single-post postid-247 single-format-standard">
<body class="single single-event postid-3448">
![Page 16: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/16.jpg)
CSS Classes – post_class()
Many WordPress themes use post_class() on the post <article> tag (single and archive pages) and this gives you a very helpful set of CSS classes.
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<article id="post-247" class="post-247 post type-post status-publish format-standard hentry category-news">
<article id="post-7537" class="post-7537 featured-stories type-featured-stories status-publish hentry" >
![Page 17: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/17.jpg)
The Loop & WP_Query()
“The Loop” is at the heart of all WordPress pages.
if ( have_posts() ) :
// Start the Loop. while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content', get_post_format() );
endwhile; // End the loop.
endif;
![Page 18: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/18.jpg)
The Loop & WP_Query()
Use WP_Query() to write your own queries to pull content from your WordPress site.
Define an array of your query parameters to pass to WP_Query():
<?php //Get 20 Books in alphabetical order by title$args = array( 'post_type' => 'book', 'post_per_page' => 20, 'orderby' => 'title', 'order' => 'ASC');
![Page 19: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/19.jpg)
The Loop & WP_Query()
Then pass that array of query arguments to WP_Query():
$query = new WP_Query( $args );
if ( $query->have_posts() ) : while ( $query->have_posts() ) :
$query->the_post();
get_template_part( 'template-parts/content', 'book' );
endwhile;endif;
//Restore the $post global to the current post in // the main query – VERY IMPORTANT!wp_reset_postdata();
![Page 20: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/20.jpg)
The Loop & WP_Query()Make complex queries using tax_query:$args = array( 'post_type' => 'book', 'tax_query' => array( 'relation' => 'AND', array( 'taxonomy' => 'genre', 'field' => 'slug', 'operator' => 'IN', 'terms' => 'romance' array( 'taxonomy' => 'genre', 'field' => 'slug', 'terms' => 'featured' ) );
https://developer.wordpress.org/reference/classes/wp_query/
![Page 21: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/21.jpg)
The Loop & WP_Query()
Make complex queries using meta_query:$args = array( 'post_type' => 'book', 'tax_query' => array( 'relation' => ‘OR', array( 'key' => 'rating', 'value' => '3', 'compare' => '>=', 'type' => 'numeric', array( 'key' => 'recommended', 'value' => 'Y', 'compare' => '=', ) );
https://developer.wordpress.org/reference/classes/wp_query/
![Page 22: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/22.jpg)
Editable RegionsAn editable region is an area of your site layout that the user can access and control its content.
For example:• Menus • Widgets
A good theme creates editable regions instead of hard-coding content into the
theme’s PHP files.
![Page 23: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/23.jpg)
MenusUsers can create as many menus as they like, but the way for a theme to know which one to use is through Menu Locations.
Themes can define multiple Menu Locations using:• register_nav_menu ( $location, $description );• register_nav_menus ( $locations );
Menus associated with those locations can be displayed using:• has_nav_menu ( $location )• wp_nav_menu ( array $args = array() )
![Page 24: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/24.jpg)
Widgets are an indispensable tool which allow users to add secondary content to their site.
Themes can define multiple Sidebars using:• register_sidebar( $args )• register_sidebars( $number, $args )
Widgets associated with those Sidebars can be displayed using:• is_active_sidebar( $index )• dynamic_sidebar( $index )
Sidebars & Widgets
![Page 25: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/25.jpg)
Hooks
A hook is an "event" within WordPress code which allows for additional code to be run when it occurs.
One or more functions can be associated with a hook name and they will all run when the hook is triggered.
https://codex.wordpress.org/Plugin_API/Hooks
![Page 26: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/26.jpg)
Why Use Hooks?
Hooks are placed within WordPress core, plugins, and themes to allow customization by developers without direct edits of the code.
Hooks are the proper way to alter the default behavior of code which is not yours to edit.
![Page 27: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/27.jpg)
Types of Hooks
Action hooks allow you to run extra code at a certain point within the code.Examples in WP core include initialization (‘init’), before main query is run (‘pre_get_posts’), header (‘wp_head’) or footer (‘wp_footer’) of a page/post.
Filter hooks allow you to alter data, content, parameters. A filter hook passes information to filter function and returns it altered (or not).Examples in WP code include displaying content, page/post title, pre-saving content (admin).
![Page 28: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/28.jpg)
Action Hook Example
/*** In WordPress Core, hook is triggered ***/function wp_head() { /** * Print scripts or data in the * head tag on the front end. * * @since 1.5.0 */
do_action( 'wp_head' );}
/*** In your code…your function is run ***/add_action('wp_head', 'show_my_fonts_css');
![Page 29: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/29.jpg)
Filter Hook Example
/*** In WordPress Core, hook is triggered ***/function the_content( ... ) {
$content = get_the_content( $more_link_text, $strip_teaser );
$content = apply_filters( 'the_content', $content ); ... echo $content;}
/*** In your code…your function is run ***/add_filter('the_content', 'replace_trump' );
![Page 30: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/30.jpg)
• WordPress has a built-in system to allow you to put your style (CSS) and script (JS) files into a queue to be loaded into the header or footer of your site.
• Plugins needing the same script can utilize a single version rather than each loading their own version.
• This helps prevent conflicts and improves site performance (fewer scripts loaded).
• When enqueueing styles and scripts you can even declare dependencies.
Enqueueing
![Page 31: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/31.jpg)
Enqueueing Theme Styles
Within child theme, create functions.php and include parent theme’s CSS file:
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
//Include parent theme style wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
//Include child theme style (dependent on parent style) wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ) ); }
![Page 32: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/32.jpg)
Using WordPress as a CMS
CMS = Content Management System
WordPress is already a CMS containing these Post Types:
Posts Media ItemsPages MenusRevisions
WordPress can be extended beyond those to include new Custom Post Types such as:
Events Portfolio ItemsProducts ResourcesForms Team Members
![Page 33: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/33.jpg)
Taxonomies
Taxonomies are a way of categorizing content.
WordPress is already a CMS containing these Taxonomies:
CategoriesTags
WordPress can be extended beyond those to include new Custom Taxonomies such as:
Event CategoryPortfolio MediumTeamGenre
![Page 34: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/34.jpg)
Custom Fields
Custom Fields are a way to track more specific attributes of content.
Examples of Custom Fields include:Event DatePriceLocationPosition
![Page 35: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/35.jpg)
Extend WordPress Structure
• Create new Custom Post Types• Create new Taxonomies• Create new Custom Fields
Example:
Event Custom Post Type
Event Category Taxonomy
Event Date Custom Field
Event Fee Custom Field
![Page 36: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/36.jpg)
Tools to Extend WordPress
Custom Post Types & Taxonomy plugins:• Custom Post Type UI• MasterPress• Pods
Advanced Meta / Custom Field plugins:• Advanced Custom Fields• Custom Field Suite• CMB2• Meta Box
![Page 37: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/37.jpg)
Extend WordPress Yourself
• Use register_post_type() to create Custom Post Types
• Use register_taxonomy () to create Custom Taxonomies
• Use add_meta_boxes hook to add custom fields to edit screens and get_post_meta() to display those fields in your templates.
Check WordPress Code Reference or the Codex for help on writing those functions or the GenerateWP website to facilitate writing them.
![Page 38: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/38.jpg)
ShortcodesShortcodes are a placeholder mechanism whereby strings placed in content get replaced in real-time with other content.
WordPress itself includes shortcodes such as [gallery] and [embed] as do many plugins.
Themes can include their own shortcodes to help users display content.
https://codex.wordpress.org/Shortcode_API
![Page 39: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/39.jpg)
Shortcode Example/* * Email * * Given an email address, it encrypts the mailto * and the text of the email and returns a proper * email link which can't be picked up on bots */function mytheme_email_encode( $atts, $content ){ return '<a href="' . antispambot("mailto:".$content) . '">' . antispambot($content) . '</a>';}
add_shortcode( 'email', 'mytheme_email_encode' );
NOTE: Shortcode functions must RETURN content (not echo!)
![Page 40: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/40.jpg)
If I was a Time Lord…We would also cover:• Transients API• Customizer• Customizing the Admin• Creating Dashboard Widgets• Debugging• Developer Tools
![Page 41: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/41.jpg)
Up Your Game!• Read Developer Blogs & subscribe to those you
like or follow on Twitter• Subscribe to The Whip newsletter by WPMU• Subscribe to updates on Make WordPress Core• Subscribe to Post Status (WordPress newsletter –
paid service)• Set aside time each day or week to read
WordPress news or research code• Use an IDE (Integrated Development Environment)
so you can go right into a core or plugin function to look for hooks or check functionality
![Page 42: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/42.jpg)
ResourcesCodex: https://codex.wordpress.org/
Theme Handbook: https://developer.wordpress.org/themes/getting-started/
Code Reference: https://developer.wordpress.org/reference/
![Page 43: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/43.jpg)
![Page 44: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/44.jpg)
![Page 45: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/45.jpg)
![Page 46: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/46.jpg)
![Page 47: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/47.jpg)
![Page 48: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/48.jpg)
& Keep Learning!
![Page 49: The Way to Theme Enlightenment](https://reader035.vdocuments.net/reader035/viewer/2022081605/58f0eb8e1a28ab06188b4617/html5/thumbnails/49.jpg)
Thank You
Amanda Giles
@AmandaGilesNH
www.Amanda Giles.com
Slides: http://amandagiles.com/enlightenment
Background designs are the property of Geetesh Bajaj. Used with permission. © Copyright, Geetesh Bajaj. All Rights Reserved.