Builing a WordPress Theme

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

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(‘someparameter’))
• 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 Fifteen
Theme URI: https://wordpress.org/themes/twentyfifteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our 2015 default theme is clean, blog-focused, and designed for clarity. Twenty Fifteen's simple,
straightforward typography is readable on a wide variety of screen sizes, and suitable for multiple languages.
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, pink, purple, white, yellow, dark, light, two-columns, left-sidebar,featured-images,
microformats, post-formats
Text Domain: twentyfifteen`
*/

style.css
/*
Theme Name: Twenty Fifteen
*/
// 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
<?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
<?php wp_footer(); ?>
</body>
</html>

most themes include these files
header.php index.php sidebar.php footer.php

header.php
<!DOCTYPE html>
<html>
<head>
<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
</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>
<?php endif; ?>

working index.php
<?php get_header() ?>
<?php endwhile; ?>
<?php else: ?>
<?php endif; ?>
<?php get_sidebar() ?>
<?php get_footer() ?>

page reference
content
header.php
sidebar.php
footer.php

• 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 the_post_thumbnail(); ?>
<?php the_excerpt(); ?>
<?php endwhile; else: ?>
<?php _e('Sorry, no posts matched your criteria.'); ?>
<?php endif; ?>

Individual Post
<?php _e('Sorry, no pages matched your criteria.'); ?>
<?php endif; ?>

<?php _e('Sorry, no pages matched your criteria.'); ?>
<?php endif; ?>

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 the_title(‘<h3>’, ‘</h3>’); ?>
<?php endwhile; ?>
<?php else: ?>
<?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
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
}

• 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 auto
recognized

archive.php
comments.php
image.php
content.php
index.php page.php
header.php
sidebar.php
screenshot.png search.php
single.php style.css
footer.php
css inc images languages
page-
templates
Twenty Fifteen Theme Structure
404.php author-bio.php
content-*.php
functions.php
rtl.css

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.php
if ( ! 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' );

functions.php
function twentyfifteen_scripts() {
// Load our main stylesheet.
// hooks into wp_head();
wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );
// hooks into wp_footer();
wp_enqueue_script( 'twentyfifteen-script', get_template_directory_uri() . '/js/functions.js',
array( 'jquery' ), '20150330', true );
}
add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );

<head>
<?php wp_head(); ?>
</head>
</body>
</html>
// header.php
// footer.php

power of hooks
• two types: actions and filters
• part of the plugin api
• gives the ability to customize, extend, and enhance
WordPress
• used heavily throughout WordPress, plugins and themes

filters
http://codex.wordpress.org/Plugin_API/Filter_Reference

filter hook info
• Use when you want to manipulate data coming from the
database to the browser, or vice versa
• Change the content by adjusting what is outputted
• Filtered content is always returned
http://codex.wordpress.org/Plugin_API/Filter_Reference

filter hooks
add_filter( 'the_content', 'theme_add_call_number' );
function theme_add_call_number ( $content ) {
if ( is_page() ) {
$content .= '<div>Call for more info! - 555-555-5555</div>';
}
return $content;
}
// functions.php

actions
http://codex.wordpress.org/Plugin_API/Action_Reference

action hook info
• when queries are ran, actions (hooks in general) are
executed during the WordPress page creation life cycle.
• we can hook into when these are ran and run our own
functions
http://codex.wordpress.org/Plugin_API/Action_Reference

action hooks
<body>
<?php do_action ( ‘themename_before_header' ); ?>
add_action( 'themename_before_header', ‘themename_page_alert’, 5 );
function themename_page_alert() {
if ( is_front_page() ) {
echo ‘<div>Alert! We have an important message!</div>’;
}
}
// header.php
// functions.php

Local Development Crash Course
Warp Level

MAMP
or Wamp, Xampp, DesktopServer, etc

Using MAMP
• Download and install the software 
- https://www.mamp.info/en/downloads/
• Setup your document root  
- where your sites will be stored
• Start the Mamp Server, create database
• Install WordPress, connect database
• Profit $$$$
https://codex.wordpress.org/Installing_WordPress_Locally_on_Your_Mac_With_MAMP

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/wp-theme-building

Builing a WordPress Theme

More Related Content

What's hot

Viewers also liked

Similar to Builing a WordPress Theme

Recently uploaded

Builing a WordPress Theme