Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building a WordPress theme from scratch

Building a WordPress theme from scratch

This is a presentation I used for a kids workshop on WordCamp Bangkok. You might find it useful when starting a career in WordPress theme development. (Keep in mind that this presentation is aimed for kids of 15+ age, and it's not focused on any of the advanced techniques used when building WordPress themes)


Emanuel Blagonic

February 20, 2017



  2. No stress. We’ll get to it. :) RULE 1

  3. Ask me anything. RULE 2

  4. We’ll have one break, but we can decide on needed

    breaks together. RULE 3
  5. 10:00 Introduction 10:15 Chapter 1: Building a basic WordPress theme

    10:45 Chapter 2: Understanding WordPress theme building process 11:15 Break 11:30 Chapter 3: Let’s build a real WordPress theme 13:00 Q&A TODAY’S PLAN
  6. None
  7. None
  8. None
  9. — Let’s write a couple of posts and pages —

    Add images inside if you want — Add featured image to at least one post — Use read more on at least one post — Add excerpt to at least one post BEFORE WE START
  10. I have a confession…

  11. I am a designer, not a developer

  12. WordPress Codex
 https://codex.wordpress.org/ WordPress Theme Handbook
 https://developer.wordpress.org/themes/ WordPress Code Reference

  13. — Templates files (like page.php, header.php, footer.php etc.) exist within

    a theme and express how your site is displayed. — Page Templates are those that apply only to pages to change their look and feel. TERMINOLOGY
  14. — Template Tags are built-in WordPress functions you can use

    inside a template file to retrieve and display data (such as the_title() and the_content()). — Template Hierarchy is the logic WordPress uses to decide which theme template file(s) to use, depending on the content being requested. TERMINOLOGY
  15. Template Hierarchy!

  16. None
  17. None

  19. None
  20. — for every WordPress theme to work (so you can

    activate it), you’ll need only two files, really – just two files :) — index.php is where the code for theme goes — style.css is to give your theme some basic information like who is the author, what textdoman does it use etc. OUR BASIC THEME
  21. /* Theme Name: My WordPress Theme Theme URI: https://www.yourwebsite.com/my-wordpress-theme Author:

    Your Name Author URI: https://www.yourwebsite.com Version: 1.0 Text Domain: mywptheme */ STYLE.CSS
  22. <?php get_header(); ?> <!-- our content will go here, eventually

    --> <?php get_footer(); ?> INDEX.PHP
  23. But our theme won’t have an image on “Themes” screen

  24. None
  25. — To add screenshot to our theme, just save screenshot.png

    in your theme folder. Screenshot has to be 1200x900px PNG file ADDING A THEME SCREENSHOT
  26. None
  27. Adding header and footer to our theme

  28. — Use get_header() and get_footer() in your index.php ADDING HEADER

  29. <?php get_header(); ?> <?php get_footer(); ?> INDEX.PHP

  30. — get_header() and get_footer() will use the default code until

    we add our own header.php and footer.php files REMEMBER!
  31. index.php header.php footer.php style.css screenshot.png FILES WE HAVE SO FAR

  32. <!doctype html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo(

    'charset' ); ?>" /> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> HEADER.PHP
  33. Wait, no title tag? Let’s play with functions.php

  34. <?php // Theme support for the new Title tag add_theme_support(

    'title-tag' ); ?> FUNCTIONS.PHP
  35. <?php wp_footer(); ?> </body> </html> FOOTER.PHP

  36. Coming up next: The Magnificent Loop

  37. <?php if ( have_posts() ) : ?> <?php while (

    have_posts() ) : the_post(); ?> <!-- our content goes here --> <?php endwhile; ?> <?php endif; ?> THE LOOP
  38. — If there are any articles that needs to show

    on the page requested – show them — While there are articles to show, show them and then – continue with the next one THE LOOP EXPLAINED
  39. <?php get_header(); ?> <?php if ( have_posts() ) : ?>

    <?php while ( have_posts() ) : the_post(); ?> <!-- our content goes here --> <?php endwhile; ?> <?php endif; ?> <?php get_footer(); ?> INDEX.PHP
  40. Why our loop doesn’t 
 do tricks?

  41. <?php the_title(); ?> <?php the_content('Read more'); ?> USE THIS INSIDE

  42. — header.php is for showing page header code — footer.php

    is for showing page footer code REMEMBER!
  43. — single.php is for showing single post — page.php is

    for showing single page — functions.php is used for our custom functions — sidebar.php is used to show sidebar widgets REMEMBER!
  44. None
  45. None

  47. <article> <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> <?php if(has_excerpt()) {

    ?> <div class="excerpt"><?php the_excerpt(); ?></div> <?php } else { ?> <div class=“content"> <?php the_content( __('Read more','mywptheme') ); ?> </div> <?php } ?> </article> SHOWING A POST
  48. How to localize your theme?

  49. // Support localization add_action('after_setup_theme', 'mywptheme_textdomain'); function mywptheme_textdomain(){ load_theme_textdomain('mywptheme', get_template_directory() .

    '/languages'); } IN YOUR FUNCTIONS.PHP
  50. the_content( __('Read more','mywptheme') ); // or echo esc_html__( 'Text', 'mywptheme'

    ); // or _e( 'Jump to <strong>navigation</strong>', 'mywptheme' ); IN YOUR FILES
  51. Using conditional tags

  52. — is_front_page() – when the front of the site is

    displayed, whether it is posts or a Page. — is_single() – when a single post of any post type (except attachment and page post types) is being displayed. — is_single( ’17’ ) – when a single post with a specific ID is being displayed. CONDITIONAL TAGS
  53. — is_page() – when any Page is being displayed. —

    is_page( ’17’ ) – when a Page with a specific ID is being displayed. — is_page_template( 'about.php' ) – when a Page Template 'about' is being used. CONDITIONAL TAGS
  54. — is_author() – when any Author page is being displayed.

    — is_archive() – when any type of Archive page is being displayed. Category, Tag, other Taxonomy Term, custom post type archive, Author and Date- based pages are all types of Archives. — is_404() – when there’s an 404 error page. CONDITIONAL TAGS
  55. — is_user_logged_in() – when any user is currently logged-in, any

  56. How to include template parts?

  57. — get_header() – will include header.php. — get_footer() – will

    incude footer.php. — get_sidebar() – will incude sidebar.php. — get_search_form() – will incude search.php. INCLUDING HEADER, FOOTER, AND SIDEBAR
  58. — get_template_part( ‘navigation’ ) – will include navigation.php template part.

    — get_template_part( ‘articles’, ‘archive’ ) – will include articles-archive.php template part. — get_template_part( ‘partials/navigation’ ) – will include navigation.php from the “partials” directory. INCLUDING TEMPLATE PARTS
  59. Most used template tags that you should be aware of

  60. — wp_head() – placeholder for all additional actions plugins or

    WordPress may use (like scripts, styles etc.). Use it! — wp_footer() – placeholder for all additional actions plugins or WordPress may use. Use it! — body_class() – display the classes for the body element. TAGS YOU SHOULD ALWAYS USE! LIKE, ALWAYS!! :)
  61. — get_bloginfo() – retrieves information about the current site. —

    get_bloginfo( ‘name’ ) – site title. — get_bloginfo( ‘description’ ) – site tagline. — get_bloginfo( ‘url’ ) – the Site address (URL). TAGS USED TO SHOW BLOG INFORMATION
  62. — get_home_url() – retrieves the URL where the front end

    is accessible. — get_site_url() – retrieves the URL where WordPress application files (e.g. the wp-admin/ folder) are accessible. — get_template_directory_uri() – retrieves theme directory URL. TAGS TO GET URLS
  63. — wp_nav_menu( $args ) – displays a navigation menu for

    given arguments (keep in mind that you need to define a navigation menu in your functions.php for this to work). — wp_list_pages() – retrieve or display list of pages. — wp_list_categories() – display or retrieve the HTML list of categories. TAGS TO SHOW NAVIGATION
  64. — the_title() – displays or returns the title of the

    current post. — the_excerpt() – displays the post excerpt. — the_content() – displays the post content. TAGS USED WITHIN THE LOOP
  65. — the_permalink() – displays the URL for the permalink to

    the post. — the_category() – displays a link to the category or categories a post belongs to. — the_tags() – displays a link to the tag or tags a post belongs to. TAGS USED WITHIN THE LOOP
  66. — the_date() – Displays or returns the date of a

    post, or a set of posts if published on the same day. — get_the_date() – retrieves the date the current post was written. Will always return the date. TAGS USED WITHIN THE LOOP
  67. Adding featured images 
 to your theme

  68. if ( function_exists( 'add_theme_support' ) ) { // Add support

    for featured images first add_theme_support( 'post-thumbnails' ); // Add a post thumbnail size for ‘article photo’, hard crop add_image_size( ‘article-photo', 1200, 600, true ); } FUNCTIONS.PHP
  69. if ( has_post_thumbnail() ) { // We want to show

    our custom defined size the_post_thumbnail( ‘article-photo' ); } WITHIN THE LOOP
  70. Using custom queries

  71. <?php $query = array( ‘posts_per_page' => '3', ); $query =

    new WP_Query($query); ?> <?php if($query->have_posts()) : ?> <?php while ($query->have_posts()) : $query->the_post(); ?> <!-- Code within the loop goes here --> <?php endwhile; ?> <?php endif; ?> <?php wp_reset_query(); ?> CUSTOM WORDPRESS QUERY
  72. None
  73. Conditional tags
 https://codex.wordpress.org/Conditional_Tags Template Tags
 https://codex.wordpress.org/Template_Tags StackOverflow: WordPress (100k+)

    StackExchange: WordPress (70k+)
  74. None

  76. None
  77. Q&A

  78. Thank you

  79. Have another question? Ping me on Twitter @eblagonic