Transcripts
1. Introduction: Hello and welcome to how to efficiently build WordPress websites with Divi. 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 maintain 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 some text on a learning 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 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 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 as a product on theme forest or similar marketplaces, be my guest. But for building quick and [inaudible] customize 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 customizing 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 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: Before we get started, you're going to need a few things. Number 1, some prior skills. You're going to need some basic knowledge of HTML, CSS, and PHP, and some basic webmaster skills ie, how to host and use tools to 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 beginner knowledge to take part in this class. As for our tech stack, it's very basic. Number 1, we're going to need a server which is a place to host your new website. We're going to need WordPress and we're going to need Divi. Hosting we covered in understanding web development and we covered a bit of installing WordPress. Divi 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 your site locally, a PHP web server, like MAMP on Mac, or WAMP 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 parts of the previous class, and revisit us here when you're ready. I think that covers what we'll need to get started. I'll see you in the next video where we will discuss WordPress and Divi, and how together we can build WordPress websites super fast, 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 WordPress through the bonus lesson at the end of the class. To recap, WordPress is basically a free and open source content management system based on PHP and MySQL. Essentially, it's a bunch of code which lays out 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 blog 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 blog posts that get released on a regular basis. Most websites, I would say, fit this model of 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 custom functionality. For instance, Google Docs. It's a place where you can write, 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 apps as well, they all share a basic functionality, which is to share content. Whereas all the examples I previously mentioned, they all do something very different. Basically, unless you want to develop a new piece of software to rival Facebook or ABNB, then most of the time when somebody says they want a website, they're probably talking about a content-based website. WordPress is definitely the most popular software for developing these sites. In fact, according to some sources, it powers almost a third of 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 because I was just about to cover them right now. When you install a WordPress site, you will get the following design. Basically, they look like this. This will be customized based on what you put in the form when you install. We are going to go over installation later. But basically this is your blog title and this is your tagline, which ends up as a subheading. That's dynamic from when you do the installation. But this look with the part 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. The disclaimer here is that WordPress changes their theme every year, they bring out a new default theme. 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 it's 2018, they haven't released the 2018 theme yet. What we want to do now just to show you themes and plugins is go into our WordPress Dashboard. I'm currently logged out now, so I'm going to have to put in my login details. I have saved these here. These are the ones we're going to use in the later video on installing WordPress. But it's basically whatever you setup when you install WordPress. What you get is the WordPress dashboard. This is it. The front end of your website is what we saw before. This is what you'll see. If you're logged in, you will get this bar up here, which just shows you that you are logged in and then you can go in and do dashboard. Then depending on what plugins or things you haven't stored, there might be more up here. In fact, using Divi, there will be some new buttons that come up here. Also certain parts of the page that you are able to edit as Admin, you'll be able to edit, logged in. That's your front side of the website. This is your dashboard that only uses of your website see and can go in. Then all these fields, all these little menus, stuff that only admins can see. The first thing I want to talk about is themes. You're going to 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 as your default theme. In 2016, you would have got that as your default theme. You can go in here and you can live preview and see what your theme would look like if you were to use that theme. Rather than switching over straightaway, you can have a little bit of a preview if you like it. Great. You can activate and publish or you can change some of the settings here and then activate and publish and you'll get that theme. Now to explain themes a little bit, it's basically like the skin of your website. It'll organize layout and stuff. If we look at the preview of 2017 here, it's got this big image with your blog title and subheading. Sorry, tagline is what they call it in WordPress. Then you've got the menu bar, and it's 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 blog posts. There's a lot we can do, but basically the skin or the layout is dictated by the theme. Actually one of the reasons why I like using Divi as a theme, is it starts out pretty bass or it doesn't do anything crazy with the layout. It just has a menu bar, the sidebar. It's pretty minimal, which is good because it gives us a lot of room for customization. Once we install Divi and start using it, you will start to understand themes a little better. But the other main things that we plug into WordPress is aptly named plugins. You can go into here and you can see what plugins we have already installed. These are some default plugins that have come with this WordPress install. If we wanted to add new, there are thousands and thousands of plugins. What are plugins? Plugins are basically extra functionality that can go into your project. If we wanted to add edit a meta description, which we will do in a future video. I will go over some of the more popular plugins. We can add a SEO plugin. We can add things like Google Analytics. There's some ones that do very basic functionality, which is just cloning a page, sounds very basic, but WordPress doesn't include it by default. Somebody duplicate pages. The one I use. Somebody made a plugin that you can duplicate pages with. To summarize themes and plugins. Themes as 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. Plugins give your website new functionality that it didn't have before. There is a trade-off of plugins sometimes they add too much. It can weigh down your website. If all it requires is small code change and you're happy to go in and change the code, then you're fine. Otherwise, sometimes it's best to use a plugin. That should establish what a theme and a plugin 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. You're only limited by what the theme developer decide to put in here. But what we can do is put in our own 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. Some of these changes will show up live as we're doing them. We can change color scheme. Down here it's going to be light text on a dark background rather than dark text on a light background. We can create menus here. We can create widgets here, which probably best to do them in the dashboard. But basically let's just create one change. I like this dark background, so I'm going to click on that and then I'm going to click publish. That's going to make our changes lives. 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. How deep you can go is you can actually dig into the code. You can go down to here to editor. You have full source code control of your theme. WordPress is giving us a warning. You do have the ability to mess up your whole website if you mess around with the PHP templates. It's not advised you do stuff in here without knowing what you're doing and what you're trying to achieve. I'm going to click understand. Then we see our theme files here. This one is the style sheets that's got all of our styles. Then we've got all these template files, which I'll explain a bit later in the course. Basically what I wanted to get out here is this is what makes WordPress powerful. You have top-level customization options that allow you to change things. Clicking on customize again, you can go into visual builders and click in and change things, how you would do 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 code base is completely open source. I have a local install right here. Then 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. Yes, there is a database as well which is completely editable, but here are all your files. If we go into WP Content and we go into themes, then we go into 2017, this will match up with what's here. You see we have the style sheet here. Style sheet there. The functions.php file, very important is there, and it's also there. You can edit it here or you can edit it here. The point I'm making is full customization of the codebase and also the benefit of having a dashboard in which you can go in and change things without having to dig into the code. That is what makes WordPress really powerful. That's why it is a very popular CMS.
4. Intro to Divi: Divi is a premium theme created by a company called Elegant Themes. Unfortunately, like we previously mentioned, Divi is a paid theme, and at the time of recording this course, it's $89 per year to have the rights to use Divi. Now, if $89 sounds like a lot to you, just understand the possible value here. With a $89 per year subscription, you can create as many Divi 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 to all your clients. But, it's up to you. I can only speak for myself when it comes to Divi, and I must say that it is well worth it. There are a few alternatives though that we'll discuss in just a second so stay tuned. For now though, I want to explain more about Divi, and for that, it's time to return to the computer. We'll go over how to install Divi in a later video. But just to give you a quick demonstration, after you install and activate Divi, your website will change to this. This is basically Divi by default, and it may not look that impressive at first sight, but the power of Divi is in the page buildup. So what I'm going to do is click "New page" and we can start to see what the Divi page builders like. Now in a traditional wordpress page or wordpress post without Divi, this is what you'd use. So your options up here and you can put in a Heading. So up here would be a heading 1, so I'll put in they're heading 2, and be like well, let's just call it heading 2 I don't know what to put in there, and then you've got paragraph blah, blah, blah, blah, blah. You can bold it, you can italicize it, you can align to center to left, right, make it into a quote, insert a link, all that stuff, but that's pretty much it all. You can go to text and edit it in HTML style. So you'll see that when we left aligned something, it's putting in a style to left align, so just to demonstrate that a left align, sorry, text in line at right, and it changes it there, but we can go into HTML and change it to left and it's left. Now, that is, wordpress's normal editor, but the power of Divi is in the page builder, like I said before. I'm going to click on this big purple button to use the page builder. 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 create stuff, and see it visually right away. In this demo to show you the power of Divi, I think is going to be more impressive to use the visual builder, so I'm going to jump over into that. It asks whether you want to take the tour, you can definitely do that tour, I'm just going to start building because I've done this before. You've got your page which is as blank, but then you've got this which is your section, you row, you can add in at another 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 will see what we can do in more detail further down the track. But let me just see what's I'll put in an image. I don't have any images yet. What pictures 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. Then on here I can maybe set up some text, and maybe the first part of the text will be a big heading saying, "Hi, I'm Chris." You can see that these changes are happening alive in front of you, that's the power of the visual builder of divi. This is essentially what a page builder does, not necessarily in this visual manner, but it allows you to build a page based on sections, rows, columns, and modules. That differs slightly between different page builders, but that's generally a good structure, a good hierarchy to look at things: sections, columns, rows, and modules. That's definitely how it works in Divi. So if you like this, for example, maybe you wanted to put in another section, and it can be a full width section or a regular section, then it's going to ask you again, how many columns do you want in your row? Maybe four columns, you can see here. Now, I can press the button and add more modules. You can add a custom code module as well, just put in whatever code you want and it's still be aligned. I guess the biggest benefits of page building is the layout, because we can easily create these four column responsive layouts. If I was to, I don't think it works when you have visual builder. So you can see here it's responsive, that was on the left and that was on the right. But now, since I've shrunken it, it is going into a more shrinked setting. This is the power of using a premium theme by the way, it's definitely all optimized for mobile so you can have these fluid layouts, but then also you can take advantage of modules. So what would be a cool one, like a circle counter. Then all you need to do is put in a number. You've got this circle that animates directly just by putting it in like. To code this would take so much more time, but you get these elements or their code modules in Divi that you can just throw stuff in so let's say on 50 percent complete. Then you press "Tick", and then you come down here, and then you can publish or save draft. So that is essentially the Divi page builder and this is what makes Divi a powerful tool for developing on web press. But it's important to note that Divi is not the only theme that comes with a page builder. I feel like it would be remiss of me to just talk about Divi 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 their page, and they claim to be the number one word press page builder plugin. So it has the very similar way of building pages with sections, rows, different modules. But the big difference between this and Divi 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 forests, 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. If I scroll down here [NOISE] that's it. That is a lot of demos. [LAUGHTER]. So the feature highlights, obviously it's got to be fully responsive, 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 plugin called Revolution Slider, so that's just an example. I'm sure you'll find other themes that have visual composer install it 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 WP bakery page builder because they've been around longer. But he swears by it and it actually has a free version. So if you're on a budget, I'm just going to click pricing here. If you're on a budget, you can get the not pro version, I guess the free version, have similar functionality. If you want to learn more about elemental, there's a video you can watch here, I'm not going to play it because you can watch it in your own time. I haven't personally uses one before, but definitely give it a try if I was on a budget. So like I said, the rest of the course is focused purely on Divi, 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 we are using wordpress, and if the page builder is set up correctly, we still have a lot of customization options; we can build websites based of 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. If you're ready to move on from the theory and the next video, we're finally going to get stuck into building our wordpress site using Divi. So I'm excited to see you in the next video.
5. Installing Wordpress - Locally: 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, so it's live on the Internet. We can do that using cPanel, and it's actually quite easy, or we can host locally. Hosting locally just means that we set up our own server, there's a little bit more configuration that goes on, but then it's completely hosted just on our computer. It's not on the internet at all, basically. There are pros and cons to both, but installing locally is a little bit more complicated, so I thought we'd go over that first. 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. But what I'm going to do first, because what we need first is WordPress itself. So I'm going to go to wordpress.org. Actually, before we even download WordPress, we're going to need a new folder to house our website in. So I'm going to go into my code folder, and I'm going to put in, what should I call this, Skillshare Wordpress site. So now I have a directory where I can store our website. I'm going to click on this button here on "wordpress.org" make sure you go to wordpress.org, not wordpress.com, and then you just can click this button here to download the latest version. So I'm going to navigate to where our WordPress site is going to be, click "Save" and that'll save as ZIP file to that location. So if I go in here, there's the ZIP file, I can extract it by double-clicking on "Mac", and this is our WordPress setup here. So I'm going to move that into that directory, get rid of this directory which was created by the ZIP file, and get rid of the ZIP file. Now, the other thing you're going to need is a server to run this. Like I talked about in the last course, the server that I use is called MAMP. That's because I use a Mac, you can use WAMP. I want to go into a lot of details here because I did cover it in my previous class on understanding web development. But basically, the letters in MAMP stand for Mac, Apache, MySQL, and PHP. So the important things to note here is that WordPress is built on PHP and MySQL, so that's why we need that in the stack. Apache doesn't really matter too much why we're using Apache. 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 Linux. Not to confuse you too much, if you don't have MAMP already downloaded and installed, you can click here. If you need help with setting that up, definitely check out the video on installing a server from my previous class. So I already have MAMP installed, so I'm going to go into here. What I need to do, if you remember from the last course, is direct MAMP to the project directory. Sorry, maybe I did that a little bit fast. Here is an ad, very annoying. I'm going to go into MAMP Preferences, and then I'm going to go into Web server. As you can see, links to the last Skillshare class I did, which I just called the Project Directory Skillshare Course in that one. This one I'm storing in code, I'm going to go to Skillshare WordPress site and I'm going to click "Select". Then I'm going to click "Okay" and then I'm going to click "Start Service". It'll take a little bit of time, but then you should hopefully see these two light up green, and suddenly your MAMP start page begins. So if you want to quickly get to your website, you can click "My Website" and what will happen is it'll bring up WordPress. So at this stage, all you have to be clear, is the WordPress files in that directory. Now, there's two aspects to 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 end stuff which is stored in themes, but we're getting a bit ahead of ourselves. Then the other part is the database. So you need both to run WordPress. We've got our server here, which is actually running MySQL, 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 cPanel on your host, you don't even have to do this, it just automatically installs. But because we're doing it locally, it's going to set up a new database for us. So after I've chosen the language, I get taken to this screen, which is informing me that I need to set up the database. Unfortunately, through the WordPress setup, they are not able to affect the database, but the information we will put in and then the next tab, we'll go into what's called a wp-config file, which is where you store this information above in here, that allows WordPress to connect to its database. Again, if you're using cPanel 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, just host it via one-click install, which will be the next video. Otherwise, if you definitely want to host it locally, continue along. What we'll 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 "phpMyAdmin". If you've lost that page, the URL is just local host. Then the port, which for me it's 8888/phpMyAdmin. Now, what we're going to 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 skillshare wordpress. So now we've got a blank database in our phpMyAdmin, which is all we need for WordPress to come in and create all the tables and the beginning data to basically get started with WordPress. So thankfully, we don't have to create all the tables in the database ourselves. We could also set up a user here like I've done here, but we don't need to do that either. So what we can do, is there is a default user that we can use, which is just the root user. If I go back into here, let's actually put this into practice. I'm going to copy the database name, put it there, and then for username and password, I can just put root. It's not that important to change your username and password and have that all set up because we are running it locally. Basically, nobody could hack your database, unless I had access to your computer. Whereas if this was online, you probably wouldn't want to use root and root because that would be a lot more hackable. Database host, we can leave as localhost and table prefix. So it's always a good idea to leave that as wp_ just to 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, I'm going to call it Christopher Dodd because that's my name. Username, I'm just going to call it Admin. I'm going to use their suggestion, and it's always a good idea to save usernames and passwords. So I'm going to open up a text edit file and click "New Document". So I'll put this here so I don't forget it. This is going to be your WordPress login. Yeah, make sure you hold onto that because you're going to need it anytime you login to your WordPress website. I'm going to put in my email address so that I can be contacted about this website, because we're doing locally, we do not need to discourage search engines from indexing the website, because it's not even on the internet. The final step is to click "Install WordPress," and it says that it's now installed. Now, what I want you to do is to go back to your phpMyAdmin and just refresh. So you can refresh here or you can refresh here, and suddenly you'll see that there's all these tables. Some of them, I'm pretty sure, will have lots of data put in already. So to go through and do this manually would be ridiculous, so thankfully, WordPress sets this all up for us in the famous five minute install. Now, we can login to our website, or if we just want to see it, this is our website. So if we want to log in, you can grab this, and well. Now the benefit of hosting locally is, number 1, if you want to keep it completely private and you definitely don't want anyone to see it. It's not on the Internet, so nobody can find it. Also, you have access to the files right on your computer, so you can edit anything really quickly and easily. You don't have to upload, download. We could just go through and open with our code editor. Yeah, there are benefits, pros and cons to 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 going to be showing you how to do that at the end of the course. So that's 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. But yeah, that's it. Now you have a fresh WordPress install to work with. In the next video, I'm going to briefly cover how to do this directly on cPanel 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: 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 cPanel, on your hosting. It's actually quite simple, cPanel makes this very easy. What I'm going to do is open up a new window and I'm going to go to a domain that I've already set up. If you did the last course with me, you would remember skillsharecourse.space. There is currently nothing there, so I'm going to get this error. But you can access your website cPanel by putting dash cPanel. 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 checkout the sections on 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. If any of this doesn't make sense, I definitely encourage you to go back and take that class. Anyways, we are now on cPanel and as you see, I have a bunch of logins already because I managed cPanel on a lot of accounts. But what I've basically done for my website, I've already set up a cPanel username. I'm using the same password as we did for our local install. But I couldn't use admin because I'd already used that one before. So Skill Share course is the username in my instance. I'm going to click ''Login'' and now I'm in cPanel. Now when you're in cPanel, all you need to do to install WordPress is go to web applications and then click ''WordPress''. The great thing about installing through your cPanel is that you don't need to set up the database. I just click this button, install this application and I don't want a directory, I'm just going to have it right on the root domain. Everything else is fine, what I'm going to do is use the same login details as we set for the local version. Ideally, you wouldn't want your password the same for cPanel and WordPress but after this course, I'm going to delete anyway, so it doesn't really matter too much. For the administrator email, I'm going to put in my email so that this website can reach me if there's any problems or a notifications, website title is going to be Christopher Dodd and I'm going to put my tagline as WordPress Web Developer. 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 and quite easy. 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 username and password that I set up in the installation process. There you have it, we have a fresh WordPress install. So from this point, you can decide, I mean, you probably have already decided, but from this point you can work on the Cloud-based or 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 going to be migrating in a later video. I'm going to do it on the local hosting. But you can just as well do it directly from the hosting online. That covers setting up WordPress. The next step is for us to change this theme. This is the default theme of WordPress and of course the theme we're using is Divi. But there is an important concept to learn about building themes or customizing themes and that is child theme. In the next video, we're going to create a child theme and talk about what a child theme is and why you should use one. I will see you in the next video.
7. Creating a Divi Child theme: So because we are talking about setting up a new theme in our WordPress site, I'm starting off right here in the Themes section. In reality, we can't add a Divi theme from here, because it is a premium theme. Just to show you, if we were to click "Add theme", we can search through all the themes already available on WordPress.org, 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 with a free theme, then you could look right here. Because we're using a premium theme, in the case of Divi, we have to grab that file from them, and the way we do that is to login to our Elegant Themes account. 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 a remote domain as well, Skillsharecourse.space. If you remember from before, we did set up WordPress on our hosting on the internet before, but it is going to 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 are 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 and the best way for me to do that is FTP. Now, because we covered FTP in the last class, I won't be 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. With that out of the way, I'm going to go to Elegant Themes and I'm going to login, and I'm going to grab the latest version of Divi. When you log into Elegant Themes, you'll get this Members Area, where you can see your downloads. They have some other things you can download here as well, including Monarch, which is a social sharing plug-in that I use. Go to Divi and then click "Download" and you'll see I've got this one in brackets, because I actually have already downloaded Divi, but just to make sure I got the latest version, I'm going to save that 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", go into here and upload it. Now, because I'm local, it's not actually uploading, it's actually just doing it all on my own computer. Upload is a bit of a false term here, but it doesn't matter. It's the same thing. It'll be the same thing doing it on your remote hosting as well. If you're not convinced that you want to activate it, you can live preview at first, but because we're starting from scratch, there is no progress made. It is completely safe to just click "Activate". We have Divi installed, and I want you to notice what happens here when we go to our WordPress site. See how it's completely different. Don't get me wrong, the post types that we had before, 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 pop plant and the title there, we've got Divi now, which on first look, looks quite bear, but that's actually a good thing, because we can more easily customize it to what we want. It's better to start from a bare starting point and be able to build on top of that, than to have all this fancy layouts and then having to figure out how to just go back to a regular layout. What I'm going to do now, before we start to customize our Divi install, is create a child theme, which is the main point I want to make in this video. To learn a bit more about child themes, I have copied a URL here. This is on the WordPress.org codec. You can read more about child themes here. It talks about why to use a child theme, how to create a child theme, and the different template files and everything, but perhaps what's not covered is what really is a child theme? A child theme is basically a new theme. There's going to be a new theme in here, but essentially it's going to only have a few different files in there, and it references a parent theme. In this case, it's going to be Divi, which is going to be the parent theme. The point of a child theme is that we can make updates or edits to the parent theme, without actually touching the parent theme. 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'll go to those files first, but if it can't find them, it'll go straight to the parent. This is just really clean. If you're going to be doing editing of the theme, it's best to just leave this clean as it is, to not go in and change what Divi he have done, but if you do want to make modifications, it's best to put it in a child theme. Easiest way to think of a child theme, I'd say, is it's just a theme in which you put in all your customizations while still taking advantage of the parent theme, and keeping your customizations 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 a great way to learn about theme development, but the biggest reason is to keep things clean. You're going to have your modified files in one theme and you're going to have the unmodified original theme in it's own theme folder. We can follow the steps here, but because we're using Divi, Divi actually have a tutorial on how to create a child theme specifically for Divi. I'm going to type in Divi child theme, and right here, I have accessed this a few times. It's just called the ultimate guide to creating a Divi child theme. Because I'm doing this locally, I can go right into this directory here. What I need to do is go into the themes directory. I'll go WP content. I will go into themes. Oops, I accidentally opened both. I will go into themes and you can see here Divi. Now we don't want to touch it, like we said before, we want to keep Divi clean and that means that when we update Divi, this will not break any of that customization. Instead, we're going to create a new folder called Divi child, and you can call this whatever you want. Divi child is just the most descriptive name possible. For a child theme to work, there is one essential file that you need, and that is a style.css. I'm going to scroll down where it gives you the exact code to put in. Here you can see the direction that I've just given you with the creating a Divi-child directory in the themes directory, and then the next step is to add the style.css. 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, Atom. Atom is now open. I'm going to create a 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 back into my WordPress directory. I'm going to go into my Themes directory, find my child theme, Divi-child, and I'm not going to call it "fz3temp-2", that's just ridiculous. It has to be called style.css. Definitely don't change this. This is the file name that WordPress is going to look for, so make sure it's style.css. That is the basis for your child theme. One other thing that you should put in is a functions PHP file, and that will enqueue 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. Again, just copy and paste. I am going to take that. I'm going to create a new file in atom, paste that in. I'm going to save that as functions.php. Again, it's very important what you call these, because these are all WordPress template files. WordPress will look specifically for these names. I'll call that function.php. Essentially, that's all you need. You can create a thumbnail for your Divi child theme, but you really don't need to. You'll be able to just read the name. If you want to get creative, you can change the thumbnail, but it's really not important. What's going to happen now is we're going to go into our Themes section of our website again. By the way, this area here, all it's doing is referencing the folders here. You can see Divi, 2015, 2017, 2016. Those are all the themes here. So if we refresh the page, you'll see our newly created folder, the Divi child is there and it doesn't have a thumbnail, because like I just mentioned, we didn't put in a thumbnail, but it really doesn't matter. We can go in and click "Activate", and now we will switch over to our child theme. If everything went well, we can reload and it's the exact same website. You might be thinking, well, Chris, if it's going to be the exact same, why did we create a child theme? The reason why, like I said, is just putting your modifications in a different file. 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 going to do some theme customizations in this course, so you actually see what it's like to update a child theme and what modifications we're actually going to do, but for now, our theoretical basis, we can put all the changes we want into this theme and then we don't have to modify the original theme. Hopefully, you understand what a child theme is by now, at least from a theoretical standpoint. As I said, we are going to actually edit this child theme, create some 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 did. It's just a good practice to do and also it makes things a lot cleaner. Really important that you get that child theme set up, and with that done, it's time to actually get stuck into Divi and do some customizations. 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 Divi. What I mean by that is, changing up some of the default settings here. Obviously, the first thing that stands out to me is that we've got the Divi logo instead of our own logo. The menu is terrible, we've got ''Sample Page'' and ''Uncategorized.'' This is just a default behavior, we're showing on our front page a collection of all the blog posts. Right now we just have one blog post which says, "Hello World," that is just a piece of dummy content that WordPress starts with. But if we had multiple blog posts this would be an index that we could scroll through. It's also put in the sidebar. Finally it is put in a footer with, "Designed by Elegant Themes'' ''Powered by WordPress". It's very Divi branded at the moment, the Menus are wrong, the contents dummy content, and we've got a sidebar. 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. Divi provides a lot of options here. The place that I like to look first when I'm changing options for Divi 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 Divi, where we can go into our "Theme Options". Again, the two places that you should look to customize Divi before you dig into any code would be, "Theme Options", "Theme [inaudible] ", and "Module Customizer", I haven't had to use very much but, that is also a place where you can create customizations. Now, once you get to the ''General'' theme options of Divi, which is the first tab that shows up, you'll get the first field as "Logo", which is appropriate because that is the first thing I'd want to change. I'm going to go into a folder that I've prepared of files for this WordPress course. I have this logo, it's a pretty terrible logo, that I've created. I just basically traced around a picture of my face and I'm just going to use that as my website. Now, for S.E.O reasons, you're going to 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." Then, I'm going to click "Set as Logo" and that'll be the logo. There's plenty of other options here in the Divi options, but for now I'm just going to click "Save Changes" and then I'm going to view the site. As you can see, my face is now the logo of the website. What I want to do next is change this front page. What I need to do for that is, by default, and this happens in any WordPress theme, is that it'll show all the blog posts that it'll provide a blog index. Oftentimes, most websites you don't want to just show your blog index. 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. Then your homepage displays the thing that you're going to need to change. Right now, it displays the latest posts but we can create a static page. I should've created a page in advance but let's just use the sample page for now. I'm going to click "Save Changes." Now, when we go back to the homepage, we have got the sample page and it's good because it's put in some content there. You can see what it would look like now with a page instead of the blog index on the front page of your website. The next thing I want to do is, update my menu. I'm going to go back into "Dashboard." The way to access menu is through "Appearance" and then click "Menus." I'm going to give my menu a name and I'm just going to call it, "Main Menu." You can see I've done this before because I've 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. Because we only have one page, I'm going to add just one page to the menu. "Save Menu" again. When I go here, before you refresh, make sure you 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. 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 it's going to be blue for the front page but we can add in more pages. Just to demonstrate the menu, 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 it's just to put a hash in. But we can say maybe, we want to have a "Portfolio Tab," maybe we want to have a "Services Tab," and maybe we want a "Tab for Blog". What you'll see here is you've got all these links now. I'm going to get rid of "Sample Page" because it's the homepage, we don't really need to have it as a menu link. But one thing else I will show you about menus is we can have nested menus. I'll show you that now. Let's just say that, you had a blog and you had different topics, so maybe one of the topics is, "WordPress." It will add to this menu. What I can do to make it a submenu item of another menu item is click on it. 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. I put it in. It's now going to say, "Sub Item" and that's a ''Sub Item'' of "Blog". To see this change, I'm going to click "Save Menu" and then I'm going to refresh. As you can see, we've got the "Portfolio" link, and then you got the "Blog" link, and then you have that sub-link of blog which is "WordPress." That's your menus. The next thing of importance is probably the "Theme Customizer". I'm going to go into the page. Click "Theme customizer". 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. But, you can do it while you're on the website. What's powerful in Divi is that we can change ''Typography" settings, we can increase the ''Body Text Size.'' These are some general like typography changes that will go throughout our site, unless we override them. It will allow us to change the header font and body font, so we can change whatever you want. Let's choose, I think [inaudible] is pretty in if they have it. No. What about ''Anaheim?'' No. It's a bit boxy, isn't it? You get the point. You can put whatever you want in there. Then, body font. I'll do ''Abel.'' Wow, that's not very readable. That's not great either. These are very stylish but not very readable. Droid Sans, that's all right, Droid Sans will do. We can change the body link color. As you can see here that's a link. We can modify and then suddenly that changes. I'm going to create default because blue has historically been the link color so a lot of people know a blue text is a link, and we can change the body text color. Maybe we want it more faints which probably would recommend or more black. We can do that as well. So you get the point. I'm going to click publish so that those changes are live. I'm going to go back into here, layout settings. You got a lot of settings in Divi to be honest. You can 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 top-level layer of customization in Divi. The deepest level would be writing code, but this is probably the first place you should look at this and the theme options which I had talked about before. We can change the overall color scheme as well.You get the picture. We can customize stuff that will happen to the whole of our website through this menu. So we've got the logo, we've got our own menu, and we've changed the front page from posts to a single page that we going to edit later. But the sidebar on the homepage, it's not a good look right now. So what I'm going to do is I'm going to go to menus and I'm going to go into widgets. It's a bit of a confusing location, but your sidebar is set up with widgets. So if you want to find your sidebar 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 the sidebar. Categories you can put in if you think that's good, archives if you think that's what you want to display to your audience, but we can probably get rid of a lot of this. So what I'm going to do is just delete all of these archives, recent comments, search. You can search for the top bar, actually the menu bar. We don't really need to search twice. I'm just going to leave recent posts because 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 has recent posts by default. 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. That's great. At the same time, I don't want to have a sidebar on the front page of my website anyway. You'll see as we build out this front page with Divi, am going to want the first section to be full width 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 sidebar to show up at all. With Divi, it's quite simple to disable the sidebar. I'm going to click ''Edit Page'' and there's actually over on the right here, Divi page settings. So over here on the page layout, it's set to include the right sidebar right now but I could move the sidebar to the left if I wanted to, or I can go for width which gets rid of the sidebar altogether. I like that. I'm going to click update and it says page updated. So I can click view page and suddenly there's no sidebar. So if I go to check out a blog post, let's say hello world, I can access it like this with the URL, 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 this 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 to edit that for each individual page, you can do that through Edit Page. So the final thing I wanted to change was the footer. Right now it says Designed by Elegant Themes, powered by WordPress. But we don't really need to primo elegant themes or WordPress if we don't want to. In fact, that is a good space to put in some copyright information or a link to our own site, or if you're able to and the client doesn't mind maybe you want to put design by and you'll link there. But definitely ask your client or whoever you're building the website for whether you can do that first if you want to do that. Essentially there's no need to have Elegant Themes and WordPress links below in your footer. So what I'm going to 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. I can just go to the footer which is actually just a part of the full record bottom bar, the part we are trying to edit. So I can go to the bottom bar option and I can edit the photo credits. So I'm just going to say copyright Christopher, and then I can put in some 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 place holder and then you can see now the text is a bit different to indicate that it is a link. You can also disable photo credits altogether so it doesn't even need to say copyright Christopher at all. So you can just disable it completely or you can toggle that on and have your custom text. On the bottom right you might have noticed these links that come from Divi. 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'll go to those links. Honestly, I have Facebook and I have Twitter and not a big user of Google Plus. So oftentimes I'm hiding this section and putting in my own social links. I like to link to other profiles as well, not just those three. So I'm not sure why Divi chose those ones probably because they are the most blogger friendly, but I like to link to YouTube and Instagram. I usually create my own little photo 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. The most important thing that our website needs right now is content. So, in the next video we're going to 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 going to add some content in the next video, and in the following videos we're going to continue with some customizations 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 going to be talking all about content and we're going to 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 based-website, it needs to have content quite obviously. In WordPress, there are a few different, content types that we can add, 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. Divi actually adds a third 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 contents. So we can see here on the posts menu, we can look at all posts. We can add new posts, we can categorize our posts and we can 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 Divi, we can go to all projects, you categorize and tags. So the difference between posts and pages is that posts, you can think of them as blog posts. So they have a set time and they are added to what's called your RSS feed. So if somebody want to subscribe to your blog through a blog reader, when you release a new blog post, they're going to get notified. So in a lot of ways opposed as a lot like a page, but it's just got a date on it and it's just built to be like a blog post. So moving onto pages, pages are quite similar to posts as mentioned, the different 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.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 blog posts, and essentially we got the same thing, we got a page and I guess you could consider this as a page as well. But if you look at the post, it's obvious that it is a blog post. You got to 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 blog posts and pages are basically anything else. Of course, in Divi, It is a little bit different in the sense that you have a third post type and that is projects. This is what makes Divi 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. So Divi 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 though, Divi 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 going to open up a new tab and we've got all the images that we've already put into the website here. We can add new images by adding new here. So basically, media by itself doesn't really do anything, unless maybe I put in a document here and link somebody to it. But we can embed media into post pages and projects. So media most of the time is going to be images that maybe you want to put audio files in here. Maybe you want to put video files in here and maybe you just want to store documents. So I guess, 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 going to 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 any categories setup, it'll just say uncategorized. So what I'm going to do now is because hello world is just a dummy blog post, I don't really care about it. I'm going to trash it and start from scratch. So I'm going to 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 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 blog post on How to Build a Divi Site. If I hit tab to move on to the next field, it will create the URL for me. Because this is a blog post, what it's going to do in the URL, is put the date of publishing, which it will assume is the today's date between the domain and the title of the post in the URL. I don't really like that and it doesn't really helped with SEO or anything. So I'm going to just change that in a sec. That there is one difference between posts and pages, pages doesn't do that. So after I put in a name and then go to the next section, is going to create a link with that and down here we have the WordPress default editor for creating blogposts and in this situation, you want to use the WordPress default editor. You could use the Divi Builder, which we covered earlier. But I would only use the Divi Builder to build pages because I like to keep my blog posts using default, what's called the WYSIWYG editor here, as in what you see is what you get. One of the reasons why it's really important to create your blogposts using WordPress is built-in WYSIWYG editor rather than the Page Builder is if you were to switch to another theme, all your blog post would be broken, because the Page Builder what it does is, it inserts code on the page that Divi interprets. So if you were to change your theme later on, all that content will be stuck in Divi. So don't get me wrong, I love Divi 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 Lorem Ipsum to put in some dummy content. Let me just go to any of these ones. I'm going to put in this. So that is your basic paragraph that I want to add some headings. I'm going to go in and put a sub-heading in, and then you can go deeper with the headings to do Heading 3, which is even smaller sub-headings. I'm going to call it sub-sub-heading, and then I'll just place in that exact same text. I think this is a Divi theme, so you can change the excerpt. When WordPress is showing a preview of your blog post, it'll show this excerpt. Otherwise it'll just show an excerpt based on what's already on the page. What you can do is change the layout so you can hide the side bar using Divi. You can save a draft if you don't want to publish it yet, and you can assign a category. 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 Divi site. I'm going to go a little bit broader with the topic and I'm going to say this based on WordPress development as the category. Categories are powerful because you can section your content based on a particular grouping. You can also do this with tags, but tags are secondary to categories. Usually, you just need to categorize your content, but you can also tag it if you want to add what's called an extra taxonomy. The final thing and what's really important is to set a featured image. I don't have an image specifically for this posts, 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 going to get in trouble for copying. I'm going to save it and I'm going to put it into the files for the WordPress course and then I'm going to upload it. That will become my featured image basically. Again, I'll text for SEO, how to build a Divi site. I really should have got a picture of a Divi site specifically for this blog post, but again, this is just for demonstration purposes. 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've got your author name, you got the date it was published, what category it's under, and how many comments, and you can see this is the lovely layout. That's all basically done by Divi and WordPress. I'm going to click Publish here and now the blog 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 either. So if you go to permalinks 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 going to 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. By the way, these permalink settings you can go through and update. Maybe you just wanted the year and then the post. For that, you can use these tags here if you really want to do that. Most of the time, it's just easier and best to just have the post name in there. We're going to save changes and now if I go back to that post we created, I'm going to go to old posts and then just skip ahead to click view. It'll just have the root domain and then how to build a Divi site, which is good for SEO as well. You always have to build in with SEO in mind. SEO for those of you don't know is making it optimized for search engines so that it's easier to get your website to rank in Google or any other search engines. Now that we've created the post, creating a project is basically the same thing. I'm not going to go through the whole creating a project post type here, but what you can see is the exact same interface. You can see here we can add Project categories, we can add Project tags here as well. These are separate to post categories and tags. One of the things about this being a separate post type is that categories and tags available will be unique to that post type. In posts, 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 some words after it to indicate any special pages. You can see this here is our front page. It's got dash, dash front page. If you're running e-commerce, you might have dash dash cart page, you might have dash dash checkout page, and that dash just means it's a special page and it just indicates to you which of those pages is your front-page, your cart page and all of that. This is a draft I created earlier, and then of course, draft here is any pages that are in draft mode, so you actually haven't published them yet. Essentially, what you're going to want to do of your website is to have as much content as possible. It's hard to categorize your content when you only have one blog post, and it's hard to have navigation in different parts of your website when you only have one page. So you should really go in there, create new blog posts, and essentially my advice to anyone starting a website is to write at least five blog posts first, or write out five pages and design all of that first, and then to start putting that into WordPress, because it's hard to 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 are supposed to be filled with content. What we could do is go through and create all these new posts, but essentially the process is the same for each of them. 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 all good. 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 going to build pages, which is a little bit more involved, because we are going to be using the page builder and we're going to build out the homepage. 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 blog 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 what you should put in your projects. Now that we have some content in here, we have some posts, we have some projects, we can now start to build some pages that bring in some of this content dynamically. 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 WordPress, so it's time to go in and change it to how we would like it. As I demoed before, with Divi, once you click Edit, you can use the Divi Builder. I'm just going to delete all of this and then click "Use Divi Builder". Actually, if you want to delete that, what Divi would do is it would put that text you had before as a text module right here. So you wouldn't lose it. I just knew we were going to get rid of it, so I got rid of it beforehand. But I could have just as easily done it the opposite way, which I'll just demo now. Just as a reference in case you do want to change a page that was done in the WordPress Wheezy, we got to do that, but want to change to Divi. If I click this, it will put the text we have as a text module in first column of the first row of the first section, which by default is a one column row. Now, I demoed before the use of Visual Builder, which for some of you you may prefer that. 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 row settings like this, and you can edit your text settings for that module, add in another row with how many of the columns you want, and then you can add in another section as well. We have a regular specialty for width. I as a personal preference, don't really like to use the Visual Builder because it's a bit finicky with these different things that hover up. It's just a personal preference. If you'd like to use a Visual Builder, definitely by all means use the Visual Builder. But my preference is the default builder. I'm just going to go back into edit, and here's 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 module. It just gives me a good view of the structure of the page, whereas the other one 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 homepage for this website. The website I'm building, and you probably gathered it by now, is a personal website. I've got a logo of my face. I've got portfolio services blog, and the website I've called just my name. Divi 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. Just to let you know, that's the site I'm looking to build. Again, just as an example, we're going to build out a freelancer portfolio website. But the same principles apply to whatever you want to build. In terms of popular modern web design, oftentimes you'll see, just like in my website here, which is my actual portfolio website, you'll see what's called hero image. It's just taking a little bit to load. But this is basically a full-width image. This is all built on Divi too by the way, so we're going to be building something similar. This is a full-width image, and it's got a little bit of what I want people to see, and what's called a call-to-action. This is just a button basically, but this whole thing is a call-to-action because I'm leading people into taking one action from the moment they see the website. That's just a little bit about design. What I'm going to do is, because I want it to be full-width, I have to actually do a different section type in Divi. I'll click "Full-width section" and I'll drag that above what we have already. You can see here there's no rows because you only get one row with the full-width section. But what I'm going to do here, Insert modules. These modules are a little bit different for our a full-width section to a regular width 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 in fact, and also put in that background image. I will say welcome to my website as the title. I make WordPress sites. Then for this button I'll do view my portfolio. You can have two buttons in there. I'm not going to bother with the second button. You can put it in the URL, and because we haven't built it yet, I'm just going to put it in a hash as a place holder. You can put in images here, but what we want is a background image and in Divi, you go to the Background settings. Right here is if you want a solid color as your background, here is if you want a gradient, 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, they have a video background. Divi makes that really easy to do by using the Video Background option here. I'm going to go back to image, and I'm going to go to Upload Files. I've already got it here. This is the hero image I use on pretty much all my websites, and I'm going to give it a better name. I'll just type in my name. Christopher Dodd, hero image. Then down here, make sure it's full size. Set as background. Don't worry that's cutting off right now. We might need to adjust the background size and image position. So my head or the most important part is in the top right. 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 it means it's going to cover the whole section. That's good because we need it responsive. I'm going to press "Save and Exit". Now I'm going to preview changes. We could just as easily have hit Update. It doesn't matter, because we're not really working on a live website yet, but if you were updating a page on an existing website, you'd probably want to preview first. So as you can see, we've got this full width image, welcome to my website, I make WordPress sites, view my portfolio button. Straight up, I can see that we're going to 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 creepy, actually having just my teeth. The topper part of my teeth just above here and so what I'm going to want to do, is force this to have a certain height. Now what I do and this is something that I showed you guys in the last class, is to play around with your website in the browser before making any permanent modifications. By using command option I on Chrome, using Mac, I can bring up the developer tools. You see here this is already responsive. So now that looks a bit better. But again, on a larger screen, it's going to cut off my face. What I want to do is inspect here and that's going to bring up the heading but if I go further up the chain, I can see here and you can gather from the class names, this is the section, E-t is the prefix that Divi uses, so when you see e-t, p-b, e-t, p-b, e-t, p-b, also, that's a good tip if you want to go check out somebody else's website and see if it's built on Divi. You can check out the code and if it's got et_pb_, then it's highly likely that they're using Divi as well. So that's pretty cool, you can spy on other people's sites. What I want to do here is just verify that I can affect this first of all. I'm going to 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. That's what I'm doing here. I'm going to 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. I'm just going to cancel that, which I can do by checking this checkbox and I'm going to go one layer deeper. 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 and off. Now when I go into up here and I give it a height, there you go, it now becomes bigger. Now 800 is a bit much. I don't need it to go all the way down. Probably just need about there. Even at a full width. Actually, I'm just going to close down because that's as wide as I can get. Even at a full width, you can still see my face and a bit of my arms. I think I'll just make it 500 for now. It's important to note that doing it here isn't going to make any changes permanent. This is just for you to play around with and affect the output on the screen, so that you can figure out what to change in your dashboard. What I'm going to do, is head back and find this module. We were on this section and then one layer deeper is this also called section but in HTML but as you can see here, the class is pb module. What we need to do is go back and find that in our Divi page builder. I'm going to go here, into the full-width module setting and here you can add in custom CSS. You could also add this in your style.css and try and reference it but in this instance, we're just affecting one single element, so it's safe to do it from here. I'm going to put in height 500. One of the cool features that Divi has put in since they've updated their theme is, once you click into something, it'll tell you what the class is that you'll be affecting. We can go verify this et_pb_full width_header_0. I can go back into our site here and I can check, is that the one? As you see here, et, pb_full width, header, zero, that matches up here. This style should be applied to this element. I'm going to go scroll down and I'm going to click "Save and Exit". Then I'm going to preview again. This will refresh the page. There you go. Now this will be always 500 pixels tall. That's a good example of how you would dig into code to change styling options and stuff. But as you'll see in the next video, we're going to dig even deeper into code to do some more serious customizations. The next section I'll build on this website, will be a bit of a blurb section, it'll talk about my key selling points as a freelancer. I'm just going to 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 going to do, is I'm going to have three blurbs and I want them all to have an equal width. I'm going to click choose this. This is what I like about the Divi builder default, you can clearly see that there are three columns here and you can click on any of them to add a module to them. I'm going to click on the first one, add a blurb and a blurb is basically just an element that has a title, a bit of content, a link and an icon. So I'll say an eye for design, is one of my selling points. We don't need to link it if we don't want to. So I'm just not going to put a link in there and then I can use Divi's 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. I might fast forward here a little bit for you guys because I'm going to create two more blurbs and just copy the process for this one but just let me find an icon that communicates design. I don't want to spend all day on this, so I'm just going to choose this basketball looking thing which I think is dribble. Okay. Right here you can change the admin label. I'm going to change that to design and you'll see why in just a second. Now I can see without going into it, what is going to say. So I've labeled it as design, so I know that's the design blurb. I'm going to fast forward here, put in two more blurbs and you'll see the result in just a second. All right. So I've got my three blurbs in there and I'm going to preview changes now to see what it looks like. All right, here we go. As you can see, it looks a bit weird because the titles align left and the icons are in the middle. Also, it'd be good to have some content under them. So I'm going to go back now and fix that. So I've just gone ahead and fast forwarded that, went through that. I'm going to click on preview and now you can see the text is centered and there's a bit of a blurb. How I did that just to give you guys a recap, I went to content to add in that little bit of content, and then I went to the design tab and then I scrolled down to text and aligned that as center to do that. That looks pretty good. Remember this is all responsive because we built it on Divi. 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 two, so very intelligent. Sometimes you might need to change it, but most of the time Divi is pretty good at making it responsive. Actually, one thing I want to do is add in another row here and put in the title for these blurbs. Using the standard WYSIWYG editor from web press, I'll make a heading 2 and I'll say," Why hire me?" I'm just going to give this an admin label of heading. Now what I'm going to do is add a new section and I'm going to do a one column row and again, put in the same thing I had before the text. That is going to be our heading, going to align center, make it a heading 2 say," Check out my previous clients." I'm going to 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 going to add a row and I'm going to put in a full width section. Oh, not a full width section, but a one column row and here I can bring in some dynamic content. There's an element here. You can do a filterable portfolio or you can just do a normal portfolio. Actually we didn't set up any portfolio categories but if you have portfolio categories, you could filter. This is going to set the maximum number of posts that it'll show and you can show which things to show up. Categories we don't really have any, so I'm going to hide that. Pagination, we won't really need that, but you can have that enabled. Let's just put that in and see how it goes. I'm going to go back up here and I'm going to preview changes. Check out my previous clients. Now it's going to go these really big blocks, which I don't know why Divi does that by default because they often look ugly. This is the content tab, so we can change the content and even do the background. Advanced is where we can put in Custom CSS, ID and classes and change our visibility on phone, tablet or desktop but Design tab is what we're after and what we have here is a field called Layout. We can change that from full-width to grid, which in this case, I think it's going to look a lot better. You have 70 more customization options, it's ridiculous. I'm not going to bother with it for now until I see something I want to change. Back to preview changes. You're going to want make these logos probably the same height and width if you want them to show up nicely, but as you can see, this is pulling dynamic content. What I mean by that is as soon as I add a new portfolio item in here, which is called Projects in Divi, that'll show up in here provided that it hasn't reached the maximum. Now I just figured out another error I had here, which is I forgot to move the heading above. You can move a module like this very easy, and that heading will now show above. Let's preview that. Now you've got this section, which is the hero image with the call to action, you've got "Why hire me?", so you've got the blurbs. You can check out previous clients, which by the way, if you click on one of them, I'm doing a new tab. 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 the page if you want to go in. This is all dummy contents so there's nothing new to see here, this is just for an example. Finally, I want to put in another section. It's going to be pretty similar, so what I can do is duplicate or clone section as they call it. I'm going to change this instead of Clients, I'm going to say, "Read my blog." This is where we can put in another set of dynamic content. I'm going to 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 blog. Now I can filter by category, I can change meta date format. I can choose to show the exit or not show the exit. I'm not going to show author because it's all written by me. I'm 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 going to want to change is I don't want this Full width layout, so I'm going to change that to Grid again and too many options. I'm going to going to click "Save and Exit" and then Preview changes. If we scroll down, we have a lovely laid out section which shows up blog posts. As you can see here the excerpt is going to be the same for every one of them because I put in the same standard Lorem Ipsum passage, but I changed the 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 the stuff in the footer. Another thing to note is the menu collapsed into this. Yeah, it's all responsive with Divi and the page builder and we've got two sections of dynamic content here. Obviously there's a few more elements you can work with. Best thing to do is probably play around a bit, so I go in here and check out the different modules, see what they do. But basically the principles are with the Divi page builder, you got a section which is in blue. You've got a row, and you've got columns, which the amount of columns get set up as soon as you create a new row. You can't rearrange rows, but you can always say for instance, you wanted to move the blog into one of the columns. You could do that and then just delete this, so you can move module from different space to different space. You can also rearrange rows as we showed you before. We can rearrange sections like this if we wanted that section above and we can get rid of them. The main principles is sections, rows and columns, and modules. The second principle is the difference between this static content and dynamic content that pulls in other content types from different parts of your website. I hope that is a good introduction to the Page Builder and how to build pages with Divi and WordPress. In the next video, we're going to go over customizing your code. 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 blog creating styles. Also, how to figure out which part of the page to style and the difference between CSS in line, which we have talked about it a little bit, but we're going to go into more detail in the next lesson. Before we do that, however, I'm going to make sure to save this. I have on occasion, just closed this page without saving my progress. You'll need to click "Update" here and now those changes are permanent and are live and you've got your website. I'll see you in the next video.
11. Customising with code - Basic: In the last video we created the front page of our website using the Divi Page Builder. As you can see, we were able to use the page builder to create a pretty good front page with dynamic content, pretty much using zero code, apart from putting a style on this. That's the power of the page builder, we can build out layouts like this and use elements from Divi 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 Divi. 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 out of the box features here in Divi. But what happens if you want to build something that's custom, that's not really in this list? One of the ways we can do that is to use a code block. This is like a bare module in Devi, 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 of Divi's system, how it has the sections, rows and columns, so we still get those responsive columns, but we can build our own elements using HTML, CSS, and we can even put in a little bit of JavaScript. I think the best example of this is to show you a recent client project. This is something I did earlier in the year for a client in Australia. I built this website based off PSD design and built it all within Devi. One of the things that was in the design that doesn't really come standard in Divi, are these, I don't know what you'd call them, a gallery of images 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. There's just these faded images and when you put your mouse over it gets a bit darker and some text shows up on screen. What I did for that, I'll just going in and show you right now. All I've done to get to this point is, I just logged in with the WordPress admin, went back to the page and then used the top bar to edit. Now I can go down here and you can see the layout. I will open it up side-by-side. You can see the structure as it is in the Divi Page Builder, and then you can see the result here. This is the section I called it Highlight Image Box, and if we go into these Highlight Image Box, you can see some custom HTML, and actually what gives the hover behavior is some CSS that I styled myself. Let's actually go in and create something similar in our project. I'm back in our own project and just for demonstration purposes, I don't want to spend too long coding custom elements, I just want to show you the potential here is, I'm just going to create a Div, which is going to have a border that makes it obvious to see that we're putting in some custom code. But essentially the possibilities are infinite with this, you could code whatever you want. I'll put in a Div. I'll just put in a Div with the word "Box" inside it, and then giving it a border. I'm going to save and exit and just see what that shows up as. Preview changes. If we go down, we can see our box here. The height of the box is made in proportion to the content inside of it. 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. Now you can see that the box is 300. Just to make that look a bit cleaner, I'm going to make another box. I probably did that too fast. What I've done here is I've clicked that button to duplicate, change this to Box 2. 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 1, Box 2. Now, obviously this is not too impressive, but I'm just trying to prove a point here. You could create any custom elements you want and 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 inline styles. Especially when you are repeating styles over and over again, you'll want to put that into CSS and apply a class. You can see this box and this box are the same, and they have the same styles. Anytime you're copying and pasting something over and over again, in any development, any 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. In the case of these styles, we can actually put this style in the CSS file, and then reference it using a class. Again, if that is too advanced for you, make sure you go back and watch should the first of my Skillshare classes Understanding Web Development. But what we see here is an inline style. Inline styles are fine if you're just affecting one element and it doesn't make sense to build out classes and IDs and stuff if you're not going to reuse this code. But if you're going to use it once, definitely you can put an inline style. If you want to 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. It'd be much cleaner to take these styles out and put in a class. In WordPress, I'm going to 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. I'll lose my clipboard, but I remember what I wrote. I'm going to copy that, and then I'm going to 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, you would see it's much more efficient. Where can I put in the CSS? Well, there's actually a few places. The first place that you can put in your custom CSS, is by going to Divi, Theme Options and then scrolling down, and actually it gives you a box to put in your custom CSS. The other place you can put it is in your style.css file, which I can access by going to appearance, clicking on editor; it's going to say, "Warning, you are editing source code here." I'm going to click understand. If you remember, we set up our child theme here so we could put in custom code customizations. We could put in some custom styles here. You can put it in an either, but in this instance, it's something to do with the theme. We might want to reuse these boxes over and over again. It's not simply a fixed or a surface level customization. It's actually building something. Again, it's a personal choice, but for me I'd want to put it in my style.css. I'm going to create a class rule here. What was it again, it was box with border, I'm going to open it up and then put it in the style. If I click update file, that will update the CSS file, and I should be able to preview changes here, which by the way, if you have a preview open and it will just refresh it. Then if I scroll down, you can see here that the style didn't apply. I'm just going to go and inspect element and 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 caching. If you're not familiar with caching, it's basically a way that the website saves a copy of itself in order for it to load faster in future. Sometimes your CSS file will cache 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 refresh your cache or particular pages. You just have to go into the dev tools. 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, and I right-click on here. I'm able to empty cache and hard reload. I'm going to click on that and hopefully our changes come across. There we go. We've got our boxes, but of course we forgot to put in the style that makes it a fixed height. I'm going to put that in here. The good thing about this CSS editor is that it gives you warnings and stuff. I've clicked update, it's refreshed. I can refresh the page again. Suddenly we have these two boxes. There you have one form of customization, building custom elements, custom modules, and then styling them either in-line or by putting it in your styles.css, so you can go to the Divi theme options. But what about if you use an element? You like it, but there's just a few things wrong with it. Maybe you didn't want this border on these blog posts. You can just as easily edit modules that are created by Divi, as well as modules created by you. We can figure out how to do this by inspecting these modules. I'm going to right-click on one of them, click inspect. That's going to take me over here to where that particular element is. Right now it's inspecting this heading. But if I go up until I find the actual column, so I have this column. I can go one step deeper and go to the article. I can scroll down until I find what's giving it that border. I can see here, there's a style here, dot et_pb_blog_grid and also et_pb_post that is giving it a border of one px solid with a color of this Grey. 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 now we take it off. Now, what we could do is affecting this straight away. We could say border none and then suddenly we don't have any borders on those blog grids. But of course, changing it here in your inspector it's just a playground it's not saving anything live to the website. What I like to do is just cancel these other styles. I don't know why this is not permanent and copy this whole section. Then what I'm going to do in the style.css go down and just get rid of all these commented out fields. This will hopefully override the style that Divi is putting in there. I'm actually more inclined to put this in the Divi Theme Options, CSS, just because it's just a modification on something that Divi's credit, but this is just a personal preference and I guess it's a good demonstration of where you can put it other than your style.css. If you put it in the Custom CSS part of your Divi Theme Options and click Save, it'll then save. I go back here and refresh the page. As you can see, there's no more borders, and if we go and look inside here, we can see that our style here. There's the one by Divi that's just inside the parent theme. But as you can see, we've made our own style where we've said border none and that overwrites this style here. This is a bit of CSS. You can definitely study more about CSS and how to overrule stuff. But essentially what I wanted to cover, here is how you would actually go about editing parts of your website. 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 customizations, whether it be to build a custom element and still use the grid system. I can just demonstrate this here. You're still using the grid system is still being responsive. It's taking advantage of Divi's grid system. Also you can affect already existing modules that Divi creates. You can override the styles that come with those modules to make them look how you want. There you go, you can see everything's still responsive. You're only just taking away that border. 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 customizations in Divi, maybe fix up some of these boxes because they don't really do anything right now. But in the next video, there's actually one layer we can go deeper and that's to effect the PHP templates and structure of our page. I will see you in the next video.
12. Customising with code - Advanced: I'm picking up this video right where we left off. I'm still in a preview, as you can see from the URL here, but I don't really care about these boxes. I'm not actually going to save changes, I'm just going to click "View 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 editor without saving your progress, that's a good thing to have. You'll see here, because we didn't change any of the structure of the page, our style still applies, but we don't have that section with the boxes anymore. In this video, I want to show you how we do some advanced customizations. What we've done in the last video is basically with the boxes, we built some HTML and with these we styled it with CSS. Actually we styled the boxes with CSS as well, and what we can do as well as put in some custom JavaScript, but what happens if we want to change the structure of a dynamic page, say a blog post or a 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. If I scroll down and go to one of our blog posts, all of these are going to be shown on the same template, I'll show you what I mean by that in just a second. Open 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, sorry, I just clicked the category, and then you've got the amount of comments. You've got the featured image, and then you've got the content. It's the exact same for this, it's all 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, essentially I wanted this featured image to show above and also maybe I wanted to customize this as well. 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 maybe putting category is or posted on, that is all a structural change in WordPress. Just to drum in the difference between what we just did in the last video and in this video, basically we can change anything to do with styling using CSS and we could add in stuff to the content with HTML. But in terms of this dynamic content that's pulled in by a template in PHP, we're actually going to have to dig into the template and modify it for that change to affect the standard blog template. The way we can do that is by digging straight into the WordPress code. I've got my themes directory here, I'll 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, the folder in which you will be editing most often and pretty much nothing else is this Themes folder 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 customizations in the one folder and reference them. Like I said, I want to put this featured image above this heading and this metadata, and the way to do that is through the single template. In WordPress, we're going to go over templating hierarchy in a future video but just for now, know that if you create a blog post or a page, it uses the single.php template. To make that modification, what I need to do is go into the parent folder and find the single.php. I'm going to copy that and then I'm going to go into my div theme and paste it. Now, just to be clear what's going on here is because I'm using a child theme, WordPress is going to look in this photo first, and it's going to look for a single.php and basically all the template files, and if they can't find it here, it's going to load it here. That's why our websites still works if we don't have all the templates in here, because it looks in here first to see if it is any customizations 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 to make customizations. I'm going to right-click on that and edit in Atom. Now, you probably won't understand everything in here and that's fine, but I'd recommend you try to familiarize yourself, learn more about the template hierarchy, learn more about the functions. This is an ongoing process and I surely don't understand absolutely everything that goes on in the template files. But I can figure it out just by 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 div functions. You can tell that div because they got et underscore pb. This is a special to div and you can match these up with what you see on the page, so you can see this div with main content. If I go back into our live website and I inspect and take a look at the HTML, I can see the div id main-content. If I go down and look at fine content area, I'm just going to copy and paste that because you can actually click into here, press "Command F" on the Mac and find content area by searching, then you can see this div here, content area. This is how I would go about getting an understanding of how that template relates to this. But it does have a lot of dynamic content, and what we're going to need to do is to figure out where the PHP is grabbing the thumbnail 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 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. Just because I've done this before and it has been a real hassle, so make sure you use FTP. I'm going to go over to here, I'm in my Appearance Editor, you can see our style.css. I'm going to go into functions.php and I'm going to put in some bad code. I'll just put in some bad code, I'll update file, and actually WordPress has got embedded 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'd get something that I like to call the white screen of death. Just to show you what that would look like, I'm just going to throw that into my functions PHP file over here, I'm going to put in some bad code and then I'm going to go swing over to the website and hit "Refresh" and suddenly the whole website is down. This is really important guys because if you make an error on your website in PHP, it'll shut down your entire website. It's important to know that when this happens, because inevitably you will make a PHP error at some point that this is going to happen, don't freak out. You can just go back into your PHP files and figure out where the error is and remove it. 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 error, it will take down your whole website. That's why if you're building a website for somebody who already has a website or you're updating your existing website, definitely either develop locally or at a different location like a staging server, which we'll go into staging servers later in this course. But I just wanted to make that really clear, if you make an error in your PHP, it can derail the whole website, that's why you need to make sure you're creating these changes or making these changes not on a live website, that you would be very upset about it going down. 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, and let's just say I did that and I put in that error. WordPress allows me to go in and edit these template files from within the dashboard. If I reload the page, I can access my website. So i might be like, " I will go in and change that code, fix my error" But if I go into WordPress admin, it's broken as well. I have done this, have made this mistake on occasion before where I've edited theme templates and it's caused a PHP error and my client's website has gone down, and luckily, it's never been on a live website. It's been on construction. But if I don't have access to FTP, that's it. I'm completely stuck. I cannot go in and edit the code. You need file level access to the code. This is very important. Then we go, I've removed the code and my websites back. If you 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. My favorite ones are Cyberduck and Filezilla, but if you want to learn more about FTP, definitely, go back and watch that. I'm moving on back to what we were talking about before. Sorry for the sidetrack but that is very important that you understand that warning. What I'm going to do is actually connect to FTP now, because I actually have the template's saved for my own website and I can actually reference that code to remember how I did it because that's a move a few things around to get it to work. 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 Filezilla. I'm going to go to my sites and connect to FTP at my own website. I'll put in my password here and what I'm going to 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.php template. I can click "View" and "Edit", and what it's going to do is download a temporary copy that I can edit and then upload back to my hosting. Got to be careful with 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 the post meta and I've put in my own post meta here. Again, I could go into 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. What I'm going to do first is move the image above and just checking what I've done here. I can reference that and go down to here. I can find where this function is, search for it. As you can see here, the thumbnail information is being generated below this post meta. What I'm going to do, just like I've done over here, I'm going to take the featured image stuff. Basically, everything except the title, so I might have to do this in two copy and pastes. I want to put it right after the post meta wrapper because here, you can see the entry title. So definitely has to be behind that. I can copy and paste it in there but I haven't actually opened my PHP tags. For those of you who don't know PHP, again, maybe, you want to go back and checkout understanding web development. But I've opened up some PHP tag, so I can put in PHP, copy that stuff in, and indent across. I'm going to go back and get the rest of the information here. Leave the title there, going to hit "Save". Then I'm going to bring up this as well, because this needs to come up. This is actually when the image gets displayed. You can see that by print thumbnail, this is going to be different, by the way, for anything you use this is code from divi right now. I am going to space that down and put that content in there. Basically, it's asking if it's a video? It'll put the video in instead of the thumbnail, and if it's a thumbnail, print the thumbnail, and if it's a gallery, print a gallery. Those are extra things that divi allows you to do. Basically, most of the time, you have a thumbnail or a featured image for your blog post. I'll 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 going to do is go down, and unfortunately, there's one line of code where divi figures out what to put in here and puts it all in there. But we can break this down into our own code, if we wanted to, and that's what I've done with my own website. I've broken this down into this little section here. I'm going to copy and paste that across and then explain it to you. But first of all, I'm going to comment out that post meta close the PHP tag, open a PHP tag and then in-between, I'll put my HTML. I'll click "Save" on that and now, when I click "Refresh" it should have replaced this post meta which was generated by the divi post meta function and put in my own code. 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, and that's all as set out by here. Just to run through it a little bit, this doesn't all automatically, but at the same time, you get exactly what divi wants. If I uncomment that, hit "Save", it should show up both of them now, so you can see side-by-side this is what divi 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 code and it's still using dynamic content. We're going to put that back to where it was. It's still using dynamic content, so instead of saying, "Give me the post meta, what you're doing is, you're 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. Then you can put in some code to find the category. This is a little bit of extra code because maybe, you don't have a category. If you don't have a category and you asked to put in a category, it'll error. 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 going to display all of them here. For categories, is a little bit more complicated. Published on is very simple, it's the date method in WordPress. So if you're ever on template, you can put the date and it'll output the date. 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 put no comments. What shows up if there's one comment? Which I've put one comment, and what shows up if there's more than one and this little percentage sign is a piece of dynamic indicator that whatever the comments number is, it will go into that little percentage sign. A little bit more complicated here, you can basically put in whatever you want here. I'm going to get rid of that, put in a random span saying, "Post is awesome", I'll save that, and now, suddenly, you've updated all your templates with the static bit of code and you can go to every post and you'll see it has this, is the same one. You'll see you have this post is awesome, so you can see that. You can throw whatever you want in there. I think it makes sense to have the date, who it's published by, and the comments number. But you can do whatever you want. That's the great thing about WordPress is, infinite level of customization, you start with a page builder to get you a page up and running with minimal code and then if you want to go in and change anything, you can do through CSS like we did on this page and HTML, or you can go in and affect the templates. Hopefully, that wasn't too advanced for you, keep in mind that, it's an ongoing thing with learning web press even I have to dig around a little bit and try some things and problem-solve to get things the way I want. But the major thing to understand here is the principal. 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 customizations done within a child theme and that you're not doing them on live site because if there's any error, it'll shut down your whole site. But as you can see if you created it correctly, then all your posts now will have the image above the heading and the metadata. Hopefully that made sense, if not, definitely, put some comments in the discussion and I will speak to you on the next video.
13. The Wordpress Template Hierarchy: As you saw in the last video, we edited a template file in WordPress, which in this case was the single.php. But if we go into our parent folder with divi in it, we can see so many different template files, footer.php, functions.php, header.php. There's a whole bunch of template files. In this video, we're going to talk about the WordPress template hierarchy. 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. If you're ever on a page or section of your website and wondering what template it is, this really helps. I'm just going to go to "Plugins", "Add new". I'm going to go search for show current template. You can click "Install now". Then once it's installed, click "Activate", and suddenly it's activated. If that's working, we should be able to go back to our site and up the top we will see the template. This template is page.php. If we go to our blog posts, we should see now single.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 is a separate template file called single project for this. This is really why that plug-in is really good because I would have thought initially all maybe this references the single, but no. There's obviously a custom template for this and you can actually see it right up here. It'll give you the relative template paths, so this is in our parent theme. You can look at all the template files that are included in that. The second tool or second resource to understand template hierarchy is, I'm just going to go to the WordPress website by searching for WordPress template hierarchy. I misspelled the spelling there, but WordPress or Google knows what I'm talking about. If we go to this article on wordpress.org about template hierarchy, I can scroll down and see the visual overview. 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 blog post and we can see single.php, but you can match this with the template hierarchy. What will happen when somebody accesses your website it'll go through the Index php, come down through singular php and hit single.php. If it goes to a page, it'll go to page.php, which we saw before when we went to the homepage. A page is page.php is the template for that. This is a little bit confusing in itself, but at least you can piece together where everything lives by 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 start at index php and look for archive.php, or look for singular, it will look for single. It doesn't necessarily have to be there. In the case of our divi theme, for example, if we go into divi theme folder and we look for archive.php, it doesn't actually exist in divi. But if we were to create it, WordPress would look for archive in the situation of an archive page. What is an archive page? It's basically, as you can see here, author.php, category.php. It's basically an index of different posts categorized by category, date 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. Maybe we don't want to edit index.php directly. Maybe we just want to affect this archive page. Here's an example of the template hierarchy working for us. I'm actually going to create an archive page right here. I'm going to go into file, new file in our code editor, which in this case is Adam and what we can do is copy the code from index. I'm going to have to go into divi, find the index.php template then now I'm going to grab all the code and copy that across to here. Then I'm going to save that as archive.php. Now you might be wondering, well, why did we duplicate something that's already there? Essentially, we might not want to edit the index.php file because that works with all of these templates. It's a parent file. We just want to affect the archive. We're creating a template that WordPress will look for the changes in there and overwrite whatever shows up in index.php. This is the same theory of child themes and parent themes. WordPress will look at one place first and if it doesn't find it, it will go to the parent. Hopefully, that 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. But yeah, if we go into this now and hit "Refresh", we can see that the template being used as archive.php and not index.php anymore. 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 customizations, we can do that in the archive.php. Maybe we want to make reference to the fact that this is an archive. Let me just dig into the front end code and see where I'd want to place this. I see this is the content area. This is the main content. Maybe I'll put it in here. I'll just put a heading. I'll say archives. I'll hit "Save" on that. I'll go back to here and hit "Refresh". 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. I'm going to remove that and put it in the container. Press "Save" on that. Now you can see on any archive page, you'll have archives. Now, this is just static content. You'd probably want to put in some dynamic content that says, "Here's all the posts from this category," and put the category name and maybe some information about the category as well. You may want to do that, but essentially, I'm just showing you here about the template hierarchy. You can figure out the template hierarchy by doing some research on wordpress.org, looking at that visual diagram you can use show current template to look at whatever thing you're on your website. Again, we don't have many pages or places to go on our website, but you can see for this where I got the page and how you would use this is, say for instance, you wanted to change this layout and you wanted the Facebook image or the image here to show up above the title. Well, you go up here and you see, single project.php. That's the template I need to modify. Again, going back to divi here, you would find that and you wouldn't edit it directly on the parent theme because remember, we are doing well and modifications on the child theme. But what you do is you just copy it, go into your child theme, paste and I'm just going to do it really quickly for you here. Basically, if you wanted to modify anything like that, suddenly title shows up before that and now that's not very practical. But you can see here, I can affect that template and that's going to apply to every project now. If I go to Google, title Google, so you can maybe more descriptive static text there would be "Previous client" then if we go back "Previous client: Google" and then that's going to shop for all your projects, "Previous client: Amazon". With this video and the video before, hopefully, I've shown you how you can go in and edit templates. If you go into anything that shows dynamic content like a blog post and you don't like how it's displayed, maybe you want to put in something that shows up on every blog post, or maybe you want to rearrange the content on a blog 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 then create your modifications there. That's how you can modify the PHP templates in WordPress. If you need more information about template hierarchy, there's plenty of information online. Definitely have a read of the wordpress.org theme handbook. I'll see you on the next video.
14. Building out your website: Now essentially we've covered all the parts of 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 build some custom elements which have since hidden. Then we dug into the templates as well. We've gone through all layers of WordPress, starting at the very top, with no code, to go into deep into the code. Right now, you could theoretically take that knowledge and run with it, build out the rest of your website, but I just thought for the sake of completeness, I'm going to run you through building out this website, and if you want to stick along, you can learn more about WordPress. The first thing I see as a problem is, we've got these menu items, and they don't actually link anywhere. That would be my first thing I would do, if we go here to the URL and we type in projects or just project, we can see an index or an archive page, referencing what we talked about in the last video of all our projects. This is just going to be a basic archive page, bringing together all our projects. I'm going to get rid of that piece of text that says archives, because it doesn't really need to be there, and doesn't really add anything, so going back to the template, gotten rid of archives. Cool, this is basically our portfolio page, we can use that, but at the same time we have to dig into the template file and fine, go a bit deeper into code to change the layout of this, and it really isn't necessary. What I'm going to do is create another page using Divi page builder, so that we can set out our projects a little bit nicer. I'm going to go to New, Page, and I'm going to call it Projects. I'm going to hit tab so that it comes out with a URL, yeah I like that URL. If you don't like the URL, for example, you can change it to whatever you want. I'm often changing URLs to be more SEO friendly, so that's just another point there. I'm going to switch over from the standard WordPress WYSIWYG editor to the Divi Builder. I'm going to put in a title here, just for width and put some text in. The text is going to say Heading 1, Previous Projects, I'm going to call this Heading, so it's easier for me to understand. Then I can add in a module underneath it that shows my portfolio. They've got a nicely formatted portfolio module here in Divi. The first thing I'm going to do is go to Design, choose Grid because for width it's too big. I only have one category at the moment, so I'm just going to hide it for now, but I'm going to keep all of that. Keep the name Portfolio, and let's just preview what we've got now. We've got our previous projects here. One other thing I want to do just to add some more content to this page, is more text to draw the person in. I'm just going to write something out here. I'm going to center line that, and I don't mind the name Text. I'm going to move that up above portfolio, then I'm going to preview that. Click on the links below to check out my previous project, there we go. I'm happy with that so I'm going to click Publish, and more on my other menu links, so I've got Portfolio, I got Services. I'm going to add a new page called Services. This is essentially how you go about building a website, you might have a design sent to you, or you might just be designing it on the fly, but this is it. You build pages, you do advanced customizations when necessary. But most of the time using Divi Builder, you can just build out most of what you need, just using this interface here. Again, I'm just going to put in a heading. I don't actually need to put in a new module for the text, I can actually just put a paragraph underneath this actual module here. Seemingly we got rid of those, stupid looking boxes before, I'm actually going to build some custom elements just to show you guys how you would go about it, in case you want to do anything custom. I'm going to get a equal three column row, and I'm going to put in my own code. I'm going to put in a div, and I'm going to call it with the class service-box. Now what the best thing to do here is to make it all good in the one module, and then you can just basically duplicate these modules out, if you're going to reuse them. I'm just going to build out something now, and I'm also going to go into my theme editor, so I can put in some CSS. You'll see how we have developed a service box. I'm going to just fast forward a little bit here and then I'll come straight back and let you know what we've done. What I've got here, it still doesn't look super beautiful, but it looks okay. I've got this box that says WordPress Web Development in it, as one of my services, I can duplicate this up, basically what I did, just got that div with the class service-box, put a h2 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. As you can see, I've got a service-box class where I define the styles, I'm giving it a border, I'm giving it a minimum height, texts and lining in the center, the background color have set to a white. Then I am using a CSS rule to effect the heading to tag within that box, giving it a margin top and giving it some padding on left and right. Then finally, to get that hover functionality, I can do that in CSS by putting, I think this might be called a pseudo class or something like that, it goes on the end the day with a colon and then hover, so then whenever I hover over it, why is it I got too many pages open? Whenever I hover over it, that background color changes. Obviously you would want to spend more time on designing something a little bit nicer, but for our purposes I'm just going to go with that. I'm going to duplicate it, change one of the services to Yii2 Framework Development. Drag it over there, duplicate again, change the heading, Save and Exit, and then move that over. Let's preview what we've got there. As you can see, the styles are applying to everything that is a service box. As long as we've got the class there, it'll apply, so we've got only the parts that we need to duplicated, and the rest of the styling and everything is done over here. Now we've got this, ideally we'd want to put some more information in there, maybe link 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 going to hit Publish. Now I have a services page, I can click View Page, Blog here, should link to the blog index. Let's just see if we have one already. No, we don't. Let's create a blog page to finish this up. I'm going to call this Blog. I'm going to use the Divi Builder once again. I'm going to put in a title, all my blog posts, going to give it a Admin Label of heading. Then we can easily add in a module here for the blog, I prefer grid, as I said before than full width, but whatever float is your boat. Going back to content, I'm just breezing through here guys. Yeah, I'm happy with all that, Save and Exit. I'm going to click Preview, all my blog posted there. See how quickly that was using dynamic content, than using the page builder. If we wanted to put in some text in between there as well we can do that just like we've done before, but for the sake of time I'm just going to hit Publish. Now we have all pages that we need to put into these menus. Now we can go back into Appearance, Menus, these are 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 URL, then it'll update. I'm going to remove all of these, and I'm going to put in projects, services, blog. You can tick them all and throw them in. I want projects first, I want services second, and I don't want it to be called projects so I can change the navigation label, and call it portfolio. Then we've got blog page here. I can add in my category there for WordPress here, so that's dynamic as well, can grab that, put it down there. Then of course I wanted as a sub menu link, so I'm going to move it over and it's going to say sub item. If I press Save Menu, you'll see the menu will update. You can see because among the blog page, Blog is highlighted. If I click on that, that will be highlighted if I go to Services, this my services page, if I go to Portfolio, they're all my projects and I can dig into them. Now we've got a granted a very basic website, but we've covered all the major principles to building it out. If you want to spend longer on this, if you've been following along and you want to 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 customizations, what I'm going to do in the next video is install some plugins, that I think are really important, and also show you plugins in action and how they actually update your WordPress site. Then in the next video after that, we'll go into a specific plugin which enables E-commerce on your website, so if you're interested in those things, definitely stick around. I will see you in the next video.
15. Installing Plugins: 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 blog 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 Devi doesn't help you with it either. 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 plugins before we dive in and install some, you can go over both the plugins, definitely and there is lots of plug-ins for people that don't want to touch code at all, that all they do is insert like a line or two of code. 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 it's just your editor and put in a line of code. It's much cleaner just to go in and edit your code than it is to install a plug-in. On the other hand, there's 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 keep you website as clean as possible, don't install plug-ins for absolutely everything, there should be a clear purpose behind a plug-in that you install. After 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. Now it isn't maybe in popular, a very popular plug-in that you can search for over here. I'm just going to check whether it's in popular. Yap, is Yoast SEO and you'll see this plug-in working for you in just a second. But basically it allows you to update your metadata for SEO on your blog posts and pages. Very powerful stuff, you don't just want to take whatever WordPress generates and use that often times. So we're going to use Yoast, after that installs click Activate and now you will see here that Yoast is installed and activated. To use Yoast, you can just go into any post or page. I'm going to go over to here where we have our post already and I'm going to 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. You can see that's how the title is going to show up on Google, that's the URL that's going to show up, and this is the text. Now, I just got a image, you've got a title and you've got a passage right there that goes straight into an introduction. This might be okay. 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, just putting a random code in here or you always want to check these things, especially if SEO is important to you. Maybe sometimes you want the title to be a little bit different on your webpage rather than on Google, maybe you can write a better headline to entice somebody looking on Google than 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. That's what you can use Yoast SEO for. All you do here is edit snippet right now, it's just pulling from the current article, but I can change this to how to install. This is funny, editing the blog post on how to install plug-ins on WordPress while we're doing a video on plug-ins in WordPress. In this situation, I don't really need to edit it, but you may want to. You can also edit a slug. I liked 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 than the first introduction of your content. 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. The same thing applies here, maybe it's pulling in code or texts that you don't really want in the preview so you can update that here. 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 Yoast evaluate wherever you are doing a good job or not. I'm just going to update it there with my new description and that is essentially the Yoast. Another plug-in I use, which is really important and this is not really going to apply on our local setup because it's not really on the internet, but there's one, sorry, I have to go to add new up here. There's one code, really simple SSL. For those of you who don't know SSL is as security certificate. If I go over here, you can see it says secure and as s after the HTTP. This is another SEO thing. There's other reasons why you'd want to have SSL, but one of the main reasons is for SEO and with my host in particular, I just need to install this plugin 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. I got here really simple SSL I can click Install Now. As you can see, once it finishes installing, you can just click Activate like we've done all along. Now all you need to do is go to Settings, SSL and you can enable it if it detects that there's SSL, we're just on my local computer, so there's no SSL and essentially this course is not on how to do SSL or Yoast, which is talking about plugins in general here. That is essentially how you can add plugins 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. In the next video we're going to go directly into that using a plugin called WooCommerce and so we are going to say, for instance, we wanted to sell something on here, maybe we even want to sell our service prepaid we can put in some e-commerce into our WordPress site by using this plugin, so I will see you in the next video.
16. Adding eCommerce with Woocommerce: In the last video we talked about plug-ins and we installed two plug-ins that I use very regularly on all my websites. 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 WooCommerce. In case you wanted to do E-commerce, I'm just going to run through installing WooCommerce now, and it'll be a good learning experience for us to see what WooCommerce 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 plugin. I'm searching WooCommerce and like we've done before, I'm just going to install now and activate. As soon as you click "Activate with WooCommerce", you'll get taken to this following wizard, which will help you configure your store and get you started quickly. You can put in where your store is based and your currency, I'm just going to do the United States $. You can tell with commerce wherever you want to sell physical or digital products, it's going to select digital products. We can keep that. I'm going to 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 WooCommerce can accept. It can accept Stripe and PayPal, 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 going to 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.com account for that, I'm just going to skip that for now. Here you go. You can ask for tips, product updates, and inspiration to your mailbox, otherwise, you are pretty much ready to go. 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 WooCommerce has done. Now on your dashboard, you should see something new in your menu. That is the WooCommerce tab and the products tab. Now, what products is, is just another post type. You'll see we have posts and pages, those are the standard post types in WordPress. Projects has been added by Divi, and now products has been added by WooCommerce. Now we can go into here, and we can create products. I'll create a first product. You can see the interface is quite similar to creating a post or a page and that's because it's using the same functionality. We're just doing another custom post type. I'm going to say, "One month of web development," and I'll say, "This is for one month full-time of 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 data and product short description, this is where it's a bit different to our other post types here. We can do a simple product that's a virtual, and we can make it usually worth 10 grand, but today it's on a special price of only five grand. Inventory. You can manage your stock and inventory here if it's not a virtual product. Even if it is a virtual product you can limit the amount that people purchase, you can link products with upsells and cross-sells. Honestly I don't have any WooCommerce stores that I manage, I actually do use WooCommerce to sell on my website. 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 product, you can really just buy it straight away. You can click "Add the cart", suddenly you have a cart now, and you can click "View". This is what's brilliant about WooCommerce. Look at all this stuff it is provided for us right away just by installing a plugin and putting in one product. That's why I think WooCommerce is really good and it's also very popular, other people like it as well. You can proceed to checkout now. You put in your billing information, and you can put in your PayPal stuff. Now of course you have to configure payment, I've gone out of the dashboard. You will want to go into WooCommerce 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 E-mail. This is probably where you would configure your PayPal. You've got all your settings here on WooCommerce. 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 really amazing that you can just add a plugin and get all of this right out of the box. 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 can go to a page that has the file that they can download, that's how I sell products on my website. Obviously if it's a physical product you have to fulfill it. But essentially, by installing this plugin, by putting in products, and by putting in payment information so that you can get paid, you essentially have a store right in your WordPress site. You can access these products by, here's the URL here and you can access an individual product. But what WooCommerce does, is put in a link here for a cart, you can also navigate directly to shop by going to your root domain slash shop, and then it's going to show up everything here. You can customize your shop of course, this is an old version. You can go back to here, and you can customize your shop and create categories here, you can create tags just like you can do with other post types in WordPress. Essentially, if you wanted to add this menu item to your WordPress menu, you can go in here, go into appearance menus, and add in shop right away. You can go in there Shop, Save Menu, refresh the page. 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 WooCommerce. We've got an archive dash product, and then if I dig into here, we've got a single dash product. This tells you if you did have to edit the template files, you could totally do that just by finding these templates. Let's just do that now just to put this into perspective. We can dig into our plugins folder here, go to WooCommerce, 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 change the single and we change the archive.php, we can go in and change the templates here. Again, using WordPress, everything is open source, we can use the UI here to do whatever we want in the WordPress dashboard but then we have full editing customization by digging into the code, and that is a little bit about WooCommerce and how you can add E-commerce to your website. I think that just about covers all the basics of developing a 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, we can migrate this across and all of those topics we're going to cover in the next 1, 2 or 3 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 are 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. I hope that you learned 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. 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 if you've already built your website on the place that you want it to appear. So that's it. You can just share it with your friends or share it with whoever. Start driving some traffic to that website. This is the fresh WordPress install we had before on a little demo domain. If you want to move over a website you developed locally or on another location on the Internet, and you want to move it over to this destination. That's what this video is going to run you through. First of all, we're going to talk about migrating site locally. The same principles can apply here to migrating aside from the staging server. Quickly, what I showed you before with the sky blue website is an example of a staging server. Basically what I did was create a sub-domain at my own domain christhedeveloper.com and I built the website there. Then once I was ready and once the client was happy with it, I moved it over to their domain. That essentially is what a staging server is. It's a place you build online and then you can move it to the final destination. Similar principles apply if you're doing this locally to the internet or your migrating from one place to the other. We'll just go through what we have here, which is our local Install. Remember back here, we have already installed a version of WordPress. What I'm going to do is just go into the file manager and just delete that. I'm going to fast forward ahead here as I go into my cPanel and actually delete those files. Going into the file manager of my cPanel accounts for this domain, I am just going to go into public HTML where the website is stored and I'm just going to remove all of this. Before you do that, the reason why I'm doing that on this particular website is because there's basically nothing on it. It's a fresh WordPress install. If you had an actual website on there, obviously don't go and delete your files. Because I have a fresh install, I'm just going to start from scratch. I'm going to click delete and delete all those files. That will not delete the WordPress database, you might want to go in and delete the WordPress database as well. I think I might go in there and delete it. You can usually do this in PHP my admin when you're storing it locally. For cPanel 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 gone. If we go back to the website, it should show up with nothing. Basically, it just shows up with a directory and there's no website there. What we can do is remember we have our website right here. This is the files of our website. Then we also have our database stored on our server locally. If we go here and see our WordPress database, which we called skillshare_wordpress. The steps for migration, and we talked about this a little bit in understanding Web Development, which was the first Skillshare class, is moving over the files, moving over the database and then making sure that those two are connected. What I'm going to do is I'm going to move the files in our Skillshare WordPress site over to our hosting. So that'll 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 uncompress it. Basically what I did was I right-clicked on that folder and clicked Compress. That's how you do it on Mac, but I'm sure it's different on Windows. You should be familiar with zipping files. I have this WordPress site. I'm going to upload that as a single file to my hosting and see it's going to be uploading. This is going to take a little bit of time. I'm going to 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. We can click here to go back to our folder. I can click on it and then click extract, I'm going to extract it. Now we just wait for it to extract. It is finished because I zipped it on a Mac OS X. I'm going to have this, but this is the photo we're looking for. We just need to grab all of this and move it to public HTML folder. I'll get rid of that. Click move, go back and we can get rid of, that one now empty. We can get rid of it and we can get rid of this. We can also get rid of the zip file because it's all on zipped. Just to show what that looks like now in our browser, we can refresh that and it's going to come up with an error saying error establishing a database connection, which of course is no surprise, we don't actually have a database on our website. The next step is to migrate over that database. What I'm going do is click Export here, choose quick, go. I've got some SQL code to put into my database, but unfortunately, I don't have a database here because we just deleted it. Also I don't have the ability to name it exactly like this one because it's forcing a prefix on the database name. It has to be called skillsharecourse_ and then something. We're going to have to modify the database on the hosting a little bit. What I'm going do is name this WordPress. It's going to be skillsharecourse_ WordPress instead of skillshare_wordpress just because of this prefix. I'm going to create the database. I'm going to go back. As you can see here somebody, not somebody, WordPress already created a username for me. I'm just going to delete this user and create a new one. I'll go into here and delete that user. So now we just have a database with no users. I'm going to add a user and I'm going to just call it skillsharecourse_admin. I'm going to generate a username sorry a password for that. I'm going to go into my one password as always grab that. Make sure you definitely record it. This is going to be my MySQL username/password. Password is there, the username is going to be skillsharecourse_admin. I got that all recorded now. I can copy and paste that and again, there we go. Now it's done. You've created, successfully created a user. Now the final step is to give access privileges to this user, to access the database that we just created. The only two options available are those that we have. We can just press add. We're going to enable all privileges and press make changes. 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 installer for 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. What we're going to have to do is put these details directly into our WP config file. 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 going to do is change the database name to Skillsharecourse_wordpress. Basically we're just copying across the details here. This is the database name, Skillharecourse_wordpress. This is our user. So we can take that username and we can put it there. The password, remember we saved in our text edit. So I'm going to copy that, put that in, and I believe we can leave these the same. I'm going to save changes. The final thing is having the data in the tables in this database because if we go to phpMyAdmin now, there will be a database here with nothing in it. What we're going to have to do here is grab this and make sure it imports into our new database. Actually I'm just going to right-click here and click "Select All". Then I'm going to press Command C to copy, and we don't need this open anymore. We need to go back to phpMyAdmin. Make sure you understand which ones phpMyAdmin locally, and which ones phpMyAdmin on your hosting. You can make sure you can see that from the URL. I don't want to confuse you. These are two different phpMyAdmins. What we can do here is we can go to SQL, assuming we've got an SQL query, and this is going to run on the database Skillsharecourse_wordpress. I'm going to paste it in and I'm going to change the detail at the top. It says database skillshare_wordpress. This is just a comment, but I'd like to change it anyway. If I press "Go", and all things are good, it should import all the data from our local WordPress database into our WordPress database that we just set up on our hosting. It might take a while just because there's a lot of rows there to insert. But hopefully it finishes loading and we can now see a big tick. I'm going to press "Structure" and you can see that we have all the tables there. If we go into, let's say Posts, we can see some posts and we can see some devi short codes. You don't need to fully understand this, but you can at least see that our database tables and now in there. If we go back to here and everything's all good, we should refresh the page and the website should work as expected. It's showing up pretty okay, except there's something quite obvious that's not working. That is, anywhere where we had these icons, they're showing up if we'd characters or just boxes. Honestly, I'm surprised that most of the website came through okay. Because we have missed one important step that comes right at the end, and that is updating our site URL. 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 our site URL in our home is still localhost:8888. But this is not relevant anymore because we're now on this domain. What I'm going to do is I'm going to copy the domain and I'm going to update the database. I'm going to go into here, press "Edit", and change that to http//www.skillsharecourse.space. I'll copy that. 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, so you're going to change moving forward. We can find another place where we've got our local URL in. Just replace up to WordPress site with our actual URL. We can go through even more rows, that is already updated too. You can see public HTML there, so that's already what it needs to be. Just going through some more rows. I've gone through all the rows and I've updated or those URLs. Now when I go back to refresh the page, let's see what happens. It's taking a little bit longer to load, probably because it's loading up that new details. 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. Remember, go into WP options after you migrate your database and change your site URL and homepage. Let's just check if the rest of the website's working fine. Yeah, services. Just like we built on our own hosting or our own locally. 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 our 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 cite URLs and homepages because they were referencing local host. That's basically the process we went through. It slightly different if you have a website already on there, remember we were starting from scratch here. This video is going a bit long, so I'm going to leave it there for deploying your website. But in the next video, I'm going to show you how to migrate changes that you've been working on, either locally or on a staging server onto your final destination. If you're interested in that, stay tuned for the next video. If not, you can skip ahead to the video after that. Definitely stay to the end. We will talk about class projects and talk about how to find help when you're struggling. So don't end your journey with this course there. Again, if you want to see how to migrate a sight 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: In the last video, we took our locally hosted website, the one right here on our local host :8888 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. That's what this video is going to be all about. Currently, that's exactly what we have. We have an existing website on there. 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've already been sending people to it and you want to make sure that you don't basically delete this website to upload your new one. What you're going to do here is migrate the site 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 Flywheel. Flywheel is a managed hosting provider. You can set up staging servers and I'm sure that this is a little bit more elegant than the solution we're doing. But with my setup, I don't have that option. I just use basic hosting and it's a good, to know how to do it anyway. Basically, it's a similar process to the one we had before. We just need to be a little bit more careful. What I'm going to do is I'm going to go in here. I'm going to go to File Manager, which I already have open and that's just going to refresh. First of all, I'm going to back up my site. That is the most important thing. I'm going to go into public HTML. Actually, I'll go back one and I will zip public HTML. Don't worry, it won't affect this folder. It'll just create a zip archive of it. I'm going to create a zip of 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. Now I have my old version of my website and I'm going to download that as a zip. I'm going to go into here and do fold a backup of old site. Actually, I won't do it in that folder because that's the one I'm going to be uploading. I'll do it out here. Backup of old site. You can put it basically wherever you want. If you wanted to backup the database, I propose that you leave the database there, but maybe you want to back it up and then delete it. You can export, go to Custom and choose Save output to a file. You can have a look at this. You can add the create database field if you want. Basically you can leave it all standard. That's no problem. What it's going to give you is an SQL file, which is a dump of what's called a dump of your, of your database data. I'm going to go back into code backup of old site and I'm going to save. Right here, if I go one step up, backup of old site, I've got a zip file of all my files from our website and I've got 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, and therefore you have it in two places and just move it basically. In our case, that database is exactly the same. But if you had a different database name, what you do is you'd go into your cPanel. You would create a new database that matches up with the database you have locally on your staging server. You would put in name, put in the username, and all the details that you have for your existing one. If you have to change this, you have to change this. 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 folder and also not delete this database either, but just have it sitting there next to another one. Just a disclaimer before we move on this course is about building WordPress sites the were 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 a perfect way, it would require a lot more setup, a lot more server configuration, a lot more than what we can do with just cPanel. The WordPress agencies I've worked for in the past they've had servers setup and we've been going into command line like this, opening up a command line tool, going in and connecting to servers via SSH and doing it that way. That is technically the right way to do it, is the cleaner way of doing it. But with cPanel, 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 cPanel, this is how I would go about it. That's a little bit of a disclaimer. Now, let's actually get onto migrating, which is going to be the same as deploying as we did in the last video. What it's going to involve is us uploading our new build in terms of the files and in terms of the database. Then we're going to quickly swap over with hopefully as minimal downtime as possible and we should be all sweet. Again, following the same process we had before, our database hasn't changed, but let's say it has. We can take all this code, Command C to copy. What we'll do is we'll create a new database here. Because this is the second install, I'm going to call it wordpress_2, or technically Skillsharecourse_wordpress_2. I'm going to click Create Database and I think I'll be able to use the same username. What I'm going to do here is add that user to our new database and then click Add. I'm going to grant all privileges. Make changes. Looks like those changes have been made. 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. I'm going to go into here and I'm going to refresh to see our new database, so I can reload the page here or there. We've got Skillshare_wordpress_2 for a fresh install. Just like before, we can run the SQL query to import all the data. I'm going to do Skillsharecourse_2 there. That's just a comment. It doesn't really matter. I just like to put that in there. I'm going to 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. It's just going to load for a bit and then hopefully we'll get a green tick. There's that green tick. If we click on structure, we've got all the tables there and it should have all of our 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 what I'm going to do is same thing as before, upload the skill share WordPress site, and I'm going to do it outside of public HTML because I don't want to affect that photo just yet. I'm going to click to upload a file. I'm going to find that zip file, and I'm going to pause the video and rejoin you once this is uploaded. We've hit 100 percent and that means the files are now uploaded, and now comes the dirty part. Basically, we're going to do a little bit of a dance to move the files and database over and hopefully result in as minimal downtime to our website as possible. I'm just going to refresh the page and make sure that we have a working website here, and what I'm going to 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 it will work straight away, hopefully for us because the database details are the same, but then we're going to switch over to the new database, and that will complete the migration. Seeming we've got public HTML already zipped over here, if you made any changes since you zipped it, you're going to want to zip it again or just copy the files directly over. Seeming we got that zip there and we've downloaded the zip to our computer as well, I'm going to actually just delete all these files, and I'm going to go back and then do this very quickly because your site is currently empty at the moment, so they'll be downtime for anyone watching it. Quickly, unzip this, double-clicking does not unzip. Click "Extract", extract into public HTML. Hopefully this doesn't take too long. Alright, 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, I just clicked view trash, going in here and pressing delete. Confirm, now let's refresh the page and see what happens. We've got an error now, error establishing database connection, which of course is the exact same error we had before, the reason why we have this error is because the details in the WP config file are configured for our local database, not our new database that's on the cloud. What we can do is we can go into a new install. 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. I'm going to put Skill Share course and then underscore two for the new database. Remember we use the same username and password for both databases so we can just copy across these ones. I'm going to save that, config file is now updated. I'm going to go back to here, refresh the page, and hopefully everything will be sweet. Same issue again. We've got the icons that are showing up properly. Let's go in and make sure our URL is correct, 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, the same process. I'm going to go here to put that in, enter, go into here. I guess it's good to get a refresher. Now if we go back to the page, refresh it, and now we have a bit of a broken website, must have been something we just did, there we go. If I go back into here, I can see I've done HTTP twice. You're probably screaming in your head watching me make that mistake, but easy to spot, at least after you've made that mistake. I've changed those rows, and then refreshing this page. We have got our website back and the icons are back. Hopefully that wasn't too much repetition in there. The main things to remember when you're migrating aside rather than just putting it on a blank 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. 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 were pointing it across and fixing any errors, but essentially, that is how you would upload from a local, build into an existing destination with a side 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 downloading the database and the files from whatever that staging server is locally, and then uploading them to the new location. 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're 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 switch out a website quickly on the client's website, as long as you back up and make sure not to delete any files, you should be pretty sweet. In the next lesson we're going to talk about how to continue your learning with WordPress, because in this 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 the customizations that you can do to 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. We're going to 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 leap frogging that into learning all you need to know about WordPress. I look forward to seeing you in the next video.
19. How to continue your learning: So in this video, I want to share with you how to continue your learning in WordPress? 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. Often times, there's a problem that you want to know how to solve and it's a good skill as a developer, 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 going to do a few examples. Obviously, Google is a great resource, but I want to show you because often times the solutions that you get back from Google are dependent on the quality of your question that you put into Google. So as an example, a common issue I have with Divi is when I put in the logo, it comes out a little bit small. So I'm going to 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 percent of the height of its parent div. So what I'm going to do here is increase that to 100, and you'll see now that the max width is a 100. The image size by default is 800 by 800. So it's allowing to go to the full width of this header. Ideally, we want some padding in here and we don't want it to be taking up the full width. So what we can try and do here is put in a custom height. We can start at a 100 and then scale down until we can start to see a change, and maybe we want it about that size, 70 pixels. But say for instance, we wanted 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 altogether. Maybe, we want it to be like that size, but obviously, we don't want it to overlap and come over the header. So we need to increase the size of the Divi header. So if you don't know how to do this, a great place to go is straight to Google. So what I'm going to do here is? Type in a query, "How to increase header size in divi." Now, it's important to note how I constructed that query because this header element is been customized by Divi and I'm using Divi theme, which is related to styles, I made sure to put in Divi in the end. I could have put in WordPress, but the theme sits as another layer on top of WordPress. So I went with in Divi and that's 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. Then I put in a good descriptor "How to increase header size." Sometimes it's a lot harder to describe, like what you're trying to do and this instant quite simple, but sometimes, you might have to try different variations of describing your issue, and that's actually the most frustrating part sometimes of being a developers, is describing something that is a little bit hard to describe. Luckily for us, increasing the header size is pretty easy, so deconstructing the search term, "How to increase header size," so I'm asking "How to increase header size? " Then I'm putting the platform or 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 Divi like so. So I'm going to copy that, and I'm going to log into my Skillshare site, and I'm going to go to "Appearance Editor" and find my "style.css style sheet." I had to copy and paste the passwords, I'm going to copy that again, scroll down, put that in and "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. To explain it a little bit, we're using a media tag here which we discussed briefly in the last Skillshare class. A media tag allows you to affect styles at only certain screen widths. So here, we are only applying these styles, if the window width of the page is 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 and click "Drag" at the same time, but if you look in the top right corner of the window there, you can see, it'll tell me what the pixel width is. So going in, we're going to find the header. So if we look here, main headers, what it's affecting. So I'm going to click on this. I'm going to scroll down and I applied styles to find the style that we put in. As often happens, it's not there. So what I'm going to do is, I'm going to refresh the cache to make sure that we're pulling in the most latest version of the style.css file. Going back to the main header, I'm going to scroll down and I can see here our media query. So its minimum height, 150. It does not apply on when we go into mobile view which happens at around 980, but after 980, you can see the header is now 150 pixels. So it's just a matter of going in here, maybe we're happy with 150 pixels. The second one is when the head becomes fixed, when you start scrolling. If you see, it's at one size and then you start scrolling, it's another size, so we can affect both for those but what I wanted to demonstrate was now that we have a larger header, we can make this a little bit bigger and maybe we don't want it 100 percent, maybe, we want it a bit bigger 75 percent. 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 playing around and then maybe the margin top will be 15. So then, I will go back into here, and I will affect the logo. I'll put in "#logo {margin top: 10px;}" and what was the other thing we changed? The max height, 90 percent. Press Update File. Also I'm going to reduce the header size because it's just a bit too tall. I'm going to go in here and reduce that to about there. You can see with this line here where the header is. I think I'm going to go with 100. I'll go back here and I'll do 100 instead of 150, and here I'll do 100 as well. Update the file, and then we'll refresh here. We need to clear cache and reload again. As you can see, we've got a bigger logo because of the styles we've applied here, which are overriding these styles and we've got a bigger header. We can probably bring in the header a little bit more as well. Maybe to about 85. Just to stop that now, click Update File, refresh. You might have to hit refresh, again. Actually the header is roughly the same, so we didn't actually change much of the header, but the point I'm making is still there. We came up with an idea of what we wanted to do, we went to Google, we typed in a good term, right here, then we were able to change the height of a divi header. Now, like I said with that query, 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. I was smart in choosing the context of divi because this is a styling element that of course divi would control. But say for instance, it's related to e-commerce and if I go into my shop here, everything is still on WordPress, but the plug-in that's managing all the e-commerce for me is of course, Woo Commerce. If I wanted to say, maybe I want to add some upsells here, what I would do is say how to add an upsell to a Woo Commerce product. Again, I've got Woo Commerce as the context and I've got the directive. If I just said how to add an upsell to a product, it's not specifying whether I'm on WordPress, what plug-in I'm using, I could be using any e-commerce platform. You always need to put it in the context of the question you're asking. I just go one step back, the next step would be to evaluate what the results that come up. This first one is by Woo Commerce themselves. Obviously, if you're running a plug-in or any type of software, the best place to look for information is there documentation. I will admit that documentation for software is often written in a really technical way that might be hard to understand. Definitely head to documentation first and if you still don't understand, then you can move into blog posts that might explain it in a more easy to understand way or more beginner friendly way. As we can see here, here is an article of how we would do it. The final one I want to show you is a really simple thing, but it goes to show the importance of context. As I said, with changing something to do with styling, styling is largely to do with your theme. In a premium theme like divi, if I wanted to change anything about the styling of this theme, I would use the context as Divi, but let's just say I wanted to change font size and I said WordPress as the context and not divi. I'm going to change font size in WordPress. You can see here, you'll get a very common link that you'll see in your WordPress research if you're asking begin to type questions is WP beginner.com. These articles on this website are good for beginners, but often they have a very simplified approach. 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, if you don't know how to do things, just use a plug-in. They encourage you to download a plug-in for every single little thing that you want to do. Maybe you wanted to change the overall font size. You may be tempted to install a whole plug-in to do this. As I mentioned before, you got to be careful with installing too many plug-ins, especially when you can do things easier without a plug-in. Always evaluate, do you really need a plug-in? But again, it's related to the context in which we asked the question. They don't know we are using divi. If we typed in how to Change Font Size and divi, we can see a Elegant Themes article up the top here. 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 width, sidebar width. You can change typography as well. You can see I can change the body text size with these dials. Let's just go in right now and just show you that live. I can click on the website name and then theme customizer. It'll open up the theme customizer 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 can change the header font and body font. You probably already know how to do this because we already covered this. But essentially, again, I'm just going back to the point of quality questions into Google and into the things you are using for research and quality solutions will come out. Sometimes it'll 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 we use the example of changing the position of the featured image like we did before. I would type in how to move featured image in Wordpress. Then you've got how to add featured images, that's not what we're after. We can keep scrolling down and check out some of these links. You'll start to see these forum discussion sometimes. As you can see here, there's a Stack Exchange link, Stack Exchange, and Stack Overflow 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. You can see here, it might not exactly be what you're after, but you can through your research, look at these different Stack Overflow, Stack Exchange problems and solutions and it can help you to form your own solution. This is going on the more complicated end, if you have a really simple question, like I showed before, how to increase the header size and footer as header size in divi and how to increase font 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 different Stack Overflow questions. These are all more written by developers. They're going to be more code solutions and it's a balance, at the end of the day. That's what this course is 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 code for. Then when we need to be that developer, when we need to dig into code, we can do that as well. Sometimes you just need to change the header size and it just requires a bit of CSS or the font size. You can just do that in options, with click and drag. Sometimes it's going to require some PHP code level changes or CSS changes.. Hopefully 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. If you need any help with figuring out how to research problems in Google or in the documentation of any of the software you're using whether it be WordPress or a particular plug-in or theme within WordPress, definitely leave your questions in the discussion below. I will see you on the next video.
20. Bonus: Membership Sites: This is a bonus lesson for anyone that's interested in building a membership site, whether now or in the future. If you want to skip ahead, we're going to wrap up the course in the next video and handover the class project to you. But if you're interested in membership sites at all, stay tuned because I'm just going to show you my own membership site, and how easy it is to set up in case you want to set up your own membership site or do that for a client. The membership site I have is at a sub-domain of one of my websites, christhefreelancer. As you can see, if you go there, it says you must login to view this content. I'm going to do that now. Now, I am a WordPress admin, so when I log in, I'm going to have full access to edit the website. I'll 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 of 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'll just be a bare WordPress admin bar up here. Then, once they go into here, they'll have the ability to change their user settings, but not change anything about the website. This is just one little membership site that I set up as a video guide to Chiang Mai, Thailand, which is something I have an audience who are interested in that. What I've done is I've just embedded videos from Vimeo. Right here, this edit button might show up to people who aren't admins, but, basically, it has different pages. If we look here, there's the page address and it's all restricted. What I can do to 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. It's saying you must login. If you're not a member, you click to sign up here. That's where you get to the sales page. Essentially, you can turn your WordPress site into a membership site easily by using a plugin. You can do this probably without a plugin. But honestly, a plugin just makes it so much easier, especially when you want to take payments. With 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 login details. Fully automated, and fully worth it if you want a membership site. In my particular situation, the plugin I use is called Restrict Content Pro. What it does is it adds in a Restrict menu here. What I can do is I can go into and see my list of members here. 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. I can see the payment and what they paid, the subscription key for PayPal. On the second menu is where I can set up the subscription levels. So you can dictate which pages are able to be accessed by which subscriber levels. Then when you enroll users, you determine which subscription level they are on. On the page side of this, what we can see is we can go to a page. Let's go into advice for learning Thai. As you see here, it's just a standard WordPress editor. 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 HTML, because this is built on a custom theme. Essentially, if I was doing this again, I would be building it with a page builder most likely. So I don't have to code every page from scratch. That is just a lesson that I've learned, it's much more efficient to build websites with the page builder. But I digressed here. What 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. I can choose who can access this content. "Everyone" will make it public. Then I can also define access level, which will allow me to set levels, up to ten or more. 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 WordPress. But I found the easiest way is just to create a subscription level and then assign it to members of a specific subscription level. Then, obviously, when I go into my settings here for Restrict Content Pro, I think in Settings, I can choose where the money actually goes to. The currency, I can go into subscription levels here and choose how much a subscription costs, and I can see how many people have subscribed to 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. That is my solution to membership sites. It's just covered that in a more theoretical basis for you. You might want to use a different membership plugin. 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 are restricted to members. That's when you can plug in a membership plugin and you can restrict content based on people's membership status. With WordPress, it's by default that WordPress has the ability to have users and users are able to login. But by having a plugin, it allows you to easily manage which pages are viewable to which subscription levels, and then also accept payments on the front end. I just wanted to cover a little bit about membership sites just in case you 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 your class project. 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 WordPress website from the perspective of a developer. Ideally, you should now have an understanding of WordPress and what it does, Divi 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, plugins, and how to deploy and migrate your WordPress site. There's obviously a ton 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 a WordPress 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 Skillshare to get updated when I release a new 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.
Christopher Dodd, Web Developer / Educator
1.062
2 Std. 22 Min.
