Building a WordPress theme from scratch

BUILDING A WORDPRESS THEME FROM SCRATCH EMANUEL BLAGONIC / @EBLAGONIC

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

Ask me anything. RULE 2

We’ll have one break, but we can decide on needed
breaks together. RULE 3

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

— 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

I have a confession…

I am a designer, not a developer

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

— 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

— 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

Template Hierarchy!

CHAPTER 1 BUILDING A BASIC  WORDPRESS THEME

— 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

/* 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

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

But our theme won’t have an image on “Themes” screen
:’(  #sadunicorn

— 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

Adding header and footer to our theme

— Use get_header() and get_footer() in your index.php ADDING HEADER
AND FOOTER TO OUR THEME

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

— get_header() and get_footer() will use the default code until
we add our own header.php and footer.php files REMEMBER!

index.php header.php footer.php style.css screenshot.png FILES WE HAVE SO FAR

<!doctype html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo(
'charset' ); ?>" /> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> HEADER.PHP

Wait, no title tag? Let’s play with functions.php

<?php // Theme support for the new Title tag add_theme_support(
'title-tag' ); ?> FUNCTIONS.PHP

<?php wp_footer(); ?> </body> </html> FOOTER.PHP

Coming up next: The Magnificent Loop

<?php if ( have_posts() ) : ?> <?php while (
have_posts() ) : the_post(); ?>  <?php endwhile; ?> <?php endif; ?> THE LOOP

— 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

<?php get_header(); ?> <?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>  <?php endwhile; ?> <?php endif; ?> <?php get_footer(); ?> INDEX.PHP

Why our loop doesn’t   do tricks?

<?php the_title(); ?> <?php the_content('Read more'); ?> USE THIS INSIDE
THE LOOP TO GET TITLE AND CONTENT

— header.php is for showing page header code — footer.php
is for showing page footer code REMEMBER!

— 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!

CHAPTER 2 UNDERSTANDING WORDPRESS THEME BUILDING PROCESS

<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

How to localize your theme?

// Support localization add_action('after_setup_theme', 'mywptheme_textdomain'); function mywptheme_textdomain(){ load_theme_textdomain('mywptheme', get_template_directory() .
'/languages'); } IN YOUR FUNCTIONS.PHP

the_content( __('Read more','mywptheme') ); // or echo esc_html__( 'Text', 'mywptheme'
); // or _e( 'Jump to <strong>navigation</strong>', 'mywptheme' ); IN YOUR FILES

Using conditional tags

— 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

— 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

— 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

— is_user_logged_in() – when any user is currently logged-in, any
roles. CONDITIONAL TAGS

How to include template parts?

— 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

— 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

Most used template tags that you should be aware of

— 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!! :)

— 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

— 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

— 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

— 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

— 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

— 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

Adding featured images   to your theme

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

if ( has_post_thumbnail() ) { // We want to show
our custom defined size the_post_thumbnail( ‘article-photo' ); } WITHIN THE LOOP

Using custom queries

<?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(); ?>  <?php endwhile; ?> <?php endif; ?> <?php wp_reset_query(); ?> CUSTOM WORDPRESS QUERY

Conditional tags  https://codex.wordpress.org/Conditional_Tags Template Tags  https://codex.wordpress.org/Template_Tags StackOverﬂow: WordPress (100k+)  http://stackoverflow.com/questions/tagged/wordpress
StackExchange: WordPress (70k+)  http://wordpress.stackexchange.com/questions

CHAPTER 3 LET’S BUILD A REAL  WORDPRESS THEME

Thank you

Have another question? Ping me on Twitter @eblagonic

Building a WordPress theme from scratch

Building a WordPress theme from scratch

More Decks by Emanuel Blagonic

Other Decks in Programming

Featured

Transcript