This post has been on my mind for awhile but was kind of tricky to actually write. I definitely don’t want to “dumb down” the technology behind WordPress (or any content management system), but I feel like people so quickly turn away because of how complicated they think these concepts are going to be, when really they could understand them if they just started with the basics.

So this is my attempt at those basics. Yes, it definitely skips some of the complexity and leaves a few details out. However, I think it touches on the most important things in a way that’s accessible. Please do let me know if you think I’ve missed the mark and/or should further elaborate on or clarify anything covered in the comments, I really value all feedback.

What the heck is a CMS?

Basically, a CMS is a program that helps you manage your content without needing to do (much) coding. WordPress is a CMS, as is Shopify. There are tons of them out there, and they vary a bit in how they work and sometimes in the programming languages they use but the basic concept is pretty much always the same.

When you use WordPress to write a post, for example, you are submitting information into a database which then gets spit back out into the template displaying your posts on your website.

How does it work?

Let me show you! (Click the image to enlarge it, right click to download if you’d like.)

In more detail please!

When you look at a WordPress theme for the first time (the actual files), it can look crazy. There’s a whole bunch of PHP, HTML, CSS, and sometimes javascript or jQuery, and that’s not even getting into the other folders and files that make up WordPress core & all your plugins. Let’s break down what you’re seeing step by step:

You enter content

If you’ve ever used any blogging platform, you’re familiar with a WYSIWYG (“what you see is what you get”) post editor. Those editors are just fancy forms that spit the information you enter (title, content, tags, etc.) into a database.

PHP in your theme grabs the content

Your theme uses a bunch of PHP template tags to pull that content back out of the database. These come in a variety of forms but they’ll often look something like:

<?php the_title(); ?>
<?php the_content(); ?>

Even if you don’t know PHP, I’m pretty sure you can guess what those two tags pull out of the database, especially if you took a close look at the image above. Those tags work with other PHP & MySQL written in WordPress core files to pull out the title and content for the post or page.

HTML in your theme provides structure

The PHP in your theme is (usually? always? I think always but somebody can surely prove me wrong) surrounded by HTML, which gives the page layout structure. Sometimes those PHP tags will also generate some of their own HTML, so you may not always see all the HTML right on the page when you look at a theme file.

For example, in this snippet we’ve wrapped our title and content into HTML headers and divs:

<header class="entry-header">
  <h1 class="entry-title"><?php the_title(); ?></h1>
</header>
<div class="entry-content">
  <?php the_content(); ?>
</div>

CSS in your theme styles the content

Let’s say you want that title to look different from your post body (normal). The CSS in the theme is what makes that happen. Browsers have default CSS that will do some of this, but usually not with an eye to beauty so themes typically specify this in their CSS stylesheets.

h1.entry-title {
  color: orchid;
  text-transform: uppercase;
}

Javascript & jQuery add interactivity

The final layer on this cake is interactivity. There’s some overlap between CSS and jQuery here, in that sometimes they do a little bit of each others’ jobs, but in general jQuery is used to add interactivity and fun effects to a site, such as lightboxes on images, slideshows, fancy drop downs, etc.

What happens when I change my theme?

Great question! When you change your WordPress theme, the database stays pretty much the same (some themes add new tables/ rows/ information to the database, though). The way the information is pulled out for display changes, though. The arrangement of template tags, HTML, and CSS is altered, and so all your same content gets pulled out, rearranged, and re-styled according to the new specifications.

---

So there you have it – the basics of how WordPress works. Shopify is very similar, but substitutes a programming language called Liquid for PHP.

Are you rolling your eyes because you already knew all of this (if so, I’m amazed you made it to the bottom of the post)? Was this at least a little bit helpful? I’d love to know what you think in the comments!