Get started with building your first theme. We will cover the necessary files to get started, key functions to know, as well as some other solutions to jump start your development.
5. 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
7. 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
8. • 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
10. style.css
• file header - provides details about theme in the form of
comments
• can house css styles for your site
11. 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`
*/
24. • 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
25. Blog Archive
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_post_thumbnail(); ?>
<?php the_excerpt(); ?>
<?php endwhile; else: ?>
<?php _e('Sorry, no posts matched your criteria.'); ?>
<?php endif; ?>
26. 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; ?>
27. <?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; ?>
29. 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
35. • 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
40. 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
42. 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
*/
44. 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
47. 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
48. • 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
54. 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
56. 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
57. 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
59. 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
60. 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
63. 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