Core concepts to understand in WordPress theme development

WordPress themes play a crucial role in shaping the appearance and functionality of your website. They define how your content is displayed and offer various design options to create a unique site. Over the years, WordPress themes have evolved significantly, starting with what we now call “classic themes.”

Classic themes were the standard for a long time, relying on PHP templates and requiring some coding knowledge to customize. These themes offered great flexibility but could be challenging for those new to web development. Then, the release of WordPress 5.9 marked a significant shift with the introduction of “block themes.”

WordPress classic themes vs block themes

Classic themes are the traditional type of WordPress theme. They define the overall look and feel of a website by using template files written in PHP, CSS for styling, and JavaScript for added functionality. These highly customizable themes have been the backbone of WordPress sites for many years.

Block themes, on the other hand, are a newer type of WordPress theme introduced to support the full site editing (FSE) capabilities. Unlike classic themes, they use blocks to build all parts of a website, including headers, footers, and content areas. This allows for a more visual and intuitive way to design and customize websites directly within the WordPress editor.

The key differences between classic and block themes are:

1. Customization — Classic themes require PHP and some coding skills, while block themes use a visual editor for easier customization.
2. Flexibility — Classic themes offer more flexibility for developers, while block themes focus on ease of use and accessibility.
3. Editing — Classic themes are edited through theme files and the WordPress Customizer. Block themes can be edited entirely through the block editor.

Choosing what type of theme to develop

Your choice between classic and block themes depends on your needs and skill level. If you’re a developer looking for maximum flexibility, classic themes might be your go-to. However, if you prefer a more user-friendly and visual approach to building your site, block themes are a great option.

Both types of themes have strengths and are suitable for different kinds of users and projects. Understanding the core differences helps you make an informed decision about which theme will best suit your website’s needs.

This article aims to help you understand and master the core concepts of both classic and block themes, empowering you to create and customize WordPress themes effectively.

Understanding theme structure

Understanding the structure of a theme, whether classic or block, is key to effectively customizing your WordPress site.

Before we explore each theme’s structure, you should know that all WordPress themes are stored in your WordPress installation’s wp-content/themes directory, and each theme resides in its own folder.

Classic theme structure

A classic theme comprises several key files and directories that create the site’s appearance and functionality. The two major files are:

1. style.css — This is the main stylesheet that defines the visual styling of the theme. It includes metadata about the theme (like name, author, and version) at the top, followed by CSS rules that style the theme.
2. index.php — This is the main template file used to display content on the home page. It acts as a fallback for other template files that might be missing.

In addition to these, several other important files allow for modular design and ensure that different parts of the site can be easily customized and maintained. While optional, these files are considered standard:

• header.php — This file contains the theme’s header section, including the site title, logo, and navigation menu. It is included at the top of every page, ensuring a consistent page header.
• footer.php — This file contains the footer section of the theme, which often includes copyright information and footer navigation. It is included at the bottom of every page, providing a consistent footer across the site.
• functions.php — This file is used to add custom functionality to the theme. It can register menus, enqueue styles and scripts, and add theme support features like post thumbnails and custom backgrounds. Essentially, it acts as a control center for theme customizations and enhancements.
• page.php, single.php, archive.php, etc. — These template files define the structure for different types of content, such as pages, single posts, and archives.

Block theme structure

A block theme is composed of several key files and directories that are specifically designed to work with blocks and the FSE features. The major files and folders are:

1. theme.json — This file is crucial for configuring the theme’s settings, styles, and customizations. It defines global styles and settings for blocks, providing a centralized way to manage the appearance and behavior of the theme. It replaces the need for a lot of custom PHP code and allows for easy configuration of colors, typography, spacing, and more.
2. style.css — Although most styling is handled within theme.json, similar to classic themes style.css is still used to declare the theme’s metadata, such as the theme name, author, version, and description.
3. templates/ — This directory contains HTML files that define the layout for different parts of the site. These files include templates like index.html for the homepage, single.html for single posts, page.html for pages, and more. Each file is built using blocks.
4. parts/ — This directory contains reusable sections of templates, such as headers and footers. These parts can be included in multiple templates, ensuring consistency across the site.

While not compulsory, patterns are also important when developing advanced themes. Patterns are predefined block layouts that can be inserted into pages and posts, providing a quick way to create complex designs.

With block themes, you can decide not to create the theme structure manually. You can streamline the setup process using the Create Block Theme plugin, which scaffolds all necessary files and details.

Once you fill in the details, a new theme folder is created in the wp-content/themes directory, and the new theme will appear in the WordPress admin area under Appearance > Themes. You can add more theme details in the style.css meta description setting.

WordPress theme’s template hierarchy

The template hierarchy dictates which template file(s) WordPress uses to display different types of content. Both classic and block themes follow a similar hierarchy but differ in the file types they use: classic themes use PHP files, while block themes use HTML files.

The template hierarchy follows a specific order to determine which template file to use. If WordPress can’t find a specific template file, it will move to the next one in the hierarchy.

For instance, when WordPress needs to display a single blog post, it first looks for a template specific to the post type, like single-{post-type}.php or single-{post-type}.html. If that file doesn’t exist, it will check for the generic single.php or single.html. If neither of these files is found, WordPress will fall back to the most generic template index.php or index.html.

The same process applies to other types of content. For a static page, WordPress will first check for any custom templates assigned to that page. If none is found, it looks for a template based on the page’s slug (e.g., page-about.php or page-about.html) or its ID (page-42.php or page-42.html). If these specific templates are not available, WordPress uses the general page.php or page.html. If even this is missing, it falls back to index.php or index.html.

Creating templates

Creating templates in WordPress allows you to customize how different types of content are displayed on your website. Whether you are working with classic themes or block themes, the process involves setting up the necessary files and configuring them according to your needs.

Let’s set up a page template for both types of themes.

Classic theme page template

In classic themes, you create a page template using PHP. Here’s how to do it:

1. Create the template file — Using a text editor, create a new PHP file in your theme’s directory and name it page.php.
2. Add template code — Write the necessary PHP code to define the structure and content of the page template. This typically includes WordPress template tags to display the page content.
3. Include header and footer — Ensure your template includes the header and footer by adding get_header() and get_footer() functions. This keeps the layout consistent with the rest of your site.

Here’s an example of what page.php might look like:

<?php
get_header(); ?>

<main>
    <h1><?php the_title(); ?></h1>
    <div><?php the_content(); ?></div>
</main>

<?php get_footer(); ?>

In this example, the template includes the header, displays the page title and content, and then includes the footer.

Block theme page template

In block themes, creating a page template can be done through the WordPress Site Editor or by creating a page.html file in the templates directory.

Once this file is created, you can design a layout by navigating to the site editor (Appearance > Editor in your WordPress dashboard).

Use the block editor to add and arrange blocks to design your page layout. You can add blocks for the page title, featured image, and content. Customize each block according to your design preferences.

Once you’re satisfied with the layout, save the template. WordPress will automatically generate the corresponding HTML file in your theme’s directory.

Styling themes

Styling your WordPress theme is a crucial step in defining your website’s visual appearance. Both classic and block themes offer robust ways to customize styles, but they approach this differently.

Styling classic themes

In classic themes, styling is typically handled using CSS. Here’s how you can style a classic theme:

The main stylesheet for a classic theme is the style.css file. This file contains all the CSS rules that define how your theme looks. It’s also where you declare the theme’s metadata, such as the theme name, author, version, and description.

To ensure that your CSS is properly loaded, you need to enqueue your stylesheet in the functions.php file using the wp_enqueue_style() function.

function my_theme_enqueue_styles() {
    wp_enqueue_style('my-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

This step is crucial for maintaining proper WordPress standards and ensuring that styles are applied correctly.

Additionally, you can add custom CSS directly to the style.css file or create separate CSS files for different parts of your theme. Custom CSS can also be embedded within individual template files using the <style> tag, though this practice is generally less common and recommended only for specific, isolated styles.

For more advanced styling, you can use CSS preprocessors like SASS or LESS. These tools allow you to write more maintainable and modular CSS, making it easier to manage and extend your theme’s styles.

Styling block themes

Styling block themes are primarily managed through the theme.json file and the block editor.

The theme.json file is the central place for configuring global styles and settings for your theme. This file allows you to define colors, typography, spacing, and other styles in a structured JSON format, providing a centralized way to manage the appearance and behavior of the theme. Global styles defined in theme.json apply across your entire site, ensuring a consistent look and feel.

In addition to theme.json, you can use the block editor to apply custom styles directly to blocks. The block editor enables you to see changes in real-time and adjust the design visually without needing to write code manually. This makes the process more accessible, especially for those who prefer a visual interface over coding.

While the theme.json file handles most styling, you can still use CSS for more granular control. Custom CSS can be added to the style.css file or directly within individual blocks using the block editor.

An example of a theme.json file might include settings for color palettes, typography, and block styles, making it easy to manage and customize the theme’s design.

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        {
          "name": "Primary",
          "slug": "primary",
          "color": "#0073aa"
        },
        {
          "name": "Secondary",
          "slug": "secondary",
          "color": "#005177"
        }
      ]
    },
    "typography": {
      "fontSizes": [
        {
          "name": "Small",
          "slug": "small",
          "size": "12px"
        },
        {
          "name": "Normal",
          "slug": "normal",
          "size": "16px"
        }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "#ffffff",
      "text": "#333333"
    },
    "typography": {
      "fontFamily": "Arial, sans-serif"
    }
  }
}

Customizing themes

Customizing WordPress themes allows you to tailor the appearance and functionality of your website to meet specific needs and preferences. Both classic and block themes offer various methods for customization, but they approach it differently.

Customizing classic themes

Classic themes provide several ways to customize the look and feel of your site:

1. Theme Customizer — The WordPress Theme Customizer is an easy-to-use interface that allows you to make changes to your theme’s appearance without touching any code. You can access it through Appearance > Customize. It offers options to modify site identity, colors, menus, widgets, and more. Changes can be previewed in real-time before saving.
2. Custom CSS — For more specific style changes, you can add custom CSS directly in the Theme Customizer under the additional CSS section. This method is ideal for making minor tweaks without editing theme files.
3. Child themes — If you need to make extensive modifications, creating a child theme is the recommended approach. A child theme inherits the functionality of the parent theme and allows you to override or add new styles and features. This ensures that your customizations are preserved when the parent theme is updated.
4. Theme files — Advanced users can directly edit theme files, such as header.php, footer.php, and functions.php, to make more significant changes. However, this method requires a good understanding of PHP and WordPress template hierarchy.
5. Plugins — There are numerous plugins available that extend the customization capabilities of your theme. For example, page builder plugins like Elementor allow you to create complex layouts without coding.

Customizing block themes

With their emphasis on FSE, block themes offer a more visual and user-friendly approach to customization:

1. Site Editor — The WordPress Site Editor (Appearance > Editor) is the primary tool for customizing block themes. It allows you to modify all aspects of your site, including headers, footers, templates, and individual blocks, using a visual interface. Changes are applied instantly, making it easy to see how your adjustments affect the site’s design.
2. Global styles — Block themes use the theme.json file to define global styles. You can customize colors, typography, spacing, and more globally, ensuring consistency across your site. The Site Editor also allows you to tweak these settings visually.
3. Reusable blocks and patterns — You can create reusable blocks and patterns to maintain consistency and streamline the design process. Reusable blocks can be saved and inserted into any post or page, while block patterns provide predefined layouts that can be customized to fit your needs.
4. Custom templates — With block themes, you can create custom templates for different types of content directly within the Site Editor. This allows you to tailor the layout and design of specific pages or post types without writing any code.
5. Plugins — Like classic themes, block themes can also be extended with plugins. Many plugins are designed to enhance the capabilities of the block editor, offering additional blocks, patterns, and customization options.

Summary

Customizing WordPress themes allows you to make your site unique and functional. Classic themes rely on the Theme Customizer, custom CSS, child themes, and direct file edits for flexibility. Block themes use the Site Editor, and theme.json for a more visual and intuitive approach.

Both methods offer powerful tools to tailor your site to your needs, whether you prefer coding or visual customization.

After creating a theme that suits your taste, either a classic or block theme, it’s important to host your site on robust hosting to avoid issues like downtime, DDoS attacks, and more. This is where premium hosting providers like Kinsta shine.

Kinsta offers powerful Managed WordPress Hosting with a fully containerized architecture, powered exclusively by Google Cloud Platform on Google’s Premium Tier network.

The post Core concepts to understand in WordPress theme development appeared first on Kinsta®.