- Introduction
- Getting Blank Theme
- How WordPress Theme Works?
- 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:
1 2 3 4 |
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 theassets
folder are normally together in the same folder in web frameworks.- functions.php represents “helper functions” in general web frameworks.