FLASH SALE! Up to 40% off on unlimited courses, tutorials and creative asset downloads SAVE NOW
by
FREELessons:17Length:2.3 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

4.2 Working With Themes

What is a WordPress theme? Well, it's one of the things that makes the whole platform so successful. Basically, at its core, WordPress is a skeleton. You then need to add a theme on top of it to display content and to style that content to fit your brand, your design, and so on.

So in this lesson you’ll learn what WordPress themes are all about, where you can get them, how to install a WordPress theme, and also how to customise a WordPress theme at a very basic level. Let’s begin.

Related Links

4.2 Working With Themes

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 gonna 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. So we're gonna hit I understand. 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-tuts, 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 2017. 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 gonna take you back to the screen. But let's say that we are happy with the theme and we're gonna 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 wanna add maybe a pages widget and in footer 2 I wanna 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, you can go to ThemeForest. This is a huge, huge marketplace for WordPress themes. Or you can go to Envato Elements and this also has a category for WordPress themes. And you can find a lot of themes here. Currently 929, but more will be added in the future, for sure. 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 gonna download this, we're gonna 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 gonna 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 gonna 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.

Back to the top