How the WordPress theme framework works

The theme framework can be said to be extremely powerful! For non-technical WordPress users, theme frameworks make it possible to build a website that is unique and looks like it is running a tailor-made theme, and for WordPress developers, they can help you use DRY (dry). Don’t copy yourself) and quickly build a custom website.

If you have used a third-party framework for a period of time and found that its code is bloated and lacks flexibility, and you feel very frustrated about it, or you just want to have full control over your own code, then build your own The theme framework is undoubtedly the best choice!

In this series of tutorials, you will learn how to create your own WordPress theme framework to build a website for yourself or your clients, or publish and share it with other users. You will go through the following stages of learning, including creating a parent theme with the basics of the framework, adding additional functionality, hooks (also called "hooks"), and more. You'll also learn how to use these techniques in your child themes and plugins, how to share your code with the public, and more.

But before you get started, you need to know how theme frameworks work, and what exactly makes them different from a standard parent theme.

I spent some time developing two theme frameworks that were applied to two types of client websites, and I continued to enhance and improve some of their applications over time. I have also worked with third parties to develop some theme frameworks. From my experience, a theme framework should have the following main features:

• Usually it mainly consists of a parent theme, which is designed to be used in conjunction with child themes. In some cases, the parent theme will be used alone, but in other cases, the parent theme must be used in conjunction with the child theme - which the WordPress Codex defines as a "base/starter theme" and a "code base" respectively. .
• Usually it includes some hooks and functions that can be exploited by child themes and plugins. Your theme framework is the foundation of the entire ecosystem, and it also includes some plugins that hook into the framework.
• If it is used by users who cannot program, it will include a theme options page, which allows users to customize the theme according to their own needs. Design, layout, functionality, content, etc. can be varied and mixed. In some cases, some functionality may be provided via the theme customizer.
• It may include multiple widget areas so non-technical users can add content or code via WordPress widgets (including widgets added via plugins that you write specifically for the framework).
• It may also include script library functionality such as jQuery sliders or lightbox effects. Depending on the needs of you and your users, you may need to incorporate these together in the theme framework, or provide some plug-ins that hook into the framework.
• Usually it is extensible and uses hooks to allow you to extend its functionality through child themes and related plugins.

Points 1 and 2 above are fundamental – without a parent theme, you won’t have a theme framework. A parent theme that does not have those hooks and functions can only be regarded as a basic parent theme, and cannot be said to be a real theme framework.

The above is about theme frameworks, but how do they work? Let’s start by looking at the elements of a theme framework:

• Parent theme and optional child themes
• Action and filter hooks
• Functions
• Theme options
• Widgets
• Scripts
• Extensibility

AD:Web Studio

Parent theme and child theme

The main component of a theme framework is the parent theme, which can be designed in two ways:

• As an initial theme, it can be customized through the theme options interface or theme device to customize. Examples include Atahualpa and Thematic. These two can serve as good examples of standalone themes without using subthemes.
• Since a foundation of the website needs to be added through a child theme, the theme framework will not be effectively used on the website without this child theme. Examples of this include Hybrid Core and Genesis. These will include some basic code that you would typically find in a theme with a series of hooks and functions that can be leveraged through child themes and of course through relevant plugins. All these constitute the API (Application Programming Interface) suitable for the theme framework.

Since one of the key features of theme frameworks is the DRY principle, whenever possible, your parent theme will utilize template parts and include files?, meaning you can access the same code in multiple places in your theme . This also makes it easier to rewrite code in a child theme, since you only need to replace a template component or create an include file.

I will not explain the concepts of parent theme and child theme here for the time being, because it will be introduced in the "Child Theme Tutorial". Although many theme frameworks are equipped with a series of sub-themes that support themselves, if you want to have other sub-themes that are more suitable for you, you have to develop them yourself.

If you are developing your own main framework, I recommend that you create at least one "initial" subtheme to avoid duplicating the work of developing each project: you may decide to create multiple subthemes for different types of projects. Basics, such as some subtopic blogs and non-blog sites.

Action Hooks and Filter Hooks

When adding custom code or changing the way a theme behaves, a theme framework will include a series of hooks that are linked to child themes and plugins:

• Action hooks will appear In multiple places in the code, you can add relevant code to your template files through functions written in the theme framework, which can be overridden through child themes. My own theme framework makes heavy use of action hooks, which are provided in all template files, allowing users to freely play with content such as widget areas, contact details, etc., and call action buttons whenever and wherever needed. and site-specific codes.
• Filter hooks can be used to change the way you use child themes or specific plug-in behaviors, such as custom loops, modifying static content, etc. Any static text (or code called from outside your site) should be wrapped within a filter so that it can change based on the needs of the child theme.

It’s worth spending some time in the early stages to think about what hooks you want to include, so you know what needs to be included via a hook and what can be written directly into your template file. You will learn about this in the following tutorials.

Functions

Your theme framework may also include a series of functions. Some of these will be hooked into action hooks and filter hooks that you have defined, while others are functions such as template tags, and child themes can use these functions.

If you have used any custom functions on some client websites, then you can add them to your theme framework as well. Also, you don't have to activate all functions: you only need to activate the functions related to the parent theme using the add_action() function on your subsite.

Theme Options

Theme Options interface is useful for any complex theme, especially for non-technical users. Some major theme frameworks include multiple theme options interfaces in their own admin area. Options include switching features, modifying layouts, adding content, and changing design elements such as colors, background images, fonts, title images, etc.

You can choose to use the theme customizer to complete many of your options. The advantage is that it allows your users to directly see their changes while customizing the theme. I did this for the Edupress theme framework, the school website I developed with Mark Wilkinson.

Widget Areas

Whether you need to choose to add a series of widget areas will depend on the audience of your theme framework: if it is only used by yourself or a small team of developers, you may not need to add a series of widget areas. Add any widget area above the standard sidebar and footer.

However, if your theme framework is aimed at non-technical users, you can give it more flexibility by registering multiple widget areas in various places in the theme framework. You can also register widget areas in the site header, standard sidebar and footer, before and/or after content, and below the footer.

The theme framework used by my client website contains four widget areas in the footer: the theme checks which ones are filled and adds CSS classes accordingly, so the filled widget areas will each occupy the appropriate portion of the page width.

Your widget area may be written directly into your template file, or you may decide (like me) to add it via an action hook at a relevant location on your site. This means they can be overridden in child themes, whether as optional widget areas or custom code.

Scripts

If a given script is likely to be used by some websites built on top of your own theme framework, or if your users are non-technical and you want to provide more options, then you You can include specific scripts in your frame, such as a slider or lightbox script. This saves the user from having to install additional plugins, but it can be bloated if the scripts are not actually necessary, which is where it falls short.

Again, this will depend on your audience and expected needs: if it's just a framework you're working with, I recommend using these scripts to develop (or identify) these plugins and use them whenever you need them.

If you actually include these scripts, it is equivalent to including the enable and disable options on the theme options interface.

Scalability

If your framework is currently useful for a certain set of websites, you may want it to be scalable in the future. The parent theme that forms the core of the framework is equivalent to the heart of this ecosystem. You and your theme users will further improve and add more options and features to your website. This will include:

• Child themes or initial themes - these lists are likely to change over time, especially if you release your theme to the public.
• Plugins designed specifically for your framework are often activated via framework-specific hooks.

It may also include some useful documentation for other developers who want to use your framework: The most important theme framework comes with extensive documentation that developers can use to customize the websites they build on the framework or for other Users create some child themes or plugins.

Summary

Theme framework is a very powerful tool in the WordPress developer’s arsenal. As we can see, it’s crucial not only for the thousands of non-technical owners who use it to create custom WordPress sites, but also for any other developer out there. tools, whether these developers want to create a variety of websites for themselves or their clients.

Theme frameworks usually have some of these characteristics: extensibility and flexibility, and allow you or your users to easily customize the website by using child themes and accessing related functions and hooks provided by your framework.

We already know how the theme framework works. In the next lessons in this series, you will understand what your framework needs to do, who it needs to work for, etc., and this will help you decide on your theme framework. the most appropriate development path.