Transcripts
1. Welcome To The Class!: WordPress powers a huge percentage of websites available today. You've almost certainly visited a website which runs on WordPress. Some of the biggest names and brands of trusted WordPress including Disney, PlayStation, MTV, Microsoft, Sony, and so many more. The good news is, it's easy for beginners to get started with and you don't need to know any coding to build amazing websites. During this course, I will guide you through the process of building multiple WordPress websites. Including a music festival landing page, a blog, and also an e-commerce site too. Once you are familiar with WordPress from these projects, we then step things up even further and introduce some code by converting a regular website into a fully custom WordPress theme. Before rounding things off by taking a look at how we can setup a WordPress multi-site installation. Who am I? My name is Chris and I'm a web developer from the UK. For me WordPress has allowed me to create lots of amazing sites for clients or businesses or personal use from a single landing page right through to a complex e-commerce site. It does this by providing a flexible core and then pose as a user and extend it with a huge selection of plug-ins, it extended the functionality. Let's jump into learning WordPress together by building some fun and educational project. I'll see you in the first lesson.
2. Share Your Work On Skillshare!: When taking any course, it's really important to
not get in the habit of following along just for the sake of ticking
off another lecture. Take the time to
process each lesson. Review the code which you write, and think about how you might approach these
solutions yourself. With this in mind, this class is project-based and this gives you the opportunity to really make something
personal and unique. You don't need to get too lost and divert away from the class, and you can even take a step back after you've
finished the class, and come back and make some
project changes afterwards. This will really give you
a good chance to practice what you've learned
away from the class. Also remember to share your project too
here on Skillshare. Not only will I check it out, but it will also inspire
fellow students too. For more information
on the class project, head into the Project
and Resources tab, where you can not only
upload your project, but you can also see
other class projects too. With this in mind, I look
forward to seeing what you create and upload
here on Skillshare.
3. Why WordPress?: WordPress originally began life as a blogging platform and it's now grown into the most popular content management system available today, which also powers some of the world's most popular websites. WordPress is completely free to use, free to download, and it's also built by hundreds of community volunteers along with all of the great features which WordPress provides. We'll find out about these during the course. One of the things I really love about WordPress is that it has something for everybody. If you are a non-technical person or a beginner, you can buy some simple web hosting, use a one click installation, select your theme and you have your very own website or blog in under half an hour. For web designers or developers or general people who want to jump in a bit deeper, there is also many great things you can do technically to make a really powerful website. You can call your own themes and also plugins to make WordPress look and function exactly how you want it to be. WordPress is also under constant development too, its always improving, whether that's a security fix or a new feature to keep WordPress from becoming outdated. Also the creators of WordPress have made these updates really easy to apply too. You don't need to worry about complicated updates and installations. These updates are generally performed from the WordPress dashboard and often just involve the click of a button. As you can also see from the WordPress homepage which is wordpress.org, there is also many different themes you can choose. If we go into the theme section we can see there is over 7,000 different themes are present. These will allow us to build almost any type of website which we want to create. When we actually create a WordPress website, all of the content stays exactly the same, and we can then switch between different themes to give our content or our site a completely different look and feel. On the first set of WordPress some of the themes will be pre-installed, or we can search through any of these themes from wordpress.org. These are free themes to set up our projects. Along with these free themes there is also premium themes available too, which you can also buy on websites such as ThemeForest, but we'll look at this in more detail as we progress through the course. The WordPress core which we are going to download is really simple yet very powerful, and also packed with lots of features. However, if there is some functionality missing which your app or website needs, then this functionality is more than likely going to be available as a plugin. Plugins are pretty much what they sound like. They are something you can download to plugin and extend the WordPress core. They add functionality and features which are usually simple to install as clicking on a few buttons, but again we will take a look at plugins in more detail later in the course. Some of the other WordPress benefits are that it's really search engine friendly. By using WordPress, many SEO best practices are already taken care of for us behind the scenes. If you want to take it even further there is also some great plugins too, which well take a look at it in the plugins video. Lastly, WordPress has a really useful mobile app for iOS and Android which is free to download. The app allows you to write WordPress contents and also update your website on the move. It can even upload photos, manage blog posts, manage all comments, and also edit pages as you go. These are some great reasons for choosing WordPress. Of course, there are many more and I'm sure you'll find your own reasons for using WordPress as you progress through this course.
4. WordPress.org or WordPress.com?: Let's begin with WordPress.org, which is the homepage for the popular open source WordPress software. Open source means anybody can use this or contribute to it free of charge. This is the site for the official WordPress software, which we are going to be using to create our project through out this course. We download it, we can customize it and uploaded to a live server when complete. It basically gives us the total flexibility since it's completely self hosted, and also hosting costs for WordPress a relatively cheap when it first started out. At the top navigation of this page, you can see here that we have the available plugins and themes which we can then use. We'll make use of both of these throughout this course. There is also a support section where we can have full access to the WordPress documentation, which we're going to refer to quite often, and of course, everything we need from installing themes, right through to security topics. The actual software is available from clicking on this get WordPress button, and this is one of the setup options which we're going to take a look at very soon. Download this software as mentioned will give us the total flexibility and control over everything we're going to do with our WordPress site, or there is an alternative which is available from Wordpress.com. Wordpress.com is more of a service which will allow us to have a WordPress site, posted photos. It uses the same WordPress software which we just looked at, it takes away this setup and provides hosting for this software. This site was created by one of the WordPress founders. For the ease of setup does come at a cost. We don't have the flexibility we have when self-hosting. Under also by restrictions on which themes plugins we can use, depending on exactly which paid plan which you use. With this in mind, if we click on a Plans and Pricing from the navigation, there is various different price levels along with a free option, which we can see at the top, is 3ca coming option when starting out. But it does also place advertising banners on your site, which you probably don't want. We then have options from a personal side right through to an e-commerce store. We can see these options in more detail, if we scroll down to this table. As far as I mentioned, there is some restrictions, as you can see here when using Wordpress.com, and these restrictions are lifted as we go through higher pricing options. WordPress.org is the one to go for if we want full control over our site, and we are happy to do a little set up work. We're going to be choosing this path through out this course, or this site which is WordPress.com is a good option if you want everything taken care of for you. But remember there are restrictions unless you go for the more expensive plans.
5. Where To Find WordPress Themes: This course doesn't require any purchases for a theme or any additional software. Though at some point in the future, you may be using WordPress to build lots and lots of sites, whether that's for a job, or paying clients, or for businesses. For this use case, you may also want to look at some premium theme options. One of the options for this is themeforest.net. This is a marketplace for not only WordPress themes, but also money of a code, snippets, photos, and also videos too. We're going to be focusing on the WordPress themes which we can go to from this tab. From here, we can check out all of the different categories, we can also search using the search bar up at the very top and there is generally themes available for pretty much any type of WordPress site which you want to create. For example, if we want to create a wedding website, we can do a search, and the wedding search returns over a thousand different themes to choose from. As I mentioned, it's mostly paid content on this site, but this price also does often include support too. It is also many people and companies making a full-time living, creating themes and selling them on marketplaces just like this. If we go back to the popular items, we can see some of the popular themes such as the Avada theme, this is currently one of the most popular themes and it has hundreds of thousands of sales. We can take a look at the live preview and see exactly how this theme will look with various layouts, we can scroll through any of these themes and check out all the features which comes with it and generally, many of these themes have lots of different options for layouts or changing the color and they're also very flexible too so we can use it for product pages such as e-commerce sites, we can use it for blogs and also personal sites too. Along with seeing how our website will look and feel with a particular theme, it's also very important too to check out all of the information which is listed below. We want to make sure our theme is regularly updated, we want to make sure that it got good reviews and also it's compossible with our version of WordPress. When choosing a theme, it's not just about how it looks, it's also about the features and the things we can do with it too. One of the good indications of the features is the tags which is down at the bottom. These tags will often reflect exactly what features is included with a theme, such as the number of layout options, if it's going to have a two column layout, if it's going have a three column layout, if it's compatible with WooCommerce for e-commerce stores, if it's translation ready and also what customizations are available for this particular theme. We can also see exactly what browsers this is compatible with and also which versions of WordPress plug-ins are also compatible with this theme too. This particular one is also widget ready too, which means we can enable widgets which are self-contained pieces of content which we can place on our site, as well as all of the paid themes which are available on the site. As we looked at earlier, the official wordpress.org website also has a themes option at the top. There also is paid themes from this commercial section but we are only going to be focusing on the three themes which we have listed here. We can download any of these themes from the WordPress dashboard and we're going to do this when we setup our first project. Just like the themes which we just looked at, we're going to be able to click into any of these themes, we can check out a preview and this will give us an idea of how our theme will look with some blog content. Again, it's also worth checking out all the additional information such as the last time it was updated, the reviews and ratings, and also the tags too. We can see this one is accessibility ready, it's got various customizations such as the background, the colors, the logo, the header, and also the menu. It's e-commerce compatible, its translation ready, and also has various layout such as a one column and also a two column layout. These are really important things to consider for your site but don't worry just yet about selecting themes with all of these tag options because we going to discover exactly what most of these are as we progress through the course. Having all of these themes available for WordPress allows us to decouple the content which we have on our sites with the look and feel. Even if we have a blog which we call hundreds and thousands of blog posts, down the line we can also completely change the look and feel by simply switching the theme. This theme will not affect the original content and we still have all of this information still available and most of these themes are generally customizable from the WordPress dashboard as well as downloading themes like this. We can also create our own custom themes, we can either use these themes for personal use, for a paying client, or we could also upload them back to the theme store. As with everything, if you do a search online, there will be hundreds or even thousands of options which you can choose from but for now though, we're going to come back to our themes and take a look at how we can add these to our sites. First of all, we need to take a look at how to install WordPress.
6. The WordPress Web Server: If you built a website in the past using HTML and CSS, you will be used to just writing this in a HTML file, opening up this file in the browser, and everything just works. Well, this is a bit different when using WordPress because WordPress needs a web server to run. Why is this? Well, this is because WordPress is wrote in a programming language called PHP. PHP will only run on the server, it doesn't work inside the browser. For WordPress, you don't need to understand any PHP course. Good understanding of PHP is running on the server, is key to understanding how WordPress works. If you consider a sites such as Facebook or Twitter, or generally any blog sites, chat application, or even social network, they all look the same for every user, but the details on the page are different. Such as the username which will change your personal friends or connections, your blog posts, and so on. We can think of things like Facebook and Twitter as a template and any details are injected in when needed, and these all based on the logged-in user. This is an example of what PHP does, it can generate a web page which change the particular details for each user or each page. This is an example of what is called a dynamic web page. It's on a web server, where these pages are generated. On the server, it will have the template or the basic setup. Then it will place in all of the details which you pulls into the database, such as a user, or the blog posts which we just mentioned before. You don't need to fully understand all of this at the moment, but just be aware that this is the reason why we need a web server to run WordPress, rather than just open it up inside the browser like we can do with a regular HTML page. Unfortunately, we can set up a web server on our own computer to run this. Also, WordPress needs a database too, which is used to store all of the pages, the blog posts, the images, and all the information which it needs. It's this web server which we'll also talk about the database and grab all this information for us. This now leaves us with some options. If you already have purchased some web hosting in the past, which can run WordPress, you can, of course, use that for this course. Are we going to run through some of what is called local options, which is the ability to set up a web server locally on our own computer? There will be a couple of different options, so make sure you just use one, and I would recommend the next video if you will ensure. With this as a background, we now going to run through how to set a WordPress in this next video.
7. Option1: Installing With Local (recommended): Now we understand that WordPress needs a web server to actually run. In this video and also the next, we're going to look at some options to get started with creating a web server on our own computer. This video is going to focus on a service called Local by Flywheel which will allow us to create a web server on our own computer, and then we can create our WordPress websites. You only need to either follow this video or the next video, and the next video will focus on a alternative solution called MAMP. I would recommend that you follow along with this video rather than and the next one. To get started, we're going to head over to localwp.com. From here we're going to click on the download button, where we can download for both Mac, Windows and Linux. There's also a paid version for teams and agencies, but we just need the free community edition. Flywheel is going to allow us to quickly assess WordPress projects on our own computer, which is going to be really straightforward and take care of all the setup, the server, and also the database for us. Local has lots of great features. We can view our site and admin section at click of a button. We can generate a live link to view our project anywhere and also share with others too, along with a lot more advanced features such as the ability to set up WordPress multi-site and so much more. Choose your particular platform, download and then go through the installation steps. Once Local is fully installed and setup, you're taken to a screen which looks just like this. This is where we can add and also manage our Wordpress sites. I already have some sites setup just here if this is your first time, you won't see any in the sidebar. To add on new project we need to click on this green button in the left corner and then give our site a name. I'm going to give this title of Festival, and we don't need any of these advanced options for now. Continue, I going to stick with the preferred default environment. Then we need to add a username, a password, and an email. The username, let's go for the festival_admin, and this is going to be the details we need to log into the back-end of our WordPress site. We'll take a look at this in just a moment. The password, make sure you change your email if needed to. Click on Add Sites. If you're going to using a Mac you may also need to add the administrator password too. Good, once this is done our site is automatically started up. We can see this because we have the option to stop our site in the corner. If yours is green and it say start site, you will need to click on this to start up the server. We can see all the version numbers for our servers, for PHP and also the database which we're using too. We don't need to change any of this information, but it's all there if we need this in the future. One of the great things about using Local is this live link down at the bottom. We can click on Enable, and this will give us a live URL which we can share with others too. This means we could share our work with colleagues, with friends or family, and it's also useful for getting feedback on our site to run other people. We'll spend most of the time during this project in these two sections up at the top. We have a admin section which will link us to the back-end of our site. To login we need add in details which we added into Local just before. My username was the festival admin and the password. Click on Login and this will then redirect us to the WordPress dashboard. The WordPress dashboard is like the control center of our sites where we can add new features, we can update it, we can change themes, and we'll take a look at this in just a second. The other button is to open our site, and this is our actual WordPress website. If yours looks a little bit different to this don't worry, the default theme does change from time to time. This will now give us our back-end or front-end using these two terms. If we want to switch between these manually, if we are on the site just like this, we can hover over the site title and then go over to the dashboard. When inside the dashboard we can do the opposite and then head back over to visit our site. To the dashboard we'll take a closer look at all these options in the next video. For it's from here where we can update our sites if we have any themes and plug-ins or even the WordPress call. If any updates become available, we will be notified from this view. We can manage and update our posts. We can upload different assets and media such as images, videos and audio. We can work with our pages. We can edit them, we can add new, we can manage any comments on our blog posts. There is an appearance section where we can customize the look and feel of our site. We can upload different themes. We can change menus, background images, and lots more. We briefly talked about plug-ins early on and it's from this section where we can either manage our plug-ins or add new ones too. For example, if we wanted to add email to our site, this is the plugin section where we could add this. We can manage our users, such as seeing who is signed up. We can change the preferences. We can update profiles and permissions and lots more. We have a tool section where we can do things like importing and exporting data. We also have a setting section where you can fine-tune all of the options for our site. For all of these projects in this course, we will spend a lot more time in this back-end. Starting in the next video we'll take a deeper look for all of these options.
8. Option 2: Installing With MAMP: This is an option video to setup WordPress using a service called MAMP. If you successfully installed WordPress in the last video using local, you can skip this video. However, if you use month before or you just want to try something different you can follow along with this video and setup using MAMP. Let's get started by heading over to mamp.info. This is also going to create a free local development server and also take care of the database for this two, we can download a free version by clicking on the link here and then download for your operating system. I'm going to go for the mac version and give it a few minutes to download. Once this has downloaded, will need to go through the installation steps to your computer hit Continue through each one of these. May also need to add a password to to install this. MAMP also comes with a paid version called MAMP PRO. This also downloads at the same time, but you don't need to use this. We just need to stick with the free version of MAMP as we don't need any of the prophages. Once MAMP has finished installing to your machine you will be taken to a star screen which should look just like this. You may also be asked to upgrade the MySQL database. I'll go ahead and do that too. Inside here the key thing to note is the two green lights up at the top. This means that our web server and also a database is open and running. We can now download the WordPress core and add this to our MAMP folder. For me, MAMP is stored inside my applications, then we have this MAMP folder inside here. The key folder which we'll be working with is these htdocs. This is going to be the location where we add all of our WordPress projects throughout this course. To do this we need to go to WordPress.org and from the homepage will have a get WordPress button just down here. This then takes us to this download section where you can download the WordPress core. This is a zip file it shouldn't take too long to download. Once this is done, we can click on this package and open this up. This is now our WordPress project folder. We can go ahead and rename this, I'm going to call this wpfestival Then we can drag this project over to our htdocs. Let's grab this, places this inside of the htdocs, open this up and we can check this is that. The next thing we need to do is to create a database for our project. Inside of the MAMP start screen we open up the webstar page. From here we can go to PHPMYADMIN. If we click on tools, click on PHPMYADMIN where we can add a new database. You can see on the left I already have many databases already setup but I'm going to click on New and then create a new database. This can be any name of our choice. I'm what's called this, the wp-festival. Click on Create, then we don't need to create any tables or any data. Since WordPress is going to handle this photos. With this now sets up, we can go back over to MAMP, add to the start screen. Now the older versions of MAMP used to have the preferences on here, but now it's available in the main options. If you're using a Mac, you can head to the MAMP icon in the top corner and then click on the preferences link. This will end that linkage to the section where you can check out which port we using. If we click on ports we can see the default web server port is 8888. We're now going to use this to access our project in the browser. All we need to do is to click on localhost. Then 8888 hit Enter. Then we take it to the index of our htdocs. This will contain all the project which we are inside a MAMP. We want the wpfestival. Clicking on this will then start to up the WordPress installation scripts. The first step is to choose the language. I want to go for English and then continue. This page is just let us know we need to set up our database first only to have access to all of this information. Click on Let's go to the database name, which was wp-festival. The database username, which is roots and also roof for the password, working on the localhost, and then click on submit. Once connected to our database, we can then run the installation scripts. We need to first of all add the subtitle. I'm going to go for wp-festival. This can be changed later on in the WordPress dashboard. Don't worry too much about this. We then need to add a username and password to login to a WordPress back end. I want to go for festival admin, a password and then also an e-mail. I'm going to uncheck this for now since society is not live. Then click on install WordPress. We can then login using our details, which we just provided. My username was festival admin, then paste in the password. This then takes us to the WordPress dashboard where we can control our site. We'll take a look at this in more detail very soon. We can also click on this home icon just above the top. This will then switches to our WordPress site. If you've go to the stage, congratulations, WordPress is now open running using MAMP.
9. The WordPress Dashboard: We had a quick preview of the WordPress dashboard, just before when setting up our projects. This is the control center for our website where we can add new content, we can update, and also delete our content too. We can also use it to install new features such as plugins or themes. But currently I'm not going to go too deep into the WordPress dashboard because we are going to be jumping into all of these options in more depth throughout this course. To begin, we have this homepage which gives us a status update where we can see our site is in good health. This is also a section where we can customize and we can also see recent activity such as recent comments. We'll also get notified of any updates which is required for WordPress and also any plugins or themes too. The first option over on the left is our blog post. When we first set a WordPress, we see we have a hello world sample blog post. We can hover over this and we can edit this, we can remove this. We can also see how many comments are being provided for this blog post. We can add new and we can also create different categories and tags too, so we can organize our blog post into different sections. Over this we have the media library which is a collection of all of the assets which we need for our website. The media library can hold assets such as images, audio clips, video, and these are all organized into one easy-to-use library. We also have access to all of these assets when we create a new blog post and new pages, so these are easy to select. After this, we have the pages section which is laid out in a similar way to the blog post. From here we can access all of the pages on our site, we can edit them, we can remove them, and also add new with this button too. The comments section is related to our blog post. From here we can have full control over the way a user interacts with our blog. For example, we can moderate them. If anybody has offensive comments, we can review them first. Then we can also remove them or allow them to be displayed on the website. The appearance section is where we are going to be controlling the look and feel of our site. We can upload different themes, we can customize our current theme, we can organize widgets which are sections of content to display in different parts of our theme. We can create and edit different menus for different parts of our sites, and also play around with different layouts and color schemes too. The plugins section is where we are going to manage all of the extensions for our sites. This is where we add the different functionality which is not included with the WordPress core. For example, we're going to be using plugins, which are going to add e-commerce functionality, we're going to add e-mail functionality, and as a plugin for pretty much any type of feature which you want to add to your site. After this we have the user section where we can manage all of our users for our site. Currently, we just have ourself because we've only just set up this site. Each one of these users is assigned a different role. We have full access to this dashboard and we can upgrade all the content which we want to use. We have the administrator role. But there is also other roles too which are for regular users, so they can't just log in to the dashboard and change our site. But more on this later. The tool section is going to allow us to do things such as importing content and also exporting our data too. Finally, we also have lots of different settings or options for our site, and we're also going to get lot more familiar with all these options as we go through the course. So this is just a quick overview of what is included with the WordPress dashboard and exactly what we can control too. Next, we'll have a look at the files and folders which are included when we set up WordPress.
10. WordPress Files & Folders: On the first setup a WordPress project. We download the WordPress core. The WordPress core contains all of our files and folders, which's what a person needs to function correctly. Now, we don't need to know the exact roles of each one of these files and folders, since there is a lot of code inside of these. But understanding the basics will really help us. To find all of the files and folders, this will depend on whether you're using local or MAMP to set up your project. If you were using the local, you need to go to the Start screen and click on this arrow. This will then open up a window with the location of our projects. If we go into here and then inside of our app then public, this is all of the core files and folders which is needed for WordPress to function. If we use a MAMP, just like we've seen before we need go to the htdocs and then into our project folder, and then we are presented with the same files and folders, which is what is called the WordPress core. The WordPress core is not intended to be edited, so we generally leave these as they are. One of the main files which we have is the wp-config, which is a PHP file. This file is where we tell WordPress all of the database settings which we'll have for our projects. This file can be created manually, but in our case, this file was set for us when we created our site using local. Or if you chose to use MAMP for this project, this file was created when running the installation script earlier. Just below this we have the wp-content. This is probably the location where we'll spend most of our time. This is an important folder since it contains everything which we'll use for our site, and any images or videos which will be stored in the uploads folder. You may also often see a upgrade folded too, which is a temporary folder used by WordPress when updating our site. You may also see a languages folder too, if making use of other languages for your theme. If we open up the themes folder, by default, WordPress provides some default themes for us to get started with. Over on the left here, we can see the default theme, which is currently 2020, and we can change this inside the dashboard. We can also download new themes and drag them into this folder and then activate them that way too. We also have the plugins just above, and this is going to be the location where we store our plugins, either via the dashboard or by downloading them and adding them to this folder. If we want to make some modifications to our themes, we can drag our theme folder. For example, 2020. We can drag this over to a text editor and we'll do this in one of our projects later in the course, including creating our own page templates. This is a quick overview of some of the main files, and we'll jump into this folder as we need to during the course. Now, we understand a bit more about WordPress, let's move on to creating our first project.
11. Music Festival Project: What we will be building: We're going to begin with a simple project to get us used to how WordPress works including setting up pages, including themes and adding general content. Let's take a look at what we're going to build during this section. This is going to be my version of the project, which is going to be a landing page for a music festival. You can follow along and create this exact version or you can make it your own too by using a different theme or design. If you were just starting out and are brand new to WordPress, you may want to follow along with the same steps in design which I've created then possibly customize at the end when you feel more comfortable doing so. This is the project we're going to build in this section. It includes a navigation bar at the top. We're only going to create a landing page so we only have one menu link. We're also going to create our site title at the very top. We'll have some social media links on the left-hand side, which you can use to link to your profiles. We'll have a full size background image in the header section. Then scrolling down, we're going to make use of WordPress's new editor to create all of the layout and content for our homepage. We're going to create different rows and blocks of content using this editor. Learning how to add different types of content such as images, galleries, and lists. We'll also find out how to lay things out in different columns so we can structure our content exactly how we would like. We'll also discover how to use things such as the Media Library, how to include widgets for blocks of content, and also how to set a bow theme. We're going to kick things off by adding this theme in the next video.
12. Music Festival Project: Installing Themes: To begin, we're going to install a new theme for our project. I'm going to choose a free theme from wordpress.org, but this is completely up to you. I would recommend if you are a beginner, to stick with the same theme which I'm using, since if you do choose a different theme, it may come with some different options or may have a different look or feel, or it may also have some extra options too. If you are a beginner, I would recommend you stick with this same theme, or if you want to play around with things afterwards, you can take a look around and choose a different theme too. Let's jump into installing our WordPress theme. At the moment, we just have the basic default themes which we included when we set up a WordPress originally. We can see these if we go to the visit site button or I still have mine already available inside the browser. This is the default theme which is included and we can see this if we go to the dashboard, and then into the appearance and theme section. From here we currently have three different themes installed, and we're using the 2020 theme at the moment. We can also hover over any of these different themes, and also activate these too. This is how the 2020 theme currently looks, and by default, we'll first set up WordPress, all of the blogposts are displayed on the homepage. At the moment, we would just have this simple Hello World blogpost and also this sample comment just below. We also have a Sample Page too, and we can also rearrange the contents for any of these pages from the WordPress dashboard. For example, we can move all of the blogposts which are currently on our homepage to be on a dedicated blog page. To start off with this project, we're going to install our new theme. From wordpress.org, we can go into the theme section and we can include any of these available themes to make our site look as different or personal as we want. The options which you have to install a theme is we can either select any of these and click on the Download button. This file which we downloaded, we drop this into the theme section from all files or folders that we looked at previously. Alternatively, and probably a more simple way is to go back over to the dashboard, and we can click on "Add new". This project I'm going to be using a theme which is called Asura. We can do a search and the Asura theme is going to be this one which we see just here. To install, we simply click on the Install button and then once this has been downloaded, we just need to activate this as our current theme. Once it is activated, we then have the option to customize our theme. The customizer gives us the options which are on the left and we can see a live preview of any of the changes over on the right. For example, if you go into the site identity, we can change our site title and also the tagline too. We can include a logo and a site icon and we have lots of different options to change the look and feel of our theme. Just because we're using a pre-built theme, it doesn't mean we just stick with the exact look which is provided. We'll make use of many of these options as we progress through the course, and we can also now see our active theme if we reload the front end. It does currently look a little different how it looked in the pictures, but this is just because we don't have the same content set up as the demo. The job of a theme is just to provide a skin or color scheme for our content.
13. Music Festival Project: Creating Our First Page: As we discovered in the last video, WordPress by default will display our blog posts on our home page. We can change this to display these posts on any other page, but first we need to create a new page to display these on. Over to the dashboard. From here, we have the pages option over on the left. If we click on this, we can add and manage all of the pages which are on our site. I'm going to leave a place the privacy policy which is already setup, but we can remove the sample page. Let's remove this, and then we can add a new page, which is going to be our home page. The first thing we need to do when creating a new page is to add the page title. Then we can add all of our content below. We're going to cover adding our page content on the content editor in more detail in the next video. We also have some options to either publish this page immediately, or we can schedule a list for a later time. We have a permalink section where we can set the link to this page. For example, this would be our URL, and then forward slash home. If you had a blog section this will be forward slash blog and so on. We have a featured image which is the main image, which we can use when at least in this page. We can link this by clicking on this button, and this will be uploaded to our media library. Have the discussion section where we can allow comments for this page, and also any attributes which you want to add, such as the order which this page will appear. Also included with this theme, is some options where we can lay out the sidebar. We can have the sidebar on either the left or the right or no sidebar at all. These sidebar layout options have been coded by the creator of this theme. Yours may be a little different if you chose a different theme. Now with our site title in place what we need to do is to click on "Publish" and then "Confirm" and this home page is now live. Back to our front end of our site and refresh. I want us to have access to our home page, click on this. This is the permalink which we've seen before which is forward slash home, and then our page title. We don't have any page content just yet, but there is a couple of things to note. First of all, this homepage title is displaying, and it's pretty bold, so you may want to keep this in place depending on your project. But I'm going to remove this from the dashboard. Back over to your page. Then down at the bottom where our layout section is, we can go to the disable elements section. From here we can check the content title, close the section down. We now have access to an update button. Then refresh the page to confirm this has been removed. The second thing is we actually want this home page to be the home page for our site, rather than the blog post which we currently see. To change this we can go over to the dashboard, and if we click on the WordPress icon, will then take it back to the main dashboard section. In the settings section, we can go into reading. From here we can change what the home page will display. Currently, this is set to display the latest blog posts, but we're going to change this to be a static page, where we can select our new home page. Click on "Save". Now if we reload the project, we now see our empty home page. If we had a dedicated blog page, we could also set this too but we're going to look at this in a future video. Just before we move on to adding more content, we can also set up the site title, and also the tagline for this project. As to this back over in the customizer, which is available under the appearance section. We've already looked at how we can change the site title and also the tagline using this site identity section. The tagline doesn't matter at the moment because we've already got this hidden, but if we wanted to we could also add a logo to the header. But I'm going to leave this and add this directly to our page. We can also set a site icon which will appear in the browser tab. We want to do both of these in the next video. Back to the main menu. We'll use a lot more of these options throughout the course. But next, we can also make use of the social media links, which have been provided with this theme. From this section, we can add the links to all of our social media profiles. Just as an example, I'm going to add my Twitter URL. If we now publish this, as tests are, we can close down the customizer and refresh the browser. Click on the Twitter icon, and this will only take us directly to our social media link. With this first page now setup, let's move on into the media library where we can add some images to our project.
14. Music Festival Project: The Media Library: Sooner or later you will have the need to upload different types of media, such as images, your project. WordPress provides us with a really simple and easy to use solution, which is the Media Library. The Media Library is a central location where we can place all of our assets, such as images, video clips, and audio, or even files too. It then gives us access to this media library when we create things such as new blog posts or new pages. Let's take a look at how we can use this now. From the dashboard, we have this media library option from the sidebar. If we click on this, we can see any of the existing assets which we have inside of our project. This media library is not just the images, but also other types of media such as videos, documents, and audio. You can use these same images as me for this project which are available as a download, or you can also select your own if you prefer. From this view, we can either click on the Add New button where we can drag and drop any [inaudible] files, or we can select files from our machine. Over on the left, I have a folder which has all the images for this project. We can either drag over each one of these individually or instead, we can simply drag over the full folder. Once these have been imported, we can click on any of these individually. It's also recommended if you are pushing this site to production to also fill in the additional details, especially the alt text. We can also edit the title, the caption, the description, alongside the file URL, which we can link to in any web blog posts or pages. Since this is a demo project, I'm going to leave all of the additional image information empty, but do be sure to fill in this additional information if you are using a live site, which will help with search engines and accessibility. Now, these images are included in our media library, we can now access them in our pages or blog posts or our pages if we go into our home section, click on "Edit". We can directly add images into our page by adding a image block, and we'll take a look at how to do this in the next video. Now, although we're just going to go into the document section and then sets our featured image. I'm going to select this one and then set this as our featured image. A featured image is an image which represents our blog post or our page. The page is featured image can be displayed in a number of locations. In our case, the themes author, you set this to be inside the header. Now if we update this and refresh our site, we now see that this has been placed in the header. We can see here we have some white space over on the right-hand side. This is because for this course project, we keep the image file sizes down. I've not included any huge images. We'll have a few different ways we can fix this. We can either upload a larger image or if we wanted to, we could also adjust the CSS. We can add our own custom CSS by going over to the Dashboard, down to the customizer, then we have a Additional CSS section. We can target our HTML image, which is "img" Then inside of the curly braces, we can set the width of the image to be 100 percent. Refresh our site, and now our image has been stretched to the full width of the browser. This is the featured image for our page, but if we were to add a featured image to a blog post, these often displayed alongside each blog post on the blog page listing. Also as a side note, these featured images used to be called post thumbnails. These were in early versions of WordPress, so you may still see some references to this in the documentation or also some guides. Back over to the customizer, I'm also going to set the site icon. Back into the main menu and from the Site Identity, we can select the site icon. We want to go for the same image, select this, then we can also crop this to be a smaller size. I'm going to go for the image, the hands, crop this, publish our changes. We can now see the site icon inside the browser tab has been updated with our new cropped image.
15. Music Festival Project: The Gutenberg Editor: In WordPress version 5, they released a whole new revamped editor for editing our blog posts and pages. This was called Gutenberg. This allows us to move away from a sort editor approach and replace our content using blocks. We're now going to take a look at the Gutenberg website and take a quick overview of how these blocks work. I'm currently on wordpress.org, which has this Gutenberg section. This is going to give us an overview of some of the blocks which are available to create our blog posts and our pages. Now we don't need to head over to this page, but this is going to give you an idea of exactly what is available. We have some basic text blocks, we have images, we have buttons, and also ones to help out with layout such as columns. We can edit them, we can rearrange them, and in some cases we can also nest them inside of each other too. If we go back over to the Dashboard, we can make use of these inside of our pages. Currently our homepage is empty, so we're going to go over to this, and we'll go into the edit section, where we can make use of some of these blocks. To add a block we can simply start to type inside here. This will give us a simple text block or we can click on the plus icon in the top left. We can scroll through all the different types of blocks and sections which are available. We've got pretty much any type of content which is going to be required for building the page. We have tables, we have images, we have galleries, we have video sections, we have this design section where we can lit up our page into different sections and columns. We can break up our pages. We edit separators, we have all of these pre-built widgets which will allow us to add calendars and links to our latest blog post. We've social media links, and also different plugins can add different blocks in here too, such as WooCommerce, which will allow us to add some e-commerce functionality into our pages. To begin, I'm going to add a heading into our page, which is going to be a level 2 heading. We click on this, make sure the H2 is selected. Then we can simply add the text which we want as our page heading. Since this is a festival, I'm going to say a full weekend of live music and entertainment. All we need to do is click off this and now our heading is in place. Since this is a festival and it's based over the weekend, the next block I'm going to create is going to be a two column layout. The left column is going to be for the Saturday, and the right column is going to be for the events which is happening on the Sunday. Go back to our plus icon, and inside here, if we scroll down to the design section, we can click on "Columns" We're going to go for a 50/50 two column layout. First of all, the left column is going to be for the Saturday. I'm going to nest a new block inside which is going to be a heading. This time we'll make this our level 3 heading so it's a little bit smaller, and this is for our Saturday. We can also format this section too. I'm going to align the text into the center. I'm going to also go to the color settings and adjust this too. I'm going to go for the green color for this section. Then with this selected, we can click on the plus icon or just below. This will add a new block directly below our level 3 heading. This is going to be a list which is going to list out all of the events or all of the information about this Saturday. We're going to say eight live bands. Then if we hit "Enter" we can keep going with our list. We'll say 20 singers, two DJ's, eight food and drink stalls, four stages and three arenas. Then finally, free overnight camping with tickets. Once we're done, we can just come out of this, and let's remove the last bullet point. Then this is the Saturday section all complete. Now over on the right, we can create the Sunday section, beginning again with a level 3 heading, which is going to have the text of Sunday over this, and we're going to then align this into the center. Then match the color from the left. Then if we click on the plus icon, we can then add our list just below. This Sunday is going to have 10 live bands, 18 singers, three DJs, eight food and drinks stalls, same four stages, and three arenas. Finally the closing party. At any point we can click on "Update" and we can checkout how this is looking. We go and visit our front page. Go down. We see our heading and also the two lists on the left and right. You maybe also want to center this level 2 heading, so let's go up to this. If we hover over, we can align this text into the center. Update this. Next we're going to introduce a media and text block. If we click on the plus icon, we can actually do a search for this or say Media and Text. Then on the left-hand side we can add an image or a video. If we go over to the Media Library, we can select any of these pre-uploaded images. I want to select the image of the guitar, and then say early bird tickets now available. Between each one of these blocks, I'm also going to add a separator. If we click on the plus icon, we can use the search for a separator. Then we can click on the up icon to rearrange this and place this above our media and text. We'll do the same just below, we'll also add a separator. This time we'll keep this below our section. Even though this is a media and a text section we're not just restricted to adding text into this section. If we hit "Enter" we can then click on the plus icon, and we can also add a button inside here. This button is going to allow us to link to the tickets which we're currently offering, so we'll say by now. To give this some styling, I'm also going to use the same green color that we used before. Let's update this and see how this is looking on the front-end. The next thing we're going to move down to is an image gallery from last year's event. At the next section we're going to add a level 2 heading, which is going to have the text of last year's event. We can also place this into the center. Then just below this click on the plus icon and we can add an image gallery. Again, we can upload fresh images or we can use the Media Library to reuse the existing images. Let's select any four of these, and we can select multiple images at the same time. Click on "Create a new gallery" and insert. Clicking on any of these images will allow us to click on the left and right buttons so we can rearrange the order of these images. After this, we'll add our separator, keep it consistent. The last section is going to be for the tickets information. Let's give this a heading of ticket info. We'll also align this into the center. The final block which we're going to use at the very bottom is going to be for a three column layout. I'll select the columns. Inside here we can go for three equal columns. This is going to be laid out pretty much like a table for all of our ticket prices. We're going to have a pre-sale section, an early bird section, and then the standard ticket rates. We could also add this table with a table block which is available. But I'm going to create my own using three columns, though we don't have the borders around each section. In the same way as we did with the two column section just above, inside of each one of our columns, we can add new blocks. These are just going to be text sections. Click on the "Paragraph" for each one of these pieces of text. The first one is pre-sale. Since this is a header, we'll make this bold. Make sure it's all selected, and then click on "Bold" Also we'll put this into the center. It can be a little bit tricky to click on the plus icon on the correct point. If we just come off this, the next plus icon we'll create this section below this whole three-column layout. Instead with our text selected, if we hit "Enter" we then have the option to add a new line of text. We'll say all gone. Enter this. Since this is a sold out section, we'll change the text color to be red. Click inside of our text section and then hit "Enter" The next one is going to be for the price. Since this is a sold out section we'll highlight our text. Then we'll add a strikethrough to show this is being sold out. Place this into the center. Our first column is now done. Into the middle section this is going to be for the early bird section. Place this into the center and also make this bold. Hit "Enter" This is going to be on sale now. This is the active section, so instead of having this as red, we're going to highlight this as the green color. Once again hit "Enter" and we can add a price into this for 35. After the early bird section, the final one is going to be for the standard rate. Select all, I'll make this bold, place into the center. The second line is going to be after 20th of August. Place into the center. Then finally the price for the standard section of 49. Place this into the center, and our section is now done. Update this. There's our image gallery and our ticket information down at the bottom.
16. Music Festival Project: Widgets: The theme which I have chosen, along with many others, supports add-in widgets. A widget is a small feature or a small piece of content which we can place into our theme. Now, we can't just go ahead and place these widgets into any area which we would like. These widget areas where we can drop these into has been preset by the themes offer. Let's take a look at how we can work with widgets with our current theme. If we go back over to our homepage and into the edit section, right down at the very bottom below all of our blocks with the under the layout section, we have these footer widgets. The author of this theme has allowed us to assess how many areas we want to customize inside the footer. The default value is free, meaning the footer is split into three sections where we can add our content blocks. Also, remember from just above this, we have this sidebar section, where we can lay out our content alongside a sidebar. Well, both the sidebars section and also the footer section and both exact widget. To access our widgets, we go back to the main dashboard and then into the appearance section where we have a dedicated widgets menu. This page has been split into two sections, where on the left we have the available widgets which we can add to our project such as calendars, menus, search boxes, and also things related to our blog, so just comments and recent posts. Then on the right, we have all of the available theme areas where we can add these widgets too, all these sections can be customized, and I'm now going to add some widgets into the footer. Footer Widget 1 is the first position inside of our footer. This is going to be placed on the left-hand side. This first widget is going to be a simple text blocks so you can drag over the text widgets, the title of Go VIP, and then some text in the block below of upgrade to VIP, and enjoy your weekend even more. The text editor is pretty simple, I'm going to add a bulleted list just below. On the first line is going to be exclusive VIP only bars, the next is going to be for exclusive toilet facilities, and the final one is going to be the camping area close to main main stages. Now, we're going to go over to the footer area 2. This will be the middle section of our free. Inside here, we're going to create a link to our latest blog posts. To do this, we have a recent post widget which we can drag over. If we wanted to, we could also add a multiple widgets into any one of these sections. We're not restricted to just one. The title of keep up to date with our blog, and then we can set how many of the recent posts we want to show. Our site, currently, has the single blog post which was created when we installed WordPress. Well, over though we can restrict this to be five and we can also display the post date one too like this and save our widget. The third one is going to be a audio clip from last year's events. To do this, I have a audio clip just saved on my desktop. Now I've not included this audio file with the cost, since this was a licensed piece of audio. But you can use an audio clip of your own or search online and then include this if you want to. This is going to go into Footer Widget 3. Drag over the audio section, add a title of, hear a sample from last year's events.' We can then access the media library where we can drag over our audio clip at this and then save our widget. Let us go now and check out our footer area on the front end. Go down to the bottom and here is our free sections which we just recreated. We have our text widgets, have the blog section, and we can click on any of these links. We only have this one sample hello world blog post. But remember this will show a maximum of five. Then in the third section of our footer, we have this audio clip, which is a fully working audio player. We can play, we can pause, we can skip through different parts of our track, and we can also control the audio volume too. This is now our first project now completed. We have a nice project in a very short time. This webpage is also responsive too by default. If we shrink this down to a smaller size, it will adjust the layout and also the scaling to suit this device. The next project we're going to go a little deeper into WordPress, where we're going to build our own personal blog and we'll also learn about new things such as now menus, users, comments, and so much more.
17. What we will be building: For this section, we're going to be building a brand new project. As you can see, this is a web development blog, and this will teach us some different techniques. We use some different options from the previous sections. We're going to be using a completely different theme. We'll be making use of lots of different widgets, we'll be adding a sliding carousel, just like we see here, and this will link to different pages. These pages are also available from different sections below. We have some widget areas. We're going to be constructing this page using some template which should be provided with this theme. We have some featured areas which will focus on certain sections of our site, and these will all link to different pages. We have some banners, we have some testimonials, we have some case studies, we have a focus area on a particular section. Then we've got a footer down at the very bottom. This footer will also link to all pages, we have a calendar which will link to previous blog posts, we'll integrate social media icons, and also link to recent comments too. The social media icons will also be placed in different locations. We can see them hovering over the top right of our site, and these are fully functional. We'll look at how to move our blog posts on to different pages, we'll look at how to change the layout and style in, and make heavy use of the customizer to change the look and feel of our site. For any one of these blog posts, we'll also be able to click through to the full version where we'll also see a sidebar over on the right, and we can also leave comments for each user. As well as this, we're going to have different pages such as the About Us, which we can click on and be taken through to this page. We'll also have a Contact Us page too. This is a fully functional Contact Us form, and we'll also take a look at how to customize this and also add and remove different fields. This project is heavily based around adding and updating blog posts, how to include media to make our post look really good. We'll also take a focus on how we can work with different users, different permission levels, and also what kind of access each user has to our site. We'll work with navigation menus, the customizer page templates, adding a slider, working with plugins, and so much more. By the end of this project, you'll have a really good idea of how to customize your site even when using a pre-existing theme. To round things off, we'll also take a look at how we can improve our site search engine optimization, and also how to perform regular backups, make sure we don't lose all of our valuable data. I hope you are excited about this project, and we'll begin in the next video by setting up this project.
18. WordPress Blog: Project Setup: Let's get going with our next project which is going to be a WordPress blog. Now, a blog was traditionally what WordPress was well known for in the early days, though it has grown and expanded to be able to build any type of website which you want to create. To get started, I'm going to begin with local to create the sites. Below we'd just like in the set of videos for the last project, it can also choose [inaudible] if you prefer to. Once Local is open, if you do already have a existing website open, you may need to click on the "Stop Site" button in the top corner, although I don't have any projects currently running, though we can click on the green plus icon to begin with a new project. As ever, let's give this a site name, and let's call my new webdev-blog. We don't need any of these advanced options, so we can continue on with the preferred setup 2. Next the login details for the admin. First of all, the username. We want to go for blog admin, a password, and I hope yours is stronger than mine, and also a email address too. We can add the sites and just give us a few moments to setup. Just like with the last project, if you're using local, you may also need to add in the administrative password if you're using a Mac. Okay, good. Mine is all now setup. I'm going to log into the dashboard with the details which you just provided. It was blog-admin and also a password too. We all signed in and we can open up the front-end of our sites. I'm going to see what WordPress looks like with the default theme. Back over to the dashboard, the only change we're going to making in this video is to introduce our new theme. To do this, we go down to the appearance on into the theme section, and we can add a new theme with this button. Now, just like with any project inside of this course, you can choose any theme which you like for your project. However though, if you are a beginner, I would recommend you stick with the same themes which I am using. You saw things like the same options that are available so you don't get too confused. The one I'm going to use is going to be spacious. I'll type this in and we can search for this. This is the theme just here. You can preview if you would like to see how this would look, but I'm going to click on the "Install" button and then activate this once ready. With this now as our active theme, we can go back over to the front end. If we reload the page, you will now see a different setup for all projects. It has the exact same content. We have the Hello world example blogpost, we have some sample comments, and also a sample page about the top 2, but this is just being covered up with a completely different theme. It's this theme which we are going to work with in the rest of this project. Starting in the next video, we're going to pull in some sample data so we can see exactly how this theme would look with a lot more content.
19. WordPress Blog: Importing Sample Data: Welcome back. Now we have our new theme installed for our project. We're now going to see what it looks like with some content. At the moment, we just have some sample data, the blogpost, the comment, and also the sample page too. One way of adding content is to write lots of different blogposts, to add lots of different pages, and generally create lots of content. As we progress through this project, we will be adding a lot of our own content. But for now we are going to put in at some sample data, to check out this theme with more content. The way to do this is to head over to the WordPress website and download the Theme Unit Test data. This is the same test data which is used by the WordPress team to review any newly uploaded themes. The whole point of this is to make sure you have all angles covered. For example, if we create a new theme of our own and we want to upload it to WordPress.org, if we've not fully tested it ourselves with lots of data, we may find that the layout looks a little bit strange when we have a certain type of image, a certain number of blogposts. By populating this with all this data, we can be sure our theme looks good for all situations. But in our case, we're just going to be downloading this to give us a head start with our new project. The way to install this is to go down to the Setup section and we can download a copy from this link. I'm going to right-click this and then Save Link as and then save this to the desktop. To import this, we go back over to the WordPress dashboard and then go down to the tool section, and inside here we have this importer. There is already various importers or setup to just if we want to import data from a blogger or a RSS feed. But the one we need is this WordPress importer down at the bottom pulling our data from an export file. Click on Install now, set this up. Then run our importer, select our file and mine is saved onto the desktop, and this is the XML file just here. Open this up, click on Upload. Just before all of this information is downloaded, we can also assign various authors to these new blogposts and these pages which are being created. We could have create a new username, or we can select any one which you already have set up, and in our case, we only have this blog admin. We can assign this if we want to. However, though, I'm just going to leave this empty, or I'm going to check the import attachments section. This will download things which such as the images, which we're going to need for our project. Click on Submit and give this some few moments to download. Great. Once it has finished, we can on go to the front end of our site, hit Refresh. All of this sample data has now been imported. We can see all of our pages at the very top, we also have some drop-down menus. We have all of our blogposts. If we scroll down, we can see some of the media which has been downloaded, we have various images. These have various dates, they have various offers, also some of these will have comments and also various tags and categories. You see the comments over on the right, we can click into these. This now leaves us with a some of blogpost data to work with in our project. If you did have any issues at all downloading this data, don't worry, this is just some sample data to work with. Next we're going to move on to the next video where we're going to see how we can add our own blogposts and also update any existing ones too.
20. WordPress Blog: Adding And Updating Posts: In the previous video, we added lots of sample content, and in particular, we now see lots of blog posts on our homepage. In this video, we're going to add our own blog post and also take a look at how we can edit existing ones too. As ever, the way to do this is to head over to the dashboard. Then we go to this Posts section just here. The layout today is similar to the pages, one which we looked at in the last video. We can go over this and we click on all of our posts. We can directly add a new one and we can also skip to any categories and tags too. Let's go into the All Posts and we can see all of the ones which have been created with our sample data. We also have this Hello world! one which we set up when we first setup our Wordpress installation. We can see the author of any of these, this Theme Buster one and the Theme Reviewer is sample data. With any blog post which we add ourselves, we'll have our current logged in author. We can see which categories this has been assigned to and also any tags which have been added to. After this, we can see the comments which are being created. This particular one has a single comment which has been assigned to this blog post. If you wanted to, we could click on this. You will be taken directly to these comments, where we can approve this, we can reply, we can edit it, and we can also remove any inappropriate comments too. Click on the back button to be taken back to All Posts. The last section is the date which this was published. When we create a new blog post, we can either publish this immediately or we can schedule these for a future time. If you hover over any of these blog posts, we can also edit them. We can also remove them. For now, let's click on the "Add New" button at the top and create our own blog post. When adding a new blog post, this is also going to take advantage of the block-based Gutenberg editor, just like we looked at when we created our pages in the previous project. At the top, we add a blog post title. I just want to go for My First Post. Then below this, we can add various blocks of contents such as images, text, and anything else, which we've seen in the previous videos. I'm just going to add some sample text and the way I'm going to do this is by doing a search for lorem ipsum. This will take us to lipsum.com, which is just a simple site for generating some sample data. What we need to do is to scroll down and we can generate a certain number of paragraphs of words, five paragraphs is fine, click on "Generate". Then this will give us our five paragraphs, which we can now copy and paste into our project, paste this in. We now have five paragraphs of data. We can hover over any of these sections and also see a menu pop-up. We can do things like rearranging the order. We can make the text bold, italic. We can create links by selecting any parts of this text and then a URL which you want to link to. We can also set things like the alignment. We also have various options with this drop-down over on the right. Also with this selected text, we have five options over in the sidebar. We can change the default font size. We can change the color settings. If you want the very first letter to be larger, we can also select this too, and if we click on the Post button at the very top, this will now give you some general settings for our blog post. First of all, we have the visibility and we can select this to be public so anybody can read our post. We can make this only available to site admins and editors. This is all based on the particular roles which we give the users. We'll have a dedicated video on this very soon. If we have some sensitive information, we can also password protect our blog post too. We then have the date, we can publish this immediately, or we can schedule this for any future date. Then a lot of these similar options which we have seen in the previous videos, where we created at different pages. We have the permalink, which is a direct link to this post. We can assign the various categories or tags. We can either select any existing categories or add a new one too. Same for the tags. We have a featured image which you can also add. This is a image which will appear next to our blog post, any blog page list in. The excerpt, this is a preview or a shortened version of our blog post. This is what we see if we go to the front end of our site. This is all of the shortened versions which you see here. Since we don't want to show the full blog post on this listing because this page will be really, really long. If we don't add any excerpt into here, WordPress will automatically take the first sections of our blog post. After this, we can also set if discussions or comments are allowed for this post. This particular theme also allows us to select a different layout. We can add sidebars to the left and right. We can remove the sidebar and have a full-size content. I'm just going to leave this as the default. Up to the top, let's publish this so we can see this on our site. Confirm. Over to the front end and refresh the browser. You see My First Post is now appearing. Since this one is the most recent blog post, you may expect this to appear right at the very top, and this will often be the case, but however, when importing all the sample data, one of these posts has been set to be sticky. If we click into this, we then take into the full version of our post and go to "Edit Post". Then over in the settings on the right, we can see that this has been stuck to the top of the page. We can uncheck this, update our post, and back over to our site. This now leads our first blog post right at the very top. Into here we can see our custom editor and we can see the different colors. We can see the larger first letter and also we can do pretty much anything we wanted to with all of our content blocks. Also, if our post is becoming really long, we can also insert a page break. Click on the Plus icon. Search for the page break. This will now split up our content into two pages. We can add as many of these page breaks as we would like. I'm just going to keep that one for now. Update this post. Now if we refresh our site, we see the bottom half of our content has now been removed. We can also switch between our pages at the bottom. This is how we can add new blog post and also edit existing posts. If you want to, you can go ahead and add as many different posts as you would like or even update any of the existing ones too. One way of really bringing our blog post to life is by adding different media such as images. This is what we're now going to move onto in the upcoming videos.
21. WordPress Blog: Where To Find Great Photos For Your Blog Posts: Welcome back. The last thing you want to do is spend lots and lots of time on writing great blog posts. If you can't find any great images or media to go with it. This video is all about showing you a couple of resources which can help you find some high-quality images. Also, illustrations, vector graphics, and videos. These can all be included in your websites or your blog posts. The first resource is a website called Pixabay, and that's our pixabay.com. It's got thousands of free stock photos, vectors, and also videos. We can have a search using the search box at the top there, or if you scroll down a little further, there's tabs, wait, illustrations, vector graphics, and also videos. One of the great things about Pixabay is as you can see, all videos and images are released free of copyrights under the Creative Commons. That basically means that you are free to download, free to change, free to distribute the images, and you don't need to pay any royalties to the office and also attribution is not required. That basically means that sometimes stock photography is free to download and free to use but sometimes you need to provide a link back to the website which you downloaded it from or a link to the offer in return for the image to be provided free of charge. But that's not required on Pixabay. If you want to find out a little bit more about the usage rights, just click on the "Learn More" button, and there's a list of frequently asked questions. Once you're on the website and you find a image which you like, just simply click on the image and you can download the image in various sizes. You do need to be logged in to download the larger versions, but the images are still free to download. There's also a confirmation that the image is free for commercial use. There's also no attribution required to Pixabay or to the author. Then the next website I'm going to look at is a website called Unsplash.com. Unsplash.com is also a free resource for stock photos. If you click on the "do whatever you want" link, you can get some more information about the license. Just like on Pixabay, all photos published on Unsplash are licensed under the Creative Commons Zero. We can copy, modify, distribute, and use the photos for free, and that also includes commercial use. We also don't need permission from the photographer or from Unsplash. We also don't need to provide attribution if we don't want to. Just go back to the homepage. It's really simple to search for photos, and also we can browse by what's new and also various collections. There's also a option to subscribe and get 10 new photos every 10 days. The next resource is a company called Shutterstock. This is available from Shutterstock.com. These are probably the largest of them all. There's a image, a video clip of pretty much anything you can imagine. However, the website is not free to use. There's various different pricing plans which you can pick, but you can find almost anything you're looking for. Let's look for tigers. It take me to the search which has lots of pictures of tigers, both taken by photographers, and also images taken by illustrators. If you scroll down to the bottom, you can see that the search alone has 1,147 different pages. Also, this week alone has been 924,000 new stock images just added this week. That gives you an idea of the size of Shutterstock. The next resource which is also free to use is the Wikimedia Commons website. This is a database of 31 million freely reusable media files which anyone can contribute to. These are arranged into images, sounds, and also videos. These are all licensed under the Creative Commons. Again, these are all free to download. But just do check each individual image. Just check the licensing agreements and also if there's any attribution required. Lastly, if you just wants to do a Google search. Let's look for the tigers again, and then go to images. A useful tool we can use is the Search Tools. We click on "Search Tools" and then "Usage Rights". We can then filter down the images by the license type. I'm just going to search for tigers labeled for reuse with modification. Then these are filtered down to the ones we can modify. But again, do click on the individual image and go to the website. Just double-check that the image is free to download and whether or not any attribution is required. Of course, you can find many more free and paid stock photography websites with a quick Google search, but these are some great sites to get you started.
22. WordPress Blog: Including Media: So far we've created our own blog post with some simple text and we can really bring our blog post to life by adding the various pieces of media such as images, video clips, and also audio too. Now, to do this, we're going to first begin by adding a featured image. We've already looked at adding featured images in the first project, where we added them to our pages. With this project when adding them to our blog post, in this theme, the featured image will display alongside our blog post except just inside of this blog post listing. If we scroll down to our sample blog posts, we can see the featured image just here. Let's add these if we go into our blog post or can also directly accesses from our dashboard too, we can also go into the edit post link. Over on the right, we have the featured image section from the menu where we can set this for our blog post. You can either select your own image to upload or directly access the Media Library. All of these images have been provided when we downloaded the sample data. So we have some images to work with for this project. Select any of these and conveniently we also have things like the alt text already filled in for us. We can just set this as our image, Update, then back over to our project, visit site. We now have an image for our blog post. Now, this is a great way of adding an image when we display a list of all our blog posts like this. But what about if we click on this to see the full blog post? We want to also sometimes add images in between all this blog post content too. Now, to do this, I'm actually going to go back over to the Dashboard View, and let's just refresh this so we have the updated version. Images can also be added as a block. We can hover over the area where we want to add a new block. Click on "Add". This image block is currently at the very top or we can also search. Click on this. Then we can also upload a new image or select one from the Media Library. Just like before, we've taken it to all of our images which we currently have. We can select any of these, update our post, and also to the front end of our site, we can refresh. We now see our image has been inserted. As with most of these content blocks, we can also click on these or hover over and we can see eight options menu. We have lots of different options such as cropping the image, we can link to different URLs. We can also rearrange our content to be above or below different blocks and also over on the right, we have some options too. We can play around with the style of our image by rounding the corners, we can change the alt texts, we can change the size, and as well as I adding a single image like this. We can also upload multiple images in the form of a gallery. A gallery is also a content block too and we just need to select a location where we want this, do a search for the gallery. Then from here, we have the familiar options of uploading new images or also accessing the Media Library. Once we stick with the Media Library, we can select multiple images to display inside this gallery and choose any of these. We want to select these five. Click on "Create." Just before we insert these into our gallery, we can also drag and drop these images to rearrange. Once we're happy, insert these. These gallery images can also be linked to URLs too, and we can also change the number of columns which you want. This is really flexible to use. Update this and over to the website and refresh our blog post. First, we see our image has the rounded corners. If we go to page 2, we now have a nice image gallery. As well as images, we can also insert different types of media, such as video clips. This is inserted in pretty much the same way if we go back to our edit screen. Then if we find any location where we want to add any block, click on "Add." Search for the video. If you already have a video clip saved on your computer, you can, of course, use this too. I'm going to go to pixabay.com. If you click on the dropdown, we can search for videos. Hit "Enter." It will give us a list of all the videos we can select from this site. This one looks fine. Click on this "Downloads." I'm just going to go for the smallest version for now. Then once this is finished, remember this one isn't currently inserted in the Media Library, so we need to go to Upload, into the Downloads. Select this clip, and uploading this will automatically place this into the Media Library 2. Over on the right, we have various video options, such as we can loop this video, we can mute it when it's initially loaded, we can also add the control such as play and pause, and also play too. A poster image, this is a still image which will display when the video is not playing. This is a really handy feature to have too. Again, you can also rearrange these blocks and change some of the options. Once you are happy, click on "Update." We can check if this is working by refreshing our blog post. We have the controls at the bottom with the time. Click on "Play" and this all works fine. Next, you may also want to add audio clip into your blog post and this place this down at the very bottom. Click on the "Insert Block." As you might expect, this is called the audio block. To grab an audio clip, I'm going to go over to bensound.com. This will give some free audio samples which you can download. Or you can also use your own if you prefer to. Click on the Download button for any of these and we can download a free version to use with attribution. Attribution means we need to credit benson.com with this audio clip. To do this, we just need to copy this example at the bottom. Download this. Just as we did with the video clip, back over to the post, select this from our downloads. This audio clip is now inserted. We have the Play button and we can also change the audio settings on the right too. These defaults are fine for me. I'm just going to click below this audio clip and then insert the attribution. Update this blog post, refresh the browser and we can test if this is working. You maybe you can't hear this from your end, but this is all working fine. If we take a look through all of the different types of blocks it also varies over types of blocks in media which you can insert into these blog posts too. The final thing I'm going to show you is how to insert some media directly from a URL. For this, let's place in add image block, and then we can use the third option which is insert from URL. But this, of course, we need a media URL to link to. A good place to grab on these is the Wikimedia Commons website, which is available from Commons.Wikimedia.org. You can search through the huge library of free images to select. All I'm going to select this image of the day. Click on this and then we're taken to the full-size version where we can right-click. We could save this image and add this to the Media Library. But instead, I'm going to copy the image address and then paste this as our URL. Hit "Enter." There's a preview of our image. Update, reload. This is just a different way of adding images rather than using the Medial Library. Our images also now displayed at the bottom. This is just an alternative way of adding images rather than accessing the Media Library.
23. WordPress Blog: Users, Permissions & Managing Comments: Now it's time to think about who is actually going to be using our blog and also how much access each user actually has. When inside of the dashboard view just like this, you may have already noticed we have this "Users" option over on the left. If I hover over this, we have the option to go into all users, we can directly add a new one, or we can go into our current profile. Our current profile has some options, such as changing the color scheme, we can also update our personal information, our contact information, our profile picture, and also reset the password too. But this video is not about those, this about adding new users, and also checking out the different permissions they have too. Let's head over to the All users section. Up at the top we see our blog admin, which is the one and only user which we have setup. We can also add a new name if we wanted to from the edit screen. We can see our e-mail. We also have this role of administrator. An administrator is a user which has all of the required permissions to do or to change anything they want to on this site. This is why we have all of these options on the left. We can delete, post, we can add new pages, we can approve comments, and also change the look and feel of this site. When we only have a single site, just like we do here, this is the top level role. We've created two blog posts when in fact we've only actually created one. But when we first setup WordPress, the "Hello world" example was assigned to our user too. This one, we added the sample data. Also included with this data was two additional users. The difference between these two and ourselves is this role of subscriber. We'll take a look at this in more detail in just a moment. Since we're currently logged in as the administrator, we also have the power to be able to select any of these additional users. We can also go into the edit screen and change any of the details. Also, very importantly, we can change the current role too. If we wanted to have an additional administrator we could, and also generally upgrade or downgrade any users role. Access all users if we wanted to, we could also even remove users. We do this in a similar way to when we dealt with the pages and blog posts. All we need to do is to hover over any of these users and select the "Delete" button or we can also apply these in bulk too by selecting multiple ones, and then you see it drop down from above. As we've just seen with the drop down in the edit screen, alongside the administrator and subscriber, we do have various other roles too. To find out more about these settings, we can go over to our search engine and do a search for WordPress roles. My top search is from the WordPress.org site and it takes us directly into the roles and capabilities. Click on this, scroll down, and then we'll see a summary of each one of these roles. I did mention before, when we have a single website like we do, that the administrator is the top level role. As we can see, this is somebody who has access to all of the administrative features within this one single site. However, though, as we'll find out later on in this course, we can also create a WordPress network or a WordPress multi-site installation. This type of WordPress setup also generates a new type of role called the super admin. A super admin is somebody who is responsible for all of the administration features on the network of sites. We don't need to worry about this super admin just yet, all we need to focus on is the five roles just below. Just below the administrator, we also have the editor. This editor also has some responsibility too. They can also publish and also manage their own blog posts, and also they post for other users too. After this, we have the author. This is somebody who can publish and manage only their own post and not any post from any other users. After this, we have a contributor who is somebody who can write their own posts, but they cannot directly publish them without a confirmation from the administrator. Then finally, the lowest role is the subscriber. This is just somebody who can sign up to our sites and also manage their own profile too. They can't create any content, they can't manage any other people's content. All they can effectively do is sign up and change their user's details. We can also see here that our administrator account has been automatically created when we first setup WordPress. Now, with this in mind, we can manually add a new user to our site. Head over to the dashboard and we have this "Add New" button at the top, which we can also access from the sidebar too. I click on this and I'm going to add a sample test user and an e-mail. Just test for now, a terrible password. Of test 2, will confirm this is fine because we're just creating a sample user. Then at the bottom we can also change the role too, which we want to leave as a subscriber, which was the bottom level of roles. Confirm this. A new user has been created. We can also edit any of these details if we want. But I'm going to now log out of the administrator profile by hovering over this section in the corner. Click on "Logout" and then we can login as our test user, which was test@test, a super-strong password. Log in, and now we're taken to our test user's profile. We have seen before from the roles and capabilities that a subscriber can only manage their own profile. They don't have access to any of the other admin features, and this is why we don't see any of the admin features in the sidebar. We can't create any new posts or pages or generally have any input into the site. Also any content which is created needs to also be approved by the administrator too. We can see this if we go over to our site and then refresh. We see our user has been updated to our test. Head over to the homepage and select any one of these blog posts. Remember that comments were enabled for this post. I'm going to leave a comment down at the bottom of "Hello", then click on "Post". We have a message of "Your comment is awaiting moderation." Since we don't have approval to post any content onto this site, what we now need to do is to log back out of our own name. Logout and then log back in as our administrator, that was the blog admin. Once again, we have access to all of our admin features. Then over on the left we can see we have four comments awaiting approval, head into this section. We can see including our sample data we have 34 comments in total, 30 have been approved, and we have four which is pending. Click on this too, filter this down, and we have our test user's comments at the very top alongside the three comments from the sample data. We can either hover over these manually and approve. We can edit the content. We can either remove this if we don't want this to be published onto our site, or if we wanted to approve all of these comments at once, we're going to click on this checkbox. Into the "Bulk Actions" we can approve, apply this, and the four comments have now been approved. Over to our blog posts and refresh. The hello comments has now been approved and is visible just below our blog post. By default, when we sign up our users, we seen that this has the subscriber role. We can also change this inside of our settings if we wanted to, into the "Settings" option and then into "General". One of the options inside here is the "New Users Default Role"; currently, this is set to subscriber. What if we had a certain use case for a higher level of role? We could also set this to be a different default too. Also as an administrator we also have lots more options to control the settings of the discussion or the comments. Still inside the settings we have these discussions link, and this really allows us to fine tune all these settings related to our comments. We can have things, such as e-mail confirmations when a new comment is posted. We can check if the author must fill out their name and e-mail. We can check if they need to be registered and logged in to comment. We can close comments after a certain amount of days, and also various other options too, such as blacklisting certain words which may be included in a comment. There we go. This is how we can manage different users on our WordPress website, how we can change permissions of a user, and how we can safely control the comments being posted onto our blog.
24. WordPress Blog: Adding Pages: Now, we've been mostly focusing on our blog and also our blog posts, but in this video, we're going to look at how we can add some custom pages, such as an About Us and also a Contact Us page too. Pages which were added with the sample content earlier have automatically been added to our menu at the top. We don't need any of these pages for our project, so we're going to remove these and then create our own, over to the Dashboard view and into the pages select "All." From here, we can hover over and delete any of these manually or we can click on the top checkbox and then delete these with the bulk actions, move to trash, and apply this to all of these. We also have a second Page. I will remove these ones too, Add New. This first page will be the About Us, so adding the page title. Then we can go ahead and add some content just below. You can create any About Us information which you want to, but I'm going to go to Lorem Ipsum and then grab some sample content, place inside here. Search for "Lorem Ipsum," head over to lipsum.com. We can generate as many paragraphs as we would like. I'm going to stick with five. Copy all of this back over to a new page and then we can paste this into the block just below. Also, just like earlier, we can hover over any of the sections and we can edit them, we can change the colors, we can change all of the font settings. However, I'm just going to leave this as plain text for now. But this is one option of adding content per page, as well as adding all of these content blocks, if we go to the page section hover on the right, amongst all of the other options we have the Page Attributes where we can select a template. A template is something which is provided by the Themes Creator and it allows us to create different layouts and at different types of content to our WordPress pages. These templates are special files which are inserted in our theme, and we can use on either a single page just like this, so it only applies to one or single page, or we can have a more generic template which you want to apply to multiple pages. For example, we could have one template which is for a 404 page, then we could have a different multi-use templates, which is applied to all of the pages to give us a consistent look and feel. We will look at templates in more detail when we get to creating our own theme from scratch, which we'll do later on in the course. But for now let's just stick with this page content which you've added inside the blocks, publish our page, confirm. Now if we refresh, all of these sample pages have been removed and the About Us page has been automatically added to this menu. Click on this. There's all of the texts which we've added to our page. Of course, we are free to use as many blocks as we want. We can add media and all of the different types of blocks which we've seen in previous videos, as well as this content and also the templates, we click on this. We also have different layout options down at the bottom. We're currently using this default layout, which you can see is the text on the left and the sidebar over on the right. We can also change this, for example, if one of these sidebars replaced on the left, we can update this, refresh. We can also remove the sidebar and have the content be the full width of the page. This is really useful for changing the look and feel of our pages. I want to leave this as the default, which is the sidebar on the right. Remember, all of these options are available because of the specific theme which we have chosen. You may be thinking, "Well, how do we know exactly which options are available before downloading a theme?" Well, this is available when downloading a theme from wordpress.org and also some of the overall theme providers too. If we go into the theme section, let's take a look for our spacious theme. This is one here, so we can click on "More Info" and then we see this has 13 different widget areas; it has four different page layouts, different page templates, it's responsive, and all over with different layout and color options too. Now, although we've looked at these theme options in the past and also the tags which were available, hopefully now you seen inaction inside of a site. You should be now a lot more comfortable with Slack and a particular theme, based on these options. I go over to our slide. Now, I'm going to add the rest of the pages which we need, which is going to be the Contact Us page and also the Blog page. Make sure this is updated, and then we can click on the "WordPress Icon," we're taken back to all pages, "Add New." This one will be for the Contact Us. Just below this, I'm going to add a content block which is a list. Let's search for this and just a few lines of sample address data, Address Line 1. Copy this, hit "Enter" and we can add as many lines as want to inside here. It doesn't really matter for this demonstration. As with all of your blocks, we can select any of these lines. We can change this to be a ordered list with the numbers, but I'm going to keep this as the bulleted list, which is unordered. Just like with most of text blocks, we can format the text, we can change the color, and also change the links if we would like. Now, we could go ahead and publish this page if we wanted to, and this page will automatically be added to our menu alongside the About Us link. However, though I'm going to do this a little differently, what I would like for the Contact Us page is for this to only appear when we hover over the About Us link. So when we place the mouse over this, is will get a drop-down menu where we can select our contact page. Do this, instead of publishing this directly, we're going to go into the page settings and then down into the "Parent Page". We only have this About Us page, so we can select this. If we have multiple pages, we could also rearrange the order. But for now hit "Publish", "Confirm", refresh our blog. Then hover over the About Us link will reveal our new contact page. We can also select this and we'll be taken to our Contact Us page, which is nested inside of the About Us link. Now this is just some data which is going to display, but later on we're going to come back to this page and add a contact form. Just to round off this video back over to the Dashboard into the pages where we're going to add our third and final page for the blog. The blog page is going to be the home for our blog posts rather than the default homepage, which we currently have, if we click on our "Site Icon." At the moment, all of these blog posts are listed on this homepage, but later on we'll have a dedicated blog page where these would be placed inside. All we need to do is to publish this, refresh and now this empty page is now being also placed inside of the Nav bar. This is all the pages which we need for now. Next, we're going to take a look at Navigation Menus and how to add a custom menu to our site.
25. WordPress Blog: Adding Our Navigation Menu: As we've discovered in the previous video, each time we add a new page, it is automatically added to our menu and also, this menu is already been created for us. We haven't done anything to create it ourselves. This particular menu has been added when we created the sample data in the early videos. But of course, we don't want to rely on the sample menus. We want to know how to create our own. As with everything else in WordPress, we need to go over to the dashboard, and then into the main options. To create or manage our new menus, we need to go to appearance. This has a dedicated menu's link. At the top, we have a drop-down menu with all of the available menus which are being provided with the sample data. Currently we have all pages selected and at the moment we see we have some errors inside of this menu and these have all been changed to this pink color, so we know there is an error. Each one of these pink blocks is going to be a menu link. We have a blog page, we have the front page, we have the about the tests and these all are sub pages which are nested just below this page too. The reason why we see these errors is because we have removed all of the unused pages from our site. This is just WordPress's way of warning us that we no longer have access to any of these pages. We could go ahead and remove any one of these links or could also remove the full menu too. Same for any of these existing menus, we can select them. We can go to "Select." Then we can also remove any of these unused menus. But at the moment, I'm just going to go ahead and create our new menu with this link just here. This menu is going to replace our one at the very top. I'm going to give this a title of top navigation. Create our menu and then we can select some options from the settings just below. The first option is to automatically add new top-level pages to this menu. This means just like in the previous video, that each time when we create a new page, this will be automatically be added to our menu. This theme already comes with three different locations where we can place our menu. This is going to be the primary menu. Let's click on this. We could save this and check it out, but we don't have any pages to display in our theme just yet. What we need to do is to go to add menu items and then we can select what content we want to place in this menu. Under the Pages tab, I'm going to select all, add this to our menu, and now we have our three menu links. We can also choose various blog posts which you want to add. We can also create custom links to go to external websites. For this, we just add a URL which you want to link to, and then some texts which you want to display for our menu link. Finally, we also have categories where we can select different categories where we want to provide a direct link to. But for now, all three pages are fine so let's save this menu. It's all sized and refresh. There's our three links in place. We could leave this structured exactly how it is. Or if you want to have a sub-menu just like we've seen before where the contact is placed underneath the About Us link, we need to go back to our pages and then the child link, we need to click on, move this over to the right. Pop this in place and this is now classed as a sub item. If we want this again to be moved to the top level of our menu, we could either drag this back over, or go into our item and click on the Out from under About Us link. Save this, reload. I want to hover with drop down menu in place. Let's also go ahead and add one more menu, which is going to place down inside of the footer area. This will be placed alongside our text over on the right-hand side, into our menu's option. We could either create a new menu and place this into the footer area or instead, if we go to manage locations, we can reassign different menus to different locations. The footer menu, let's go for the preexisting social menu. Save our changes. Now if we refresh, we see our social media links are placed down at the bottom. If we want to rearrange the order of each one of these links, you just need to select the menu which you want to edit. For example, the social menu. Select this and then we can reorder each one of our links. Also, if we want to amend this in a more visual way, we can also go into the themes customizer, I select new customized link, and the customizer will give us a visual preview of all the changes which we made to our site. It has a menu section where we can access all the locations and all of the existing menus. For example, the social menu, we can click on this. We can also amend our links and these all change in real time. If we change one of the labels and then go down to the bottom, we can see this has been previewed inside the browser. This is how we can add menus, how we can delete menus, also how we can edit, and rearrange them and in the upcoming section we're going to get a lot more familiar with this customizer. I got for you lots of the available customizing options to make this theme more personal.
26. WordPress Blog: The Customizer In More Detail: In the previous videos, we've already had a brief look at the customizer, which is available from the Appearance tab inside the dashboard. The customizer is a way to make changes to our theme and see a live preview of these changes before saving them and making these apply to our project. We're now going to revisit the customizer and make some changes to the look and feel of our site. Over my desktop, I have a Images folder for this project and this is included with this course. You can download this yourself and use the same images as me. Or instead, if you prefer, you can choose your own and use these instead for the media library. We have these available. Let's go into the medial library now, and then we can drag over the full project folder, and drop this inside of here. You have various logos and images, you have some icons, and also a texture which we'll use soon. With this now in place, we can now go back to the appearance and then into the customize option. Some of these options will have dedicated videos coming up. We're not going to go through every option right now in this video, but we're going to start off at the very top inside of the header section and begin by adding a logo. We can do this inside of the Header option, and then into the Site Identity. From here we're going to add a logo which is going to appear next to our site title. You can choose any logo, of course. I'm going to use this one which is included with the course like this. We can also crop this if we prefer. I'm going to make this the full size. You can crop. At the moment, we don't see any changes appearing inside of our preview. This is because if we scroll down, we also have a third option, whether we want to show the logo, or the texts, and we can actually select both, so these appear side-by-side. Beside title, this is automatically being set when we created a WordPress site early on, and you can change this if you like to. I'm going to leave this as it is, but I am going to change the tag line just below. This is going to be all things web development. We can see as we're typing, this is automatically updated inside the preview, and the last thing I'm going to update in the section is going to be the site icon. This is the small image which appears inside of the browser's tab. We can select an icon, I'm going to go for this one, below this. We see this is automatically being applied to our top. If you'd like to, you can also change the header text color too, but I'm happy with the color, which is supplied as default. A couple of other things to note too here is we also have some options to see how the site looks in different screen sizes. Down at the bottom, we are currently on the desktop view, we can also preview the look and feel of this in a tablet. We can click on the middle button to do this, and also the smaller screen mobile view too. This gives us a good chance to preview how things would look if we maybe upload an image which is too big, awesome text which doesn't quite fit, but generally a lot of these themes which you uploaded to the Theme Store, are generally fully responsive. We can't publish our changes once we're happy, and these will also be reflected inside of our site. Back into the customizer, we do have lots of different options inside here. We do see some shortcuts over on the right. We can click on the pencil icon next to any of these editable areas, and then we taken straight to the customizer section, where we can make our changes. Back to the main menu at the very top, we have this global option where we can apply some settings for different colors, our typography, and also our layouts and background too. If you wanted to, you could change all of the colors. We have a primary color set by the themes offer, and we can change this so it applies to all of the green areas of our sites. You can also change this to be a dark mode too. If you prefer this for your blog, the typography option will give us a chance to change the standard fonts which we're going to use for our project, and we can change this to be either some of these supplied standard fonts, or one of the selected ones from Google too. What's changed both the body and the heading tags to be Roboto, publish this. The background color, we can select any different background color which applies to outside of our main content area. Currently this is a light gray color bars you can see. We can move the color around to any one of these colors and change the feel of our site. If we wanted to, we could also upload a background image or a texture to replace this standard color. Layout, this will give us a chance to set the width of the content, which is this dark, gray color. We can either have a box just like we see here with a certain width, or we could have it to be the wider layout and then we're going to boxy content into the center. Alongside when we amend our pages to from this customizer, we can also change the positioning of the sidebar from here if want to have a play around and see how this feels with different layout options. This is the default layout to begin, which will apply to all of the pages, and then we have a layout which is more specific to pages and also to blog post too. Maybe on this blog post listing, we don't want any sidebar at all, so we can select this view, and then when we click on to any of these blog posts, to be taken into the full post view. We can then reintroduce a sidebar onto any side which we want to. Again, this can also be different for all pages, so if we go into the "About us" page, we'll still see a sidebar inside here, and we can also remove this too. I'm going to publish these changes, and then click on the site logo to be taken back to our homepage. If I could just make this a little bit narrower. Yeah, that looks better, publish this. Back up to the top. We will have dedicated videos for a lot of these options, but just one last thing I would like to show you is the additional CSS download button. If you do know how to use CSS, this is a place where you can add it. But don't worry if you don't know any of this code, is just going to be an example of what we can do. For example, if we want to target any of the text, which is an EP elements, we could apply our custom CSS just like this, given as full control over all of the styling and layout for our theme. Don't worry if you don't know any of this, this is just something extra which you can maybe use in the future. This is the customizer and also one thing to remember when using the dashboard, some of the options inside here will also link us back to the customizer too. For example, if you go to the appearance and then down to the header link, this will take us to the header section of the customizer. I'm going to leave the site as it is for now and you can make some additional changes if you prefer, using the customizer without the need to apply any coding. We'll leave this video there because we'll be covering the rest of the options as we move on through this section.
27. WordPress Blog: Adding Header Images: We're going to now do a little bit more customization with our project header. Also, add this header image which you can see inside of the spacious theme preview. The header image is this large background image with this book and this phone, which appears at the top of our website. It's ideal for branding and gives our website a unique look and feel. This can also be done over in the dashboard inside of the customizer. Back to the appearance and into the customizer section where we're going to jump in to the header. To change these images we need to go into the header media section where we can upload a new video or a new header image. We could play a video in the background if we wanted to, or link to a YouTube URL. Instead, I'm going to go for the header image. Click on "Add New Image" where we can upload a new one or jump into the Media Library. The image I'm going to use is this one just here. Select this and we can also crop the size if we'd like or click on "Crop". This one will be uploaded at the top of our project. We can also add multiple images too. There is a second one provided with this course. This is computer image just here. Again, select and crop. From the customizer, we can see this is the current header and we also have some previously uploaded ones too. If we wanted to, we could stick with one single image, or instead, we can click on "Randomized uploaded headers". Then a random one displays each time the page has loaded. By default, this is appearing above our header section. We can move this just below by clicking on "Position below" inside of this section at the bottom. If we now publish these changes and go over to our site, refresh. If we keep refreshing the browser we see a random image is selected each time the page loads up. We will also come back to this header image later on in the project where we are going to replace this with a carousel. Now, this is fine. Let's go back over to the customizer. If we go back one level into the header section, we can also click into the primary menu too. From here, we're going to enable the search icon in the header. This will give us a search box which we can search for any blog post, or page on our sites. For example, we've included some Lorem Ipsum. If we search for this, we'll see this will then return back our blog post with the text of Lorem. We can also change this to be the new responsive menu too. For this, we drop down the size of the browser. This is what the regular drop-down menu looks like. If we wanted to, we could also switch the new responsive menu, which is appearing over the top right, just like this. The choice of menu is completely up to you, but I want to leave this as unchecked and then publish our changes. Now we've got these really wide images, I'm going to go back to the global settings and into the layout. Where I'm going to is switch this back to the box layout. This will just stop the image from becoming a lot wider than the rest of the content. Publish our changes, refresh the browser. Our changes have now been updated. In the next video, we'll take a look at how to add a background image.
28. WordPress Blog: Adding a Background Image: Earlier when looking at the customizer, we added a different color to our background. This is the color which surrounds all of these darker content in the middle. We did this over in the customizer, the dashboard, into the appearance and customize. On the global options, we had a background option just here, and this is where we set this background color. Another thing we mentioned was we could also change the background image. We can select any image which we would like to place in the background or even a background texture. Supplied with the images for this of course is a gray texture color, which I'm going to apply to this background. We can see straight away that this texture has applied all around our project. We have various presets where we can repeat the image, we can fill the screen, but we can currently see our image is already filling the screen because this is repeated. Even though the supplied texture is just a small square, if we uncheck the Repeat Background Image, we can see we just have this small square up in the corner. This is placed in the corner because of the image position. I never had a different image which you wanted to place in any particular corner or even the center. We could change the location with these buttons. The size of the image can also be updated too. Another feature we have down at the bottom is the ability to scroll the background image with the page. What this means is if this is checked, and if we scroll down, we can see the background image is pushed up with the rest of the content. If this, however, is unchecked just like this, the background-position stays in a fixed location. I will not scroll with the rest of the content. I prefer it the other way. I'm going to click on the Scroll with Page and also repeat this so it covers the full background image. Many of these options are not really useful when using a small texture just like this. Just repeating this is usually fine for our purposes. However, though, if you are using a different image, a lot of these options will be much more useful. Click on "Publish" to save our changes, refresh the browser, and the changes have now taken effect.
29. WordPress Blog: Plugins & Social Media Integration: Welcome back to this video on plugins. Plugins are a really important part of WordPress and they allow us to extend the WordPress core. Now by that, we mean that we have a WordPress downloads when we initially setup any of our WordPress projects. Then we can extend it to provide lots more different features and a different set of functions. So we could include things such as contact forms. We could add tools for SEO. In this particular video, we'll take a look adding a plugin to add some social media icons from the wordpress.org homepage. We can go into the plugin section, just like we did early on with the themes. We can see currently we have over 50,000 available plug-ins to extend our WordPress site. We have things such as booking calendars, we have galleries, we have contact forms. We can add anti-spam protection, the ability to backup our site and if we didn't like the new Gutenberg editor, which is applied on version five and above, we can also revert back to the classic editor if we prefer. To add these plugins and to also see what plugins are available for our site, we can go back over to the dashboard, make sure that any changes are saved in the customizer. We have a dedicated plugin section. Click on this. Currently, we have the word pressing policy, which we used earlier. This was activated when we installed the sample data. Logins are really simple to add we just click on the add new button. Insulation is very similar to a theme. We can see all the featured and also the popular plug-ins and we can directly install these from the screen. Or as we've seen, there is so many differents plug-ins available we may also need to search for the desire to want to. In our case I'm going do a search for social, fill up all of the social media icons. The one I'm going to use is this one, which is by ultimately social. It's also really important to note that when installing any plug-ins, it's worth checking when there were last updated to make sure that these are regular maintained and also make sure these are also compatible with your current version of WordPress. Usually, the reviews is a good indication of whether you are installing a useful plugin or not. All we need to do is click on Install, which will download this plug-in and then once this is done, we can then activate this to use it in our site. Activate this plugin. Once we allow this plug-in we can then see from the sidebar, we now have a new icon inside the Dashboard. We can click on this. We take into our options, we'll need to run through the setup of our plugin. We're going to close this down and then run through some of the required settings. We have three different settings which we need to configure up at the top. The first one is which icon to want to show on our site. This is completely up to you. I'm going to go for Twitter and also YouTube. Keep this pretty simple. We'll just confirm the activation. Also the RSS feed, we can remove this. If you do have any accounts with any of these other providers, you feel free to check these buttons too. Save our first option. Next option two is what do we want these icons to do? For example, with Twitter, when the user clicks on the Twitter icon, you want them to visit our profile, you want them to follow us or you want to tweet about the particular page. In my case, I'm going to set this to be, follow me on Twitter. Then add in my Twitter handle. Down to YouTube we can also insert the YouTube URL, which you're going to link to your YouTube page. You can also allow people to directly subscribe to your channel too, save option to. Then the third one is where will these buttons be displayed? We could allow them to be floated over the website pages. We set the position of these icons to be in the top corners or in the center of our site. We could also add some margin in the top right, bottom or left. This is some spacing which will push over the icons from any particular side. This is maybe useful if these buttons are covering up a certain piece of content and we just want to fine-tune the layouts so they don't cover up any important pieces of information. We can also check as many of these options as we would like. If you want to, we can also place these buttons into a widget. This will allow the social media widget to be dragged into any one of our themes, widget areas. I'm going to uncheck this since we don't need it. The next option is to place via a shortcode. We've not covered a shortcode just yet, but this is a small snippets of code which you can place into any one of our blog posts or pages. We will also look at this later on, but for now, we can insert this by copying the code inside of these square brackets. By copying this section, we can place our widgets into any one of all pages or posts. Let's see this in action by saving. We can go over to one of our pages, select any of these and go into edit. Then all we need to do is to paste this into a text block update. Then we can check out our about us page inside the browser. Go down and below all of our texts we can now see these social media icons have been inserted with this shortcode. This is really useful if we want to include this on one particular page, on a particular blog post. I'm going to leave these icons on this about us page since it may be useful for the user to share this page with others. Back to the dashboard, click on the WordPress icon. Back into our icons we can now finish the setup. The location, I'm going to place mine in the top right. We can leave the shortcode in. If you wanted to you could also place this in the theme's header and also show this after all of our posts. There is also some optional settings just below too. For example, if you want to play around with the design and animation of these, you can change the look and the feel of all of our icons. We can add a counter next to each one of these icons and generally tailor how these will act on our website. I'm going to leave all these options and save our plugin over to the website. Now we can see if we visit any one of our pages, we have these icons appear on over in the top right. We can click on the Twitter icon, which is a follow button, where we're instantly taken to our profile and we can directly follow this user. We also have a YouTube link which probably won't work since we have not added a URL, but you can go ahead and add your own URL into here, or any other social media icons if you would like. Good, with our social media icons now all in place and set up. Next, we're going to move on to modifying this homepage and also introducing some widgets.
30. WordPress Blog: Home Page Setup & Widgets: In this video, we're going to focus on this homepage and reconstructing it using widgets. We did take a look at using widgets early on in this course, in the other project. Widgets, if you remember, is like a self-contained piece of content which we can drag into a particular location inside of our theme. With the spacious theme, we do also have access to some custom widgets which had been supplied with this theme. Also supplied alongside these widgets is a homepage template which is going to allow us to rearrange this homepage, look more like it did when we first checked out this theme on WordPress.org. Now to do this, we're going to move all of this blog section, all of our blog posts, over to the custom blog page. Then this is going to leave us some space to create a new homepage where we can add this new template. Let's begin over inside of the dashboard. We're going to go down to pages and add our new homepage. So the title of Home. Then over on the right, inside of the page attributes section, we can select a template which we want to use. At the moment, we're just using this default template. But we can see, we have some other templates which are being provided with this theme. The one we're going to use for this homepage is this business template, publish this. If we refresh, we see our homepage up at the top here. But as we mentioned just before, we're going to make this our actual homepage when we visit the root of our project. The way to switch around our pages is to go back to the dashboard, down into the settings. We need to head into the Reading option. Instead of our homepage, is bringing our latest posts, we're going to switch this to be a static page which is the newly constructed homepage. Then move all post over to our custom blog page. Save our changes. Let's check this has all taken effect inside the browser. Good. There's our homepage. We don't have any content just yet, but we'll come back to this, the blog. We'll see our blog posts have now been moved to this blog link. To construct this homepage, we're going to add some widgets. Just like earlier, we go to the Appearance into the Widget section, and then we can drag over any of these available widgets into the themes widget areas. This particular theme also has some custom widgets, will have all of the custom widgets beginning with ATG. We know which ones are supplied by this actual theme. We have the social media icons which were supplied by the plug-in, and then most of the ones above are just general WordPress widgets which are always available until you construct this homepage. This was the business templates. We're going to make use of these four business sections. Starting with the business top. The middle section is split between the left and right, then we have a bottom section. From the top, open this up, and we can see which type of widgets are suitable for this area. The one I'm going to use is this TG Services. As you can see, this is used to display some pages as a service. Drop this into the top section, and then we're going to link this to free new pages. We don't currently have any pages which displays the website services, so what we're going to do is to go over to our pages, add three new pages. The first one is going to be for web design and development. Then we'll just add some simple text just below. I'm going to say we create stunning responsive designs using WordPress. You can place in any text which you would like inside of here, and you can also see at the bottom, we have a social media section which had been added using the plug-in. This is a premium feature so we're just going to ignore this. If you want to remove this, you can click on these settings at the top, go down to the preferences, and then we can close off the social media panel. Now, back to our page, we're just going to add a featured image for this section, then placing the WordPress icon. That is our featured image, and then publish. This is all we need to do. Now, if we go back to our pages, add a new page, and this second one is going to be for branding. Then some texts in the block just below, I'm going to say let us take care of all your branding needs. The page section has the featured image. This is the pencil icon. Set this and then publish. The third and final page is going to be for the mobile development service. Add a third page with the title of Mobile Development. Then some text I'm going to say, we create stunning custom mobile applications for all devices. Back to the page tab on the featured image, this one is going to be for the Android Icon. Published this. Now, if we go back to our Widgets under Appearance, we can add these three new pages to our TG Services. We have the web design, we have the branding, the mobile development, and then we can save this widget. Before we go any further, let's just refresh the homepage. Click on Logo. We'll now see our three pages in this widget area. Just below this, we're going to next a Call To Action section which is going to prompt the user to get in touch. To do this, we have a call to action widget which is just over here. Drag this below and inside the same section. The Call To Action main text is going to be, "Need to speak to somebody about your ideas?" Then the additional texts of, "Get in touch today." This is going to also have a button which the user can click on and will say, "Get in touch." Then we also want this button to redirect to a certain link. Now, just before we do this, we're going to save this. We'll want this to link to the Contact Us page. To get the link to the Contact Us page, we need to go over to the Pages tab, into Contact. Then we can grab the permalink from the sidebar. This is all of this section just here. If we click on this, we can then grab the URL back over to the widgets in the sidebar, then paste in our permalink. Save this and let's test this out. Refresh. We've got our Call To Action. Click on the button, and this now links us to our Contact Us page. Remember, this will have a contact form later on, but for now, this is all working fine. Next up, we have the middle section which is split into the left and the right sections. To the left, I'm going to add some recent testimonials, and the right is going to feature a single page. Let's start with the left which is TG Testimonial. Drag this in. The title of Recent Testimonials. Then the description at the bottom. Place in any testimonial description inside of here. We can then place in a name just below, and the byline which is CEO. Save this widget. We can also close down these sections and then we'll go to the middle right section. This one is going to be the single featured page. Drop this in. This one is going to feature any one of the pages on our site. For this example, I'm going to put the focus on the mobile development section. The title which will appear next to this are Read More About Our Mobile Development Services. Then we also have the option to remove the featured image if we want to, but I'm going to leave this as it is. Finally, we have the business bottom section which is going to be for a featured widget, and this will allow us to add some case studies. Drag this over. Title of Case Studies. Then we can add a description, I'm going to say, Here, we take a deep dive into some of our most recent projects to show you what goes on behind the scenes. Then below this, we can link to various pages. Now, we could go ahead and create three new pages with some case studies. We could add in some texts to some images and create these pages if you wanted to. However, though, just to save a little bit of time, I'm just going to link to three existing pages which is the Web Design, the Branding, and also the Mobile Development too. You can create these if you want to, but I'm going to save this widget and check this out over in the browser. Refresh. We'll have our top section which you've already seen, we have the middle section, and this is split with the left section for testimonials, and then the featured Mobile Development page on the right. Then finally at the bottom, we can link to some case studies. This one is all complete, and you can have a play around with this if you like and make it more personal. Just before we finish this off, I'm going to remove the additional links which are being added to our menu automatically. I'll go to the menu section on the appearance, we need to select top navigation, we can remove the home link, and also the three additional pages. Save menu. Our homepage is now set up. In the next video, we'll take a look at how we can create our footer.
31. WordPress Blog: Creating The Footer: Let's now scroll down to the bottom of our project and work on this footer area. For the footer area, we are also going to making use of widgets to create up to four different sections. To do this, we go over to the dashboard, into the appearance, and into the widget section. The themes author has provided four different footer locations. Psi bar 1 is over in the bottom left, then two, three, and four. Just like when we've used widgets in the past, we can drag and drop any one of these widgets into our four different widget areas. You don't even need to use the same ones which I'm going to use. Bar sidebar 1, which is over on the bottom left, we want to drag in the pages widget. Pull this over. As we can see here, this is a list of your site's pages, but this is basically like a menu where the user can click on all pages and then be taken to the full page. We can add an optional title if we want to. We can also solve these pages by the title, the pages order which is available when we go to the pages edit screen, or even the page ID. This page ID can also be used just below two if we want to exclude any certain pages that we don't want to appear inside this section. The way to grab a page's ID is if we go into our pages link, click on this. If we click on any one of our pages or even go into the edit screen, we can see the pages ID appear inside the URL. This particular one is 1872. Let's try a different one to contact us. This is 1874, but yours may be a completely different ID to mine, and that's completely fine. The same too if we ever need to access any of the posts ID, we can click on this. This is ID number one. Let's try one more. This is 1788. This is really handy if you ever need know the post or the page ID. I go to the widgets. This is all saved and this is all we need for our sidebar 1 into the sidebar 2. I'm going to drag and drop over a calendar widget. This is a calendar of our site posts. If you have a blog post available on a certain date, this then becomes a link inside the calendar where the user can click on and be taken to any of the posts for that particular day. We'll see what this looks like in just a moment. We can add an optional title, but I'm just going to leave this as defaults since this is pretty self-explanatory. Site buffering, this is one is going to be occupied by some social media buttons. This is the ultimate social media plugin. Drag this over. This one was generated four rows from our social media page. We can go to this page if we want to adjust any of the preferences with this link. We can also change the title, but this is fine. Sidebar 4 which is over in the bottom right of our page. I'm going to drag over some recent comments. Now, the recent comments are just the comments which had been placed on our blog posts. By default, this is the five most recent posts which we can adjust, but five is fine for now. All these are automatically saved, so if we go over to the browser, refresh the page. The first block is our pages and we can click on any of these to be taken it to the full page. We have a calendar section and we can click on any of these days and see any available blog post for that particular day. We can also scroll back and forward through the dates and see the calendar view for each month. The social media section, mostly the Twitter and also the YouTube links which we created earlier. Then finally, the five most recent comments, which you can also click on if we wanted to. Now we have a footer section. We could also remove the footer links down at the bottom, but this is fine for our use. Just one last thing over in the customizer is not many options for this particular theme for customizing the footer. The only options we have if we go to the footer link is to amend the number of widgets areas. We are currently set to the default, which is four, but we could also reduce this down to you three, two, or one if we prefer if we have less content to place inside the footer.
32. WordPress Blog: Adding a Slider: Earlier in the course, we added two different header images displayed just below this logo section. These two images will display randomly, so we may get a different image each time we reload this page. In this video, we're going to show you how we can use these same images, or you can even choose different images if you prefer. But we are going to incorporate them into a slider. Like with many things, WordPress has lots and lots of different slider plugins, which we can integrate into our site or this actual theme comes with its own slider tool, which is really simple to use. First, we need to go into the customizer. This is one of the options inside of the appearance and customizer. Then we'll see we have this slider option just here. Enter here. The first option is we actually need to activate the slider. So we'll click this and then we have the option if you want this slider to appear in our Post page. We don't really need the slider to appear when we see the blog post. So I'm going to uncheck this. Well, this is totally up to you. Then below this, we add our content, which is the images. To display in our slider, we can select an image from the media library or upload a totally different image. I'm going to stick with these same two images which we used already inside the header. You can see straight away that this image has appeared still below the header one, but this time we also have a Read More button. We can also overlay some texts just above this tool by adding a title and also a description. So the title for this one is going to be Mobile Development. We can see these updates over in the preview. On the line below we can also add a description tool. I'm going to say from design to App Store. If you want to, you can also change the Read More button text. First, I'm going to leave this as it is, but this is also going to link to a certain page. Since this particular image in this section is for mobile development, it would make sense to link to our mobile page. To do this, if we go to our site and then if we click on the "Mobile Development", all we need to do is to grab the page link, which is the section just after this first forward slash. Command or control C to copy this and then paste this inside of our link. Slider content 2 is woken at our second image to rotate between. Again, I'm going to use the same one as the header. A title of Web Design & Development. A description, this will be WordPress development from the experts. We also need to link to this page, which is the Web Development page. To go back over to our home page, we can click on the "Web Design and Development", link and then grab the link to this page, paste this in. Oops, wrong one. Paste this into number 2 and as you can see, you can go even further by adding more images just below two. So of course, we don't want the slider and also the header image at the same time. So what we could do is we will go back to the Header Image section, or we can click on this pencil icon to go directly into our section. Hide this image and then we just have the slider taken effect. Publish. Over to the front end and refresh. That's our slider. This switches between our two available images. Let's try if these links will work. This is the Web Design and Development page. This one is fine. Back to the homepage. Our Mobile Development link is working too. So this is all now working and this is how quick and easy it is to add a slider. In the next video, we're going to get to work on our Contact Us page and replace this plain text with a contact form.
33. WordPress Blog: Creating The Contact Form: Hey, welcome back. Early on when we created our pages up at the top, I'm going to hover the About us page. This will then reveal a Contact us page. We did say early on that we just put in some sample address lines just here and then we're going to come back to this page and add a working contact form. Well, this is what we are going to do in this video. This will be made available by adding a plugin called Contact Form 7. This will allow us to add as many different fields as we would like inside here. This will capture the user's input such as the username, the e-mail address, a message, potentially any addresses or telephone numbers, and this can all be submitted with this form. You guessed it, let's go back over to the Dashboard, and from here we'll head into the plugin section. As you can imagine, there's lots and lots of different plugins which can do contact forms, but I'm going to use a popular one called Contact Form 7. We can add this as a new plugin up at the very top, then if you want to maybe available in some of the tabs such as a popular one which you see here. If not, you will need to search for it with the search box up at the top. This is the particular contact form I'm going to be using, so let's install this. As we can see, it's been regularly updated and also compatible with this current version of WordPress. Activate, and this will now give us a dedicated option inside the sidebar. Click on this and this will then reveal all of the contact forms which we currently have available for our site. We just have this one which is being created automatically for us, and we can go ahead and add as many different contact forms as we would like. We can have a different one for different sections of our site, and each one can collect different information. Instead of editing this one, I'm going to add new up at the top and then give this contact form a descriptive name. I'm going to say Contact Us form, then below this, we'll have the layout of our form. Now, if you don't know any coding and this looks a bit crazy, don't worry at the moment. If we take a closer look at each one of these fields, it shouldn't be too difficult to understand. Each one of these is a different form input. For example, if we want to collect the user's name, user's e-mail, and we have a section for the subject of the e-mail, and then we have the message which is going to be sent to the administrator. This one, for example, like the rest of them is surrounded in the label and then the text which is going to appear next to each one of these inputs. This one is also optional unlike the three above, meaning this form can be empty when this is submitted. Then inside the square brackets, we have the type of form input which is currently being used. Don't worry about all this since we can generate each one of these automatically by using these options up at the top. For example, if we wanted to create a new text input, collect an e-mail address, if we want to gather a telephone number, a date, a text area, checkboxes, or radio buttons, these can all be generated by clicking on these buttons just here. Finally, for a form, we also need the ability to actually send this. When all of the data just above has been entered, we then need a button to actually click on, and send this back to the site administrator. This is what this Submit button does here. I'm going to leave pretty much all of the defaults just here. Let's add in one extra field. This field is going to be a checkbox where we can ask the user how they heard about our site. So I'll click on the checkbox and then all of the options which we add inside here will then result in a generated form input like we already have. First, we want to know if this is a required field, so the user must enter a value inside here before the form can be submitted. The name, we can leave this as default. This is just a generated unique name. For this particular field, we can add multiple options where we add one option per line. Each name which we're adding inside here will generate a new checkbox. The first one I'm going to add is for search engine. Remember these options do describe how the user heard about our site. We can also say a recommendation. On the next line, we'll say use previously, and then the fourth and final one is for other. I want to leave all these default settings just below. I'm going to also add an optional ID or class attribute to this input. This is just so we can target this we added some CSS. If you wanted to apply some additional styling, we don't need to do this, all we need to do is to click on "Insert" and then we have generated our new checkbox section. Save this and then once this is done, we then see a shortcode up at the top in between these square brackets. This again is a shortcode just like we used in a previous video, where we looked to adding the social media icons to any one of our pages or blog posts. The same applies to our contact form. We just need to copy this and then we can go all to our pages and insert this into our contact form. Pick on this section, and I'm going to remove this particular block, just below, paste this in as a text block. We can then choose which one of our contact forms we want to display. This is the contact, so this is completely fine. Update our page or to the browser and refresh on the Contact Us page, I will now see our form has appeared. We have a name input, we have an e-mail, we have the subject, and then our custom checkboxes which we added in. So the user can say how they heard about us or have the optional message at the bottom, and then they can submit this back to the administrator. Of course, it's a little bit pointless having a Contact Us form if the message is optional. So we're going to quickly change this back over in the Dashboard. Back into the Contact section, we'll edit our new form. All we need to do is to remove this optional text just here and then save this. This has now been removed, as well as actually creating at the contact form, there is also some options which we can change too. We have various terms up at the top such as mail. These is some of the options to change the layout of our e-mails. If any which is placed inside of these square brackets is effectively some data which can change. So it's a little bit like a variable. These are all the sections which WordPress will inject dynamically. So when we receive an e-mail from the end-user, we see things like the site title, so we know exactly which one of these sites this e-mail is sent from. We will then receive the subjects and this will be pulled in from the subject field along with all of the other sections, we'll also get the user's e-mail, which will be pulled in from the e-mail field and we can then construct the message body down at the bottom or change this around if we wanted to. I'm not going to make any changes to this since it's well laid out. We have the From field with the name and e-mail. We have the subject in the correct field and then the message inside of the body section. Once we're happy with this, we can also go to the Messages tab and from here we can amend all of the default messages which are sent to the user. For example, when the user has successfully posted the message on our site, it will then see this message just here. We see message sending failures, we see validation errors. This is when a particular field hasn't been entered or the incorrect data type has been used. For example, if we have a number field and somebody tries to enter some text, this would cause a validation error. We also see things like the maximum and minimum length of the input, which is allowed, and lots more other options to change all of the default text. Finally, we have the additional settings where we can go over to the contact form website and pull in any additional options if we want to. I want to leave this as this is and save our contact form, but this is a really useful plugin for collecting information on our site. Remember, you can create multiple Contact us forms and place these in different sections too.
34. WordPress Blog: Improving SEO: There's no point putting in lots of effort to make our site look really good and have lots of amazing content if no users can find it from search engines. We mentioned earlier in the course that WordPress by default is pretty search engine friendly. However, like everything, there is always room for improvement. In this video, we will be covering a great plugin called Yoast SEO, which takes our core WordPress SEO to another level. If you want to shoot of what SEO is, it shall fall search engine optimization. It's basically the process of optimizing our content on our website to appear higher in the order of search engine results. We optimize keywords, descriptions, and also optimize things like our blog posts. The more relevant in search engines is plugin really helps by highlighting all of the things which we're doing good and all of the things which we need to improve on, such as all of our keywords, our descriptions, the length of our content, and the images alt text. It can also help too with something called metadata, which is the information about our sites made visible to search engines. You can also generate sitemaps and submit them to Google, along with so many other things. Let's head over to the plugin section where we can search for this particular plugin. Go to add new. There's a very good chance that this will be appearing inside the popular section. If not, you will need to do a search for Yoast SEO in the search box up at the top. This is what we need. Its compossible with our version of WordPress. Let's install this, activate this. This will also leave us with a SEO option in the menu too. You can see an overview of our configuration along with any problems on notifications. But generally a lot of the things which are going to be dealing with Yoast is going to be actually inside of our content. For example, if you go to any particular page, I want to go for the web design one. If we now go back into the edit screen, yours will now provide a new section inside of this edit screen. From the top, the first thing we need to do is to provide a focus keyphrase for this page. A focus keyphrase is the main keyword which you want to focus on for this page. This is a web design page. I'm going to set the keyphrase to be web design. Enable all of this, we've seen a preview of how outside will appear inside of a Google search. We can also check this out for the mobile and also the desktop result too. If we wanted too, we could also play around with the SEO title and also insert different variables to change the order and the look of how all of this data will appear. We can also change this slug if we wanted to. [inaudible] this is web design and development. We can see this over in the permalink too. A meta description if we wanted to override all of the description for this preview. We could also change it inside of here too. As you can see, this will automatically be updated in our preview. This is how it will look in a Google search. I'm going to leave this empty, but it is a good idea to do this on all live web pages. We can also insert variables too such as the site title, the page's title, and also the categories too. Below this we have an SEO analysis, which is going to be a really important part to go for you. This will tell us what parts of our pages are good for SEO and which parts need some improvement. On the bottom we see we have these green light. This is the good section. We have a good land off of keyphrase. This key is also unique and not used in any other pages or blog posts. We have the keyphrase and the title. If we go to the top, we see this is web design and development. We'll have our keyphrase just here. If we were to switch this around, just like this, then update and refresh. Back down to the analysis, we then see this is missing and it's also now a recommended improvement. The other recommended improvements are the image alt text. We're going to amend this over inside the sidebar. Under the featured image, we click on this. We can then add the keyphrase into the alt text. This was web design, update our page, refresh. This problem has now been removed. We'll also revert this page title too. Back down to the improvements. We then have a red section which is the more serious improvements which we need to make. A lot of this is down to the fact that we don't have any content on this page. We just have a title and a very short description just below. It is also recommended to add a little more content such as the text length. Currently we only have seven words, although the recommended minimum is actually 300. We could also make use of some of this descriptive text and also place this in the meta description too. If we don't do this, as we'll see below, the search engine will automatically grab a section from this page for us. This section which it grabs may not be the exact piece of content which we want to display. All this text should also contain our keyphrase in the opening paragraph. It's also recommended to have some internal and external links too. We should add some links to other pages on our own site and also ideally link to some other websites too. After this, once we've gone through all of these improvements, we'll then have a related keyphrase. This is a secondary keyphrase which we want to add. But this is only available for the paid version of this plugin. I'm going to leave this section. Next, we have the cornerstone content. For any one of our pages or blog posts, we can switch this on or off. A piece of cornerstone content is the most important piece of content on our site. For example, if your WordPress site is famous for chocolate brownies, the chocolate brownies page should be marked as the cornerstone content. But this is something for you to decide based on your content. Finally, we have an advanced tab down at the bottom where we can set, if we want, this particular page to appear in these search engine results. We're going to leave this as yes. Well, we could also turn it off too. You'll want search engines to follow links on this page. We can select yes or no. We have a meta robot advanced section where we can fine tune how we want our meta robots to behave. We're not going to cover any of these advanced settings, but you can have a Google search and find out more about meta robots. Finally, we have the canonical URL. A canonical URL is a way to deal with duplicate content on our site. For example, if we had an e-commerce store, we had two identical products listed on our site. We need to tell these search engines which one they should use. If we don't do this and we have lots of pieces of duplicate content, search engines will believe we're trying to game the system by just duplicating things rather than creating new content. If we had an e-commerce store, for example, and we had a blue t-shirt. We'd maybe have a product name just like this. For the URL, we may have this inside of the shirt section. We'd have our e-commerce name and then the URL which looks just like this. But what about if we happen to put this blue shirt also into a blue category. We could also have the same shirt inside of a cell category. Now we have three of the same products in three different sections on our site. Of course, we're not trying to trick search engines by providing duplicate content in this way. We need to mark one of these pieces of content as the main you want to display. For this, we need to leave this empty for the main piece of content. Then, for the other two sections, which was the blue category and also the sale category. We'll then need to point back to our URL, which was the shirts/blue-shirt. Just to clarify, the main piece of content is empty and then we'll point all duplicate pieces back to the main URL. This is all of the options. We'll update our sites. We can also repeat this process for all of our other pages as well as all of these pages. We can also do the same too for all of our blog posts. If we had inside here, over on the right, we also know have this SEO score. We have a readability score and also the number of links from this page too. If we go into any of these, we get the exact same SEO section which we can go through over each piece of content on our site. This is how we can use the Yoast SEO plugin to improve our positioning in search engine results. It's something which you really should be aware of, even if you just use it to target the quick wins, such as optimizing your pages and posts. There are, of course, other SEO plugins, which also do a good job too. But this is a really popular one which I personally use. It's also very effective too.
35. WordPress Blog: Backing Up Your Site: If all of the care in the world, things can and do go wrong when dealing with technology. If the worst was to happen and we lost all of our website data, we want to make sure that all of our hard work is not lost. We could spend hours, days, weeks, years creating lots of different content, lots of blog posts, and we don't want all this to be lost. It makes sense to cover this possibility by creating backups of our websites. We have lots of great plugins available to do this easily. There really is no excuse not to. While this use case, we're also going to make use of another plugin. Log out the plugin section and go down to the Add New, search for the one which we are going to be using, which is BackWPup. This is the one I'm going to be using, so click on "Install" and activate this once downloaded. Here we also have this BackWPup section. If we click on this icon, we can then go to the steps inside of this section. The first step is to check the installation, which will then take us to a settings page. You can see all of the information about our site and also the results of various tests. Everything seems to be fine inside of this section. Also if we do have any issues with this plugin, we need to contact the BackWPup support. We can also click this button just here to get all of this debug information, which we can also send without question. Everything is fine here. We don't see any problems. Then we can see all of the different terms which we have at the top. Most of these can be left as default. But we can also change things to change the maximum number of log files, which is inside the logs tab. This means we'll only save a maximum of 30 backup files. We can also choose to compress these, if you want to. From here, we can also select where we want these backups to be placed. Then we have the default location which is inside of our projects into the WP Content folder. Then from here, we can select exactly which folder we want to store this inside. Here we can see we are saving these inside of an uploads folder. I want to leave this as standard, but you can change this if you want to. Next back over to the dashboard, we'll then need to go to step 2, which is to actually create a backup job. First, we give his job a name, we want to call this the Weekly Backup. Then we can select exactly which pieces of information we want to backup. We want to backup the database in all of our files, and also a list of any plugins which were installed too. By default, we don't have the XML exports or the database tables checked. This is fine. Then we can select how we want to name our new file. The default button for our saved files is going to be the year, the month, the day, the hour in 24-hour format. The lowercase i, which is the representation of the minute. Then the lowercase s, which is the seconds. You could play around with this file name if you wanted to, but it's already saved in a sensible format. I'm going to leave this as it is. The zip file is fine. I'm going to back this up to the uploads folder which we've seen before. But if you wanted to, you could back this up in different locations such as Dropbox. You could be sent an email with the backup, and also various Cloud services which you see here, see this? Next we have the Schedule tab. From here we're going to schedule exactly when we want this backup to take place. We could not schedule it at all and just leave this as manual. We need to set this off manually or we're going to use a WordPress Chrome. This will allow us to schedule a particular day or time when we want these backup to take place, it's almost weekly. We can also set the day we want this to happen. Also the hour and the minute too, Sunday morning is fine by me, so save our changes. Then next we have the DB backup. Here we can select exactly which database tables we want to backup. Currently, all of our database tables are selected. But you can uncheck any of these if you don't want to include these with the backup, if you are unsure, just leave these as they are. We have the Files tab next. From here, we can choose to exclude any files which we don't want to include in the backup. For example, if you have various plugins which you don't want a backup, we can check these to exclude any of these. If we have some themes which we are not using such as the 2019 one. We could also check any of these to exclude these from the backups along with any old content from previous years, we can also exclude any of this data too. Next, we have the plugins, where all we can do inside here is change the file name and also add file compression if we wanted to. To Folder, we've already dealt with, this is the location where all backups will be saved. We can also change the number of files to keep in this folder too. If you've made any changes, hit "Save", back to the dashboard. Next, we're going to actually run the created job. Click on step 3. This will then take us to the Jobs tab, where we can see our weekly backup. Over this, we can edit this, and we can also run this backup immediately. Click on this and then give us a few moments to run through our first backup for our site. Once this hits 100 percent and this is finished, we can see when this was last run. We can also see the date for the next run too. If you want to check if this has worked, we can head into local. Let's open it up. Bring up the main admin and from this button, just on here, we can go into our saved files and folders. Inside of our project, we need to go into the app, public. As we've seen from the file location, this is inside of the WP Content, and we created this upload folder just here, and into here, then we can see a list of all of our content which has been saved. If we go into here, this is all of the content such as our background images, our headers, our logo. This is all of the file content now saved. Along with this, we see the logs and then if we go into the backups folder, we see we have one single backup. We can also see this if we go back to the dashboard and click on the backups option, there's confirmation of our first backup which we just created. We could also delete or download this if we want to. As you can imagine, backing up your WordPress site is really important. This is one easy way of doing it with this plugin. This is now the end of this project and also this section, so I'll now see you in the upcoming section where we want to learn all about WordPress e-commerce.
36. WordPress eCommerce: Project Setup: Here we go with our next project, and this one is going to be an e-commerce store. To begin with this, I'm going to create our new site using local. Click on the "Plus" icon in the bottom, and I'm going to give this the site name of shirtstore. Also remember, if you are using [inaudible] set up the project with the exact same instructions as we did previously. But I want to proceed with using local. Click on "Continue" with the preferred settings, then the username and password, which we're going to use to login to our admin of mine. Mine is going to be the shirtstore_admin. The password. You can use the same emails and passwords as you use in previous project. This is completely fine and it will still allow you to login to this new projects at the site. Also if using a MAC like previously, you may also need to add a password to complete the installation. Good, we're all done, and we can see our site is up and running, and just like in previous projects we can click on the "Admin" to be taken to the back-end of our site. We see shirtstore admin and also the password. Again, and this is all fine. We can also click on "Open Site" and take a look at the front-end of our default project. This is what we're going to do in this video. We have our site on our setup. In the next video, we're going to introduce WooCommerce to begin to transform our WordPress site into an e-commerce store.
37. WordPress eCommerce: Getting Started With WooCommerce: Now I have this empty WordPress store which has the current default theme. To transform this into a e-commerce store, we're going to need some additional tools. After this we're going to take advantage of WooCommerce. This is going to allow us to transform our sides in two ways. First of all, we'll make use of the storefront theme, which is a theme to transform the look and feel of our site to be more like an e-commerce store. Second of all, by the same author we'll also have access to the WooCommerce plugin, which will give us the functionality to transform our WordPress site into an e-commerce store. It provides all the essential features which we need, such as the ability to add products, to create shipping rates, add taxes, look after our inventory, to manage our stock, to integrate with payment providers and everything else which we're going to need. First of all, the theme, if you go to the marketplace, then down to the theme's link and inside here we're going to make use of the storefront themes. There is also child themes available and we'll take a look at what these are in the next video. Although we need the storefront framework and we can add this just like the rest of our themes inside the dashboard. But for now, we can take a quick look at what's included with this theme. It has pretty much everything which you would expect. It's fully responsive, which means our store will look great on all screen sizes. It integrates perfectly with the WooCommerce plug-in. It's search engine friendly, and it generally provides a great look and feel which we can use as a good starting point for our project. As with all themes, it is also fully customizable. We don't need to worry about being stuck with the exact default theme, as well as WooCommerce is own [inaudible]. It also integrates with the customizer so we can easily update all the brand in, the colors, the look and feel, and generally make it look exactly how I want to. WooCommerce has been around for a long time and it's well-developed, and it also powers tens of thousands of e-commerce stores available online today. Let's go over to our dashboard and we can first start off by installing our theme into appearance on the theme section on new and search for storefront. This is a [inaudible] needed just here, install and let's activate this and check this out on the front end. O2O sides and reload. We can instantly see that we have a change to our theme. Currently all we have is our default homepage which shows our single blog posts and also this sample pages here. Currently it doesn't look much like an e-commerce store, but remember, the purpose of the theme is just to change the look of our current content. At the moment, we don't have many pages, we don't have many blog posts, we don't have any products or anything like that setup. This is something which the WooCommerce plugin is going to provide for us. The second part, if you go back to the dashboard, is to install the plugin, press ''Add New''. Let's do a search for WooCommerce. This is what we need here by automatic and it recently updated and also compatible with our version of WordPress. This is going to give us our default pages. It's going to give us all of the functionality which we'll need to get started. If there is any extra functionality which is not included, if we're looking for something specialist, there's also many other third-party plugins too which we can integrate into our site. Good, let's activate this. The first thing we see is we're taken through some installation steps. We could also skip this as well because all of these options are available from the dashboard. I'm going to go through some simple setup steps. As well just add some dummy data. We don't need to add our exact address at the moment but what is beneficial is to also add the country. This is because this will let WooCommerce setup certain things based on our location, such as the currency and also some shipping rates too. After this continue or industry, these are still operates. We are going to be creating Asia store, so I'm going to click on ''Fashion''. Then we'll have a selection of different types of products which we are going to be listing. Then we can select what type of products we are going to be listing. Physical products are actual product which we're going to ship out to the customer at their location. We can have downloads which are virtual products, and then we'll also have various of options such as subscriptions, memberships, bookings, bundles and also custom products too. However, these are all chargeable, but we only need the physical products for now. Continuing on. I'm going to say we don't have any products just yet and also we're not selling elsewhere and let's uncheck all of these. We can also re-enable these later if we want to. Like the theme, we're going to stick with the default storefront. We also have some access to different paid and also free themes too. Now, we'll leave out jetpack but we can also re-enable this later on. Once we're done, we're then taken back to the dashboard. As with most plugins, this also gives us lots of settings inside the dashboard. We can manage our orders, our customers, our coupons and various other settings which we're going to go through during this project. We also have a dedicated product option two. Now this is enabled. Let's go back over to our front-end and refresh. Instantly we can see we have some more pages added to our menu. We have a shopping cart. We have not yet added any products to these cart, so this is empty. We also have a dedicated a checkout page. There's a customer account page where we can see things such as our previous orders. We can download any virtual products which we purchased. We can manage our addresses, our account details and edit any of these options as we need to. Finally, we also have the shop option. We don't currently have any products inside here. What we're going to do to give us a quick start is to add some sample data. This is just to things such as various products to get us started with our store. Of course, we will take a look at how to add these manually, but for now, we're going to go over to the dashboard into the tool section. Then we can import our data. This will use the WordPress importer. Since this is the first time we're going to be running the WordPress importer. We need to install this and then click on ''Run''. Here all we need to do is to choose our file which contains our sample data and then head to the location of your local project. Mine is in my user area and then into local sites, into the shirtstore, into app and then public. Then from here we need to go into the content and the plugin section. The plugins at the moment contains our Wordpress importer, which we commonly use in and also our WooCommerce plugin. This has a sample data folder which contains this XML file which we need to import our data. If you are using mum for this, you will need to go into the mum folder and then into the HD docs, and then into your share store projects. With this now selected, let's upload this. Because WooCommerce is creating things such as products for us, we also need to add a author or a creator. We can create a new one or can use our shirtstore, which we have previously setup. Click on the import file attachments and then submit. Good, we now do, we can click on this product's link and we can see what data has been included. I have lots of different products with our images, we have our stock keeping units, which is the product code. We have the in stock flag, we have a price, the categories. We can also add tags. Also with the store, we can feature all products to appear on the front page of its website, on the front-end refresh. Now because we are on the shop link, we can see all of these products and now displays. Automatically we have the buttons, you add any of these products to our cart. We can then view our carts and see all of the products which you've added. We can amend the details, the quantity. We can apply different coupons. We also have a checkout page. We can go through to the user, can add all of the billing details. We can see an overview of the order. Currently we don't have any payment methods available because we haven't set any up yet. We will fix this in a later video. Each one of these products, if we go back to the shop, also has a product detail page. We can click on these to be taken through full detail view where we can zoom in on the image. We have extended descriptions, additional information. We can see any previous reviews. Also when we set these products up, we can link these two related products too. This will allow us to provide upselling and cross-selling too. Great, this is now our theme and also our WooCommerce functionality all included with the plugin. Also just as a quick side note too, automatic which creates the WooCommerce plugin, is also the original creator of WordPress too. We're in good hands by using this plugin. Next we're going to take a look at how we can use child themes and why this are really important for WordPress sites.
38. WordPress eCommerce: Why Use Child Themes?: Just before we get to work with making changes for new e-commerce store, we're first going to take a look at what a child and also a Parent Theme is. So far, we've been using what's called a Parent Theme. This is a complete theme which we've been using in our previous projects, and also this storefront theme too. It was kind of like a main or a top-level theme. On the other hand, a child theme is a sub-theme which is based on a parent. Any current parent theme such as our staff runs, can be used as a base or a starting point. Then we can create a Child Theme which is going to inherit all of the styling and functionality from his parents. We are effectively selecting a theme, branching off this theme, and then it creating all changes to this new version. But why would we want to do this rather than making all changes to this main parent theme? Well, is various different reasons why we want to do this, and probably the most important reason is to preserve the original theme. If you make changes throughout theme from the dashboard using tools such as the customizer, changeable layout, changeable color schemes or menus, this is all completely fine. All this dashboard tools such as the customizer, is a safe and approved way to edit and update the look and feel of our theme. However though, if we want to go even deeper and go into our themes folder, we could add new files, we could add new template, we could update existing ones, and generally make more extensive changes. We do want to do this in a Child Theme. If you were to make any of these changes in the parent theme, it would still work completely fine. However though the problem arises, when we need to update this theme. If the themes offer create a new update and new security release, where generally makes any changes to the parent theme. Once we download this new version, all of our changes will be lost. However, though if we are using this theme as a template or a starting point, we can then make our changes to our child theme, and then we can safely update the parents. This also has many of a benefit too. For example, it's a good way to get a head start on creating our theme. We cannot make use of all of the tried and tested work from a proven theme. Then we can branch off it and create our own version based off this. It also allows us to organize our code better since we know exactly where all of our own custom changes will be stored. Also, if we wanted to, we could also create a different child theme based on this child theme too. Generally, if we are making any extensive changes to our theme, including any changes inside the files and folders. We do want to make a child theme to make this much safer. This is why we need a child theme. Next, we'll take a look how to set up a child theme for our current project.
39. WordPress eCommerce: Child Theme Setup: We now know what a child theme is, and what the benefits are of setting one up. For this project, I'm going to create one for the storefront e-commerce store. Before we go about making any changes to this parent theme, setting one up is pretty straightforward. The first thing we need to do is to go over to our project folder, so I'm going to open up Local, and then find the location of our folder. We can click on this "Shortcut" button just here, and then into the app, into the public, the content, and then into our themes directory. Here, we can see our storefront which we downloaded alongside the default themes which we downloaded when we set up WordPress. If you are using MAMP, go into the htdocs, and follow the same steps to get to the themes directory. We're going to create a new theme, and we're going to do this inside of a text editor. You don't need to know any coding to get started with this. All we need to do is follow a few simple steps. First of all, we'll create a new folder which is the new theme folder for our project. We can call this any name which we want. Give this descriptive. I'm going to call it the storefront-child, so we can easily recognize this inside the dashboard. You can use any text editor which you want to edit this. I'm going to use a coding editor called Visual Studio Code. You can download it from the link on the screen just here. It's free to use on Windows, Mac, and Linux. I'm going to use it to create our required files for this child theme. If you don't have a text editor, pause this video, and go ahead and download from this link, and then come back when this is set up. I already have this installed, so I'm going to open this up inside of a new window. All we need to do to get started is to drag over our project folder. We can see from the dashboard that this opens this up in the sidebar, and then we need to create two new files. The first file which we need to create, if we hover over the sidebar, we can click on this "New File" icon, or we can go to File and select a "New File" from here. This one will be called the style.css. CSS is a way to add any styling and layout to your website. We won't be adding any custom CSS to this project, but what we need to do inside of this style.css file is to add some required WordPress information. This information contains some settings which we need for our theme. To do this, let's go over to the browser, and head into this link up at the top. We need to go into developer.wordpress.org/themes/advanced-topics, and then into the child theme section. From here, we see the information which we've seen in the previous video. Then if we scroll down a little bit further, we'll see how to create a child theme. The first step is create child theme folder, which we've already done so we can skip this, and go down to Step 2. Step 2, we've already created our style.css, and then we'll see a sample of this declaration which we need to add into this file. After this, we'll "Command or Control C". Just before we paste this into our text editor, we see that the following information is required, such as the theme name, which we're going to add at the top. Then also a template. This template section is really important. This will point to our parent theme which we want to inherit all the information from. Back over to Visual Studio Code, paste this in at the top. Step 1, we'll change the theme name. This is any name of our choice. We can also add a theme URI, which is the location of the theme's website, if we did have one. We don't have one, so I'm going to leave this empty. The description of storefront child theme. The author, place in your name. You can add your website if you would like, followed by this important template just here. This is going to inherit all of the functionality from the storefront theme, so make sure this is correct. We can also add a version number for our theme if we want to, and a license. Then at the bottom, we see some sample tags. These tags includes any features which are available with this theme, such as if you have any light and dark modes, if it's a two-column layout, if it includes any sidebars, if it's a responsive layout, if it's accessibility-ready. Since this one is just a demo, I'm going to remove all of these sample tags. If you want to add your own tags into this theme, we can head over to this URL just here. We could see all of the available theme tags. We can just go ahead and create any tags which we want to. We have to use a selection of the tags from this page. For example, the theme subject, we can select a maximum of three of these, such as if this is an e-commerce store, if it's a food and drink store, if it's a portfolio. Then scrolling down, we have lots of other sections. If we have a certain layout, which is a grid; if we have a number of columns, if you have sidebars on the left and right. We can place any of these tags to let the user know exactly what layout options is included with our theme. The features. Many of these features, you will already know from the customizer, such as custom colors, custom backgrounds and headers, custom menus, if it supports featured images. We can add as many of these into our theme as we would like. If this theme is just for your own personal use, the tags really don't matter that much, but when they do matter, is if you plan to publish this to the theme directory over on the wordpress.org websites, into the theme section. If we go into the detail of any one of these themes, this is the location where all of the tags will be displayed. This is where the user can tell exactly what features is included with your theme. Back over to Visual Studio Code, and the last thing we need to take care of is this text domain. The text domain is an important feature. It's a unique identifier for our theme, and it's also used for translating our theme too. This must also Match the folder name for our project, so we need to change this to be storefront-child, and then give this file a save. The next file which we need to add inside of our sidebar, click on the "New File". This is the functions.php. We're not going to add anything inside of this file at the moment. This is a file which contains all of the custom functionality which we want to code into the theme ourselves. The PHP extension just means that this file will be wrote in the PHP programming language. We'll take a look at what this is later on. The final thing which we need to add into this child theme is a custom theme image. Provided with this course is some images which we can use for this project. One of them is the screenshot.png. It also includes a site icon which we can use in the browser, and also a couple of different images which we'll use in the e-commerce slider as we go through this section. To include this in our project, what we need to do is to drag over these screenshot into the sidebar. This will place this alongside our functions and our style.css. This is now the bare minimum which we need for our child theme, so the last thing to do is to actually activate this over in the dashboard, so down to the Appearance and the Theme section. Here's our storefront child theme, just here. We see this name of storefront child, since this is what we set inside of our style sheet, just here. Also, we see our image, which was the screenshot.png. Let's activate this. Now, over to the frontend of our site and refresh. We're going to see pretty much the exact same site because we've not added any customizations to the theme. As you can see, it looks exactly the same as it did with the storefront theme since it does inherit all of the styling and functionality. Just to confirm that we are using the child theme rather than the parent, we can go over to the style.css. We don't need to know any CSS for this to work. I'm just going to add in a simple few lines of code, just to check this is all activated. First, we'll select the body section, which is the main content of our page. Then, in-between the curly braces, just like this, we can set the background color to be equal to red. Now, if we save this file and refresh the browser, this change has now been applied. Just to confirm that this is only applied to our child theme, we can go back to the dashboard, and activate the parent them. Refresh. This is now only applied to this child theme. Since we now know this is working, we can remove this body section, and then reactivate the child theme. We can now safely make changes to this child theme. Know it's not going to affect the parent. This is now all set up, and we can now move on with the rest of our project, but just one quick side before we move on. Back over in the child theme section, there is also a Step 3, and this is to enqueue a style sheet. Inside of our child theme, we've created the style.css. Since this is a required file, our storefront parent also has one of this too, so Step 3 is a way to load up this style sheet from the parent. This is something which we generally need to do when creating a child theme. We have some functions just here which we can paste it into our functions.php. However, when using the storefront theme, this is something which will automatically takes care of for us. You don't need to head into this link. I just want to show you that this is already been loaded for us, so we can leave this out of our theme. We can see here we don't need to add this enqueue function since this storefront theme has already done this for us. This now leaves our child theme all set up, so we can now move on with the rest of the project.
40. WordPress eCommerce: Product Categories, Tags & Attributes: We have a child theme now sets up inside of our project. WooCommerce, as we looked at earlier on, gives us lots of different options which we have inside the sidebar. Have all of these options here and we've set up some of the basics when we first installed the plugin. We're going to go through some of these options in the upcoming videos, but for this one, we want to focus on the products and all of the additional information which you will need to add to our products. If we click on this, we can see a list of all the sample data which we brought in, in a previous video, needs to know all the sample products which we see inside of our shop. So in the next video, we're going to get to work on adding our own products and how we can edit them. For this video, just before we do this, we're going to take a look at how we can add all of the extra information which we need to add it to our products. This includes adding new categories, new tags, and also attributes. This is going to mean all of this information is ready to select when we add our own custom product. First into the category section, we can see over on the right, we have a list of all the categories which had been brought in with our sample data. This is just a way to categorize our products, so we can put them into certain groups. We can also use them for filtering our products on the front-end. It's really useful to have all of these set up into the bulk actions. If we select this top checkbox here, using the bulk actions, we can select this checkbox and delete all of the contents from the sample data. Then go ahead and create our own over on the left. First, we give this category a name and I'm going to go for T-shirts. This is the main category for our store. The Slug, which is a URL friendly version of our name. This name is usually lowercase and contains only letters, numbers, and hyphens. Let's go for t-shirts and this is going to appear at the end of our URL. So if we click on the t-shirts category, this would be our URL with forward slash t-shirts on the end. The Parent category. When we create categories for our products, we can either put these into a parent or a child category. A Parent category is the top level, and then we can have various sub-categories nested inside. Let's leave this as a top-level. We can also add a optional description if we want to, and then also set the display type. For example, if we were to click on the T-shirt category, we want to set what we can see inside the browser and we see a list of all the products which fall under this category. We see a list of all these subcategories if this is a Parent category. So for example, if we had two sub-categories called child t-shirts and adult t-shirt, would we see the sub-categories on this page, which we can then click on and be taken through to the appropriate products? Or instead, we could even show the products and also the categories on the same page. I'm going to leave this as the default and then add a thumbnail image and then go into the Media Library. We could choose any of these images which we'll have just on here. I'm going to go into the Shirt Store images which are provided with this course, and drag these into the media library. Like the t-shirts and the old text, then use this image for our category, let's add this. If you wanted to, you can go ahead and add multiple categories, but since this is a t-shirt store, I'm just going to keep this as a single main category. Next, down to the Tags option. A tag is just a way to add some additional information to our product. So we could tag it with certain information such as if it's a summer range, a winter range, if it's for male, female, if it's unisex, if it's branded, and lots of additional information which we may need. The first one, let's go for summer, also the Slug. The optional description, let's add this. We don't have any other tags over on the right, so these are all our own. Next, winter. Click this, then we'll go for branded. Let's go for unisex. Then finally, we add male and female. This is enough for now and all of these options will be available when we create our own custom products. Down to the attributes. Attributes is just some additional information to describe our product. Over on the right, we can see we have the color and the size already set up. This means we can create multiple versions of the same product but the only variant could be this attribute. We can have a t-shirt, and rather than creating a t-shirt in small, medium, and large, we could just create the same single t-shirt and create three different versions based off these attributes. Let's see an example of how we can add this. We already have the color and the size which are useful for our store. Let's add something else which is the sleeve type. The difference between our own custom one and these two which have been added, is these terms over on the right. The color has these various options. We have various sizes, but we don't have any terms for our sleeve type. For this, we click on configure terms and add our own custom options. For the sleeve type, let's first go for long sleeve, then Slug, and add this to our attributes and also the short sleeve. Add this. Now, if we go back to our attributes, our additional terms, and now alongside our attributes, let's go for one more. This one let's go for the style and then into our terms. This first one, we'll say plain. Well, this is for all the plain shirts, printed, and last of all, stripes. Back into our attributes, style is now there with our terms alongside. This is all I'm going to add for this video. You can add more if you prefer. You can obtain the categories, the tags, and attributes, and all of these are going to be available in the next video when we create our own custom products.
41. WordPress eCommerce: Adding Products: With all this in place, we now have all the information which we need to go ahead and create our own products for the store. Over to the dashboard and into the Products option on the left. As we already know, we have all these options which were created with the WooCommerce sample data. To edit or remove this, all we need to do is to hover over any of these products just like we do with a page or a blog post. This then reveals the options just below. These products also have a stock keeping unit which is a product code. We have a in-stock flag just here, and this is created because WooCommerce also allows stock management. We can set up a quantity for each one of our items and WooCommerce will alert us when we reach a low stock level. Price, and then we also see the categories and the tags which we added in the previous videos. We can click on this star and this is for a feature product. A featured product will appear in a special location on our site which has a dedicated area on the front page, and we'll take a look at this in just a bit. Also the published date. We're interested in adding our own products. This is laid out in a similar way to a blog post or a page, we'll just click on "Add New" and then we can add our first new product. I'm going to do stick with the theme of the t-shirts and call this a Ninja T-Shirt, and some information: short sleeve and in the color of gray, inside the brackets we'll say this is the small version. We can add a description, and this will show up alongside the product in the full product view. You can create any description which you want. I'm going to say,"Bring out the ninja in you with this awesome ninja t-shirt in gray. This short sleeve shirt is ideal for summer, manufactured in a cool, light weight material." Scrolling down, we have all of our product data section just here. First of all we have the product type which is a simple product. This is just a single version of a product, so a small t-shirt, we could have a medium t-shirt, and these are all separate stand-alone products. In the next video, we'll take a look at how we can automatically create different versions of the same shirt using a variable product. This is a physical product, so it's not downloadable or virtual, so we're going to uncheck these as well. A price, let's go for $19.95, and WooCommerce also gives us the option to add a sale price if we want to, and schedule this for a future date. Next inventory, like we mentioned before, this will allow us to update our stock levels and also to be alerted when we reach a low stock level. If you want this, you can keep this checked and we can set the current stock quantity. We can allow backorders which is a way for the customer to order a product if we don't currently have any in stock, then when we get our stock in, we can then ship it to the customer. Then also the low stock threshold which is the number when WooCommerce will notify us if it reaches this value, so let's add 10 different products inside here. We won't allow backorders and we'll keep this as two. If you want to, you can also restrict this to only sell one quantity at a time. Something else which is required is a SKU and this is a product code or a stock keeping unit. This is a unique value for these products, you can give this a random number or a random code. Let's have one say t-shirt, gray, and the size of small, which matches our description up at the top. We could also add a short sleeve inside here too. Next we have the shipping option where we can add the weight and dimensions and also add a shipping class if we want to. We don't have any of these shipping classes setup at the moment, but these are available inside of the WooCommerce options. If we have multiple products we can also link this to other products on our site. We can link this to products for upsells and also cross-sells too. Upsells is a way of offering the customer a higher value product which in turn brings in more revenue. A cross-sell is when we take the current product and offer the customer something else which they may also like to purchase too, and these items are all displayed to the user when going through the checkout process. The attributes whatever these are, these are what w added in a previous video. We can add the color, the size, the sleeve type, and also the style. First, let's add the color. This is the drop-down which we previously mentioned, I'm going to select the gray color. If we want to, we can click on the ''Select All'' button too. Next, we have the size, this was a small version. The sleeve type, this was a short sleeve. Then the last option was the style, plain, then save all attributes. In the advanced section, we can add a note to the user which is sent after they've purchased this item. This can be some additional information or some download instructions, but generally something very specific to this item. We can sell our product in a certain order and we can also enable or disable reviews too. At the bottom we'll have a short version of the description, and this will appear just underneath the product title. So let's copy the short version from our full description, paste this in, and this is all of our product detail now in place. Over on the right, we have a lot of similar options from the blog posts on the pages. We can set where we want this item to be published, whether we want this to be immediately or in a set date in the future. The categories, this is of course a t-shirt. We could also add some additional tags and also select from the most used too. In product image, you could upload a custom image for this or select one of the existing ones from here. This product was gray, so I'm going to select the gray T-shirt, the alt text for this product image. We can also add a gallery of different images if we want to. I think this is all the information we need. Let's click on publish and check this out over in our site. Refresh, make sure you're on the shop link just here. Scroll down and there's our custom product. We can click on this to be taken through to the additional information of the title, the price. This one here is our short description which we added at the bottom. We enabled stock control, so we see the number of items in stock. We can add this to our cart and there's all the additional information such as our product code, our categories, and the full description at the bottom. This is all looking good. Now go into the dashboard and into the product since this is a shirt so I'm going to remove all of the sample products which are not a t-shirt so the hats, the caps, the sunglasses. We can remove the hoodies and just remove any of these products which you don't want, your beanie, your belt. We can delete all of these with the bulk actions. Just before we round off this video, let's add one more product. We are going to create a medium version of this same product. We could start over again from the ''Add New'' button, or we can use all of these options as a starting point by duplicating this product. I'll remove the copy, and for this, all we need to do is to adjust this to be the medium version. The description is fine, the price is fine. Let's change this to be eight. The stock keeping unit also needs to be changed to be the medium. Remove the one since this was a duplicate, and then into the link products we can also cross-sell this. We'll also display the small version to the customer too. Everything else should be fine so let's publish this over to your old store. There's also our medium version, and we are left with just the T-Shirts inside of our shop. Good, so this is how we can add a single product to our store. Next we're going to take a look at variable products.
42. WordPress eCommerce: Variable Products: Previously, we added two new products, which was the same t-shirt in both the small and the medium size. To do this, we needed to create two separate products, and this could be a lot of work. You will have lots of different variants of the same item. To help with this, WooCommerce provides a valuable product option. This means we can add one base product. Using this example, this would be a ninja t-shirt, short sleeve in gray, and then we would use the attributes, which is the size, to create two separate versions of the same products. In fact, it would also create a large version too. This would save a lot of work, but see this in action over in our dashboard. First of all, let's add a new product. I'm going to go for the same item but this time in a different color. The ninja T-Shirt, short sleeve, and this time, this one is going to be in green. Let's also copy over the description, from the full description from here. Paste this is in. Previously, we've just used this simple product, but this time we're going to go down to the variable product. For the stock keeping units we'll remove the size and changes to be green. I'm not going to enable the stock management for this one. We can leave the shipping, the linked products. But this time for the attributes, we'll go down to the size. At this, select all of our values which is small, medium, and large. But this time we want to use these four variations. This means you will create free versions of the same product in small, medium, and large. Give us a save. Next, down to the variations option. From here, we can fine-tune the details for each one of our variations. So our small, medium and large. Or if we wanted to, we could create a variation from all of our attributes. For our smallest, go ahead and add a variation. The variation will be the size. Then if we click on this, we get a drop down option. We can customize all of the options for the single product. We need a price for this,19.95. This is going to be, in fact, the same for all of our three versions. But you could make this different if you wanted to. We can fine-tune things like the stock, the weight dimensions, and also the shipping in class too. Save this. Then go to add variation. This time, this is for the medium. Click on this, the dropdown. This will also need a price too. Save our changes. Then finally for the large, this is just now done. We can also copy the short description, paste this at the bottom. Put an image. This one was green so select the green version. Since we have not selected a individual image for our free variance, this is going to be the default image. Select the t-shirt category, and then we can publish this product to our store or to our site. This is the green version which you just created. Instead of directly adding this to the cart, like we can see with the other products, we now have the chance to select our options. We can choose a size, we have small, medium, and large. Then after selecting this, we can then go ahead and add this to our cart. If we did go ahead and change the details for each one of these versions, such as a different price, all this information will be updated when we select a different version. Scrolling down, we also have the generic description for all of these variants and also somewhat related products too. There we go. This is how we can add variable products to our store. It can really save us a lot of time, we will have lots of different versions of a similar product.
43. WordPress eCommerce: Home Page Layout & Slider: Welcome back. If we go to our Homepage by clicking on our site title over the top, all this home link inside the menu. We're taken to the Homepage, which by default, with any WordPress theme, is just a blog page. The start from the theme by default is no different to this, so what we're going to do in this Homepage is to transform it, to look more like e-commerce store. We're going to add lots of new sections. We're going to display our top rated products, our featured items, our items which are on sale, different categories, and so much more. To do this, we first need a home to actually place these into. Back over to the dashboard, and into the pages, Add New. This one is going to be for our Homepage. If we wanted to, we could construct this with all of the blogs which we've seen in previous videos. We could create all of these sections and if we go up to the top corner, into the block section, go down. We actually have a WooCommerce section with all of the different blocks, which can place into this page. We have full control over the customization of this. We can add categories, featured products, we can place in reviews, we can filter these down by categories, tags and attributes, and also at a price filter too. This is really flexible and we can go this way if we want to, or another alternative is to use a pre-built template which comes with this theme. Into the page tab in the sidebar, downside the attributes. We're currently using this default template. But WooCommerce also provides a Homepage template, which we can use as a quick start. Which is all we need to do, and publish this page and go over to our site, refresh. We don't see anything different just yet, the only difference is we now have two Homepage links. We'll fix this very soon. As we know from previous projects, to remove the blog posts from the Homepage, we need to go over to the dashboard, and change this from the settings. From here, head into the reading option, and then we can change this Homepage to display a static page, which is going to be the home. The posts, we can also change this to a block section if we want to create a new page too. But I'm just going to leave this empty for now. Save this. Now if we go back to our store and refresh, the Homepage has now been transformed, we have the title, we have the category section, we have the new product which we recently created, recommended, favorites, and also the Best Sellers at the bottom too. This is how it looks out of the box with WooCommerce. But we sometimes want to make changes to this, and make it more personal. For example, since we only have this T-Shirts category, we don't really want this category section to be displaying, and also would be good if we could remove this home texts too. To do this, we can add in a plugin by WooThemes, which is called Homepage control. This will mean we can edit the section, we can rearrange things, and we can also remove any sections too. Go to the dashboard, this is installed as a plugin. Let's add a new one, and do search for Homepage control. This is the plugin which we need by WooThemes, install this, activate until accesses plugin. We need to go into the plugins and then into the customizer. Customizer now has the Homepage control option where we can check and uncheck any of these sections which want to add or remove. But first of all, the Homepage content, if we uncheck this, which is just going to remove the home title. This is the one just here. We don't need this, the categories. It also remove this until we get some more categories to display. The rest of these are pretty fine as they are. We can also drag these, and rearrange these into a different order. We can customize this to display the sections in any order which you want to. You can also check out how it looks on a smaller screen. If you click on the mobile view, this reduces down all of the products to be the full width of the screen. Let's publish this, and over to Homepage on refresh. This is all now being updated. Another popular feature we see on e-commerce stores is a image slider, and this is often placed just below the header section. Like the previous project which we created, this particular theme doesn't include its own built-in slider, but this is fine. WordPress has a hundreds of slides we can use as plugins. Back over to the dashboard into the plugin section and Add New. You can choose any plugin which you want to, but I'm going to do a search for MetaSlider. This is one we need just there, install. Activate this plugin and we now have a option inside the slide bar. Down at the bottom. Click on this. We have a Quick start section and we can drop our images directly into here. But I'm going to create a blank slideshow with this button just here. This will then need to add multiple slides which are going to display our images. Provided with the images download is two different slides, which I'm going to now add. But first of all, the three for two on plain T-shirts. We can add this to our slideshow. We could enter a caption if you want to add some text to be overlaid, but since this already has the tags of three for two on plain T-shirts. I'm going to leave this image without the caption. We can also place in a dedicated URL. If you have a page that link this too. There's also search engine options where we can add things like the old text. We can crop the image, we can rearrange this into different locations. It's also further options if we add the Pro pack. Well, this is a paid upgrade. Over on the right, we can change the height and the width of the slideshow. We can add transition effects. We can show the arrows, which is the arrow on the left and right, the switch between these images. That's our second slide, which is going to be the free printing on your first-order. Again, we have all of the same options, but I'm just going to leave this as the default and then save this. You place this into WooTheme will have multiple options. One of the most simple ways of doing this, is to add this as a widget into the appearance, widgets section. Over on the left, we now see a MetaSlider widget, which we can now replace into all locations. Move on to this, just below the header, we can add this in, all to our sites and refresh. As our slider with our arrows, and we also have these buttons down at the bottom, to switch between these images, the slider, since it's place below the header will be visible on all of the additional pages too. But if we want to filter this down to only appeal on certain pages, such as our home, where we can do this, is by removing widgets. Then if we go back into our slideshow, down at the bottom, we have a How to Use section. We have the coding version, which is to copy this full PHP section, and we can copy and paste this into our page templates. This one needs to go into our theme, and then find the exact template which controls the Homepage. Or another way we can do this without any coding is to copy this orange section in the middle. Then we can paste this into any page which we want to. I want to go over to the Homepage. Then like we've looked at in the past, we paste this into one volt blocks. WordPress recognizes this is a short code, know needs to do is to update this page over to our site and refresh on the Homepage, and we don't see the slider appearing at the top. In fact, if we scroll down, we don't see it anywhere on this page. This may seem pretty confusing, but this is because if we go over to the dashboard, and then into the customizer, earlier when we setup our Homepage with his Homepage control plugin, we disabled the Homepage content. It's Homepage content was to remove the page title, and this was all of the content or all the blocks which is inside of our page. Unfortunately, this is also removing our slideshow block too. If we check this, we can see our slider, but we can also see our title at the top too. So how do we go about having a slider but not this title? Well, first of all, let's publishes. Then go back down to this additional CSS section. This have some different options of how we can remove our page title. If we wanted to, we could jump into the theme, and do some customization with the code. But instead we're going to be doing this with some CSS. CSS is just some code which you can add to the section, which is going to change the look and feel of our site. But we do this. We first need to crop the page title, so go to the dashboard, into the pages and click on the "Edit" section of our home page. We need to take note of this post number at the top, and this is the Homepage ID. What we need to do is a dot, page dash ID dash, and then your page number and mine is 76, and then dot entry, dash title, so this is our page number. Then this is the class which points to our page title. What we're going to do here is to set the display type to be none, semicolon at the end. This will remove all title on only this Homepage, publish this, and back over to our site. Go back to the front end, and now we have a slider in place for our Homepage. Also the page title has been removed. Now our site is looking more like an e-commerce store. Coming up, we're going to take a look at some further customization options by setting up some different colors I'm branding.
44. WordPress eCommerce: Customising The Look Of Our Store: Our site now resembles and functions like a e-commerce store. Looks like when many businesses, we also want to make this more custom to our own colors, our own layouts, and also generally make him more branded it to our own company or our own personal image. As with a lot of the customizations, we can go into the appearance and then into the customized section. Here, we're just going to add some custom branding and also some colors. We'll have lots of different options to do this on different pages. Or we can also add a same color scheme to all of our links, all of our texts and all of our backgrounds for each one of the pages. First of all, before we do this into the site identity, which you've been in before, we're going to first of all, this changes be capitalized, so this will be Shirt Store, and then the tagline which will be just underneath the subtitle. This one says custom and branded t-shirts. Then also, we can add a site icon, which is going to appear inside the top of the browser. From here, it's like this t-shirts, the old text, like this, I crop this to be the square-shaped to fit inside of the top. If we're happy with this, let's go ahead and publish this. We can see our icon up at the top, and then go back, and we can start to work through the rest of the options. The next one is the header. We can set a header image, but we don't need to do this. I'm just going to change the background color and also the text and links too. First of all, the background color, you can move this color picker and choose any color which you would like. But I'm going to go for the color which is a4c1c4, and it's just this light green color we see here. The text color, I'm going to select 43454b. Then the link color down on the bottom, this one will be f2f2f2, which is a white color. Publish this. Then back from header into the main options. The footer down at the very bottom, let's just keep this consistent with header and apply the same colors. The background, to match the header, was the value of a4c1c4. As this background color just here the text color, this was 43454b, and then the link color, which was f2f2f2. Publish this. Next, we can also tailor the color of these buttons too. This is the Add to Cart button and also the Select Options button for the variable products. This will have a dedicated buttons option just here. Also, if we wanted to change the background image or the color, we could do this with the background option. We can also change the typography color, which will apply to all of our site, rather than just the header and the footer sections. For the buttons, I'm going to use the same color which we've used in the background for the footer and also the header. This color was a4c1c4. Also, the lighter text color, which was f2f2f2. Publish if you are happy with these changes, then back to the main menu. We've already been through lots of the other options such as the layout. We can change the position of the sidebar and we can go to the homepage control, which we've already looked at. This is to rearrange these sections and also remove any of them too. The menus and widgets we've already covered. The homepage settings, these are also the same settings which we have from the sidebar. If we go to the settings I'm reading, this is just a chance to change the page which we use for the front page of our site and also which page is used for our blog posts. But we've already set these previously, but we also have some customer Woo Commerce options down at the bottom. We can set a stall notice, which we can enable to show on the screen if we have not yet published our site just yet. We can also use it for promotional messages and also if we have any certain events coming up. Let's enable this. We can see down at the bottom, this has been stuck to the bottom of our site. This is also useful for things which are sales, but also to let the user know if there is any planned maintenance in the future. Back from here, your product catalog, many of these options are just the same as we have inside of the products page or the Woo Commerce settings. We can setup our pages to show either products or just categories or a combination of both if you have chart categories. We can customize the sorting of these products, how many rows we want on the page and how many products for each one of these rows. But I'm going to keep this as default. The product page, we have the option to make the Add to Cart button sticky, which it currently is. This means it will stick to the top of the page. You see this. If we go into one of our products, we don't see it at the moment because we currently have the Add to Cart button into our view. But If we scroll this out of view, this is the popup just at the very top here. This gives us the chance to remove this if we don't want this to appear. The pagination. This is the buttons on the right and left, it's kept between these products. We can uncheck these. These are now removed, so we'll just have to focus on a single product. Next, the product images, we can set how we want the images, crop or upload new ones. Also an option to customize the fields inside of the checkout form too. If you wanted to, you could also create some additional pages for the privacy policy and also the terms and conditions. But I want to keep all these options as default as most of them are pretty standard for an e-commerce store. Publish any changes which you have made. Close this down, and if we go back over to our front-end and refresh. All the changes have now taken effect. Go down. We have the buttons and also the footer area too. From the top, our side title and our tagline has also been updated too. As a side note, if the width of the slide is an issue and you would prefer to have it wider, we cannot change this over in our homepage. The settings for this aren't available inside of the slideshow options because the width of this had been restricted by our Gutenberg block. Remember when we added this with our widget, this was a much wider section. If we go over to our homepage and then rather than pasting it, I will show a code directly just like this. What we can do is to add a new block and the block which we need for this, we click on the plus icon, is going to be this group. This group has some width options where we can select the wide width or the full width of the screen. Let's go for the wide option and then click on this plus icon. You can then add a shortcode. Let's first just copy this, the short code, and paste this in, update. If I remove this original slideshow, top, auto site and refresh. This now gives us a much wider slideshow. Next, we're going to look at how we can create some more pages, but this time using a tool called Page Builder to create some really flexible layout.
45. WordPress eCommerce: Flexible Layouts Using Page Builder: We already know how we can create pages from the dashboard with this Add New link just here. We've also looked at how to use the Gutenberg text editor to add lots of different content blocks to our pages. In this video, I'm going to show you a different way to create some pages. This is by using a plugin called Page Builder. Lets go back over to the dashboard and we can take a look at how we can add this to our site. First of all, this is a plugin so Add New. Then, I need to search for a Page Builder, that is filtered down. This is the one we need, which is Page Builder by SiteOrigin, install it, and this is going to allow us to create some flexible layouts, we can say how many rows and how wide each one of these sections is going to be. Then we can place in a different piece of content such as widgets, activate this, and as well as the standard widgets which come with WordPress. Page Builder also gives us some extra widgets too which we can also download. This, back to Add New, do a search for site origin widgets bundle. This is what we need here. Install this. Since these are by the same author, you expect these widgets to be fully compatible with this Page Builder. Activate this. There we go. If we go into the appearance and also the widgets area, inside here, we now have access to some new SiteOrigin Widgets. It includes things like buttons, image carousels, Google Maps, image widgets, and also a text editor. As an example, let's create a new page with pages and add new. This one is for a Contact Us page. Since this plugin is now installed alongside the visual and the text editor, we also have access to a new tab called Page Builder. To get started, we can click on the "Widgets", we can add new rows, or use some of pre-built layouts if we want to. We're going to pull these over on the left. Next, I'm going to start this with a new row. You'll see a preview of all changes. We also have this Live Editor button heading to here. First, let's add our new row, I'm going to add this with this button just here and this will give us the chance to rearrange the width of each one of our sections. We can make one side small or larger by clicking on this button in the center and also increase or decrease the number of columns too. Lets keep this as two, which is going to be evenly spaced. If you want to fine tune things such as the CSS, we can also give each one of these rows some customer information, such as a custom ID or a custom class, or we could also directly add CSS declarations into here if we wanted to. We can also fine tune the padding on the margin too. If you're not sure what margin and padding is, the margin is the space which we can add outside of this row. A padding is the space which appears inside of the row. We can customize all of these values on each one of the sides. If we wanted to, we could also customize a different value for the mobile layout and also customize the background color and the image too. I'm happy with these defaults so I'm going to insert this. Then on the left side, we can add some new widgets with this button just here. We can add any of the existing WordPress widgets or these ones with the blue icons, the ones which should be added with the SiteOrigin Widgets Bundle. First over on the left, we can add a text block which is some information about our address. Edit this. The title is for our address so we'll say, 'you can find us at', then a colon. Then just some sample address lines inside of here. Duplicate this. Line number 2, line number 3. You can also change this to be a list if you want to you by highlighting and clicking on this button just here. Insert this. We see a preview just here, and underneath a second text widgets. This one is going to contain the email and also the URL to our website. Edit this a title of useful contacts, email address, and also a URL too. Then over on the right we can add a different widget, highlight this area into the widgets. Over on the right, it may be useful to add something such as a Google map with the location of our store. We can go ahead and add this if we want to, but something which you now need with Google Maps is access to an API key. Google maps is free to use, but you do need to add a credit card on file. I'm not going to go through this for this project. It may be just something which maybe you may want to add in the future if you go live with your store. You can use this link at the top to be taken to the Google dashboard, you can create an API code if you want to use this in a project. I'm just going to leave this off, but it can be useful to add a map onto the contact page if you have a site which is going live. Have a play around with these, you can look through all of the available widgets. You can go ahead and create a lot more new pages. Also see if this is your preferred option for creating pages or if you prefer the original Gutenberg editor. Finally, let's save this, click on this permalink, and that's our new Contact Us page. Next we're going to also add this Contact Us page to our menu. Also look at how we can rearrange menus too.
46. WordPress eCommerce: Rearranging Menus: At the moment, our header section, it just has this one single menu, it has all of the links which have been provided by default when adding the WooCommerce plug-in. A couple of things to know with this menu is, in the previous video, when we created our Contact Us page, this has not been automatically added. We still have the sample page which we need to remove. We can also split this menu up into smaller menus if we want to. I'm going to break this up into two separate menus. One is going to be the user menu, which will contain links, such as the Accounts, the users' basket, and also the Checkout, and then another menu which is going to be more of a site navigation, and this will contain links to different pages on our site, such as the Home, the Contact Us, and also the Shop. First of all, let's review the sample page from the Pages link and just remove this single page. Then into Appearance and Menus. The first one, the first menu name is going to be the Navigation menu. This will be the primary menu location. This will be in place of this current menu just here, by this menu, and then we can add the pages which we want to display. This, l can View All and I'm going to go for the Homepage. The Contact Us, which was a new page which we just created, and also the Shop page. Add this. You can rearrange these if you prefer, but I'm happy with this order. Save this. If we click on the "Live Preview" at the top, we'll be taken to the Customizer view, which has the same options, where we can see all of these changes in real-time. There's all three new menu links in the primary location. I'm now going to create a new menu which is going to be at the top of our header, and this will contain the user related links. Create New. This one will be the User Menu location. This will be secondary, so this will appear at the top of the header, and now we can get to work with adding our links. Add Items. This is also going to link to some pages. I'm going to select the My Account, the Checkout, and also the Shopping Cart too. As we click it on these, these are added to the top of our header section. We can publish this, and make these changes live. Inside the menu locations, we also have this handheld menu too. This is a dedicated menu which we can display on the smaller screen devices. Click on the Mobile view just here. Then we can add a dedicated Handheld Menu. Go back. Create a new menu. Let's see, Mobile Menu. This is in the Handheld location. Next, and then we can add our items. Please select all of the pages which are available. Publish our menu. Now over on the preview, if you click on this, we can see all of the links which we have just selected. You wanted to, you could also rearrange these. It would make sense to have the home at the top. Save these changes. This is now being reflected inside of our menu. The tablet screen, this also displays the same menu too. Then when we go to the larger screen devices, our two separate menus are now displaying. Let's just refresh our store and check all these changes have been updated. There we go. There's our two separate menus, though in most themes we don't need to stick to the default menu or the default location. We can often place in multiple menus in different locations. Next, we'll move on to editing the footer area.
47. WordPress eCommerce: The Footer Area: The final contents, which we need to add to our site is down at the bottom inside of this footer area. We can add up to four separate sections into our footer, placing four separate pieces of content. The first section over on the left and the fourth section will be over on the right. We can place inside it lots of content such as widgets. We can place menus, bestsellers, top-rated products, and everything else we have access to in the widget section. To do this, over to the Dashboard and into the Appearance, then and Widgets. The first menu location of Footer Column 1 is going to be two separate menus. We already have these menus created from the previous video. We can reuse this inside of a widget too. To do this, drag over the Navigation Menu, and then select the Navigation Menu which you want to place in this location. First, User menu, Save this. We can also add our Navigation Menu too. We do this in the exact same way. Drag this over, select our second menu and then refresh the page. There's our first section. The second section, this is going to be for the address information. It's going to be a lot like our Contact Us page. Column 2. This is a text widget. Drag this into Column 2. Just like we did with the Contact Us page, the text, You can find at, and then add some sample address lines inside here. Copy. Add the same a couple more times. If you wanted to, you could also change this into a list, but I'm just going to keep this as regular text. Save this. Then just below, set up a second text block. Just like the Contact Us page, this will contain our useful contacts, the title, and then our text, which will be the email and also the URL. We can grab this from our Contact page. These is our two links down at the bottom. Paste this in and save this widget. We can check if this is working okay, back to the Home page. Scroll down to the footer, which is fine. Now we can move on to Column 3. Our Footer Area number 3, I'm going to drag over the Products by Rating, which is a list of all top rated products, and the default of five is fine. We load. This is just a shortened version of each one of the products in order of the top-rated. Generally, these widget areas are often enough for our needs because if we have a much more complex use case for each one of these sections, you can also make use of the page builder, just like we used for the Contact Us page. The page builder also has a widget too, and it's contained inside of this Layout Builder widget. Into Footer Area 4, we can drag this over. This widget area can be laid out exactly the same as one of our pages. We can split up our content into various rows and columns to give us a really flexible layout. I want to close this down and remove this widget, but this is a really flexible way to control the layout of our sections. Placing an extra column if you want to, but I'm going to leave this here. This is now all of the content on our store. In the next video, we're going to finalize this project by looking at all of the additional settings which comes with e-commerce, such as adding coupons, creating reports, adding different payment methods, and also the integrated order stream inside of our dashboard.
48. WordPress eCommerce: WooCommerce Settings & Managing Your Store: Not only does the WooCommerce plug-in and theme, it was the chance to build a fully customizable e-commerce store. It also provides us with a lot of the essential tools, which we need to run an e-commerce business, and most of these options are available in the dashboard underneath the WooCommerce option. First of all, before we go live with any store, we first need to check all of these settings, and we also need to set up our payment provider. Of course, it's essential to have our address details all set, and most this has already been settled for us from when we went through the installation wizard. For the address, we also need to filter down the shipping locations if we only ship to certain countries or areas. We can enable coupons, and we'll take a look at how to create these in just a moment, and also, make sure that the currency options are all correct too. As well as the currency, we can also add the separator and the number of decimal places so we can fine-tune how our pricing will look on our store. The products, most of these options are self-explanatory. We can change the units of measurement, we can enable or disable reviews and ratings, and also, if we have our product on a different page, we can also change this here too. The shipping options or something which is very specific to your country, and also the country which you want to be shipping to. We can set up various shipping zones, where we're going to catch a certain area and apply various shipping methods or prices to this one specific area. For example, if it was a hard-to-reach area with a certain zip or postcode, we could add a list of these regions inside here, and set up a dedicated shipping method for this particular zone. Then down at the bottom, we add our shipping method, and we can choose from a flat rate, which is a fixed price. We can add free shipping to this particular area or restrict it to be only local pickup. Of course, the payments is something which is really important in an e-commerce store. Unfortunately, WooCommerce allows us to link too many payment providers using different plug-ins, or we can choose from these default options. We can take payments via direct bank transfer, we can take checks, cash on delivery, or also, set up PayPal too, which is simple to do. All we need to do is to go into the setup section, and then set up our PayPal email address, begin to take our payments. Save these changes. We have an accounts area where we can do things like setting up a guest checkout so the user doesn't need to register before placing an order. We can configure the way accounts are created, and also change the wording for our privacy policy too. Emails, this is where we configure the notifications, which you use, I guess, at each stage of the checkout. So if they have placed a new order, if the order has failed, if it's been refunded, we can configure the message, which is then sent to the user. By default, WooCommerce already has some simple messages in place, but this is how we can change these messages if you would like to. The integration tab is a way to add geolocation services to our store, and you can configure them with this link just here. Finally, there's also an advanced section too. We've already looked at some of these options in the past, such as changing around our pages. We can use these if we want to create our own custom pages and assign them to certain functions. As well as all of these settings, WooCommerce also provides us with the ability to fully manage an e-commerce store. As you would expect, we have the chance look through orders. This is the page where all of the orders will come in when we've made a sale on our site. If you wanted to, you can also manually add an order. For this, we just add our customer's details at the top. Then we can place in different items from our store. So product, we can do a search, select any of these, and then add them to our order. We can create this order and also send this to the customer's email address. We can manage our customers from this link just here and we can see all of the customers, which have been registered to our site. We have lots of data on each one of the customers such as their order values, their regions, and also the address details. Coupons. We can create and manage coupons to give our users a discount off certain products. This is also really flexible. We can fine-tune exactly what products this coupon will apply to. We can set obey fixed price discounts, a percentage discount, a discount off a particular product or of the total shopping basket. This coupon can also be used to allow free shipping and we can also place an expiry date too. In the restrictions, we can place in a minimum or a maximum spend, for this coupon to apply, or also only apply it to certain products or categories too. Down at the bottom, this can also be restricted to certain customer emails too, if we didn't want this to apply to every user on our store. Finally, the usage limits. This one is pretty simple. We can set up how many times we want this coupon to be used, and also limit the number of times a particular user can use this coupon too. Also finally, when your store is up and running, we also want access to as much information as we can. We have a report section where we can find out lots of information such as our total sales. We can display this by the last week, the last month, the last year, or a custom date too. This data can be downloaded into a spreadsheet format. We can check our sales by product, the sales by category. We can check out how coupons are used. The "Customers" tab will show us how many orders for a registered customer versus a guest. Also, we have a stock tab where we can manage our low stock levels if we have enabled this inside of the product. As you can see, WooCommerce is more than just building a e-commerce store. It can be used to manage our full e-commerce setup. Also if it's missing some specific functionality, which you need, there is often a plugin available too. This is the end of our e-commerce project, and I'll see you now in the next section.
49. PHP Basics: Introduction: For this upcoming section, we're going to take a brief look at some PHP basics and how we can write some code which is got to help us in the upcoming sections where we're going to begin to create our own custom WordPress themes. Now, we don't need to be a PHP expert, all we need to do is to have some basic understanding. This will really help us to understand what is going on behind the scenes and how we can apply PHP code to our WordPress sites. Remember, in the course early on, we mentioned that WordPress is wrote in the PHP programming language. As we've already seen, if we just want to use pre-built themes and pre-built plugins, we don't need to know any PHP code. But we're now going to learn some of the basics which is going to help us with our theme development. PHP is a language which runs on a web server. So Just like early on when we set our WordPress which also requires a web server because of this. We also had two different option videos. We had option one, which uses local, and local sets up a web server and a database that allow us to build our WordPress sites. Now, local is really great for hosting WordPress sites, but it's not so great at just letting us play around with some regular PHP. For this upcoming section, we have a couple of different options. Early in the course, as an alternative to local, we also looked at how we could set up a WordPress site using MAMP. If you have come with this option, you can go into the htdocs where you will have also installed your WordPress sites. You can go ahead and create the PHP files in here, just like we did with the upcoming videos. Or alternatively, if you were not using MAMP, if you have continued with this course using local, you can use an alternative which is an online playground. This is one of them, which is T-E-H and then playground.com. This is a quick and easy way to write our PHP code and see the result over on the right-hand side. In the upcoming videos, we'll we write our PHP code, which will start just like we have done here. Instead of writing it inside of the text editor, like we do in the videos, you can instead write the code in here. We'll be doing something like this. We'll be setting up variables so we could store our name, such as Chris, and we'll echo this name. Don't worry if this doesn't look familiar, we are going to be covering exactly what this does in the upcoming videos. Once we've wrote our PHP code, just like we do in the videos, click "Save and Run". Then we'll see the outputs over on the right-hand side instead of what we do in the videos, which is to run this inside of the browser. Just to recap, for this upcoming section, we need to run a webserver to run our PHP code. If you've been following along, so far we had using local. The two options which you have to continue is to either install MAMP or you could use a online PHP playground just like we see here. Alternatively, early on the course, if you chose the MAMP option, you can also continue using this if you prefer. Let's jump into the next video where we'll take a look at our first PHP code.
50. PHP Basics: Hello world: Okay guys, so this video is all about getting started with PHP. We're going to take a look at the basic PHP syntax, the way it's wrote out, and do a hello world example. To get started, we're going to go over to the ht-docs inside your local host, and then create a new folder. I'm going to call this folder the PHP basics. Then drag this folder into your text editor. I'm going to use brackets by Adobe, and then drag that into there. To get started, I'm going to create a PHP page to start working with. Create a new page, with Command or Ctrl N, inside the brackets. First of all, I want to save this page as hello-world, and make sure it's got the PHP extension at the end. Save that inside PHP basics. Then we need to create a basic HTML skeleton to begin with. I'm using the Emmet plugin. If you're not using that you'll need to type this out manually, but if you do download Emmet, all you need to do is type in HTML colon 5, and then hit the tab. Then that fills in all the HTML:5 skeleton for you. Let's call this the hello world. Now let's get to work within the body section. To work with PHP, we need to provide a opening and closing tag. The opening tag in PHP looks like this, it's the angle brackets, question mark, and then php. This indicates the PHP code is about to start. Then at the end of the php, we need to add a closing tag, which is the question mark on the right angle brackets. All the PHP code goes in between here. The first thing we want to do, is just print some text to the browser. I'm going to do that with a echo. Type in echo, and then because this is going to be text we need to put it in quotations, so, "Hello World." Then at the very end, we close a statement with a semicolon. Save that. This is how we print something to the browser, using PHP. Go over to your browser, and then type in the local host. Then go to the file that you've put inside the ht-docs. It's php-basics, and then hello world. There we go. Displayed in the browser is our text that were just echoed of Hello World. We can mix and match PHP in amongst the HTML. Instead of having the title as typed in there, we should have what is called hard-coded. Instead of typing on to there, we can open up the PHP, and then do the echo, Hello World. Make sure the PHP is closed off, with the question mark on the angle brackets. Save that. Then if we, "Refresh", we should now see that the title at the top of Hello World, is now being produced with PHP. Just make sure we'll type in PHP, and then, "Refresh". Now we all see this is being generated with the PHP. We can mix and match the PHP in amongst the HTML as we only have the opening PHP tags, and the closing PHP tags properly set. Comments in PHP is similar to lots of other languages. We can comment out some code that we no longer need, or we can use a comment to type in some notes for our self, or of the programmers that we want the program to ignore. For example, if we no longer wanted to display this, and we wanted the program to ignore it, we could use two forward slashes. You can see the text editor makes the line go gray. We can tell that's being commented out correctly. If we "Save" that, and then "Refresh", that should disappear, because it's no longer being processed. Let's just remove this. Comments are also useful for creating notes. We can make a note to ourselves, saying display Hello World to the browser. This is what's called a single line comment. If we just want to comment out a single line of code, we just use the two forward slashes. If we want comment out more than one line, we can use that with a multi-line comment. It's a forward slash, and a star. Then we can comment out more than one line. We'll paste in Hello World two or three times, and end that with a star and a forward slash. This is how we comment out one line, and this is how we comment out more than one line. In this whole PHP section, only the single echo of Hello World will be displayed in the browser. Before with the title, we looked at adding PHP in amongst the HTML. We can also add HTML tags in amongst PHP. These will be displayed in the same way as if they were HTML. For example, in the echo Hello World, if wanted this to be a HTML level one heading, we could put the HTML tags of h1 before the text, and then we could put a h1 closing tag after this. Then instead of being displayed as normal text, this will now be a level one heading. If we "Save" that, and then "Refresh", we now get Hello World as a heading in the larger font size. You could put in any targets that you want. We can do the same, while this has a h2 and "Save", and let's go over to the browser, and there's our level two heading also. That's basic PHP syntax. That's how we can echo or print texts to the browser, and also how we can comment out code as well as combine PHP with HTML.
51. PHP Basics: Strings , variables & constants: Welcome back. In the last video, we took a look at some PHP basics, such as echoing texts to the browser, comments, and also how to make PHP and HTML. In this video, we're going to move on to taking a look at strings, variables, and constants. I'm just going to delete the code between the PHP tags from the last section. First of all, we're going to take a look at strings. A string is a sequence of characters, such as a single letter, a word, or a sentence. A string is what we used in the last video, where we were doing a echo. We printed a string between quotations. This is a string. Don't forget the semicolon at the end. The string must be surrounded with either a single or a double quotation. They both work perfectly fine. So echo and then this time a single quotes. This is also a string. Let's take a look at that on the browser while refreshing. This is a string and this is also a string. Most of the time it doesn't matter if we use single or double quotes. The only time it really matters is if you want to surround one of these words with the quotation marks. For example, if you wanted the word string to have the quotations printed on the screen, we need to make sure that the quotations we use around the word are opposite to what is surrounding the sentence. So if we save that and then refresh, the word string has the double quotes. But if were to do this and all had the same style of quotes, save that. The text editor has picked up a issue, so it's making a different color. If we were to refresh, we see the local host page isn't working because we've got a error. But if we change this to be single quotes and then the surrounding ones back to double and then refresh. That's how we can add single and double quotes within a string. There's lots of other ways we can work with strings by using string functions. For example, if we wanted to reverse a string, I'll just use this example there. If we wanted to reverse a string, we could use the string reverse function, which is strrev(). Then we need to surround the string inside the brackets and then save that. Then let's check out the browser and see what happens. That reverses all the characters inside the string. So it's now back to difference. We can also do other things such as make all the words uppercase or lowercase. To make them all uppercase, we can use the string to upper function. So strtoupper(), and then save that and then refresh, and now all the characters inside the string are uppercase. We can do the same way string to lower. So strtolower(), save and refresh. Now there's no capitals at all in the string. Of course there's many more different string functions which you can find with a quick Google. Search for PHP string functions. We are instantly taken to a list, and is either a PHP.net or W3schools, which has lots of examples. As you can see, there's quite a list. There's lots of different things we can do with strings such as split a string into an array. We can randomly shuffle all the characters in a string. We can check out the length of the string, which returns the number of characters. Have a play around with these. You may not have a need for these two functions which I've just shown you, and I'm sure if you work with PHP regularly, you'll come across many of these different functions. Next we're going to move on to variables. Like many other programming languages, PHP uses variables as containers for storing information, and the information inside these variables can change. I'm just going to delete this string. The way we declare a variable is by first using a $ sign and then assigning a variable name. For example, number one. I'm going to set the value to be equal to a string, a number, a boolean, or various other things. I'm going to set the number one to be equal to ten. When we're dealing with numbers, we don't need to put the quotations either side of it. What we're doing is create a variable with the name of number one, and we've assigned the value of ten to this number. Then we can do the same. We can create a second variable. This time I'm going to call it number two, and this time I'll set the value to be 20, and now we can use the echo that we looked at before. Instead of echoing a string, we can echo the variable name, number one. Now it just got printed to the browser the value of ten. Refresh and there's our number ten. We can also add variables together. We can echo the value of number one, plus the value of number two. We should now get 30 in the browser. We can also combine strings with variables. If I have a variable, so the number of posts, let's set that to be seven. Then we have a variable name. The variable called name assigned to a string. I'm going to call that Chris. If the user called Chris has created seven posts, we can then print this to the browser. Echo, and then because it's string, we need to put this in quotations. If we wanted to print Chris has seven posts, we could start with the variable name. Place our name, so that will be Chris, and then has, and then we want the value of posts, so put that into there. Currently it says, Chris has seven, and then posts, and then like we mentioned before we can put a HTML tag inside there. I'm just going to add a break tag into there. Let's save that, and hopefully we should get the value of Chris has seven posts which we do, so that's working fine. I mentioned that values of a variable can be changed. If we go back to our number example, so number one equal to ten and then echo number one. Now we should get the value of ten, print it to the browser. But further on down the program, if you wanted to change the value of number one, we can reassign the value. Number one, we can change that to be 20, and then when we echo number one, we should get the value of 20, print it to the browser, which we do. This is because the program is read line by line. When it gets to line 11, number one is set to the value of ten and then moves down to the next line, and then realizes that number one is now set to 20. When we echo number one, we have the value of 20. The last thing I want to look at in this video is constants. On constants, just like variables, can store some information or store a value. However, unlike variables, the value can change once it's been set. This is how you set a constant in PHP. First of all, we use the define function or the define keyword to declare a constant, and then we open up the curly brackets. Then we need to pass in two parameters. The first parameter in-between the quotations and in capital letters is the name of the constant. For example, if you wanted to store the value of your own name, we can call it name, and then separated by a comma. We add the value of the constant. This will be my name, and then a semicolon at the end. We've defined a constant with the name of NAME, and then we've added the value of Chris to this constant. We can print this to the browser in the same way as before. All we need to do is echo the name, and then we should get the value of Chris inside the browser. There we go. That's how we use strings, variables, and constants in PHP.
52. PHP Basics: Data types & operators: Welcome back. So far in the last couple of videos, we've taken a look at how variables can store data in PHP. We've looked at numbers or integers, and we've taken a look at how we can store them into variables. An integer, we can have various different types. You can see some examples such as a positive number, a negative number, or a hexadecimal number. We've also taken a look at strings, which you know is a series of characters. I may comply the strings in different ways such as single or double quotes. But there's also many different types of data that we can use in PHP. For example there's a boolean. A boolean is a simple true or false. So for example, we can see if something returns true, and if it does, we can perform a certain action. There's also a data types such as arrays, which we'll look at in the section. But next we're going to take a look at some PHP operators. So to begin, we're going to take a look at some arithmetic operators. Let's use our number example we looked at before. So number one equal to 100. A second variable of number two equal to 200. Then we can do an echo. So echo number one plus number two. We should get a value of 300 in the browser. So this plus symbol is a arithmetic operator. It adds the value of number one to number two. We can also take these values away with the take away symbol. Now we'll get minus or negative 100. We can also multiply, and to do that in PHP, we need to use the star symbol. We get a value of 20,000. We can also divide with the forward slash. We can also find out the remainder. We can do that with the percent symbol. The percent symbol gives us the remainder after the division. To do this, we need to change the values to something more suitable. Number one equals 10. Number two is equal to three. Then refresh and we should get the value of one. The reason why is because three goes into 10 three times and then leaves a value of one as a remainder. So let's take a look at some more examples on the W3 Schools website. Go to W3 Schools and then PHP operators. Let's scroll down. We looked at some of the arithmetic operators, which you can see here. There's also assignment operators. The most basic assignment operator is the equal symbol. We have looked at these in previous videos. We assign the value of 10 to the variable name of number one. There's also other assignment operators, such as addition, subtraction, multiplication, division, and the modulus, which is the remainder. There is also comparison and logical operators. We can check if two values are equal or less than or greater than. But we'll take a look at these in more detail in the if/else statement section. We can also increment and decrement the value. We can increment, for example, a value by one or we can decrement a value by one. We'll look at increment and decrement operators more in the loops video. But for now, let's take a look at a few basic examples of how we can use them. So we've had a variable called number, and we simply set this to the value of one. If we echo this to the browser we just get the value of one printed. But we can increment this value by one every time, by setting the variable name of number and then using plus plus. Save that. Now the value of one should be incremented by one. Then we should get printed to the browser, the value of two. Refresh. Sorry a semicolon on the end of that, and then refresh. Then should be the one of that and save. Refresh the browser and then we get the value of two. We can keep repeating this. If we wanted to increment by one once more and take the value to be number three, we can add that and again, and then we should get the value taken to three. If wanted to decrement, it, we could use the negative symbol and if we use it twice, we should get the value of negative one. Refresh. There we go. The value of one gets decremented to be zero and then decremented again to be negative one. So that's a quick look at data types and operators in PHP. I'll see you in the next video, we'll take a look at PHP arrays.
53. PHP Basics: Arrays: Welcome back guys. In this video we're going to take a look at php arrays. So in previous videos, we looked at variables, which are great for storing data which can be changed. However, they can only hold one value, but if we wanted to store more than one value, we need to use an array. We can store as many values inside of that array as we like. This is how we create an array using php. So there's two different methods I'm going to show you. The first one, we can set the array's name, just like a variable name. I'm going to create an array of shapes, and then set this to be an array. Then we need to follow the array key word, with the curly brackets, and then a semicolon. All we've done there is create an empty array with the name of shapes. To add some values inside of this empty array, let's use the array's name, and then followed by a set of square brackets, and then we need to put in the index number. We start with zero, which is the first position of an array. I'm going to set this to be the first shape, so a square. This now adds the value of square inside the array, and let's add one or two more, so shapes and then position one. This can be a circle, and then shapes, position two, so a triangle. Okay so we've set an empty array to have the name of shapes, and then we've added three values to the array of square, circle and triangle. So to check if this is working, we can do an echo, so it's echo the array's name of shapes, and then the elements of the array that we want to print so let's start with number two. So you should print out to the browser the value of triangle, so save that, and then refresh, and there we go. That's the position number two of the array, which has the value of triangle. Let's change this to number one, so we should get the circle. This is quite a long way of writing an array. There is a simpler way to write an array, this is by using the literal method. So instead of what we're doing above, we can set the array's name of shapes, and then we can set that to an array, and then we can put the values straight inside the array. First of all we can put in the square, and then separate by commas, the circle, and then the triangle. Let's just delete this one for now, and then we can do the echo just as we've done before. So let's echo the name, which is shapes and then in square brackets again, we need to put in the index number, so let's start with zero, which is the square. Save that and then refresh, and we'll get the value of square. So either of these two methods worked perfectly fine. So a few videos ago, we took a look at string functions, where we reversed the order of the string and then we changed the text to be uppercase. Arrays also have similar functions, and as a list of available functions are php.net, but I'm just going to go through one or two examples, just to show you what we can do with array functions. So the first one is the count function, which counts the number of items inside the array. We use the count function, and then we'll put the array's name inside the brackets, so we can delete that zero. You should echo to the browser, the number of items inside the shapes array so refresh. There's three items inside the array. This also varies over functions such as, the array pop, which removes and returns the very last item from the end of an array. To do this, I'm going to create one more variable. I'm going to call it the lastshape. So the lastshape I want to grab is a triangle. To grab the value of this, I'm going to set this value to be equal to array_ pop. Then to drop the value of triangle, or the last item, we just need to put in the name of the array, which is shapes. So now what we've done is we've set the last item on the array, inside this variable name. Now we can just echo this variable name to the browser, and we should get the value of triangle. So echo the variable name of lastshape, and then refresh, and there we go. So that's the value of triangle. We can also find the minimum and the maximum value of an array. Let's create an array with numbers this time, so numbers is equal to an array. We don't need to put any numbers inside the quotations. Let's just put some numbers inside there, and then we can echo. If we wanted to find out the largest number, we could use the max function, and then inside the brackets, the name of the array, which is numbers. Now we should get printed to the screen, the maximum number, which is 67, which we do. We can also replace max with min, and we should get a value of one. Okay, great. So that's how you can create an array using php, and also some basic php array functions. So thank you and I'll see you in the next video, where we'll take a look at php functions.
54. PHP Basics: Functions: In this video, we're going to take a look at how we can use functions in PHP. A function is basically a block of code. We assign a name to this block of code and call it Juno program, when we want to run it. It's really useful when we have the same code more than once in our program and rather than type all the code over and over again. We can place a code inside a function and call the function when it's required. PHP also has lots of built-in functions I would disposal. We've looked at one or two of these in the last few videos. We get started by creating a function, by using the function keyword, and then after that, we then give the function a name, followed by the parenthesis or the brackets, the name can be myFunction and then use the brackets after, and then the contents of the function is within a set of curly braces. Every time this function is called the code inside these curly braces will be run. For example, a basic way of given function is just a echo. My first function, on its own, this function doesn't do anything until we'll call it, and the way we call it is you simply by typing in the function name, myFunction, and then the parenthesis followed by a semicolon. Now when we run myFunction, we should get the text of my first function print it to the browser, and inside the function, we can even have different variables inside there. Just like we looked at a few videos ago, we can use a username. Username equal to Chris and the second variable of posts equal to 5, and then we can echo to the screen. Chris has five posts, echo within the quotations, the username has five posts, now when we call this function, we should get the message to the screen within the echo. Save that and then refresh the browser, and we can take functions even further, by passing in parameters. Let's create a new function, and if you want to create a function to multiply numbers. This time, instead of just leaving the brackets empty, we can pass in two parameters or even more. I'm going to use this to multiply two variables. Variable Number A and then separated by commas, variable Number B. Every time this function is called, want it to multiply the value of A with the value of B. Let's echo variable A, multiply by variable B, and then passing the numbers will call the function by its name. Multiply numbers and the two numbers that we want to multiply will compass inside these brackets. Twelve and two for example, now when we call this function, we now have the value of 12 multiplied by 2. We should get the value of 24 on the screen. Great. What we've just done is we've effectively created a variable of A and B and then needs to take up the values of 12 and 2 and then multiply them together and display the results to the browser. That's how we work with functions in PHP, and it's also how we can pass parameters into functions and I'll see you in the next video, we'll take a look at conditional statements and more operators.
55. PHP Basics: Conditional statements & more operators: Welcome back. In this video, we're going to take a look at conditional statements and some more useful operators. Conditional statements are used when want to check if a certain condition is true. If so, we can then tell the program what to do next. For example, we can check if a user is logged in. If they are, then we can show the user's information on the screen such as the username. Let's first get started by looking at the most basic conditional statements, the if statement. I'm going to begin by creating a couple of variables to work with. Use a dollar sign, and the first variable is going to be loggedIn. I'm going to set this to a Boolean value. If you remember that could be true or false. Let's initially set that to true. Then the second variable, this is going to be the username. This is a string. I'm going to add the username into there. Then we're going to use a if statement to check if a condition is true. I'll begin by using the if keyword, and then after that, a set brackets. Inside that, this is the condition that we need to check against. We want to check if the user is loggedIn. Let's test if loggedIn is true, just inside the variable name of loggedIn, inside there. Then we add the pair of curly braces. If this condition is true, then we run the code which is between the two curly braces. As an example, if our user is loggedIn, we're just going to echo to the browser a message to you saying, welcome back. Then a comma, and then we can just add with the period or the dot, the username, which is stored in the variable called user. Then don't forget the semicolon at the end of the statements. Just save that. Then we're going to go over to the browser and then refresh this. Great. We've got the message saying, "Welcome back, Chris," because our condition is set to true. If we change this to be false, we shouldn't get anything on the screen, so our message is not displayed. Such a basic if statements. Now we're going to move on to taking a look using comparison operators. I'm going to head over to the W3Schools website. I'm on the comparison operators section. We can also use these comparisons with if statements. So can check if two values are equal. The double equals is for checking if two values equal volume. It's also a triple equals, which checks if the two values are equal value and also the same type. By type we mean if they're both a string or they're both a number. We can also combine with an exclamation mark to do the exact opposite. This will be not equal. We can use the less than or greater than symbol to check if condition is less than or smaller than. We can also use less than or equal to, or greater than and equal to. Let's put these inside our if statements as an example. I'm just going to use a new variable. This is a number. I'll set this to be a initial value of 10. So now, which again, if the variable of number is greater than five, then we could do a echo saying statement is true. Such a checked out. Our number is greater than five, so we should get the statement is true printed to the browser. Let's just check that and refresh, and of course we do. If we change this to be less than, this of course is false. It's actually disappear. Just like on the W3Schools website, we can check using any of these operators. We can use less than or equal to. We set this to be 10. This is of course equals to 10. This statement should be true, which is. We look before at the double and the triple equals symbol. Let's begin with the double equals, and rather than number, let's put this inside the quotations. Let's turn into a string, sludge or save that and refresh and see what happens. We've got the statement as being true. Although the values above 10, this is classed as a string because in the quotations. Let's just put a third equals symbol into there and save and then see what happens. We'll use the taxane statement is true. This is because using a triple equals checks both the value. The value is equal and also the type. The type is not equal because this is a string and this is a number. Using if statements are really good if we only want to test against one outcome. But if want to test against more than one outcome, we need to use a if else statements or even else if. Let's first begin by using if else statements, and that just changes back to be a number. If number is less than 10, exchanges to be number is less than 10. As you know, this time will check if the number is less than 10 and then print this to the screen. But we can also provide a second outcomes test against in case this is not true. We can use the else keyword. Then inside the curly braces, we can provide a second echo. So number is not less than 10, and the semicolon. We'll initially check if this statement is true. If not, this will be printed to the screen. Let's save that and then refresh. Number a is not less than 10. Of course it isn't because it is number 10. We can just put a nova operator in there. Test if the number is less than or equal to 10. So save that, and we should now change to say a number is less than 10 or in fact equal to. But what if we wanted to test against free or more conditions? Well, this is where else if comes in. I will just put these on separate lines just to make it a little bit more readable. In between the if and the else, we can change this to be elseif and then use the brackets for a condition to test against. First of all, we're checking if the number is less than 10. We can then use the elseif to test if the number is equals 10. Again, the variable of number equal to 10. We change this to be number is 10. Then finally, if these options are both false will get the backup. When he said the else statement back in today as a fall back. This time we can echo number is not less or equal to 10. Let's test this. First of all, we'll set the number to be less than 10. We should get number is less than 10 and refresh. So number is less than 10. If the number was changed to be equal to 10, because we should get this statement of number is 10. Then finally, if the value is greater than 10, so change to 14, we should get a number is not less or equals 10. So refresh. There we go. That's how we can use if else and else if statements to test against multiple outcomes. The final thing we want to take a look at in this video is logical operators. Let's go back over to the W3Schools example. Let's take a look at logical operators, which is a little bit further down. As well as the tests that we use before, the test if conditions are less than, greater than, or equal to, for example. We can also use the and operator to check if more than one condition is met and or. We can also check if one value or nobody is true. Also the exclamation mark to test if a condition is not true. We're going to start by creating two variables, so number 1 and then also number 2. This value can be 10. Then we could remove everything else apart from the if statements. If we wanted to test against both of these conditions rather than just one, so if number 1 was equal to five, I also want to check if number 2 is equal to 10, so we can use the double ampersands or the and word. So I'm going to use these. So number 1 is equal to five and also number 2 is equal to 10. So echo statement is true. Just change it back to be the dollar. There we go. Of course both the statements are true, so we should get this print into the screen. But if all these if statements return false, we shouldn't get anything at all. Let's change that to be two. Of course, number 1 is not true when the both of these to be true for this to be printed. Now if we save it and refresh, we should get the message removed. But we could change this to be or, which is the two pipes. Just like we've seen before, we can use the two pipes or the or operator. Now we only need one of these statements to evaluate to true. Number 2 is true and number 1 is false. Now they should get the message printed again on the screen. That's your test data, and then refresh, which we do. Such that follow this video. That's a basic look at conditional statements and some PHP operators. Thank you, and I'll see you again.
56. PHP Basics: Switch statements: In the last video we looked at if-else statements and how we can use them to tell the program what to do, based on if a certain condition is met. Now we're going to move on to look at a switch statements, which is a great alternative to the if-else statements if we need check against many conditions. I'm going to get started by creating a variable called favorite food, I'm going to set this to be a string of pizza. Then we're going to use a switch statement to check many different types of food and then check if there is match up with the variable of favorite food. To begin a switch statements, we use the switch keyword. Then inside a set of buckets, we then pass in the variable, I want to check against. Place that inside there. Then just like the if statement that we used before, we then use a set of curly braces. Then within these curly braces, we can put in all the expressions that we'll want to check against and then also provide a outcome if this expression is met. With switch statements, we check against different cases, so we use the case keyword. The first case we could check if the favorite food is a curry. Let's test if this is equal to curry. Then we need to use a colon, and then once we've done the colon, we can then provide an outcome if this is a match. I'm just going to use a echo and then I'm just going to say, "I love curry, " with a semicolon at the end. Then after each one of these expressions, we need to use the break keyword with the semicolon. This breaks out of the switch statement if this is true, and if not, we just move down to the next case. We use the case keyword again and this time I'm going to check if the case is Chinese. Again, the colon and the echo of "I love Chinese." Then just like before, we use the break keyword, and then one more. Case and this time "Pizza." Echo, "I love pizza." If this is true, we can break out of the switch statements. That's how we layout a switch statement. There's one more piece we need to add into here before we test it. We need to write a default case, just in case any of these expressions above don't match. This is more of a backup, so default and then the colon, and then I want to echo, I don't know. Let's save this and test it. You can probably work out what's going to happen here. We've got our favorite food, say it's pizza, so we should get the case of pizza matched up and then echo "I love pizza." How'd we do? Let's just change this to be Chinese and that should change to "I love Chinese." Then curry, that works fine, I love curry. Now we'll test the default, so we can change this to be "Pasta." We don't have a case for pasta, so we should get the default of "I don't know", which we do, so that's good. That's how we can use a switch statement in PHP to test against multiple outcomes.
57. PHP Basics: Loops: In programming, we can use loops to make repetitive tasks much easier. For example, we can loop through all your friends' names inside a database, and then display them onto the screen. This saves type and on the same line of code over and over again for each friend. In this video, we'll be taking a look at the four types of loops we can use in PHP. We're going to begin with what's called a while loop. While loops basically run a block of code as long as a condition is true, so let's take a look at what while loop looks like in PHP. I'm going to create a variable set to be one. A while loop is set out a little bit similar to a if statements that we looked at a few videos ago. But the while keyword, the condition within the brackets to test and then the outcome to perform between the curly braces. I want to start by checking if our variable of number is less than 10. While our number is less than 10, we're going to create a echo of number, and you will just type yourself first, and then I'll explain what it's doing. It's less than 10, and we'll also need a braid second there, and you'll see why in just a moment. Then the variable number, we're going to increment with the plus plus. You may be looking at this, a wondering what is going on. Basically we're creating a loop, and we'll start to test if the number is less than 10, which it is, so in that case we're going to print out number, so it'll be number 1 is less than 10. Then once this is printed, I'm going to increment the number by using the plus plus, so this will change the value of number to number 2. Then this condition is still true because number 2 is still less than 10. Then the second time around on the loop we should get printed, number 2 is less than 10. Then again it's incremented, and then number becomes the value of 3, which again is still less than 10, so we'll get the text printed to the screen. Number 3 is less than 10, and so on. This keeps repeating until the condition is no longer true, or in our case, until we get up to the number 9. Let's change it back to 1, save, and then refresh. There we've also got number 1 all the way through to 9 to be less than 10, and that's why we needed to insert a break tag just so each one of these is on a separate line and it's more readable. The next we're going to take a look at a variance of the while loop, and this is called a do-while loop. The while loop that we just looked at will only work while a condition is true. However, the do-while loop will always run once first before checking if a condition is true,s o the code between the curly braces will always run a minimum of once. Let's take a look at how we can do a do-while loop in PHP. We start with the do keyword, and then we can just leave the brackets there because this is going to run once whatever we do. We're going to print to the screen the value of the variable number and then a break tag, so it's on its own line. This section will always run and am going to write a while, and this is the condition we are going to test against, so while number again is less than 10. Whatever we do will always get number printed to the screen, and then the loop will continue while a condition is true. Because this condition is true, we should get a loop all the way through to 9, in fact this needs to put the increments inside there, so number plus plus and save, and then refresh. We've got the values all the way through to 9. Let's see what happens if we change this to be the greater than symbol. Of course, 1 is not greater than 10, so this is false. Using a while loop, we wouldn't get anything printed at all. The do section will always run once, and then we shouldn't get anything after that. Let's test this, and we'll just get the number 1 because the loop does not repeat. There's two more types of loops we can look at in PHP, the for loop and the for each loop. Next we're going to take a look at the for loop. For loops are useful for when we know how many times we want to repeat the loop. A while loop will run until a condition is no longer true whereas a for loop we need to set how many times the loop will run. Let's take a look at the for loop. We use the for keyword and then the brackets, and of course the curly braces, just like the other loops, but this time we need to pass in three parameters into the brackets. The first volume we need to enter is the initializer, and this is effectively going to be like old variable that we used in the while loop. I'm going to set the variable once more of number and then we're going to initialize this to be 0. Then each one of these parameters need to be separated with a semicolon. The second parameter is our condition to test against, so I'm going to use the number variable. We want to test if this is less than or equal to the value of 5. Once again, the semicolon, and the third one I'm going to use for incrementing. Every time we go through the loop, we're going to increment the variable of number by one on each loop, so number plus plus. Just like the other loops between the curly braces, we're going to echo the number, so number, and then the variable number, and then the break tag, and don't forget the semicolon at the end, that's what for loop looks like. Once again, we begin by saying a initial value of 0, and every time we loop around we check in if the value is less than or equal to 5, if it is, we are going to echo the number, and also increments by one on each loop. Lets save and then refresh. Great. We've got all the values, we've got the initial value of zero, and then we loop through until we get to the value of five. The last type of loop we'll look at in this video is the for each loop, it's designed to work on arrays. In the arrays video, we looked at how to create an array and how to print a value to the browser by selecting it by its index number just like this, so we had an array name shapes, and we set that equal to an array with the values of square, circle, and also triangle. Then if we wanted to display any of these values inside the browser, we need it to echo the array of shapes, and then inside the square brackets, we need it to select the shape by its index number, so 0, 1, and 2, so triangle will be number 2, so we get the value of triangle. Create a new echo for each array item, can be a long boring task, and in programming, we should always try to avoid repetition. Let's take a look at how we can create a for each loop. We don't need this echo because we're going to do this inside the loop. Begin a for each loop with the for each keyword, and like the other loops have a set of brackets and then the curly braces. The first thing we need to do is pass in the name of the array, so that is the name of shapes. Then every time we loop through the shapes array, we need to store the values inside a new variable, so do this by declaring as and then a new variable name, so I'm going to call this value, and then let's create our echo. Because all the new values are stored into our value variable, we need to echo out the value variable, and then we'll put a break tag inside there and a semicolon, so that's how a for each loop is laid out. Every time we loop through the shapes array, we'll install these values inside a new variable, which we've called value, and also with each pass of the loop, it also moves on to the next item in the array. This means that the loop will continue to live through all the values of the array until it finds the last one. Let's say this and then refresh the browser. There we go. We've loop through the first item, the second item and the third, and that's a lot more convenient way of printing out all the values of an array rather than selecting each individual index number. I hope this video leaves you with a better understanding of how loops work in PHP.
58. PHP Basics: The Codex: Hi everybody. So I hope this section has given you a better understanding of PHP basics, and that knowledge will come in really useful, in the next section where we are going to be building our own custom WordPress theme, and convert an existing website to WordPress. So as you go through the next section, we'll be referring to the WordPress Codex, quite regularly, which you can find out the codex.wordpress.org. So the Codex is the online manual for WordPress. It's a repository for WordPress information and documentation. It covers pretty much everything you need to know about WordPress, including theme developments, plugin developments, and how to contribute to WordPress, and get involved with yourself. We'll be using it a lot in the next section to browse through function references. So for example, if we want to know how to work with a particular function, so such as the tags, we can type in the search, and then look for the function reference, which is the tags, and then we can find out exactly how to use this particular function. We can find out a description about the function. We'll also have an example of usage. So we can often just copy and paste the function into our own theme. So this particular one includes the tags which are associated with a blog post, displays them on the screen, and you can often find out small information such as the parameters, which the function takes in. So for example, this one takes in before, after and a separator. So before and after simply sets which text to display, before and after the individual tag. The separator is a value such as a comma or a dash which you wants put in between each one of the tags, and if you don't quite find the function that you're looking for, scrolling down to the bottom, often has a list of related tags, which you can take a look at, and find exactly what we want. So it's worth bookmarking the Codex as a great resource for learning new things about WordPress, and also for checking up on example usage for things such as functions, and we'll see more of the Codex as we go for the next section. So thank you, and now we'll move on to the next section, where we'll convert a existing website to WordPress.
59. Theme Development: Database setup & WordPress installation: Welcome back guys. I'm sure you're all eager to get started we're creating your own WordPress theme. As usual, like the previous couple of projects, we're going to get started by setting up the database and also downloading the WordPress folder from wordpress.org Let's begin by making sure the MAMP is all up and running. Then if we go to the start page, we can then begin setting up our database inside "phpMyAdmin." Under "Databases," we want to create a new database; this is going to be called "pro-headphones," which is the name of our static website that we are going to convert, then hit create and that's all we need to do inside there. Then next we're going to go over to wordpress.org. As usual, just download WordPress, then select the latest version. I'm sure a few seconds to download. Into the downloads, and then unzip the package. I'm going to call this "pro-headphones" and then save that. Then open up the "htdocs;" I'm going to open a new window, then go into the "Applications," and then "MAMP," the "htdocs," and then drug over our new website inside there. I'll just close these down. Then you should know what to do next by now; we need to go into the local host, then into our new pro-headphones folder, then we'll start by going through the country; so select your country of choice and then we can go to the installation script. So let's go, the database name was "pro-headphones," username again was "root," root password: the "localhost" and the table prefix I'm going to leave as default. Then run the installation. The site title is of course, "Pro Headphones," the username: "proheadphones-admin" or your username of choice. Of course, just for demonstration purposes, I'm just going to call this "proheadphones." Confirm you use a weak password; that's fine, just for this demonstration, and set an e-mail, and then install, and then login. I'm going to check "remember me," and then click "login." We're good to go. So that's a database and also WordPress installed. Good. Make sure you get to the stage where it's all working before we move on. I'll see you in the next video.
60. Theme Development: Underscores starter theme: Okay. So before we start this video, we should be all wind WordPress. We should have all installed on our local host and also the database and all ready to go. You should have already downloaded the static template, the pro-headphones website, which is being supplied with this course. In this video, we're going to download a WordPress starter theme called underscores. So I'm just going to go over to Google and then will search for underscores starter theme. Then this is the URL we need, which is underscores.me. So underscores is not like the themes we'll find on theme forest or the themes that we find on the WordPress homepage. These are all complete themes which basically ready to go and ready to start adding your own colors and you own touches. However, start theme is exactly what it sounds like. It's a base to start building on. It includes all the WordPress required files and folders and includes many WordPress best practices. So we can think of it as a quick stuffy theme. Many of the top themes out there on sites such as theme forest is built on top of the underscore start theme. So it's a really solid foundation to build on. So if you take a look on the homepage, you can see all the things it's included, such as the style sheets, different layouts, things such as custom headers, 404 templates. So it just basically saves us a lot of work would stand out. So to begin, all we simply need to do is to generate our theme. So I'm going to call this the pro-headphones-wp and then click on "Generate" and then you should set off a download. So let's open that up and then unzip the package and this is going to be our new theme folder for us to begin working on. So let's open up a New Finder Window. Then I'm going to head over to our MAMP folder and then let's find out WordPress folder inside the ht docs. So pro-headphones and then we need to add this into the theme section. So WordPress content, themes and then just drag this over into the theme folder. Let's open and look inside. So inside there is everything we need to begin working with for our new theme. There's various page templates and things such as the 404 page, the functions and all the basic pages that we need, such as the index.php, the page.php, the layouts folder, folder for adding languages, JavaScript and also neatly organized we have the parts templates. So we're good to go. So I'm going to go over to the WordPress Dashboard and then go down to Appearance and then Themes and then there's our pro-headphones theme. So let's activate this and of course you can change the image if you like. So just activate that and then let's visit the site. It's very basic at the minute, but it's meant to be a starter theme for us to build on. So we'll begin in the next video by adding the header and the footer sections.
61. Theme Development: Understanding WordPress / PHP templates: Welcome everybody. In this video, we just want to take a few moments before we start our WordPress theme. Just to look at the differences between traditional HTML websites and how WordPress deals with themes. This is a pretty standard look in index.html page would often have a header and a footer section at the top and bottom of the page. It's quite common to have a sidebar if it's something such as a news or a blog website, and of course a main content section in the middle. Usually all the contents or all the HTML for these websites are all stored inside the same file, but we often find with HTML websites in certain areas, particularly the header and the footer area. We have the same code on every page. The header and the footer is often the same, and the index page, the About Us page, and the contact page. We end with quite a lot of duplicate code from the website. WordPress deals with things a little bit differently however. On the left-hand side we've got our traditional index.html, and on the right-hand side, we can see how WordPress or PHP in general can be used to split the various sections of the website. Each one of these sections can be placed in their own file with the PHP extension. As you can see at the top of the page, the header, we code the code out the header section, and we place it in its own file called header.php, and this can also be done in WordPress with the sidebar.php and also the footer.php. The content area is often done a little bit differently however. There can be more than one template file which controls the view for each page, or even the WordPress loop, but we'll look at these in more detail as we go through this section. Once we have all of these PHP files or each one of these areas saved into their own templates, we can then populate the WordPress page by using various WordPress functions. For example, the header.php file that we just saved can then be included inside the WordPress template by using the get_header function, and is also the get_footer and get_sidebar functions amongst many others. Once again the content is dealt with in a slightly different way, and you learn more about this again as you go through the rest of the section. This is what it looks like actually in code. On the left-hand side, we've got a code editor and a fairly common layout for WordPress page. At the top, you can see the get_header function, which pulls in all the contents of our header from its own separate file. The content, and in the case of this particular file, it's being pulled in from a pop sound play called page, and its varies over ways of including content into WordPress websites. We'll look at one or two of these techniques as we go along. Further down the page, we've got the get_sidebar function. Then at the very bottom, we've got the get_photo function. Doing it this way has many benefits. For example, if we wanted to change one area of the header, such as adding a menu link rather than go into the About Us page, the index page, the contact us page, and change the link on every single page. In the case of WordPress would just need to go into the header.php file, change it once, and this will change the header on every page of the website. I hope this overview gives you a slightly better idea of how WordPress deals with pages and page templates. Now let's move on to the next video, we'll create the header and the footer.php files, and then we'll bring over the content from our static website and add these to the new files.
62. Theme Development: Header & footer sections: Welcome back. So now we know how WordPress deals weighed page templates. We know how WordPress split things up into various sections, such as the header and the footer. In this video we're going to get to work by creating the header and the footer section, and then convert the parts that we need from all static site into WordPress, and then include knees into our theme. On the desktop I've got a copy of the static website, which is being supplied with this course. Now I'm going to open up my text editor. I'm going to open up the brackets, and the first thing I want to do a is drug into WordPress theme folder from inside the htdocs. Drag the pro headphones folder in to that. Then I'm also going to drag over the static website and then just leaves on folder when we need it. I'm going to go back to the WordPress theme, and then we're going to start in the header.PHP section. If we look down all the files and folders, we should see the wp-content. In fact, we'll make this a little bit easier for ourselves. Go to pro headphones, content, themes, and we'll actually just drugging the theme folder. I should make it a little bit easier. Go into the header.PHP file. As you can see, this is the header for our theme. On this section includes all the area in the header section, all the way down to the opening content tag. A lot of this will look familiar if you use to build in normal HTML websites. We've got the usual HTML tags, the head section, various meta tags, the viewport tag. Then a little bit further down we've got the closest head section, and then the body section. I'm going to go down a little bit further and find the header section. Look for the opening header section, and then look for the closing at a section which is the masthead area. I'm just going to actually delete this header section, and then we can replace it with our own header section. Go over to the static template on the HTML version, and then we'll go into the index.html. Then to replace the delete section, go down to our header section. I'm going to copy all head action all the way down. Actually we'll keep going to the feature section, because the headphones images is always at the top of the website. I'm going to also include this in the header. I'm just going to copy that section, and then go back over to our theme folder. In the header section that we just deleted, just paste this new in to that. Let's save that. Now if we go over to the web browser and then refresh. We can see we've got a change. The new header section, it doesn't look much other mineable we've actually got some of the content appearance. There's the link for our logo, we've got the menu items. We've got a search bar, and also headphones image. If you open up the HTML version, so index.html, you can see that this is the areas that we've copied, the navigation, the search, and also the large image. It's installed at the minute, but the main thing is that it's all linked and it's all working. Now let's get to work with replacing the photo section. Save the header.PHP, and then if we go into the sidebar and look for the footer.PHP and scroll down. We need to basically do the same thing that we don't have the header. Delete the existing food section, and then go over to our template on the desktop into the index page, and scroll down right to the variable on, and then look for the footer section. Copy this all the way back up to the opening footer tag, and then back over to our theme. I make sure this is pasted in the same area that we just deleted. Save, and then now when we refresh our website, again is a change the area that we just added, the contractors, the about us section, the address on also the text of the bottom is all appearing. You can see it's the same information that's included at the bottom of our HTML version. That's how we can add the header and the footer section. Just one more thing before we move on, I just want to show you the index.PHP page. You can see at the top of the page there's a function called get header. This is pulling in the header section, and then scroll further down. We've got a get photo function. This is pulling the contents of the footer. Rather than having all these areas placed in one file, we've got them all segregated into the own sections, and then we're just pulling them in with the various functions. It also gets sidebar, which will work with later too. I'm just going to leave this video there, and we'll come back in the next video and we'll start working with the CSS to make the website look more like our HTML version. I will also add in the images such as the headphones images to make them available for the new WordPress theme.
63. Theme Development: Adding the CSS & images: Welcome back, guys. We've now got the header and the footer area now into our WordPress theme. They don't look much like the finished website. This is because we need to bring over the CSS and also the images folder from our website template. Let's begin by opening up the folders. I'm going two open up to found the windows. So this first one on the left is the static website template and I'll open up one more window. I'm going to open up the WordPress theme from the htdocs. Let's go down and look for MAMP, htdocs, pro-headphones, and then inside the content, the themes. Okay, so the first thing I want to do is to bring over the CSS folder into our theme folder. Just copy and then paste this into our theme, and then while we're in there, we can also do the same for the images folder. Copy and paste or drag those over. It can get to work, include these into our theme. So first of all, I'm going to go to Google, and then I'm going to do a search for WordPress, including CSS, JavaScript. What we need is the WordPress developer website, which is included in CSS and JavaScript. Let's take a look at this page. This page of the WordPress site will give you all the information that you need to include CSS and JavaScript into your theme. If we scroll down a little bit further. We're looking for the combining enqueue functions. This is going to give us a demonstration of how we can add stylesheets and also how we can add JavaScript files in one single function. Normally need to either copy this section or type out, just like we did in the last project, and then add it to our functions file. But because we're using the underscore starter theme, this has already been included in the functions.php file. That's already there photos. You may be wondering why we need to enqueue scripts and also enqueue stylesheets, rather than just add them in the head or the photo section, like we do with normal HTML websites. Well, the reason we do that, is because WordPress deals with many different themes and plug-ins. It makes sure that all the required scripts and styles are loaded as and when required. So there's no conflicts between different plugins, and it basically just loads in a weigh that everything works together, rather than different scripts fighting against each other. Let's head over to our function.php file, which is just in there, and the function we need is located towards the bottom. This is what we need. We take look for function pro_headphones_wp_scripts. This is the function to enqueue the scripts and also the styles. Let's take a look at what's going on. First of all, we've got a wp_enqueue_style function. This is pulling in our stylesheet, which is located just there. This is the style.css. This is gotten in by calling the get_stylesheet_uri function. It's done in enqueue_script. The script is in enqueue, is in the js folder, which is just underscore provides a couple of JavaScript files to get started. One for the navigation, and then a second file called skip-link-focus-fix. This is the file which helps with accessibility for keyboard users. We're going to work with our stylesheet next. As I mentioned before, we've got the style.css file being included by default. Let's grab all our custom CSS, that we've included in our CSS folder, and then go to our custom.css. These are all the custom styles, which have been provided for the headphones website. I'm just going to Select All, and then Copy, and then go down to the style.css, and then I'm going to add these right at the very bottom. I just scroll down and then add these into the bottom. In fact, we'll just add a comment. We just copy this comment section and paste this in before other custom styles. Custom styles, and then save that. As we've just seen, there is already quite a lot of styles, which had been included by default with the underscores theme. A lot of these styles are useful to begin with. But of course, if there is any styles which have been added, which conflict with your theme, feel free just to remove any of these. Well, I'm just going to save that, and then go over and refresh our theme. Now, you can see that there's been some changes. We've now got the dark footer area and also a little bit of styling to the other areas of the website. You can seen our custom styles have been taken into effect. Now, the custom styles have been copied into the style.css. We can actually just delete this custom style from our CSS folder because that's no longer needed. We notice that inside the CSS folder that we just copied over into our theme. There is more than one CSS file. Now we need to get to work with linking all the rest of the stylesheets. The stylesheets for the foundation framework, that we've included with the static website. Also, stylesheets for the foundation icons, which we've also used. Let's add these links now in the functions.php. We add these in by duplicating the wp_enqueue_style function. I'm going to duplicate this and separate it, so it's more clear. I'm going to work with the top one because the bottom one, just like when we're working with HTML, needs to be our custom stylesheets so they need to be in the correct order. The top one is going to be for our foundation CSS. Let's give this a unique name "foundation CSS", and then we need to add the file path. So the get_stylesheet_ uri refers to the main template directory, which has the style.css but in our case we've got a separate CSS folder so we just need to concatenate or add-on to the end, the rest of the link. So the "dot" to add this on, then open up the quotations, "/css/foundation.css" and it should take those inside the CSS folder and then link to the foundation.css file. Next we're going to duplicate this two more times, and we'll just separate these out. Next, we need to add the "app.css". So we just change the name to app.css. Again it's in the CSS folder, but we just need to change this to "app". Then the third one is for the foundation icons. So the ones we want to add is the "foundation-icons.css". So we change the name to be "icons", and the CSS folder. This time there's a subfolder called "foundation-icons/foundation-icons.css" and save that. Actually, just one thing we need to do first is [inaudible] the "stylesheet_uri", which we used as the main stylesheet, which needs changes to "get template directory", so "template_directory_uri". So just copy that and replace all three. Paste those in. This "get_template_directory_uri" takes us to the main roots of the theme, and then we just add on the extension. This takes us to the correct file. Let's save and then hit "Refresh". Now that looks a little bit better. You can see that some of the custom styling has been added in. Those are the links for the icons at the bottom. Also if we go into the developer tools, right-click and "Inspect" if you are using Chrome. Let's open up the "head" section at the top. We can also see that our stylesheets that we just added should be listed here somewhere. There's our foundation.css, that's seen, good. We've got the app.css, we just added, the foundation-icons too and then finally our style.css file. They are all linked. We can also do the same thing that we just doing for the stylesheets by adding extra JavaScript files, by using the wp_enqueue_script function. All we need to do is just do the same as above by copying the function but changing the filename to link to our custom JavaScript files. Let's save that. The last thing I want to do in this video is to include the headphones image so the headphones image we added in the header.php file. This is the image here. We need to add our image in the WordPress weigh. Inside the quotations for the image source, we need to add a PHP function so open up the PHP tags, the opening and closing tags. Then inside there, we need to add "bloginfo". Then open up the brackets and then the quotations. To add the file path, we need to do this in a similar way to the stylesheets. Let's use the "template_directory". I'll just make this a little bit wider. Add a semicolon after the brackets. Then we need to join on the rest of the file path. After the template directory, we've got the images folder so let's just add this onto the end, and then add a forward slash before the image's folder. I hope that makes sense.We're using a PHP function called bloginfo, which is plugin to the template directory and then we're adding onto the end the image's folder and the rest of the file path to take us to the headphones image, which you just done. Let's save that, then go over to the website and refresh. There's a little problem there, let's see what that is. The function template directory, actually this needs to be on the same line, it needs to be continuous. Let's save that. Let's just try that. There you go. Now our head section is looking more like our finished version. Also the footer area at the bottom is also looking like the finished website. That's all our CSS now taking effect. There's still quite a lot of work to do but if you come back in the next video, we'll continue with the homepage by creating the front-page.php.
64. Theme Development: Converting the front page: So far in our WordPress version of the website, we've got the footer area and also the header area, pretty much completed. In this video, we're going to continue working with the front page by creating a new page template called the front page.php. If we go over to our underscores template, you can see there's various different page templates, such as the page.php. If you take a look at a topic and see that this is the template that displays all pages by default. This will be the page template which is used unless a more specific page template is created. Let's take a little bit more of a look at WordPress page templates. Head over to Google and just going to do a quick search for codex templates hierarchy. What we need is the Theme Developer Handbook. Once we're in the template hierarchy section, we can see that this explains all the different page templates. It shows us which template controls which individual page. First of all, we've got the visual overview, which you can click on and see how the templates are arranged. If you scroll further down, we can begin with the homepage display. We've looked at so far and it's caused the WordPress blog posts by default displayed on the home page. These are controlled by either the home.php template. If this doesn't exist, WordPress then looks for the index.php. We'll go on to using the index page, the blog later on in this section. In this video, we're going to focus on the front-page.php template. This is the template file used to render the websites from page. You can see below the priority of page templates. The main one is from page.php. If this doesn't exist, WordPress looks for the home page template and then if that doesn't exist, it uses the default page.php, which we looked at before in a template. Then lastly, if no other page can be found, it uses the index.php template. Of course, feel free to scroll further down and take a look at more information about the single pages, single posts, and also how we can create different page templates for different categories and tags. But I'm going to get to work with the front page.php, head over to the WordPress theme. I'm going to create a new file inside this one's going to be called fronts-page.php. To begin, I'm going to copy all of the contents from the page.php, select all and copy and paste this into our front page. We don't need the comments at the top because this is the default page template for displaying the front page. Will also going to be including our own html from the static website deletes all of the html from the medulla. You can also delete the sidebar and save that. This is because our Finnish version doesn't have a sidebar on the front page. Now we need to go over to the WordPress Dashboard and we need to actually create a new page, go to "New" and then "Page." This is going to be a page where we can link our front page template to. Let's call this home. All we need to do is hit publish, and then go over to the settings, down to the reading tab. We need to change our front page to display a static page. The one we need to display is home, and then save that, so let's visit the site. Now this is the front page and all we've got is the heavy section on the photo section. This is because in our front page template, we've only got the header and the footer function. Now we can drop the main page content from our static website. Go over to the Pro headphones and then the index.html. We've already included all of the header section. We've already included the feature section. I've got little bit further down when it copy the main content. Everything from the section with the ID of range, all the way down to the footer area, copy that. Then go back to our WordPress version, and then paste this in just below the header, and then save that, let's take a look. Now there's our content section in between, the only thing really missing is the images. Now let's correct the image file paths, just like we do in the header.php. I'm going to copy all the php function, grab everything between the image source between the quotations, copy all that, and then back to the front page and then we need to find the free images. The first one is in the images folder, and it's called 1.jpg. Let's just delete that and then paste in the WordPress function and then images folder needs to be changed to you. Number 1, 1.jpg so change that. Then do the same for the second image. Delete the image source based in the WordPress function. Then just change the name to be number 2.jpg. Then scroll down to image number 3. Advice to any changes to image number 3.jpg, and save that. Let's give that a refresh. That's looking pretty good, let's take a little look up and down. It should look exactly the same as our Finnish version. Yes, everything looks good on them. We'll hope that went well for you and we're done for finishing the from page, and next we're going to move on to convert in the menu to be integrated with WordPress.
65. Theme Development: Converting our menu: Welcome back. In this video, we're going to get to work on hooking our menu into WordPress. Currently, we've got a couple of links at the top, which you just basic HTML list items, and if we click on them, they would actually link anywhere, because the links are looking for the blog.html page, or the about.html page, from our static site. So to fix this, we need to replace our HTML list items with WordPress menus. So if we go over to the WordPress Codex, and if we search for navigation menus, and this is link that we need, so we can see that the first thing we need to do, is to register the menu inside the themes functions.php file. If we were doing this from scratch, we need to copy this function, and then paste in manually. But because we're using the underscore starter theme, if we go into the function.php, and we're going to to do a search for register_nav, and this is what we need, register_nav menus. So the starter theme that we're using already has registered a primary menu and we can use this as our main menu in the header section. So back over to the Codex. If we scroll down a little bit further, there's a section called display menus on the theme. We need to use a PHP function called wp_nav_menu. So we need to paste this inside our theme, exactly where we want the menu to appear. So I'll copy this section, and then our menu is in the header.php, and we find the list items for the blog, on the about us page, let's just delete these two list items, and I'm going to paste in the function, that we just copied and this function needs to be surrounded in LI tags. So I'll put one set of list item tags inside there, and then paste in the function that we just copied, and then all we need to do is to delete header menu, and changes to be primary, which is the same as our functions file, just here. I'll just make sure you that's saved, and then let's visit the sites, and refresh. So now our menu is being replaced with a WordPress version. We've got the homepage, and also the default sample page. I'm going to go over to the dashboard, and then down to menus. To begin, I want to make this the primary menu. So make sure that's selected, and I'm going to also, automatically, add new pages to the menu, once we create them. So I'll save that. We can also remove the sample page, and in fact, our finished website doesn't have the homepage link. So let just remove both these links, and then save that. It's actually removed all the menu link so we don't need, but at least we know the menu is working. So when we come back in the next video I'll create the blog page. The new blog page that we add will be automatically added to the top navigation. So that's our WordPress menu now added to the theme. So I'll see you in the next video.
66. Theme Development: Setting up the blog index page: Welcome back guys. In this video, we're going to be setting up our index page to display our latest blog posts. We're going to convert our blog in two stages. This video will focus on bringing over the pages containers, the CSS classes, and general page layout from our static site, which is the blog.html. If we go down to the blog section, and then locate the blog post, we're basically going to be copying everything surrounding these blog posts, such as the containers and the rows. In the next video we'll be concentrating on the individual blog posts. I'm placing these inside a file called Content.php. Let's begin in the WordPress dashboard. We're creating a new page. This is going to be our blog page. Let's call this a Blog and then publish. Then we need to set this page to display our blog posts. So go to Settings, and then Reading. Then the Posts Page, select the blog. Then save that. Now when we visit the site, the blog page has been automatically added to the menu, which is good. Because this is now a WordPress menu, if we click on the link, we should be taken to the page which displays the blog posts, which we do and there's our Hello world blog post. As we already know, the page template, which controls the blog is the index.php. Go over to the theme folder and locate the index.php. Scrolling down, we can see that there's a PHP while loop. If you remember from the while loops video, a while loop will always run while a condition is true. In the case of WordPress, while is blog posts available. We can then display the blog posts on the web page, which is included in the content file. Everything that we'll put in-between this while loop we will run for each blog post. We'll work with the loop and individual blog posts in the next video. For now, we just want to set the page up to the same containers and the same divs as the static site. Basically, we're going to copy over everything surrounding the blog posts. Go over to our static site on the desktop and then go into the blog.html. First of all, let's open this up in the browser and take a look. Just below the header section, we've got a callout section which is welcome to our blog. Let's copy this over to the main site. Go into the blog.html. Copy this callout section and all the way down to the div with the class of medium eight. Basically, all the way to the blog post. Copy that back over to our theme. Because this is just below the header section. The callout is just below the header image on the finished website. We need to paste this, just below the header section. Paste and save. I'll just clean this up a little. Then back over to the static site into the blog. Then scroll back down. The areas that we just copied is the row and the div with the class of medium eight. Click on the div class row and then scroll down to locate the closing div, which is just here. It's the last closing div tag just after the sidebar. I'm going to copy this and go all the way up, including the sidebar. Copy that. Make sure you got the full area, including all the sidebar and the closing div, just above the medium free section. So copy and then back over to the theme, scroll right down to the bottom, and then paste this in just after the primary section, and then save that. We've copied the content from before and after the blog posts to keep our page containers and the CSS classes exactly the same as our static site. The only difference is we replaced the HTML blog posts with this WordPress loop, which is just here. This means that WordPress can generate the blog posts, which we can create inside the dashboard. Save that page and then go back to the site, and then click on the blog. The blog post will begin working with in the next video. We've got our sidebar down the right-hand side, which is one that we just copied over. We've also got a second sidebar, which is down the bottom. It's being pulled in from our index page. From down the bottom, we'd get sidebar. We'll tidy up the side bars in a few videos time, but for now let's move on to setting up the individual blog posts in the content.php file.
67. Theme Development: Setting up the blog posts: Welcome back. Now we're going to concentrate on our individual blog posts and how to get them work in inside a WordPress. First of all, we're going to create a couple of new blog posts to be working with. Add a new blog post, so new post wall. Let's grab some Lorem Ipsum. I want to generate five photographs and I copy all this. Then add this into our post. I'll also grab a featured image. I grab up on from our project, inside the images folder. I'll be fine and actually struck one or two more inside that for later use. Set the featured image and then publish. If we go over to Visit Sites, check out the blog. You'll notice that the blog post that we just created has now been included at the top of our blog. However, it doesn't look like our blog inside the finish website, which is just like this. Let's change this now. If we go back over to the index.php and within the loop section, you can see that the loop is pulling a template called content. This is the template which contains all the information about the blog post. Go into your directory, and then look for a folder called template parts. Then inside there, open up the content.php. We can see this is the template part for displaying posts. This is one we need to work with to make it look more like our finish website. I'm going to clean this up a little. First of all, I'm going to remove the header. Delete the opening on the closing tag. I'm going to scroll down and delete the full entry content section and also the entry footer section. We should remove that, so we can delete all those sections and I would just add our own content as we need it. In fact, we can just remove this entry meta type two. Delete that. Let's save that and then if we refresh, we should find that all the content is being removed except the title. Let's fix this now by going over to our static website from the desktop, go to the blog and then go down to our blog posts. If you locate the div with the class of blog post and then copy this full section. I go back over to our WordPress theme and I paste in just after the if statement. Save that and then refresh the blog page. The first thing you'll notice is the blog post has two different blog post titles. One which WordPress has generated, and one from our blog section that we just copied over. Let's fix this now. The WordPress generated one is open at the top. There's a if else statements, which is displaying the blog post title. First of all, we're checking if the page is single and this means if the blog post has being clicked on and linked through to the full post and if it has, it's going to display the page title with a level 1 heading. All of the pages will have the title displayed as a level 2. To match our website, won't change the level 1 heading to be level 2 and also close off. For all of the pages, I'm going to change this to be level 3 heading which matches our blog post, which you can see it is down here. Now, WordPress is generating our blog title. We can just delete our own. Remove that from that and then visit the blog and refresh. Now, we just got the New Post 1 title. As you can see, we don't have the image displayed that we set as the featured image. We still got the placeholder image, so let's go to content.php. Over in the content, let's leave the placehold image and then replace this with a WordPress function. Open up the php and then the function we need, it's called the post thumbnail. So theme_ post _ thumbnail and hit Save. Then now if we refresh the blog, we'll get displayed the featured image. Now let's get to work on added WordPress functions, display the author, the number of comments, and also the date the post was created. Between the p tags, let's just delete all the texts. I will replace this with a WordPress function. Open up the php. We need to include the excerpt. This is the shown version of the full content, which is just going to be displayed below the image. Now, there's the shortened version of the Lorem Ipsum text. Next let's replace the author, so delete the authors name, open up the php tags, and this one is simply the_author(); and then refresh data. Now after the author, we've got the proheadphones-admin, which is the creator of this blog post, and then next the number of comments. So again, open up the php tags, opening and closing tags. This one is called by the function called comments number. Comments_number(); So save that, refresh. There we go. There's no comments on this post, but the example Hello World one, which is included with WordPress, has one comment. Then lastly, let's make the date dynamic. So we can leave the posted on text, but let's just add a php function straight after that. In fact, lets put on a new line so it's more clear. I want to echo get the dates. But this time inside the brackets, we're going to add some parameters to make sure that the data is displayed in the correct format and then inside the brackets I'm going to add a capital F, a small j, and then a comma and a capital Y and you see Y when we refresh the page. Now, we'll copy the dates. The capital F left was for the month, the small j is a php way of including the day, and then a comma and then a capital Y was the year in the four-digit format. If you're interested in different php date formats, a quick Google will pull up all the different letters that you can use. There are different date formats. Now hope all is working. I was going to add two more blog posts just to check they're all working. New Post 2, let's copy over the sample text, a featured image, and then publish, and then one more and then let's visit the blog. Hopefully when we scroll down, there's our new post 3, our new post 2, and the original one which we created. That's just finished now for the blog exempt section, you can do so much more such as, adding WordPress functions to display the categories or the tags associated with each post. All it takes is a quick Google search or check out the WordPress codecs to find out how to do it. Now, let's move on to the next video. We'll take a look at this sidebar.
68. Theme Development: Sidebar: Welcome back guys. In this video we're going to concentrate on the sidebar. Currently, if we go over to our blog section, displayed on the page there is two sidebars. First of all is a sidebar on the right hand side, which is being called from our index page. It's the section that we pulled it from our static site. The second one, is being called from the get sidebar function. This is being displayed right at the bottom of the page, which includes the recent posts, comments, archives, categories. If we go over to a file called sidebar.php, we can see that the sidebar is being generated from a sidebar called sidebar-1. We can find the content of the sidebar by heading on to the dashboard widgets section. Go into the dashboard and select "Widgets" This is the sidebar section, which is at the bottom of our blog page. Our sidebar from the finished website only includes the categories, and the office. Let's get to work by deleting all the widgets except the categories. Open up and then hit "Delete" recent posts can go, comments, and the metadata can go too. We're left with the archives and the categories. I'll go to the index page, you can see the categories is the first one and then the archives. Let's just rearrange these to be the same. Now we've tidied up the sidebar. If we go over to the index page and then use the get sidebar function. I'm going to click this and then place it inside our sidebar container. Place it just below the div with the class of sticky. Open up the php tags, paste in get sidebar, and then close. Then save that, and then refresh our blog. Scroll down. We've got the categories and the archives. The first section is from the widgets that we just added, and then the second section is plain HTML, which is just from this section here. I'm going to delete this section in just a moment. But first, I want to make sure that the styling for the widgets matches our finished website. To do this, I'm going to go over to our functions.php file, and then I'm going to do a search for register underscore sidebar. In my case it's on line 88. This is the sidebar that we want, which is sidebar-1, and this is the one that we're currently working with. There is also areas where we can add HTML, such as divs, sections, IDs and classes. We can place this before or after the widgets or even the title. Our widget titles such as archives, categories above level 4 headings. Let's change level 2 to be four. This is before and after the title. Save that and then refresh, and that looks more like it now. In our case, all we needed to change was the level 4 heading for the title. If you got more complex sidebar, you may need to go into the before and afterward widget, and add different divs or different classes to make it much the original website. Now there is much [inaudible] we can go back into the index page and delete the static HTML content. Delete the first section, and also the archive section. Let's tie this up a little bit, there we go. That should remove the second sets and refresh. Great, now WordPress is pulling the categories and also the archives. We've now got the ability to click on the individual items and be taken to a page. For example, this one filters all the blog posts to a certain month. The same if you had more than one category, we'll get a list of different categories. We could select one of those categories, WordPress will apply filters. That's our sidebar now finished. I will move on now to the next video.
69. Theme Development: Single post page: Hi everyone. In this video we're going to take a look at the single post page. When we my view on our blog, we can click on the title of the individual posts and we're taken to a page which displays only this blog post and nothing else and this view is controlled by a file called the single dot PHP. We've not done any work yet inside the single dot PHP file. If we make the website a little bit smaller and we stretch out the content, you can see that the header is centered and also the footer. But the actual single dot PHP content is not aligned inside a container. Let's fix this. Let's go over to the single dot PHP and add the containers. We can grab these from our index dot PHP. Crop the div with the class of row, and also the medium eights, which is the containers. Copy that and then paste these in just below get header and then if you scroll down to the bottom of the page, just above the open-end PHP tag, we can close off these two divs just like that. Let's save that and then refresh and now when we make the page full width, we can see that the blog posts are all centered in the middle of the page. Now our content looks a lot better. Now let's add the sidebar to be on the right-hand side. Let's go back over to the index page and let's copy the sidebar section from down the bottom. Copy the div with the class or medium three. Then go back over to the single dot PHP, because we want the sidebar to be still within the row. Place this between the two divs or the two closing div tags that we just added, making sure it's just above the closing div for the row. Save that and then refresh and we should get the sidebar, which is great. If you look at the blog post, you can see that we've still got the shortened version or the excerpt, rather than the five photographs of Lorem Ipsum, which you put into the block. I want this page to display the full content rather than just the shortened version. Just like in the index page, the single dot PHP pulls the content of the blog post from a file called content dot PHP. Let's go and see our file now. We've already told this template to display only a shortened version with the excerpt function. How can we change this to be the full content when showing the full post? Well, we can do this by using conditional statements, like we looked at in the PHP section. Using a if else statement, we can show the shortened or the full version depending on what page we view in. Let's see how we can do this in WordPress. I'm going to go over to Google and then do a quick search for WordPress conditional tags. Look for the codex under conditional tags. Okay. The conditional tags can be used in your template files to change what content is displayed, and how that content is displayed on a particular page. That's exactly what we want. Let's take a look further down. We can display content depending on if the page is home, if the page is the front page or for example, if it's admin, if we're in a single page, which is exactly what we want. If the template is a single page, we want to display the full content. If the template is home, we want to just display the excerpt, and the home is where the blog page is being displayed. Let's go back over to the content dot PHP. Okay, so let's start by creating our if-else statements and making a little bit of space. We want to display the excerpt if the page is home, meaning that the page is the blog. Let's do that by opening up the PHP tags and then begin a if statement. So if, then lets crop this home function and paste it in the brackets. If the page is the homepage, and open up the brace, then display the excerpt and then we need to close calibrates off. Open up the PHP. Close the brace off and close PHP. Now, we should only get the excerpt if it's the blog. If we go over to the site and refresh, we then lose the excerpt, so they should only be displayed when we go to blog, which is just there. Let's now create a l section, to display the full content if using the single template. We put in the PHP, create the else statement on the opening curly brace and in fact, we can just copy this line and paste it in. But instead of the excerpt, we can use the content and then close off the else statement with the closing brace, there we go. Let's take a look at the site and see this in action. Hopefully this should all work. Refresh. In the blog section, so we'll get the shortened version and then let's click on the post title and there we go, so there's the full content inside the single file, which is the five paragraphs, of Lorem Ipsum. Starts working just like we wanted it to. Okay, so that's how we can work with the single page template, and also how we can work with conditional statements and conditional tags in WordPress.
70. Theme Development: Converting the about page: Welcome guys. In this video, we're going to create the about us page. This page has a lot of similarities to the homepage, such as the navigation section at the top, the main image, the section which has the different ranges of headphones available, and the footer area at the bottom. But with just a little content added in between, such as the about us title and also the paragraphs of text in between. Let's get to work by going over to our theme. We're going to create a new page template. This is going to be called page-about.php. If you remember from earlier videos, we looked at the template called page.php, which is the generic fallback template for displaying all pages. But we're going to create a more specific template by creating new file called page-about.php. Because of the similarities to the homepage, I'm going to begin by copying all the contents of the front page. Select all and copy, and then paste this into our page about. We need to keep the footer area, and then I'm going to scroll to the top of the page and add a comment. Just below the open php tag, open up a php comments, and then add a template name. Template name: This is about us, and the star and then closing slash. This name will be the template name, which you can select when you create the about us page in the dashboard. Let's go ahead and do that now. Go over to the dashboard, and then go to a new page. I'm going to call this page About, and then the template. I'm going to select the about us template that we just created, and then hit "Publish." Then let's go over to visit site and our link has been automatically added to the menu. Click on the "about us" page. Currently we just have the same layout as the homepage. Next we need to copy over the about us heading, and also the paragraphs of text from the static sign. Go over to the static templates, and then go to about.html, scroll down. We need to copy the column section, which is this dev , and this contains the about us heading, copy that, and then scrolling down, copy the row which contains all the text and also the two closing devs just after it. Copy that and go back over to our theme into the page about.php, and then this section goes just below the header. Paste in below the get header function, and then save. Let's check this out by hitting "Refresh." That's it. Over the header section, we've got the about us heading, we've got all the paragraphs of text, the section with the various models, and then the footer area at the bottom. That's the about us page all finished, and if you come back in the next video, we'll add some finishing touches to our sites, as well as making the search box function within WordPress.
71. Theme Development: Search box & finishing touches: In this video, we're going to add some final touches to our website, as well as making the search box in the header section function correctly. So currently if we type anything inside the search box, nothing works. This is because it's just plain HTML. So in this video, we're going to replace this search with a WordPress function. So let's go over to Google and search for WordPress, the search query, and let's go to the Codex. Let's scroll down and take a look at the examples. So this example shows the search query in a search box. So I'm going to copy the example, and then go over to the header, and then once in the header.php, we need to scroll down and find the section with the search box in. Look for the div with the class of top bar right, and then within the unordered list, pasting the function of the WordPress search, let's get rid of the side buffer now to give it more space. So let's head over to the site and then refresh. So now we've got two search boxes. One is the WordPress generated one, and we've got our own search box. Now, we need to make sure that the WordPress generated version is styled in the same way as ours. So let's head over and do that now. So the first thing you notice on the opening inputs for the search is the input type is text, whereas ours is search. So that changes too match. We've also got a placeholder value, and this is the text which appears inside the box. So that's also on the inside there. The WordPress So mips one is a input, whereas ours is a button. So let's change inputs to be button as let's add this close and button tag. Let's copy the search text and paste that in there. We've also got the type of button rather than submit, so let's add this inside there too. We've also got the class on button, so let's copy that and then paste that in too and save. Let's see how it's looking so far. It's looking at a lot more like the finished version. So let's now move the submit button to be on the right-hand side. So our version has the inputs and the button within the list item tags, so let's add these in too. So the opening tag and a closing tag, and do exactly the same for the button, copy that and paste that there. We needed that now, so let's remove our list items from our static site, and then we need to add the unordered list with the class of menu, which was originally surrounding the two list items. So put that, and paste it above the first list item. In fact, we can just replace the div there, and the closing div which is now the closing unordered list. So let's clean all this up. Make sure that you've got the form, the opening tag and the closing tag, and then nest it inside there in the unordered list with the class of menu and the closing tag, the first list item, and then the second list item, and then save that. Now, when we refresh, we should get the search box to be in line, and now it looks exactly like it did in the static version. Now let's do a search and see if it works. Search for hello, and now let's go down. Says our search results for hello, and as our HelloWorld blog post. Let's just search for more, post, and then we'll go, it says our new post 3, new post 2, number 1, and of course the HelloWorld example has word post in there. Now when it's at the containers, like we did in the single blog page, because when we stretch the page before width, the results are not centered in the middle of the page. So when it's at the containers to the search.php page, so let's go over to the index.php, and then we'll copy the row on the medium a div. So copy these two rows, and then go to the search.php, which is the page template for displaying the search results. Then just exactly like we've done in the single page, paste it just blow the header, and then close off the two divs just after the primary section, the first one and then the second one. Save that and then refresh. Now the content is being moved inside the container. Again, just like we've done with the single.php, let's add the sidebar to the right hand side, back over to the index page, and then go down to the bottom, and then copy the sidebar, which is a full div with the class of medium 3, then into the search page and paste these between the two divs that we've just added. Because this has the get sidebar function, we can delete the get side bar from the bottom of the page, and then let's take a look at the search results, and that's all done. So now there's a sidebar on the right hand side. I will blog post or I will search results all in the correct containers. Next, I'm going to move on to link in the logo to the homepage. So if we click on the minutes, we're taken to a 404 page, which is a page not found. So now we need to add a WordPress function to link the logo to our homepage. This is simply done in the header.php. So if look for the list item with class of menu text. Pro headphones is a name in the top left-hand corner, so rather than link into the index.html, which is a page that we no longer have. Let's remove this and then open up the php tags, php closing tag. It's put on its own line so it's more readable, php, and then we're going to echo, and the function we need is escape URL, which is esc_url, and then the brackets, and then inside the bracket is the function we need, is home_url. This will link to the website's home URL and a semicolon. Let's check that out, so refresh. Now if we click on the website's logo or title, that doesn't appear to work, and so let's see what's wrong. Let's start with the cyber to get more space. That's just a typo mistake there, so the question mark inside there, let's save that, and then refresh. So if we click on the logo or the title in the corner, now we're taken back to the homepage. I'm going to add one more PHP function. Rather than having the pro headphones title, we want WordPress to build policy and dynamically. So let's put this on a separate line. Open a PHP function, and the function that we want is echo get_bloginfo, and the blog info that we want is the blogs name, and don't forget the semicolon, and then save that and refresh the page. So rather than a hard-coded title, this grabs the name of the site we've entered, which we can see inside the customizer, then down to the site identity. So this is the title which were pulled in. So we will just to delete that and save. This will change the title, so let's just change it back, and then save that. The last thing we want to look at changing is the link colors, so at the minute the link colors have all been changed to purple, which isn't fitting with the rest of the theme. So let's go into the dev tools and find the selector. So go to Inspect. Then let's select the item that we want to change. Let's drag this up. So we can see in the dev tools that the links, which is a visited, has the color of purple. Let's go into our custom style sheets and make sure this is changed. So style.css, and we need to go right down to the very bomb. So in our custom styling, we've already got the a tags and also the a hover states. So let's add a visited just above the hover state. We'll just copy the color from the novel links and then refresh. So I get rid of the purple color. Let's check out the blog too. Good. So if all the purple links have been removed. Great. So that's the end of the section, and that's how we can convert a normal website to be a WordPress theme. So I hope you enjoyed this section. Now, let's move on with the rest of the course.
72. WordPress Multisite: Intro: Welcome everybody to this new section. This section is all about introducing you to the WordPress network or Multisite feature. This is really useful if you want to create more than one site, or allow other people to create a site as part of your network. All these sites are controlled by the same WordPress installation. So you could administer all the sites from the same dashboard. One or two things just to make you aware of before we continue. The first thing is to use a Multisite feature, you do need some form of live web posting, because the WordPress Multisite feature doesn't play well with the local host. There is a work-around available, and I want to place a link on the screen to a guide, if you do want to try and give that a go. However, if you can possibly do it, I would recommend using a live web server. The next thing is, of course, when using a live web server, you also will need your own domain name. We can pick up a domain name and also some host in quite cheaply, if you just want to use it for the section. However, don't worry if you enable to complete this section because you don't have the hosting. You can always come back to this section in the future if you want to set up a Multisite on a live server. For the rest of this section, I'm going to be using a hosting provider called Bluehost. This is available from bluehost.com. You can use any web hosting provider which you prefer. I'm not affiliated with Bluehost in any way. I just find that they are really good for WordPress and they're even recommended on wordPress.org. So that's it. If you do have some web hosting, let's go ahead and continue with the rest of the section. Again, don't worry if you can't complete this section because you don't have to hosting, this section will always be available for the future. Let's now move on to the next video, we'll take a look at what a Multisite is, some good use cases and examples, and also some cases of when to avoid using the Multisite. Let's move on and take a look at that now.
73. WordPress Multisite: What is a multisite?: A really great feature of WordPress, which has been available from version 3.0, is the ability to create a network of websites by taking advantage of the multisite feature. Throughout this section, we're going to create a network of websites, which is basically more than one website, which all share the same WordPress installation. The actual network doesn't look too different from what we've been doing so far. But once we enable multisites, we do have various different options available to us, such as adding new websites which we want control within the network, allowing access to these websites by assigning administrators, and also deciding which plugins and which themes we'd like to make available for each website. I'm currently in the Codex, within the Create A Network section. As you can see, a multisite network can be very similar to your version of WordPress.com. WordPress.com is a website which we'll take a look at in just a moment, which allows people to create their own websites or their own blog. Effectively, all the websites which you can create on WordPress.com are all parts of a network. If you would like to read more about creating a network, just simply search for Create A Network within the Codex and you'll be taken to this page. However, all the steps which are included on these websites, we'll go through as we progress through this section, so we get a hands-on feel of exactly how to do this. Next, I'm just going to head over to the Elegant Themes Blog. Within that blog, there's a article which is called 15 Amazing WordPress Multisite Examples in the Wild. Just do a quick Google search, I'm sure you'll be able to find it. This website goes through some of the best multisite installations, which you couldn't find on the web. Just as expected, the first one which springs to mind is WordPress.com. This is a multisite platform which has been around for quite some time. It's actually got thousands of websites which are enabled as parts of the network. WordPress.com allows anybody to join this network and create their own website or their own blog. It's really simple and easy to use. If you just head over to WordPress.com, it's really simple to get started with this various different plans. To get a WordPress website enabled, it's really simple as selecting your domain, your theme, the price and plan you'd like to go with, and you can start from there. Back over to the Elegant Themes website, I will take a look at one or two more. One of a large website using the WordPress multisite is the BBC America website. This particular website has every single show on its own website. Each one of these websites uses a child theme and it can all be administered separately, if required, or we can assign various administrators to a group of sites. Scrolling down, we also have the blog pages of The New York Times. It says it's got over 60 blogs, so that means over 60 separate websites, all being part of the same WordPress network. As you can see, there's some quite large companies which use the WordPress multisite feature. But just like with any feature or any piece of software, there's always some pros and cons and multi-site is no difference. There's always going to be occasions when it's good to use and when it's not quite right for you. Let's take a look at some multisite uses and also some of the drawbacks. You can create your own network of blogs or websites either for personal or business use. If you've got your own personal blog and you may have various different niches and you want keep these different interests separate, you can do that by using a network. You may also have a business and you may want some of these business departments or sections to have their own website or their own administrator, and a multisite is ideal for that. Okay, so your company website requires different sections managed by different teams. This is a example which is similar to the BBC America example that we just looked at, where different sections such as a different show, may be managed by different teams or may require a different style, or a different theme, or a different set of plugins. Another good multisite case might be a business with multiple branches or different locations, which you want to manage independently, or may you also want to allow anybody to create their own website, whether that's a free website or a paid subscription. This case is similar to WordPress.com that we just looked at before, where we can invite end-users to join our network and create their own website. Of course, there are many more which I'm sure you can think of, but the last one which I've included in this example is for hosting client websites. After building a website for a client, you may want to include their website as part of your own network. Then after you built it, you can continue to look after the website or to administer it, as well as all the other websites which are part of your company or agency. All others just take some of the control away from some of the end-users. It does also provide many benefits, such as you can update all your websites at the same time, which includes the WordPress core or any themes or plugins which you have installed, such some good reasons to use a WordPress multisite. Now, let's take a look at some cons or some reasons when not to use a multisite. The first one is pretty obvious. If you only need one website and you don't have any plans for any more or for any expansion, obviously a standard WordPress installation is more than fine for that. If you have a website and you want to be able to manage your own themes or manage your own plugins, then a stand-alone website is definitely the way to go. Or if your website has a good reason to require its own database, whether that's for security or any other reason, then a multisite is not necessarily a good choice. If your website is hacked or if your website is down for any particular reason, this means that all the individual sites on the network is down because they all share the same WordPress installation. Some plugins may not work well on a multisite network, that's something to keep an eye on. Before you went through the reasons to add all of your client websites onto the multisite, you may also find that a particular customer may have their own hosting or may want to have more control over the website. The last reason I've listed is you may not have access or the necessary permissions to edit the files which are on your web server, and this will cause a problem when activating the multisite. We'll take a look at exactly which files these are in the next few videos. Now, let's move on to getting into our hosting account and activating the WordPress multisite.
74. WordPress Multisite: Activating a WordPress network: Welcome back guys. In this video, we're going to take a look at how we can activate our WordPress multisite. As I mentioned at the start of the section, I'm going to be using a live hosting account from Bluehost. Of course, you can use any host which you prefer. But I want to be going through these videos with a Bluehost account. If you are using a different hosting provider, you may need to take one or two different steps just to follow along. But a lot of different hosting providers have a one-click WordPress installation. Hopefully, you shouldn't have too much problem by following along. I'm currently logged into the account. Inside the Bluehost admin panel, there's a convenient WordPress tools app, which we click on at the top. Then once you're inside of the WordPress tools, we need to click on the "New Install", and you should be given a choice to select a domain name. I've got available domain admin name called the reactacademycause.com. I want to be installing WordPress onto this domain. The path you can leave as blank unless you want to add a sub folder to install WordPress inside. But I'm just going to leave it on the main domain. The site title, and all the rest of the options are pretty self-explanatory. The site title, I should call mine Multisite. For the purposes of the demonstration, I want to add a simple username and password of multisite and multisite for the password too. Of course, live websites will need a stronger password. Then add in your e-mail, and then we need to click "Install WordPress". This just take a few moments to install, and this is just a standard WordPress installation, like we'll be looking out for the rest of the course. It's no different from the first three projects which we created, but we will be converting it into a multisite very soon. But for now, click on "Refresh". That should be it, that's our WordPress installed onto our own domain. To test, I'm just going to go over to the URL, and then we need to go to login. I select multisite, multisite too, then login. That means we're all ready to go. We've got the dashboard or the back end of WordPress, which you should all be familiar with now. I'm just going to click on, I don't need any help just for now, just to get rid of that page. I will go search the WordPress dashboard. If click on the home icon in the top left, will then take in to our homepage. It's just a blank homepage for now. Now I've got a successful WordPress installation. Now to turn this into a multisite, we need to find some of the files to edit. If we go back over to our hosting provider, and if we go over to the hosting tab, and then I'm going to go into the cPanel, which is just below. Your hosting provider again, might be slightly different, so we just find a way into the cPanel. Then I'm going to scroll down to the final section, which is just here. Then I click on the "File Manager", then all files for all WordPress are in public_html. We should see some files and folders which are familiar from our localhost sections. The first thing we need to do is find the wp-config file. If we scroll down and find wp.config.php. I'm going to highlight this file and then go up to the top where there's a code editor. Click on that and then select edit. Now we'll open up the contents of the config file. The first step we need to do is to scroll down, and then we need to find the line which says, that's all, stop editing. Just above this line, we need to type in a line of code. Begin with define within a set brackets and the quotations. I'm going to type in WP_ALLOW_MULTISITE, and then a comma, and then we're going to set this to true with semicolon at the end, and then click on the "Save" button at the top to save the file, and then just close out. Then now last one, we're going to head over to our website, and then click on "Refresh". Then one touchstone, head over to tools, you should see a new option appear, which is network setup. Click on that, and this takes us to the network set up. The first thing we need to do is deactivate the plugins. Just click on the link, which is there. I've only got one plug-in to deactivate, so just click on that. Then once that's done, we can head back over to our networks app inside the tools. Now we've got a different screen. We're now on the network installation process. We've got some options where we need to decide on the URL structure of our website. For this demonstration, I'm going to be using subdirectories. I'll make sure that's selected on there. A subdirectory is our own URL followed by a forward slash, and then the name of our website. You can have subdomains, which is just like the demonstration above, where we'll have the name of the site followed by our URL. If you didn't want to use the subdomains option, you may need to activate wildcard subdomains. To do this, you may need to check with your hosting provider or the documentation for instructions of how to do this. But for now, I'm going to click on subdirectories. However, be aware this option is only available on new WordPress installations. If your installation is one month older, you'd be forced to use the subdomains option. Just bear that in mind. Scrolling down is going to keep the network title as multisite sites, and then click on "Install". Now WordPress gives us some lines of code which you need to add, first of all to the wp-config file which we looked at before, and then the htaccess file. Begin inside the config file, let's click on the lines of code which needs at, and then copy these. Then go back into our File Manager and then edit the file wp-config.php. Click on "Edit", and then scroll back down just as before too, that's all. Then paste this in and then click on "Save". Search the first button, and the next we need to add some code to the htaccess file. Copy the code and then head back over to the File Manager. Then with inside the public_HTML, one problem which you may find is by default the htaccess file is not visible. You may need to check with your hosting provider for details of how to find the htaccess file. If you are using Bluehost, which also hides the file, you can add a string to the end of the URL, which is the ampersand symbol. Then show hidden equals one, and then return. Then you should find inside the public file, there's our htaccess, click on that, and then edit. Then the code which we've just copied, we need to paste in between the IF module and then end in IF module tags. Delete all of the defaults and then paste in what we just copied, click on "Save". Then now if all goes well, we should be able to go over to our domain, hit "Refresh", and then login. Then once you're back inside of the dashboard, we shall have a new option at the top, which is my sites. Congratulations if you have my sites appearing on the top of the navigation. This means that the network setup was a success and you now have access to the network admin. Now you've got access to the network admin. We'll leave this video there. We'll move on now to the next video, we'll take a look at how we can add sites to our network.
75. WordPress Multisite: Adding sites to a network: By now we should have the Multisite network enabled, with your hosting provider. If you don't have the My Sites option available on the top navigation bar, do make sure you go back and complete the steps before continuing with this video. So we know this one will hover over the My Site icon at the top, we've got the Network Admin, and we've also got our WordPress Multisite website, and this is the one and only website we have available on the network. This is the main site for the network. Let's get to work on adding a new site to our network. Within the dashboard, click on "My Sites", Network Admin, and then down to Sites, and then once that loads up, click on "Add New" at the top. We've got the option to add a subdirectory, which we enabled in the last video. For the purposes of this demonstration, I'm going to create a phone store, and also a laptop store, two more network sites. So for the phone-shop, let's add the URL extension of phone-shop. The site title also is Phone Shop, the language of your choice, and then add in an e-mail. So you may have just noticed there when typing the e-mail, the WordPress has recognized this is a existing user, or a existing administrator, and therefore, the phone-shop we've added to the admin panel for this user. Just like it says blow, if a e-mail address is entered which is not recognized, WordPress will automatically create a new user for this admin e-mail address. Click on "Add Site". Now if we go back over to My Sites at the top. Again, we have the Multisite, which is the website that we had from before. Also just below, since I created myself as a user by entering my e-mail for the phone shop, it also appears in my list of sites which we have control over. Let's go ahead and create one more. So again in the Network Admin, add Sites, go to Add New. Then the third website is going to be called the laptop-shop. At the site title, put this time inside the admin e-mail, I'm going to add a different e-mail. For now, I'm just going to make one up. So test@test.com, and then click on "Add Site". There's our third website created. If we go back up to the top on My Sites, unlike before, we don't have the laptop shop appearing in our admin because we added a different admin e-mail for this one. In the next video, we'll take a look at users and we'll also log into the admin screen for the laptop shop. But for now let's just go over to our URL, and just check the two extra sites are working correctly. We've got the react academy course. First of all, let's check out the phone-shop. Then lastly, let's go over to our laptop-shop, and then hit "Enter", and there we go. So there's our laptop shop and our free network sites are all enabled. So that's how we can add different sites to our network, and I'll see you now in the next video. We'll take a look at different user permissions and also the super admin. So we'll see you there.
76. WordPress Multisite: Users & the super admin: Welcome back to this video called Users and the Super Admin. To begin with, we want to head over to the dashboard. If we go over to My Sites, and within the Network Admin, click on the dashboard. Then if we go down to the Users option, so we notice that, as well as our username. We've also got the laptop-shop admin, which should have been automatically created by WordPress when we end today. A different email address for our laptop shop. One thing you may notice is your own User may have the word Super Admin just after it, and this is different to the administratoral which we're used to when we create a single WordPress website. Let's head over to Google. If we go to the codex, and then roles, and then capabilities, you should be taken to this link of the WordPress codex. So we scroll down, we can see a summary of the various roles within WordPress. So far, in this course, when building the project, we've had the administrator as the top role. The administrator is somebody who has access to all the administration features within a single website. However, now have a new role which is the super admin. The super admin is somebody with access to all the site network administration features and also all other features. So effectively, the super admin looks after the whole network of sites. This also means the administrator role does not have exactly the same privileges, which it does within a single website. This is related to things such as themes and plug-ins. We'll look at these in more details in the next video. But for now, let's head back over to the dashboard. If we look at the second user which is for the laptop shop, if we click on the user, we've got all the usual settings for editing a user. The first thing you notice is, if you scroll down, the username has been set, and it cannot be changed. We do have the option to grant the user super admin permissions, if we want to, but the first thing we want to do is scroll on to the bottom and then create a new password. To keep this simple, I'm just going to call this multisite-laptop, and then confirm the use of the weak password, and then update that. Then I'm going to go over to our login. So log out, so the super admin is now logged out. Now I want to log in as laptop shop, then it as multisite-laptop. So now we're logged into the administration area for the standalone laptop shop. If we go to My Site at the top, now we're on the one-site control by this user, which is the laptop shop, none of the controls which we had as super admin, such as the ability to add extra sites. However, we click on the users, we see that our user has the role of the administrator, so we can perform most of the usual site admin tasks that we viewed before, such as adding pages, changing settings, and also managing comments. However, there are a few things that are missing such as the ability to add new themes and plug-ins, and this is something we'll take a look at in more detail in the next video.
77. WordPress Multisite: Plugins & themes: We're going to start this video by looking at adding themes to our network. This need to be installed by the super administrator and can either be made available to all sites on the network, or on a site by site basis. We will look up plugins too in this video, but we'll begin by looking at the themes. One thing you may find useful for this video and also for the next couple of videos, is I've logged in as two users. On the right-hand side, I've opened up a different browser. In my case I'm using Firefox, and I've used this to login as the Laptop Shop or one of our Network Admins. You may find it a lot easier to have a second browse open and logged in as one of the network sites. Using the normal Chrome browser, I'm logged in as the super administrator. So we can switch between the two, we don't need to login or logout all the time. First, let's take a look at how to enable a theme to be available for the whole of the network. As the super administrator, if I go to the Dashboard and then My Sites, Network Admin, and then down to Themes, we've got the list of available themes and also the options Add New. I'll just go into there and you can search for anything I like, so I'm just going to search for the Storefront theme that we've used in this course. This is one from the e-commerce projects. I'll just hover over that and then click "Install". Once that's done, you'll know is that the Install button changes to Network Enable. This button makes a theme available to all sites on the network, so let's click on that. We're taken back to the list of available themes. There's our Storefront theme that we've just enabled, and we've also got the option to network disable if we ever want to do that in the future. Also the same with all the sites which are installed by default, we've also got the option to enable and disable those. If we want to just add a theme to be enabled for certain sites, we can also do that too. If we go back to Add New, and again just choose extra theme, we go for the spacious theme from the first project, and then once it's found, hit "Install," but this time we don't click on Network Enable, because we just want this to be available for certain sites. Now it's installed. If we go back to the Network Admin, and then to our list of sites, if we go down to our Laptop Shop and then go on to Edit, and then select the Themes tab, I'll make a list of the available themes which we can enable for the site. It's at the top, we say is network enabled themes. They are not shown on the screen. That's for obvious reasons because the theme has already been made available for all sites on the network, so we don't need to enable it from this screen. For the Laptop Shop, let's enable the spacious theme. Now that's done. If we go to our second browser, let's go to Appearance and then Themes, we've got the default 2017 theme, we've got the Storefront theme, which is being network enable for all sites, and we've also enable the spacious theme. Let's just try and disable the spacious theme as the super admin, and then try refreshing and have it go. Now we only have available the default theme and the network enabled theme. This is a way to control exactly which theme we want to have available for any given site. Let's now take a look at adding plugins to our network, and just like when using themes, plugins need to also be installed by the super admin. First, let's begin by activating a plugin for the whole network, so back over to our main admin. You've got go to My Sites and then Network Admin. There's also a Plugins option, so we just go into there and in a similar way to before, click on "Add New". Now for this demonstration I'm going to go for the Jetpack plugin. I'll search for Jetpack, and this is what we want by Automattic, and then Install Now. Just give a moment to install. Then once that's done, we get the same Network Activate button. I'll click on that. Then we're taken back to our list of plugins. In each one of the installed plugins, we've also got the option to Network Activate or Network Deactivate. Now this particular plugin is network activated. It's available for all sites on the network, but it cannot be removed by the individual site administrators. Let's go back over to you, our Laptop Shop and then refresh. Now in the dashboard, we have the Jetpack plugin option, as we will do on all the network sites. This is ideal if we want the plugin to be available for all sites on the network. But if we just want a plugin enabled on some other sites, we need to do things slightly differently. Back over to the super admin, let's install a new plugin by going to Add New. I'm going to add a plugin called Advanced Custom Fields, and then search for that. I'll just install it, but this time, once it's all done we won't click on the Network Activate button. We can activate this plugin on an individual site by site basis, by going over to My Sites. Then if we go down to one of the sites under our control, so let's go to the Phone Shop and then click on the "Dashboard". We can go down to the Plugins, and then there's the Advanced Custom Fields plugin which you have the option of activating. Once that's activated, it's only enabled on the one website which we've activated it for. In our case, it's the Phone Shop. Some of you may notice if we go to My Sites, we only have the Multisite and the Phone Shop available under our control. There's no option there to go to the dashboard of the Laptop Shop. This is because we need to add ourself as an administrator for the Laptop Shop. Now we can easily do this by going to the Network Admin, and going down to Sites. If you go to the Laptop Shop and click on "Edit," we can go to the Users tab at the top, and then all we need to do is go to Add Existing User, and the username. In my case it's the multisite, so I'll just click on there and give itself a role, so I'm going on to Administrator, Add User. Now if we go to My Sites, at the top, we've now got full control of our all three sites on our network. This will also enable us to go into the dashboard and enable plugins for each individual sites. This can only be doing as the super admin. As you can see if we go over to the Laptop Shop, just as the standard administrator, we don't have the option in the dashboard to select the plugins, like we do over on the left-hand side. Now we're also administrator on the Laptop Shop. We have the option to now go to My Sites. You see the Laptop Shop is now enabled, which will allow us to go into the dashboard and we can do things like add the plugins. Let's go to the Plugins, and let's add the Advanced Custom Fields and activate that. Then go back over to the Laptop Shop, and then refresh. Because we just logged in as an administrator, we don't have the plugins option in the dashboard. However, we do have the Jetpack and now also the Custom Fields plugin, because this has been enabled by the super admin. That's pretty much it. That's a insight into how we can add themes and plugins for our network. Now let's move on to the next video where I'll show you how to allow registered users to add websites to our network.
78. WordPress Multisite: Allowing users to add websites to the network: Part 1: In this video, we're going to take a look at allowing users to register to other onsite to our network. If we go to one of our websites in our network, and again, just like in the last video i have got two web browsers open. I've got Google Chrome on the left-hand side, and we're logged in as the multisite super administrator. On the right-hand side, I've opened Firefox. I'm logged into the laptop shop as a standard administrator. If we go over to the actual laptop shop and visit site, one thing you'll notice if we scroll down on the sidebar, down in the matter, we have the option to login and logout and go to things such as the admin screen, but we don't have the option to register as a new user. This is a default WordPress networks settings and is something which we can easily change. So back over in the super admin screen, if I go to my sites and into the network admin, and then down to settings, there should be an option for registration settings. If you just scroll down, this gives us four different options. The first one is registration is disabled. This means that new user accounts cannot be created when a user visits our website. The second option is to allow accounts to be registered. If we change this and then go down to save. Then if we go over to Firefox, and, if we log out and then you just go over to the website and scroll down to the sidebar. Now, we've got the option to register as well as login. The third option is to allow logged in users to create a new site on the network. This option restricts new websites to be created, but only by logged in users who have an account. This means as a super admin we have the option to only give accounts to authorized people to set up new sites on the network. Then lastly, we have the option to allow anybody to register as a user and also to create a website on our network. This last option is one which we are going to be using to allow anybody to join our network. Make sure the last option is clicked and then go down to save changes, and then back to Firefox. Now, if you go ahead and register as a new user. If you add a username and also an e-mail address, which you have control over, because you will need to click on an activation link to enable the new user. You'll also have the option to create a new network site. But for now if you just click on the option just to create a new user, we'll go ahead and create the site once you comeback. Go ahead and create a new user and come back in a few moments. Hopefully you've registered a new user and activated the e-mail. If you go ahead and login as your new user accounts. Then you go over to your profile by clicking on the username in the top corner. I'm taken to the dashboard and you'll see that the dashboard doesn't have many options. There's no option to add your own sites. If we want to add our own site, we need to add wp-signup.php right at the top after the URL and this takes us to a screen where we can add a new site to the network by adding an extension to the URL and also adding a site title and of course not many users will know that we need to add this onto the end of the URL. So to make it a little bit more user-friendly, I'm going to add a link into the top navigation to register a new site. There's also many ways we can do this, such as creating widgets and adding links to various parts of the page, but I'm just going to go ahead and add a menu link. As the administrator, we need to do this in the main site of our network. So I'll go to my sites and then multisite, which is the main network sites, and then to the dashboard and then if we go to the appearance, then down to menus, I'm going to add a new menu called navigation. Create the menu. We need to add this menu to the primary location for your theme. In the case of the theme which I'm using, it's called top menu. So select that. Then if we go over to the left menu, to the custom links, let's add a new menu button called audio sites. Then the URL is available just in the top there. Copy that and then paste it in and then add this to the menu. There's our button which has appeared under the menu structure. Let's save that and let's refresh Firefox and [inaudible] our options to other sites. If we just go over to the main website as our logged in user, you can still see that this option is there. So now we can click on this and then go to the sign up page. This is going to be the default sign up page that registered users can see. If we go to Chrome and we visit our site as the super admin and if we go down to add your sites, you see it looks similar, but we do have one or two little differences, such as it's alerting you to the fact that we're currently allowing all registrations so anybody can create a site and it also gives us a list of sites which we already a member of and then the same options to other sites and also the site title. So now our website is all setup to allow registered users to add sites to the network. We'll leave this video there and continue in the next video, where we'll go ahead and register a new site to our network.
79. WordPress Multisite: Allowing users to add websites to the network: Part 2: Welcome back to the second part of how to allow registered users to add websites to our network. In the first part we changed the settings as a super administrator to allow new users to register and also to create a new website as part of our network. On the right-hand side, I'm logged into Firefox as our new registered user. If you haven't already done so, click on, Add your site button and you'll be taken to this screen. The first thing we need to do is to add our site name. This is going to be the URL extension after the main URL for our network. I want to call mine WordPress Multisite Guide. Let's give it a URL of multisite guide. The site title called WordPress Multisite Guide. Then we have the option to allow search engines to index. So I'm just going to keep as Yes. Then click on "Create Site". It's as simple as that. So we can see the full URL which takes us to our site. Now if we go over to our Profile and then over to the Dashboard, we've now got a more familiar looking dashboard with the site admin options. This is all the things which we're used to, such as the ability to add posts, pages, and all leave a general administration options. If you go over to the top on Visit Site, this is our new website which we just created with our site title. There's not much to at the minute because we haven't added any customizations. But now we should build see if we go back to the super admin, if we go over to the Dashboard and then down to Sites, we should get now the multisite guide listed as our fourth website. Of course as a super admin we also have the options to edit the website. We can also even remove it if we want to. We still have full control over any third party sites. So when allowing new uses to register sites to our network, we may also want to customize things such as registration e-mails and settings. If we go over to the Network Admin, and then down to Settings, as well as the registration settings which we looked at before, we have some new options related into the multisite. We can customize the New Site Settings. This includes things such as the Welcome Email, which is sent to the registered users once they create a new site. Same with the user e-mail and various other things such as new posts or new pages. We can add names inside here, separated by a space. This will block any registered user from creating the website with these names. So we can reserve them for ourself and of course, things such as admin is obviously blocked because we need that to login. That's how we can allow a registered user to create a new website as part of our network. So I do hope this video and section has been useful for you. If you don't already have a useful multisite you may need in the future, and it's useful to know how to do it. So thank you and bye for now.
80. Bonus Lectures: Uploading to a live server: Welcome everybody. This video is all about showing you how you can get your WordPress website up and running on a live server. We're going to use a plugin to make this a really simple process and it's possible to export your website from a local host to a live server in just a few minutes. So the first thing you need to do, if you want to put your website live on the Internet, is to buy some web hosting, and you'll also need a domain name. So for this tutorial, I'm going to be using the cPanel and also the WordPress One-Click installations, which are available with most popular hosting providers. So you need to log into the hosting account. I'm going to go to manage, and we'll take it over to the cPanel. So depending on which is your hosting provider, you may find it looks a little bit different to this, but all you need to do is look for the WordPress One-Click installation. So under the web applications, I want to click on WordPress and this is going to set WordPress onto my chosen domain name. So I'll click on install this application. I'm going to save mine to the wordpressacademycourse.com. You can also change various versions, and there's also lots of different options, but I'm going to leave these as default. I'm going to add a administrator and also a password @ e-mail. Okay. So the website title and the tagline, I'm just going to leave these as they are for now, because we're going to import all the data from our localhost. So we don't need to change that and then I'm going to click on install and just let that do it's thing. So remember that some one-click installs are little bit different to this one, but I'm sure we can work it out. So just give that a few moments to install, and I will go search the WordPress application installed. So now, I'm going to go over to a new tab, and type in my domain name. So wordpressacademycourse.com, and there we go. So there's our WordPress installation, and that's the default theme. So I'm just going to go into the admin section, so add a forward slash and then admin at the end, and then login with your details. There we go. Okay. So because we're importing all the information we need for this site, I'm just going click on no thanks. Taken straight into the dashboard. Okay. Search WordPress setup now on the live server, and it's just got a default installation. So I'm going to get to work with exporting the details from our localhost version. So I'm going to go into the local version, and select pro headphones, and you can do this with any of the websites which we built, and then go into admin, and then we need to go down to plugins, and then add new. So if you just search for All-in-One WP Migration, and this is what we need by ServMask. So I've already got this plugin installed. So all you need to do is click on install and then activate in the usual way, and then you should get a menu option in the dashboard. So if you go to the new option in the dashboard, and then click on exports and this will export our site as a package, which you can then import into our live WordPress website. Okay. So the first thing you know is there's a find and replace facility. So we can find any word that we want to in the package, and replace it with something else. So if we've got any sensitive information, or wants to change admin's user name for example from root, we can do that here. There's also some advanced options, where we can leave out various things such as spam, themes, and plugins which you don't want to export, but I'm just going to leave it as default. Click on export to, and I want to export mine to a file. So I'll just click on file and let that do it's thing, and then once that's done, we can click on the download localhost button. Now we get file, saved to our downloads. So I'll just close that and then we're going to go over to my live website and then do the same thing. So it's plugins, add new. So All-in-One WP Migration, and then install and activate, and then this time we need to go to the options, and then go to import and then find the file which we just downloaded, and then drag this into the drag and drop and usually this takes a minute to import. Okay. Soon we get a message saying this will override our databases, plugins, and themes, but we know that, so click on continue. Okay. So if all goes well, we should get the message saying your data has been imported successfully. So now we just got two more steps to do. One is we need to save our permalinks, so click on the permalinks settings, and it should open a new window, and you'll notice if you try to login with the details which we use when we set up the live WordPress installation, that we won't be able to login using those same details. This is because the import we just done, has also imported our user. So we need to use the same user details that we used for the localhost. So mine was proheadphones-admin, add the password, and then login. So now we should be logged in with the existing user details from the localhost and now we need confirm our permalink settings. So once we're happy with one of the formats, we just need to click on save changes, and then once you've done that, we can head over to visit site and everything should look how it did on the localhost, so let's just take look at the homepage, and everything looks good there. So the blog page says our blog posts. Select these, and as the full version. The About Us page. All looks good. Let's just add a new post and check everything's working okay. So new post 4, doesn't really matter about the content for now. We've also got the images in the media library. So that's good. Let's set one of those and publish. Let's go back over to the blog, and as our new post 4. So everything appears to be working good. Just try the search. Yeah, that's great. So that's how quick and easy it can be to export your website from a localhost to a live web server, when using a plugin such as All-in-One WP Migration. Of course there are other ways to do this, such as exporting new database from your localhost, and also using FTP software, but this is a really quick and easy way to export you site, and hope you find it useful for when you're ready to move from a localhost to a live web server.
81. Bonus Lectures: East child theme plugins: So earlier on the course when we create the t-shirt Store. We created a child theme of the storefront theme. So when we create a child theme, we created it manually, by creating the new theme folder. We added things such as the functions file and also the custom style sheet. So in this video, we just want to show you a quick and easy alternative to creating child themes by using a plug-in. If we go over to the dashboard, and then go down to plugins, and then add new. I'm just going to do a search for child themes. There's various different plugins which we can select. But for this course, I'm just going to use the easy child theme creator and click install now, and then activate. So like we had many other plugins, we got an option in the dashboard. So what we need to do is go to easy, child theme creator. Select up and create a child theme, just click on the create child theme tab. All we need to do is, first of all, select a parent theme. The parent theme that we want can be any of the installed themes, such as the storefront theme. We can give it a title, such as storefront child two. I'm just going to leave the theme details as they are and click create. So that's it, child theme created successfully. If we go to the appearance, and then themes, I'll let you check that's being installed. There's our store front child two that we just created, hit activate. Then let's visit the site and see how it looks. There's our child theme of the storefront. Now can go about customization in the usual way, without affecting any of the functionality of the parent theme when we update. If we go into the customizer, we can just double-check that we're working with the right child theme. If we look at the active theme section, we can go ahead and change any of the details like we have done previously. So that's a quick and easy alternative to creating child themes. Thank you for watching, and I'll see you in the next video.
82. Bonus Lectures: Removing sample data and resetting our database: One of the things which you get asked quite a lot is once we concluded our sample data or of our theme test data into a project, how can we then go ahead and remove this? The theme text data with all the information which you downloaded inside of an XML file. This gives us some sample content to work with, such as some sample blog posts and also some images with various things such as different offers as well. If we go into a blog post, we can see these different comments on it. There various archives, as well as different categories and tags too. The majority of this information is added with the XML file, as well as one or two blog posts and pages which were added to0. In fact, there was even some menu links which were also included with the sample data. Well, the way to remove the sample data, in fact there is two different ways. The first way is to manually go through all the posts, all the menus, all the pages, and also all the other things such as the media, the images which have all been added and remove these manually one by one. Of course this takes time and it's very repetitive. There is also a plug-in we can use to remove all this data. A word of warning though before starting. This will remove all the content which you've added to the sites, not just the theme test data which were added with XML file. Also all of our pages and posts too will also be lost. This is basically a reset the cycle of theme back to how we started. I'm going to install a plugin. [inaudible] plugins and then add new. Under plugin I'm going to search for is, WordPress Reset. The one we're going to use is just here and it's one called WordPress Reset by Matt Martz. Let's go ahead and install now. This WordPress Reset will reset our WordPress database back to it's default. All the customizations and content as we just mentioned, will be gone. Once that's installed select "Activate" as usual. Once that's done, we should now see under the tools option, we now have a reset menu icon added. Select this and then to complete the reset we need to type reset inside the input box down the bottom and then click, "Reset." Again, beware this will delete all the database contents and restore back to it's defaults. Only follow along and hit reset if this is what you want to do. I'm going to click on, "Okay." This a moment just to clear all the database entries and now I'm go to, Visit site. We've taken it to the default theme. If we go back to dashboard and then Themes, we can still see that our spacious theme is still available. We can Activate this. All of our themes is still preserved. Visit the site and this is how our site looks as a fresh install. If we go back to the dashboard, as we've just seen there in the sites, all the posts and pages which were added we removed. We just have the default hello world as we did when first installing. This is how we can remove all the sample data and all the content from our WordPress database to give us a fresh start to work with.
83. Bonus Lectures: Setting up a second project using Siteground hosting: If using the SiteGround web hosting, once you finished one of the projects on this course, and need to move onto the next one; an easy way to do this, is to create a new URL. At the moment, if you go to "My Accounts" you'll probably only see one link to your website. We can add a second one. If you go to "Add Installation Manually", and we can start a new project. All we need to do is to click on the "WordPress Script" and then click on "Install". Rather than this, installing immediately, it gives us a option to change the installation URL. It defaults to our current URL. We can add a directory at the end. Inside here we can add the name of our new projects. If we want proheadphones, we can add this in here. We can scroll down and we can create a new admin, add a username, and also a password. All we need to do is scroll down to the bottom and click on "Install." This will then just take a few moments to install the new sites on the chosen URL. Once this is complete, we now get a new URL which you can click on and also the admin link too. If we click on "My Accounts" once more, we also see the new link and the link to the admin panel on here too. We can click on this. I'm going to open this up into a new tab. It's now gives us a blank canvas to begin our next project.
84. Thank you: So you've reached the end of this course. Big congratulations from me and you should be really proud yourself for getting to the end. I hope you've learned so much, you can now take away and use in future projects of your own. So we've covered so much ground from where we first started. We began with the web development blog, where we call the WordPress basics, such as finding and installing themes. We also looked at things such as adding posts and how to obtain existing posts. We covered various resources, to find and how to include media into our blog. We also worked with adding pages to our blog, such as the About Us page, the Contact page and dealing with users and comments. You learned how to add navigation menus and then we move on to the next section and we customized the website even further by adding logos, background images and head images. We work with the customizer and also work with page widgets to self the front page and also move the blog to its own custom page. We learned how to add sliders and also how to add contact forms. Then towards end of the section, we looked at various extras, such as how to improve search engine optimization and how to make backups of our website, in case a worst was to happen. We then moved on to creating a second project, which involves setting up a WordPress database and installing WordPress. We also got started with Woo Commerce, both for the e-commerce functionality and also for the storefronts theme. We also took a look at using child's themes on various e-commerce related functionality, such as product categories, tags and attributes. We even looked at creating flexible layouts using Page Builder, will include the basic PHP knowledge, which you'll need to convert a HTML and CSS website over to a fully-functioning and great looking WordPress theme. This section dived even deeper into behind the scenes of WordPress and how WordPress pages are laid out and how it uses templates to organize and display web pages. So bye for now and hopefully, I'll see you again soon on a future course.
85. Follow me on Skillshare!: A huge congratulations from me for reaching the end of this class. I hope you really enjoyed it and gained some knowledge from it. If you've enjoyed this class, make sure you check out the rest of my classes here on Skillshare, and also follow me for any updates, and also to be informed of any new classes as they become available. Thank you once again. Good luck, and hopefully, I'll see you again in a future class.
Chris Dixon, Web Developer & Online Teacher
