Basics of Theme Development

BASICS OF THEME DEVELOPMENT WORDCAMP ORLANDO 2019

@AdamSoucie | #WCORL ABOUT ME ▸ Freelance WordPress developer through
Impossibly Creative & Build My WP Theme ▸ WordPress Orlando organizer since 2014 ▸ Accessibility advocate BASICS OF THEME DEVELOPMENT

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT OUR FOCUS ▸
What is a theme? ▸ What should a theme include? ▸ Requirements ▸ Nice-to-haves ▸ How do we get started? ▸ How can I make this repeatable?

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT WHAT IS A
THEME? ▸ “…takes the content and data stored by WordPress and displays it in the browser.” ▸ Design & Layout ▸ Limited additional functionality ▸ For core functionality, build a custom plugin

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT WHAT SHOULD A
THEME INCLUDE? ▸ CSS styles ▸ Templates for content types ▸ JavaScript for interactivity ▸ Graphics specific to the theme’s design

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT WHAT IS REQUIRED?
▸ index.php, the main template file ▸ style.css, the main stylesheet

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT NICE-TO-HAVES ▸ front-page.php,
a custom template for your home page ▸ comments.php, the template for all comments ▸ header.php, sets up your site’s document header ▸ archive.php, template for post archives ▸ page.php, template for content pages ▸ single.php, template for single posts ▸ https://developer.wordpress.org/themes/basics/template-hierarchy/

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT HOW DO WE
GET STARTED ▸ Install WordPress instance locally ▸ Open your editor ▸ Create a folder inside the themes directory ▸ Add the index.php file ▸ Add the style.css file ▸ Activate the theme in WordPress

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT STYLE.CSS COMMENT BLOCK
/* Theme Name: Twenty Seventeen Theme URI: https://wordpress.org/themes/twentyseventeen/ Author: the WordPress team Author URI: https://wordpress.org/ Description: Twenty Seventeen brings your site to life with immersive featured images and subtle animations. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentyseventeen Tags: one-column, two-columns, right-sidebar, ﬂexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT BASIC INDEX.PHP <?php
get_header(); ?> <main id="site-main" class="main" role="main"> <!— Loop Code goes here —> </main> <?php get_footer();

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT PARTIALS AND TEMPLATE
FILES ▸ Organizes your code ▸ Easier to maintain ▸ Easier to customize between projects ▸ Called by template tags OR get_template_part()

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT <!DOCTYPE html> <html
<?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1">  <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <a class="skip-link screen-reader-text" href="#site-main"><?php esc_html_e( 'Skip to content', 'shi' ); ?></a> <header id="header" class="site-header" role="banner"> <div class="wrapper"> <?php get_template_part( 'template-parts/header/branding' ); ?> <?php get_template_part( 'template-parts/header/navigation' ); ?> </div> </header>

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT TEMPLATE TAGS ▸
Let WordPress handle it ▸ Allows for users and site admins to make changes in settings without coding knowledge ▸ Better for accessibility and localization

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT <?php // Do
we have a custom logo? if ( has_custom_logo() ) : $site_logo = wp_get_attachment_image_src( get_theme_mod( 'custom_logo' ), 'full' ); ?> <a class="site-logo-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"> <img class="site-logo" src="<?php echo esc_url( current( $site_logo ) ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" /> </a> <?php else: ?> <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p> <p class="site-description"><?php bloginfo( 'description' ); ?></p> <?php endif; ?>

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT HOW DO I
MAKE THIS REPEATABLE? ▸ GitHub template repositories ▸ Allow easy duplication ▸ Ensures each new project starts on the same footing

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT THINGS TO REMEMBER
▸ Make it accessible ▸ Skip links ▸ Color Contrast ▸ Keyboard navigation ▸ Semantic HTML

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT LINKS ▸ Theme
Handbook, https://developer.wordpress.org/themes/ ▸ Sample Code, https://github.com/AdamSoucie/wcorlando2019

QUESTIONS?

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT CONTACT ME ▸
@AdamSoucie on Twitter ▸ adamsoucie.com ▸ impossiblycreative.com ▸ buildmywptheme.com

Basics of Theme Development

Basics of Theme Development

AdamSoucie

More Decks by AdamSoucie

Other Decks in Technology

Featured

Transcript

BASICS OF THEME DEVELOPMENT WORDCAMP ORLANDO 2019

@AdamSoucie | #WCORL ABOUT ME ▸ Freelance WordPress developer through

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT OUR FOCUS ▸

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT WHAT IS A

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT WHAT SHOULD A

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT WHAT IS REQUIRED?

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT NICE-TO-HAVES ▸ front-page.php,

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT HOW DO WE

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT STYLE.CSS COMMENT BLOCK

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT BASIC INDEX.PHP <?php

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT PARTIALS AND TEMPLATE

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT <!DOCTYPE html> <html

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT TEMPLATE TAGS ▸

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT <?php // Do

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT HOW DO I

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT THINGS TO REMEMBER

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT LINKS ▸ Theme

QUESTIONS?

@AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT CONTACT ME ▸