The Case For Minimal WordPress Setups: A Contrarian View On Theme Frameworks - Related to theme, delta, layers, system, minimal

Organizing Design System Component Patterns With CSS Cascade Layers

I’m trying to come up with ways to make components more customizable, more efficient, and easier to use and understand, and I want to describe a pattern I’ve been leaning into using CSS Cascade Layers.

I enjoy organizing code and find cascade layers a fantastic way to organize code explicitly as the cascade looks at it. The neat part is, that as much as it helps with “top-level” organization, cascade layers can be nested, which allows us to author more precise styles based on the cascade.

The only downside here is your imagination, nothing stops us from over-engineering CSS. And to be clear, you may very well consider what I’m about to show you as a form of over-engineering. I think I’ve found a balance though, keeping things simple yet organized, and I’d like to share my findings.

Let’s explore a pattern for writing components in CSS using a button as an example. Buttons are one of the more popular components found in just about every component library. There’s good reason for that popularity because buttons can be used for a variety of use cases, including:

performing actions, like opening a drawer,.

navigating to different sections of the UI, and.

holding some form of state, such as focus or hover .

And buttons come in several different flavors of markup, like , input[type="button"] , and . There are even more ways to make buttons than that, if you can believe it.

On top of that, different buttons perform different functions and are often styled accordingly so that a button for one type of action is distinguished from another. Buttons also respond to state changes, such as when they are hovered, active, and focused. If you have ever written CSS with the BEM syntax, we can sort of think along those lines within the context of cascade layers.

.button {} .button-primary {} .button-secondary {} .button-warning {} /* etc. */.

Okay, now, let’s write some code. Specifically, let’s create a few different types of buttons. We’ll start with a .button class that we can set on any element that we want to be styled as, well, a button! We already know that buttons come in different flavors of markup, so a generic .button class is the most reusable and extensible way to select one or all of them.

.button { /* Styles common to all buttons */ }.

This is where we can insert our very first cascade layer! Remember, the reason we want a cascade layer in the first place is that it allows us to set the CSS Cascade’s reading order when evaluating our styles. We can tell CSS to evaluate one layer first, followed by another layer, then another — all . This is an incredible feature that grants us superpower control over which styles “win” when applied by the browser.

We’ll call this layer components because, well, buttons are a type of component. What I like about this naming is that it is generic enough to support other components in the future as we decide to expand our design system. It scales with us while maintaining a nice separation of concerns with other styles we write down the road that maybe aren’t specific to components.

/* Components top-level layer */ @layer components { .button { /* Styles common to all buttons */ } }.

Here is where things get a little weird. Did you know you can nest cascade layers inside classes? That’s totally a thing. So, check this out, we can introduce a new layer inside the .button class that’s already inside its own layer. Here’s what I mean:

/* Components top-level layer */ @layer components { .button { /* Component elements layer */ @layer elements { /* Styles */ } } }.

This is how the browser interprets that layer within a layer at the end of the day:

@layer components { @layer elements { .button { /* button styles... */ } } }.

This isn’t a post just on nesting styles, so I’ll just say that your mileage may vary when you do it. Check out Andy Bell’s recent article about using caution with nested styles.

So far, we’ve established a .button class inside of a cascade layer that’s designed to hold any type of component in our design system. Inside that .button is another cascade layer, this one for selecting the different types of buttons we might encounter in the markup. We talked earlier about buttons being , , or and this is how we can individually select style each type.

We can use the :is() pseudo-selector function as that is akin to saying, “If this .button is an element, then apply these styles.”.

/* Components top-level layer */ @layer components { .button { /* Component elements layer */ @layer elements { /* styles common to all buttons */ &:is(a) { /* specific styles */ } &:is(button) { /* specific styles */ } /* etc. */ } } }.

I’m going to fill in our code with the common styles that apply to all buttons. These styles sit at the top of the elements layer so that they are applied to any and all buttons, regardless of the markup. Consider them default button styles, so to speak.

/* Components top-level layer */ @layer components { .button { /* Component elements layer */ @layer elements { background-color: darkslateblue; border: 0; color: white; cursor: pointer; display: grid; font-size: 1rem; font-family: inherit; line-height: 1; margin: 0; padding-block: [website]; padding-inline: 1rem; place-content: center; width: fit-content; } } }.

I’m going to create a new cascade sub-layer directly under the elements sub-layer called, creatively, states :

/* Components top-level layer */ @layer components { .button { /* Component elements layer */ @layer elements { /* Styles common to all buttons */ } /* Component states layer */ @layer states { /* Styles for specific button states */ } } }.

Pause and reflect here. What states should we target? What do we want to change for each of these states?

Some states may share similar property changes, such as :hover and :focus having the same background color. Luckily, CSS gives us the tools we need to tackle such problems, using the :where() function to group property changes based on the state. Why :where() instead of :is() ? :where() comes with zero specificity, meaning it’s a lot easier to override than :is() , which takes the specificity of the element with the highest specificity score in its arguments. Maintaining low specificity is a virtue when it comes to writing scalable, maintainable CSS.

/* Component states layer */ @layer states { &:where(:hover, :focus-visible) { /* button hover and focus state styles */ } }.

But how do we upgrade the button’s styles in a meaningful way? What I mean by that is how do we make sure that the button looks like it’s hovered or in focus? We could just slap a new background color on it, but ideally, the color should be related to the background-color set in the elements layer.

So, let’s refactor things a bit. Earlier, I set the .button element’s background-color to darkslateblue . I want to reuse that color, so it behooves us to make that into a CSS variable so we can upgrade it once and have it apply everywhere. Relying on variables is yet another virtue of writing scalable and maintainable CSS.

I’ll create a new variable called --button-background-color that is initially set to darkslateblue and then set it on the default button styles:

/* Component elements layer */ @layer elements { --button-background-color: darkslateblue; background-color: var(--button-background-color); border: 0; color: white; cursor: pointer; display: grid; font-size: 1rem; font-family: inherit; line-height: 1; margin: 0; padding-block: [website]; padding-inline: 1rem; place-content: center; width: fit-content; }.

Now that we have a color stored in a variable, we can set that same variable on the button’s hovered and focused states in our other layer, using the relatively new color-mix() function to convert darkslateblue to a lighter color when the button is hovered or in focus.

Back to our states layer! We’ll first mix the color in a new CSS variable called --state-background-color :

/* Component states layer */ @layer states { &:where(:hover, :focus-visible) { /* custom property only used in state */ --state-background-color: color-mix( in srgb, var(--button-background-color), white 10% ); } }.

We can then apply that color as the background color by updating the background-color property.

/* Component states layer */ @layer states { &:where(:hover, :focus-visible) { /* custom property only used in state */ --state-background-color: color-mix( in srgb, var(--button-background-color), white 10% ); /* applying the state background-color */ background-color: var(--state-background-color); } }.

If we think about the order of the cascade — always flowing from top to bottom — we don’t want the modified styles to affect the styles in the states layer we just made. So, let’s add a new modifiers layer in between elements and states :

/* Components top-level layer */ @layer components { .button { /* Component elements layer */ @layer elements { /* etc. */ } /* Component modifiers layer */ @layer modifiers { /* new layer! */ } /* Component states layer */ @layer states { /* etc. */ } }.

Similar to how we handled states , we can now upgrade the --button-background-color variable for each button modifier. We could modify the styles further, of course, but we’re keeping things fairly straightforward to demonstrate how this system works.

We’ll create a new class that modifies the background-color of the default button from darkslateblue to darkgreen . Again, we can rely on the :is() selector because we want the added specificity in this case. That way, we override the default button style with the modifier class. We’ll call this class .success (green is a “successful” color) and feed it to :is() :

/* Component modifiers layer */ @layer modifiers { &:is(.success) { --button-background-color: darkgreen; } }.

If we add the .success class to one of our buttons, it becomes darkgreen instead darkslateblue which is exactly what we want. And since we already do some color-mix() -ing in the states layer, we’ll automatically inherit those hover and focus styles, meaning darkgreen is lightened in those states.

/* Components top-level layer */ @layer components { .button { /* Component elements layer */ @layer elements { --button-background-color: darkslateblue; background-color: var(--button-background-color); /* etc. */ /* Component modifiers layer */ @layer modifiers { &:is(.success) { --button-background-color: darkgreen; } } /* Component states layer */ @layer states { &:where(:hover, :focus) { --state-background-color: color-mix( in srgb, var(--button-background-color), white 10% ); background-color: var(--state-background-color); } } } }.

We can refactor any CSS property we need to modify into a CSS custom property, which gives us a lot of room for customization.

/* Components top-level layer */ @layer components { .button { /* Component elements layer */ @layer elements { --button-background-color: darkslateblue; --button-border-width: 1px; --button-border-style: solid; --button-border-color: transparent; --button-border-radius: [website]; --button-text-color: white; --button-padding-inline: 1rem; --button-padding-block: [website]; background-color: var(--button-background-color); border: var(--button-border-width) var(--button-border-style) var(--button-border-color); border-radius: var(--button-border-radius); color: var(--button-text-color); cursor: pointer; display: grid; font-size: 1rem; font-family: inherit; line-height: 1; margin: 0; padding-block: var(--button-padding-block); padding-inline: var(--button-padding-inline); place-content: center; width: fit-content; } /* Component modifiers layer */ @layer modifiers { &:is(.success) { --button-background-color: darkgreen; } &:is(.ghost) { --button-background-color: transparent; --button-text-color: black; --button-border-color: darkslategray; --button-border-width: 3px; } } /* Component states layer */ @layer states { &:where(:hover, :focus) { --state-background-color: color-mix( in srgb, var(--button-background-color), white 10% ); background-color: var(--state-background-color); } } } }.

[website] Look closer at that demo and check out how I’m adjusting the button’s background using light-dark() — then go read Sara Joy’s “Come to the light-dark() Side” for a thorough rundown of how that works!

What do you think? Is this something you would use to organize your styles? I can see how creating a system of cascade layers could be overkill for a small project with few components. But even a little toe-dipping into things like we just did illustrates how much power we have when it comes to managing — and even taming — the CSS Cascade. Buttons are deceptively complex but we saw how few styles it takes to handle everything from the default styles to writing the styles for their states and modified versions.

In this article, we'll walk through how to provision Amazon Web Services (AWS) Relational Database Service (RDS) instances for both MySQL and PostgreS......

In this article, I will discuss the practical application of large language models (LLMs) in combination with traditional automation tools like Python......

Adam’s such a mad scientist with CSS. He’s been putting together a series of “notebooks” that make it easy for him to demo code. He’s got one for grad......

Handling Dynamic Data Using Schema Evolution in Delta

One of the biggest challenges of managing data nowadays is its constantly changing nature. We in the recent past came across a requirement to ingest survey data and send it for sentimental analysis. The survey data is very dynamic, and even for existing surveys, new questions will be added, modified, or deleted.

As the data source evolves and adapts to new changes, the challenge is how to deal with the dynamically changing data to be represented in a table format. We implemented this by leveraging the schema evolution feature in Delta tables.

Delta Lake (or Delta Table) is designed to bring reliability and robustness to data lakes. Delta Lake is an open-source table format that supports ACID transactions, scalable metadata handling, enhanced data reliability, faster query performance, and seamless integration with Spark.

Delta Lake also supports schema evolution. In data management, the ability to change the structure of data over time is a common requirement, known as schema evolution.

The source data is semi-structured data, and in this case, we receive the file in text format. Usually, these kinds of data are available in XML or JSON file formats. The first step is to read the data from the source and flatten it accordingly to the data governance standards.

In this example, we receive source data in four batches, and each batch will be ingested in the Delta table one after the other. The Delta table is created initially with this structure.

SQL CREATE TABLE IF NOT EXISTS surveydb.CampaignTable ( CustomerID STRING ,Tier STRING ,CampaignQn1 STRING ) USING DELTA LOCATION '/mnt/blobname/DeltaLake/CampaignTable'

This is the Pyspark code that is used to load the incoming Dataframe to the Delta table, and this is executed for every batch. Delta does not allow us to append data with mismatched schema by default, and this feature is known as schema enforcement. So, we do an empty Dataframe append with schema merge and then do the regular merge.

Let’s examine the source data and the Delta table structure after the execution of each batch. In the initial batch, the data is received in the same structure as the table, but that is not mandatory in this approach.

CustomerID Tier CampaignQn1 1001 Tier2 Q1_1001.

Target table after the initial batch is loaded.

In the second batch, a new column is added to the source data. The write command with the mergeSchema option and limit(0) will only append schema, so the new column CampaignQn2 is automatically added to the table.

The merge command that follows next will only insert specific columns available on the list. The MergeColumns list has only the columns available in the incoming Dataframe. In this way, the new column is created and loaded with data.

CustomerID Tier CampaignQn1 CampaignQn2 1003 Tierl Q1_1003 Q2_1003.

Unlike the previous batches, here, the incoming data have CampaignQn1 column missing. Even though the mergeSchema runs, there is no schema change, then the merge command with MergeColumns list inserts only the columns available in the source Dataframe.

CustomerID Tier CampaignQn2 1005 Tier1 Q2_1005.

Here, the column positions are shuffled, and there is a new column, CampaignQn3 . The mergeSchema makes an empty Dataframe and appends with schema merge, and that creates the new column.

The column position change is handled by naming the columns during merge using the MergeColumns list. In this way, the data is appended in the correct columns in the Delta table.

CustomerID Tier CampaignQn3 CampaignQn2 1007 Tier1 Q3_1007 Q2_1007.

This allows us to change the schema of the table without doing a full data rewrite. This feature offers a lot of flexibility, but we must use it carefully. In Delta, the delta log tracks all the schema and data changes. In addition to that, we can track the history of these changes by using the describe history command.

SQL DESCRIBE HISTORY surveydb.CampaignTable.

Delta Lake allows us to add, change, or delete columns in a table without impacting data pipelines and thereby simplifies schema evolution. In addition to that, it tracks changes, making it easier to understand how the data has evolved over time. Schema enforcement and evolution in Delta help maintain data consistency and integrity by preventing errors, resulting in improved data quality and more efficient data governance.

The automatic schema evolution in Delta is a very useful feature when dealing with dynamic data reports and supports most complex scenarios. When data reports evolve, we can avoid the manual intervention of updating the table schema with a straightforward command that can be executed along with the load process. Schema evolution is especially useful when consuming multiple data reports with dynamically changing data.

As a best-selling author, I invite you to explore my books on Amazon. Don't forget to follow me on Medium and show your support. Thank you! Your suppo......

Why Calling [website] is Not Allowed in Java.

Java follows a strict object-oriented approach with a well-defined inheritance model. Unlike ......

The world of NPM is massive. Over 2 million packages, and yet, most developers end up using the same 20-30 over and over again.

The Case For Minimal WordPress Setups: A Contrarian View On Theme Frameworks

The Case For Minimal WordPress Setups: A Contrarian View On Theme Frameworks.

Modern frameworks are supposed to help speed up development while providing modern tools and a developer-friendly workflow. In theory, this is great and makes a lot of sense. In reality, Kevin Leary has found that they cause far more problems than they solve. This ultimately leads to the big question: why are modern theme frameworks so popular, and do they really benefit developers in the long run? Modern frameworks are supposed to help speed up development while providing modern tools and a developer-friendly workflow. In theory, this is great and makes a lot of sense. In reality, Kevin Leary has found that they cause far more problems than they solve. This ultimately leads to the big question: why are modern theme frameworks so popular, and do they really benefit developers in the long run?

When it comes to custom WordPress development, theme frameworks like Sage and Genesis have become a go-to solution, particularly for many agencies that rely on frameworks as an efficient starting point for client projects. They promise modern standards, streamlined workflows, and maintainable codebases. At face value, these frameworks seem to be the answer to building high-end, bespoke WordPress websites. However, my years of inheriting these builds as a freelance developer tell a different story — one rooted in the reality of long-term maintenance, scalability, and developer onboarding.

As someone who specializes in working with professional websites, I’m frequently handed projects . This experience has given me a unique perspective on the real-world implications of these tools over time. While they may look great in an initial pitch, their complexities often create friction for future developers, maintenance teams, and even the businesses they serve.

This is not to say frameworks like Sage or Genesis are without merit, but they are far from the universal “best practice” they’re often touted to be.

Below, I’ll share the lessons I’ve learned from inheriting and working with these setups, the challenges I’ve faced, and why I believe a minimal WordPress approach often provides a enhanced path forward.

Frameworks are designed to make WordPress development faster, cleaner, and optimized for current best practices. Agencies are drawn to these tools for several reasons:

Frameworks like Sage adopt PSR-2 standards, composer-based dependency management, and MVC-like abstractions.

Frameworks like Sage adopt PSR-2 standards, composer-based dependency management, and MVC-like abstractions. Reusable components.

Sage’s Blade templating encourages modularity, while Genesis relies on hooks for extensive customization.

Sage’s Blade templating encourages modularity, while Genesis relies on hooks for extensive customization. Streamlined design tools.

Integration with Tailwind CSS, SCSS, and Webpack (or newer tools like Bud) allows rapid prototyping.

Integration with Tailwind CSS, SCSS, and Webpack (or newer tools like Bud) allows rapid prototyping. Optimized performance.

Frameworks are typically designed with lightweight, bloat-free themes in mind.

Frameworks are typically designed with lightweight, bloat-free themes in mind. Team productivity.

By creating a standardized approach, these frameworks promise efficiency for larger teams with multiple contributors.

On paper, these benefits make frameworks an enticing choice for agencies. They simplify the initial build process and cater to developers accustomed to working with modern PHP practices and JavaScript-driven tooling. But whenever I inherit these projects years later, the cracks in the foundation begin to show.

Meet Image Optimization, Addy Osmani’s new practical guide to optimizing and delivering high-quality images on the web. Everything in one single 528-pages book. Jump to table of contents ↬.

The Reality of Maintaining Framework-Based Builds.

While frameworks have their strengths, my firsthand experience reveals recurring issues that arise when it’s time to maintain or extend these builds. These challenges aren’t theoretical — they are issues I’ve encountered repeatedly when stepping into an existing framework-based site.

One of the selling points of frameworks is their use of abstractions, such as Blade templating and controller-to-view separation. While these patterns make sense in theory, they often lead to unnecessary complexity in practice.

For instance, Blade templates abstract PHP logic from WordPress’s traditional theme hierarchy. This means errors like syntax issues don’t provide clear stack traces pointing to the actual view file — rather, they reference compiled templates. Debugging becomes a scavenger hunt, especially for developers unfamiliar with Sage’s structure.

Take [website], a popular news outlet with millions of monthly visitors. When I first inherited their Sage-based theme, I had to bypass their Lando/Docker environment to use my own minimal Nginx localhost setup. The theme was incompatible with standard WordPress workflows, and I had to modify build scripts to support a traditional installation. Once I resolved the environment issues, I realized their build process was incredibly slow, with hot module replacement only partially functional (Blade template changes wouldn’t reload). Each save took 4–5 seconds to compile.

Faced with a decision to either upgrade to Sage 10 or rebuild the critical aspects, I opted for the latter. We drastically improved performance by replacing the Sage build with a simple Laravel Mix process. The new build process was reduced from thousands of lines to 80, significantly improving developer workflow. Any new developer could now understand the setup quickly, and future debugging would be far simpler.

While Sage encourages “best practices,” these patterns can feel rigid and over-engineered for simple tasks. Customizing basic WordPress functions — like adding a navigation menu or tweaking a post query — requires following the framework’s prescribed patterns. This introduces a learning curve for developers who aren’t deeply familiar with Sage, and slows down progress for minor adjustments.

Traditional WordPress theme structures, by contrast, are intuitive and widely understood. Any WordPress developer, regardless of background, can jump into a classic theme and immediately know where to look for templates, logic, and customizations. Sage’s abstraction layers, while well-meaning, limit accessibility to a smaller, more niche group of developers.

When working with Sage, issues with hosting environments are inevitable. For example, Sage’s use of Laravel Blade compiles templates into cached PHP files, often stored in directories like /wp-content/cache . Strict file system rules on managed hosting platforms, like WP Engine, can block these writes, leading to white screens or broken templates after deployment.

This was precisely the issue I faced with [website], which was running a Sage theme on WP Engine. Every Git deployment resulted in a white screen of death due to PHP errors caused by Blade templates failing to save in the intended cache directory. The solution, recommended by WP Engine support, was to use the system’s /tmp directory. While this workaround prevented deployment errors, it undermined the purpose of cached templates, as temporary files are cleared by PHP’s garbage collection. Debugging and implementing this solution consumed significant time — time that could have been avoided had the theme been designed with hosting compatibility in mind.

Upgrading from Sage 9 to Sage 10 — or even from older versions of Roots — often feels like a complete rebuild. These breaking changes create friction for businesses that want long-term stability. Clients, understandably, are unwilling to pay for what amounts to refactoring without a visible return on investment. As a result, these sites stagnate, locked into outdated versions of the framework, creating problems with dependency management ([website], Composer packages, [website] versions) and documentation mismatches.

One agency subcontract I worked on lately gave me insight into Sage 10’s latest approach. Even on small microsites with minimal custom logic, I found the Bud-based build system sluggish, with watch processes taking over three seconds to reload.

For developers accustomed to faster workflows, this is unacceptable. Additionally, Sage 10 introduced new patterns and directives that departed significantly from Sage 9, adding a fresh learning curve. While I understand the appeal of mirroring Laravel’s structure, I couldn’t shake the feeling that this complexity was unnecessary for WordPress. By sticking to simpler approaches, the footprint could be smaller, the performance faster, and the maintenance much easier.

The issues above boil down to one central theme: over-engineering.

Frameworks like Sage introduce complexity that, while beneficial in theory, often outweighs the practical benefits for most WordPress projects.

When you factor in real-world constraints — like tight budgets, frequent developer turnover, and the need for intuitive codebases — the case for a minimal approach becomes clear.

Minimal WordPress setups embrace simplicity:

Traditional WordPress theme hierarchy is straightforward, predictable, and accessible to a broad developer audience.

Traditional WordPress theme hierarchy is straightforward, predictable, and accessible to a broad developer audience. Reduced tooling overhead.

Avoiding reliance on tools like Webpack or Blade removes potential points of failure and speeds up workflows.

Avoiding reliance on tools like Webpack or Blade removes potential points of failure and speeds up workflows. Future-proofing.

A standard theme structure remains compatible with WordPress core updates and developer expectations, even a decade later.

Like many things, this all sounds great and makes sense in theory, but what does it look like in practice? Seeing is believing, so I’ve created a minimal theme that exemplifies some of the concepts I’ve described here. This theme is a work in progress, and there are plenty of areas where it needs work. It provides the top functions that custom WordPress developers seem to want most in a theme framework.

Before we dive in, I’ll list out some of the key benefits of what’s going on in this theme. Above all of these, working minimally and keeping things simple and easy to understand is by far the largest benefit, in my opinion.

A watch task that compiles and reloads in under 100ms;

Sass for CSS preprocessing coupled with CSS written in BEM syntax;

Built-in support for the Advanced Custom Fields plugin;

Global context variables for common WordPress data: site_url , site_description , site_url , theme_dir , theme_url , primary_nav , ACF custom fields, the_title() , the_content() .

Twig is included with this theme, and it is used to load a small set of commonly used global context variables such as theme URL, theme directory, site name, site URL, and so on. It also includes some core functions as well, like the_content() , the_title() , and others you’d routinely often use during the process of creating a custom theme. These global context variables and functions are available for all URLs.

While it could be argued that Twig is an unnecessary additional abstraction layer when we’re trying to establish a minimal WordPress setup, I chose to include it because this type of abstraction is included in Sage. But it’s also for a few other significant reasons:

You won’t need to worry about any future breaking changes in future versions, and it’s widely in use today. All the functions I commonly see used in Sage Blade templates can easily be handled with Twig similarly. There really isn’t anything you can do with Blade that isn’t possible with Twig.

Blade is a great templating language, but it’s best suited for Laravel, in my opinion. BladeOne does provide a good way to use it as a standalone templating engine, but even then, it’s still not as performant under pressure as Twig. Twig’s added performance, when used with small, efficient contexts, allows us to avoid the complexity that comes with caching view output. Compile-on-the-fly Twig is very close to the same speed as raw PHP in this use case.

Most importantly, Twig was built to be portable. It can be installed with composer and used within the theme with just 55 lines of code.

Now, in a real project, this would probably be more than 55 lines, but either way, it is, without a doubt, much easier to understand and work with than Blade. Blade was built for use in Laravel, and it’s just not nearly as portable. It will be significantly easier to identify issues, track them down with a direct stack trace, and fix them with Twig.

The view context in this theme is deliberately kept sparse, during a site build you’ll add what you specifically need for a particular site. A lean context for your views helps with performance and workflow.

The template hierarchy follows the patterns of good ol’ WordPress, and while some developers don’t like this, it is undoubtedly the most widely accepted and commonly understood standard. Each standard theme file uses a model where you define your data structures with PHP and hand off the theme as the context to a .twig view file.

Developers like the structure of separating server-side logic from a template, and in a classic MVC/MVVC pattern, we have our model, view, and controller. Here, I’m using the standard WordPress theme templates as models.

Currently, template files include some useful basics. You’re likely familiar with these standard templates, but I’ll list them here for posterity:

[website] : Displays a custom “Page Not Found” message when a visitor tries to access a page that doesn’t exist.

: Displays a custom “Page Not Found” message when a visitor tries to access a page that doesn’t exist. [website] : Displays a list of posts from a particular archive, such as a category, date, or tag archive.

: Displays a list of posts from a particular archive, such as a category, date, or tag archive. [website] : Displays a list of posts by a specific author, along with the author’s information.

: Displays a list of posts by a specific author, along with the author’s information. [website] : Displays a list of posts from a specific category.

: Displays a list of posts from a specific category. [website] : Contains the footer section of the theme, typically including closing HTML tags and widgets or navigation in the footer area.

: Contains the footer section of the theme, typically including closing HTML tags and widgets or navigation in the footer area. [website] : The template used for the site’s front page, either static or a blog, depending on the site settings.

: The template used for the site’s front page, either static or a blog, depending on the site settings. [website] : Adds custom functionality to the theme, such as registering menus and widgets or adding theme support for functions like custom logos or post thumbnails.

: Adds custom functionality to the theme, such as registering menus and widgets or adding theme support for functions like custom logos or post thumbnails. [website] : Contains the header section of the theme, typically including the site’s title, meta tags, and navigation menu.

: Contains the header section of the theme, typically including the site’s title, meta tags, and navigation menu. [website] : The fallback template for all WordPress pages is used if no other more specific template (like [website] or [website] ) is available.

: The fallback template for all WordPress pages is used if no other more specific template (like or ) is available. [website] : Displays individual static pages, such as “About” or “Contact” pages.

: Displays individual static pages, such as “About” or “Contact” pages. [website] : An image of the theme’s design is shown in the WordPress theme selector to give clients a preview of the theme’s appearance.

: An image of the theme’s design is shown in the WordPress theme selector to give consumers a preview of the theme’s appearance. [website] : Displays the results of a search query, showing posts or pages that match the search terms entered by the user.

: Displays the results of a search query, showing posts or pages that match the search terms entered by the user. [website] : Displays individual posts, often used for blog posts or custom post types.

: Displays individual posts, often used for blog posts or custom post types. [website] : Displays a list of posts associated with a specific tag.

Extremely Fast Build Process For SCSS And JavaScript.

The build is curiously different in this theme, but out of the box, you can compile SCSS to CSS, work with native JavaScript modules, and have a live reload watch process with a tiny footprint. Look inside the bin/*.js files, and you’ll see everything that’s happening.

There are just two commands here, and all web developers should be familiar with them:

While developing, it will reload or inject JavaScript and CSS changes into the browser automatically using a Browsersync. Build.

This task compiles all top-level *.scss files efficiently. There’s room for improvement, but keep in mind this theme serves as a concept.

Now for a curveball: there is no compile process for JavaScript. File changes will still be injected into the browser with hot module replacement during watch mode, but we don’t need to compile anything.

WordPress will load theme JavaScript as native ES modules, using WordPress [website]’s support for ES modules. My reasoning is that many sites now pass through Cloudflare, so modern compression is handled for JavaScript automatically. Many specialized WordPress hosts do this as well. When comparing minification to GZIP, it’s clear that minification provides trivial gains in file reduction. The vast majority of file reduction is provided by CDN and server compression. Based on this, I believe the benefits of a fast workflow far outweigh the additional overhead of pulling in build steps for webpack, Rollup, or other similar packaging tools.

We’re fortunate that the web fully supports ES modules today, so there is really no reason why we should need to compile JavaScript at all if we’re not using a JavaScript framework like Vue, React, or Svelte.

My perspective and the ideas I’ve shared here are undoubtedly contrarian. Like anything alternative, this is bound to ruffle some feathers. Frameworks like Sage are celebrated in developer circles, with strong communities behind them. For certain use cases — like large-scale, enterprise-level projects with dedicated development teams — they may indeed be the right fit.

Simplicity, in my view, is underrated in modern web development. A minimal WordPress setup, tailored to the specific needs of the project without unnecessary abstraction, is often the leaner, more sustainable choice.

Inheriting framework-based projects has taught me invaluable lessons about the real-world impact of theme frameworks. While they may impress in an initial pitch or during development, the long-term consequences of added complexity often outweigh the benefits. By adopting a minimal WordPress approach, we can build sites that are easier to maintain, faster to onboard new developers, and more resilient to change.

Modern tools have their place, but minimalism never goes out of style. When you choose simplicity, you choose a codebase that works today, tomorrow, and years down the line. Isn’t that what great web development is all about?

We're a place where coders share, stay up-to-date and grow their careers....

Incremental computation in data streaming means updating results as fresh data comes in, without redoing all calculations from the beginning. This met......

Amazon ne veut pas que les candidat(e)s aux offres d'emploi puissent utiliser l'IA / GenIA pour rédiger un CV, une lettre de motivation ou lire des ré......