Classic themes

Introduction to Classic themes

Welcome to this lesson where we take a close look at how classic themes are built.

With this lesson, we will:

  • differentiate between classic and block themes,
  • list and describe the typical files included in a classic theme, and
  • organize your theme files.

Classic vs Block Themes

What is the difference between a classic and a block theme?

If you haven’t already done so, do check out the Introduction to Themes for Developers lesson which you’ll find in the Beginner WordPress Developer Learning Pathway.

It was back in December 2018 when WordPress 5.0 released Gutenberg, which was when we first saw the concept of post-block editing. Now, fast forward to August 2023, and that’s when WordPress 6.3 really took off and interested users started seeing the power of full site editing.

Here we’re looking at the current default theme Twenty Twenty-Four, and if we take a quick little tour we see that we can manage and create new templates. We can create patterns and also manage template parts.

This is all possible with full site editing.

If we were comparing a traditional classic theme with a block theme, the main differences would lie within three main categories, and those are file structure, the end user customization via settings, and styling.

One of the significant differences between a classic and a block theme is how end users are able to make site-wide changes to their website. The UI has changed dramatically.

We see here as an example, this is a classic theme Twenty Twenty-One, and on the left here that’s the customizer, and users are able to make modifications to colors, and another section there that’s very classic theme is the ability to add widgets.

There’s a term out there called hybrid.

Classic themes are essentially a classic theme that is moving towards being a full-on block theme. So a classic theme doesn’t have to be a block theme in order to take advantage of some of the flexibility provided by the use of a theme.json file.

A classic theme therefore has the ability to provide configuration and styling options to the Block Editor and block content, and that’s done via theme supports, and you would include those within your functions.php file, or you could consider adding theme.json.

Classic theme files

Let’s now take a closer look at the typical files you would find in a classic theme.

Here we’ve got the classic theme Twenty Twenty-One, and you can see that there are CSS files, there’s images, JavaScript files, some more CSS. Those are all in the assets folder, and then we have PHP functions, and we have PHP templates.

Organizing theme files

Let’s now take a look at organizing your theme files.

There’s actually a considerable amount of flexibility in terms of how you structure your files with a classic theme. Here we have an example of how the Twenty Seventeen theme was organized, and it’s got some similarities as we just saw with the Twenty Twenty-One theme.

So essentially we’ve got the templates written in PHP, and then we have CSS and JavaScript files.

Next steps

To learn more about classic themes, you can refer to the developer’s theme handbook available on WordPress.org, and you’ll find many chapters within the classic themes and the theme basics modules in order to get a much better sense as to how a classic theme is structured and developed.

This is a preview lesson

Register or sign in to take this lesson.

Suggestions

Found a typo, grammar error or outdated screenshot? Contact us.