Embed Size (px)
Citation preview
Building a WordPress Theme
Not too difficult
A little harder
#*&%@#!
why build a theme?
• better understanding of how WordPress works
• self-sufficiency to fix or change theme aspects
• empowerment ( yourself, a career )
• move beyond the WordPress dashboard
• world domination…results may vary
World 1-1Templates
template terminology
• template files - files that control how your site content is displayed
• template tags - WordPress functions that grab content from the database ( get_header, get_sidebar() )
• page templates - type of template that is only applied to pages in your theme
• files to display your data - WordPress template files (php)
• files for theme information and styles - style.css
• files to add/remove functionality (functions.php)
• other files used can include javascript, images, svg, sass/less and more!
theme files
index.phpstyle.css
Required Theme Files
create a folder, place these two files and you’ll soon have your theme
style.css
• file header - provides details about theme in the form of comments
• can house css styles for your site
style.css/* Theme Name: Twenty Sixteen
Theme URI: https://wordpress.org/themes/twentysixteen/
Author: the WordPress team Author URI: https://wordpress.org/
Description: Twenty Sixteen is a modernized take on an ever-popular WordPress layout — the horizontal masthead with an optional right sidebar that works perfectly for blogs and websites.
Version: 1.1
License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, red, white, yellow, dark, light, one-column, two-columns, right-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background
Text Domain: twentysixteen */
Dashboard - Theme Details
style.css
/* Theme Name: Twenty Sixteen */
// begin theme styles
index.php
https://gist.github.com/philiparthurmoore/b1f47c15d3eb2c573924
<!DOCTYPE html> <html> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php wp_title( '|', true, 'right' ); ?></title> <link rel="stylesheet" href="<?php echo esc_url( get_stylesheet_uri() ); ?>" type="text/css" /> <?php wp_head(); ?> </head> <body> <h1><?php bloginfo( 'name' ); ?></h1> <h2><?php bloginfo( 'description' ); ?></h2>
index.php
https://gist.github.com/philiparthurmoore/b1f47c15d3eb2c573924
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h3><?php the_title(); ?></h3>
<?php the_content(); ?>
<?php endwhile; ?> <?php if ( get_next_posts_link() ) { next_posts_link(); } ?> <?php if ( get_previous_posts_link() ) { previous_posts_link(); } ?> <?php else: ?> <p>No posts found. :(</p> <?php endif; ?>
index.php
https://gist.github.com/philiparthurmoore/b1f47c15d3eb2c573924
<?php wp_footer(); ?> </body> </html>
most themes include these files
header.php index.php sidebar.php footer.php
header.php
<!DOCTYPE html> <html> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php wp_title( '|', true, 'right' ); ?></title> <link rel="stylesheet" href="<?php echo esc_url( get_stylesheet_uri() ); ?>" type="text/css" /> <?php wp_head(); ?> </head> <body> <h1><?php bloginfo( 'name' ); ?></h1> <h2><?php bloginfo( 'description' ); ?></h2>
footer.php
<?php wp_footer(); ?> </body> </html>
sidebar.php
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?> <div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary"> <?php dynamic_sidebar( 'sidebar-1' ); ?> </div><!-- #primary-sidebar --> <?php endif; ?>
working index.php
<?php get_header() ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h3><?php the_title(); ?></h3>
<?php the_content(); ?>
<?php endwhile; ?> <?php if ( get_next_posts_link() ) { next_posts_link(); } ?> <?php if ( get_previous_posts_link() ) { previous_posts_link(); } ?> <?php else: ?> <p>No posts found. :(</p> <?php endif; ?>
<?php get_sidebar() ?> <?php get_footer() ?>
page reference
content
header.php
sidebar.php
footer.php
the loop
• used to display posts, page content, comments, custom post types, custom fields
• when you read about certain functions that list only working in the loop, this is where it goes
• https://codex.wordpress.org/The_Loop
Blog Archive
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><a href=“<?php echo get_permalink()”><?php the_title(); ?></a></h2> <?php the_post_thumbnail(); ?>
<?php the_excerpt(); ?> <?php endwhile; else: ?>
<?php _e('Sorry, no posts matched your criteria.'); ?>
<?php endif; ?>
Individual Post
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1> <?php the_content(); ?>
<?php endwhile; else: ?>
<?php _e('Sorry, no pages matched your criteria.'); ?>
<?php endif; ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1> <?php the_content(); ?>
<?php endwhile; else: ?>
<?php _e('Sorry, no pages matched your criteria.'); ?>
<?php endif; ?>
Template Tags
World 2-1
template tags
• a piece of php code that tells WordPress “do” or “get” something
• they separate the theme into smaller, more understandable, sections.
• some tags can only be used in specific areas
• values can be passed through tags to display specific content
working index.php
<?php get_header() ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_title(‘<h3>’, ‘</h3>’); ?>
<?php the_content(); ?>
<?php endwhile; ?> <?php if ( get_next_posts_link() ) { next_posts_link(); } ?> <?php if ( get_previous_posts_link() ) { previous_posts_link(); } ?> <?php else: ?> <p>No posts found. :(</p> <?php endif; ?>
<?php get_sidebar() ?> <?php get_footer() ?>
General
collect them all: https://codex.wordpress.org/Template_Tags
get_header() get_footer() get_sidebar()
Author
wp_list_authors() the_author() the_author_link()
Bookmark
wp_list_bookmarks() get_bookmark()
Category Comment
Link
the_permalink() home_url() site_url()
Post
the_content() the_excerpt() the_title()
Post Thumbnail
the_post_thumbnail() has_post_thumbnail()
Navigation
wp_nav_menu()
template tag categories
comment_author() comment_date() get_avatar()
the_category() the_tags() the_terms()
Conditionals
conditionals
if ( is_user_logged_in() ) { echo 'Welcome, registered user!'; } else { echo 'Welcome, visitor!'; }
https://developer.wordpress.org/themes/basics/conditional-tags/
if ( is_front_page() ) { // do something }
Template Hierarchy
World 3-1
• Query strings (data from page links) determine which template or set of templates to display page content
• Templates are selected in the order determined by the template hierarchy
• If a template file cannot be matched, index.php will be used
query string - http://example.com/
template flow
front-page.php home.php page.php index.php
query string - http://example.com/blog/category/luigi/
template flow
category-luigi.php category-6.php category.php
archive.php index.php
template hierarchy
http://wphierarchy.com/ - Rami Abraham, Michelle Schulp
expanded theme
header.php index.php sidebar.php footer.php
404.php single.php page.php
page templates
• only apply to pages
• used to change the look and feel of a page
• can be applied to a single page, page section or class of pages
• custom pages with template names give users control by enabling template switching
page template flow
$custom.php
page-$slug.php page-id.php page.php
page query
Custom Page Template
/** * Template Name: Two Columns Template * * Description: A page template that provides a key component of WordPress as * a CMS by meeting the need for a carefully crafted introductory page. * * @package WordPress * @subpackage Twenty_Fifteen * @since Twenty Fifteen 1.0 */
Theme Folder Structure
World 4-1
folder setup
• main theme template files are in the root directory
• no required folders in themes at this time
• page-templates folder, languages folder are recognized by default
archive.php
footer.php
readme.txt
functions.php
rtl.css screenshot.png
page.php
sidebar-content-bottom.php
searchform.php sidebar.php
single.php style.css
image.php
Twenty Sixteen Theme Structure404.php comments.php
header.php
index.php
search.php
css genericons inc js languages template-parts
Functions and Hooks
World 5-1
functions file
• adds/removes features and functionality to your theme
• acts like a plugin
• automatically loaded for both admin and external pages
• “put it in your functions file” location
• enqueuing stylesheets and scripts
• enable theme features, including: sidebars, post formats, custom headers/backgrounds
• enable options for the theme customizer
• define functions for your theme to use
• and more
functions.phpif ( ! function_exists( 'themename_setup' ) ) :
function themename_setup() {
register_nav_menus( array( 'primary' => __( 'Primary Menu', 'theme_name' ), 'secondary' => __( 'Secondary Menu', 'theme_name' ) ) );
add_theme_support( 'post-thumbnails' ); }
endif; add_action( 'after_setup_theme', 'themename_setup' );
header.php<!DOCTYPE html> <html> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php wp_title( '|', true, 'right' ); ?></title> <link rel="stylesheet" href="<?php echo esc_url( get_stylesheet_uri() ); ?>" type="text/css" /> <?php wp_head(); ?> </head> <body> <?php wp_nav_menu( array('menu' => 'Primary Menu' )); ?> <h1><?php bloginfo( 'name' ); ?></h1> <h2><?php bloginfo( 'description' ); ?></h2>
header.php
<!DOCTYPE html> <html> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php wp_title( '|', true, 'right' ); ?></title> <link rel="stylesheet" href="<?php echo esc_url( get_stylesheet_uri() ); ?>" type="text/css" /> <?php wp_head(); ?> </head> <body> <h1><?php bloginfo( 'name' ); ?></h1> <h2><?php bloginfo( 'description' ); ?></h2>
header.php
<!DOCTYPE html> <html> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php wp_title( '|', true, 'right' ); ?></title> <link rel="stylesheet" href="<?php echo esc_url( get_stylesheet_uri() ); ?>" type="text/css" /> <?php wp_head(); ?> </head> <body> <h1><?php bloginfo( 'name' ); ?></h1> <h2><?php bloginfo( 'description' ); ?></h2>
functions.phpfunction twentysixteen_scripts() {
// Load our main stylesheet. // hooks into wp_head(); wp_enqueue_style( 'twentysixteen-style', get_stylesheet_uri() );
// hooks into wp_footer(); wp_enqueue_script( 'twentysixteen-script', get_template_directory_uri() . '/js/functions.js',
array( 'jquery' ), ‘1.1.0’, true );
} add_action( 'wp_enqueue_scripts', 'twentysixteen_scripts' );
startutorial.com
“First, solve the problem. Then, write the code.”
Justin Tucker@certainstrings certainstrings.com
resources• developer.wordpress.org/themes/basics • developer.wordpress.org • wordpress.tv • teamtreehouse.com • pippinsplugins.com • tommcfarlin.com
slides: bit.ly/wpaz-theme-building
Developer at fansided.com
