Essentials

The most critical thing to understand about any theme is the WordPress template hierarchy (Developer Resources, WordPress Template Hierarchy by WPShout).

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.

The wp_body_open() function in WordPress is a powerful tool that allows developers to insert code or content immediately after the opening tag in a theme. This is particularly useful for adding scripts, stylesheets, or other elements that need to be loaded early in the page’s lifecycle.

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.

Example: A Theme in 3 files & 249 lines

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 currently not being enqueued. If you need to include JavaScript files, you can use functions like wp_enqueue_script(), wp_add_inline_script(), and wp_localize_script(). For optimal data transfer from PHP to JavaScript, wp_add_inline_script() is the recommended method. wp_localize_script() is specifically designed for sharing translated strings with JavaScript scripts.

Refer to the GitHub links to understand the 3 files – index.php, style.css, functions.php

Block Theme: [Full Site Editing Theme]

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

Ideas to Explore:

  • What is the default quality of JPEG images that we upload in WordPress? (0%-> worst quality, 100%-> best quality)
  • What is the difference between a child theme and a parent theme in WordPress?
  • What are WordPress theme internationalization (i18n) best practices for non-English languages and RTL (Right to Left) text?
  • How do you properly handle the enqueueing of stylesheets and scripts in a WordPress theme to avoid conflicts with plugins or other themes?