DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for The anatomy of a modern WordPress theme
jmau111⭐
jmau111⭐

Posted on • Updated on • Originally published at blog.julien-maury.dev

The anatomy of a modern WordPress theme

WordPress themes allow for modifying the appearance of the site. There are literally thousands of free and premium themes you can use to style your website.

You can also create your own theme from scratch. Classic themes usually consist of specific PHP files containing WordPress functions and the HTML markup and enqueued assets (CSS, js, SVG, images, etc.).

However, the next "twenty-twenty" theme (official bundles) will have pretty weird anatomy compared to its ancestors.

What does not change

At the very least, you still need a file called style.css at the root of your theme folder with specific headers (~ CSS commentaries) and an index.php file to enable the theme from the back-office.

The template hierarchy still applies, and you can define specific functions in the functions.php file.

You still need some action hooks to register scripts and styles, and enable specific features (e.g., add_theme_support)

For example:

add_action( 'after_setup_theme', function() {
    // remove default core patterns
    remove_theme_support( 'core-block-patterns' );

    // support alingments
    add_theme_support( 'align-wide' );

    // make the Block Editor look like the front
    add_theme_support( 'editor-styles' );
    add_editor_style( get_theme_file_uri( 'css/admin/editor-styles.css' ) );// the /css/ folder is a relative path in theme folder
} );
Enter fullscreen mode Exit fullscreen mode

Source: theme supports - block editor

New global configurations for themes

The new block editor (Gutenberg) introduced blocks, patterns, and templates composed directly from the back office in post edits.

WordPress teams push the accelerator to extend the new block editor to pretty much all editing screens, making the WordPress admin a full-site editing experience (FSE).

It's pretty cool because the new editor has "a lot more customization capabilities than the classic editor by default," but it can also be way more complex.

It's especially true when overriding the default CSS styles provided in the blocks.

In WordPress 5.8, core developers introduced global styles and settings to fix this problem. Developers can now create a new file called theme.json at the root of the theme folder. You can add a series of instructions to customize the theme.

For example, in the twenty-twentytwo theme:

"spacing": {
    "units": [
        "%",
        "px",
        "em",
        "rem",
        "vh",
        "vw"
    ]
},
"typography": {
    "dropCap": false,
    "fontFamilies": [
        {
            "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
            "name": "System Font",
            "slug": "system-font"
        },
        {
            "fontFamily": "\"Source Serif Pro\", serif",
            "name": "Source Serif Pro",
            "slug": "source-serif-pro"
        }
    ],
    "fontSizes": [
        {
            "size": "1rem",
            "slug": "small"
        },
        {
            "size": "1.125rem",
            "slug": "medium"
        },
        {
            "size": "1.75rem",
            "slug": "large"
        },
        {
            "size": "clamp(1.75rem, 3vw, 2.25rem)",
            "slug": "x-large"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

This file is pretty helpful to define global or contextual settings for the theme and prevents misusages, for example, by disabling colors in some blocks.

Considering twenty-twentytwo has more than 350 lines, you will be able to tweak a massive range of settings.

Source: Introduction to WordPress's Global Styles and Global Settings

The amazing block patterns

WordPress uses now patterns. Roughly speaking, they are predefined blocks. The goal is to ease the use of blocks and save time during editing.

You can customize and combine them at will. You can find existing patterns in the pattern directory, but you can also define custom patterns:

add_action( 'init', function() {
    register_block_pattern(
        'twentytwentytwo/footer-logo',
        [
            'title'      => __( 'Footer with logo and citation', 'twentytwentytwo' ),
            'categories' => ['footer' ],
            'blockTypes' => [ 'core/template-part/footer' ],
            'content'    => 
                '<!-- wp:group {"align":"full","layout":{"inherit":true}} -->
                <div class="wp-block-group alignfull"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"4rem","bottom":"4rem"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
                <div class="wp-block-group alignwide" style="padding-top:4rem;padding-bottom:4rem"><!-- wp:site-logo {"width":60} /-->

                <!-- wp:paragraph {"align":"right"} -->
                <p class="has-text-align-right">' .
                sprintf(
                    esc_html__( 'Proudly powered by %s', 'twentytwentytwo' ),
                    '<a href="' . esc_url( __( 'https://wordpress.org', 'twentytwentytwo' ) ) . '" rel="nofollow">WordPress</a>'
                ) . '</p>
                <!-- /wp:paragraph --></div>
                <!-- /wp:group --></div>
                <!-- /wp:group -->
            ',
        ]
    );
} );
Enter fullscreen mode Exit fullscreen mode

The register_block_pattern function allows you to pass an array of parameters containing a series of specific HTML markup used by WordPress to define and store blocks.

Source: twenty-twentytwo - inc

A new syntax for templates

It's a bit weird for anyone who has played with classic WordPress themes to find HTML files inside the theme folder.

However, it might be more appropriate than PHP files containing a mix of HTML and PHP instructions. Besides, I've used alternative approaches for years, such as Timber that allows using Twig to write cleaner templates.

If you look into twenty-twentytwo, you'll find a templates folder containing HTML files. Each file contains instructions to define and organize blocks:

// templates/404.html
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group"><!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group">
<!-- wp:pattern {"slug":"twentytwentytwo/hidden-404"} /-->
</div>
<!-- /wp:group --></main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
Enter fullscreen mode Exit fullscreen mode

Source: twenty-twentytwo - templates

WordPress will recognize your blocks and define them automatically with the above syntax. Instead of using specific PHP files according to the template hierarchy, you can use HTML templates with block's instructions:

templates/
β”‚
β”œβ”€β”€ 404.html
β”œβ”€β”€ home.html
β”œβ”€β”€ single.html
β”œβ”€β”€ page.html
Enter fullscreen mode Exit fullscreen mode

Demo

GitHub logo jmau111 / wordpress-juma

A WordPress theme using Gutenberg Full-Site Editing (FSE).

WordPress Juma

A WordPress theme using Gutenberg Full-Site Editing (FSE).

Requirements

WordPress 5.9++

Conclusion

I still have mixed feelings about FSE (full site editing), especially with the block's syntax, which consists of a mix of HTML comments and JSON-like format.

However, the final result in the editor looks pretty cool, and you can group modifications and reuse your compositions almost everywhere.

It's a bit harder to learn for developers, but users can expect significant enhancements, IMHO.

Be careful with the twenty-twentytwo theme, though. You can't activate the theme with the current version of WordPress at the time of writing. You need 5.9 at least!

Photo by engin akyurt

Top comments (0)

🌚 Life is too short to browse without dark mode