Intro to WordPress

April 22nd, 2022

typewriter

Content management systems (or CMS for short) are used to manage the creation and modification of digital content. There are quite a few web page CMS options out there, but one stands out from the rest as the most widely used. Enter WordPress. WordPress is a free, open-source content management system. It's written in PHP and paired with a MySQL (or MariaDB) database. WordPress is very popular among those with little to no coding experience who want to create and manage a website for cheap. It's also popular among freelance web developers with small business clients. Although it's not at the forefront of web developement tech like it was in it's hay day, it still holds its own. WordPress was originally intended to be a tool for bloggers (hence the name), but over the years folks have started using it for much, much more. Pretty much anyone can use it - it's unique in that you can set up a pretty formidable site with no code at all ...orrr you can go under the hood and customize whatever you want.

Recently I decided to check it out for myself. In a nutshell - when you're setting up a WordPress site, first you pick the "theme" you'd like to use. This determines the overall feel of your site. A theme will take care of things like layout, styling, fonts, etc. Then you can add to your site with "plugins". Plugins are pretty much just functionality developers have created and made available for others to use. There are plenty of free plugins, but some are paid.

From a web development perspective I got the sense that once you get a feel for PHP language basics, the WordPress "loop", and how to create your own themes and plugins - it's a very powerful tool. But this wasn't immedeately obvious. I was confused at first. Where should you start? How do I host my site? I wanted to make a blog post that'll help folks get their first project up and running. I feel a good starting point is to spin up a site and bring in a super minimal theme to experiment with. That's what I'll outline here.

First, you'll need to figure out how to host your site. There are several free ways to stand up an environment in which you can run a WordPress site (Docker, XAMPP, etc.) - but I found the best way is with WP Engine's "Local". Keep in mind I'm on a Mac so I can't speak for those Windows and Linux land.

Local is great because it streamlines the whole process of downloading an up-to-date version of WordPress, setting up project file architecture, and hosting your site. Using other methods, you typically have to do all of this separately. Plus the UI on the Local native app is 🔥.

Run through the following steps:

  1. go to https://localwp.com/
  2. download it for free
  3. you'll be prompted for name/email/phone - but this information doesn't have to be real 😁
  4. install it and open it up
  5. create a new site
  6. pick a site name
  7. choose "Preferred"
  8. choose a WordPress username and password (email isn't important here and can be changed later)
  9. once the site is running, click the WordPress admin button
  10. login with the credentials you chose

At this point you'll be looking at the WordPress dashboard, the interface that allows you to build and customize your site. To access the site as it will appear to the user, click the button in the top left that shows the site name with a house icon. As is, your site should just contain a header with some links, a summary/link to a single blog post, and a footer with more links. Side note - when working with WordPress I like to view the site in a separate incognito window, that way it doesn't show the admin menu up top.

Let's go back to the dashboard. You'll see a sidebar that includes things like "posts", "pages", "appearance", "plugins", and "settings". At this point I suggest getting your hands dirty tinkering with different things available to you here. When you make changes, refresh your site and see how things update.

This freeCodeCamp tutorial gives a pretty solid rundown of how the dashboard works among other things. (skip to 14:47)

DISCLAIMER: You may encounter a bug where doing certain things (e.g. creating a new page) will result in the following error being shown: "The response is not a valid JSON response." If that happens check out the blurb at the end of this post.

Although the functionality the dashboard provides is perfect for someone with little to no coding experience, you may be wanting to get down to the HTML/CSS nitty gritty. Let's do that by bringing in our own theme and activating it. Here's a simple theme I created that you can use as a sort of jumping off point for future projects. Either download the zip file or clone the repo.

Back in Local, right click the name of your site in the sites pane and click "reveal in finder". Next, navigate to app > public > wp-content > themes. Paste the boilerplate theme directory here. Finally, go to "Themes" (in the appearance menu) in the WordPress dashboard and activate it.

Depending on what you tinkered with earlier, your site may or may not have much content at this point. I suggest doing the following in order to give it a similar structure to a blog site you might see online. First we'll add home and blog pages:

  1. go to "Pages"
  2. click "Add New"
  3. set the title as "Home" or something similar
  4. add anything you'd like in the body
  5. click "Publish"
  6. return to pages menu
  7. click "Add New"
  8. set the title as "Blog"
  9. don't add anything in body here
  10. click "Publish"

Next, we'll give those two pages the proper roles:

  1. go to "Settings" > "Reading"
  2. for "Your homepage displays" select "A static page"
  3. set "Homepage" to your home page
  4. set the "Posts" page to your blog page
  5. click "Save Changes"

Finally, we'll update the navigation menu order:

  1. go to "Appearance > Menus"
  2. under "Menu structure" set the menu name to "Nav Menu" or something similar
  3. click "Create Menu"
  4. under "Menu Settings" check the "Primary Menu" box
  5. click "Save Menu"

Voila! You've got yourself a blog site to work with.

Now open up the boilerplate theme directory (that you added to your site directory earlier) in your IDE of choice and experiment! Make changes to the files and see what's affected on your site.

If you don't have any experience using PHP, this is a good time to give it a go. This minimal theme should serve as a nice playground. Here's a good tutorial to get you started. And once you're more comfortable, take a look at the other themes WordPress provides by default. There you'll see how a theme "should" be organized. And if you want to do a deep dive on how to create a theme from scratch, here's another good tutorial.

From time to time I'll see an article or youtube video forecasting the "death of WordPress" or something similar. However this is not the case! According to W3Techs, WordPress is used by about 43% of ALL websites in 2022. It's thriving and continues to grow. I'll admit the developer experience it provides is lacking compared to newer tech, but the product you're shipping to users is still top notch. If you need to get a site up and running quick and don't need anything too fancy, look no further than the CMS king!

🤘

More on that JSON error: This is a bug related to the new WordPress editor that's used to create and edit content. Although these errors are displayed, you'll find they aren't actually preventing you from doing anything. For example, if it says you failed to publish a page, returning to the main pages menu will show that the page was indeed published. You can either ignore these errors, or if you want to get rid of them you can just install the "Classic Editor" plugin. You can do that by going to the plugins menu, clicking "Add New", searching for it (though it may already be displayed under "Featured"), installing it, and activating it. You may get the error one last time while installing, but like before you can disregard. The classic editor doesn't have all the functionality the new one does, but it works fine.