How to Efficiently Build Wordpress Websites with Divi | Christopher Dodd | Skillshare

How to Efficiently Build Wordpress Websites with Divi

Christopher Dodd, Web Developer / Educator

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
21 Lessons (3h 56m)
    • 1. Introduction

    • 2. What you'll need for this class

    • 3. Intro to Wordpress

    • 4. Intro to Divi

    • 5. Installing Wordpress - Locally

    • 6. Installing Wordpress - cPanel

    • 7. Creating a Divi Child theme

    • 8. Getting started with Divi

    • 9. Adding Content to your website

    • 10. Using the Divi pagebuilder

    • 11. Customising with code - Basic

    • 12. Customising with code - Advanced

    • 13. The Wordpress Template Hierarchy

    • 14. Building out your website

    • 15. Installing Plugins

    • 16. Adding eCommerce with Woocommerce

    • 17. Deploying your site

    • 18. Migrate changes to a live site

    • 19. How to continue your learning

    • 20. Bonus: Membership Sites

    • 21. Wrap-up and Class Project

63 students are watching this class

About This Class

Wordpress powers almost a third of the internet and so, if you're looking to build a content-based website, you should totally be aware of Wordpress.

Over the years, I’ve come to learn how to build Wordpress sites ‘the right way’ and what I mean by that is ‘how to build sites efficiently that are also able to easily updated and maintained down the track.  

You see, when I built my first Wordpress site, I decided to build my own theme from scratch. I took a 7 hour class just to learn the basics and then spent the next few weeks, working on my website full-time to get it work.

Not only did it take me a long time to build, every time I want to update it, even just to change some text on a landing page, I need to jump into a the backend code and update the website manually.

Trust me, it’s a pain in the ass.

I wondered to myself, how do professional freelancers and agencies make Wordpress sites. Surely, they don’t spend 40 hours a week building a single site? What am I missing here?

Well, it wasn’t until I spent months and years freelancing with Wordpress, speaking to other developers and working for agencies that I realised ‘the right way’ to develop Wordpress sites.

Now, don’t get me wrong. If you want to create your own theme to sell as a product on Themeforest or similar marketplaces be my guest but for building quick and highly customisable Wordpress websites for clients, you don’t want to have to reinvent the wheel each time you’re tasked with a new site development.

So, in this course, I’m going to teach you how to develop and update Wordpress websites much faster by customising a premium theme like Divi.

Divi is now what I use for developing all my own websites as well as websites for clients and I’ve found it to be one of the most versatile and efficient themes to create whatever layout or design you please.

So, if you’re ready to learn the right way to developing Wordpress websites, click onto the next video and let’s get started.


1. Introduction: hello and welcome to how to efficiently build WordPress websites with divvy. My name is Chris, and I've been freelancing as a Web developer for the last three years, often working with WordPress. Over the years, I've come to learn how to build WordPress websites the right way. And what I mean by that is how to build sites efficiently that are also able to be easily updated and maintained down the track. You see, when I built my first website, I decided to build my own theme from scratch. I took a seven hour class just to learn the basics and then spent the next few weeks working on my website full time to get it to work. Not only did it take me a long time to build every time I wanted to update it, even just to change the text on the landing page, I needed to jump into the back end code and update the website manually. Trust me, it's a pain in the ass. And I wanted to myself how to professional freelances and agencies make wordpress sites. Surely they don't spend 40 hours a week building a single site. What is it? I'm missing here. Well, it wasn't until I spent months and years freelancing with WordPress, speaking to other developers and working for agencies that I realized the right way to develop WordPress sites. Now, don't get me wrong. If you want to create your own theme to sell us a product on theme forest or similar marketplaces, be my guest. But for building Quick and Kylie customizable Web press websites for clients. You don't wanna have to reinvent the wheel each time you're tasked with a new site development. So in this course, I'm gonna teach you how to develop an update. WordPress websites much faster by customizing a premium theme like divvy Davey is now what I use for developing all my own websites as well as websites for clients. And I found that to be one of the most versatile and efficient themes to create whatever layout or design you please. So if you're ready to learn the right way to developing WordPress websites, click on the next video and let's get started 2. What you'll need for this class: all right. So before we get started, you're gonna need a few things Number one, some prior skills. You're gonna need some basic knowledge of hasty Mel, CSS and PHP and some basic web master skills. I how to host and use tools toe update your website. If this is your first course on Web development and you're not familiar with the basics, I definitely recommend you watch my first skill share class understanding Web development, which will give you the beginning knowledge to take part in this class. As for our tech stack, it's very basic Number one. We're gonna need a server, which is a place to host your new website. We're gonna need WordPress and we're gonna need divvy hosting recovered in understanding Web development. And we covered a bit of installing WordPress. Davy Davy, of course, is a custom premium theme, so it does come with a cost. Finally, the tools you need to develop your WordPress site include a code editor, an FTP client, and if you're building a site locally, a PHP Web server like ma'am on Mac or ramp on PC. But again, all of those were covered in my last class, so you should now understand that and be ready to put that into practice. If not, maybe review some of those pots of the previous class and revisit us here when you're ready . So I think that covers what will need to get started. I'll see you in the next video, where we will discuss WordPress and divvy and how together we can build Web press websites superfast and yet fully customizable at the same time. 3. Intro to Wordpress: If you took my previous course understanding Web development, you would have been introduced to Web press through the burn ist lesson at the end of the class. To recap. WordPress is basically a free and open source content management system based on PHP and my SQL. Essentially, it's a bunch of code which lays at the foundation for a content based website. But what do I mean when I say content based website? Well, if you've ever read an online blogger or read through pages of a company website, then you've interacted with a content based website. It's simply a website that can display content, whether that be a bunch of pages or block posts that get released on a regular basis. Most websites, I would say, fit this model off a content based site. That is to say that the website is simply a source of content where the primary purpose of the website is for users to consume content. That's it. To compare that with what's called a Web app, Web apps provide some sort of custom functionality. For instance, Google docks it's a place where you can rights, edit and view shared documents. Facebook, another Web app for social networking and connecting with friends and dropbox, an app for file storage. Now, while content based websites that are built on WordPress could be considered APS as well, they all share a basic functionality, which is to share content. Whereas all the examples I previously mentioned, they will do something very different. Basically, unless you want to develop a new piece of software to rival Facebook or Airbnb that most of the time when somebody says they want a website, they're probably talking about a content based website and were. Breast is definitely the most popular software for developing these sort of sites. In fact, according to some sources, it powers almost 1/3 off the Internet. Popularity of a particular platform is a good thing because this means that there is a huge community of developers who provide support and create thousands of themes and plug ins for your WordPress site. Wait, what are themes and plug ins? I'm glad you asked cause I was just about to cover them right now. All right, so when you install a wordpress site, you will get the following design eso Basically, it'll look like this. Um, this will be customized based on what you put in the form when you install, we're going to go over installation later. But basically, this is your blood title, and this is your, uh I think it's called tagline, which ends up as a subheading. Um, so that's dynamic from when you do the installation. But there's look with the pot, and the hello world down here will be the same if you're releasing a WordPress site right now. At the same time this course was recorded eso The disclaimer here is that WordPress changes there. Um, theme. Every year they bring out a new default theme. So if you're doing this course later in the year or 2019 2020 the default theme probably has changed by then. But for right now, anyone who installs WordPress gets this theme which is called 2017 even though its 2018 they haven't released the 2018 theme yet. So what we want to do now just to show you themes and plug ins is going to out WordPress dashboard and I'm currently logged out now, so I'm gonna have to put in my log in details. I have saved these here These are the ones we're going to use in the later video on installing Web press. Um, but it's basically whatever you and set up when you installed WordPress and what you get is the WordPress dashboard. So this is it. Um, the front end of your website is what we saw before. This is what you'll see. Um, and if you're logged in, you will get this bar up here, which just shows you that you looked in and then you can go in do dashboard, and then depending on what plug ins or things you have installed, there might be more up here in in fact, using divvy, there will be so new buttons that come up here also certain parts the page that you are able to edit as a admin. You'll be Alberto edit. I'm logged in. So that's your front front side of your website. And this is your dashboard that only you see or only users of your website see and can go in. And then these oldies fields Ah, all these little menus. Ah, stuff that only add mons can see. So the first thing I want to talk about its themes so you go into appearance, click on themes and you can see here the theme I was talking about. 2017 is installed. If you installed this back in 2015 you would have got that is your default theme in 2016. You would have got that as your default fame. You can go in here and you can live preview and see what your theme would look like if you , ah, were to use that theme. So, Robin, and switching over straightaway, you can have a little bit of a preview if you like it, um, great. You can activate and publish. Or you can change some of the settings here and then activating published, and you'll get that theme now to explain themes a little bit. It's basically like the skin of your website. Um, it'll organized layout and stuff. Um, if we look at the preview of 2017 here, it's got this big image with your blog's title and subheading. Sorry, tagline is what they call it in WordPress, and then you've got the menu bar, and it's kind of a parallax thing, so the image doesn't change, but the content comes up from the bottom now there's, of course, some customization. With this, we can set this to a page with static content on it rather than a list of all the blood posts. Um, there's a lot we can do, but basically the skin or the layout will be is dictated by the theme. And actually, one of the reasons why I like using devious a theme is it starts out pretty bare, sir, It doesn't do anything crazy with the layout. It just has a menu by the sidebar. It's pretty minimal, which is good, because it gives us a lot of room for customization. So once we install Debbie and start using it, you will start to understand themes a little better. But the other main things that we plug in tow WordPress is aptly named plug ins s. So you can go into here and you can see what plug ins we have already installed these air some default plug ins that have come Ah, with this wordpress install. Um, and if we wanted to add new, there are thousands and thousands of plug ins. So what? A plug ins plug ins. Basically, um, extra functionality that couldn't go into your project. So if we wanted to add, like, sort of edit our meta description, which we will do in the future video, I will go over some of the more popular plug ins we can add a CEO plug in, Um, we can add things like Google Analytics, and there's some ones that do very basic ah, functionality, which is just cloning a page. Sounds very basic, but what press doesn't include it by default? So somebody Jew click eight pages, the one I use eso somebody made a ah yes, ah, plug in that you can ju pick eight pages with so to summarize themes and plug ins themes is like your skin. It's the layout. It's what the website is built on. You dictate what's goes in the pages, but the layout and basic styling is determined by the theme plug ins. Give your website new functionality that it didn't have before. Um, there is a tradeoff of plug in. Sometimes they add too much. Come way down your website. Eso if it'll that requires a small code change and you're happy to to go in and change the code, then you're fine. Otherwise, sometimes it's best to use a plug in. All right, so that should establish what a theme and a plug in is. I want to show you. Once we go into a certain theme, there's an option to customize. Now, this is set up by the theme developer. They choose what to put in this customized menu. Um, so you're only limited by what the theme developer decided put in here. But what we can do is put in our in logo. We can change the site title and tagline, which is the thing that comes up here. We can choose to not show them at all, and some of these changes will show up live as we're doing them. Um, we can change color scheme. So yet down here, it's gonna be light text on a dark background rather than doc text on a light background. We can create menus here. Um, we can create widgets here, which probably best to do them in the dashboard. But basically, let's just create one change. I kind of like this doc background. So I'm gonna click on that, and then I'm gonna click publish, and that's gonna make changes lives. And now that was just a preview. Now it's live because it says published here. Now that is probably the first place you would go to customize your theme. But you can go very deep. And how deep you can go is you can actually dig into the code so you can go down to here toe editor and you have full source code control off your theme. So what press is giving us a warning? You do have the ability to mess up your whole website if you mess around with PHP templates and it's not advised. You do stuff in here without knowing what you're doing on what you're trying to achieve. Um, I'm gonna click. Understand? Um, and then we see ah, theme files here. Um, and this one is the style sheets that's got all about styles. And then we've got all these template files, which I'll explain Ah, a bit later in the course. Um, but basically what I wanted to get out here is this is what makes wordpress powerful. You have kind of top level customization options that allow you to change things. So clicking on customized again, you can go into sort of visual builders and click in Click in and change things. How you would do ah, you know, on any website without any code. But then if you need to go deeper, maybe there is something here that you can change. You can go right into the code and the entire co base is completely open source. So I have a local install right here that I can show you. This is something I'm going to set up later in the course in the installing WordPress locally. But as you can see, this is WordPress right here. Um, yes, there is a database as well, which is completely edible. But here all your files And if we go into WP content and we go into themes, then we go into 2017. This will match up with what's here. So you see, we have the style sheet here, star sheet there. The functions dot PHP file very important is there, and it's also there so you can edit it here or you can edit it here. So the point I'm making is full customization off the code base and also ah, the benefit of having a dashboard in which you can go in and change things without having to dig into the code, and that is what makes WordPress really powerful and that's why it is a very, very popular CMS. 4. Intro to Divi: So did he is a premium theme created by a company called Elegant Themes. And unfortunately, like we previously mentioned, Divvy is a paid theme, and at the time of recording this course, it's 89 U. S. Dollars per year to have the rights to use divvy. Now, if 89 U. S. Dollars sounds like a lot to you, just understand the possible value here. With an $89 per year subscription, you can create as many divvy sites as you want. If you're freelancing or running an agency, this $89 becomes a no brainer as you only pay once per year, and then you're able to offer that value toe all your clients. But of course it's up to you, and I can only speak for myself when it comes to divvy, and I must say that it is well worth it. There are a few alternatives, though, that will discuss in just a sec, so stay tuned. For now, though, I want to explain more about Davey, and for that it's time to return to the computer, so we'll go over how to install divvy in a later video. But just to give you a quick demonstration. After you install and activate divvy, your website will change to this. Um, this is basically defeat by default, and it may not look that impressive at first sight, but the power of Devi is in the page buildup. So what I'm gonna do is click new page and we can start to see what the divvy page builder is like now in a traditional ah wordpress page or WordPress post without divvy. This is what you'd use. So your options up here, you can put in a heading, um so appear would be heading ones I'll put in a heading to and be like, um, let's call it heading to I don't know what to put in there. And then you got paragraph, blah, blah, blah, blah, blah. You can bold it. You can I italicize it. You can align to center toe left, right, make it into a quote, insert a link, all that stuff. But that's pretty much it. Also, you can go to text and edit it, um, in html style. So you see that, um, when we left the line something it's putting in a style to left the line. So just to demonstrate that I left the line. Sorry. Text online it right, and it changes it there. But we can go into hedge TML and change it toe left and it's left. Now that is. WordPress is normal. Editor for the power of Devi is in the page, builder. Like I said before, sir, I'm gonna click on this big purple button to use the page builder. Now, I like to use the default editor because you can see the structure. But you can also use a visual builder which allows you to I create stuff and see it visually rights away in this demo to show you the power of Debbie, I think is gonna be more impressive to use the visual builder. So I'm going to jump over into that and it asks whether you want to take the tour. You can definitely did it to Ah, I'm just gonna stop building cause I've done this before. You've got your page, which is this blank. But then you've got this, which is your section you row. You can add in at number row. You can make it a two column row and then you can insert modules I'm just running through this quickly as a demo. You'll see what we can do in more detail further down the track. But let me just see what's. Ah, I'll put in an image. I don't have any images yet. Um, what pitches have I got? I got a picture of me so I can put that there and that'll take up half the page because I've set up a two column layout and then on here I could maybe set up Ah, Cem text. And maybe the first part of the text will be a big heading saying, Hi, I'm Chris and you can see that these changes are happening alive in front of you. That's the power of the visual builder of divvy. This is essentially what a page build it does not necessarily in this visual manner, but it allows you to build a page based on sections, rose columns and modules. You know that differs slightly between different page builders, but you know, that's generally a good structure, a good hierarchy to look at things, sections, columns, rose and modules. And that's definitely hat works in divvy. Sir, if you like this, for example, maybe you wanted to put in another section, and it could be a full whipped section or a regular section that is gonna ask you again. How many columns do you want in your row? Maybe four columns you can see here. Now compress the button and add more modules. You can add a custom code module as well. Just put him whatever occurred you want and it's still be aligned. And I guess the biggest benefits of Page building is the layout, Of course, because we can easily create these four column responsive layouts if I was to, um, I don't think it works when you have Ah, Visual Bilde. Oh, yeah. So you can see here it's responsive, right? So that was on the left, and that was on the right. But now, since I've shrunken it ah, it is gone into a more shrink setting. This is the power of using a premium theme, By the way, it's definitely all optimized for mobile, and so you can have these fluid layouts. But then also, you can take advantage off modules, sir, what would be a cool one? Like a circle counter? And then all you need to do is put in a number, and while you got this circle counter that animates directly just by putting it in, like to code, this would take so much more time. But you get these elements or they're called modules and divvy that you can just throw stuff in. So let's say and they 50% complete, and then you press tick and then you come down here and then you can publish or save dropped. So that is essentially the Divvy Page building. And this is what makes divvy a powerful tool for developing on WordPress. But it's important to note that Devi is not the only theme that comes with a page builder. And I feel like it would be remiss of me to just talk about Devi and not anything else. One of the most popular ones was formerly known as Visual Composer, and now it is called WP bakery page builder. I don't know why they changed the name to that, but you can still find it using the search term visual builder. You can go to that page and they claim to be the number one WordPress page builder plug in . So it has the similar it has a very similar way of building pages with sections rose, different modules. But the big difference between this and divvy is it's for any WordPress theme. These two are the ones I've personally used. I've used this page builder on a theme called Fortuna, so you can see if you go into theme forest, which is a place where you can find premium themes. You will find a few themes with visual composer or WP bakery page builder as something that's included. So if I scroll down here, well, that's it. That is a lot of demos. Okay, so the feature highlights. Obviously, it's gonna be fully responsive. Um, in today's day and age, everything needs to be responsive. Visual composer, which they haven't changed the name of yet comes with this and also premium plugging called Revolution Saliva. So that's just an example. I'm sure you'll find other themes that have visual composer installed as well. There's another one called Elemental, which my friend Louis as put me onto, he says. It's the best page builder. It's the new one. It also claims to be the number one WordPress page builder. It doesn't have as many users as WPP Bakery page builder because they have been around longer. Um, but he swears by it, and it actually has a free version. So if you're on a budget, I'm just gonna click pricing here. If you're on a budget that you can get the not pro version, I guess the free version have similar functionality. If you want to learn more about, um, elemental, there's a video you can watch here. I'm not gonna play it because you can watch it in your own time. I haven't personally used this one before, but I definitely give it a try if I was on a budget. So like I said, the rest of the course is focused purely on divvy because it would just be too time consuming to show you how to do it on every single page builder. And a lot of the principles are the same. So the point I'm trying to get across here is the power of using a page builder with a premium theme. It allows us to create websites much faster, but of course we're using WordPress, and if the page builder is set up correctly, we still have a lot of cost customization options. We can build websites based off a design that the client gives us or that we've come up with ourselves. It gives us a great balance of being able to build pages relatively quickly, but then be able to customize and edit anything that we need. So if you're ready to move on from the theory in the next video, we're finally going to get stuck into building out WordPress site using divvy. So I'm excited to see you in the next video. 5. Installing Wordpress - Locally: all right, so in this video, we're going to install WordPress now. There's two ways you could do this. We can install WordPress on a host. Ah, eso. It's live on the Internet. We can do that using C panel, and it's actually quite easy Or we can host locally. And hosting locally just means that we set up around sever. There's a little bit more configuration that goes on, but then it's completely hosted just on a computer. There's no, it's not on the Internet. It'll basically there are pros and cons to both. But installing locally is ah, a little bit more complicated. So I thought we'd go over that first. Um, if you just want to skip this part and go straight to installing WordPress on direct on your hosting, you can just skip ahead and check out that, um, but what I'm gonna do first, because what we need first is his WordPress itself. So I'm gonna get a wordpress dot org's. Um, actually, before we even download wordpress, we're gonna need a new folder to house our website in. So I'm going to go into my code photo. Um and I'm going to put in Ah, what should I call this skill share would press site. Okay, so now I have ah, director, directory robber. Where I can store website, I'm going to click on this button here on wordpress dot org's Make sure you go to wordpress dot or not wordpress dot com. Um and then you just conflict this button here to download the latest version. So I'm going to navigate Teoh WordPress site is going to be click save, and that will save a zip file to that location. So if I go in here, there's does it file. I can't extract it by double clicking on Mac. And this is our WordPress set up here. So I'm gonna move that into that directory, get rid of this directory, which was which was created by the zip file and get rid of the visit file. Now, the other thing you're gonna need is a server to run this. And like I talked about in the last course, the server that I use is called map. That's because I use a Mac you can use Web on, and I won't go into a lot of detail here because I did cover it in my previous class on understanding Web development, but basically, ah, the the letters in map Stanfel, Mac, Apache, my SQL and PHP. So, um, the important things to note here is that WordPress is built on PHP and my SQL. So that's that's why we need that in the stack. Apache doesn't really matter too much. Why? We're using Apache, and then m stands for Mac because I'm running a Mac. If I was running windows, I would use Wamp, which is all the same letters except W for windows and then lamp for Lennox, Um, but not to confuse you too much. Ah, yeah. If you don't have ma'am already downloaded and installed, you can click here. And if you're need help with setting that up, definitely check out the video on installing a server from my previous class. All right, so I already have map installed, So I'm gonna go into here, and what I need to do if you remember from the last course, is direct map to the project directory. So So I maybe did that little bit fast go into his an ad. Very annoying. I'm going to go into map preferences, and then I'm going to go into Web server. And it's a Z you can see linked to the last skill share club class. I did, which I just called the project directory Skill share course in that one. Um, this one I'm storing incurred. I'm gonna go to skill shareware press site and I'm gonna click select. Then I'm going to click, OK, and then I'm gonna click start service. It will take a little bit of time, but then you should hopefully see these to light up green. And suddenly your map start page begins. So if you want to quickly get to your website, you can click my website and what will happen is it will bring up WordPress. So at this stage, all you have to be clear is the Web press files in that directory. Now there's two aspects toe wordpress. One is the code, which is all the code files we have here. Basically, the PHP templates and everything else that goes with it. The front and stuff which is stored in themes. But we're getting a bit ahead of ourselves. Um and then the other pot is the database, and so you need both to run WordPress and we've got our server here, which is actually running my SQL as we can see here. But we don't have a server set up yet for WordPress. Again, If you're setting this up on C panel on your host, you don't even have to do this. It just automatically installs. But because we're doing it locally, it's gonna set up a new database for us. All right, So after I've chosen the language, um, I get taken to this screen which is informing me that I need to set up the database. Unfortunately, through the WordPress set up, they're not able to affect the database. But, ah, the information we will put in and in the next tab will go into what's called a w confit file, which is where you store this information above in here that allows WordPress to connect to its database again. If you're using C panel and you're doing this directly on your hosting, this is all done automatically. So you don't have to worry about this. So maybe if this is a bit too complicated, um, just hosted via one click install, which will be the next video. Um, otherwise, if you definitely want to host it locally. Continue along. And what will need to do is, as it says, create a database. So I'm going to go back into the start page here, go to tools and click PHP my amon. If you've lost that page, the you Earl is just local host. Um, then the port, which for me, it's 8888 slash PHP Miami in. Now what we're gonna need to do here is to set up a new database, and we can do that by clicking new. So in here, I'm going to just call this skill share WordPress. All right, so now we've got a blank database in our PHP Miami in which is all we need for WordPress to come in and create all the tables and the beginning data to basically get style with WordPress. So, thankfully, we don't have to create a with the tables in the database ourselves. Um, and we could also set up a user here like I've done here. Um, but we don't need to do that, Eva. So what we can do is there is a default user that we can use, which is just the root user. Um, if I go back into here, let's let's actually put this into practice. I'm going to copy the database name, put it there and then for user name and password, I could just put route. Um, it's not that important to change you user name and password and have that all set up because we're running it locally. Basically, nobody could hack your database unless they had access to your computer. Um, whereas if this was online, you probably wouldn't want to use root and root because that would be, ah, lot more hackable data boats died a base host. We can leave his local host and table prefix, so it's always a good idea to leave that as WP slash just Teoh follow the convention. So when we click submit here, hopefully the connection will be successful. So this confirms that all the details are correct and we can just click run the installation, and now WordPress is going to set up the database for us. So for the site title, um, I'm going to call it pressed of a dog because that's my name. Use the name. Just gonna call it admin. I'm gonna use their suggestion. And it's always a good idea to save user names and passwords. So I'm gonna open up a text edit file, um, and click new documents. And so put this here so I don't forget it. This is gonna be your WordPress log in. So yeah, make sure you hold onto that because you're gonna need it any time you log in to your WordPress website, Um, I'm gonna put in my email address, um, so that I can be contacted about this website. Um, and because we're doing locally, we do not need to discourage search engines from indexing the Web site because it's not even on the Internet. Okay, the final step is to click install WordPress, and it says that it's now installed. Now when I want you to do is to go back to PHP my amon and just refresh so you can refresh here, or you can refresh here and suddenly you'll see that there's all these tables and some of them. I'm pretty sure we'll have lots of data put in already. So you like to go through and do this manually would be ridiculous. So, thankfully, WordPress sets this all up for us in their famous five minute install. And now we can log into our Web site or if we just want to see it. This is our website. Okay, So if we want to lug in, can grab this and Walla. Now, the benefit of of hosting locally is number one if you want to keep it completely private and you definitely don't want anyone to see it, um, you know, it's not on the internet, so nobody confined it. Um, Also, you have access to the files right on your computer so you can at it anything really quickly and easily. You don't have to upload download. We could just go through. And I've been with our code editor. Um, yet there are benefits pros and cons toe having locally versus hosted from the beginning. One of the negatives of this is we're going to have to migrate the site to get it on the Internet. But that is not a big deal, because I'm gonna be showing you how to do that at the end of the course. All right, so that was how to install wordpress locally. Just remember, every time you start up your computer, you'll have to start up your server again in order to access this website. It does not work unless the server is running. Um, but yeah, that's it. Now you have a fresh wordpress install that work with in the next video. I'm gonna briefly cover how to do this directly on C panel on the cloud on the Internet on your hosting account, which is just a little bit easier, So I will see you on the next video. 6. Installing Wordpress - cPanel: So in the last video, we set up WordPress locally. But in this video, I'm going to show you how to set up WordPress on C panel on your hosting. And ah, it's actually quite simple. Um, see, Panel makes this very easy. What I'm gonna do is open up a new window and I'm going to go to a domain that have already set up. If you, um, did the last course with me, you would remember skill share course dot space. There is currently nothing there. So I'm gonna get this era. Um, but you can access your website, um, see panel by putting dash C panel. Now, if you're not following along right here, basically what I've already done is I've created a domain, and then I've linked to that domain to hosting. And if this is all new to you, definitely go back to the previous class, which is understanding Web development. And check out the sections on, you know, deploying your website to the Internet. Check out the difference between domain and hosting if you're not familiar with that. But basically we're starting from the end point of the last class. So if any of This doesn't make sense. I definitely encourage you to go back and take that class. Anyways, we are now on C panel. And as you see, I have a bunch of Logan's already, because I manage. See panel on a lot of accounts. But what I've Dave basically done for my website, I've already set up a C panel. Use the name. I'm using the same password as we did for our local install, but I couldn't use admin cause I'd already used that one before, sir. Skill share course is the user name. In my instance, I'm gonna click log in, and now I'm in C panel. Now, when you're in C panel we need to do to install WordPress is go to Web applications and then click WordPress. A great thing about installing through your C panel is that you don't need to set up the database. So I just click this button installed this application, and I don't want a directory. I'm just gonna have it right on the root domain. Everything else is fine. What I'm gonna do is use the same login details as we set. Um, for the local version. Ideally, you wouldn't want your past with same for C panel and where breast. But after this course, I'm gonna delete anyway, so it doesn't really matter too much. Um, for the administrative email, I'm gonna put in my email so that they can The this website can reach me if there's any problems or notifications. Um, website title is gonna be christophe it dud. And I'm going to put my tagline as WordPress Web developer Co um, we can leave everything as default and then click install. Also, if you took the last class on the standing web development, you would have seen me do this before as well. It's very quick, um, and quite easy. All right, so just like that, your WordPress website is now installed and you can go to here and suddenly I'm on my new WordPress website. And if I wanted to go into the admin, I go into the admin like this, and it's just the user name and password that I set up in the installation process. So there you have it. We have a fresh WordPress install, So from this point, you can decide, Um I mean, you probably have or decided, but from this point you can work on Ah, the cloud. Based on what you can work on the local install seeming that I already have it set up locally here, and it's generally easier to work with local files. Plus, I'm gonna be migrating in a later video. I'm going to do it on the local hosting, But you can Justus well do it directly from the hosting online. So that covers setting up WordPress. The next step is for us to change this theme. This is the default theme of of Web press. And of course, the theme we're using is divvy. But there is an important concept toe learn about building themes or customizing themes, and that is child themes. So in the next video, we're going to create a child theme and talk about what a child theme is. Ah, and why you should use one. So I will see you in the next video 7. Creating a Divi Child theme: Okay, So because we're talking about setting up a new theme Ah, in our WordPress site, I'm starting off right here in the Themes section. In reality, we can't add a divvy theme from here because it is a premium theme. Just to show you, if we were the click add theme we concert. True, all the themes already available on wordpress dot org's and all of these when you install them should be free, or at least free to begin with. They might charge more for a premium version later. But if you just wanted to go if a free theme, then you could look right here because we're using a premium theme. In the case of Divvy, we have to grab that file from them. And the way we do that is to log into our elegant themes account. Now. Actually, before I jump into that, I just wanted to make note that I am going to be creating my WordPress site on local host, So I'm doing it locally. Remember, I also did it at you know, a remote domain as well. Skill share course starts space. If you remember from before we did set up WordPress on our hosting on the Internet before, but it is gonna be a little bit more complicated to access those files. What I'm going to do with my local installation is I can just go directly here and edit these files in the case that you're running your WORDPRESS website completely on hosting completely remotely and you're not hosting it locally, you will have to find a way to access those files in the best way for me to do that Is FTP now because we covered FTP in the last class. I won't be going on going over it again. But if you need help accessing the files on your remote server, definitely go back to understanding Web development and check out the lesson on FTP. All right, so with that out of the way, I'm going to go toe elegant themes and I'm gonna log in and I'm going to grab the latest version of Debbie. So when you look into elegant themes, you'll get this members area where you can see it downloads that have, um, some other things you can download here as well, including, um, monarch, which is a social sharing plug in that I use Go to divvy, and then click Download and you'll see I've got this one in brackets because I actually have already downloaded divvy. Um, but just to make sure I got the latest version, I'm gonna save that, um, and bang, I have it downloaded. Now that you have it downloaded, you can come back to your WordPress dashboard and then in your theme section, click upload theme going to hear and upload it now, because I'm local, it's not actually up loading. It's actually just doing it all on my own computer. So upload is a bit of, ah, false term here, But it doesn't matter. It's the same thing. It would be the same thing doing it on your remote hosting as well. So if you're not convinced that you want to activate it, you can live a live preview it first. But because we're starting from scratch, there is no, you know, no progress made. It is completely safe to just click activate. And now we have divvy installed. And I want you to notice what happens here when we go to our WordPress site. See how it's completely different now. Don't get me wrong. Everything that we, the post types that we had before, so we still have Hello world. We still have these dummy comments and we still have a sample page. But how everything is laid out is completely different. If you remember, before we had this theme going with the little pot plant and the title there, we've got divvy now, which on first look looks quite bare. But that's actually a good thing because we can more easily customize it toe what we want. It's better to start from a bear starting point and be admitted to build on top of that, then toe have all this fancy layouts and then having to figure out how toe just go back to a regular lay out, you know? So what I'm gonna do now, before we start to customize our DVD install is create a child theme, which is the main point I want to make in this video. So to learn a bit more about child themes, I have copied a u R l Here. This is on the wordpress dot or Kodak. You can read more about child themes here that talks about why to use a child theme, how to create a child fame and the different template files and everything. But perhaps what's not covered is is what really is a child theme, and a child theme is basically a new theme. There's gonna be a new theme in here, but essentially it's going to only have a few different files in there, and it references apparent theme. In this case, it's gonna be divvy, which is gonna be the parent theme. And the point of apparent sorry, a child theme is that we can make updates or edits, I guess, to the parent theme with actually without actually touching the parent theme. So what happens is when we create this child theme and I'll show you in just a sec, the WordPress install will look into the child theme. It will go to those files first, but if it can't find them, it'll go straight to the parent. Um, and this is just really clean. If you're gonna be doing editing off the theme, it's best just just leave this clean as it is to not go in and change. What did he have done? But if you do want to make modifications, it's best to put it in a child theme. So easiest way to think of a child theme, I'd say is it's just a theme in which you put in all your customization while still taking advantage off the parent theme and kind of keeping your customization and the core theme separate but still being able to leverage both of those benefits again. I'm just talking theoretical here. We're actually going to see a child theme right now. First of all, why use a child theme? We already talked a little bit about it. It's It's a great way to learn about theme development. But the biggest reason is Teoh keep things clean. You're gonna have your modified files in one theme and you're gonna have the unmodified original theme in its own theme photo so we can follow the steps here. But because we're using divvy, did we actually have a tutorial on how to create a child famed specifically for divvy? So I'm gonna type in divvy child theme and right here back to access this a few times. So it's just called the Ultimate guide to creating a divvy child theme. So because I'm doing this, likely I can go into right into this directory here. What I need to do is going to the Themes Directory. I'll go WP content. I will go into themes, ups. I accidentally opened both. I will go into themes and you can see here divvy. Now we don't want to touch it. Like we said before, we want to keep divvy clean. And that means that when we update divvy, this will not break any of our customization. Instead, we're going to create a new folder called Devi Child. And you can call this whatever you want. Debbie Child is just the most descriptive name possible now for a child theme toe work. There is one essential file that you need, and that is a style dot CSS. So I'm going to scroll down where it gives you the exact card to put in. Hey, you can see the direction that I've just given you with the, um, creating a divvy dash child directory in the Themes directory. Um, and then the next step is to add the style dot CSS, sir, you can just copy and paste this directly. I'm going to copy that, and I'm going to create a new file with my code editor at, um All right, so Adam is now open. I'm gonna create new file. I'm going to put in that copy and pasted code I'm going to save as and I'm going to go to beckons in my WordPress directory, Going to go into my themes directory, find my child being Debbie child, and I'm not going to call it f zed three tempt ash to That's just ridiculous. It has to be called style dot CSS. Definitely don't change this. This is the file name that WordPress is gonna look for, so make sure it's style dot CSS. So that is the basis for your child theme. One other thing that you should put in is a functions PHP file on. And that will in Q your parent theme style sheet. Which means that it will look at this. First, it will get the information, but then it will take the styles from the parent theme. So again, just copy and paste gonna take that. I'm going to create a new file and Adam place that in. I'm gonna save that as functions dot PHP. Um, again, it's very important what you call these because these Airil WordPress template files where press will look specifically for these names. So I call that functions dot PHP and essentially, that's all you need. You can create a thumb now for your divvy child theme, but you really don't need to, and you'll be able to just, um, read the name. If you want to get creative, you can change the thumb. That was really not important. So what's gonna happen now is we're going to go into our themes section of a website again . And just by the way, this area here all is doing is referencing the folders here so you can see Debbie. 2015 2017 2016. Those are all the themes here. So if we refresh the page, you'll see on newly created photo. The divvy child is that and it doesn't have a thumb now because, like I just mentioned, we didn't put in a thumb now, but it really doesn't matter. We can go in and click activate, and now we will switch over to our child theme, and if everything went well, we can relied, and it's the exact same website. So you think you might be thinking well, Chris Why did, if it's gonna be the exact same, Why did we create a child theme? And the reason why, like I said, is just putting your modifications in a different file. So what we can do is put more functions in here. What we can do is add custom styles here, which, by the way, we're gonna do some theme customization in this course. So you actually see what it's like to update a child theme and what modifications were actually going to do, but for now are theoretical basis. We can put all the changes we want into this theme, and then we don't have to modify the original theme. So hopefully you understand what a child theme is by now. At least from a theoretical standpoint. As I said, we're going to ah, actually edit this child. Fame creates a modifications. It is very good practice to have a child theme. I would say that is one of the things that I didn't do when I was starting out. And I wish I wish I did, and ah, yeah, it's just a good, good practice to do and or sir, it makes things a lot cleaner. So really important that you get that child theme set up. And ah, with that done on, it's time to actually get stuck into divvy and do some customization, so I'll see you in the next video. 8. Getting started with Divi: in this video, we're going to cover how to get started with Debbie. And what I mean by that is changing up some of the default sort of settings here. Obviously, the first thing that stands out to me is that we've got the divvy logo instead of our own logo. Um, the menu is terrible. We've got sample page and un categorized. This is just a default Behavior were showing on our front page. Ah, collection of all the blood posts. Right now, we just have one block post which says, Hello, world. That is just a piece of dummy content that Web press starts with. Um, But if we had multiple blood post, this would be an index that we could scroll through. And it's also put in the sidebar. Finally, it is put in a footer with, designed by elegant themes powered by Web press. So it's very divvy branded at the moment. The menus, they're wrong. The contents dummy content. Um, and we've got a sidebar. So the first thing like I mentioned is I want to update the site logo. Now there's two places you can customize your theme. You can use the theme customizer like we went through before. Davy provides a lot of options here. The place that I like to, um, look first when I'm changing options for divvy is if I go into the dashboard, we have a new menu here, which was not here before. Obviously, it's just been put in by divvy where we can go into our theme options. So again, the for the two places that you should look toe customize, divvy before you dig into any code would be theme options. Theme customizer and module customizer don't haven't had to use very much, but that is also a place where you can create customization. Now, once you get to the general theme options of Debbie, which is the first tab that shows up, you will get the first field as logo, which is appropriate because that is the first thing I want to change. So I'm going to go into a photo that I prepared of, um, files for this sport press course, and I have this logo. It's a pretty terrible logo that I've created. I just basically traced around a picture of my face, Um and yeah, I'm just going to use that as my website now, for SCR reasons, you're gonna want to put something a little bit more descriptive in here. In fact, the title probably should be a bit different for here. I'm going to say Christopher Dodd, Web developer, that I'm gonna click set as logo and that'll be the logo. So there's a plenty of other options here in ah, the divvy Options. But for now, I'm just gonna click, save changes, and then I'm going to view the site. And as you can see, my face isn't how the logo off the website. All right, so what I want to do next is change this front front page. Um, so what I need to do for that is by default. And this happens in any WordPress theme is that it'll show a with the block posts that it will provide a blawg index and often times most websites. You don't want to just show your blawg index, so it's important to know how to change this. And it's a very simple matter. You just go into settings. I think it's reading. Yep. And then your home Plage displays is the thing that you're gonna need to change right now it displays the latest posts, but we can create a static page. Um, I should have created a page and events, but let's just use the sample page for now. I'm gonna click, save changes. Now, when we go back to the home page, we have got the sample page and is good causes. Put in some content there. You can see what it would look like now with a page instead of the the BLAWG index on the front front page, the website. The next thing I want to do is update my menu. So I'm gonna go back into dashboard. The way to access menus is through appearance and then click menus. So I'm gonna give my menu and name, and I'm just gonna call it Main Menu. And you can see I've done this before because I got suggestions coming up. Click create menu. Now I've got this menu and before we put pages into it, which, by the way, we don't really have any. I'm going to click on the display location, which is primary menu save menu to make sure it shows up in that location. Um, and because we only have one page I'm gonna add just one page to the menu save menu again. And when I go here before you refresh, make sure to look at this and you'll soon see that when I refresh it, it comes up with my new menu, which only has one item right now. And just to be clear, the reason why it's blue and not dark like the rest of these is because this is the active page. Right now, we only have one page. So, um, it's gonna be blue for the front page, but we can add in more pages and just to demonstrate the menu, um, we don't have a lot of pages to link to, but we can create our custom links. Best way to create a dummy link is just to put a hash in. But we can say maybe we wanna have a portfolio tab. Maybe we won't wanna have a services tab. And maybe we want a tab for blawg. Okay. And so what you'll see here is you got all these links. Now I'm gonna get rid of sample page, cause it's the home page. We don't really need to have it as a menu link um, but one thing else I will show you about menus is we can have nested menus, so I'll show you that. Now, let's just say that you had a blawg and you had different topics. So maybe one of the topics is WordPress. So I will. It will add to this menu and what I can do to make it a sort of sub menu item off. Another menu item is click on it, and I can, by the way, I can drag it to different positions in the menu. But if I drag it just a little bit to the right, you can see it's a bit indented, and I put it in. It's now going to say sub item, and that's a sub item of blawg. So to see this change, I'm gonna click, save menu, and then I'm gonna refresh. And as you can see, we've got the portfolio link. Um, and then you got the blood link, and then you have that sub link of blawg, which is WordPress. So that's your menus. The next thing of importance is probably the theme customizer, So I'm going to go into the page Click theme customized that you can do it from the front end or the back end. How you would do it in the back end would be appearance and then customize here. Um, but you can do it. Um, while you're on the website and what's powerful and divvy is that we can change typography settings, we can increase the body text size. So these are some general like typography changes. Um, that will go throughout our site. Unless we override them. It'll allow us to change the head of front and body funds that we can change whatever we want. Um, let's choose. I think Avenue is pretty in if they have it. Ah, what about Anaheim? It's a bit boxy, isn't it? You get the point. You can put whatever you want in their, um and then body fund on Do able. Wow, that's not very readable. Okay, That's not great, Eva. He's a very stylish but not very readable droid. Sands. Oh, that's alright. Droid sandaled. Er, um we can change the body link color. So as you can see here, that's a link. We can modify it. And then suddenly that changes. I'm gonna create default, cause Blue has historically been the link color. So a lot of people know a blue text is a link. We can change the body text color, maybe want it more faint, which probably wouldn't recommend or more black. We can do that as well. So you get the point. You can I'm gonna click publish so that those changes alive, I'm gonna go back into here. Um, layout settings. You got a lot of settings and divvy. To be honest, um, you could get very carried away, and you could just hang around here. And actually, that's probably a good recommendation to just hang out in here and see what you can customize play around. Because this is the guest top level layer of customization and divvy. The deepest level would be writing code, but this is probably the first place you should look, this end the theme options, which I talked about before. Um, we can change the overall color scheme as well, but yet you get the picture. We can customize stuff that will happen to the to the whole of our website through this menu. All right, so we've got the logo. We've got our own menu, and we've changed the front page from posts to ah, a single page that we are gonna edit later. But the sidebar on the home page it's not a good look right now. So what I'm gonna do is I'm going to go to menus and I'm going to go into widgets. It's a bit of a confusing, um, location, but, uh, your sidebar is set up with widgets, so if you want to find your side by and customize the widgets inside of it, you can go in there now they throw a lot in here that you probably don't need. I hardly see anyone having a meta menu in there side by, um, categories you can put in if you think that's good archives if you think that's what you want toe display to your audience. But we can probably get a rid of a lot of this, sir. What I'm gonna do is just elite all of these Ah chi IVs. Recent comments, um, search. You can search for the menu bar for that. Sorry for the top bar. Actually, the menu bar eso we don't really need search twice. And I'm just gonna leave recent posts, cause I personally like to have recent posts in my sidebar, and I'm going to give it a title of recent posts. So people know that's my recent posts. I think it it has recent post by default, but, oh, well, if I refresh the page now, you can see that the sidebar over here has changed. Instead of seeing all these widgets that we don't really need, we have just got the recent posts. Eso That's great. A same time. I don't wanna have a sidebar on the front page of my website anyway. You'll see as we build out this front page with divvy, I'm gonna want the first section to be full whip. And also, I don't want to confuse a user with too many links on the front page, so I don't actually want that side bar to show up at all. And with divvy, it's quite simple to disable the cyber. I'm gonna click edit page, and there's actually over on the right here DV page settings. So over here in the page layout, it's set to include the right sidebar right now, but I could move the side bar to the left of I wanted to or I can go full whip, which gets rid of the sidebar all together. I like that. I'm gonna click update and it says Page updated so I can click view page and suddenly there's no cyber. So if I go to check out a block post Ah, let's say hello, world. I can access it like this with the girl. And if we look at the Post, we can see the post there and we can see the sidebar. So if you want to turn off the side by completely, there are ways to do that. We can hide it with CSS. We can also change the template. But if you're happy, Teoh edit that for each individual page. You can do that through edit page, so the final thing I wanted to change was the foot up right now, it says, designed by elegant themes powered by WordPress. But we don't really need to promote elegant themes or WordPress if we don't want to. In fact, that is, ah, good space to put in some copyright information or a link to our insight, or if you're able to in the client doesn't mind, maybe you want to put designed by and your link there. But definitely ask your client or whoever You're building the website for where we do that first if you want to do that. But essentially there's no need tohave elegant themes and WordPress links below in your footer. So what I'm gonna do is I'm going to change that by going into the theme customizer which remember, we can go into the name of our website scroll down click theme customizer. Or, of course, we can go into appearance customized through the dashboard as well. Yeah, I can just go to the foot of which is actually, uh, it's just a part of the of the foot of cool bottom bar the power were trying to edit. So I can go to the bottom by option, and I can edit the footage credits. So I'm just going to say copyright, Christopher and then I can put in some hay html there as well, so I could put in a link tag and I can get it to link to another website again. I'm just putting in a hash just to be a placeholder on, and then you can see now the text is a bit different to indicate that it is a link. You can also disable for two credits altogether. So it doesn't even need to say copyright. Christopher, It'll, um, so, yeah, you could just disable it completely. Well, you can toggle it on and have your custom text on the bottom. Right. You might have noticed these links that come from divvy. Um, if I just click publish here, I'll show you where you can access them. I've got the theme options already open here. You can put in your Facebook, your twitter, your Google plus links in there. And so when somebody clicks on these, it will go to those links. But honestly, I have Facebook and I have Twitter. I'm not a big user of Google. Plus, So oftentimes I'm hiding this section and putting in my own social links. I like toe linked to other profiles as well. Not just those three. So I'm not sure why David shows those ones. Probably cause they are the most blogger friendly. But I like to link to YouTube and Instagram. Ah, sir, um, I usually create my own little foot A with those links in there, so basically, we have the basis of our website. We have a front page and a menu that actually doesn't do anything yet, but we'll get to that. But the most important thing that our website needs right now is surprise. Surprise content, sir. In the next video, we're gonna talk about adding content because if you don't have any content, you've got nothing to display. And it's hard to even organize your website when you don't have anything on it. So we're gonna add some content in the next video and in the following videos, we're going to continue with Cem customization and page building, so I'll see you on the next one. 9. Adding Content to your website: All right. So this video, we're gonna be talking all about content, and we're gonna add some content to our WORDPRESS website. Remember, WordPress is the most popular platform for building content based websites and for a content based website to be a good content paste website, it needs toe have content quite obviously. And in WordPress, there are a few different, I guess, content types that we can add. Ah, in WordPress, there are two things called post types, which is a bit confusing because one of them is actually called posts. But essentially post types operate in the same way. Did he actually adds 1/3 post type called projects? And I haven't really explained what a post type is yet, but basically it's just a way of dynamically adding content so we can see here on the posts menu. We can look at all posts. We can add new posts, we can categorize up hosts and weaken tag them. If I go to pages. It doesn't allow for categories and tags, but it allows us to view all pages and add new pages. If we go to projects which is added by divvy, we can go to all projects and you categories and tags. So the difference between posts and pages is that posts. You can think of them as blood posts, so they have a set time, and they are added to what's called your RSS feed. So if somebody were to subscribe to your blog's through a blogger reader, when you release a new blood post, they're going to get notified. So in a lot of ways of posters, a lot like a page, but it's just got a date on it. And it's just built to be like a blood post. So moving on to pages pages are quite similar to posts as mentioned. The difference is that pages don't have a date on them unless you were to specifically put a date inside the content. They don't have categories, and they don't have tags because pages are generally used for navigation or to build a special page that doesn't really represent the regular content on the website. For instance, if we go to one of my favorite bloggers websites called Nomadic Matt at nomadic matt dot com, we can see here that the first thing we are looking at is a page. It's adding to navigation because he's linking us to his different books here. But you can see here in this section he's linking us to his blawg posts. And essentially we got the same thing. We got a page, and I guess you could could consider this a page as well. But if you look at the post, it's obvious that it is a block post. You got a date here and he puts the sidebar in there. So, yeah, it's a bit of a subtle difference, but posts you can think of as blood posts and pages of basically anything else, of course, and divvy. It is a little bit different in the in the sense that you have 1/3 post type and that is projects on. And this is what makes Divvy really good for building personal portfolio websites is because maybe you want to put your previous projects previous client work, portfolio, whatever you want to call it into a separate section, and so did he makes that easy by giving you another post type, and this is what's known as a custom post type because it doesn't come default with WORDPRESS. Luckily for us, they're divvy puts it in automatically, so we didn't have to set that up ourselves. All right, The final bit of content to talk about is media. And basically, if we just go to media now, I'm gonna open up a new tab and we've got all the images that we've already put into the website here, and we can add new images by adding new here. And so basically, media by itself doesn't really do anything unless maybe I put in a document here and links somebody to it. But ah, we can embed media into posts, pages and projects. So media, most of the time is gonna be images. But maybe you want to put audio files in here. Maybe you want to put videophiles in here and maybe you just want to store documents. So I guess, Ah, you know, the media is just another content type, but it goes hand in hand and embedded with posts, pages and projects. So now that I've given you an overview, it's time to actually create some content. So I'm gonna go into post and click all posts, and you can see here in the table that we can see our first post, and it's giving us the title. The author and the category, which in WordPress you have to have a category. So if you don't have it, have any category set up, It will just say I'm categorized. So what I'm gonna do now is because hello world is just a dummy blood post. I don't really care about it. I'm going to trash it and start from scratch. So I'm gonna click. Add new to add a new post. And by the way, the functionality between this and pages and projects pretty much exactly the same, so you don't really need to. There's no learning curve with having to create pages and projects. This is the exact same, basically. So I'm going to say that this is a blood post on how to build a divvy site. And if I hit tab to move onto the next field, it will create the U. R L for me. And because this is a blood post, what is going to do in the u. R. L. Is put the date off publishing, which it will assume is that today's date between the domain and the ah, the title of the Post in the URL. Um, I don't really like that. And it doesn't really help with s CEO or anything, sir. Um, I'm gonna just change that in a sec that there is one difference between posts and pages pages, you It doesn't do that. So after I put in the name and then go to the next section is gonna create a link with that . And down here we have the WordPress default editor for creating blood posts. And in this situation, you want to use the WordPress default editor. You could use the divvy builder, which we covered earlier, but I would only use the divvy builder to build pages because I like to keep my blood post using default. What's called the whiz e wig editor here. Um, as in what you see is what you get and 11 of the reasons why it's really important to create your blood posts. Using WordPress is built in with the week editor rather than the page builder is if you were to switch to another theme, all your blood price would be broken because the page builder, what it does is it inserts code on the page that divvy interprets. So if you were to change your theme later on, all that content would be, I guess, stuck in divvy. So don't get me wrong. I love divvy. And I think it's very powerful when you want to build pages using the page builder. But as for posts that are the regular content of your website, you don't want to have to go back and rebuild them. So best to use this area here. All right, so I'm going to go to a website that just gives me Lauren Gibson to put in some dummy content. Let me just go to any of these ones, and I'm gonna put in this. So that is your basic paragraph. But maybe I want to add some headings, so I'm going to go in and put a subheading in, and then you can go deeper with the headings to do heading three, which isn't even smaller subheading. So I'm gonna call it sub sub heading home, and then I'll just place in that exact same text. All right, cool. Here. I think this is a divvy theme, so you can change the excerpt. So when wordpress is showing a preview of your blood post. It will show this excerpt. Otherwise, I'll just show an exit based on what's already on the page. What you can do is change the layout so you can hide the side by using divvy. You can save a draft if you don't want to publish it yet, and you can assign a category. So I'm going to do that right now. I'm going to give this post a category because it's based on how to build a divvy site. I'm going to go a little bit broader with the topic, and I'm going to say this is based on WordPress development as the category categories of powerful, because you can section your content based on a particular grouping. You can also do this with tags, but tags that kind of secondary two categories. Um, usually you just need to categorise your content, but you can also tag it if you want to add what's called an extra taxonomy. Okay, so the final thing and what's really important is to set F featured image Now don't have an image specifically for this post, so maybe I'll just go and download one right now so I'll just find an image. Just a random image. I shouldn't be doing this because it's somebody else's. But this is just for demonstration purposes. Usually you want to use images that you have the rights to, or you're not gonna get in trouble for copying. All right, So I'm going to save it, and I'm gonna put it into the files for the WordPress course, and then I'm going to upload it, and that will become my featured image. Basically again. All text for S e O, sir. How to build a divvy site. Um, I really should have got a picture of a divvy site specifically for this bog post. But again, this is just for demonstration purposes. All right, so one thing we can do before we click publish. If you want to see what it looks like before you actually publish it, you can click preview, and suddenly you've got a title. You put your author name, you got the date it was published. What category? It's under. And how Maney comments And you can see this is a lovely layout. That's all. Basically done by divvy and WordPress. So I'm gonna click publish here and now the blood post will become live. You can view a post once that finishes loading and you can see your done post. There you go. Very nice. Now the two things I said I wanted to change was I wanted to get rid of this date thing. I really don't think it helps with Seo, and it probably doesn't help with people finding your website easier, Eva. So if you go to permanence in your WordPress settings, I'm just going to go and change the common settings to post name so that you can see here. In the example, it's not gonna have the date and then the post. It's just going to skip straight ahead to the Post name and put that onto your domain. And, by the way, these permitting settings you can go through an update. Maybe you just wanted the year and then the post for that. You can use these kind of tags here if you really want to do that. Um, most of the time it's just easier and best to just have the post name in there. All right, we're going to save changes. And now if I go back to that post we created, I'm going to go to all posts and then just skip ahead to click view. It will just have the root domain and then how to build a divvy site, which is good for seo as well. Um, you always have to build in with S CEO in mind s year, for those of you don't know is making it optimized for search engines. So that's easier to get your website to ranking Google or any other search engines. So now that we've created a post, creating a project is basically the same thing, and they're going to go through the whole creating a project post type here. But what you can see is the exact same interface. Um, you can see here we can add project categories. We can add project tags here as well. These air separate to post categories and tags. One of the things about this being a separate post type is the categories and tags available will be unique to that post type. In post, they'll have their own categories and tags, but essentially it is a duplicate of posts that just puts it in a different category in the sense so it's sectioned off from posts completely. The next thing is pages, which again is exactly the same. We can look at our pages here and then, Ah, some words after it to indicate any special pages. So you can see this Here is our front page. So it's got dash dash front page. If you were running e commerce, you might have dash, dash, um, Carter page. You might have dash dash, check out page. Um and that dash just means it's a special page. And it just indicates to you which of those pages is your front page account page and all that? Okay, so this is a dropped I created earlier. And then, of course, draft here is any pages that air in draft mode. So you actually haven't published them yet? All right, so essentially, what you're gonna want to do if your website is toe have as much content as possible. It's hard to categorize your content when you only have one block post and it's hard toe. Have navigation and different parts of your website when you only have one page. So you should really go in there creating a blood posts, um, and essentially my advice to anyone starting a website is to write, you know, at least five block post firsts or write out five pages and design all of that first and then to start putting that into WordPress because it's hard to, you know, create those menus, create those layouts and create everything else. When you don't really have content in your website yet, remember content based websites supposed to be filled with content, So what we could do is go through and create all these new posts, but essentially the process is the same for each of them. So I encourage you to go through and create some content, maybe even some dummy content. If you just want to throw some dummy content in there, that's so good. Um, I'm going to skip ahead a little bit, and I'll put in some my own content, and I will see you in the next video in the next one. We're gonna build pages, which is a little bit more involved, because we're going to be using the page builder and we're going to build out the home page . So I'll see you in the next video 10. Using the Divi pagebuilder: So in the last video, we talked about adding content in between that video and this one, I've added in more blood posts in the post section, As you can see here, but also in projects. I went in and put in some projects to be clear. No, I haven't worked for Amazon, Facebook or Google. I just thought they would be easy examples to demonstrate. Ah, what you should put in your projects. And now that we have some content in here, we have some post. We have some projects we can now start to build some pages that bring in some of this content dynamically. And of course, when we go to our website, the first page that needs fixing up is our front page. This is just a sample page that came from Web press. Um, so it's time to go in and change it to how we would like it. So as I demo before with Debbie, once you click edit, you can use the divvy builder. I'm just gonna delete all of this and then click used divvy Bilde. Actually, if you want to delete that, what Devi would do is it would put that text you had before as a ah, text module right here so you wouldn't lose it. Um, I just knew we were gonna get rid of it, so Ah, I got rid of it beforehand. But I could have just as easily done it the opposite way, which I just demo now, just as a reference, in case you do want to change a page that was done in the WordPress. Busy? We get that, but one change to divvy. If I click this, it will put the text we have as a module as a text module in first column off the first row off the first section, which by default, is a one column. Right now, I demo before the use of visual builder, which for some of you, you may prefer that. So just to show you that again, basically, you hover over the different parts of your page and you can edit. This is the section so you can click on the gear and you can change section settings like that. You can click on your row and you can update rose settings like this and you can edit your text settings for that module. Add in another row with how many of columns you want. Um, and then you can add in another section as well with a regular specialty for which I, as a personal preference, don't really like to use the visual builder because, you know, it's a bit finicky with these different things that hover up. It's just a personal preference. If you like to use the visual builder. Definitely, by all means use the visual builder. But my preference is the the default builder. So I'm just gonna go back into edit. And here is the default builder Now. Why I like the default builder, is it's just a lot more clearer where the sections are so I can add a row here and I can add a two column row and I can put modules in here and I can see the name of the majo Um, and it just gives me a good view off the structure of the page, whereas the everyone shows you exactly what it looks like on the page. But then maybe, perhaps, is a bit harder to modify the structure. So for me, I like this. Maybe that's because I'm more of a developer totally up to you Which way you want to do it . Now what I want to do is create us a home page for this website. So the website I'm kind of building and you probably gathered it by now is like a personal website. So I've got a logo of my face. I've got portfolio services, Blawg and the website. I've called just my name. Divvy is good for this, and I just thought that would be an easy topic to start with. You don't have to make a site about your personal brand or profile at all. So just to let you know, that's kind of the site I'm looking to build. So again, just as an example, we're gonna build out a kind of freelance a portfolio website. But the same principles apply to whatever you want to build. So, in terms of popular modern web design, oftentimes you'll see, um, just like in my website here, which is my actual portfolio website, you'll see a large what's called hero image. So it's just taking a little bit to load. But this is basically a full whip image. This is all built on TV, too. By the way. So we're gonna be building something similar. This is a full whip image and it's got a little bit of what I want people to see. What's called it cool toe action. This is just a button, basically. But this whole thing is a court action because I'm leading people into taking one action from the moment they see the website. So that's just a little bit about design. So what I'm gonna do is because I want it to be full whip. I have toe actually do a different section type and divvy. I'll click full whip section and I'll drag that above what we have already. And so you can see here. There's no Rose because you only get one row with the full whip section. But what I'm gonna do here insert modules. These models are a little bit different for a full whip section to a regular whip section, but what I'll do here is I will do a full width header which allows me to put in heading texts, a button or two buttons effect and also put in that background image. So I will say, Welcome to my website as the title I make WordPress sites, and then for this button will do view my portfolio and you're gonna have to buttons in there. I'm not gonna bubble with the second button. Um, you can put in the URL and because we haven't built it yet, I'm just gonna put in the hash as a placeholder, and you can put in images here, but what we want is a background image and in divvy, you go to the background settings. Ah, and right here is if you want a solid color as your background here is, if you want a Grady int here is if you want an image background and here is if you want a video background, that's really cool. You might have seen on other websites that I have a video background. Did he makes that really easy to do by using the video background option here. So I'm going to go back to image and I'm going to go to upload files and I've already got it here. This is the the hero image I use on pretty much all my websites and going to give it a better name. Just type in my name Christopher Dodd here our image and then down here, Um, make sure it's full size, said his background Dari. That's cutting off right now. We might need toe a just be background size and image position. So my head or the most important part is in the top, right? So I'm going to position to the top, right, and hopefully that looks good. Otherwise, we can mess around with this. The background image size we can set to cover, which is it means it's gonna cover the whole section. That's good, because we need it responsive. I'm gonna press, save and exit. And now I'm gonna preview changes. We could just as easily have hit update. It doesn't matter because we're not really working on Ah, live website yet. But if you were updating a page on existing website, you'd probably want to preview first. So, as you can see, we've got this full with image. Welcome to my website. I make wordpress sites view my portfolio button, Um, and straight up, I can see that we're gonna need to make a change. And that is this is simply not tall enough. As you can see here, my face is a little cut off It looks kind of creepy, actually. Having just my teeth the top of part of my teeth just above here. And so what I'm gonna want to do is force this to have a certain height. Now what I do, and this is something I showed you guys in the last class is to play around with your website in the browser before making any permanent modifications. So by by using command option I on chrome using Mac, I can bring up the developer tools and you see here this is already responsive, so now that looks a bit better. But again, um, on a larger screen, it's gonna cut off my face. So what I want to do is inspect here, and that's gonna bring up the heading. But if I go further up the chain, I can see here, and you can kind of gather from the class names. This is the section, um E t is the prefix that divvy uses. So when you say eat when you see e t p b e t p b e t p b um, Also, that's a good tip. If you want to go check out somebody else's website and see if it's built on divvy. You can check out the curd, And if it's got e t down, underscore PB underscore, then it's highly likely that they're using devious Well, so that's pretty cool. You conspiring other people sites. So what I want to do here is just verify that I can affect this festival. So I'm gonna change the height. Sorry, I should back up a little bit. If I select this, I can apply a style directly on it using this panel. Okay, so that's what I'm doing here. So I'm gonna put in 800 pixels. Okay, that's cool and all. It made the section bigger, but the element that has my image in it is obviously not there. So I'm just gonna cancel that which I can do by checking this check box, and I'm gonna go one layer deeper. And as you can see here in this layer, you can see that it's referencing the background image there and I can toggle that on enough. So now when I go into up here and I give it a height, There you go. It now becomes bigger now. Eight hundreds a bit much. Um I don't need it to go all the way down. Probably just need about their Yeah, even enough at a full whip. Actually, I'm just going to close down. This is why does I could get it even at a full width. You can still see my face in a bit of my arms, so I think I'll just make it 500 for now. It's important to note that Ah, doing it here isn't going to make any changes permanent. This is just for you to play around with an effect the output on the screen so that you can figure out what to change in your dashboard. So what I'm gonna do is head back and find this module. So we were on the section and then one layer deeper. Is this also called section, But in html. But as you can see here, the classes PV module. So what we need to do it was go back and find that in our Davey page buildup. So I'm gonna go here into the full whip module setting, and here you can add in custom CSS. You could also add this in your style dot CSS on and try and reference it, but in this instance were just affecting one single element. So it's safe to do it from here. So I'm gonna put in height 501 of the core features that divvy has put in since that they've updated. Their theme is, once you click into something, it will tell you what the class is that you'll be affecting. So we can go verify this E t. On the school. PB on the score for whip on this. Go ahead of on the school zero so I can go back into our side here and I can check. Is that the one? So, as you see here, E T P B on the score for whip headed zero that matches up here. So this style should be applied to this element. So I'm gonna go scroll down, I'm gonna click, save and exit. Then I'm gonna preview again, and this will refresh the page. And then you got Now, this will be always 500 pixels tall, and that's a good example of how you would dig into curd to change styling options and stuff. But as you'll see in the next video, we're gonna dig even deeper into code to do some more serious customization. So the next section I'll build on this website will be a bit of ah blub section. So it'll talk about my key selling points as a freelancer. So I'm just gonna delete that whole section, and then I'm going to go here and start a new section just so I can start from scratch. What I'm gonna do is I'm gonna have three blurbs and I want them all to have an equal width . So I'm gonna choose this. And this is what I like about the divvy. Build a default. You can clearly see that there are three columns here and you can click on any of them to add a model to them. I'm going to click on the 1st 1 ad a blub and a blood is basically just an element that has a title but a content, a link in an icon. So I will say, um, responsive. Just I'll say an eye for design is one of my selling points. All right? We don't need to link it if we don't want to, sir. I'm just just not gonna put a link in there and then I'm can used Davies icon library by clicking use icon. You can also upload an image and use an image, but I'm going to use an icon, and I just need to find something that communicates design. So I might fast forward here a little bit for you guys because I'm going to create two more blurbs on and just copy the process for this one. But just let me find on Icon that communicates design. Um, I don't want to spend all day on this, so I'm just gonna choose this basketball looking thing, which I think is dribble. Okay, so right here you can change the admin label. Um, I'm gonna change that to design, and you'll see why in just a second Now I can see we found going into it. What is going to say? So I've labeled as designed, so I know that's the design blub. So, um, I'm gonna fast forward here, put into more bloods, and you'll see the results in just a second. Alright, So I've got my three bloods in there, and I'm gonna preview changes now and to see what it looks like. All right, here we go. So as you can see, it looks a bit weird because the the titles ah, line left and the icons are in the middle. Also, it would be good to have some content under them, so I'm going to go back now and fix that. All right? So I'm just going ahead and fast forwarded that went through that, Gonna click on preview, and now you can see the text assented. And the, um there's a bit of a blub. Um, So how I did that just to give you guys a recap I went into content toe, add in that little bit of content, and then I went into the design tab, and then I scrolled down to text and online that a center to do that that looks pretty good . Remember, this is all responsive because we've built it on TV. So if I go like that down to this, it'll stack on top of each other. If there was four, for example, it would have gotten to maybe this screen size and done two rows of to, um so very intelligent. Sometimes you might need to change it, but most of the time, divvy is pretty good at making it responsive. Actually, one thing I want to do is add in another row here and putting the title for these bloods. So, um, using the standard busy week editor from Web press will make a heading to, and I'll say, Why hire me? And I'm just going to give this an admin label of heading. Okay, so now what I'm gonna do is add a new section, and I'm gonna do a one column row and again put in the same thing I had before the text that is gonna be a heading going online center. Make it a heading to, say, check out my previous clients Gonna call this heading clients. You can put whatever you want in there. It just makes it easier to figure out what section is what I'm gonna add a row, and I'm gonna put in a full whipped section on a full whip section but a one column row, Um, and here I can bring in some dynamic content. So there's an element here. You can do a filter, filter able filter, herbal portfolio. When you can just do a normal portfolio, we only have actually we didn't set up and he portfolio categories. But if you have portfolio categories, you could filter. Um, this is going to set the maximum man a post. It'll show, and you can show which things Teoh show up. So, categories we don't really have any. So I'm gonna hide that, um, pagination We won't really need that. But you can have that enabled. And let's just put that in and see how it goes. I'm gonna go back up here and I'm gonna preview changes. Check out my previous clients. Okay, so now it's gonna go these really big blocks, which I don't know why TV does that by d. Focus often look ugly. But what we can do is this is the content tab, right? So we can change sort of the content and even do the background. Advanced is where we can put in us custom CSS i d and classes and change our visibility on firing tablet or desktop. But design tab is what we're after. And what we have here is a field called layout and we can change that from full whip to grid, which in this case I think it's gonna look a lot better. You have so many more customized I customization options. It's ridiculous. I'm not gonna bubble with it for now until I see something I want to change back to preview changes and you're gonna want to make thes logo is probably the same height and whip if you want them to show up nicely. But as you can see, this is pulling dynamic content. When I mean by that is, as soon as I add a new portfolio item in here which is called Projects in Divvy, that will show up in he had provided that it hasn't reached the maximum. Now, I just figured out another era I had here, which is I forgot to move the heading above so you can move a module like this very easy, and that heading will now show above. So let's preview that. So now you've got this section, which is the hero image with the call to action you've got Why hire me? So you got the blurbs. You can check out previous clients, which, by the way, if you click on one of them, I'm doing in a new tab. Um, you can get a whole page on more information about that project. And the same goes for all of these. It'll have the same layout of a page if you want to go in. This is old dummy content. So there's nothing new to see here. This is just for an example. All right, so finally, I want to put in the other section is gonna be pretty similar. So what I can do is ju plicating or clone section, as they call it, And I'm gonna change this instead of clients. I'm gonna say, Read my block. And this is where we can put in another set off dynamic content. Gonna remove the portfolio by clicking here, and I'll get rid of that module and then insert a new module there and I can go to Blawg Now I can filter by category. I can change. Met a date format. I couldn't choose to show the exit or not show the exit. Um, I'm not gonna show author because all written by me not going to show categories because there's only one pagination you can turn on the read more. You can turn off the featured image if you want, but the one thing I know I'm gonna want to change is I don't want this full whipped layout , so I'm gonna change that to grid again and too many too many options. We're gonna click, save and exit and then preview changes. And if we scroll down, we have a lovely, laid out section which shows our block posts, as you can see here, the X it's gonna be the same for every one of them. Because I put in the same standard Lauren absent passage. But I change the sort of featured image to just make it a bit more clear on what we're doing here and again. This is fully responsive. You see how that's shrinking now and now that's breaking to a new line. Even this has been centered, this stuff in the foot. Um, another thing to note is the menu collapsed into this, so yeah, it's all responsive with divvy and the page builder, Andi, we've got two sections of dynamic content here, so obviously there's a few more elements you can work with. Um, best thing to do was probably play play around a bit, So go in here and check out the different modules, see what they do. But basically the principles are with the Debbie Page builder. You gotta section, which is in blue. You've got a row and you've got columns Which three amount of columns get set up. As soon as you create a new row, you can't rearrange Rose. But you can always say, for instance, you wanted to move the blawg into one of the columns. You could do that and then just delete this so you can move module from ah, different space to different space. You you can also rearrange Rose as we showed you before we can rearrange sections. Sorry. Rearrange sections like this if we wanted that section above and we can get rid of them. Eso the main principles is sections, rows and columns and modules. And the second principle is the difference between this sort of static content and dynamic content that pulls in other content types from different parts of your website. So I hope that is a good introduction to the page builder and how to build pages with Devi and WordPress in the next video. We're going to go over customizing your code. So, in this lesson, you did see a little customization when I went in and changed this to have a height of 500 . We can go in and inspect element and see that change right there. But we're going to look at the other ways that you can customize your code, including adding a code block creating styles. We'll start how to figure out which part of the page to style and the difference between CSS and in line, which we have talked about a little bit. But we're gonna go into more detail in the next lesson. Before we do that, However, I'm gonna make sure to save this. Have, on occasion, just close this page without saving my progress. You'll need to click update here and now those changes permanent and alive. And you've got your website, so I'll see you in the next video. 11. Customising with code - Basic: So in the last video, we created the front page of our website using the divvy page builder. And as you can see, we were able to use the page builder to create, you know, a pretty good front page, um, with dynamic content pretty much using zero code. Apart from putting a style on this and that's the power of the page builder. We can build out layouts like this Ah, and used elements from divvy without writing any code, and that saves us a lot of time. But what if we want to add some custom code in If we go into edit page here and we just add in a new section to add in a module? This is the list of available modules with divvy. And so if you wanted to create a circle counter, that's cool. You got that right there. You want to put in the contact form a gallery. There's some really cool, like out of the box features here in divvy. But what happens if you want to build something that's custom? That's not really in this list, Um, and one of the ways we can do that is to use a code block. So this is kind of like a bear module in divvy, which we can put whatever we want in here. So we can start to use a bit of code to build something custom and then still use or take advantage off. Davies, you know, system how it has the sections, rows and columns. Eso we still get those responsive columns, but we can build our earn elements using HTML CSS, and we can even put in a little bit of javascript. Um, I think the best example of this is to show you a recent client project. So this is something I did earlier in the year for a client in Australia. And I built this website based off ah PSD design and built it all within divvy and one of the things that was in the design that doesn't really come standard in divvy at these sort of what you'd call them a gallery of images with on the hover. It opens up a bit of text. That was probably a terrible explanation, but you can see how it works right here. Um, there's just these faded images, and when you put your mouse over it it gets a bit DACA and some text shows up on screen. So what I did for that, I would just go in and show you right now. So all have done to get to this point is, I just logged in with the WordPress. Admin, went back to the page, and then I used the top bar toe edit. Okay, so now I can go down here and you can see the layout. Um, I've been up side by side. You can see the sort of structure as it is in the Devi page builder, and then you can see the result here. So this is the section I called it in highlight image box on. And if we go into these highlight image box, you can see on some custom Hey, html. And actually, what gives this the hover behavior is some CSS that I styled myself. So let's actually go in and create something similar in our project. Okay, so I'm back in our own project. And just for demonstration purposes, I don't want to spend too long cut coding custom elements. I just want to show you the potential here is I'm just going to create a div, which is gonna have a border that makes it obvious to see that we're putting in some custom card. But essentially, the possibilities are infinite. With this, you could code whatever you want, So I'm putting a divvy. Sorry, I div. Okay, so I just put in an additive with box inside of the word box inside it and then given to the border. I'm going to save and exit and just see what that shows up as a preview changes and if we go down, we can see our box here. And the height of the box is made in proportion to the content inside of it. So if we added more text to this, it'll get bigger. If we wanted to fix the height, maybe we want to do that. So I'll go back here, put in some more styles, and now you can see that the box is 300. So just to make that look a bit cleaner, I'm going to make another box. So I probably did that too fast. When I've done here is I've clicked that button to duplicate change this to box too, and then I can move that module over to here for a two column layout and I can preview changes. There we go. We got box one box to now. Obviously, this is not too impressive, but I'm just trying to prove a point here. You could create any sort of custom elements you want on. Go into any detail. You can basically insert whatever code you want to. This is just a very basic example. Now, in the case of that client project that I just showed you before, I didn't do in line styles. Um, especially when you are repeating styles over and over again. You'll want to put that into CSS and apply a class s so you can see this box in this box of the same. And they have the same styles. Any time you're copying and pasting something over and over again in ah, any sort of development, any sort of coding, there is probably a better way to do it. You can put the styles or any code that you're constantly repeating into a certain spot, and then you can reference it over and over again. And in the case of these styles, we can actually put this style in the CSS file and then reference it using a Kloss again. If that is too advanced for you, make sure you go back. And what should the fisc of my skill share classes? Understanding Web development. But what we see here is an in line style and in line styles of fine if you're just affecting one element and it doesn't make sense to build out classes and ideas and stuff if you're not going to reuse this card, But if you're gonna use it once, definitely you could put an in line style. If you wanna make it responsive, you might have to move it into CSS. But definitely in this case, we're repeating the same styles over into another box. So be much cleaner to take these styles out, importing the class. And so I'm wordpress. I'm gonna show you how you do that. I'm going to take out that change this to a class, and I'm going to call the class box with border, okay, and then I'm going to lose my clipboard. But I remember what I wrote. I'm going to copy that, and then I'm gonna go over here and replace this with class. Now it might not look like I saved much characters, but if I was to create way more styles for that, um, you would see it's much more efficient. Sir, where can I put in the CSS? While there's actually a few places and, um, the first place that you can put in your custom CSS is by going to divvy theme options and then scrolling down, and it actually gives you a box to put in your custom. CSS on the other place you can put it is in your style dot CSS file, which I can access by going toe appearance. Clicking on editor is going to say warning, You were editing source code here and I'm gonna click, Understand? And if you remember, we set up our child theme here so we could put in custom code customers custom code customization. We could put in some custom styles here in this instance. I mean, you could put it in Eva, but in this instance, it's something to do with the theme. We might want to re use these boxes over and over again. It's not simply a fix or a surface level customization. It's actually building something so it again. It's a personal choice but for me I want to put it in my style dot CSS I'm going to create a classroom here. And what was it again? It was box with border, I think. Open it up and then put in the style If I click update filed, I don't update the CSS file and I should be able to preview changes here which, by the way, if you have a preview open, it will just refresh it. And then if I scroll down, you can see here that the style didn't apply. I'm just gonna go inspect element to make sure that there is a class on it. Yes, it's got a box with border. But what I think we're experiencing here is a classic problem with WordPress development, and that is casing. If you're not familiar of cashing, it's basically a way that the website saves a copy of itself in order for it to load faster in future. So sometimes your CSS file will cash and the changes that you made, even though they're in the file, won't actually show up on your website. There's an easy way to sort of refresher cation particular pages. You just have to go into the dental. So if I right click on the reload button right now, I'm just right clicking. It won't work. But if I open up developer tools using command option I using chrome on Mac on guy, right click on here. I'm able to empty cash and hired reload. So I'm going to click on that and hopefully changes come across and then we go, we've got our boxes. But of course, we forgot to put in the style that makes it fixed height. So I'm gonna put that in here. And the good thing about this CSS editor is that it gives you warnings and stuff. So I've clicked. Update. It's refreshed. I can refresh the page again, and suddenly we have these two boxes. So there you have one form of customization building custom elements, custom modules and then styling them even in line or by putting it in your style's dot CSS so you can go toe divvy theme options. But what about if you use an element? You kind of like it, but there's just a few things wrong with it. Maybe you didn't want this border on these blood posts, so you can just as easily edit modules that are created by divvy as well as models created by you. And ah, we can figure out how to do this by inspecting these modules, so I'm going to right click on one of them. Click Inspect, and that's gonna take me over here, too, where that particular element is right now it's inspecting this heading. But if I go up, up, up, up until I find the actual column, eso have this column. Um, I could go one step deeper, uh, and go to the article and I can scroll down until I find what's giving it that border. And I could see here There's a style here dot e T underscore PB on the score Blawg on the score grid and also e t. And the score, PB and the school post that is giving it a border of one PX solid with a color off this gray. If I click on that, you'll see that for everything that has that style or that class. It is now hidden, and I put it back on, and I take it off now. What we could do is affecting this straightaway, we could say border none. And then suddenly we don't have any borders on those blood grids. But of course, changing it here in your inspector is it's just a playground. It's not saving anything. Live to the website. So what we can do is what I like to do is just cancel these other styles. Don't worry, this is not permanent. And copy this whole section and then what I'm gonna do in in the style dot CSS go down and just get rid of all these commented outfields. And so this will hopefully override the style that Devi is putting in there. Um, I'm actually more inclined to put this in the Devi theme option, CSS. Um, just because it's just a modification on something that Davies created, But this is just a personal preference, and I guess it's a good demonstration of where you comport it other than your style dot CSS . So if you put it in the custom CSS pot of your divvy theme options and click, save and on, then save Go back here, refresh the page. And as you can see, there's no more borders. And if we go and look inside here. We can see that our style here. So there's the one by divvy. That's just inside the parent theme. Um, but as you can see, we've made our own style where we've said border none. And that overwrites this style here. So this is Ah, a bit of CSS. You can definitely study more about CSS and how to overrule stuff. But essentially, when I wanted to cover, here is how you would actually go about editing parts of your website. So I hope it's making sense now that we can build stuff in page builder. We can take care of the heavy lifting, but if we need to do some customization is whether it be to build a custom element and still use the grid system. I could just demonstrate this here. You know, you're still using the grid system. It's still being responsive. Eso it's taking advantage of Davies sort of grid system and also you can affect already existing modules that divvy creates and you can override the styles that come with those modules to make them look how you want. And there you go, you can see everything's still responsive. You're only just taking away that border. So I hope that all made sense. If not, definitely put a question in the discussions in the next video, we're going to go even deeper and do some advanced customization and divvy maybe whom fix up some of these boxes because they don't really do anything right now. But yet in the next video, there's actually one layer we can go deeper, and that's to affect the PHP templates and in structure of our page, So I will see you in the next video. 12. Customising with code - Advanced: All right, So I'm picking up this video right where we left off. I'm still in a preview, As you can see from the U R L here. But I don't really care about these boxes, so I'm not actually going to save changes. Just gonna click view the page and it's asking, Do I want to leave? The changes may not be saved. If you want to leave without saving, you can click leave. But that's a good warning if you ever try to leave the the editor without saving your progress. So that's a good thing to have. So you'll see here because we didn't change any of the structure of the page out. Style still applies, but we don't have that section with the boxes anymore. So in this video, I want to show you how we do some advanced customization. What we've done in the last video is basically we with the boxes we built some hey html, and with these we styled with CSS, actually restyled the boxes with CSS as well, and what we can do as well is put in some custom javascript. But what happens if we want to change the structure of a dynamic page say, ah blogged post or project or change something in kind of a structural way that might not make a lot of sense, just me saying it, but we're going to dig in and show you an example right now. So if I scroll down and go to one about blood posts, all of these are gonna be showing on the same template. I'll show you what I mean by that. In just a second. Eso I've been up these in separate tabs, and as you can see, it's the same template you've got the heading you've got by and then the person who wrote the article, You've got the date, you've got the category. So I just click the category and then you got the amount of comments. You got the featured image and then you got the content. It's the exact same for this. Um, it's old dynamic, but one thing I wanted to change recently with one of my websites was I didn't want this heading and metadata to show up above the image. I wanted it to show up below the image. So essentially I wanted this featured image to show above and also maybe I wanted to customize. This is well, like I like the fact that it dynamically brings in the name of the author, the date and the category and the amount of comments. But maybe I want to customize the wording of this may be put in category is or posted on. That is all a structural change in WordPress Oh, just Teoh to drum in the difference between what we just did in the last video and and in in this video, Basically, we can change anything to do with styling using CSS, and we could add in stuff to the content with Paige TML. But in terms of this dynamic content that's pulled in by a template in PHP, we're actually gonna have to dig into the template and modify it for that change to affect the standard blawg template. So the way we can do that is by digging straight into the WordPress card. So I've got my themes directory here. I just go backwards so you can see this is our project. And just so you know where to go, here is code that you probably don't want to touch at all. Apart from the config file and make sure it's connecting to the database. But we've already got that. So the folder, which you will be editing most often and pretty much nothing else, is this themes Fota and then going into your child theme. Remember, that's why we created this child theme. It was so that we could put all about customization in the one folder and reference them. So, like I said, I want to put this featured image above this heading end this metadata. And ah, the way to do that is through this single, uh, template, Um, so in Web press, we're gonna go over template ing High Rocky in a future video. But just for now, know that if you create a blunt post or a page, it uses the single dot PHP template. So to make that modification when I need to do is go into the parent folder and find the single dot PHP. I'm going to copy that, and then I'm going to go into my divvy theme and paste it Now, just to be clear, what's going on here is because I'm using a child theme where press is gonna look in this folder first, and it's gonna look for a single dot PHP and basically all the template files, and if they can't find it here, it's gonna load it here. And that's why our website still works. If we don't have all the templates in here because it looks in here first to see if there's any customization is that need to be made? And if there's nothing there, it just goes to the parent theme. But essentially what we're doing here is we're taking the template from the parent theme and then we're able to edit it in the child, um, to make customization. So I'm going to right click on that and edit in Adam. Now, you probably won't understand everything in here, and that's fine. But I'd recommend you, you know, try to familiarise yourself, learn more about the template hierarchy, learn more about the functions. Um, this is an ongoing process, and I surely don't understand absolutely everything that goes on in the template files. But I can kind of figure it out just by, you know, having a look like you can see this div here for main content. It goes all the way down to here and you've got some Devi functions You can tell that day because they got e t on the school P b s. It is ah, special to divvy. And you can kind of match these up with what you see on the page so you can see this div with main content. If I go into into back into our live web site and I inspect and take a look at the hay html , I can see the div. I d main content If I go down and look at fine content area, Um, I'm just gonna copy and paste that cause you can actually click into here press command f on Mac and find content area by searching. So then you can see this div here content area. So this is how I would kind of go about getting an understanding of of how that template relates to this. But it does have a lot off dynamic content, and what we're going to need to do is to figure out where, um you know, the PHP is grabbing the thumb now and get it to put it above the heading and not below the heading. Now, before we make our changes. I just wanted to provide some extra instruction and an extra warning to those of you who are hosting your website on the Internet already. Basically, we've been doing this locally, so I'm able to just go into the folder with my site on my computer and just, um you know, click and drag files and right click and open them into my editor. But if your website is already on the internet, you will have to use FTP. Now, you don't necessarily have to use FTP, but it is highly recommended. And the reason why is something I'll show you right now. Um, just because I've done this before and it has been a really hassle. Um, So make sure you use FTP. I'm going to go over to here. I'm in my appearance editor so you can see our style dot CSS going going to go into functions dot PHP and I'm gonna put in some bad curd. I'll just put in some bad card update file. And actually, wordpress is good in bed now where they actually figure out, like when you put in bad code and don't allow you to update. But in previous times. If you made an error, it would allow you to put that in. And then you get something that I like to call the white screen of death. So just to show you what that would look like, I'm just gonna throw that into my functions. PHP file over here. I'm gonna put in some bad code, and then I'm gonna go swing over to the website and hit Refresh, and suddenly the whole website is down. This is really important, guys, because, you know, if you make an era on your your website in PHP, it'll shut down your entire website. And so it's important to know that when this happens because inevitably, inevitably, you will make a PHP era at some point that this is gonna happen. Don't freak out. You can just go back into your PHP files and figure out where the era is and remove it. So I'm just going to remove it now press, save and reload the page. Suddenly, my whole website works again. That is one of the bad things about WordPress. I guess if you make a PHP era, it will take down your whole website. And that's why if you're building a website for somebody who already has a website or you're updating your existing website. Definitely even develop ah, locally or at a different location, like a staging server, which will go into staging servers later in this course. But I just wanted to make that really clear. If you make an area in your PHP, it can derail the whole website. So that's why you need Teoh. Make sure you creating these changes or making these changes, not on a live website, that you would be very upset about it going down. And the other point I want to make on this is going back to the importance of using FTP. If I was able to use the editor like you used to be able to do in Web press on, let's just say I did that and I put in that era, right? So WordPress allows me to go in and edit these template files from if in the dashboard. If I reload the page, I can't access my website. And so I might be like, OK, well, I'll just go in and change that code. Fix my era. But if I go into a WordPress admin. It's broken as well. So I have done this. Have made this mistake on occasion before well edited theme templates and it's caused a PHP era and my client's website has gone down and luckily it's never been on a live website. It's just been on construction. But you know, if I don't have access to FTP, that's it. I'm completely stuck. I cannot go in and edit the code, so you need file level access to the card. This is very important. Then we go, I've removed the code and my websites back again. If you a bit iffy on FTP, go back to my first skill share class understanding Web development. And look at that. Basically, you can use an FTP client which will give you a similar interface to this so that my favorite ones a cyber duck and file zilla. But if you want to learn more about FTP, definitely go back and watch that. So I'm moving on back to what we were talking about before. Sorry for the ah sidetrack. But that is very important that you understand that warning. What I'm gonna do is actually connect to FTP now because I actually have the template saved for my own website. And I can actually reference that code to remember how I did it, because I had to move a few things around to get it to work. Sir, this will actually be a good opportunity for you to see how you would edit a wordpress site using FTP. I'm going to open up file Zilla. I'm going to go to my sights and connect to FTP at my own website. I'm putting my password here and what I'm gonna do is go into my website and this is essentially how you would do it as well. Using your own website, you can see here I've got my child theme and I can dig into that and you can see here I've got a single dot PHP template so I can click, view and edit. And when it's gonna do is download a temporary copy that I can edit and then upload back to my hosting. You gotta be careful if this make sure that any changes you create are getting uploaded. So basically referencing what I've done already, you can see down here that I have moved this thumbnail information up above here where it was here before I've hidden this function which creates Thea the post matter and I've put in my own post meta here again. I could go into a, you know, an hour long video on how I did this, but I just want to get the point across about how you would edit the structure of your page . So what I'm going to do first is move the image above and just checking what I've done here . Um, I can reference that and go down to here. I can find where this function is. Search for it. And as you can see here, the thumb now information eyes being a generated below this post meta. So what I'm gonna do, just like I've done over here, I'm gonna take the featured image stuff, basically everything except the title. So I might have to do this in to copy and pastes. And I want to put it right after the Meta Post rapper, the post meta rapid robber. Because here you can see the entry title, so definitely has to be behind that. So I could just copy and paste it in there, but I haven't actually opened my PHP tags. Um, for those of you who don't know Ph. B again, maybe you want to go back in. Ah, check out understanding Web development. But I've opened up some PHP tags, so I comporting PHP Copy that stuff in and in Dent across. I'm gonna go back and get the rest of the information here, leave the title there. Gonna hit save. Then I'm going to bring up this as well because this needs to come up. This is actually when the ah image gets displayed, you can see that by print thumb. Now, this is gonna be different, by the way, for any theme. You use this code from divvy right now, so I'm going to space that down and put that content in there. And basically, it's asking if it's Ah, video. It will put the video in instead of the thumb. Now, um, and if it's a thumb now, print the thumb now and if it's a gallery printed gallery, so those are extra things that divvy allows you to do. Basically, most of the time, you just have ah thumb now or a featured image for your blood pursed. So I will save once again, it's always a good idea to continually save. And then I'll go back to here and refresh. There you go. Now you can see that the image appears above the heading and the meta data here. But remember, I wanted to maybe change this a little bit. So what I'm gonna do is go down. And unfortunately, there's just one line of curd where DV figures out what to put in here and puts it all in there. But we can break this down into our own card if we wanted to. And that's what I've done with my own website are broken this down into this little, um, section here. I'm gonna copy and paste that across and then explain it to you. But first of all, I'm going to comment out that post manner closed the PHP tag, open a PHP tag, and then in between, our put my html. All right, so click save on that. And now when I click refresh it should have replaced this post metal which was generated by the divvy post meta function and put in my own sort of code. So I will refresh the page and now you can see. It's got a few more words in there. It's in the order that I chose, Um, and that's all as set out by here. So just to run through it a little bit, this does it'll automatically. But at the same time, you get exactly what divvy once. So if I just uncommon that hit save it should shut up. Show up both of them now so you can see side by side. This is what divvy will always put out if you put in that function. But if you break it down like we did, you can put in your own custom card, and it's still using dynamic content. I'm just gonna put that back to where it was it still using dynamic content. So instead of just saying, Give me the post meta, what you're doing is you're, you know, saying the specific words that you want and you're putting in your own lines and stuff. But then you can put in dynamic content like the author link. Um, then you can put in some code to find the category. This is just a little bit extra card because maybe you don't have a category and yet. If you don't have a category and you asked to put in a category, it'll era. So you get this conditional statement here to make sure that there is a category before it displays it. And if there's multiple categories, is gonna display all of them here. So if a categories is a little bit more complicated, published on is very simple. It's just the date method in Web press. So if you're ever on blood post template, you can just put the date and it will output the date. Um, and then in the final span, I've put the number of comments and using this function comments, number the first argument or parameter in this is what shows up. If there's no comments, I've just put no comments. What shows up if there's one comment, which I've just put one comment and what shows up if there's more than one and this little percentage sign is a piece of dynamic sort of indicator that whatever the comments number is, it will go into that little percentage sign. So again, a little bit more complicated here, Um, you can basically put in whatever you want here. I'm just gonna get rid of that. Just just put in a random span saying Post is awesome. I'll say that. And now suddenly you've updated all your templates with this static bit of code, and you can go to every post and you'll see it has this. That's the same one you'll see you have. This post is awesome. So you can kind of see like you can throw whatever you want in there. I think it makes sense to have the date who it's published by and, um, the comments number. But you can do whatever you want. You know, that's the great thing about WordPress is infinite level of customization. You start with a page builder to get you ah, page up and running without with minimal code. And then if you want to go in and change anything, you can do that through CSS like we did on this page, Um, and hey, html or you can go in and effect the templates. So hopefully that wasn't too advanced for you. Um, keep in mind that, you know, it's an ongoing thing with learning Web press. Even I have to dig around a little bit and try some things and problem solved to get things the way I want. But the major thing to understand here is the principal, right. If you see a structural issue on your page that you can't fix with CSS or JavaScript, you want to go into your PHP templates and make sure that those customization a done within a child theme and that you're not doing them on a live site because if there's any era, it'll shut down your whole site. But as you can see, if you created that correctly, then all of your posts now will have the image above the heading and the metadata. So hopefully that made sense. If not, definitely put some comments in the discussion, and, um, I will speak to you in the next video. 13. The Wordpress Template Hierarchy: So as you saw in the last video, we edited a template file in WordPress, which in this case, was this single dot PHP. But if we go into our parent folder with divvy in it, we can see so many different template files. Ported foot adopt PHP functions dot PHP headed dot PHP. There's a whole bunch of template files, sir, In this video, we're going to talk about the WordPress template hierarchy. And in my mind, the best way to learn about this is two ways. Enable a plug in on your wordpress install to begin with called show current template. And this will give you, if you ever on a page or section of your website wondering what template it is. This really helps. So I'm just gonna go to plug ins, add new I'm gonna go search for show current template. You can click install now and then Once it's installed, click activate and suddenly it's activated. So if that's working, we should be able to go back to our site and up the top we will see the template. So this template is page dot PHP. If we go to our blood posts, we should see now single dot PHP because it is the single page single post type. If we go to a single portfolio item, we should see single as well. Actually, there's a separate project Separate template file called Single Project for this. And I mean, this is really why that plug in is really good. Because I would have thought initially, all maybe this references the single but know there's obviously a custom template for this , and you can actually see it right up here. It will give you the relative template path. Sir, this is in a parent theme, and you can look at all the template files that are included in that. The second tool Ah, second resource to kind of understand template hierarchy is I'm just going to go to the WordPress website by searching for WordPress template hierarchy. And so they've got a great I misspelled the spelling there, but wordpress or Google knows what I'm talking about. So if we go to this article article on wordpress dot or about template hierarchy, I can scroll down and see the visual overview. So just to match this with what we've got here right now, single project this is a custom post type, so it's probably not listed in here. But if we go back to a blood post and we can see single dot PHP, you can kind of match this with the template hierarchy. So what will happen when somebody accesses your website? It will go through the index PHP come down through singular PHP and hit single dot PHP. If it goes to a page, it will go to paged up PHP, which we saw before when we went to the home page. A page is paged up. PHP is the template for that. So you can kind of this is a little bit confusing in itself, but at least you can kind of piece together where everything lives by, you know, seeing it on your website, the template above here and also seeing it here. What's also important to note here is that while WordPress will started index PHP and look for archive dot PHP or look for singular, it will look for single. It doesn't necessarily have to be there, sir, In the case of Al Divvy feeling theme, for example, if we go into ah divvy theme Foda and we look for archived up PHP. It doesn't actually exist in divvy. But if we were to create it, WordPress would look for archive in the situation off an archive page on what is an archive page. It's basically a Z you can see here. Orthodox PHP category dot PHP It's basically an index of different posts categorized by category dates and stuff like that. So if we go into clicking our category, you'll see right now there is no archive templates, so it's just index PHP. But index PHP takes care of the whole website. So maybe we don't wanna edit index PHP directly. Maybe we just wanna, um, affect this archive page. Sir, here is an example off. Ah, the template high Rocky working for us. I'm actually going to create an archive page right here. So I'm going to go into file new filing Our code of the which in this case is Adam. And what we can do is copy the code from Index. So I'm gonna have to go into divvy, find the index, stop PHP template, and then now I'm gonna grab all the code and copy that across to here, and then I'm gonna save that as ah kiw dot PHP. Now you might be wondering, Well, why don't we duplicate something that's already there? Essentially, we might not want to edit the index p PHP file because that works with all of these templates. So it's a It's a kind of a parent file. We just want to affect the archive. So we're creating a template that WordPress will look for the changes in there and override whatever shows up in ah index dot PHP. This is the same theory of child themes and parent themes. You know, it looks WordPress will look at one place first, and if it doesn't find it, it will go to the parent. So hopefully that kind of logic flow is making sense to you if not again. As you grow throughout your coding journey, you should start to internalize these things more. Um, but yeah, if we go into this now and hit refresh, we can see that the template being used its archive PHP and not index PHP anymore. So WordPress knows where to look, and it'll reference that now what's the difference between index and archive? Well, there shouldn't be any difference because we copied and pasted the code directly. But now if we want to make customization, we can do that in the archive dot PHP. So maybe we want to make reference to the fact that this is an archive, sir. Let me just dig into the front end code and see where I'd want to place this. Um, I see this is the content area. This is the main content. Maybe I'll put it in here. I just put a heading and I'll say archives. Oh, hit. Save on that. I go back to here and hit, Refresh, and you can see archives is there, but it's off to the side because I didn't put it in a container. That's my bad. So I'm going to remove that and put it in the container press. Save on that. And now you can see on any archive page you'll have archives. Now, this is just static content. You probably want to put in some dynamic content that says he is old. The posts from this category a point, the category name and maybe some information about the categorias Well, you may want to do that, but essentially, I'm just showing you here, You know, about the template hierarchy. You can figure out the template hierarchy by doing some research on wordpress dot Or looking at that visual sort of diagram you can use show a current template to look a whatever thing you're on on your website. So again, we don't have many pages or places to go on our website. But you can see for this where got the page and how you would use this is, you know, say, for instance, you wanted to change this layout and you wanted, you know, the Facebook image or the image here to show up above the title. Well, you go up here and you see a single project up PHP. That's the template I need to modify and again going back to divvy here. You would find that, and you wouldn't edit it directly on the parent theme because remember, we're doing all the modifications on the child theme. But what you do is you just copy it, go into your child theme paste, and I'm just gonna do it really quickly for you here. Basically, if you wanted to modify anything like that, suddenly title shows up before that. Now that's not very practical, But you can see here, um, I can affect that template, and that's going to apply to every project now. So if I go to Google title Google so you can maybe more descriptive sort of static test their text, there would be previous client. And then if we go back, previous client Google and then that's gonna shop for all your projects. Previous client Amazon, sir. With the this video and the video before. Hopefully I've kind of showing you how you can go in and edit templates. So if you go into anything that shows dynamic content like a block post and you don't like how it's displayed, maybe you want to put in something that shows up on every block post. Or maybe you want to rearrange the content on a blood post. This is how you would do it. You would go in. You would see what templates being used. You would go into your theme, create that template if it doesn't exist already in your child theme on and then create your modifications there. And yeah, that's how you can modify the PHP templates in WordPress. And, um, if you need more information about template hierarchy. There's plenty of information online. Definitely have a read of the Web press dot org's sort of theme handbook, and, yeah, I'll see you on the next video. 14. Building out your website: So now, essentially, we've covered all the pots off building on WordPress. We started with the theme. We used a page builder to build a page on your website. Then we went into how to customize the styling with CSS, and we built some custom elements which have since hidden. And then we dug into the templates as well. So we've gone through all layers of wordpress, you know, starting at the very top with no code to go into, you know, deep into the code. And so right now you could, you know, theoretically take that knowledge and run with it. Build out the rest of your website, but I just do it for the sake of completeness. I'm going to run you through, you know, building out this website and you know, if you want to stick along, you can learn more about WordPress, Sir, The first thing I see as a problem is we've got these menu items and they don't actually link anywhere. So that would be my first thing that I would do if we go here to the u Earl and me type in projects or just project, we can see an index or an archive page referencing what we talked about in the last video off all our projects. And so this is just gonna be a basic archive page bringing together or that projects. I'm going to get rid of that piece of text that says archives because it's just doesn't really need to be there and, um, doesn't really add anything. So going back to the template government of archives Cool. So this is basically our portfolio page. We can use that. But at the same time, we have to dig into, you know, the template file and find, you know, go bit deeper into curd to change the layout of this, and it really isn't necessary. So what I'm gonna do is create another page using divvy Page Bilde so that we can set out up projects a little bit nicer. So I'm gonna go to New Page and I'm gonna call it projects. I'm gonna hit Tab so that it comes up with the girl. Yeah, I like that girl. If you don't like the URL, for example, you can change it to whatever you want. I'm often changing your aerials to be more seo friendly. So that's just another point there. I'm going to switch over from the standard WordPress with the wig editor to the divvy Bilde . Uhm, I'm going to put in a title here, just, you know, full width and puts him text in. And the text is going to say, heading one previous projects. All right, I'm going to call this heading. So So it's easier for me to understand. And then I can add in a module underneath it that shows my portfolio. So they've got a nicely formatted portfolio module here and divvy. The first thing I'm gonna do is go to design shoes, greed, because full Whip is just it's too big. I only have one category the moment, so I'm just gonna hide it for now. But I'm gonna keep all of that, keeping them portfolio. And let's just preview what we've got now. All right, so we got a previous project CIA. One other thing I want to do just to add some more content to this page is more text to draw the person in. So I'm just going to write something out out here. I'm going to center. Align that and I don't mind the name text gonna move that up above portfolio. Then I'm gonna preview that click on the links below to check out my previous projects and every guy. Cool. I'm happy with that. So I'm gonna kick publish And what when my other menu, like, menu links. So I got portfolio. I got services again. So I'm gonna add a new page called Services. And this is essentially how you go about building the website. You know, you might have a design sent to you, or you might just be designing it on the fly. But this is it. You know, you build pages, you do. Advanced customization is when necessary, but most of the time, you know, using ah, divvy builder, you can just build out most of what you need Just using this interface here. So again, I'm just gonna put in a heading. I don't actually need to put in a new module for, um, you know the text. I can actually just put a paragraph underneath this this actual module here and seeming We got rid of those, you know, stupid looking boxes before I'm actually gonna build some custom elements just to show you guys how you would go about it. In case you do want to do anything, anything custom. So I'm going to get a equal three column row, and I'm going to put in my iron code. So I'm going to put in a div, and I'm going to cool it with the class service box. Now, with the best thing to do here is to make it all good in the one module, and then you can just basically duplicate these models out if you're going to reuse them. So I'm just gonna build out something now. And I'm also going to go into my theme out of this so I can put in some CSS um, and you'll see how we have developed. Ah, service box. So I'm gonna just fast forward a little bit here, and then I'll come straight back and let you know what we done. All right, sir, when I've got here, it still doesn't look super beautiful. But it looks okay. I've got this box on that says WordPress Web development in it as one of my services, I can duplicate this out, but basically what I did just got that div with the class service box put a hate to heading in there actually had a background color using this before, but I decided to get rid of that so I can specify the background color in my own class here . And as you can see, I've got a service box class where I defined styles. I'm giving it a border. I'm giving it a minimum height. Texting lining in the center, the background color upset, toe white. Um And then I'm using a CSS rule to affect the heading to tag within that box, giving it imagine top and giving it some padding on left and rights. And then finally, to get that hover functionality. I can do that in CSS. By putting a s, I think it's might be called a pseudo class or something like that. It goes on the end of their with a colon and then hover. So then whenever I hover over it, whereas I got too many pages open whenever I hover over it, that background color changes. So obviously you don't want to spend more time on designing something a little bit nicer, but for our purposes, I'm just gonna go If that I'm gonna duplicate it, change one of the services to let's say you to framework development. Drag it over there, duplicate again, changed the heading saving exit, and then move that over. Let's preview what we've got there. So as you can see, the styles are applying to everything that is a service box. So as long as we've got the the class there, um, it'll apply. And, sir, we've got only the parts that we need to duplicate, duplicated and the rest of the styling and everything is done over here. So now we've got this, you know, ideally, would want to put some more information in there, may be linked to the portfolio, but for our purposes, just to do a brief video, I'm going to say I'm happy with that, and I'm gonna hit. Publish. All right, so now I have a services page. I can click view page. Blawg here should link to the blawg index. Let's just see if we have one already. No, we don't. Okay, sir, let's create a blawg page to finish this up. Gonna call this blood, and I'm gonna use the divvy builder once again, and I'm gonna put in a title on my blood post going to give it a admin label of heading. And then we can easily add in a module here for the blawg. I prefer grid, as I said before them for whipped, but whatever floats your boat, um, going back to content. I'm just breezing through here, guys. Um, yeah, I'm happy with all of that saving exit. I'm gonna click preview all my blood posted and see how quickly that was using dynamic content. Um, and using the page builder. You know, if we wanted to put in some text in between there as well, we can do that just like we've done before. Um, but for the sake of time, I'm just gonna hit publish. And now we have all our sort of pages that we need to put into these menus. So now we can go back into appearance menus, and these were all custom links, and what we could do is change this to projects, but also it gives us the pages here to insert as well. And that's probably a little bit safer to do, because if we change the u R L, then it'll update. Sir, I'm going to removal of these, and I'm going to put in projects, services Blawg. You can take the more and throw them in. I want projects first. I want services second, and I don't want it to be caught projects so I can change the navigation label and call it Port Folio. Then we've got blood page here. I can add in my category there for WordPress here. So that's dynamic as well. Congrats that put it down there. And then, of course, I wanted as a sub menu link. So I'm gonna move it over and it's gonna say, Sub item, my press save menu. You'll see the menu will update and you can see cause I'm on the blood page. Bloggers highlighted. If I click on that, that will be highlighted. I go to services. There's my services page. If I go to portfolio, they're all my projects. I can dig into them. So now we've got a granted a very basic website. But we've covered all the major principles to building it out. And so if you want to spend longer on this, if you've been following along and you want Teoh, you know, actually build this into something that you actually want to publish. Go right ahead. But in my situation, that's basically it for the page building and the advanced customization. What I'm gonna do in the next video is install some plug ins that I think are really important, and, ah, also assure you plug ins in action and how they actually update your WordPress site. And then in the next video after that will go into a specific plug in which enables e commerce on your website. So if you're interested in those things, definitely stick around and I will see you in the next video. 15. Installing Plugins: So right now we have the basis of a pretty good website. We have pages, we've got a menu. We've got projects in here. We've got blogged posts, so we've got a basic website set up. But what I want to do is enable extra functionality that maybe doesn't come out of the box with WordPress. And maybe divvy doesn't help you with it, Eva. So sometimes when you need extra functionality or you want to add something a little bit extra to your site, you may want to look into installing some plug ins. Now just a warning with plug ins before we dive in and install some, you can go overboard with plug ins. Definitely. And there's lots of plug ins for people that don't want to touch code it all that all they do is insert like a line or two of code. And, ah, you know, it's best to keep your website clean. If there's a situation in which all it requires is for you to just go into, maybe maybe it's just your editor and put in a line of code. It's much cleaner, just to to go in and edit your code. Then it is to install the plug in. On the other hand, there situations where the plug in does a lot, and it's not a simple change, in which case it's a good idea to get a plug in. But my warning for anyone doing development is, you know, keep your website as lean as possible. Don't install plug ins for absolutely everything. There should be a clear purpose behind a plug in that you install so of that wanting out of the way. Let's go into plug ins menu item here and click Add new. Now a very popular plug in may even be on the front page. No, it isn't. Um, maybe in popular, very popular plug in that you can search for over here. I'm just going to check whether it's in popular. Yep. Is Yost s CEO and you'll see this plug in working for you in just a second. But basically it allows you to update your metadata for S CEO on your block posts and pages . Very powerful stuff. You don't just want to take whatever WORDPRESS generates and use that often times. So we're gonna use Yost After that installs, clicked, act, click, activate and Now you will see here that Yost is installed and activated to use Yost. You can just go into any post or page. I'm gonna go over the here when we have our post already, and I'm gonna click edit post. Once I'm inside, I can scroll down and I can check out a new section. And this is my preview in Google. So you can see that's how the title's gonna show up on Google. That's the girl that's going to show up. And this is the text. Now, if you, um you know, I just got a image. You've got a title and you've got some passage right there that goes straight into an introduction. This might be OK. And, you know, right now, I don't really see anything necessarily wrong with it that maybe you have some code at the top of your page and Google's interpreting that, you know, just putting random code and here Or, you know, you just you always want to check these things, especially if S CEO is important to you also. Maybe sometimes you want the title to be a little bit different on your Web page rather than on Google maybe you. You know, you can write a better headline to entice somebody looking on Google. Then you can in here, and you just want to make this may be more relevant. I don't know. It's just good thing to check what your preview is on Google and edit it if you need to. And that's what you can use. Yost S E 04 So or you do here is at its snippet right now. It's just pulling from the current article. But I can change this to how to install and still Oh, this is funny. Editing the blood post on how to install plug ins on WordPress while we're doing a video on plug ins in WordPress so you can edit it, right? You know, in this situation, I don't really need to edit it, but you may want to You can also edit slug. Um, I like the slug, but you can see here as I'm updating it there. I'm updating it there. But maybe you want a better description in the first introduction of your content. So maybe you want to say this is the best article ever on how to install plug ins. Obviously, That is a terrible description, but you get the point. You can go in and edit how it looks on Google. You can also go in and edit how it shows up on Facebook and Twitter. So the same thing applies here. Maybe it's pulling in code or text that you don't really want in the preview, so you can update that here, and you can also insert a focus keyword. So if you're trying to rank for a certain keyword, you can put that in there and let Yost evaluate. You know whether you're doing a good job on that. So I'm just gonna update it there with my new description. And that is essentially Geist another plug and I use, which is really important, and this is not really going to apply on our local set up because it's not really on the Internet. But there's one. So I have to go to add new up here. There's one called really simple SSL, and for those of you who don't know SSL is a security certificate, um, if I go over here, you can see it says secure. And there's that s after the hay http, so this is a number kind of s e o thing. There's other reasons why you'd want to have SSL. But one of the main reasons is for S e O and with my host in particular, I just need to install this plug in and then click Activate. And as long as there's a SSL security certificate attached to your account on the host, you will get SSL, sir. Here, really simple SSL. I can click install now and as you can see, once it finishes installing, you can just click, activate like we've done all along. And now all you need to do is go to settings SSL and you can enable it if it detects that there's SSL were just on my local computer. So there's no SSL and essentially, this course is not on how to do SSL or Yost. We're just talking about plug ins in general here, and that is essentially how you can add plug ins to your website to add an extra functionality, allow you to do special things on your website. And one of those things actually is to enable e commerce. And so in the next video, we're going to go directly into that using a plug in called Wu commerce. And so we are going to say, for instance, we wanted to sell something on here. Maybe we even want to. So, um, how? Service prepaid. We can ah, put in some economists into our WordPress site by using this plug in. So I will see you in the next video. 16. Adding eCommerce with Woocommerce: So in the last video, we talked about plug ins and we installed to plug ins that I use very regularly on all my websites. Um, but if you are trying to do e commerce on a wordpress site, there is one plug in that is very, very popular. And it's called Blue Commerce. So in case you wanted to do e commerce, I'm just going to run through installing would comments now. And it will be a good learning experience for us to see what Woo commerce does to our WordPress site and how it can get us e commerce functionality really quickly with not a lot of work just leveraging this plug in. So I'm searching Woo Comus and like we've done before, I'm just gonna install now and activate. So as soon as you click, activate with Woodcomb s, you will get taken to this following wizard, which will help you configure your store and get you started quickly so you can put in where your story is based. And your currency, um, just gonna do United States dumber, you can tell would comments whether you want to sell physical or digital products is gonna select digital products. Um, we can keep that. So I'm gonna have to put in a dummy address here. Hopefully, it will accept that. Then I'll be taken to the payment section where it tells me what blue commerce can accept it can accept. Stripe and paper are the biggest ones. I'm cool with people paying me however they want, but I don't have a stripe account, so I'm just gonna disable that and just accept PayPal. If you understand e commerce and you need to put some taxes in, you can enable that here you can also connect a jetpack. But I believe you will need a wordpress dot com account for that. So I'm just gonna skip that for now. And here you go. You can ask for tips. Product updates, inspiration to your mailbox. Otherwise, you are pretty much ready to go, and I'm going to return to the dashboard. You can click here to start creating a product or import products from another store, but I want to go back to the dashboard and just talk about what Luke Thomas has done. So now when your dashboard, you should see something new in your menu, and that is the Wu Kam s tab and the products tab. Now what products is is just another post type. So you'll see we have posts and pages. Those of the standard post types in WordPress projects has been added by divvy. And now products has been added by Wu commerce. So now we can go into here and we can create products, will create a first product. And you can see the interface is quite similar to creating a poster, a page, and that's because it's using the same functionality. We're just doing a never custom post type. So I'm going to say, one month off Web development and I'll say this is for one month full time off my services . I'm just making up stuff here. Guys don't take this too seriously, But if we scroll down to here, we can see product dina and product short description. So this is where it's a bit different to, you know, our other post types here, and we can do a a simple product that's a virtual and we can make it usually with 10 grand . But today it's on a special price of only five grand. Um, invent, sory. You can manage your your stock and inventory here. If it's not a virtual product, Um, even if it is a virtual product, you can, you know, limit the amount that people purchase. You can link products with up cells and cross cells. Honestly, I don't have any woo commerce stores that I manage. I actually do use we comments to sell on my website. So I use this basic functionality and it works for me. But essentially, if you just hit, publish on that and then you head to the prime product, you can really just buy it straight away. You can click Advocaat. Suddenly you have a cot. Now, um, and you can click view. And this is what's brilliant about were comments. Look at all this stuff. It is is provided for us, Um, right away, just by installing a plug in and putting in one product. So that's why I think ah woo com s is really good, and it's also very populous. Other people like it as well. You can proceed to check out. Now you put in your billing information and you can put in your PayPal stuff. Now, of course, you have to configure payment So whoops. I have gone out of the dashboard. So you you will want to go into Wu commerce here, where you can access your orders, your settings, coupons If you want to offer coupons to people. I haven't set up my PayPal in a while, but maybe it's in accounts or check out here and you can click on PayPal. Here. You can set your PayPal email and yeah, this is probably what you would configure your paper. Um, so you got all your settings here. Move Comus. When somebody does buy your product, it'll show up here in your orders so you can see who bought what and how much it was and all that good stuff. It's It's really amazing that you can just add a plug in and get all of this right out of the box. And so, essentially, that's really setting up like a product, and setting up payments in order for you to get paid is essentially all you need to do to have a store. Obviously, if you're selling digital products, you have to go down to here. I'm going to select downloadable, and then you can add in a file so that when somebody pays, they could go to a page that has the file that they can download. That's how I sew products on my website. And obviously, if it's a physical product, you'll have to fulfill it. But essentially, by installing this plug in by putting in products and by putting in payment information s O that you could get paid, you essentially have a store right in your WordPress site. Sir, you can access these products by, um, you know, here's the URL here, and you can access an individual product. But what we commerce does is put in a link here for a cut. You can also navigate directly to shop by going to your route domains last shop, and then it's gonna show up everything here, and you can customize your shop. Of course, this is an old version, so you can go back to here and you can customize your shop and create categories categories . Here you can create tags just like you can do with other post types in WordPress. And essentially, if you wanted to add this menu item to your WordPress menu, you could go in here going to appearance menus. Um, and add in shop right away. So you can go in there shop, save menu, refresh the page. And isn't this beautiful? Wordpress is working for us very nicely and we've got all this dynamic content and functionality straightaway for us. Also. You can see up here that we've added some templates now with Wu Calmest. So we've got an archive dash product And then if I dig into here, we've got a single dash product. So this tells you if you did have to edit the template files, you could totally do that just by finding these templates. So let's just do that now, just toe. Just to put this into perspective, we can dig into our plug ins photo here, go to Wu Kam s look into templates and boom! We got all these templates here which we can go in and edit just like we did when we were in our child theme and we changed Thesiger Google and we change the ah archive dot PHP We can go in and change the templates here. So again, using WordPress, everything is open source. We can use the sort of you I here to do whatever we want in the WordPress dashboard. But then we have full editing customization by digging into the card, and that is a little bit about woo commas and how you can add e commerce to your website. So I think that just about covers, you know, all the basics of developing ah WordPress website. We've got again pages, projects, posts and now products. I think it's now time to put our website on the Internet in what we call deploying. If you were building this on a staging server, um, we can migrate this across and all of those topics we're going to cover in the next 12 or three videos, however long it takes us. If you have your website locally hosted or on a staging server and you want to migrate across, definitely stick around to learn how to do that in the next video, or even if you do happy with your website and you just been building it directly on your hosting, definitely stick around anyway because if you are wanting to create a new version of your website, you will need to learn how to migrate. So I hope that you learn something from this lesson and I will speak to you in the next video 17. Deploying your site: in this video, We're going to talk about deploying your website to the internet. Now, if you chose the path where you didn't actually build it locally on your computer or on a staging server and you built it directly on the space that you want to publish it on, well, there's no step required here for you. You've already built your website on the place that you wanted to appear. So that's it. Now you can just share it with your friends or shared with whoever start driving some traffic to that website. So this is like the fresh wordpress install we had before on a little demo domain. But if you want to move over a website you developed locally or on another location on the Internet and you are want to move it over to this destination, that's what this video is going to run you through. So first of all, we're gonna talk about migrating site locally, and the same principles apply here to ah migrating a site from a staging server. So, um, just quickly what I showed you before with the sky blue website is an example off a staging survey, basically what I did was create a sub domain at my own domain. Krista developer dot com and I built the website there. And then once I was ready on once the client was happy with it, I moved it over to their domain. So that, essentially, is what a staging server is. It's ah, it's a place you build online, and then you can move it to, uh, you know, the final destination. So similar principles apply. If you're doing this locally to the to the Internet or you're migrating from one place to the other will just go through what we have here, which is our local install. Now, remember, back here we have already installed a version of WordPress, and what I'm gonna do is just go into the file manager and just delete that I'm gonna fast forward ahead here as I go into my C panel and actually delete those files. So going into the file manager of my C panel account for this domain, I'm just going to go into public html where the website is stored, and I'm just going to remove all of this now before you do that. The reason why I'm doing that on this particular website is because there's basically nothing on. It's a fresh wordpress install. If you had an actual website on there, obviously don't go and delete your files. But because I have a fresh in store, I'm just gonna start from scratch. So I'm going to click, delete and delete all those files. Now that won't delete the WordPress database. So you might want to go in and delete the WordPress databases. Well, I think I might go in there and and delete it. You can usually do this in PHP Miami and when you're storing it locally, but for C panel, you want to go into here and we can just get rid of this database completely, you can delete the database and it's now going, so if we go back to the website, it should show up with nothing. Basically, it just shows up with the directory and there's no website there. Now, what we can do is remember, we have our website right here. This is the files of that website, and then we also have how Diana based stored on our server locally. So if we go here and see our WordPress database, which we called skill share on the school WordPress. So the steps from migration and we talked about this a little bit in understanding Web development, which was the first skill share class, is moving over the files, moving over the database and then making sure those two are connected. Okay, So what I'm gonna do is I'm just gonna move the files in our skill share WordPress site over to our hosting, so that will be identical. There's a few ways we can do this, but I think the cleanest way would probably be to zip this up, uploaded and then un compress it. So basically, all I did was I right? Clicked on that photo and click compress. That's how you do it on, Mac. But I'm sure it's different on windows. Yeah, you should be familiar with zipping files. Now, I have this WordPress site. I'm going to upload that as a single file to my to my hosting and see it's gonna be uploaded is gonna take a little bit of time. I'm gonna wait for a little bit and catch up with you when it's finished. Uploading. All right. So I came back in a few minutes and that is now uploaded. So we can click here to go back to our photo, and I can click on it and then click extract. Can I extract it now? We just wait for it to extract It is finished because I zipped it on a Mac OS X. I'm gonna have this, but this is the photo we're looking for. So we just need to grab a with this and move it to our public HTML photo. So get rid of that pot, click moves go back and we can get rid of that. One's now empty so we can get rid of it and we can get rid of this. And we can also get rid of the zip Falk of the soul on zipped, Um, just to show what that looks like now in a browser, we can refresh that and is going to come up with an era saying era establishing a database connection, which, of course, is no surprise. We don't actually have a database on our website, so the next step is to migrate over that database. So what I'm gonna do is click export here, choose quick, go. And I've got some SQL code to put into my data base. But unfortunately, I don't have a database here cause we just deleted it. And also, I don't have the ability to name it exactly like this one, because it's forcing a prefix on the database name. So it has to be called skill share course underscore, and then something. So we're gonna have to modify the database on the hosting a little bit. What I'm gonna do is name this WordPress. So it's gonna be skill share course under school board press instead of skill share on the school. Bad press. Just because of this prefix gonna create the database, I'm gonna go back and, as you can see here, somebody, not somebody. WordPress already created a user name for me. I'm just gonna delete this user and create a new one. So are going to hear and delete that user. So now we just have a database with no users. So now I'm gonna add a user, and I'm gonna just call it skill share course, underscore admin, and I'm going to generate a ah user name. Sorry. A password for that. I'm going to go into my one passport has always grab that. Make sure you definitely record it. So this is gonna be my my SQL Use the name slash password and passwords there. The user name is gonna be skill share course underscore admin. So I got that all recorded now, and I can copy and paste that and again, they're going now it's done, and you've created successfully created a user. Now, the final step is to to give access privileges to this user toe access. The database that we just created and the only two options available are those that we have . So we can just press ad we're gonna enable all privileges and press make changes. So if you remember when we started installing our WordPress site to begin with when we were doing it locally, we had that famous five minute install with WordPress and WordPress. Basically said, Put in your details and we'll put that into the WP config file. We don't have this available now, So what we're gonna have to do is put these details directly into our WP config file. So now that we have, this information will set up, what we're going to do is go into our WP config file so we can just edit it from within our file manager. You could also edit it via FTP using your code editor if you wanted to. The first thing we're gonna do is change the database name to skill share course on the school WordPress. And basically we just copying across the details here. So this is the database name skill share course on the school. WordPress thistles are user so we can take that user name and we can put it there. The password. Remember, we saved in our text at it, so I'm gonna copy, not put that in, and I believe we can leave these the same. So I'm going to save changes. And the final thing is having the data in the tables in this database. Because if we go to our PHP my I am in now, there will be a database here with nothing in it. So what we're gonna have to do here is grab this and make sure it imports into our new database. So, actually, I'm just going to right click here and click Select. Or then I'm gonna press command seat a copy and we don't need this open anymore. Um, we need to go back to PHP. My Amon. Make sure you understand which ones PHP my I am in locally. And which ones? PHP Maya. Men on your hosting, you can make sure you can see that from the U. R l So I don't want to confuse you. The's a two different PHP. Miamians. Okay, so what we can do here is we can go to SQL seeming. We've got an SQL query and this is going to run on the database skill share course on the school Web press. I'm gonna paste it in, and I'm gonna change a detail at the top says database skill share on the school. WordPress, This is just a comment, but I like to change it anyway. And if I press go and all things are good, it should import all the data from AL local wordpress database into our wordpress database that we just set up on our hosting. So it might take a while just cause there's a lot of rose there to insert, but hopefully it finishes loading, and we can now see a big tick. I'm gonna press structure and you can see that we have all the tables there and if we go into, let's say posts, we can see some posts and we can see some divvy short codes. You don't need to fully understand this, but you can at least see that our database tables and now in there. So if we go back to here and everything's all good, we should refresh the page and the website should work as expected. So it's showing up pretty OK, except there's something quite obvious that's not working and that is anywhere. Where we had these icons, they're showing up with weird characters or just boxes. And ah, honestly, I'm surprised that most of the website came through OK, because we have missed one important step that comes right at the end and that is updating our site URL. And basically I'll show you that right now. If we go into our database on our hosting and we go into options, we can see here that are site, you are all in our home is still local host Colon quadruple eight. But this is not relevant anymore because we're now on this domain. So what I'm gonna do is I'm going to copy the domain, and I'm gonna update the database. So I'm gonna go into here press edit and change that to http w w dot skill share course that space. Oh, copy that. And then I will go over here. I think I can just double click on it. There we go. Press enter, and that will change it. I think there's one more field in this database that gonna change. Moving forward, we can find another place where we've got our local ah, sort of euro in Esso. Just replace upto WordPress site. With our actual euro, we can go through even more rose that is already updated to you can see public HTML deaths that that's already what it needs to be just going through some more rose. I've gone through all the Rose Ondo updated or those u r l. So now when I go back to refresh the page, let's see what happens. Okay? It's taking a little bit longer toe Leard. Probably cause it's loading up that new details and suddenly we have the icons showing up nicely. I'm actually a little bit surprised that it didn't break the image links as well, but yeah, changing that site URL is very, very important. So I remember going to WP options after you migrate your data base and changes site. You are l and home page. Let's just check if the rest of the websites working. Fine. Yep. Services just like we built on our own hosting or are owned locally. All right, so that pretty much covers the deploying process. Just to recap here. What we did was we took the files that we have locally in our project directory. We put them on our hosting on a blank install. We then exported out database. We created a new database. We imported the tables from this old database into our database on the Internet. And then we updated these outdated site you, RL's and home pages because they were referencing local host. So that's basically the process we went through. It's slightly different if you have a website already on there. Remember, we were starting from scratch here, so this video is going a bit long, so I'm gonna leave it there for deploying a website. But in the next video, I'm gonna show you how to migrate changes that you've been working on evil locally or on a staging server on to your final destination. So if you're interested in that state room for the next video, if not, you can skip ahead to the video. After that, definitely stay till the end. We will talk about class projects in and talk about how to, ah, find help when you're struggling. So don't end your journey with this course there again. If you want to see how to my greatest site to a place where you have an existing site, stay tuned and I will catch you in the next video. 18. Migrate changes to a live site: So in the last video, we took out locally hosted website Ah, the one right here on a local host Colon quadruple eight. And we took all the files and the database and we put it on our blank hosting. But of course, what if we already have a website on here and we want to create a new build and then migrate that across? So that's what this video is gonna be all about currently, that's exactly what we have. We have an existing website on there and let's just imagine for a second that this is a website that's been up for a while. There's already traffic on this website. You are already been sending people to it and you want to make sure that you don't, like basically delete this website to upload your new one. So what you what you're gonna do here is migrate the side across. Now there are services that manage this for you. For instance, if you use managed wordpress, they would have systems for this One of the hosts that does This is a flywheel eso. Flywheel is a managed hosting provider, so you can kind of set up staging servers and I'm sure that this is a little bit more elegant than the solution were doing. But with my sort of set up, I don't have that option. I just use a basic hosting and it's a good, you know, to know how to do it anyway. And basically, it's It's a similar process to the one we had before. We just need to be a little bit more careful. So what I'm gonna do is I'm going to go in here. I'm gonna go to file Manager, which already have open and thats is gonna refresh. And first of all, I'm gonna back up my side. That is the most important thing. I'm going to go into public html. Actually, I'll go back one and I was ip public. Html Don't worry. It wont affect this phone. It'll just create a zip archive off it. So I'm going to create a zip off my public HTML, which is where my website is served up on. Keep in mind, this might be slightly different for you in your host. Using this file manager public HTML is where my website is served up. So now I have my old version of my website, and I'm gonna download that as a zip. So I'm going to go into here and to folder back up of old site. Actually, I want to do it in that folder because that's the one I'm gonna be uploading. Um, I'll do it out here, back up off all site you can put put it basically wherever you want. And if you wanted to back up the database, I propose that you leave the database there, but maybe you wanna back it up and then delete it. Um, you can export go to custom and choose save output to a file. You can have a look at this. You can add to create database field if you want. Basically, you can leave it all standard. That's no problem. And what is going to give you is an SQL file, which is a dump off what's called a dump of your of your WordPress. Sorry of your database data. So I'm gonna go back and decode backup of old site and I'm going to save sir right here. If I go one step up backup of old site. I've got a zip file off all my files for my website and I've got the database. Sorry. The database dump right here. What I propose you do is you keep your old website, which means you keep the files and you keep the database on the hosting. If you already have it on, therefore, you have it in two places and just move it. Basically. So in our case, the database is exactly the same. But if you had a different database name, what you do is you go into you see panel, you would create a new database that matches up with the database you have locally or on your staging server. You would put in name put in the user name and all the details that you have for your existing one. If you have to change this, you have to change this. And basically the process is pretty much exactly the same. Except when you get to the stage where you're putting in files into a public HTML, you don't want to necessarily delete these, but put these in another fota and also not delete this database, Eva. But just have it sitting there next to another one. So just a disclaimer before we move on this course is about building WordPress sites the right way. Technically, what we're about to do is not the right way. It's not the perfect way to do things, but in order to do things that perfect way, it would require a lot more set up a lot more server configuration. Ah, a lot more than what we can do. We just see panel. You know, the word press agencies have worked for in the past they've had service set up. And we've been going into command line like this, opening up a command line till you know, going in and connecting to service by SS Hey, h, and doing it that way. That is technically the right way to do it. It is the clean a way of doing it. But with C panel, the solution isn't as elegant. And I just wanted to reference that first, this is probably the most down and dirty part of the course. But if you need to do it and you're only using C panel, this is how I would go about it. So that's a little bit of this disclaimer. Now let's actually get onto migrating, which is gonna be a look the same as deploying as we did in the last video. And so what it's gonna involve is us up loading our new build in terms of the files and in terms of the database. And then we're going to quickly swap over with, hopefully as minimal downtime as possible. And we should be all sweet so again, following the same process we had before. Al database hasn't changed, but let's say it has. We can take all this code command seat a copy. And what we'll do is we'll create a new database here. And because this is the second install, I'm gonna call it WordPress underscored to or technically skill share course on the school WordPress on the score to gonna click, Create Donna Base. And I think I'll be able to use the same user name. So what I'm gonna do here is add that use it to a new database in a click, add I'm going to grant all privileges, make changes. Looks like those changes have been made, so I'll go back. And if I scroll up to current databases, we've got the two databases there, and the privileged user is the same for both. So I'm going to go into here and I'm gonna refresh to see our new database so I can reload the page here or there. And we've got skill share WordPress to for a fresh in still and just like before we can run the SQL story. Sorry, query, SQL Query Teoh to import or the data. So I'm going to do a skill share course to there. That's just a comment. It doesn't really matter. I just like to put that in there. I'm gonna press go, and it's going to import all that data into our second website again. This might take a while, depending on your Internet speed and the speed of all the tools. Eso it's just gonna load for a bit and then hopefully we'll get a green tick. All right, there's that green tick. We click on structure. We've got old old the ah, tables there, and it should have all about data. Theoretically, it should be different to this database, but it's the same in our case because we didn't make any changes. Okay, so the next step we can do is upload the files. And so what I'm gonna do is same thing as before. Um, upload the skill share WordPress site, and I'm going to do it outside of public hate TML because I don't want to affect that photo just yet, So I'm going to click to upload a file. I'm going to find that zip file, and I'm gonna pause the video and rejoin you once this is uploaded. All right? We've hit 100% and that means the files and now uploaded. And how comes the dirty pot? Basically, we're going to do a little bit of a dance to move the files and data base over and hopefully results in as minimal downtime to our website as possible. So I'm just going to refresh the page and make sure that we have ah, working website here. Um, and what I'm gonna do here is move the old files out of public html, and then I'm going to unzip the new files into public HTML and, ah, it will work straightaway, Hopefully for us because the database details of the same. But then we're going to switch over to the new database and ah, that will complete the migration so seeming. We've got public html already zipped over here. If you made any changes since you zip that you're gonna wanna zip it again, um, or just copy the files directly over, um, seeming. We got that zip there, and we've downloaded the zip to our computer as well. I'm gonna actually just delete all these files and I'm gonna go back and then do this very quickly because your site is currently empty at the moment. Said they'll be downtime for anyone watching it quickly unzipped this. Whoops. Double clicking does not unzip. Click extract extract into public html. Hopefully, this doesn't take too long. All right, you have extracted, but of course you need to move it out. We're going to move that into public html, move the files, go back, get rid of this, get rid of that by clicking on it and then whoops. I just clicked you trash going in here and pressing. Delete. Confirm. Now let's refresh the page and see what happens. We've got an era now era establishing a database connection, which, of course, is the exact same era we had before. The reason why we have this era is because the details in the WP config file I configured for our local database, not our new database. That's on the cloud. So what we can do as we can go into new instal, go down to WP config edit and we can insert those new details. Remember, these are the old details. The ones that are showing up here. These are the old details for the ones you have locally. So I'm gonna put skill share course and then underscore to for the new database. Remember, we used the same, uh, user name and password for both databases, so we can just copying CREss copy across these ones. I'm gonna save that. I config file is now updated. I'm going to go back to hear refresh the page and hopefully everything will be sweet. All right? Same issue again. We've got the icons that aren't showing up properly. Let's go in and make sure our u r l is is correct. Um and it's not going to be obviously because it's the same database we had originally. And you can see here. Everything else is the same. Um, the same process. I'm going to go here to the put that in and tow going to hear I guess it's good to get a refresher. Right? All right, Now, if we go back to the page, refresh it. And now we have a bit of a broken website. I must have been something we just did. Ah, there we go. If I go back into here, I can see I've done http twice. So, uh, you're probably screaming in your head watching me make that mistake, but ah, easy to spot. At least after you've made that mistake. So I've changed those rows and then refreshing this page. We have gone our website back and the icons of back. So hopefully there wasn't too much repetition. Repetition in there. The main things to remember when you're migrating a site rather than just putting it on a blank. You know, hosting account is that you want to move your old site. First of all, you want to back it up, and then you want to move your old site to somewhere else. I like to keep my database there unless I really need to delete it. Most important thing, of course, is always backing up. As I said, this is a bit of a dirty solution. Um, So you want to make sure you're always backing up in case anything goes wrong. And as you saw, there was minimal downtime. But there was some downtime as we reporting it across and fixing any errors. Um, but essentially, that is how you would upload from a local build into an existing destination with a site on it. Already, the one thing we didn't cover, which is again pretty much exactly the same, is moving from a staging server to the new server. And what I recommend for that is downloaded downloading the data base and the files from whatever that staging service is locally on and then uploading them to the new location. Eso You always keep it on the staging server until you are confident that it's on the new domain, and then you can remove it from the staging server again. If this is complicated, or if you have any questions, definitely hit me up in the discussion. I just want to mention again, If you were working for an agency, they probably have a more elegant solution than this. But if you're doing client work and you just need to, um, switch out a website quickly on the client's website a song as you back up. Um, and make sure not to delete any files. You should be pretty sweet. So in the next lesson, we're gonna talk about how to continue your learning with WordPress. Because in the short course, we weren't able to cover absolutely everything. And even in a course that was 15 to 30 hours long, we probably wouldn't be able to cover even half of what WordPress is capable of. And that customization is that you can do toe wordpress. It really is. The possibilities really are infinite with WordPress because it is completely open source. And there is such a huge developer community, lots of plug ins, lots of tools that plug into WordPress. Sir, we're gonna talk about how to move forward when you're stuck and how to learn more about WordPress using this course as a basis and then leapfrogging that into learning all you need to know about WordPress. So I look forward to seeing you in the next video 19. How to continue your learning: All right. So in this video, I wanted to share with you how to continue your learning in WordPress. And if you remember from my previous class understanding Web development, you might remember me talking about Web developers as expert Googlers. Basically expert problem solvers. You know, often times there's a problem that you won't know how to solve. And it's a good skill as a developer to actually, you don't have to actually know how to solve the problem straight away, but be able to research a solution. So in this instance, I'm gonna do a few examples. Obviously, Google is a great resource, but I just want to show you because oftentimes the solutions that you get back from Google a dependent on the quality off your question that you put into Google. So just as an example, common issue I have with Devi is when I put in the logo, it comes out a little bit small, so I'm gonna right click, inspect element and see what we can do here. And I see here that there is a fixed max height so it can't be bigger than 54% off the height of its parent Div. So what I'm gonna do here is increased that to 1000. Sorry, no 1000 100. And you'll see now that the Maxwell is 100 the image size by default is 800 by 800. So it's allowing to go to the full whip off this Hedda. And ideally, we want some padding in here. We don't want it to be, um, to be taking up the full whip. So what we can try and do here is put in, ah, custom height, gonna start at 100 then scaled down until we can start to see a change. And maybe we want it about that size 70 pixels. But savers is we want it the height of that image to be a little bit bigger. And in order for that to happen, we can maybe get rid of this Max height here, all together and suddenly maybe we want it to be like that size. But obviously we don't want it toe overlap and come over the head up. So we need to increase the size of the divvy, Hedda. So if you don't know how to do this, a great place to co is straight to Google. And so what I'm gonna do here is type in a query, Um, how to increase head of size and divvy. Now it's important to note how I constructed that query. So because this header element has been customized by divvy and amusing divvy theme, which is related to styles I made sure to put in divvy in the end, um, I could have put in WordPress, but the theme sits as another layer on top of WordPress. So I went with in divvy, and that's just something you have to figure out over time what the most relevant keyword is to put in there. But again, the quality of the search term will impact the quality of the help you'll get. And then I put in a good descriptor how to increase head of size. Sometimes it's a lot harder to describe. Like what you're trying to do in this instance is quite simple. But sometimes you might have to try different variations of describing your issue, and ah, that's actually the most frustrating part. Sometimes of being in developers is describing something that is, is a little bit hard to describe. Luckily for us, increasing the head of size is pretty easy. So just he's deconstructing the search term, how to increase head of size. So I'm asking how to increase head of size and then I'm putting the platform or ah thing. I'm looking to search in here as well, and you'll see how that changes when we do some other search terms. So the first article is the most relevant and we can go down and we can see Oh, here we go. We can add some CSS to divvy like so. So I'm going to just copy that and I'm going to log into my skill share site and I'm going to go to appearance editor and find my style. Don't CSS style sheet. I had to could be in place the passwords. I'm going to copy that again. Scroll down. Put that in an update file. Now we might have to change the heights a little bit because these are just default, so it hasn't actually changed the height to what we want it to be. But if we go back and inspect element, we should be able to change that style. I'm just to explain it a little bit we're using a media Tagi, which we discuss briefly in the lost skill share class. A media tag allows you to affect styles that only certain screen whips. So here we are only applying these styles. If the window whip off the page, his minimum 981 pixel. So in this situation it is bigger than 981 pixels. As you can see here, if you look up there, I can't point to it in click drag at the same time. But if you look in the top right corner of the window there, you can see it will tell me what the pixel, which is all right. So going in, we're gonna find the head up. So if we look here main header is what it's affecting. So I'm gonna click on this. I'm going to scroll down, and I applied styles to find the style that we just put in, and as often happens, it's not there. So what I'm gonna do is I'm gonna refresh the case to make sure that we're pulling in the most latest version off the style dot CSS file going back to the main header. I'm going to scroll down and I can see here Al Media query. So it's minimum height 1 50 It does not apply on when we go into mobile view, which happens at around 9 80 But after 9 80 you can see the Hedda is now 1 50 pixels. So it's just a matter of going in here. Maybe we're happy of 1 50 pixels. The 2nd 1 is when the head of becomes fixed when you start scrolling. If you see it's a one size and then you start scrolling, it's another size, Um, so we can affect both of those. But when I wanted to demonstrate was, Now that we have a large a Hedda, we can make this a little bit bigger and maybe we don't want it 100%. Maybe we want it just a bit. Biggest 75%. Well, let's make it 80 90 and we can put some margin on top. By the way, we need to move these styles to the style sheet. This is just playing around, but maybe the margin top will be 15. So then I will go back into here and I will affect the logo put in logo. Imagine top 10 p. X and the What was the other thing? We changed the max height 90 90%. So press update file. And also, I'm going to reduce the head of size because it's just a bit too tall. So I'm gonna go in here and reduced that to about there. You can see with this line here where the header is. So I think I'm gonna go with 100. We'll go back here and I'll do 100 instead of 1 50 And here I'll do 100 as well. Date the file and then we'll refresh here. We need to clear cation, reload again. And as you can see, we've got a bigger lager because of the styles we've applied here, which overriding these styles. And we've got a big head up, we can probably bring in the head or a little bit more as well. So maybe to about 85 just just update that now click update file refresh. You might have to hide refresh again. Actually, the header is roughly the same. So he didn't actually change much of the header. But the point I'm making is still there. You know we came up with an idea of what we wanted to do. We went to Google. We typed in a good term right here, and then we were able to change the height of the divvy header. Now, like I said, with that career E, there's really two parts to it. It's coming up with a good directive of what you need to know and also putting in the context as well. So I was smart in choosing the context of divvy because this is a styling element that, of course, divvy would control. But safer is is it's related to e commerce. And if I go into my shop here, you know everything still on WordPress. But the plug in that's managing or the e commerce for me is, of course, woo commerce. And so if I wanted to say maybe I want to add some up cells here, what I would do is say how to add an up sell to a woo Commerce product. So again, I've got woo commerce as the context and I've got the directive. If I just said had added wraps up, sell toe a product, it's not specifying whether I'm on WordPress With what? Plugging amusing. I could be using any sort of e commerce platform. So you always need to put in the context of off the question you're asking and sorry just to go one step back. The next step would be to evaluate what the results that come up this one. This 1st 1 is by Wu Commerce themselves. So obviously, if you're running a plug in or any type of software, the best place to look for information is their documentation. I would admit that documentation for software is often written in, ah, really technical way. That might be hard to understand. So definitely head to the documentation first. And if you still don't understand, then you can move into like blogger posts that might explain it in a more ah, and easy to understand way or more beginner friendly way. Um, and as we can see here, here's an article of how we would do it. All right, The final one I want to show you is a really simple thing, but it goes to show the importance of context. So, um, as I said with you know, changing something to do a styling styling is largely to do, if your theme So in a previous premium theme like Divvy. If I wanted to change anything about the styling of this theme, I would use the context as divvy. But let's just say I wanted to change fun size, and I said WordPress as the context and not divvy. So I'm gonna have to change front sides in WordPress and you can see here you'll get a very common link that you'll see in ah, your WordPress research. If you're asking the beginning type questions is WP beginner dot com, and you know these this these articles on this website a good for beginners, but often they have a very simplified approach, and they also ask you to install plug ins as well. I don't know whether they make money from that, but they're always saying, Oh, if you don't know how to do things, just use the plug in and you know they kind of encourage you to download a plug in for every single little thing that you you want to do. So maybe you wanted to change the overall font size you may be tempted to install like, ah, whole plug in to do this and as I mentioned before, like you gotta be careful with installing too many plug ins, especially when you conduce things easier without a plug in. So always evaluate. Do you really need a plug in? But again, it's it's related to the context in which we ask the question. They don't know where using divvy eso. If we typed in, I had to change font size and divvy weaken See a elegant themes article at the top here. And then if I scroll down, they are going to share with you all the different options you have in the theme customizer to change content. Whip sidebar with you can change typography as well, Congar. Oh, you can see I can change the body text size with these dials. So let's just go in right now and just show you that live. I can click on the website name and then theme, customize it and open up the theme. Customize it for me. I can go into general settings typography and here we go. I can change the body text size of everything. Like before we change the head of fun and body fun. You probably already know how to do this because we already covered this. But essentially, again, I'm just going back to the point off quality questions into Google and into the things you're using for research and quality solutions will come out, and sometimes it will be a little bit complicated and you might have to go to something like Stack overflow. Let me just think of something more complicated. Maybe you use the example of changing the position of the featured image like we did before , so I would type in how to move. Feet should image in WordPress. Okay, and then you've got how toe ad featured images. That's not what we're after. Um, we can keep scrolling down and check out some of these links, and you'll start to see these Forum discussion sometimes. And as you can see here, there's a stack exchange link, stock exchange and stack overflow like forums where you can talk and get help on your problems from the community in WordPress. But it's also a great place to check out other people's problems and check the solutions as well. So you can see here. It might not exactly be what you're after, but you can kind of through your research. Look at these different stack overflow or stack exchange problems and solutions, and it can help you to form your own solution. And this is kind of going on the more complicated end. If you have a really simple question like I showed before how to increase the head of size and foot as head of size in divvy and how to increase fund size, you might get a really easy answer. Sometimes when you want to change something a little bit more complicated, that's when you might have to dig in to these Ah, different stack overflow questions. And these are all more written by developers. So they're gonna be more code solutions. And you know, it's a balance at the end of the day, you know, that's that's what this causes all about. We use a page builder and non code solution to do a lot of the stuff that we really don't need to dig into CO for on then, when we need to be that developer when we need to dig into curd, we can do that as well, and so sometimes, yet you just need to change the head of size, and it just requires a bit of CSS or the fun size. And you can just do that in options with, you know, click and drag. And sometimes it's going to require some, you know, PHP code level changes or CSS changes. All right, so hopefully and that helps you with your ongoing research into learning more about WordPress. Remember quality questions in results in quality questions out. And don't forget the context. And if you need any help with figuring out how to ah, you know, research problems in Google or in the documentation off any of the software you're using, whether it be WordPress or a particular plug in or theme with him, WordPress definitely leave your questions in the discussion below, and I will see you on the next video. 20. Bonus: Membership Sites: So this is a bonus lesson for anyone that's interested in building a membership site weapon now or in the future. If you want to skip ahead, we're going to wrap up the course in the next video and hand over the class project to you . But if you're interested in membership sites, it'll stay tuned because I'm just going to show you my iron membership site and how easy it is to set up in case you wanted to set up your own membership site or do that for a client . So the membership site I have is at a sub domain off one of my websites, Krista freelancer. And as you can see, if you go there, it says you must log into view this content. Um, so I'm going to do that now. Now I am a WordPress admin. So when I log in, I'm gonna have full access to add it. The website. Um so I go into WP admin and you'll see here I have all the same access privileges. But for a person who is just a user off this membership site, they will have the same menu bar, but they won't have the option to edit the page. They won't have this show current template. They won't be able to create new posts. It will just be a bear WordPress admin bar up here. And then once they go into here, they'll have the ability to change the user's settings but not change anything about the website. So this is just one little membership site that I set up as a video guide. Teoh Chiang Mai, Thailand. Which is something I, um, have an audience Who interested in that, sir, Um, what I've done is I've just embedded videos from Vinje and right here this edit button won't show up to people who aren't Emmons but basically has different pages. And if we look here, there's those of the page dress, Um, and it's all restricted. So what I can do demonstrate that is, open up an incognito tab, which will make sure I'm logged out. I can put in that link, and as you can see, it's totally restricted. So it's saying you must log in, and if you're not a member, you click to sign up here, and that's where you get to the sales page. Okay, so essentially you can turn your WordPress site into a membership site easily by using, Ah, plug in. You can do this, probably without a plug in, but honestly, a plug in just makes it so much easier, especially when you want to take payments. So if this membership site, if somebody comes to the sales page, they can buy the course straight away, and I don't have to send them the membership details or anything, they literally just go to PayPal. Pay the money, it comes back, and they are granted access and get their log in details so fully automated and fully worth it if you want a membership site. In my particular situation, the plug in I use is called Restrict Content Pro, and what it does is ads in a restrict menu here, and what I can do is I can go into Ah and see my list of members here. Um, I can go in and edit different members. I can choose their subscription level, which is something you set up somewhere else. There's a log. Um, I can see the payment and what they paid the subscription key for PayPal and on the second menu is where I can set up the subscription levels so you can dictate which pages ah able to be access by which subscriber levels. And then when you enrol uses you determine which subscription level there on. So on the page side of this, what we can see is we can go to a page. Let's go into advice for learning time. And as you see here, it's just a standard WordPress editor like this is exactly the same as how you would do a page for a non membership site. What I've done is I've built the pages completely using hey html, cause that is built on a custom theme. So, essentially, if I was doing this again, I would be building it with a page building, most likely so I don't have to coat every every page from scratch. That is just a lesson that I've learned is, you know, is much official, much more efficient to build websites with the page builder. But I digress here, when I wanted to show you is going down here to this section which is added by restrict content pro and it says, restrict this content so I can choose who can access this content, everyone will make it public. And then I can also define access level, which will allow me to set kind of levels up to 10 or more. And you know, it just gives a number. And it makes it easier that if the number is greater than the access level you have, then you are able to access it. You can also base it on user roles within Web press. But I found the easiest way is just to create a subscription level and then assign it to members of specific subscription level. And then, obviously, um, when I go into my settings here for restrict content prayer, I can choose where I think in sittings. I can choose where the money actually goes to the currency. Um, I can go into, ah, subscription levels here and shoes. How much you know, a subscription costs, and I can see how many people are subscribed that that subscription level, it gives me all these options. I don't have to code anything apart from if I want to code the pages. So that is my solution to membership sites. So it's just cover that in a you know, more theoretical basis for you. You might want to use a different membership plug in. Basically, you can just build a website, as you would normally on WordPress. But then the difference between a membership site and a regular public site is obviously the pages a restricted to members. So that's when you can plug in a membership plug in, and you can restrict content based on people's membership status. And with WordPress, it's by default that WordPress has the ability to have uses and uses ableto log in. But by having you know a plug in, it allows you to easily manage which pages viewable Teoh which subscription levels and then also accept payments on the front end. So I just wanted to cover a little bit about membership sites, just in case you, ah, were going to publish a membership site as it's something I've had a little bit of experience in. I thought I would share my experience with you guys. Thanks for watching this little bonus lesson in the next video. We're going to wrap up and give you the old class project, so I'll see you in the next video 21. Wrap-up and Class Project: all right. It's time to wrap up this course and get you started on your class project. By now, you should understand how WordPress works and have a good idea of how to build a Web press website from the perspective off a developer. Ideally, you should now have an understanding off Web press and what it does Devi as both a theme and a page builder for WordPress. How to add content to your website, how to build pages, the WordPress template hierarchy. How to customize your code both at the page builder level and in the back end plug ins and how to deploy and migrate your WordPress site. There's obviously a time of more detail we could get into in this course, but keep in mind the essentials are what you need to understand for developing WordPress websites as a freelancer or agency. Like I mentioned in my previous class, you should be able to research solutions when you're stuck and now, through your core understanding of developing for WordPress, you should be able to understand where to start your research when you need to build out something that wasn't exactly covered in this course in our class project. It's time to bring all this new knowledge together to build and publish ah Web press site to the Internet. Your class project will follow a sequence very similar to what we've done already in this class. It's just that now it's up to you. As always. If you do need any extra help, just leave me a comment in the discussion box. And also make sure to follow my page here on skill share to get updated when I release in your class. All right, guys, that concludes the course. I want to thank you so much for watching and I look forward to seeing your finished class projects. Best of luck, and I'll see you in the discussion section.