Designing for WordPress

1.2 Design Considerations for WordPress Themes

Hello and welcome to the first lesson of this course, where we'll take a look at a few design considerations when building WordPress themes. But first things first, what is WordPress? Well, WordPress is a content management system. Essentially, it's a piece of software that you can use to create a website. Traditionally, WordPress first started as a blogging platform, right? So you would use the software to create your own blog. But in the recent years, it's been updated with all of these new features that make it really good for creating any kind of website, either a blog or a small website or a large website. It doesn't really matter, WordPress can do all of it. WordPress is free and you can work with it in two ways. You can go to wordpress.com and host your site there. Or you can go to wordpress.org, and you can download a standalone version of WordPress and install it on your own server, and just run the website from there. This is what we'll do. We're gonna work locally for this course. And I already went ahead and set up a WordPress website on my local computer. Now, let's see how to work with WordPress themes. All right, because that's the most exciting thing about this platform, is that you can create different themes for the same content. And those themes will display this content in different ways. So here we can see the WordPress site that I just created and I just populated it's database with a lot of content. So you can see how it looks like. But we can go into the Admin and we can change the theme. We can go to Appearance > Themes, and right now we have the theme 2020 active. This is one of the WordPress themes. But I can choose to display or activate this 2019 theme, or this one or this one. So I can activate it. And now if we take a look, you'll see that it looks completely different. The content stays exactly the same, but the appearance of the website has changed. All right, so that's how you basically work with themes. And this is actually what we'll be designing in this course. So we're not actually going to build a theme that we can apply to this website, instead we will be designing it. And I'm gonna show you what are the necessary steps for that. Now what about the structure of a WordPress website, right? We need to know that before we start creating themes for it. Well, let's have a look at this local installation and quickly go through the core structure of this installation. To do that, I'm gonna switch back to the 2020 theme, okay? And every WordPress website has an index page which displays a list of posts, all right? WordPress is kinda centered around these pieces of content called posts. So the Index page which is often the homepage displays a list of posts. Templates Sticky is one post, Hello world is another post, this one, and so on and so forth. So this is one page that we need to design, the Index. Then if we open up a post, for example Hello world, we get to a different page. This is called the post page where we can see the content of a single post. And alongside that, also the conversation around that particular post. Because WordPress has a feature that allows you to comment or leave messages on posts and pages. So this is an example of a reply or a message. And here, you also have the ability to leave a reply. We have an archive page. And the archive page will basically give you a collection of posts that share the same criteria. For example, if I click the author name here, this is an archive page with all the posts that are written by admin. If I click Uncategorized and by the way, this is a category. This is gonna take me to an archive page where all the posts displayed belong to the same category. Which is in this instance is called Uncategorized. I can also search for a specific term and this will give me an archive for the search results. It will show me all the posts that match my search criteria. All right, so what do we have so far? We have the index page, we have the post page, which displays the post content. We have the archive page. These are the essential pages that we need to design. Also, in WordPress, you can create standalone pages that have nothing to do with posts. For example, here we have a sample page that has just a title and a content. And that's it. All right, so with this quick introduction out of the way, let's start the design process. As I was saying in the previous lesson, we're gonna be using a design system approach. And more about that in the next lesson. See you there.