WordPress Classic vs.

Block Themes Part 2

• WordPress, powering over 40% of the web, has seen significant
transformations in its theme development approach. From the early days of
Classic themes to the revolutionary Block themes introduced with Full Site
Editing (FSE), WordPress has continuously adapted to meet the needs of
developers and users alike. As we stand at the crossroads of these two
approaches, it's essential to understand their differences and decide which
path to take for your next project.
Section 1: Understanding WordPress Themes

Definition and Purpose

• WordPress themes are collections of templates and
stylesheets used to define the appearance and display of
a WordPress-powered website. They control the layout,
design, and overall aesthetic of a site, enabling
developers and users to create a unique look and feel
without altering the core WordPress software. Themes
can include template files, custom functions, images, and
stylesheets, providing a robust framework for building a
diverse range of websites.
The primary purposes of WordPress themes are:

• Separation of Design and Content: Themes allow users to modify the

appearance of their website without affecting the content. This separation
ensures that updates to the design can be made independently of the site's
content.
• Customization: Themes offer various customization options, enabling users
to tailor the design, layout, and functionality of their site to meet specific
needs and preferences.
• Consistent Design: By using themes, websites maintain a consistent design
across all pages and posts, enhancing the user experience and making the
site more professional.
• Extensibility: Themes can be extended with custom plugins and widgets,
adding new features and functionalities without altering the core theme files.
Section 2: WordPress Classic Themes

• WordPress Classic themes are the traditional themes that have been the
foundation of WordPress websites for years. These themes are built using
PHP templates, HTML, CSS, and JavaScript, providing a robust framework
for designing and customizing websites.
• Classic themes leverage a template-based system, where different PHP files
control various parts of the website, such as the header, footer, and individual
pages. This approach has been instrumental in the widespread adoption of
WordPress, allowing developers to create custom websites with extensive
control over design and functionality.
Structure
The structure of Classic themes is based on a combination of PHP files,
stylesheets, and other assets. Key components include:

Template Files: These PHP files define the layout and structure of different
parts of the website. Common template files include:
• header.php: Contains the HTML code for the header section.
• footer.php: Contains the HTML code for the footer section.
• index.php: The main template file that serves as a fallback for all
other templates.
• single.php: Used to display individual blog posts.
• page.php: Used to display individual pages.
• archive.php: Used to display archive pages such as category or
tag listings.
• sidebar.php: Contains the HTML code for the sidebar section.
• Template Hierarchy: WordPress uses a template hierarchy system to
determine which template file to use for a given request. This hierarchy
allows themes to include multiple template files for different types of content,
ensuring that the appropriate layout is applied based on the context.

• functions.php: This file is used to add custom functionality to the theme. It

can include custom functions, register widget areas, enqueue scripts and
styles, and define theme support features such as custom logos and post
thumbnails.
• Style.css: The main stylesheet that controls the visual presentation of the
theme. This file is also used to provide theme information, such as the name,
author, and version.

• Other Assets: Classic themes can include additional assets such as

JavaScript files, images, and fonts to enhance the design and functionality of
the site.

• Customization: in Classic themes can be achieved through various

methods, allowing developers to tailor the theme to meet specific
requirements:
• Child Themes: A child theme inherits the functionality and styling of a parent theme while
allowing modifications. By creating a child theme, developers can customize the design and
functionality without altering the original theme files, ensuring that updates to the parent
theme do not overwrite customizations.

• Custom CSS: Developers can add custom CSS to modify the appearance of the theme.
This can be done directly in the style.css file or through the WordPress Customizer, which
provides a user-friendly interface for adding CSS code.

• Hooks and Filters: WordPress provides a system of hooks (actions and filters) that allow
developers to insert custom code at specific points in the theme. Actions allow code to be
executed at certain points, while filters modify data before it is displayed. This system
provides a powerful way to extend and customize theme functionality.
• Theme Options and Customizer: Many Classic themes include custom
theme options panels or integrate with the WordPress Customizer, allowing
users to change settings such as colors, fonts, and layout options through a
graphical interface.
Pros and Cons
• Pros:
• Established: Classic themes have been around for a long time, with a mature
ecosystem and extensive community support.
• Wide Community Support: There are numerous tutorials, forums, and
resources available for learning and troubleshooting Classic themes.
• Extensive Documentation: Detailed documentation exists for theme
development, making it easier for developers to get started and find solutions
to common problems.
• Compatible with Most Plugins: Classic themes are compatible with a vast
array of plugins, enhancing functionality without requiring extensive custom
code.
Cons:
• Can be Complex: Developing and customizing Classic themes can be
complex, requiring knowledge of PHP, HTML, CSS, and JavaScript.
• Less Flexibility Without Custom Coding: While customization is possible,
achieving advanced customizations often requires writing custom code.
• Limited to Template Hierarchy: The template-based system, while powerful,
can be less flexible than newer approaches like block-based editing,
especially for users who prefer a more visual editing experience.
• Classic themes have played a crucial role in the growth and success of
WordPress, providing a solid foundation for building custom websites.
However, as web development continues to evolve, new approaches like
Block themes offer additional flexibility and ease of use, representing the next
step in the evolution of WordPress theming.
Section 3: WordPress Block Themes

• WordPress Block themes represent a modern approach to theme

development, introduced alongside the Full Site Editing (FSE) capabilities of
the Gutenberg editor. Unlike Classic themes, which rely on a combination of
PHP templates and custom code, Block themes use blocks as the
fundamental building units.
• This allows for a more visual and intuitive design process, where users can
construct and customize their entire site layout directly within the WordPress
editor. Full Site Editing enables comprehensive site-wide changes, offering
unprecedented flexibility and control over both content and design.
Structure
The structure of Block themes differs significantly from Classic themes, focusing
on blocks, templates, and configuration files:

**Block Templates: **These are HTML files that define the layout and structure
of different parts of the site using blocks. For example:

• index.html: The main template file, serving as a fallback for other templates.
• single.html: Used to display individual blog posts.
• page.html: Used to display individual pages.
• archive.html: Used to display archive pages such as category or tag listings.
• 404.html: Used to display the 404 error page.
Template Parts: These are reusable blocks of code that can be included in
multiple templates. Common template parts include:

• header.html: Defines the header section of the site.

• footer.html: Defines the footer section of the site.
• sidebar.html: Defines the sidebar section of the site.
• theme.json: This configuration file is a cornerstone of Block themes, allowing
developers to define global styles and settings for their theme. It includes
settings for typography, colors, spacing, and more, enabling consistent
design across the site. The theme.json file also allows for the customization
of block styles and properties, ensuring a cohesive and unified appearance.
• Customization in Block themes is designed to be user-friendly and highly flexible,
leveraging the Gutenberg editor and its associated features:

• Gutenberg Editor: The Gutenberg editor provides a block-based interface for

creating and editing content. Users can add, rearrange, and customize blocks to
build complex layouts without writing code. The editor offers a wide range of blocks
for different content types, such as text, images, galleries, and widgets.

• Reusable Blocks: Reusable blocks allow users to create a block once and reuse it
across multiple pages or posts. This is particularly useful for consistent elements like
call-to-action buttons or promotional banners. Any changes made to a reusable
block are reflected wherever it is used, ensuring consistency and saving time.
• Block Patterns: Block patterns are predefined block layouts that can be
inserted into a page or post with a single click. These patterns can include
combinations of blocks arranged in specific ways, providing a quick and easy
way to create complex layouts. Themes can include custom block patterns to
offer users tailored design options.
Pros and Cons

Pros:

• Highly Flexible: Block themes allow for granular control over every aspect of
a site's design and layout through the use of blocks and the Gutenberg
editor.
• User-Friendly: The visual nature of the block editor makes it accessible to
users with little to no coding experience, enabling them to create and
customize layouts easily.
• Live Editing: Changes made in the block editor are displayed in real-time,
providing an immediate preview of how the final design will look.
• Modern Approach: Block themes align with current web development trends,
offering a more modular and scalable approach to theme design.
Cons:

• Relatively New: Block themes and Full Site Editing are relatively new
additions to WordPress, which means the ecosystem is still maturing. Some
features and best practices are still evolving.
• Limited Compatibility with Some Plugins: Not all plugins are fully compatible
with Block themes and FSE. Developers may need to ensure that their
plugins support the new paradigm.
• Learning Curve for Traditional Developers: Developers accustomed to
Classic themes may face a learning curve when transitioning to Block themes
and the new block-based approach.
• Block themes represent a significant shift in how WordPress sites are built
and customized. By embracing a block-based, visual design approach, they
offer powerful new tools for both developers and users. While there are
challenges associated with the transition, the potential benefits make Block
themes a compelling option for modern WordPress development.
Section 4: Key Differences
Editing Experience
• The Classic editor provides a straightforward, text-based interface reminiscent of
traditional word processors. It relies on a combination of HTML and shortcodes to
format content.
• Editing content involves switching between the Visual and Text (HTML) tabs, which
can be cumbersome for users unfamiliar with HTML.
• Customizing layouts and adding complex elements often requires the use of
shortcodes or custom HTML, which can be limiting and less intuitive.
• The Gutenberg block editor offers a visual, block-based interface, allowing users to
build content by adding and arranging blocks.
• Each block represents a different type of content (e.g., paragraph, image, gallery,
video), providing a more intuitive and flexible editing experience.
• Real-time editing allows users to see changes as they make them, streamlining the
design process and reducing the need for previewing.
Customization Flexibility

• Customization in Classic themes is heavily reliant on editing PHP and CSS files.
Developers use the template hierarchy to control the layout and structure of
different parts of the site.
• The functions.php file allows for adding custom functionality and theme-specific
features, while custom CSS is used for styling.
• Child themes are commonly used to make modifications without altering the
parent theme’s core files, ensuring updates do not overwrite customizations.
• While powerful, this approach requires a good understanding of PHP, HTML,
and CSS, making it less accessible for non-developers.
Block Editor and theme.json (Block Themes):

• Block themes utilize the Gutenberg editor for customization, allowing users to
add, remove, and rearrange blocks visually. This eliminates the need for
extensive coding for basic customizations.
• The theme.json file is a central configuration file that defines global styles and
settings, such as colors, typography, and spacing. This ensures a consistent
design across the site and simplifies theme customization.
• Reusable blocks and block patterns offer additional flexibility, enabling users to
create complex layouts and design elements that can be reused across the site.
• While highly flexible and user-friendly, this new approach requires users to learn
the block editor and understand the theme.json configuration, presenting a new
learning curve.
Learning Curve
Established Methods (Classic Themes):

• Classic themes follow a well-documented and established methodology. The

extensive use of PHP and CSS means there are numerous resources,
tutorials, and community support available.
• Developers familiar with traditional web development practices find Classic
themes more straightforward, as the learning curve is primarily related to
WordPress-specific functions and template hierarchy.
• The extensive documentation and community knowledge base make
troubleshooting and learning easier.
New Paradigm (Block Themes):

• Block themes introduce a new way of thinking about theme development,

centered around the Gutenberg block editor and Full Site Editing.
• The block-based approach and theme.json configuration require developers
to adapt to new tools and methodologies, which can be challenging for those
accustomed to Classic themes.
• While resources and documentation for Block themes are growing, they are
not as extensive as those for Classic themes, potentially making the learning
process more challenging.
• Developers must also consider compatibility and best practices for integrating
existing plugins and custom code with the block-based system.
Community and Support
Established Classic Theme Resources:

• Classic themes benefit from a long-standing community with extensive

resources, including forums, documentation, tutorials, and third-party tools.
• The large user base means that most issues and questions have been
addressed, providing a wealth of knowledge for developers to draw from.
• Plugins and themes built for the Classic system are abundant, offering a wide
range of functionality and customization options.
Growing Block Theme Support:

• Block themes are relatively new, and while support and resources are
expanding, they are not yet as comprehensive as those for Classic themes.
• The WordPress community is actively developing and sharing knowledge
about Block themes, with more tutorials, documentation, and tools becoming
available over time.
• As Full Site Editing gains traction, more plugins and themes are being
updated or created to be compatible with Block themes, enhancing the
ecosystem and support network.
• The continuous development and updates to the Gutenberg editor and FSE
features indicate a growing and dynamic support environment, which will
likely become as robust as that for Classic themes in the near future.
Section 5: Use Cases

Classic Themes: Suitable Projects

• Classic themes are well-suited for a variety of projects, particularly those that
require extensive customization and complex functionality. Here are some
specific use cases where Classic themes shine:
Complex Sites Requiring Custom Functionality:

• E-commerce Platforms: Sites like online stores often need advanced

customization to handle unique product displays, custom checkout
processes, and intricate inventory management. Classic themes, with their
robust PHP and template system, allow developers to create highly
customized solutions tailored to specific business needs.
• Membership Sites: Platforms that offer subscription services or
member-exclusive content benefit from the deep customization capabilities of
Classic themes. Custom PHP code can manage user roles, access levels,
and personalized content delivery.
• Large Corporate Websites: Enterprises with specific branding requirements
and complex content structures (e.g., multiple departments, services, and
internal resources) often rely on the flexibility of Classic themes to implement
bespoke designs and functionalities.
Legacy Projects:

• Established Websites: Existing sites built with Classic themes are

best maintained using the same approach to ensure continuity
and compatibility. Migrating to a new theme type might introduce
unnecessary risks and complications.
• Long-term Projects: Projects that have been in development for
many years typically have a lot of custom code and integrations.
Sticking with Classic themes allows developers to leverage the
existing codebase and make incremental improvements without a
complete overhaul.
Custom Development Agencies:

• Tailored Solutions: Agencies specializing in custom WordPress development

often prefer Classic themes because they offer more granular control over
the site’s design and functionality. This control is crucial for delivering unique,
client-specific solutions that go beyond the capabilities of standard themes.
Block Themes: Suitable Projects

• Block themes excel in scenarios where ease of use, flexibility, and

real-time customization are paramount. Here are some ideal use
cases for Block themes:
Content-Focused Websites:

• Blogs and News Sites: Sites that frequently publish content benefit from the
Gutenberg editor’s block-based approach, allowing editors to create diverse
layouts without needing developer intervention. Block patterns make it easy
to maintain a consistent look while adding variety to posts.
• Portfolios and Personal Sites: Creative professionals can use Block themes
to showcase their work with visually appealing layouts. The ease of
customization allows them to highlight their content dynamically and
attractively.
Sites Needing Frequent Updates and Design Changes:

• Marketing Websites: Businesses that run frequent marketing campaigns or

need to update their site’s appearance regularly can leverage the flexibility of
Block themes. The ability to quickly adjust layouts and designs helps keep
the site aligned with current marketing strategies.
• Landing Pages: Creating and modifying landing pages for various campaigns
is straightforward with Block themes. The visual editor allows for rapid
prototyping and deployment of new designs.
Small Businesses and Startups:

• Quick Setup and Deployment: Small businesses and startups often need to
get their website up and running quickly with minimal development costs.
Block themes, with their user-friendly editor, enable business owners to set
up and customize their sites without extensive coding knowledge.
• Iterative Design: As these businesses grow, their website needs may evolve.
Block themes make it easy to iterate on the design and functionality, adapting
to new requirements without significant redevelopment.
Educational and Non-Profit Organizations:

• Ease of Use for Non-Technical Users: Organizations that rely on volunteers

or staff with limited technical expertise benefit from the intuitive block editor.
Content updates and site maintenance can be handled in-house, reducing
the need for ongoing developer support.
• Dynamic Content Presentation: Block themes allow these organizations to
present their content (e.g., event announcements, updates, and resources) in
engaging and visually appealing ways, enhancing their communication and
outreach efforts.
Refefrences:
• https://medium.com/@claire.guiot/intro-to-classic-theme-development-f2c7c3
58e5b6
• https://dev.to/mikevarenek/wordpress-classic-vs-block-themes-4pi1
• https://www.wpzoom.com/blog/block-themes-vs-classic-themes/
• https://wordpress.com