The Way to Theme Enlightenment

The Way to
Theme Enlightenment
Amanda Giles
@AmandaGilesNH
http://amandagiles.com/enlightenment

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

Beginning WordPress Development
http://www.usgamesinc.com/tarotblog/

Beginning WordPress Development
http://www.soulgeniusbranding.com/blog/2015/10/19/trading-in-my-know-it-all-for-a-beginners-mind

Child Themes
If 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

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 company
Theme Author: Jane Doe
Author URI: http://janedoes.com
Template: twentysixteen
*/

Child Themes
3. 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' )
);
}

Template Hierarchy
How 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!

Template Hierarchy
https://developer.wordpress.org/themes/basics/template-hierarchy/
https://wphierarchy.com/

Template Hierarchy Example
1. category-$slug.php Variable Template
2. category-$id.php Variable Template
3. category.php Secondary Template
4. archive.php Primary Template
5. paged.php Secondary Template
6. index.php Primary Template

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' )

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/

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());

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

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">

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" >

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;

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'
);

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();

Make complex queries using tax_query:
$args = array(
'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/

Make complex queries using meta_query:
$args = array(
'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/

Editable Regions
An 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.

Menus
Users 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() )

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

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

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.

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).

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');

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' );

• 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

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' )
);
}

Using WordPress as a CMS
CMS = Content Management System
WordPress is already a CMS containing these
Post Types:
Posts Media Items
Pages Menus
Revisions
WordPress can be extended beyond those to
include new Custom Post Types such as:
Events Portfolio Items
Products Resources
Forms Team Members

Taxonomies
Taxonomies are a way of categorizing content.
WordPress is already a CMS containing these
Taxonomies:
Categories
Tags
WordPress can be extended beyond those to
include new Custom Taxonomies such as:
Event Category
Portfolio Medium
Team
Genre

Custom Fields
Custom Fields are a way to track more specific
attributes of content.
Examples of Custom Fields include:
Event Date
Price
Location
Position

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

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

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.

Shortcodes
Shortcodes 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

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!)

If I was a Time Lord…
We would also cover:
• Transients API
• Customizer
• Customizing the Admin
• Creating Dashboard Widgets
• Debugging
• Developer Tools

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

Resources
Codex: https://codex.wordpress.org/
Theme Handbook:
https://developer.wordpress.org/themes/getting
-started/
Code Reference:
https://developer.wordpress.org/reference/

The Way to Theme Enlightenment

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.

The Way to Theme Enlightenment

More Related Content

What's hot (20)

Similar to The Way to Theme Enlightenment (20)

Recently uploaded (20)

The Way to Theme Enlightenment