Arizona WP - Building 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() )
• 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
*/

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
<?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>
<?php wp_head(); ?>
</head>
<body>

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>
<?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
<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 _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 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 Structure
404.php comments.php
header.php
index.php
search.php
css genericons inc js languages
template-
parts

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

header.php
<!DOCTYPE html>
<html>
<head>
<?php wp_head(); ?>
</head>
<body>
<?php wp_nav_menu( array('menu' => 'Primary Menu' )); ?>

functions.php
function 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

Arizona WP - Building a WordPress Theme

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (10)

Similar to Arizona WP - Building a WordPress Theme

Similar to Arizona WP - Building a WordPress Theme (20)

Recently uploaded

Recently uploaded (20)

Arizona WP - Building a WordPress Theme