Theme Basics
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.
With the Gutenberg plugin enabled 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.
It was introduced in WordPress 5.8, but it still gets many updates extending its functionalities. It uses ‘theme.json’ file to get information related to settings and styling. Its schema definition can be found here. This file is useful for adding styling controls to various blocks within the Gutenberg editor. For example, color selectors and color palettes.
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.
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 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
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 development article.
References