The most critical thing to understand about any theme is the WordPress template hierarchy (codex, visualization).
Many theme frameworks override template hierarchy with custom actions or filters or use get_template_part(), which is basically an include
with some variability, and a third argument for managing scope.
For a starter theme that follows the default theme hierarchy, see any of the default themes, or Underscores.me.
In WordPress, block-based themes are also possible. These use HTML files with block markup instead of PHP. For examples, see WordPress/theme-experiments on GitHub, especially tt1-blocks.
This may seem like a lot. At the most basic level, the only required files for a fully-functioning theme are index.php
, style.css
, and functions.php
. functions.php
can be omitted, but it’s typically useful to have it at least enqueue style.css
using wp_enqueue_style(). It’s also typically useful to have index.php call wp_head() and wp_footer(), which output enqueued styles and scripts from various plugins in the header and footer respectively.
One of the most important things you need to know about the basics of WordPress theme development is to know about its Theme Functions. To know more in detail you can follow the Theme Functions article.
Another useful function is body_class(), which outputs various contextual classes on the HTML <body>
element. post_class() is similar but for use on the element wrapping output of the_content()
. By using these functions, CSS can be written to target context in a way that is consistent across themes.
The last critical component for any theme is for the template file to at some point invoke a WordPress loop. For that, see WP_Query, have_posts(), the_post(), and the_content().
To understand the query loop in detail, The Loop article from the codex will be very helpful.
For more theme features, such as navigation menus and post thumbnails, see theme-functions.
Here is a very basic theme that passes PHPCS and has only 3 files: index.php, functions.php, and style.css. It has a navigation area, loop, and widget area. It enqueues CSS and focuses on documentation. Notice the use of the wp_footer
action to output a menu, loop, and widget area. Notice also the use of the wp_head
action to output various meta.
JavaScript is not enqueued. If it were, relevant functions include wp_enqueue_script() and wp_localize_script(). (Notice the arguments for enqueuing to either the header or the footer. Default is $in_footer = false
.)
Refer to the GitHub links to understand the 3 files – index.php, style.css, functions.php
A block theme is a type of WordPress theme built using blocks. You can edit all parts of a block theme in the Site Editor. To know more about it read this Block theme article.
References