Themes: Block vs Classic

By the end of this lesson you will know what a theme does, how block themes differ from classic themes, and how to pick a safe, well-made theme for a real site. You will also peek inside a theme folder and recognise its main files.

What a theme does

A theme controls how your site looks: colours, fonts, header, footer, menus and the layout of each kind of page. Your content (posts, pages, images) stays in the database. The theme only decides how to present it.

Think of a theme as the uniform and the classroom layout of a school. Change the uniform colour and rearrange the benches, and the same students (your content) are still there.

You can switch themes at any time. Your posts and pages stay, but some theme-specific things (such as a special slider or widget area) may not carry over.

Block themes and classic themes

WordPress has two kinds of themes today.

A block theme lets you edit everything, including the header and footer, with the same blocks you use in posts. This is called full site editing. A classic theme builds pages with PHP and gives you smaller controls in the Customizer (Appearance > Customize).

Some themes are hybrid: classic themes that adopt a few block features, such as a theme.json file.

How to tell which one you have: open the Appearance menu. If you see Editor, the active theme is a block theme. If you see Customize, Widgets and Menus, it is a classic theme.

This course teaches block themes first, because they are the modern direction of WordPress. You will still meet classic themes on older client sites, so we show both.

Installing a theme, step by step

Step 1: Go to Appearance > Themes and click Add New Theme.

Step 2: Use the filter to show Block Themes, or search for a name.

Step 3: Hover over a theme and click Preview to see it with sample content.

Step 4: Click Install, then Activate.

Step 5: Visit your site. The look changes, but your pages and posts are the same.

You can also upload a theme as a .zip file with the Upload Theme button. Only do this with themes from sources you trust.

Choosing a safe, good theme

Before installing any theme, check these points on its page in the WordPress.org directory or on the seller's site:

• Last updated: within the last few months is a good sign.
• Active installations and ratings: many users usually means problems get noticed.
• Requires WordPress / PHP version: must match your site.
• Accessibility-ready tag: the theme follows basic accessibility rules.
• Support forum: are questions answered?

Themes in the WordPress.org directory are reviewed by volunteers before they are listed. Paid themes from reputable sellers are fine too.

Inside a theme folder

Themes live in wp-content/themes/, one folder each. Here is the shape of a small block theme compared with a classic theme:

block theme (bright-block/)          classic theme (bright-classic/)
  style.css                            style.css
  theme.json                           functions.php
  functions.php   (optional)           index.php
  templates/                           header.php
    index.html                         footer.php
    single.html                        single.php
    page.html                          page.php
  parts/                               sidebar.php
    header.html
    footer.html
  patterns/

Every theme must have a style.css file with a special comment at the top called the theme header. WordPress reads it to show the theme's name and details:

/*
Theme Name: Bright Block
Author: Aarav Mehta
Description: A simple block theme for a coaching centre.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: bright-block
*/

Requires at least is the oldest WordPress version the theme supports. Text Domain is used for translations.

How the two kinds build a page

Here is how a classic theme shows a page title and content. It is PHP mixed with HTML, and it uses The Loop, WordPress's way of going through posts one by one:

<?php get_header(); ?>
<main>
    <?php while ( have_posts() ) : the_post(); ?>
        <h1><?php the_title(); ?></h1>
        <?php the_content(); ?>
    <?php endwhile; ?>
</main>
<?php get_footer(); ?>

A block theme does the same job with blocks written as HTML comments, in templates/page.html:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
  <!-- wp:post-title {"level":1} /-->
  <!-- wp:post-content /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Both produce the same final HTML for the visitor. The difference is who can change it: in a block theme, a site owner can edit this template visually in the Site Editor without touching code.

Customising without losing changes

Never edit a theme's files directly if someone else makes the theme. The next update replaces the files and your changes vanish. Instead:

• In a block theme, use the Site Editor; changes are saved in the database.
• For code changes, create a child theme (see theme.json & Child Themes).
• For features that should survive a theme change, write a small plugin.

Common mistakes

• Installing many themes "to try them". Delete the ones you do not use; inactive themes still need updates. Keep one default theme as a backup.
• Choosing a theme for its demo photos. Demos look great with professional photos. Judge the layout, speed and support instead.
• Editing theme files directly. Updates wipe the changes.
• Using page builders and a heavy theme together without need. Block themes already let you design most layouts.

Key points

• A theme controls design; content stays in the database when you switch themes.
• Block themes use HTML templates, theme.json and the Site Editor; classic themes use PHP templates and the Customizer.
• If Appearance shows Editor, your theme is a block theme.
• Check updates, ratings, requirements and support before choosing a theme; never use nulled themes.
• Every theme needs style.css with a theme header.
• Keep changes in the Site Editor, a child theme or a plugin, never in someone else's theme files.

/*
Theme Name: Pune Tutors
Author: Your Name
Description: A clean block theme for a tuition centre in Pune.
Version: 0.1.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: pune-tutors
*/