Core concepts in WordPress theme development - (r)

-sidebar-toc>        -language-notice>

WordPress classic themes against block themes

The main differences between block themes block themes and classic

1. Customization Classic themes require PHP as well as some programming skills for block themes, while classic themes employ the visual editor to facilitate customizing.

Choosing what type of subject to design

Your choice between classic and block themes is contingent on the needs of your degree. If you're a developer looking to maximize versatility, then classic themes may be your preferred choice. However, if you prefer a more user-friendly and visual approach to building your site, block themes are an excellent choice.

Each type of theme has advantages and can be used by diverse types of customers as well as 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 comprehend and master the core concepts of both classic and block themes, empowering you to develop and modify WordPress themes efficiently.

Understanding theme structure

The layout of themes, whether classic or block is essential to successfully making changes to your WordPress site.

Prior to examining the theme's architecture it is important to know that every one of WordPress themes are located in the WordPress installation's the wp-content/themes directory. Each theme is stored in their own folder.

Classic theme structure

The classic theme is comprised of several crucial directories and files that define the look of the website as well as its functionality. Two of the most important components are:

1. style.css -- The main stylesheet which defines the visual styling of the theme. It includes metadata about the theme (like author's name, title, and version) at the top then follows CSS rules that style the theme.
2. index.php -- It is the primary template file that displays content on the home page. It serves as a backup for any other template files that might be missing.

Alongside these many other essential files allow for modular design and make sure that the various components of the website can be quickly customized and kept in good condition. Though they're not mandatory, these documents are considered to be standard

• header.php -- The file is the theme's header section. It includes the logo, title of the page and menu navigation. The header is placed on the top of each page, ensuring a consistent page header.
• footer.php -- This file includes the footer section of the theme, which usually includes copyright details and footer navigation. It's located in the footer section of every page, providing a consistent footer throughout the website.
• functions.php -- This file can be used to provide custom functions to the theme. It is able to register menus, enable scripts and styles, as well as add themes-specific features like post thumbnails and custom backgrounds. In essence, it functions as a central control point for theme enhancements and customizations.
• page.php, single.php, archive.php, etc. These templates provide the framework for various types of content, such as single posts, pages and archives.

Block theme structure

Block themes are made up of a number of important directories and files that are designed specifically to work with blocks and the FSE functions. The most important directories and files are:

1. theme.json -- The file is essential to configure the theme's settings, styles and personalizations. It specifies global styles and settings for blocks, providing a centralized way to regulate the appearance and performance of the theme. It replaces the need for lots of custom PHP code and allows for simple configuration of typography, colors spacing, etc.
2. style.css -- While the majority of styling is done inside theme.json, similar to the classic themes, style.css is still used to declare the metadata of a theme, such as the theme name the author's name, title, version and the description.
3. templates/ -- This directory contains HTML files that define the design for various parts of the site. They include templates such as index.html for the homepage, single.html for one-post posts, page.html for pages, and more. Every file is constructed with blocks.
4. parts/ The directory contains reusable sections of templates such as headers and footers. They can be put in multiple templates, ensuring uniformity across all sites.

With block themes, you are able to decide whether or not to design the structure of your theme manually. You can streamline the setup process through the Create Block Theme plugin that provides all the required documents and information.

WordPress template hierarchy in the WordPress theme

The hierarchy of templates follows a particular order for determining which template files to choose from. If WordPress cannot find the right template file, it will move to the next one within 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 the file isn't there then it'll look for the standard single.php or single.html. If neither exists, WordPress will fall back to the most generic template index.php or index.html.

The exact same procedure applies to other types of information. When a static webpage is created, WordPress will first check for any custom templates associated with the page. If none are found the system will look for a template based on the slug for the page (e.g., page-about.php or page-about.html) or the ID ( page-42.php or page-42.html). If those specific templates do not exist, WordPress uses the general page.php or page.html. Even if this template is not available, it falls back in index.php or index.html.

Designing templates

Creating templates in WordPress permits you to alter the way different kinds of content are displayed on your website. If you're working with classic themes or block themes, it is a matter of creating the required files and configuring them according to your requirements.

Let's set an appropriate template page that can be used for both kinds of themes.

Template for a classic theme

In classic themes, you create an HTML template with PHP. This is how you can do it:

1. Add template code • Write the needed PHP code to determine the layout and contents of the page's template. It typically contains WordPress template tags that display the page content.
2. Add headers and footers Make sure your template includes the header and footer by adding the get_header() and get_footer() functions. This keeps the layout consistent with your other pages.

Here's a sample of what page.php might look as:

In this case the template has the header. It shows the title of the page and contents, before adding the footer.

Block theme page template

In block themes, the creation of a page template can be completed using WordPress Site Editor WordPress Editor for Sites Editor or through the creation of page.html files. page.html file in the template directory.

After the file has been created, you can design your layout in the editor of your website ( Appearance > Editor within your WordPress dashboard).

Use the block editor to create and organize blocks in order to create your layout. Blocks can be added for the page's title or featured image as well as information. Modify each block to suit your preferences for design.

If you're pleased with the design Save the template. WordPress will automatically generate the appropriate HTML file in your theme's directory.

Themes of styling

How you design your WordPress theme is a crucial step in defining your website's aesthetic appearance. The block and classical themes allow you to personalize styles, however they do this in different ways.

Styling classic themes

In the classic theme, styling is generally handled by CSS. Here's a guide to styling an old-fashioned theme:

The principal stylesheet used for a classic theme is that of the style.css file. The file is comprised of all CSS guidelines that govern how your theme looks. This is also the place where you can declare the metadata of your theme, including the theme's name and version number, as well as author name, and description.

To ensure you are sure that the CSS is correctly 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 also to ensure that the styles are properly applied.

Additionally, you can add your own CSS directly into your style.css file or create distinct CSS files for different parts of the theme. Custom CSS may also be embedded in individual templates through the style tag, though this method is not as common and recommended only in the case of specific styles.

For more advanced styling, you can use CSS preprocessors like SASS and LESS. These tools allow you to write more maintainable and modular CSS that makes it much easier to control and expand your themes' styles.

Block-style styling ideas

Styling block themes are primarily handled by using block editor theme.json file and the block editor.

The theme.json file is the main place to configure global styles and settings for the theme. The file lets you set the colors, fonts spacing, colors, and more styles using a structured JSON format. It provides an centralized method to control the style and appearance of your theme. Global styles defined by theme.json theme.json apply across the entire website, providing an identical appearance and experience.

Alongside theme.json, you can use blocks editor in order to add your own styles straight to the blocks. Block editors allow you to monitor modifications in real-time, and to adjust the style visually, without having to write code manually. This makes the process more accessible, especially for those who favor the visual approach over writing code.

While the theme.json file handles all styling, you can nevertheless make use of CSS for more granular control. Custom CSS can be added to the style.css file or directly in individual blocks with Block Editor.

A sample theme.json file might include settings for color palettes as well as typography and block styles. This makes it simple to control and modify the style of the theme.

 "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"
 
 
 

Themes that can be customized

Customizing WordPress themes permits you to tailor the appearance and functionality of your site to satisfy specific needs and preferences. Both classic and block themes provide a variety of options for personalization, yet they approach it differently.

Customizing traditional themes

The classic themes offer a variety of ways to alter the appearance and feel of your web site:

1. Theme Customizer -- The WordPress Theme Customizer is an user-friendly interface that lets users to modify the appearance of your theme without having to edit any codes. It is accessible via The Appearance >> Modify. It offers options to modify site identity, color schemes, menus along with widgets and other elements. Changes can be previewed live prior to saving.
2. theme files Advanced users can directly edit the theme's files like header.php, footer.php, and functions.php, to make important adjustments. However, this method requires an in-depth grasp of PHP and the WordPress template hierarchy.

Block themes that can be customized

They are a focus on FSE blocks themes are a great way to get FSE. They offer an appealing and easy-to-use approach to customization:

1. Site Editor -A. The WordPress Site Editor ( Appearance > Editor) is the main tool used to modify blocks themes. You are able to alter all aspects of your site such as headers, footers, templates, and individual blocks, through a user-friendly interface. Changes are applied instantly and it is 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. Theme Editor lets you customize the colors, fonts as well as spacing globally, ensuring consistency across the entire site. The Site Editor also allows users to alter these settings using visuals.
3. Blocks and patterns that can be reused • You are able to create reusable blocks and patterns to ensure consistency and simplify the process of design. Reusable blocks can be saved and added to any post or page, while block patterns are predefined layouts that can be customized to fit your needs.
4. Custom-designed templates Utilizing blocks, you are able to develop custom templates for various types of content in the Site Editor. This allows you to tailor the layout and design of certain pages and post types without writing any codes.
5. Plug-ins -- Like classic themes, block themes can also be enhanced by utilizing plugins. A variety of plugins were specifically designed to improve the functionality of the block editor by offering extra blocks, patterns and customization options.

Summary

Customizing WordPress themes lets you create a unique website that is functional. Classic themes are built on Theme Customizer, custom CSS as well as child themes. direct file edits for the flexibility. Block themes utilize the site Editor along with theme.json for a easier and clearer approach.

Both options provide the ability to customize your website to meet your requirements, whether you prefer either visual or coding.

Joel Olawanle

Joel is Joel is a Frontend Developer working as Technical Editor. Joel is an enthusiastic educator who is a lover of open source. He has written more than 300 technical articles majorly around JavaScript and it's frameworks.

•                   Website                                              
•                   LinkedIn                                              
•                   Twitter                                              
•                   YouTube