Hello friends, today we will talk about html and WordPress.
WordPress is one of the most powerful content management systems available. It’s versatile, constantly updated, and totally free. And with it, you can create simple blogs, large complex websites, and anything in between. Now, learning how to use it without any prior experience can be quite difficult. But after taking this course, I guarantee that you’ll be very comfortable installing WordPress, adding new content, customizing themes, installing plugins, and also managing existing blogs or websites.
This course is quite large, so we’re going to split it up in three chapters. First, we’ll discuss the basics, what is WordPress, how to install it, both locally and on a live server.
And we’ll also get familiar with the dashboard. The second chapter is dedicated to content management. Here, you’ll learn how to work with posts and pages, how to upload media, how to manage comments, and also how to work with widgets and menus.
In the third and final chapter, you’ll learn about working with themes, plugins, and also how to customize WordPress with the built-in settings. We have a lot to go through so let’s kick things off with the basics. In the next lesson, we’ll dive a little bit deeper into what is WordPress. See you there. Hello and welcome to the first lesson of this course.
Now, I’m going to assume that you have no experience with WordPress whatsoever. So we’re going to get started with the basics.
In this lesson, you’re going to learn what is WordPress, where you can get it, what you can do with it, and also the difference between wordpress.com and wordpress.org.
Let’s begin. What is WordPress? Well, let’s use two definitions for it. The simplest definition would be that WordPress is a piece of software that you can install and use to create a blog, an app, a website, and so on. The more complex definition would be that WordPress is a CMS or content management system.
Now from its name, I think you can deduce what it’s for, right? It’s for managing content. So WordPress gives you a platform that you can use to share content with the world. And it also gives you all the tools you need to do that efficiently and effortlessly. So that is WordPress basically.
It’s an open source software, and open source means that its source code is freely available. So anyone in the world can contribute to it to make it better, to improve it, and so on. As I was saying in the previous lesson, it’s also free, so that’s a big bonus. And WordPress has been around for quite a while now. And during this time, it was constantly updated.
And it’s now reached version five point something, I don’t know the exact number, but it’s past version five. And during this time at each major version, and new features were added. The platform itself was improved a number of times. Bug fixes all over the place.
So the team behind WordPress is hard at work to bring us new features and to make content publishing much easier for everybody.
So that’s a quick look at what is WordPress. Now where can I get it? Well, you can work with WordPress in two different ways. You can go to wordpress.org or you can go to wordpress.
com. And depending on how you want to work with WordPress, you would choose one of the two. So let me show you. WordPress.org is where you can get the standalone version of WordPress and install it on your own server.
WordPress.com allows you to build a website with WordPress except you’re using their own platform. So your website will be hosted on their servers. There’s a slight difference here. This one is the easiest option, because it removes like the more technical aspects of working with WordPress.
While this one is the slightly more complex option because you need a little bit more knowledge to get things up and running.
But it’s not difficult at all, as you’ll see during this course. Now wordpress.com actually is a paid platform. So of course you can start with a free plan that’s available or you can choose from different pricing tiers.
And each one has a different set of features that are more or less better suited for certain types of users or a certain type of website or a blog. It really depends on what you want to create. And if you’ll scroll down here, you’ll actually see a comparison table between each plan.
And you will see what you get and what you don’t get for each of these plans. So if you’re gonna use wordpress.
com, I strongly suggest you check this out first. So you can see which one is better suited for you. To give you an example, if you want to be able to upload custom themes, which is here, you will need to start with the business plan or the e-commerce plan. But if you just want like the very basic stuff, you can start with the free plan as well. Now for this course, we’re going to use wordpress.
org. We’re going to download the standalone version of WordPress and we’re gonna install it on our own server on our own computer and we’re going to work with it directly there. So what can you create with WordPress? Well as I was saying in the introduction, from simple blogs, to large, complex websites and anything in between. Basically, anything that can be created by using a content management system, can be created with WordPress.
So if you have or if you need to create a website for, I don’t know, a car dealership, you can do that with WordPress.
Maybe a website for a real estate agency. You can do that with WordPress, a portfolio for a photographer, maybe, you can do that. An app can do that as well. It might require a little bit more coding.
Depending on the app, but you can totally do it. So as I was saying, WordPress is very versatile, you can create virtually anything with it. And that’s what makes it so popular and so powerful. It has this huge community behind it that’s constantly working on the code. That’s constantly producing themes and plugins so that this platform that was once just a blogging system, just a blogging platform is now a powerhouse, an amazing tool that can be used to create virtually anything on the web.
Now, since you are somewhat familiar with what WordPress is all about, let’s proceed to installing it. We’ll start in the next lesson where you’ll learn how to install WordPress on your local machine and what kind of software you need to make it all work. See you there. Welcome to lesson two of this course, where you’ll learn how to install WordPress. Now, you can work with WordPress in two different ways.
Number one, on a live server, which means any changes you make will be visible immediately to everyone who’s visiting your website. Or number two, you can work locally on your computer, which means that any changes you make are only visible there, on your computer locally, okay? And this allows you to test and develop your website, your WordPress project, as much as you want before sending it to a live server or publishing it. In this lesson you’re going to learn how to work locally with WordPress, and also what kind of software you need. Let’s begin.
So before we get into the software part, I want to quickly explain how WordPress works.
So WordPress, as I said, is a piece of software, right? But it has certain requirements in order to run properly. And one of those requirements is a web server, okay? Or a web server software.
A web server software is Apache, that’s one of them. NGINX, I believe, is the second one. There are a couple more, but these two are very popular, especially Apache. And Apache is, of course, free software. Now, what WordPress also needs is support for PHP and also a database management system.
And that can be MySQL, it can be MariaDB, there are a couple others as well.
Apache supports both of these, so it supports PHP, among other things. And PHP is a programming language, in which WordPress is written. And it also supports MySQL, which is this database management system. And with it you can basically create databases that WordPress then uses to store information about your website.
So, the very first step in working with WordPress locally is to use a software that can emulate a web server on your local machine.
Now, there are a couple of options here. One of the most popular one, and the one that we’re going to use in this course, is called MAMP. And it also has a pro version, which is paid and it offers some extra features. But for this demonstration, the free version is more than enough.
So as you can see here, MAMP is a free local server environment that works on macOS and Windows.
Another alternative would be XAMPP. This is a more cross-platform option because it works on Windows, macOS and Linux. So depending on your operating system you can go and install either of these, they work just as well. As I was saying, we’re going to be using MAMP.
So I have MAMP installed, I have the free version right here, and if you’re using macOS, this is kind of what you’ll see. Right here you’ll see some status LEDs telling me, hey, the Apache server is up and running, the MySQL server is up and running. So what you need to do next is create a database. So go to Open WebStart page, and that’s going to take you to your MAMP configuration. From here you have the ability to open up the MAMP directory, which we’ll do later, and you can also access some tools.
So what we need here is PHPMYADMIN, let’s open that in a new window. And here you’ll see all of the databases that are currently created.
For this installation, we’re going to create a new database. So we’re going to go to Databases, and where it says Create database we’re going to give it a database name. Let’s call it wp-demo-yourname.
And we’re going to hit Create. So right now we have a new database, wp-demo-yourname, created right here. That’s all you need to do here, you don’t have to worry about the structure because WordPress will automatically populate this database for you. All right, that’s step one. Step two is to download WordPress.
So go to wordpress.org, click Get WordPress. Download WordPress, and the version that’s currently available at the time of this recording is 5.2.2.
So I say, Download. Let’s save it, and I have that right here in my Downloads folder, where it says wordpress-5.2.2. >> I’m just going to extract this archive, right?
So now what you need to do is take this, copy it, and go to your MAMP folder. By default it’s going to be called htdocs, I believe. However, I have a custom configuration here. Let me just show you. If I open up the preferences here, and I go to Web Server, you can see that my document root is actually yourname > Desktop > MAMP.
You can put this in any folder you want really, it doesn’t really matter. Okay, so going to the folder where you have your MAMP root, and I’m going to paste in that WordPress folder. You can rename this, if you want. I’m going to call it wp-demo-yourname, just like our database. You don’t have to do that, by the way.
The fact that it has the same name as the database is irrelevant, this can be any name that you want. All right, so now what we need to do is, we’re going to need to go back to our MAMP starting website. If you closed that, no problem, simply open up your MAMP app again and you’ll see an Open WebStart page, and it’s going to take you right here.
And you just click My Website, and this will get you to the root which is localhost:8888, which is the default port this runs on. And from here, we’re going to choose wp-demo-yourname.
Don’t worry about wp-latest, that’s another WordPress installation I have. We’re not going to play with that. So, wp-demo-yourname, And this is going to open up the setup wizard for WordPress.
Choose the language, hit Continue. This is going to tell you that before you proceed, you need to know a couple of things from here.
It gives you a list. We’re going to hit Let’s go.
Database name, this is where we put in this name right here. They need to match, so wp-demo-yourname. Username is going to be root, password is going to be root.
Database host, we’ll keep it at localhost. Table prefix, this is not that important, it just adds this wp_ to the name of each table that’s going to be created in the database. You can change this if you want, I’m going to leave it just like that. So hit Submit, run the installation. We’re going to give it a site title, we’re going to say WordPress Demo yourname.
Username, let’s say admin.
And the password, just so we can remember it, we’re going to say password. And by the way, you shouldn’t do this. You shouldn’t put password as your actual password, but I think we’ll get away with it for this demo. I’m going to enter my email address here, and we’re going to disable the search engine indexing.
By the way, this is a option that you should leave unchecked on a live website. But since we’re working locally, we can go ahead and check that. So with all of this in, let’s install WordPress. And it has been installed. Nice, let’s log in.
Admin and password, And now we’re in. We now have a fully working installation of WordPress, and if we want to see the front end, or our actual website, we can simply hover this, click it, or click Visit Site.
And there we go, we now have WordPress installed locally. Now, what about on a live server? We’ll cover that in the next lesson.
There, you’ll learn how a live server is different from your local machine, and also the steps you need to take to publish your website with WordPress. See you there. Welcome to Lesson number three. As I was saying previously, you can work with WordPress in two ways, either locally on your machine or on a live server. The thing is, when you work locally on your machine, as we saw in the previous lesson, that’s just more for testing and development purposes.
You’ll be the only one who can see your website. But if you want other people to see it, then you need to take it live by hosting it on a dedicated server. So in this lesson you’ll learn how a live server is different from your local machine. And also the steps you need to take to publish a website with WordPress.
So let’s start with these steps that I was talking about. How do you go from a WordPress website on your local machine that only you can see, to a WordPress website that everyone can see that’s up there on the internet and that’s widely accessible? Well, you need two things for it. Number one, you need a domain name. Number two, you need hosting.
So, the domain name, I’m sure you know what that is. It’s the address of your website, for example, nvotto.com. That’s the domain name. And a hosting, is basically a server where you upload the files of your website.
And it’s through that server that all the interactions with the users, with the visitors, take place basically.
You need a physical location to store your website, so that’s hosting. And in today’s Internet, there are so many companies that offer domain registration and web hosting.
You just need to find one that suites your budget and one that’s reliable, basically. Now, personally, I’m going to be using Ventraip.
And that will give me the option to install WordPress and just do my thing. Now, you can chose as I was saying, whatever hosting provider you want, there are a lot them.
Simply Google the best, I don’t know, web hosting in 2022. And there are people who always review these kinds of things and you’ll find updated lists.
But again, don’t feel the need to just go with my recommendations. Just do a little bit of research and pick the one that’s best suited for you.
Now, I was mentioning in the beginning of this lesson, the difference between a live server and a local server that you just saw.
I believe the difference when it comes to, or that is relevant to what we’re discussing today is the ease of use. Because on a local server, you have to do some things manually.
You need to install the web server software manually.
You need to download WordPress manually, right? You need to do that configuration basically manually.
While on the live server, if the guys offering hosting have their things in order, they usually offer one click installations for most applications like WordPress and Magento and whatever platform they’re offering. So, when you’re using a live server that facilitates this, it’s really easy to get started. You don’t have to download anything, you just say, look, I want to install WordPress.
Click and you go through a little wizard, entering your information and just like that, WordPress is installed. In fact, let’s go ahead and install WordPress right here on my account.
So what you do is you go to websites, and you can see that I have this website right here that says pending. You can also see my hosting plan. So let’s go to Complete, Start New Website.
I’m going to choose WordPress. Let’s set up some login details, like my email address and the super secret password.
So I’m going to stick with that password. Let’s click Finish, so that’s now creating my site, and we’re all set. It says, your website with domain yourdomain.com has been created.
Now, If you go to yourdomain.com, you’re going to see that it says, parked on the Bun. This is basically a placeholder page that’s displayed by the domain registrar if no website is built there. So, what we need to do next is point our domain to these new host servers. To do that, you will need to go to your domain registrar or the website that you used to register your domain.
So I’m going to sign in here. Once I’m in here, I need to click my user, then Domain Management. And I can see all my domains listed here. I am going to click Details and where it says authoritative name servers, hit Edit.
I am going to delete these default ones.
I’m going to paste the names that I got from here, these two and I’m going to hit submit. And that’s it, that’s all we can do for now because usually the propagation of the new DNS or the new name servers takes up to 48 hours. So we’re not going to be able to do anything until that propagation takes place. Now, if we go back to my account, we can actually access some tools for managing our site. And this is the starting page basically.
If we go to WordPress, and we go to Install and Manage. We have the option to log in to the admin panel here, and just work with WordPress just like we would normally do. We cannot do that right now because as I said, the name servers don’t match, so my domain still points to the previous, instead of pointing to the new. So after 48 hours, after propagation is done, I’ll be able to work with this as normally. All right, so that was a quick look at how to install WordPress on a live server.
Even though we cannot see the actual installation because the name server propagation takes a while. After that takes place, the rest is exactly the same as you saw in the previous lesson.
You get to the WordPress dashboard, you can access your live website and that’s pretty much it. Anything that you can do or you would do on your local machine, you can do the same thing on a live server. It’s exactly the same thing.
So, WordPress is now installed and ready to go. What do we do next? Well, let’s start with the WordPress dashboard. In the next lesson, you’ll learn how to use the dashboard and also how to customize it to fit your workflow. See you there.
Welcome to lesson number four. Now, the very first thing you’ll see when you open the WordPress back end or the admin panel is the dashboard. This is your starting place for the majority of tasks you’ll be performing in WordPress.
In this lesson, you’ll learn how to use this dashboard, and also how to customize it to fit your preferences and workflow, let’s begin. So we’re going to work locally, we’re going to go to wp-demo-tuts/.
And if you want to get to the admin panel, you simply add, wp-admin. You’ll log in, And now you’ve landed on the dashboard. So the dashboard is made up of a few different cards that will give you information, statistics, and also quick links to your most common actions. Like for example, writing a blog post, adding a page, viewing the site, customizing your site, and so on. So this first panel is Welcome to WordPress, these are just some links to help you get started.
From here, you can customize the site, change the theme, these I already mentioned. And you can also manage widgets, menus, turn comments on or off, and so on. Then we have a card here that’s called At a Glance.
This basically gives you statistics, how many posts you have, how many pages, how many comments. Also, it tells you what version of WordPress you have and what theme you are currently using.
The Activity tells you which posts were recently published, and which comments were recently added. And from here, you also have options for the comment to un-approve, to reply, edit, and so on. This is one of the more useful cards, it says Quick Draft, you basically give it a title and a bit of content, and you save a draft.
Now a draft is basically a version of a post or a page that’s not published yet, but it’s still saved in the database. You can think of it as a work in progress, you start a draft, when you finish it, then you publish it, right?
Well, with this, you can do that really quickly. And then you also have some news right here about meet ups, events, and so on. Now the nice thing about this dashboard is the fact that you can customize it. So for example, you can hide this card here, and you’re only left with these. If you’re not interested in a particular card, you can either do this, collapse it.
Or you can go to Screen Options, and you can choose which card or which box you want to see. For example, if you want to hide WordPress Events, you just check that. If you want to bring back the welcome screen, you can do that here, no problem.
Now you can also move these around, so maybe you want the Quick Draft here, maybe you want the Activity here. There’s a little bit of customization you can do.
Another part of the dashboard is the Updates, which you can find on this menu on the left. This basically gives you a status indicating whether or not you have the latest version of WordPress installed, and if your plugins and themes are all up to date. So that’s the dashboard, and actually, that covers the basics of working with WordPress. But we’re just getting started, it’s time we jump to the next chapter, which is content management.
And in the first lesson of this chapter, you’ll learn how to add and edit posts and pages.
You’ll also learn about the difference between these two types of content, see you there. Welcome to lesson number five. This is the start of a new chapter in the course, one which is dedicated to content management. In the end, WordPress is a CMS, or a content management system. So just from that title, I think you can realize just how important this chapter really is.
Now, in this lesson, you’ll learn about adding and editing posts and pages. These are the two main types of content in WordPress. We’ll also discuss the difference between the two. So let’s begin.
So what are posts and pages?
Well, in WordPress, we have several different types of content. Four to be exact. We have posts, comments, users, and links, okay? Pages represent a post type. Okay, so essentially, pages are posts, but they’re a different post type.
Now, to see the difference between posts and pages in WordPress, let’s check out our front end. So this is the actual website that we’re seeing here. And what you see here, for example, this Hello world!, this is a post, okay? It has a title, it has metadata, like the author, publish date, number of comments, and then it has the content.
And of course, you can attach comments to a post. Pages, on the other hand, now let’s see if we have one created. We should have a sample page. We do, here it is, Sample Page, right? Pages are similar to posts, except they don’t have the metadata displayed.
And usually, they don’t have comments, right? So it’s just a container for a specific piece of information. And if you think about a regular website, you’ll have your regular posts in the blog, right, the different entries, and then you have the website pages, the homepage, about page, contact page, portfolio page, right? These are all individual pages. They each present a different type of content.
And the difference between them and the posts is that they don’t have comments, and they don’t display that metadata, like the author, publish date and so on, because it’s not necessary. So that’s the difference between posts and pages.
And I repeat, pages are just another type of post. In the end, WordPress has these four content types. We have posts, users, comments, and links.
So now that we know the difference, let’s see how we can manage posts and pages. So from the back end, let’s start with posts. If we click the Posts category here, we’ll access some sub features, like adding new post, getting to the categories, and also the tags. We’ll cover these in just a little bit. On the right side, we have the list of currently created posts.
We have a single one right now.
It’s title is Hello world! And when we hover on it, we have access to some quick actions like Edit, Quick Edit, which edits these posts in line, Trash to send it to the trash, or View to open it in the front end, just like this. If we click Edit the normal way, it’s going to take us to the WordPress Editor, this is actually called Gutenberg, but we’ll cover that in the next lesson, where we can edit the content of that post. Now, if we want to add a new post, we can do that by clicking this button or this button.
Or we can go to the dashboard and we can quickly create a draft here, for example.
Click Save Draft. And now if we go to Posts, we’ll see that My draft now has the status of Draft, which means it’s saved in my database but it’s not published just yet, okay? If we go back to the front end, you’ll see that the only post we have showing here is Hello world! But if we decide, okay, I like this, let’s publish it, We can go open it in the Editor, and we can either do a preview, which was going to open it in a new window, or we can publish it directly.
And when we publish a post, we have the option to change its visibility. So who will actually be able to see this post? When do we want to publish it? Immediately? Or we can schedule a particular date and time for publishing.
And also, we can add tags to it. So let’s hit Publish. Now the post is live. So if we go back to our front end here, our website, we can see my draft is now available as a published post. If at some point you decide to un-publish it, well, you go back to All Posts, My draft.
You can click Quick Edit. And you can change the status here from Published to Pending Review or Draft. Let’s change that back, hit Update, so now my post is again in the Draft status. If you want to delete it, simply click Trash, and it’s going to move that post to the trash. Be aware this doesn’t delete it immediately.
Instead, it sends it to the Trash bin, and you can always access it here. You can restore it if you want, or you can delete it permanently. Now, what’s all the talk about categories and tags? Well, if we open up Categories, you’ll see the existing ones in this table, and we can also create new category here.
Let’s say, for example, creative, okay?
We can also type in an alternative name here. This is the slug. This will be displayed in the URL right here. You can choose a parent category if you want. Or if it’s a first level category, you would just leave it like this.
Add New Category, and now I have a brand new one here. And then we can go to our posts. Let’s select, for example, Hello world! And right here on the right side, under Tags, or under Categories, excuse me, we can choose what category this belongs to.
And this is a great way for you to, well, categorize your posts.
Maybe you have a blog that covers several different topics, right? So to make your life easier, and also to help your potential visitors finding content much easier, you would add these categories, right? Maybe you talk about food or traveling the world, so you would have categories for that. Restaurants, food, traveling, hotels, and so on, okay? So you would choose the category here and hit Update.
So now if we go back to All Posts, you will see that under Categories, we now have creative. Clicking a category name in here, in this table, will actually show us all the posts that have that category. This can also be done by filtering the posts using this drop-down menu. So those are categories. What about tags?
Well, tags are similar to categories. Let’s add a few. We can also add description to them. All right, so now we created three tags, then we can go back to our posts and let’s edit this.
And here on the right under Tags, we can type, and it’s going to find the tag for us.
So now if we go back to our post, we can say that if we have categories but also tags. And if we go back to the front end, we can see that the category and the tags are also displayed here on the front end under the metadata. So we have the author, publish date, category, tags, and comments. It’s very simple. That’s how you can publish a post and edit that post by adding categories and tags.
Now, when publishing a post, there are a couple more options you need to be aware of. And you can find all of these options on this right side bar. First, you can make a post sticky, right? You can pin it to the top of the blog, regardless of the publish date. Even if it was published two years ago and there are still more recent posts, this will always be displayed on the top.
Then you can edit the permalink. And this is how the post appears in the address bar right here. If I open it, see this? This is a permalink. It’s a link directly to that post, and you can edit that here.
Usually, I recommend you keep this by default, but you have the option to change it if you want. Now, posts can also display featured images. And a featured image is an image being displayed on the front end before or after the title. It really depends on the theme that you’re using. And we’ll actually see this in action when we get to the media site.
You can also define an excerpt. And an excerpt is an optional piece of text that will be displayed right here as a preview to that post. So when you’re watching or when you’re opening up the Index page or the Blog page, and you see the list of posts, that list will not show the entire contents of each and every post.
It’s only going to show a small portion of it. Well, that is called an excerpt.
And then, finally, under Discussion, you have the option to allow comments, and also pingbacks and trackbacks. These are just mechanisms for linking to other pages on the web. And that’s all there is to it. Now, let’s move on to Pages. So Pages is actually very similar to Posts, except, we don’t have categories, and we don’t have tags for pages.
All right, so this is a sample page that’s provided by WordPress. You can put any kind of content that you want in here. In fact, any content that works in a post works in a page. There is really no difference for that. In terms of publishing, you have pretty much the same options as posts, except for the sticky part.
So you cannot make a page sticky because it doesn’t make sense. Pages are their own thing. They don’t belong to a collection, right, like posts do. There isn’t an archive of pages.
Instead, there is an archive of posts.
You can also change the permalink, just like I discussed previously. You can also add a featured image to a page. And under Discussion, you can choose whether or not to allow comments, but this is disabled by default. With that said, if you want, you can allow comments on pages, although it’s not a very common practice. And here you can change the order of the pages.
So it’s very simple to add a new page. Simply click this link here, Add New, or this button. You’d give it a title, My page.
You would give it the content. And then you change the options here and hit Publish.
So now that page is live, and you can see it here by clicking this link. Now, it might not appear in the front end unless we have a menu. We’ll get to that in a little bit. But if you wanna preview it, you can do that very easily from the back end or the admin interface. And that’s it for posts and pages.
Now, in this lesson, you saw me briefly adding some content in these, just to demonstrate their functionality. In reality, the editor, which is called Gutenberg, is a brilliant piece of software that we need to explore in more detail. So in the next lesson, you’ll learn how to use Gutenberg, and also learn about its predecessor, which was retired in WordPress Version 5. See you there. Welcome to lesson number six, where we’ll talk about Gutenberg.
This is the name of the new and improved editor in WordPress, and it’s a relatively new edition. It came out in Version 5.0, and you can use it to edit posts and pages.
Now, in this lesson, you’ll learn how to use the Gutenberg blocks. Which are individual pieces of content you can simply drag and drop, to build a page.
And we’ll also take a quick look at the former editor, which is now available as a plugin, let’s go. Now, before we start, I just want to mention this. The Gutenberg editor has been covered numerous times here. And I’ve linked a couple of those videos in the lesson notes, so make sure you check those out.
In this lesson, I’m going give you the quickest version possible, while showing you the essentials of working with this new editor.
So Gutenberg is the default editor now in WordPress. And you can access it by going into editing mode, on a post or on a page. We’re going to be working with posts for now.
So the way Gutenberg works is that, on this left side here, on the canvas. You have an exact preview of how the page will look like on the front end, okay?
Same colors, same fonts, same everything. However, when we hover or click on individual elements in the page, we have some extra options. For example, when I hover on this paragraph, it tells me on the top left corner here, that it’s a paragraph, okay? And when I click on it, we select it, and we have some options here on top. For example, I can change text alignment, I can make text bold, italic.
I can create a link or, I have some additional options here.
Or I can click this menu button, and I can choose to duplicate it. I can choose to insert a block before or after the block I just selected. I can edit it as HTML, which does this, basically.
Or I can add it to something called Reusable Blocks.
And of course, I can remove it altogether. Apart from these options, when you select a block, because that’s what this is called, a block. We also have additional options here, on the right side. Now, these options depend on the block. On a paragraph, for example, we have a starting text here, telling us, hey, this is a paragraph, and a small description.
Then we have text settings, I can choose the font size, or I can edit that in here manually. I can choose whether or not I want this paragraph to start with a drop cap, and I also have access to some color settings.
I can choose from different colors, or a custom color, and I can choose the text color here as well. On the Advanced tab, we can add an additional CSS class that we can later use to style this even further, so that’s a paragraph. Now, to add the new block, we can very simply click this little button here that says Add block.
And Gutenberg, by default, comes with a lot of blocks that are organized in these categories, all right? So we have anything from, common typography blocks like paragraphs and headings, to code blocks, to buttons, columns.
We have some widgets here. So let’s do, for example, I don’t know, a column, let’s click this, right? So now we have a column here, and we have a column here.
And inside these columns, we can add more blocks. So let’s say I want, for example, a title, I can choose to insert a heading, and I can say hello. And I can choose the heading size, I can choose the text alignment. Notice, these option changed when I introduced this new block. On the second half, I can choose to simply just write text, or I can insert another block.
Let’s say, for example, a quote, so there you go. Now, if we click on the column block, we can choose the number of columns that we want. For me, 2 works just fine. If you want to delete this,
then totally fine, simply click this, Remove block. If we want to change the order of these in the page, it’s very simple.
Simply hover on the element, and you’ll notice you have this options for move down, move up.
And we can also drag it, when we get this Mickey Mouse hand. We can click and drag, and we can position this, Anywhere else in the page, and we can do the same with this one. It’s really that easy, or we can use the Up and Down arrows. Now, up top, we also have some statistics here.
And this is the content structure, it tells us the word count, how many headings, paragraphs, and blocks we have.
And also, we get a document outline, title, columns, all right? It gives us a run-down of what’s going on in our page, which is really, really cool. And up here, we have Block Navigation, which shows us all the available blocks in our page. And once everything is said and done, simply hit Update.
And now, we can go to the front end, and we can see, the paragraph has been updated. Or the post, excuse me, has been updated with our new content. And notice that what you see here is exactly what you get here, in the Gutenberg editor. Well, except for the metadata, but the actual content, which is from here to here, looks exactly the same. And that’s the great thing about Gutenberg, what you see here is basically what you get on the real website.
And it’s really easy to make changes, it’s really easy to see your final post, or your final page, directly in the editor.
It’s fantastic, and it’s a definite, definite improvement over the classic editor. Now, before we talk about the classic editor, I just want to mention a quick thing. Gutenberg, as I was saying, comes with a few predefined blocks of content. But you’re not limited to these, you can actually create your own custom blocks.
That’s a bit more advanced, but if you want to learn about that, check out the lesson notes. Where I’ve included a link to a tutorial, by yours truly, that shows you exactly how to create custom blocks for Gutenberg. Now, I mentioned the classic editor. Even though that was replaced with Gutenberg, if you want, you can still get it by downloading it as a plugin. And it’s really easy to find, simply go to Plugins, Add New.
And you’ll see here a plugin called Classic Editor, and you would choose to install that. And once it’s installed, you just activate it. So now, if you go back to the post, instead of Gutenberg, you’ll actually see the old editor. So, I don’t know, maybe you would be more comfortable using this, because you were familiar with it.
Or maybe you simply don’t like Gutenberg, and you decide to use this instead.
It doesn’t matter, the plugin is there, it’s free, you can download it and use it at any time. If, you have this installed, and you want to go back to Gutenberg, all you have to do is deactivate the plugin. You go to Plugins, find Classic Editor, click Deactivate. So now, Gutenberg is back to being the default editor, all right? And that’s how you can edit posts and pages with Gutenberg, pretty cool, right?
Now, let’s move on and talk about media.
In WordPress, we can upload media files in the media library. So in the next lesson, you’ll learn how to upload a new media file, how to organize these files in the library. And also how to use them in posts and pages, see you there. Welcome to lesson number seven, where we’ll talk about media files.
And that means images, videos, audio tracks, icons, PDF documents, and so on. WordPress allows you to upload pretty much any kind of file. There are certain exceptions, but overall, all the common extensions are accepted. In this lesson, you’ll learn how to upload a new media file, how to organize these files in the media library, and also how to use them in posts and pages.
Now to upload a file, you would go to Media, and this will open up the media library.
As you can see, we have no files uploaded just yet. But to do that, you would either click this Add New link or this button. And this will open the upload screen. And from here, you can either drop the files with drag and drop from your browser, or you can hit Select Files and select them from your computer this way.
So let’s do it like this, Open. Please notice that there is a maximum upload file size of 8 MB. And currently, two of my files here exceed that limit. As you can see the audio track and the movie, or the video file exceed that 8 MB limit.
So I’m unable to upload those big images.
Right, I have three JPG images that I got. So now, if we go back to our Library we’ll find our three JPG images that we just uploaded. And from this point, we can do a number of things.
We can filter these by their type, so here we have images, audio, video, unattached. Currently I just have images, so I’m going to just leave it on all media items. You can filter by dates, all right, so when were these uploaded. And also you can do a bulk select, which basically allows you to select multiple items. And once you select them, you have the option to delete them, let’s click Cancel there.
You can also search media items. So if, for example, I’m searching for dog, or let’s actually find the title here, it’s Derek, it’s actually the photographer’s name.
So if we search for Derek, it’s going to find that picture right there. Now when you open one of these pictures, you’ll get to the Attachment Details page, or modal window. Basically, it shows you the image itself and a couple of different information here, the file name, the type, the date on which it was uploaded, the file size, and also the dimensions in pixels.
Here, you can add an alt text. So if the image goes missing, the alt text will be displayed instead. This is actually very important, I recommend you always do this when you upload images in WordPress. Or, in fact, just when you’re using images in your websites, they should all have an alternative text. The title, the caption, this is something that can be displayed in the front end, later on.
You can add the description. Here it tells you, the author or the person who uploaded it. And you can also get a direct link to that image so you can reference it later. And here further down, you can delete it, you can edit some more details about it, and this takes to you a more complex edit page.
And I can also see it in its own separate page, just like this.
Now, when it comes to editing the actual image and not its information, you can do that by clicking this Edit Image button here under the image. Now you have additional editing options for the image here, you can do an image rotation, for example, using these controls. You can scale the image to near dimension by using this section right here. You can do a crop, an image crop. So if you just want to save a portion of the image, you can do that, no problem.
Either by entering values manually here or by using the mouse just like I showed you.
And then you also have some settings for the thumbnails. Now, a thumbnail is actually a smaller version of the big image that’s used usually in the blog index. So the blog index is a page where you see a list of your blog posts, okay? And instead of displaying the whole image for each individual post, you can usually display a single thumbnail, which is a smaller, resized version of the featured image in that post.
Well, this is what these settings refer to. So that’s how you can edit the images that you uploaded. Now, how can you use this in a post or a page? Well, images that are uploaded to the media library are available everywhere in WordPress. So if you go to Posts, and when we go to the Hello World post, you’ll see that I can add the new block here.
I can search for image, and I can choose an image from the media library. And just like that, this image is now inserted into my post. Let’s do a quick refresh, and there it is. Now, you can also use an image as a featured image for the post.
So while we’re in here in Gutenberg, I can go to the right side bar, I can click Set featured image.
And I can choose, An image from my media library. So now this has been set as my featured image, I can replace it or I can remove it altogether. But if I save it, and I go back, You’ll see that our post now has two images. So this is the featured image, which is like a descriptive image for the post. While this one is just an image inside the post, it’s inside the content of the post.
And this is how it looks like on this theme that we’re using. But if you’re using a different theme, the image may be displayed differently. If we open the post in its own page, you will see that the image is now part of this large background that fills up the entire screen. While this image remained the same, this is, as I was saying, part of the content. So, that’s how you work with images and posts.
It works exactly the same way in pages. So we have the sample page. And if we want to add an image to it, we can do that through right here in the content.
And if we want to add a featured image, it’s the exact same process. Go to the right side here, set featured image, choose from media library, or you can upload an image then and there directly.
And just choose the image that you want, select update, so now our page looks like that. You’ll notice that this image that is displayed here has a filter apply to it, probably, it has this blue overlay, very cool, all right? And that’s a closer look at working with media files in a WordPress. Now, let’s move onto comments. These represent another content type in WordPress, alongside posts, users, and links.
So, in the next lesson you’ll learn what comments are all about, and how to manage them. See you there. Welcome to lesson number eight, your are now at the halfway point in this course. So big thanks for sticking around so far and I hope all the information that you got so far is useful to you.
Now, let’s talk about comments, originally WordPress came out as a Blogging platform.
And as we all know, a Blog is basically a collection of posts. Users can read those posts, and can leave a message to each one. Those messages are called comments. Now even though WordPress has evolved in all this time, and it’s now so much more than just a blogging platform, a comment system is still available. So in this lesson you learn what comments are all about, and also how to manage these inside WordPress.
Let’s begin. Let’s start by opening our front end. And going to a post, for example, Hello world! Right here, in this metadata section, we see that we have one comment. And to get to the comments, we can either scroll down until we find them right here.
Or we can simply click this link and it’s going to take us to the comments section. So a comment, as I was saying earlier, is a message attached to a specific post. And that message can be added by the author of the post or by any other person.
In here, this is the author and this is the date and time at which that message was added. And by the way, this is a message that already came with WordPress by default.
This is the body of the comment. And for each one, we have the option to edit. Clicking on Edit will take us to the backend, where we can edit the name, the email, the URL, and also the body of that comment. Or since we’re on the front end, we can also reply to a comment. So click in Reply, we can add our own comment, our own message, in reply to that comment.
So we’re going to post that. And right now we have a new comment made by admin, which is us, this is the date and time.
This was just posted and our comment body. And we can go even further and we can reply to this again and again and again. Now what you see here is called a gravata.
And a gravatar display an avatar that’s added based on our email address. So I’m registered on the Gravatar website with my email address and with this avatar. So this is what shows up here. This commenter has this avatar. And actually a very nice piece of information here is that on this comments section right here on the top, we can see the avatars of the people who commented and also the number of comments.
And we can also find that piece of information right here at the top. Now, if you want to add another comment which is not a reply to any of the existing comments, we can simply use this section right here where it says leave a comment.
So let’s leave another comment, post. And now we have a third comment, made by us that’s displayed right here. Now, the way comments are being added is slightly different depending on whether or not you are logged in.
So currently I’m logged in as Admin. So all my information like Email address and name are already saved. But what if it was someone who is not yet registered with WordPress or with this website like a regular visitor. Well, let’s say how that would look like for him. So I’m going to copy this, and I’m going to open an incognito window or a private window, And I’m going to paste that in.
Now notice, we have a couple of differences here. First of all, we don’t have that blackboard top. That’s because we’re not logged in. Second, we don’t have the options to edit the comments right here, or the page itself. The admin usually has those options.
See, when I’m logged in, I have the option to edit this page and also edit these comments. Well here, for a regular visitor, those options are not available. The regular visitor just sees those comments as they are. And also a bigger difference is how a visitor leaves a comment. So, of course we have the comment box but also we need to give him a name and an email address and optionally, a website.
So let’s go ahead and do that right now. Let’s give it a name on the email. Let’s just do a random email address and website, my website.com. We have the option to tell WordPress to save our name, email and website in this browser.
That’s going to create a cookie. So we don’t have to fill this in every time we want to leave a comment.
So post a comment, okay? And it tells us look, we have the, the name, our name here. For the avatar, we just have this placeholder because for that email address that we entered, there isn’t a gravatar associated.
And it tells us that your comment is awaiting moderation. So that means that when I go back to my dashboard, under comments, as an admin of course, we can see that we have a new comment made by Adi with this website and with this email address, and of course the comment itself. We can see to which post this comment was applied to, and also the date of submission. And from here as an admin, I have the option to approve it and that’s going to be displayed on the website. I have the option to reply, I have the option to edit that comment, but also mark it as Spam or send it to Trash.
So if I approve the comment, and I go back here and I do a refresh, you’ll see that this comment is now public and can viewed by anyone.
If at some point I decide, okay, I want to delete that comment or simply un-approve it, I can go come back to my comments area, and I can click on Approve. And now that comment, If we do a refresh, oops, Is again marked for moderation. And is not, visible to the general public. And that’s it for working with comments really.
It’s very, very simple. These work just as well for pages if a page has the comments approved, okay? So let’s go back to pages, on our sample page, right here on the right side, under discussion, we can check allow comments update.
Now I can open up my page, and right at the bottom, we have our comments. I’m going to say, yellow or Hello, Post comment.
And now we have a comment that’s attached to a page instead of a post. And that’s it for comments. Now, one of the key features in WordPress is represented by sidebars and widgets. So, in the next lesson you’ll learn what’s side bars and widgets are all about and also how to add and remove widgets from your website. See you there.
Welcome to lesson number nine, where we’ll talk about sidebars and widgets. The use of these represents a very simple way of customizing the look and functionality of your website. They’ve been around for a long time and they’re super easy to work with. In this lesson, you’ll learn what sidebars and widgets are all about, and also how to add and remove widgets from your website. Let’s begin.
We’re gonna start in the front end, where I’m going to show you what a sidebar looks like. And it’s this one right here, actually, this entire area is considered a sidebar.
And each individual section, where it says recent posts, archive, recent comments, categories, meta, all of these are widgets. Now the way a sidebar and widgets look like depend on the theme, right, it depends on the theme that you have installed. When you say sidebar, you think of something on the side, right?
Maybe something that would be right here, and in most cases a sidebar would be positioned on the right side. You would have the typical page layout with content on the left, probably around 75% of the page, and the rest of the 25% is dedicated to the sidebar. But there are cases when the sidebar looks like this. In other situations there are sidebars in the footer, where you would see those columns. That’s also considered a sidebar, even though technically it’s not on the side of the page, and it’s on the bottom of the page.
But in the backend of WordPress, we also define that as a sidebar. So, now that we know what it is, let’s see how we can work with it. You can access sidebars and widgets by going to Appearance > Widgets. And here the first section is for available widgets, which means all the widgets available in your theme. And here on the right, we can find the sidebars, in this case footer is the name of the sidebar.
And this one is a little description. So the widgets that you see here, are being displayed here in the front-end. For example, if I want to remove the categories widget, all I got to do is click this and delete it. And that’s it, it’s automatically saved.
Now I can go back here, do a refresh, and you’ll see that that widget is now gone.
To add the new widget, all I got to do is simply click and drag from my list here, from my list of available widgets onto my sidebar. So, for example, let’s add a calendar. Click and drag, and position it anywhere I want. Then I can give it a title. I can say My Calendar, and I can click Save.
And now the front-end will display that calendar. Customizing widgets is really simple, you just have to open these. And depending on the widget, you might have a couple of different options. For example on this recent post widget, I can edit the title but also how many posts to show and also whether or not to display the post date.
On the recent comments, I can only define the title and the number of comments.
On the meta, I can only define the title. So, the options depend from widget to widget. Now if at some point you decide, okay, let’s go without this recent post widget, okay, and let’s actually name this, My Posts. Let’s go without this for a while. And you don’t want to delete it, because deleting it will also delete its settings that we just changed here.
So, if you want to make it inactive, all you’ve got to do is grab it and drag it down here where it says Inactive Widgets. So that actually removed that widget from the front-end, from the sidebar, but it kept all of its settings here, okay? So now if at any point I decide, okay, I want this widget back on my sidebar, I can simply drag it from here and I can put it back in the sidebar. So now, That widget is back. And that’s all there is to it really.
As I was saying, the location and also the number of sidebars depend from theme to theme.
You can have as many sidebars as you want. And in those sidebars, you can have as many widgets as you want. As we’ll work with multiple themes later in the course, you’ll see that some of these sidebars will change. We’ll have more of them, they will be named differently.
But for now, know that this is the simplest way to work with widgets and sidebars. Now, any website has some sort of navigation that allows users to open different pages, WordPress is no different. So in the next lesson, you’ll learn how to create and edit a menu, and then use that menu in your website. See you there. Welcome to lesson number 10 and the final one in this chapter.
Now, as I was saying previously, every website nowadays has some sort of menu with links to various pages, and this is used as the primary means of navigation.
WordPress actually makes this task of creating menus really simple for us. In this lesson, you’ll learn how to create and edit a menu, and then use it in your website. Let’s begin. To create menus, we would go to Appearance, Menus.
Here you can see all of the menus that are created, or we can create a new one. So let’s give it a name. Let’s call it My menu. Hit Enter, and now our new menu is created.
So now what we have to do is basically select which items we want in our menus.
Do we want pages? I can grab these two, I can click Add to Menu. I can grab posts. Let’s add that to the menu. I can use a custom link and I can add that to the menu, or I can add categories.
So let’s add that as well. Now once we’ve added these in here, we can actually change their order by simple drag and drop. Or we can make certain pages be sub-items or sub-menus. So for example, here I made my page a sub-item of sample page. So let’s go ahead and save that.
And now, if we do a quick refresh, you’ll notice that nothing happens. We don’t actually have a menu. And that’s because here is the way it works. We need menu locations in order to display menus. So each theme has one or more menu locations defined.
And after we’ve created our menu, all we have to do is assign a menu location, right? Is it at the top of the page or the top of the website, in the main header? Is it at the bottom of the page in the footer? Is it somewhere on the side, in a side bar maybe. Where these locations are depends from theme to theme.
But to find out what locations we have, we can go in here in the back end under Manage Locations. And as you can see, this theme has three menu locations.
We have a primary, a footer menu and a social links menu. So if we are to define our menu here in the primary location and save changes, when we refresh there is our menu. There is the first page, and that’s the drop down.
That’s the external link and that is the category. If we want to place this menu in another location, for example in the footer, we can do that as well while keeping it in the primary as well, all right? So here it is, in the primary location, but also we now have it in the footer. And of course we can assign it to the third menu location as well. Now, we can do this assignment from this page as well, where it says Edit Menus.
Under My Menu, you will see the existing locations and you can check which one of these you want to use to display that menu. So now, we just selected footer menu. If we do a refresh, the menu is now gone from the primary on the top but it’s still here at the bottom. So again, we define our menu right here, we add menu items, and we choose a location for that menu to appear.
If you want to delete a menu, we can click this link.
And if we want to add a new menu, well it’s super simple, we just click this link, create the new menu. Let’s call this Second menu and we’re just going to have these two pages. Okay, save, and let’s choose the primary as our location. So now, doing a quick refresh, will show us our Second menu in the primary location, and our First menu in the footer location. And when you go back to edit them, you just select which menu you want to edit from this drop-down.
My menu, for example, select, and you’ll be taken to the editing page for that particular menu. All right and that concludes the second chapter of this course dedicated to content management.
In the final chapter we’ll mainly discuss customization. So, in the next lesson you’ll learn about the WordPress customizer, what it is and how you can use it to change various aspects of your website. See you there.
Welcome to lesson number 11, where we start the third and final chapter of this course. Now, chapter two was about content management, but a huge part of WordPress is the ability to customize the look and feel of the front end or the actual website that you’re building.
There are many ways to do that. In this lesson, we’ll have a look at one of them called the WordPress customizer. You’ll learn what it is and how you can use it to change various aspects of the front end.
Let’s begin. So we’re back here in the WordPress back end and to access the customizer, we can go to Appearance customize.
This will open up this editor where on the right side, we have an actual preview of the front end. Except without these icons which are just visible in this editing mode and this is just to edit certain parts. And then on the left side, we have a sidebar with information about our project here and also various categories for different settings.
So WordPress Demo, this is the name of our WordPress installation. It tells us which theme is currently active. We’ll talk more about themes in the next lesson. But then let’s go through each of these categories and see what they’re all about. Site identity allows us to upload a logo, change the site title, and the tag line, and also, the site icon.
So the site icon is this little thing that you see right here, this is where you can change it. Back colors actually allows us to change the colors in our website. So default is this blue that you see here. Custom, we can change it to whatever we want. Maybe we want something along these lines.
And you can see a real time change in the preview here. This primary color is used for the links, it’s also used to add this color overlay on top of the images. It’s also used here on this block quote border, as you can see when we change it and that changes as well. It’s also used in the buttons and also, in the links. Again, depending on the theme, you might have different options here.
For example, on this theme, I have the option to turn off this color overlay on the images and just display the image as it is. That’s pretty cool. By the way, if you want to save these changes, you need to publish them, so hit Publish.
Now those changes are live because if you don’t hit Publish, those changes will not be saved. Let’s move on.
What else do we have, menus. If you remember from the previous lesson, I showed you how to create and use menus in the website. The way to do that was to go back to the back end, go to the menu section and do it from there. But you can also do it from the customizer. From here, we can actually create a new menu.
So it’s super simple, or you can choose an existing one. You can edit that right here and you can also choose its location. I can change it on the go, see how it looks in the preview. And if I want to publish those changes, I can hit Publish from here.
How cool is that?
I can also set menus in the three locations by accessing this section right here. It’s very similar to what we did previously. But the advantage of using this system is that it’s all in one place, so it’s much easier to navigate and to use. Next, we have widgets. Similarly to what we do two lessons ago.
We can see all of my widgets that are in my footer and I can actually hover on them and they will be highlighted on the screen. So I know which is which. If, for example, I want to get rid of the calendar, I can remove it from here. I can click and drag to reorder these. I can also, just like previously, open up each individual one and tweak their options.
And if I want more widgets, I can click this button, add a widget.
This opens up a list with all of the available widgets and I can simply click and that widget will be added. Let’s add an image, add the widget and now we can see our new widgets right here. Let’s call this Gallery, and now it has a title as well. Let’s publish those changes and check out the rest of the options.
Homepage settings, this basically lets you choose what your homepage displays. Does it display the latest posts, like it does here? Or do you want it to display a static page? So you would have, let’s say the homepage as the sample here and the posts page could be an index or a dedicated page. But you need to have that created, otherwise, just leave this as a default.
Finally, we have the option to add some additional CSS in here that we can use to further customize our front end, our website via CSS. This is a little bit outside of the scope of this course, so we’re not going to worry about this too much.
Now, there are some options here for Publish. You can make these changes and you can either publish them right away. Or you can choose to save a draft of the changes or you can schedule them to go live at a specific date.
Let’s say, for example, that you’re not really happy with how your website looks like now. You make some changes here in the customizer but you don’t want them published right away. Maybe you want them published at the first of the month or analytics or something. You can schedule those changes to go live at any date at any time you want. Once you have these changes here, you just hit Schedule or Save Draft or Publish and the appropriate actions will be taken.
Now apart from having this great preview here on the right side. The customizer also has a very useful feature for previewing your pages on three different screen sizes.
What we looked at so far is a large size, you can think of it as a desktop size. But you can click these icons at the bottom to change how it looks like on different devices. Here is probably a tablet and here it is on a mobile phone.
And you can see how the menus look like, how your page looks like on smaller devices. So, use these three options to view your website on different screen widths. That’s the customizer. Now, if you want a complete overhaul of how your website looks like, you need to use another theme.
And that brings us to the next lesson where you’ll learn what WordPress themes are all about.
Where you can get them, how to install them and how to modify them to suit your needs. See you there. Welcome to lesson number 12. Now, what makes WordPress so successful is the theme system. Basically, at its core, WordPress is a skeleton.
You then need to add a theme on top of that to first, display the content. And second, to style how your content, your website looks and feels like, so it matches your brand, your design guidelines, and so on.
So in this lesson, you’ll learn what WordPress themes are all about, where you can get them, how to install them, and also how to modify them at a very basic level. Let’s begin. So as I was saying, a theme needs to be placed on top of the WordPress core in order to, first of all, display any kind of content.
And just to show you what a theme looks like, from a code point of view. We can go to Appearance > Themes, and here we can see all of the themes that are installed. And currently, the active one, as it says here, is 2019. And if we go to Theme Editor, we’re going to click I understand here, because this is a kind of a warning. That tells us that hey, if you make any direct changes to the theme files, you might break things or change its functionality.
And right here, you can see all of the theme files and folders, and it can open each individual one and you’ll see the theme code right here.
If you’ve never laid eyes on PHP code, then this might seem really, really complicated. It’s not very complicated, is just a lot of code to go through. So if you’re just getting started with WordPress themes, I recommend you do not make any changes to any of these theme files unless you absolutely know what you’re doing, because you might break things, to put it bluntly.
You can also find these files if we open up a Finder window. And if we open our MAMP folder wp-demo-yourname, we go to wp-content > themes. And here, you’ll see three folders, one folder for each theme that is currently installed, 2019, 17, and 16. And you can access those files here as well, you can open the folder in a code editor and you can edit the files like that. Let’s go back to themes.
Now let’s change to a different theme, for example, this theme, 2022. When you hover on it, you can get access to the theme details.
It basically tells you the name of the theme, the version, the author, also a short description, a list of tags, which most of the time refer to the features of that theme, and this is a screenshot. So there are two choices here, you can activate it immediately, and by doing that the new theme will go live on your website, or you can do a live preview. And by doing the live preview you can basically see how the theme would look like on your website without actually publishing it, or without actually making the change live.
And once you’re happy, you can hit Activate and Publish. Or if you’re not happy, you can click this little button and it’s going to take you back to the screen.
But let’s say that we are happy with the theme and we’re going to activate it, so let’s click that. And now, the active theme is 2017. And now if we refresh our front end, you’ll see that it’s completely changed.
And that’s the power of themes, they take your content, which is basically the same no matter what you do and they just display differently. And differently means different colors, different fonts, different types faces, actually. Different spacing among elements, different layouts for the page. Notice that on this theme, the side bar is actually on the side of the main content right here on the right. And just to show you another difference, if you remember the 2019 theme had a single sidebar, right?
Well, this one if we go to Widgets, you’ll see that we have three sidebars. We have blog sidebar, we have footer 1, and footer 2. So let’s say that in footer 1, I want to add maybe a pages widget and in footer 2 I want to add a meta widget.
So now if we do a refresh, you’ll notice that we have two extra sidebars displayed here footer 1, footer 2. Same thing goes with menus, if we go to the menus now, you’ll see that previously, we had three locations in the previous theme.
We had the primary, we had the footer, and we had the social location. While here, we just have two, Top Menu and Social Links Menu. And this, of course, works exactly the same way as I showed you in a previous lesson.
You just select which menu you want to place in which menu location. So this doesn’t change, this works with any theme, it works exactly the same.
Now, by default WordPress comes pre-installed with these three themes I believe, but you can add your own theme. That’s the great thing about WordPress and there are so many themes to choose from. First, if we go to wordpress.org, under Themes, we’ll find a theme directory. And we can choose to sort by Featured, Popular, Latest, and also we can choose to display themes that have a specific feature set.
So we can choose a couple of these, right? And we can choose to apply filters. And then, the website will only show us themes that match this feature set.
But for now, let’s clear, And let’s go to Featured. Now most of these themes are free, but they’re also pretty basic.
If you want higher-quality and more complex themes, there are many options. There is a huge, huge marketplace for WordPress themes.
So, let’s say that you found a theme, right? How do you install it? Well, it’s actually quite simple when you purchase a theme or you download a theme. You get an archive with the theme files, so let’s demonstrate using a theme that we’re getting from the theme directory here. Let’s say this Trade Line theme, so we’re going to download this, and save it to our computer.
And we can find it here, where it says trade-line-1.6.2.zip. So we don’t actually need to unzip this.
We can install it very simply by going to the back end, Add New Theme, And then click Upload Theme. Browse, we’ll choose Trade Line, Open, and Install Now. And now the theme has been installed successfully. So if we go back to the themes page, you’ll see Trade Line, and it’s the new theme that we got. Alternatively, if you do it manually, you will need to unzip this and then copy the contents of that folder right here in the themes folder of our WordPress installation.
So if you go to MAMP or whatever is that you installed WordPress, you enter the WordPress directory, wp-content > themes. And you just paste the content of that theme in this folder, and that’s gonna show up here and I can choose to activate it or to do a live preview. So let’s see how the theme looks like. A very colorful, definitely. Let’s activate it and see it live.
So again, a totally different look from what we saw previously, right? We have different colors, different layout here, different fonts, it’s very, very interesting. Now, if you want to install a theme from the official theme directory, you can do that directly from WordPress. So when you go to Add New Theme, you’ll actually see a list right here with the same themes that we saw here. So instead of opening a different website and downloading the theme from there, you can just browse that list from within WordPress.
So when you find the theme that you like, simply hit Preview or Install. And that’s going to eliminate the need to download the theme manually and then uploading it here in the back end. But again, this only works with themes that you get from the official WordPress directory here. So that’s another theme that we installed. And again, that looks completely different.
How cool is that? Now, if you want to remove a theme that you installed, well, it’s really easy. You just click on the theme and you have a little Delete link here. Or you can go into your folder and delete the folder from here, it does exactly the same thing. Just make sure that the folder you’re deleting is not the folder for the currently active theme, because that’s going to break your layout.
And one more thing before we wrap it up. If you decide to use the WordPress Customizer, you can also change the active theme from here. All right, so you can see the active theme is currently Storto, but you can change it from your installed themes. Or you can browse the theme directory from here and choose the one that you like.
And certain themes will actually add more features to your WordPress back end.
So for example, this Storto theme added some things here. Under Colors, we have three different colors now to choose from. And we also have a section for social icons which wasn’t there in the previous theme that we were using. We also have the option to select the background image, and so on and so forth. So different themes may come with different options.
And that’s how you work with themes. Now WordPress in itself is a pretty awesome platform, but you can always add extra functionality by using plugins. So in the next lesson, you’ll learn what plugins are all about and how to install and manage them. See you there. Welcome to lesson number 13.
I’m sure that by now you’re familiar with the term plugin, maybe you’ve used it in another app, or you’ve read about it, and a plugin is basically a piece of software that provides extra functionality. WordPress has support for plugins, and it actually has a ton of plugins you can choose from. In this lesson you will learn what WordPress plugins are all about, how to install them, and how to manage them.
So let’s begin. To access plugins you would go to the WordPress backend of course and then plugins.
Here, you’ll see a list of all the installed plugins and also some options for each one of them. In order for one of these plugins to work it needs to be active, and you can do that by clicking this link, or selecting each one, or ones, you want to activate, and selection that action from here, and hit Apply. So what are these plugins doing basically? Well, it depends on each one. For example, this one is an anti-spam plugin.
This one re-enables the WordPress classic editor instead of. This one, well, it’s just there by default.
It’s not really a plugin, but if you activate it, right, it’s going to display these funny messages on the top of your pages. Now you can find plugins in a lot of different places. First, you can go to WordPress.
You have a lot, a lot of plugins here to choose from, or, if you want more complex ones, you can search Google.
So plugins install pretty much in a similar way to themes, you just download a zip file with the plugin files, and you just either copy that in the WPContent plugins folder, or you just go to the backend.
Add new, and then if it’s a plugin from the official repository, you can install it directly from here, or if it’s from somewhere else, you can upload it by clicking browse and selecting the zip file that you got.
So let’s install one from the repository. Let’s install Jetpack by WordPress.com. This is a very large plugin that actually adds a lot to your WordPress installation, so it’s recommended that you always get this.
Let’s click Activate, okay? So now Jetpack is installed, and the plugin also added an extra menu entry right here in the sidebar, and you can click that to access all of the functionality provided by the new plugin.
So again, this is functionality that wasn’t here before, but instead we added via a plugin. Now just be careful when installing plugins that you check their compatibility with the current WordPress version that you’re using. So if you install them from here, they’ll actually give you a little indicator telling you that hey, this is indeed compatible with your version of WordPress, so it’s safe to install and activate.
But there are others that, for example, this one, were untested, which are version of WordPress, so it might work, but it might also throw some errors and have unexpected behavior. So just be careful about that, and that’s it for plugins. Now, let’s talk about users. By default, WordPress starts with one registered user, the admin, but you can add more, and you can control what those users have access to. So, in the next lesson, you’ll learn how to add new users and how to set individual permissions for each one.
See you there. Welcome to lesson number 14. As I was saying previously, WordPress starts by default with one user, the admin. But you can have multiple users, and you can set individual permissions for each and every one. So in this lesson, you’ll learn how to add new users, and how to set individual permissions for each one.
Let’s begin. To see the list of the currently registered users, you would go to the WordPress backend and then you would click Users, and this would bring up the full list.
Currently, there is only admin, which is the person who installed WordPress or the person that you defined when you first installed WordPress. And here you can edit that user and there are a lot of options for you to choose from. It can also have different color schemes for different users.
And it can edit personal information as well like first and last name, the nickname, the contact info. If you have a website, your email address which is required of course, and you can also edit your biographical info here. And if you do this, this will actually be displayed depending on the theme. It might be displayed below the articles that you publish. And you can also change your profile picture and change your password if that’s what you want.
So to add the new user, you would click Add New. Let’s give this a username, let’s call it usertest. For email, let’s use one of my other email addresses. Let’s put in my name here, put in my website. And let’s use a very, very good password, it’s not good but it’s very simple.
So, let’s confirm the use of weak password and here, I can choose the row of this new user, right? So, is it a subscriber, a contributor, an author, and editor, or an administrator? So each one of these roles has different permissions, okay? Let’s say that this user is a contributor. So let’s do that, Add New User, okay.
So now this shows up right here in my list. And then, I can actually log in with this new user, and notice that my actions here are very limited. I mean compare this with the option that I have as an admin, look at this list here, and then look at this list. I can basically access the dashboard, I can access the lists of posts, but I cannot make changes to those posts.
I can add the new post and I can publish it, right.
However, this needs to be submitted for review, right. So I cannot publish it directly. So now if I go back to my admin account under Posts, you’ll see that we have a hello post that’s pending review. And I can choose to edit, to preview, to approve that post. And WordPress is actually very smart, because it tells me that hey, this post is all ready being edited because I have the editor opened here.
But if I exit the editor, right, I can take over editing that post entirely and from here. Because I’m the admin and because I have permissions, I can choose to publish or save as draft and so on. Now if I want to give this new user different permissions, I wouldn’t need to go to users, usertest, edit, I can change his color scheme, maybe use the sunrise, for example. And I can change its role from contributor, right, to something else. Maybe to author, or maybe to editor.
So let’s do that.
Let’s update user. So now, if I do a refresh on this other account, you will see that I have that new theme applied. But I also have access to some additional areas here, like media pages, comments, some tools, I’m not sure if these where there before. But I do have access to more stuff because I am an editor and not a contributor.
And you can also change the role from this old users view here simply by selecting on user, and you can just use this dropdown to change its role. So if I want to go to a subscriber, instead I can do that, I can change it. And now you’ll see that my role is a subscriber. And that’s it for working with multiple users. Now, there might be a time when you want to migrate your website from one WordPress installation to another.
Or you might want to import some content from somewhere else. Well, you can totally do that with the help of two dedicated tools. So, in the next lesson, you’ll learn how to use the import and export tools in WordPress and also, get a quick look at the site health tool.
Now there are cases when you would want to migrate your website from one WordPress installation to another, or you might want to import just certain posts or certain pages from somewhere else. Well that is super simple to do in WordPress. In this lesson you’ll learn how to use the import and export tools in WordPress and also get a quick look at the site health tool. Let’s begin, so first of all let’s cover exporting. If you go to the WordPress back end and you select Tools, you’ll see Import and Export.
If you select Export, you can choose what to export, all content or just Posts, Pages, and Media.
And on each of these, you have options. Like, let’s say for example you want to export some posts, all right? You can choose from which category, by which author, and also the start and end date. And of course you can choose the Status.
If you want Pages you have similar filters. Same goes for Media. But let’s say we’re going export all content. Download Export file, save, and this creates an XML file that’s named like this and also it uses today’s date. And if we open that in a code editor, it’s going to look like this.
It’s basically an XML file that contains all information regarding your WordPress installation and its content. Now if you want to import content like this, you would use the Import tool. And I actually downloaded an XML file called themeunittestdata.wordpress.xml.
This is a file provided by the WordPress theme that’s used for testing themes. And it contains a whole bunch of different users posts, pages, attachments, and so on, and comments.
So when you click Import, you of course have the option to import from multiple platforms. And you can choose which tool you want to use. I’m going to use WordPress.
So I’m going to hit Install now. And then once it’s installed, I’m going to hit Run Importer. We’re going to browse for the file. I’m going to choose my XML file, Upload file and Import.
Now some of these authors are new, right?
Some of the authors from the file I’m importing.
So I have the option to create a new user for those authors or assign those posts to an existing author. So let’s assign these to admin and to so and so. And also I have the option to download and import all the file attachments. So let’s do that as well, submit and we’re going to wait until WordPress does its thing.
It’s going to take a little bit because that’s quite a lot of content that’s importing. And we’re done. The import was successful. So now if we go to Posts, you’ll see that we have so many posts in here. We have a lot of them, actually 53 posts.
If we go to Pages we’ll see we have a whole lot more pages than we had before. And also we have some comments that are awaiting approval. And also if we go to Media, we have a lot more images added here and we can also see some video files and some MP3, some audio tracks. And looking at the front end, Right, we can see that WordPress has now been populated with all of the content that was residing in that XML file. You can see from the archives just how much content we have.
A lot of posts, a lot of pages, so yeah, that’s a very simple way of moving content from one place to the other or just importing content from somewhere else. Now if you saw in Tools, there are some more options here.
Let me quickly go through each of these. Site Health is actually a very cool tool developed by WordPress that gives you basically a status of your WordPress installation. And also, it tells you what you should fix and what you should improve.
In my case, it tells me that hey, you should remove inactive plugins, and it tells me that I have two inactive plugins. I should remove inactive themes, and I also get some performance suggestions here. And also because I’m working locally, I don’t have HTTPS applied, but we can also see all the past tests. As you can see here, it ran 23 tests and it seems that pretty much everything is in order. So this is a great tool that you can use to check if your WordPress website is running properly.
You also have an Info tab here that basically shows you a more detailed view of this.
Moving on we have two options here, export and erase personal data. So export personal data basically sends whatever data is saved in the WordPress database to a specific email address. And I’m talking about user data, okay? So you enter the username or email address of the user you want to send the personal data to.
Send Request, you’ll get a confirmation email and if you check that, you’ll get your personal data. And then you can also go ahead and erase the personal data. So this is useful for when you are a registered user on a WordPress website and you are no longer. So you want to erase your personal data from there. Well, you can do that with this option.
All right, and that’s a quick look at the tools available in WordPress. Now, in the final lesson of this course you’ll learn how to customize WordPress through its built-in settings.
See you then. Welcome to the final lesson of this course, number 16. Thank you for making it this far, and I believe that by now, you have a much better understanding of what WordPress is, and how to work with it.
To wrap up this course, I thought it would be a good idea to go through the available settings in WordPress. So in this lesson, you’ll learn how to use some of the most common settings in WordPress to customize it to your liking. Let’s begin. So we’re back here in the WordPress backend, and to access the settings, we’ll just click the menu item here ,and you’ll be able to go through each individual category. So under General Settings, you’ll find things like the site title and tagline, the site language, the timezone, and also, the date and time format, and these are visible.
For example, if we were to look at a post here, notice the date format, January 7, 2012. If we change it to one of these other formats, This will be reflected in the frontend right here.
Same goes for the time format. Under Writing, we’ll find settings for posts. So when you create a new post, which is the default category that’s going to be assigned to, and you can leave it at Uncategorized, or you can choose from one of the available categories.
And you can also choose the default post format. These are the available post formats that we have here, and if you find yourself writing a specific post format more often then you can change this here, so you’ll have an easier time later on. So for example, if you’re constantly posting quotes, or posts that have the format of a quote, you can change this here, right? And whenever you write a new post, you’ll see that that new post starts as a quote post format.
You can also see it right here.
Now, going back to our settings, in Writing, you can also choose to post via email. So by defining the mail server and the login credentials, you can actually email a specific email address, and that will automatically create the blog post for you based on that email. That’s pretty cool. Under Reading, we find some options that we’re actually familiar with, because we saw them in the customizer, and that is, what does your homepage display? Does it display your latest post or a static page?
We can change that here. We can determine how many posts are displayed on blog pages, and you can change that number here. And most commonly, this is used for choosing whether or not search engines can index your website. Under Discussion, we have settings, basically, for the comments system. So you can change this setting individually for each post and page, but you can also change it globally, all right?
So if you uncheck this, then none of your posts or pages can receive comments unless you go in there and individually override that setting for posts and pages.
You also have some settings for notifications, so when someone comments, you can get an email. And you can also set up a blacklist for comments, so when comments that are being submitted contain a list of words, then you can put them in the trash automatically. So that’s a very, very helpful features. Then you also have a section for dealing with avatars.
You can choose whether or not to show the avatars, and avatars are basically, see, we can’t actually see them with this theme, let’s change the theme quickly. Let’s change this to 2019, Activate & Publish. So now, let’s find a post with some comments, like this one for example, and if we go to comments, right? You’ll see that by default, WordPress shows the avatars which are, well, these bits, these pictures right next to the author name, but you can choose not to by simply unchecking that. And now, you’ll see that we no longer have the avatars displayed here.
Normally, I just leave them on default. And for users that do not have a custom avatar, I can choose what icon to display. Next, under Media, we can define the image sizes. So here is how it works. When you upload an image in the media library, WordPress will automatically generate different images sizes for that image.
It’s going to generate a thumbnail, a medium, and a large size, and you can use this setting to define those dimensions, and these are in pixels. Very, very helpful. Under Permalinks, you can choose how the page or the post addresses looks like in the address bar here. So now, they’re set to this format, which basically does year, month, day, and the name of the page or post, which is exactly what we have here. But we can change that to, for example, just month and name, to numeric, or to a post name directly.
So if you’re after a different look, then you can grab another theme. If you’re after more functionality, right, you can grab plugins that give you that extra functionality.
All in all, that is this beginner’s guide to working with WordPress. I really hope you learned a lot from it. It was quite a long course, and I really thank you for sticking with me until the very end.
If you have any questions or comments, please send a message, but until then, thank you very much for reading this course, and until next time, take care..