49
The Way to Theme Enlightenment Amanda Giles @AmandaGilesNH http://amandagiles.com/ enlightenment
| Date post: | 14-Apr-2017 |
| Category: |
Internet |
| Upload: | amanda-giles |
| View: | 638 times |
| Download: | 1 times |
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 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
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 */
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' ) ); }
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!
Template Hierarchy
https://developer.wordpress.org/themes/basics/template-hierarchy/ https://wphierarchy.com/
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
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;
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');
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();
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/
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/
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.
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() )
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 ItemsPages MenusRevisions
WordPress can be extended beyond those to include new Custom Post Types such as:
Events Portfolio ItemsProducts ResourcesForms Team Members
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
Custom Fields
Custom Fields are a way to track more specific attributes of content.
Examples of Custom Fields include:Event DatePriceLocationPosition
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.
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
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
ResourcesCodex: https://codex.wordpress.org/
Theme Handbook: https://developer.wordpress.org/themes/getting-started/
Code Reference: https://developer.wordpress.org/reference/
& Keep Learning!
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.
