Web - [Tutorial #8] Wordpress Custom Theme Basics: Structure

Contents

Introduction
Getting Blank Theme

Where?
Install Blank Theme

How WordPress Theme Works?

Using Templates
Using functions.php
Assets Folder
style.css
Putting theme in action

Selected Theme File Explanation

header.php : specify a page’s header.
footer.php: specify a page’s footer.
archive.php: default template for the archive page
404.php: default template when an url is not found
index.php: default blog index template
page.php: default page template
search.php: default search results template
single.php: default template for a post
style.css: the main styling file for this theme
comments.php: default partial template for comments
sidebar.php: default partial template for sidebars
template-parts/content-search.php: partial template for one search result
template-parts/content-none.php: partial template when the content is not found
template-parts/content.php: partial template for displaying a post/page’s content in index.php/page.php

Sidenote

Introduction

In last tutorial we talked about using a commercial theme for wordpress websites. Nowadays many commercial themes are well made and have a lot of flexibility. Nevertheless still there is no one theme that can 100% do what you want. In this case you have to create your own custom theme.

Getting Blank Theme

Where?

We don’t need to create a theme starting from nothing. There are many websites out there providing blank themes. For me I use the underscore blank theme.

Simply putting the name, hit “generate” and you get your blank theme in a zip file.

Install Blank Theme

Installing blank theme is very easy. Simply use the “Upload Theme” function in Appearance -> Themes -> Add New as described in the previous tutorial.

You will see the following message when installation succeeds:

When you open the website it will look, well, very bad. This is because it is a blank theme and has minimal styling in it.

How WordPress Theme Works?

Before we start looking at the files in our blank theme, it will be very helpful if we first know how wordpress uses the files in the theme folder:

Using Templates

As mentioned in previous tutorial, templates are used by wordpress to generate webpages. The way wordpress finds what template to use is as follows:

First it sees if the template is specified in the edit page in admin panel.
If it is not specified or the edit page does not have template option, wordpress look through a hierarchy of “default templates” by their names. It starts from templates of narrower scope. If not found it moves to the more general templates.

The location where you specify template is as follows (for pages):

Different template hierarchies apply to different wordpress pages (post page, custom page, 404, etc). You can find a graphical hierarchy presentation here in wordpress official site.

Templates can also be used only for part of a page. For example “header.php” and “footer.php” are default templates for page’s header and footer section. Many of these templates are stored in the template-parts folder.

Using functions.php

functions.php is where wordpress stores functions that are used in the theme. You can add/modify custom php functions to change wordpress’ theme behavior.

For example, the following functions change wordpress’ post excerpt character length to 40:

function wpdocs_custom_excerpt_length( $length ) {
    return 40;
} 
add_filter( 'excerpt_length','wpdocs_custom_excerpt_length', 999 );

function wpdocs_custom_excerpt_length( $length ) {

return 40;

}

add_filter( 'excerpt_length','wpdocs_custom_excerpt_length', 999 );

Assets Folder

Although not present in the blank Underscore theme, a common practice is to create a folder called “assets” or “public” to store site’s assets (image, video, JavaScript). One can then link to these assets in templates.

style.css

This file is where you specify how wordpress website will look via cascade style sheet.

Putting theme in action

As a reminder, you still have to go to wordpress’ admin panel to create pages, categories, etc to utilize the theme.

Selected Theme File Explanation

Here we provide a brief explanation of the commonly theme’s files.

header.php : specify a page’s header.

footer.php: specify a page’s footer.

archive.php: default template for the archive page

404.php: default template when an url is not found

index.php: default blog index template

page.php: default page template

search.php: default search results template

single.php: default template for a post

style.css: the main styling file for this theme

comments.php: default partial template for comments

sidebar.php: default partial template for sidebars

template-parts/content-search.php: partial template for one search result

template-parts/content-none.php: partial template when the content is not found

template-parts/content.php: partial template for displaying a post/page’s content in index.php/page.php

Sidenote

For those who want to look further and learn to use general web application frameworks, the above theme components represent some of the MVC framework common for web applications:

Templates are general to web application frameworks. They are the “views” in MVC.
style.css together with the assets folder are normally together in the same folder in web frameworks.
functions.php represents “helper functions” in general web frameworks.

[Tutorial #8] WordPress Custom Theme Basics: Structure