Style, theme, skin, template, widget, plugin… we use them interchangeably, but they sit at different layers and scopes. Here's each one drawn precisely — with a little animation that shows what it means — and how they fit together. They split cleanly into four families:
Family A · how it looks
Appearance
Style · Skin · Theme
Family B · how it's arranged
Structure
Layout · Template
Family C · the pieces
Building blocks
Elements · Components
Family D · what it does
Functionality
Widget · Plugin · Extension · Add-on
00 · the big split
Two questions, four families
Every term answers one of two questions about a website: how does it look and how is it arranged? — or — what can it do? Hold that split and the whole vocabulary falls into place.
Presentation & structure
how it looks & is arranged
The visual surface and the skeleton beneath it — what the user sees and where everything sits.
AppearanceStyle · Skin · Theme
StructureLayout · Template
Building blocksElements · Components
Functionality
what it can do
The features and behaviour — the things that extend what the base software can do, or add little functional modules to it.
These four are the most-confused of all — we'll spend the most time pulling them apart.
family A · appearance
Style ⊂ Skin ⊂ Theme
These three aren't separate ideas — they're the same thing at growing scope. A style is one set of rules; a skin is a swappable look; a theme is the whole presentation system.
Stylethe atomic visual rule
The actual visual rules — colours, fonts, spacing, borders. On the web this is CSS: the instructions that say how markup should look. It's the smallest unit of appearance.
WordPress:style.css — the stylesheet (and the file whose header identifies a theme).
Skina swappable coat of paint
A pre-packaged set of styles you can switch to change the look — without touching the structure, content, or features. “Re-skinning” = same app, different paint. Broader than one rule, narrower than a whole theme.
WordPress / builders: a style variation or “skin” for a block, widget, or whole site.
Themethe whole presentation package
The complete package that controls how an entire site looks and is laid out — styles, templates, and often functions, bundled together. The big umbrella over everything appearance-and-layout.
WordPress: a folder of templates + stylesheets + functions.php that defines the whole site's look & structure.
Same thing, growing scope
family B · structure
Layout vs Template
These two are about the skeleton, not the paint. The trick: a layout is the arrangement; a template is the reusable blueprint that produces one.
Layoutwhere things sit
The arrangement of pieces on a page — header up top, sidebar on the left, content in the middle, footer below; the columns and the grid. Layout answers “where does everything go?”, independent of the specific content or styling.
WordPress: the column/section arrangement you build with blocks or a page builder.
Templatea reusable blueprint
A predefined, reusable structure for a type of page, with placeholders where real content drops in. One template → many pages that share the same skeleton. A template encodes a layout.
WordPress:single.php, page.php, archive.php, or block templates — the theme supplies them.
A template is a blueprint → it produces a laid-out page
family C · building blocks
Elements → Components
The actual pieces a page is built from — and again it's a gradient: an element is a primitive; a component is several elements composed into one reusable unit.
Elementthe primitive brick
The basic building block of a page. Strictly, an HTML element — <p>, <img>, <button>. Loosely, a single visual piece: a heading, an image, a button. The smallest thing you place.
Builders (Elementor): the draggable basics — heading, image, button, spacer.
Componenta composed, reusable unit
A self-contained, reusable unit that bundles several elements — plus structure, style, and often behaviour — into one bigger block: a card, a navbar, a modal. Bricks form a prefab wall section.
React / blocks: a UI component (or a WordPress block) — reusable, with its own logic.
Elements compose into a component
family D · functionality
Widget, Plugin, Extension, Add-on
Now the messy cluster. A widget is a placeable mini-module; the other three all mean “code that adds a feature” — and differ mainly by what they extend.
Widgeta placeable functional module
A small, self-contained functional block you drop into a designated area of the UI — a sidebar, a footer. It does one job (search, recent posts, a calendar) and can be configured in place.
WordPress: the classic sidebar/footer widgets (Recent Posts, Search) — now largely handled by blocks in widget areas.
Pluginextends the core
A package of code that adds new functionality to the core software, hooking into it. This is WordPress's main extension mechanism — it plugs into hooks & filters and adds features the core didn't have.
WordPress: WooCommerce (e-commerce), Yoast (SEO) — they extend WordPress itself.
Extensionextends a base — often a platform
A generic word for “something that extends a base.” In some ecosystems it's simply their name for a plugin (browser extensions, VS Code extensions). In WordPress, it often means something that extends a platform or another plugin rather than the core.
WordPress: a “WooCommerce extension” adds to WooCommerce — not to core.
Add-onan optional supplement to a host
An extra, optional piece that adds a specific feature to one particular product — a plugin, a theme, a page builder — and usually depends on that host to work at all.
WordPress: “Elementor add-ons” bolt extra widgets onto Elementor; many plugins sell feature add-ons.
The crux — they differ by what they extend
The honest truth: plugin, extension, and add-on are near-synonyms used interchangeably every day. When people are precise, the difference is what they extend — the core (plugin), a platform or plugin (extension), or a specific host product (add-on) — plus whatever each ecosystem happens to call it.
the cheat-sheet
All eleven, side by side
Term
In one line
Scope / layer
WordPress
Style
The visual rules — colours, fonts, spacing (CSS).
appearance · atomic
style.css
Skin
A swappable set of styles; a re-paint.
appearance · variation
style variation
Theme
The whole look + layout package.
appearance · whole system
theme folder
Layout
The arrangement — where things sit.
structure · the result
block/section layout
Template
A reusable blueprint with placeholders.
structure · the blueprint
single.php · block templates
Element
A primitive building block (an HTML tag).
building block · primitive
heading, image, button
Component
A reusable unit composed of elements.
building block · composed
a block / UI component
Widget
A small functional module in a set area.
functionality · placeable
sidebar widgets
Plugin
Code that adds features to the core.
functionality · extends core
WooCommerce, Yoast
Extension
Generic “extends a base” (often a platform).
functionality · extends platform
WooCommerce extensions
Add-on
Optional supplement to a specific host.
functionality · extends a host
Elementor add-ons
the whole picture
How they all fit
One website · the eleven terms in their place
honest caveats
Where the words get slippery
1
Usage is ecosystem-dependent. WordPress, React, page builders, and browsers all bend these words a little differently. What's written here is the common, defensible meaning — not a universal law.
2
Plugin = Extension = Add-on, most days. In casual use they're swapped freely. The precise split — core vs platform/plugin vs a specific host — only matters when someone's being careful.
3
Style → Skin → Theme is a scope gradient, and Element → Component is a composition gradient. They're not separate species; each is a bigger version of the one before.
4
“Widget” is the most overloaded of all — a WordPress sidebar widget, an OS desktop widget, a JavaScript embed widget, and a page-builder element all wear the name. Always check which world you're in.
5
The line between component and widget blurs. Both are reusable units — “component” stresses composition & reuse, “widget” stresses a placeable, configurable function.
The vocabulary, in five lines
Appearance:Style (the rules / CSS) ⊂ Skin (a swappable look) ⊂ Theme (the whole presentation package).
Structure: a Layout is the arrangement; a Template is the reusable blueprint that produces one.
Building blocks: an Element is a primitive (an HTML tag); a Component is several elements composed into a reusable unit.
Functionality: a Widget is a placeable mini-module; Plugin / Extension / Add-on all add features, differing by what they extend — core, a platform, or a specific host.
Above all: these words are used loosely and by convention — know the precise meaning, but read the ecosystem you're in.
Same words, different layers.
Once you see the four families — look, arrangement, pieces, and power — the vocabulary stops being a tangle and becomes a map. Style is a rule; a theme is a world; a plugin is a power; and a widget is a little machine you drop in a slot.