WordPress made simple

In this lecture we are exploring the core features of WordPress: make sure you know at least how to use its Dashboard and how to write some basic posts or pages, because we’ll be covering some interesting stuff here! 👍

Pssssst…

A lot of WordPress wannabe-developers I met didn’t know exactly what PHP is and why it’s so important to have some experience with it before digging into WordPress, so I decided to write a few lines regarding the very very basics of its role in this platform! Although this few lines take 2 minutes to be read, if you already know what PHP and Databases are, skip to The Loop section!

Obvious things first: what is WordPress?

WordPress is a CMS, which stands for Content Management System. Basically, it is a software which helps us organizing all kinds of information, from images, to blog posts, to events, to pages.

In order to understand how it works, first you should think about how you’d handle this scenario with a simple html website. For every new post on your website, you should create a new html file (the page), go to the page where every post is listed and update it to show the new post, including its url.

With an html-only website, for each page you should copy all the repeating pieces of your website: the header, the footer, the sidebars and so on.

That’s where PHP comes in! 😃 With PHP (which is a server-side scripting language), you can include files in other files, removing the need to rewrite everything for every page. Put very simply, this is how you’d handle a very very simple website, with PHP only:

• header.php
• footer.php
• sidebar.php
• index.php (includes header.php, footer.php and sidebar.php)
• my-first-post.php (also includes header.php, footer.php and sidebar.php)

It is definitely an improvement to our old static html website! Imagine that you wanted to add a second post, my-second-post.php. You’d just need to include header, footer and sidebar the same way, you don’t have to rewrite them for every article you add on your blog.

For beginners…

Here, it is important to know why PHP can include files in other files, and why HTML can’t. It’s very simple: HTML is not a programming language. It is a markup language, and it is only used to tell the browser about the elements which compose your page. The server is doing nothing with that file, apart from sending it to your browser.

Instead, PHP is a server-side language, which basically means that on the server there is some kind of monkey which looks at your PHP file and can understand PHP code, can do something with it, can elaborate the result, and then the resulting HTML page can be sent to your browser.

However, creating a new file for every article and updating archive pages feels like a waste of time, doesn’t it? That’s the reason why WordPress uses a database! A database is the core of all CMSs, and it’s basically a smart collection of tables which WordPress uses to store all kind of dynamic data. It means that somewhere in your WordPress database (which runs MySQL, by the way) there will be something that looks like this:

Obviously that’s not the representation of the real table, but you get the idea. It’s very powerful because now all of our posts live in our database, we don’t have to create new pages all the time, we just have to insert new rows in that table! That’s what WordPress does everytime you publish an article, it stores it in a table.

But how does WordPress display different posts in different URLs if we haven’t created new pages? That’s where the WordPress loop comes in.

The Loop

WordPress’ filesystem is obviously more complicated than the list of files I’ve written some lines ago (we’ll look at that in a while, don’t worry), but the theory remains the same. Imagine we have this file-structure:

• header.php
• footer.php
• index.php

And in our index.php, we have the following:

That thing in the middle between header and footer is the famous WordPress loop. It’s actually not that difficult: it’s just an if statement which checks if there are posts in the database, and while it finds them, it displays them one after another.

Note that header.php and footer.php are not in the root folder, they’re placed inside theme folders. While for the Loop itself, this is what the WP Codex says:

The Loop should be placed in index.php and in any other Templates used to display post information.

— WordPress Codex

But why does it show all of my posts in my index file?

Because WordPress is born as a blogging platform, and articles had to be the core of the website. Later on, it evolved and became suitable for a lot of scenarios, but the logic behind it remained the same.

When you create a new post, you have to set its URL, and once you save it, WordPress puts that URL in a table and associates it with a post ID. So, when you visit:

www.mywebsite.com/my-first-post

…WordPress actually looks at the URL, and says “Oh, that’s my-first-post! It corresponds to the article which has the ID 1, let’s show it!”, and voilà, you’re seeing that post.

By the way, the file which looks for the single post and shows it (as in our example above) is called single.php.

WordPress Database

So, as we’ve seen, WordPress stores posts in our database. But that’s not the only information it stores there! It stores everything which is dynamic, as our site name, our site description, our site url, our media files’ metadata, our users, the active theme, the active plugins… and so on. This is the default database structure of a WordPress fresh install, which can be seen with the help of PHPMyAdmin, installed by all common hosting providers:

wp_commentmeta

Contains metadata (additional information) for comments

wp_comments

Contains all the comments

wp_links

Contains links (deprecated)

wp_options

Contains all the settings from the Administration -> Settings panel, including site name, site url, active theme, ecc…

wp_postmeta

Contains posts metadata

wp_posts

Contains posts, pages and menus

wp_terms

Contains categories and tags for posts

wp_term_relationships

Relationship between wp_posts and wp_terms (associates posts with categories/tags)

wp_term_taxonomy

Describes the taxonomy for the entries in wp_terms

wp_usermeta

Contains users metadata

wp_users

Contains all the users

From that, every theme and every plugin you activate on your website can modify this structure and add their own tables. That’s the reason why it’s important to install only reliable plugins, which don’t expose security vulnerabilities and don’t mess up with your database.

You can think of your database as all of your content, plus the current status of your WordPress website.

WordPress File System

WP consists of loooots of files, and you may be wondering: do I have to know all of them? Actually no, you won’t have to touch them. WordPress files should stay pristine, with some exceptions:

• wp-config.php is where your website’s configuration is stored, and you’ll have to edit this file in order to let your WP files communicate with your new SQL database, for every website you set up (unless there’s a WP auto-installer which does that automatically)
• .htaccess is a standard Apache configuration file, and you might have to edit it in order to configure server-related tasks, such as redirects or caching support (it also may be edited by some of your WP plugins automatically)

If you had to make some manual changes to your website, you’ll be only working inside the wp-content directory, which is where our themes, our plugins and our media files (uploads) live!

Media Files

The way WordPress stores media files may be confusing to you, but it actually makes sense. First of all, you’ll find all the media files under the wp-content/uploads folder, organized by year and month. However, having the files in this folder isn’t enough: WordPress has to store some metadata (such as description, alternative text, a custom url…) for every file.

Whenever you add a file to your website through the Dashboard, WordPress adds some new rows into the database in order to store all of this info dynamically. In the same way, if you delete a file, WP does delete both the rows in the database and the actual file.

Also, for every file you upload, WordPress generates some copies of it with different resolutions, in case you wanted to use the same images in different places with different sizes, in order to make the page with the smallest images load faster. If your theme supports it (or if you write some code — coughcough), you can set-up different sizes and regenerate all the images.

WordPress Hooks

Every time you see a page on your website, each time you refresh a page, WordPress goes through a series of actions called hooks. It does that literally every time! If WordPress could talk, it would be like

Ok, let’s connect to the database… Done, what’s the active theme? Oh, it is twentyseventeen, let’s load its css… Done, let’s grab the header… Done, let’s check if there are posts… here they are, let’s display them… Done, let’s grab the footer… Done…

I described it kinda funny, but that’s actually what happens. And it’s not as simple as that, it goes through hundreds of steps. These steps are called hooks.

WordPress is designed this way in order to let you do some modifications or insert some code between one step and another. This is exactly how WordPress files work and how plugins “merge” themselves into WordPress.

For example, the first thing WordPress does when you call its get_header() function, is to call the get_header hook. Note that their name is the same, however get_header() is a function while get_header is a hook.

If you want to display something with the header, you should grab that hook and attach a function to it (it is usually done in functions.php), something like this:

First we are declaring a function greeting() which echoes (coughcough — prints on the page — cough) some text, and then we are telling WordPress to run that function when the get_header hook is called.

Now, we used add_action to insert something. This is because get_header is an Action Hook. However, maybe you’d like to modify something! In that case, you should use a Filter Hook, which is very similar. Let’s say you’d like to modify the content of your posts, you could do it this way:

In this case, we made our post content uppercase.

We can do it because the the_content hook gives us the possibility to use an attribute in our function (in our case we named it $content ) which will store the content of the post. A lot of hooks can do it, you should check the WordPress documentation to see what a hook allows you to do when you face something you don’t know. After some time, you’ll remember the basic ones, but it’s obviously not required to know all of them, it would be crazy and it won’t turn you magically into a senior WordPress developer!

Remember that we checked if we are in a post page (with the WP function is_singular(‘post’) ) because WordPress could run this hook even if you’re not requesting a post page, and it would be useless (or could even mess up everything, if you don’t pay attention to the conditions!).

This how it works! Basically, every plugin is putting a spoke in WordPress’ wheels continuously, adding new features when hooks are called.

Themes

Each directory which is stored under wp-content/themes represents a theme. If you downloaded a theme, or if you bought one from ThemeForest, you’ll have 2 choices: uploading the zipped theme on the WordPress Administration panel, or unzipping the theme into this folder.

Obviously the theme has to be activated, so you’ll have to activate in in the Administration panel.

A WordPress theme can be really complicated to understand (we could talk for days about building themes) but actually, every theme must have:

• A style.css file which contains the styles
• Some template files which describe how different pages and posts should look
• An optional functions.php file, useful for storing custom functions for the theme, which is always loaded if the theme is active

Understanding how template files work isn’t really hard, but it’ll be more difficult to understand if you’re looking at a premium theme with a lot of features. Basically, WordPress has some naming conventions for template files, for example:

• single.php is the file which describes how standard posts are displayed
• archive.php describes how the Archive Page for posts is displayed

Sometimes you’ll see something like this:

• single-team.php

Which is itself a naming convention, but for Custom Post Types.

Custom Post Types

In WordPress, both Pages and Posts are considered as “post types”. They’re WordPress reserved words, and you cannot modify them. However, you could want to create other post types, such as a “Team Members” post type, or a “Portfolio” post type! I bet you’ve already found something like that in a premium theme, haven’t you? Well, now that you know what they are, let’s see how it’s done.

Although you could do that with a plugin, it’s better to know how to do it by yourself.

In the functions.php file of your active theme, write the following:

Did you find something familiar? Yes, we are using an Action Hook to register our new post type! Here, we are using the WP function register_post_type() to create our “Team Members” post type, which will have its own templates, its own categories, tags and taxonomies. There are a lot of options you could use with this function, but this is just a basic CPT for demonstration purposes. Now that you registered it, you’ll find that in your Administration Panel near Posts and Pages.

But how do they look? Well, we said that standard posts use the single.php file for their template, but this is not a standard post! For that, you have to use the WordPress naming conventions we talked about earlier, and create this file:

single-team.php

Where team is the slug for our Post Type. Easy, isn’t it? Now, when the user wants to see one of your Team Members, WordPress will check for a file named single-team.php and use it to create the page.

Child Themes

Using child themes has become a convention for developers. If you downloaded a random premium theme, it’s highly probable that inside of your zip file you’ll have 2 folders:

• yourthemename
• yourthemename-child

Where the first is the actual theme, and the second is its child theme. You can think of a child theme as additional features for the parent theme. If you activate the child theme, the parent theme will be loaded too, because WordPress will check if a file is present in the child folder first, and if it isn’t, it will check the parent folder.

Let’s make an example: if our parent theme has a single-team.php file and our child theme doesn’t, WordPress will pick the single-team.php file from the parent theme. If both folders have a single-team.php file, WordPress will pick the child theme’s one, and forget about the one in the parent theme.

It’s like putting a transparent paper on a painting, and painting on that. You’ll still see the original painting, but if you draw something on the transparent paper, it will cover what’s underlying.

Why should you use a child theme? Because themes update very frequently, and you don’t want all of your modifications to be erased when you update the theme. With this technique, you never touch the original theme, which can be updated without worries. If something breaks with the update, it’ll be easy to modify the child theme accordingly.

How to create a child theme

Creating a child theme is really simple. You just have to create a folder named yourthemename-child, and it should contain at least this 2 files:

• style.css, which is the new stylesheet for the theme
• functions.php, which will contain your new custom functions

In your style.css, you should write something like this:

What’s important here is that the “Template” field should contain the name of the folder of your parent theme, otherwise it won’t work.

Another important thing is that this file will override the parent theme’s css, so you’ll have to load it manually in your functions.php file, this way:

Done! Our child theme is setup properly, you can now activate it in your Dashboard and it will inherit all of your parent theme stuff. Note that this time, our new functions.php file won’t override the parent one, this is a sort of favour that WordPress does to you! 😉

Final thoughts 😴

It’s been a long trip, so take your time and come back if you have any doubts. Although I tried to put it down as simple as possible, I know that there’s a lot to learn, but don’t be worried: it takes time and patience. Don’t give up!