Basics of Theme Development

Basics of Theme Development

WordPress themes have always been a complicated topic. What goes into a theme? What doesn’t? What’s actually required versus what’s a nice-to-have feature? Should I use a framework?

In this workshop, I’ll walk you through the basics of building your own custom theme from scratch. I’ll cover all of the necessary files and features you need to get your custom theme up and running, as well as teach you a few tricks on how to speed up your development process along the way.

252cfead23a0b557441d8e46eed4a4b6?s=128

AdamSoucie

August 23, 2019
Tweet

Transcript

  1. BASICS OF THEME DEVELOPMENT WORDCAMP ORLANDO 2019

  2. @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
  3. @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?
  4. @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
  5. @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
  6. @AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT WHAT IS REQUIRED?

    ▸ index.php, the main template file ▸ style.css, the main stylesheet
  7. @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/
  8. None
  9. @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
  10. @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, flexible-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. */
  11. @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();
  12. @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()
  13. @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"> <!-- No touch! --> <?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>
  14. @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
  15. @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; ?>
  16. @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
  17. @AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT THINGS TO REMEMBER

    ▸ Make it accessible ▸ Skip links ▸ Color Contrast ▸ Keyboard navigation ▸ Semantic HTML
  18. @AdamSoucie | #WCORL BASICS OF THEME DEVELOPMENT LINKS ▸ Theme

    Handbook, https://developer.wordpress.org/themes/ ▸ Sample Code, https://github.com/AdamSoucie/wcorlando2019
  19. QUESTIONS?

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

    @AdamSoucie on Twitter ▸ adamsoucie.com ▸ impossiblycreative.com ▸ buildmywptheme.com