What even is a WordPress?
Welcome to our third unit of the course, where we get to meet WordPress! Before we get started, let’s talk a little about what kind of thing WordPress is and why we might want such a thing.
Thankfully, the kind folks over at Kinsta have written an article that gets us off to a great start. Go read “What is WordPress?” and then come back here.
That’s a pretty good start, but we need to know a little bit more.
WordPress is a CMS
The Kinsta article mentions that WordPress is a CMS—a Content Management System. What is that? Well, it’s a system for managing content.
What kind of content?
Anything you might put on a website—at its most basic, this includes pages and media (images, etc.), but can even include forms, interactive bits and bobs, really just about anything.
Why does said content need systematic management?
So far in this course, we’ve been building relatively tiny web sites with a handful of pages. Even so, it can be a bit of a challenge to keep track of everything—page names, where media files are stored, and the like.
Now, imagine you’re running one of the sites the Kinsta article mentions—the official page for the White House, for example. You’ll have not just dozens, but hundreds and even thousands of pages to manage, not to mention all the accompanying photos, documents, etc. to keep track of. Trying to do so manually would quickly lead to madness.
A CMS, like WordPress, gives us a (relatively) easy-to-use system for creating, managing, and finding content on a larger site. In fact, the world-class website you’re reading right now is powered by WordPress!
We’ve been creating posters; WordPress is a poster-creation machine
So far in this course, the websites we’ve been creating are, at their core, little more than posters—fancy, semi-magical posters that can do Harry Potter-ish things like change size and position and maybe animate a little bit, but posters nonetheless.
The technical term for this is that we’ve been building static web sites—sites that don’t change on their own, but rather only when we update them. WordPress, on the other hand, is a dynamic site tool—it assembles pages on the fly programmatically out of information stored in its guts.
A helpful way to think about this: you and I could both visit the exact same URL at facebook.com1, and yet we’d see extremely different information. Not only that, but the facebook.com you’d see right now and the one you’d see three hours from now would be different, as well.
Facebook’s a big company, but clearly they’re not hand-assembling in VS Code each unique rendition of facebook.com for each visit made by each of its two billion users. As users, this is obvious enough, but we’re no longer simply web users. We’re web developers! And as such, it bears considering how this happens on a technical level.
Briefly on PHP and MySQL
At the end of the day, the machine that is WordPress outputs web pages made of good old-fashioned HTML, CSS, and JavaScript2. Because it creates websites, it must do so!
However, WordPress creates these sites far differently than we’ve done so far this semester. It stores much of its content in a database written in a language called MySQL (pronounced either my-sequel or my-s-q-l—either’s fine) and assembles that content by following instructions written in a server-side programming language called PHP.
We’ll break down all that jargon momentarily, but before we do, there’s one important consequence of these facts that we can already go ahead and discuss. Both PHP and MySQL are in essence programs that must be installed and running for a WordPress site to function. While it’s possible to do so on a local machine, in this class, we’ll only be working with WordPress on our servers, which have PHP and MySQL preinstalled. So, for WordPress, there’ll be no local development and no transferring from your machine to the server—everything will take place only on your server.
MySQL
First, a database: though there’s an astounding variety of database types, it’s useful enough to think of the kind we’ll be using as a cleverly-organized and therefore extremely powerful collection of spreadsheets, in that they store data in columns and rows.
In the case of WordPress, the system for doing so is called MySQL, with the SQL standing for Structured Query Language. The SQL part is how we extract data from a database—we use structured queries to tell the database to go and retrieve data matching a certain set of conditions.
The data WordPress stores in its MySQL database is surprisingly varied—it’s everything from simple metadata about a page (when it was created, its author, etc.) to the HTML content of the page itself.
This leads to two important—and related—practical consequences. The first is that, because so much is stored in WordPress’s database, we’ll essentially always only work with WordPress through its web interface and not through a separate code editor like VS Code.
The second consequence is that, while there will be a directory on our servers where WordPress is installed that’ll contain files essential to WordPress’s functioning, our WordPress site, unlike our sites so far, is not just the set of files you see in Finder or in Cyberduck. Rather, it is those files plus the data stored in your database. This means that backing up your entire WordPress site—files + database—is essential.
PHP
PHP stands for PHP: Hypertext Preprocessor. While the first P standing for PHP is a dumb programmer joke3, the HP standing for Hypertext Preprocessor is actually pretty useful. PHP is a server-side scripting language, meaning that PHP code is executed on the server, not the user’s machine (like, for example, JavaScript, which (for our purposes) runs on the user’s machine, and is called a client-side scripting language), and preprocesses hypertext—the stuff in HTML.
What does that mean in practical terms? WordPress uses PHP to programmatically assemble pages on the server and then, once built, assemble them into HTML, CSS, and JavaScript files transmitted to the user. The user—someone visiting your WordPress site—never sees the PHP, just the resulting output.
So, while a user will just see a regular web page, behind the scenes, a series of linked PHP files will go and fetch the various parts of the website we might need and assemble them on the fly into the page the user has requested.
For example, in Projects 1 and 2, you might have noticed it was a bit of a hassle keeping the <header> of each page or panel up to date as you made changes to it. WordPress, via PHP, has a solution to this! Instead of having a copy your <header> stored on every page of your site, your WordPress site will contain a PHP file (which ends in .php) that will look a lot like regular HTML, but will have a bit of code sprinkled in that will look like this:
<?php get_header(); ?>
This is what PHP code looks like, and this particular bit of code is designed to work in conjunction with MySQL and other bits of WordPress to go and fetch the header for the site from where it’s stored (usually in a combination of other PHP files and information from our WordPress database) and drop it into your page. This way, you create your <header> once and update it one place, and each page is automatically served an up-to-date copy. Neat, huh?
The good news
You might be reasonably thinking that, while all of this sounds…fine?, it also sounds quite complicated. The good news is that, while it’s essential to understand what PHP and MySQL are so that you have a correct mental model of how WordPress functions, you’ll rarely if ever have to work with them to successfully use WordPress or complete this course.
Life Web development is a series of tradeoffs
The other thought that you might already be having—and that many NMIX 4110 students have as they delve into WordPress—is that all of this is a lot more complicated than just building static sites, especially ones built using Bootstrap.
You—and your peers—would be correct! While WordPress does provide a nice visual front-end for simply adding content, for doing the work of this class—laying out pages just the way we want, for example—WordPress is in fact more complicated. It’s a common experience to want to make a visual change to a site only to get lost in the PHP machinery that’s assembling your site and throw your hands up in frustration. What gives?
Compared to sites built with Bootstrap, WordPress is a more complicated tool, but also a more powerful one. For smaller sites that contain only one or a small handful of pages, a static Bootstrap site is not only an appropriate choice, but a better one!
However, for larger sites, or for sites that need more complex functionality, the value WordPress provides is immense. For a more complicated or larger-scope job, you simply need a more powerful tool.
Look on the bright side
Before concluding here, though, it’s important to note the WordPress isn’t just some cumbersome tool to be used reluctantly only when necessary. It also offers a boatload of quality-of-life improvements as well: things like visual page builders, version history, multiple users with different permissions, and of course, all the wonderful themes and plugins that’ve led WordPress to power nearly one out of three sites on the web.
So, with all that, you hopefully have a reasonably clear sense of what WordPress is, how it works, and what it’s for.