WordPress Theming 101

“..a collection of files that work together to
produce a graphical interface with an underlying
unifying design for a weblog. These files are called
template files.
A Theme modifies the way the site is displayed,
without modifying the underlying software.”
Ref: https://codex.wordpress.org/Using_Themes

Provides front end styling for page areas &
content
• header, footer and logo areas
• fonts & colors
• widget and sidebar locations
• page layouts (or templates)
• styles for blog posts and blog archives
• additional stylistic details and custom post types

1,000’s of free themes at wordpress.org/themes
all human vetted and all safe (no malware).
Paid themes:
• Themeforest
• Elegant Themes
• StudioPress
There are many more paid sites – we vouch for these 3

You can have a unique theme built for your site.
We know a theme is a collection of files.
Which files do what?
How do they work together to “theme” your site?

In a default installation all themes reside in the
folder: /wp-content/themes/<unique_theme_name>
However, this folder path can be changed at a
site level. Use functions in theme code to find
the correct folder.
get_template_directory_uri() get_template_directory()
get_stylesheet_directory_uri() get_stylesheet_directory()
get_theme_root_uri() get_theme_root()
get_stylesheet_uri()
get_theme_roots()
Ref: https://codex.wordpress.org/Determining_Plugin_and_Content_Directories#Themes

Ref: https://developer.wordpress.org/themes/basics/template-hierarchy/
Main types of theme template files are:
• .php = PHP language files used to build
template structure and output content
(required)
• .css = Style sheet files used to apply style to
template structure and content (required)
• .js = JavaScript files used for real-time user
interface (UI) interaction & manipulation and
much more (optional)

A web server converts/renders PHP files to a
static HTML page which is sent to the browser
along with any corresponding CSS and other
asset files such as images.
Static HTML pages rendered from PHP files
cannot interact with the user in the browser no
matter how much they wiggle, move or click
their mouse pointer at things on the page.

JavaScript runs in the browser and detects
“events” such as window resize, mouse
overs/movement/clicks, field
selections/changes/input etc.
JavaScript functions are bound to browser
events allowing the HTML and CSS of the static
page to now be changed dynamically in
response to that event.

Most important template file.
Your theme must have an index.php
This is the main blog article archive/page and top
of the hierarchy (last to render)
If there are no other php template files, index.php
will be used to render the current web page.

2nd most important theme file.
Your theme must have a style.css
This file contains the theme name, version,
description and license type that is displayed on
the Appearance > Themes dashboard panel.

Other primary templates are:
• archive.php
The archive template is used when visitors request posts by
category, author, or date.
• single.php
The single post template is used when a visitor requests a single
post.
• page.php
The page template is used when visitors request individual
pages, which are a built-in template.

• singular.php
The singular template is used for posts when single.php is not
found, or for pages when page.php are not found.
• home.php
The home page template is the front page by default. If you do
not set WordPress to use a static front page, this template is
used to show latest posts.
• front-page.php
The front page template is always used as the site front page if it
exists, regardless of what settings on Admin > Settings > Reading.

• comments.php
The comments template.
• 404.php
The 404 template is used when WordPress cannot find a post,
page, or other content that matches the visitor’s request.
• search.php
The search results template is used to display a visitor’s search
results.

Needs to be in the root directory of your theme.
/wp-content/themes/<unique_theme_name>/style.css
WordPress uses the header comment section of a
style.css to display information about the theme
in the Appearance > Themes dashboard panel.

These header comments in style.css are required.
There are more you can use.
/*
Theme Name: Twenty Sixteen
Author: the WordPress Team
Description: Twenty Sixteen is a modernised take on an ever-
popular WordPress layout
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentysixteen
*/
Ref: https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/

There is no official required
theme folder structure.
Here’s an example based on
Twenty Sixteen.
Primary template files are
located in the root of your
theme folder.
Assets are in a separate sub
folder.
assets (dir)
- css (dir)
- images (dir)
- js (dir)
template-parts (dir)
- footer (dir)
- header (dir)
- navigation (dir)
- page (dir)
- post (dir)
404.php
archive.php
footer.php
front-page.php
functions.php
header.php
index.php
page.php
README.txt
rtl.css
screenshot.png
single.php
style.css

Template tags are used within themes to retrieve
content from your database.
They help you to avoid hard coding content into
template files.
A template tag is broken up into three parts:
• A PHP code tag
• A WordPress function
• Optional parameters
Ref: https://developer.wordpress.org/themes/basics/template-tags/

Printing the header.php file using get_header():
<?php get_header(); ?>
Printing the blog site title (Settings > General):
<?php bloginfo(‘name’); ?>
Other template tags:
the_content() the_excerpt()
next_post() previous_post()

The Loop is the default mechanism WordPress
uses for outputting posts through a theme’s
template files.
The Loop extracts the data for each post from the
WordPress database and inserts the appropriate
information in place of each template tag. Any
HTML or PHP code in The Loop will be processed
for each post.
Ref: https://developer.wordpress.org/themes/basics/the-loop/

if ( have_posts() ) :
while ( have_posts() ) :
the_post();
the_content();
endwhile;
else :
_e( 'Sorry, no posts matched your criteria.',
'textdomain' );
endif;

The functions.php file is where you add unique
features to your WordPress theme.
It can be used to hook into the core functions of
WordPress to make your theme more modular,
extensible, and functional.
Each theme has its own functions file, but only
code in the active theme’s functions.php is
actually run. If your theme already has a functions
file, you can add code to it.
Ref: https://developer.wordpress.org/themes/basics/theme-functions/

if ( ! function_exists( 'myfirsttheme_setup' ) ) :
/**
* Sets up theme defaults and registers support for various WordPress features.
*/
function myfirsttheme_setup() {
/**
* Make theme available for translation.
* Translations can be placed in the /languages/ directory.
*/
load_theme_textdomain( 'myfirsttheme', get_template_directory() . '/languages' );
}
endif; // myfirsttheme_setup
add_action( 'after_setup_theme', 'myfirsttheme_setup' );
Ref: https://developer.wordpress.org/themes/basics/theme-functions/

You may want to create additional style sheet or
JavaScript files to enhance your theme.
The proper way to add scripts and styles to your
theme is to enqueue them in the functions.php
file.
You do not add them manually to the header.php
file as you would with an HTML page.
Ref: https://developer.wordpress.org/themes/basics/including-css-javascript

Function:
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
Parameters:
• $handle is simply the name of the stylesheet.
• $src is where it is located. The rest of the parameters are optional.
• $deps refers to whether or not this stylesheet is dependent on another
stylesheet. If this is set, this stylesheet will not be loaded unless its dependent
stylesheet is loaded first.
• $ver sets the version number.
• $media specify type of media to load, such as ‘all’, ‘screen’, or ‘print’
Basic function use:
wp_enqueue_style( 'style', get_stylesheet_uri() );

Function:
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
Parameters:
• $handle is simply the name of the script.
• $src is where it is located. The rest of the parameters are optional.
• $deps is an array that can handle any script that your new script depends on,
such as jQuery.
• $ver sets the version number.
• $in_footer is a boolean parameter (true/false) that allows you to place your
scripts in the footer of your HTML document rather then in the header
Basic function use:
wp_enqueue_script( script', get_template_directory_uri() );

Styles and scripts are usually loaded on an action
hook. E.g.
/**
* Proper way to enqueue scripts and styles
*/
function wpdocs_theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() .
'/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

Can be used in your template files to alter the
display of content depending on the conditions
that the current page matches.
Display a different greeting for logged in/out users.
if ( is_user_logged_in() ):
echo 'Welcome, registered user!';
else:
echo 'Welcome, visitor!';
endif;
Ref: https://developer.wordpress.org/themes/basics/conditional-tags/

Developing your theme, so it can easily be
translated into other languages.
To make a string translatable you have to wrap the
original strings in a set of special functions that
use your uniquely defined text domain.
The text domain is a unique identifier, which
makes sure WordPress can distinguish between all
loaded translations.
Ref: https://developer.wordpress.org/themes/functionality/internationalization/

Rather than use English only output:
echo 'Your city is $city.‘
Run it through the __() PHP gettext library for
translation using the my-theme text domain:
printf(
__( 'Your city is %s.', 'my-theme' ),
$city
);

A child theme allows you to change small aspects
of your site’s appearance yet still preserve your
theme’s look and functionality.
Parent Theme
A parent theme is a complete theme which
includes all of the required WordPress template
files and assets for the theme to work
Ref: https://developer.wordpress.org/themes/advanced-topics/child-themes/

Inherits the look and feel of the parent theme and
all of its functions, but can be used to make
modifications to any part of the theme.
In this way, customizations are kept separate from
the parent theme’s files.
Using a child theme lets you upgrade/override the
parent theme without affecting the customizations
you’ve made to your site.

Example:
You may have bought a premium theme and
created a child theme to tweak a few styles and
pages.
A major bug is found in the parent theme and
fixed by the author.
An update is available in the dashboard.

Example continued…
You update the parent successfully.
Your changes in the child theme are not deleted
and still override the newly updated parent
theme.
Had you changed the parent theme, your changes
would have been lost with the new update.

WordPress theme frameworks are intended to be
used as parent themes to aid the development of
a child theme.
They contain all the basic structures and
functionalities you would need to create a theme
but lack the styling and completeness you would
expect to find in a working theme for a website.
Ref: https://codex.wordpress.org/Theme_Frameworks

As a parent theme, the framework can be updated
to add new features and fix issues.
Customizations to the child theme, hence the
actual website, remain separate and unchanged,
inheriting the new features and receiving
framework issue fixes.
Developers like using frameworks for consistency
across sites and access to a larger community of
other skilled framework developers.

A popular commercial framework is Genesis.
Other frameworks include:
• Headway (drag & drop)
• Divi (drag & drop)
• Themify
• Beans
• Unyson

Consider theme security as you add functionality.
• Don’t trust any data. Validate all input from
users, 3rd party APIs and the database and
sanitize (escape) data before use or output.
• Use WordPress API functions first. Core
WordPress functions provide functionality of
validating and sanitizing data.
• Keep your theme up to date. Technology
evolves and bugs get found and fixed over time.
Ref: https://developer.wordpress.org/themes/theme-security/

A theme must meet certain requirements to be
included in the WordPress.org theme repository.
Adhering to these requirements is best practice for
theme development even if you don’t intend to
submit to the repository at WordPress.org
Accessibility, Code Quality, Use of Core Features,
Documentation, Language, Licensing, etc…
Ref: https://make.wordpress.org/themes/handbook/review/required/

Themes are reviewed by the Theme Review Team.
Before uploading, your theme must adhere to
• Theme Review Guidelines
• Testing With Sample Data
• Theme Check Plugin
Read the actual review process the team uses.
Ref: https://developer.wordpress.org/themes/release/submitting-your-theme-to-wordpress-org/

The most important thing about designing and
developing a theme is that you have fun doing it!

[Cover/Background] marktimemedia.com
[9] marktimemedia.com
[10] marktimemedia.com
[43] imgur.com
[Back Cover] zeropointdevelopment.com

 20+ years in IT: Dev & SysOps
 WordPress Developer since 2008
 Plugins, APIs, Security & Systems Integrations
 Organiser WPSyd & WordCamp Sydney
zeropointdevelopment.com
@DeveloperWil
♥ Pizza & Craft Beer

WordPress Theming 101

Related slideshows

More Related Content

WordPress Theming 101