WordPress: themes, plugins and the era of 2010

WordPress is an open-source CMS in PHP and MySQL. A theme decides how a site looks, plugins what it can do; since version 3.0 (2010) it can build any site.

Where WordPress came from

In 2003 Matt Mullenweg and Mike Little took b2/cafelog, an abandoned blogging system, and carried it on as free software. That’s how WordPress began: an open-source CMS in PHP and MySQL. At first it could run a blog. The big leap came with version 3.0 (June 2010), which added custom post types (now you can create a “service” or a “person” in it, like the content model of lesson 1) and menus, and a blog tool turned into a CMS for any kind of site. In 2010 this is exactly how you would have built your site.

Today WordPress runs more than a third of all websites measured (35.6% on mobile in 2024, by the HTTP Archive’s Web Almanac), which is more than ten times the share of the next system, Wix.

Posts, pages and categories

The two main things in WordPress:

• A post is tied to time: news, an article, a note. Posts run as a feed, from fresh to old, and go into categories and tags.
• A page is a separate permanent section: “About”, “Contact”, “Services”. Pages form a hierarchy (“Services” can have subpages) and don’t run by date.

The question “what becomes a page, and what a post” you’ll answer for each section in the practice. For services people usually create a post type of their own: then they get fields of their own and a separate section in the admin screen.

The theme: how the site looks

A theme is a set of templates that decide how the site looks. A classic theme is a folder of PHP and CSS files:

• style.css: the styling (and the theme’s name, in a comment at the top);
• header.php, footer.php, sidebar.php: the header, the footer, the sidebar;
• index.php: the main template; single.php for one post, page.php for a page. The set of rules for which template WordPress picks for which address is called the template hierarchy;
• functions.php: the theme’s settings and what it loads.

Inside the templates works the loop (The Loop): “for each post that has to be shown, print the title, the date and the text”. It’s what puts the content from the database into the theme’s design. Click the areas in the diagram to see which file is responsible for which.

Header: Site name Menu: Section 1 · Section 2 · Section 3

The loop
Service and others Sidebar
widgets

Footer

The loop

Drawn by the theme file: index.php, single.php, page.php

The editor changes: Posts and pages: “Posts → Add New”. The theme decides how a card and a whole page look.

A plugin can: It can place an inquiry form right in the text (a shortcode), add a “Related posts” block or adjust the text before it is shown.

Plugins step in through hooks: at the right places the theme and the core say “something can be added or changed here”, and a plugin attaches to that place.

Text alternative: a WordPress page divides into a header, a menu, the loop of posts, a sidebar and a footer. Each area is drawn by its own theme file (header.php, index.php, sidebar.php, footer.php); the editor changes what the areas hold in the admin screen, and plugins attach to them through hooks.

Themes can be changed without touching the content: posts and pages stay in the database, and only the clothes change. Since 2022 (version 5.9) there are also “block” themes, set up in the visual site editor without editing PHP. Classic themes are still very common, though.

Plugins: what the site can do

A plugin adds capabilities: an inquiry form, search engine optimization (SEO), caching, backups, a shop, a gallery. They work through hooks: at the right places the core and the theme say “something can be added or changed here” (an action hook) or “here is a value, change it before it is shown” (a filter hook). A plugin attaches to such a place, and nothing in the core needs to be edited.

From this comes the rule that separates a theme from a plugin: looks are the theme, capabilities are the plugin. You can build a form into a theme, but when the theme is changed it’s lost. A form that’s a plugin stays.

The directory holds tens of thousands of plugins. The temptation to install plenty is understandable, but every plugin has a price: it’s someone else’s code that has to be updated, that may slow the site down, clash with another plugin or turn out to be a hole. A sensible set for a small site: an inquiry form, SEO, a cache, backups. That is all. The next lesson is about the price of other people’s code.

Check yourself: is an inquiry form the work of a theme or of a plugin?

A plugin’s. A form is a capability, not design. If you build it into the theme, it vanishes when the theme is changed.

The editor and blocks

The classic editor looked like Word. Since the end of 2018 (version 5.0) WordPress has had a block editor (it was called Gutenberg): a page is put together from blocks (a paragraph, an image, columns, a button) that can be moved around. Plugins add blocks too. For an editor this is convenient: every piece of the page is visible on its own.

Why WordPress won

Not because it’s better than everything else. There are several reasons, and they worked together. It runs on the cheapest hosting with PHP and MySQL (an install takes five minutes). It’s open source and free (the GPL license), and a huge community grew around it. It has thousands of ready-made themes and plugins, so most tasks are solved by setting things up, not by programming. And there are many specialists, so help is easy to find. The same reasons are the price: because it’s so widespread, WordPress is attacked more often than the rest.

Don’t confuse the two “WordPress”es. WordPress.org is the software itself, which you install on your own hosting. WordPress.com is a service where the company Automattic runs it for you for a fee, with limits on plugins on the cheaper plans. Hosting companies also sell “managed WordPress” plans, where they install, update and back up the software for you.

Practice

You’re in the era of 2010: a business orders a site on WordPress, and you choose a theme. In front of you is a theme in the spirit of that era: a fixed width, a sidebar, a gray background. Write the tagline, build the menu from your brief’s sections, show the main action button and make a plan: what becomes a page, which plugins are needed, and which of them serves the main action.

What was wrong then

A 2010 theme with a fixed width and a floated layout looks poor on a phone (the part on responsive design is about that), and a set of plugins gathered “for growth” turns into a burden. The next lesson is about that.