WordPress Academy: Learn WordPress step by step | Chris Dixon | Skillshare

WordPress Academy: Learn WordPress step by step

Chris Dixon, Web Developer & Online Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
83 Lessons (7h 52m)
    • 1. Welcome!

      2:31
    • 2. Why WordPress?

      3:27
    • 3. WordPress.org or WordPress.com?

      3:32
    • 4. Where to find WordPress themes

      4:40
    • 5. The WordPress web server

      2:07
    • 6. Option1: Installing with Local (recommended)

      4:21
    • 7. Option 2: Installing with MAMP

      6:19
    • 8. Option 3: One month free web hosting

      4:47
    • 9. WordPress dashboard

      4:15
    • 10. WordPress files & folders

      3:20
    • 11. Music Festival Project: What we will be building

      1:51
    • 12. Music Festival Project: Installing themes

      3:30
    • 13. Music Festival Project: Creating our first page

      6:54
    • 14. Music Festival Project: The media library

      3:19
    • 15. Music Festival Project: The Gutenberg editor

      13:27
    • 16. Music Festival Project: Widgets

      5:00
    • 17. What we will be building

      2:06
    • 18. WordPress Blog: Project setup

      2:38
    • 19. WordPress blog: Importing sample data

      3:43
    • 20. WordPress blog: Adding and updating posts

      6:56
    • 21. WordPress blog: Where to find great photos for your blog posts

      5:48
    • 22. WordPress blog: Including media

      6:28
    • 23. WordPress blog: Users, permissions & managing comments

      7:41
    • 24. WordPress blog: Adding pages

      5:30
    • 25. WordPress blog: Adding our navigation menu

      4:50
    • 26. WordPress blog: The customizer in more detail

      7:42
    • 27. WordPress blog: Adding header images

      2:23
    • 28. WordPress blog: Adding a background image

      2:29
    • 29. WordPress blog: Plugins & social media integration

      6:05
    • 30. WordPress blog: Home page setup & widgets

      9:46
    • 31. WordPress blog: Creating the footer

      4:47
    • 32. WordPress blog: Adding a slider

      3:41
    • 33. WordPress blog: Creating the contact form

      6:11
    • 34. WordPress blog: Improving SEO

      7:18
    • 35. WordPress blog: Backing up your site

      5:54
    • 36. Project Setup

      1:46
    • 37. Getting Started With WooCommerce

      9:07
    • 38. WordPress eCommerce: Why use child themes

      2:12
    • 39. WordPress eCommerce: Child theme setup

      9:47
    • 40. WordPress eCommerce: Product categories, tags & attributes

      8:09
    • 41. WordPress eCommerce: Adding products

      7:31
    • 42. WordPress eCommerce: Home page layout & slider

      9:55
    • 43. WordPress eCommerce: Customising the look of our store

      3:41
    • 44. WordPress eCommerce: Flexible layouts using Page Builder

      7:08
    • 45. WordPress eCommerce: Rearranging menus

      4:35
    • 46. WordPress eCommerce: The footer area

      5:13
    • 47. WordPress eCommerce: WooCommerce settings

      7:10
    • 48. PHP Basics: Hello world

      7:00
    • 49. PHP Basics: Strings , variables & constants

      10:14
    • 50. PHP Basics: Data types & operators

      5:56
    • 51. PHP Basics: Arrays

      6:59
    • 52. PHP Basics: Functions

      4:39
    • 53. PHP Basics: Conditional statements & more operators

      12:25
    • 54. PHP Basics: Switch statements

      4:31
    • 55. PHP Basics: Loops

      11:12
    • 56. PHP Basics: The Codex

      2:38
    • 57. Theme Development: Database setup & WordPress installation

      3:54
    • 58. Theme Development: Underscores starter theme

      4:00
    • 59. Theme Development: Understanding WordPress / PHP templates

      4:17
    • 60. Theme Development: Header & footer sections

      6:33
    • 61. Theme Development: Adding the CSS & images

      14:36
    • 62. Theme Development: Converting the front page

      7:46
    • 63. Theme Development: Converting our menu

      4:19
    • 64. Theme Development: Setting up the blog index page

      6:23
    • 65. Theme Development: Setting up the blog posts

      10:26
    • 66. Theme Development: Sidebar

      5:19
    • 67. Theme Development: Single post page

      7:19
    • 68. Theme Development: Converting the about page

      4:13
    • 69. Theme Development: Search box & finishing touches

      12:15
    • 70. WordPress Multisite: Intro

      2:26
    • 71. WordPress Multisite: What is a multisite?

      8:15
    • 72. WordPress Multisite: Activating a WordPress network

      10:53
    • 73. WordPress Multisite: Adding sites to a network

      4:27
    • 74. WordPress Multisite: Users & the super admin

      4:36
    • 75. WordPress Multisite: Plugins & themes

      10:08
    • 76. WordPress Multisite: Allowing users to add websites to the network: Part 1

      7:18
    • 77. WordPress Multisite: Allowing users to add websites to the network: Part 2

      3:36
    • 78. Bonus Lectures: Uploading to a live server

      9:50
    • 79. Bonus Lectures: East child theme plugins

      2:50
    • 80. Bonus Lectures: Removing sample data and resetting our database

      4:12
    • 81. Bonus Lectures: Setting up a second project using Siteground hosting

      1:40
    • 82. Thank you

      2:43
    • 83. Follow me on Skillshare!

      0:23
303 students are watching this class

About This Class

*** Now includes 1 month free web hosting to complete the course! ***

Take your HTML & CSS skills to the next level, by mastering the worlds most popular content management system for building websites!

Master WordPress from scratch in a fun, project based approach.

This course is for anybody looking for a career building WordPress websites or themes, or even hobbyists looking to learn a new skill.

We begin the course by getting familiar with WordPress and looking at how to install using a localhost.

Beginning with a music festival landing page, where you will get to grips with the new Gutenberg editor. We also look at widgets, adding pages, installing themes and the media library.

We then look at the WordPress essentials such as blog posts, pages, navigation menus and installing themes, all while building your very own blog website. 

Once we have the basics covered, we move onto customising our blog using sliders, widgets, header images and working with the customiser. You will also get the chance to optimise your website for search engines and create backups. 

The third project takes your WordPress knowledge even further. We create a fully functional eCommerce T-Shirt store. More techniques are introduced throughout this project such as child themes, dealing with products, categories, shipping, taxes, all while building a beautiful, custom website. 

After completing the first 2 projects, we move things on even further by introducing you to WordPress theme development by converting an existing HTML & CSS website to a fully functional WordPress theme. This section involves coding in PHP, however if you are new to PHP there is a PHP basics section to get you up to speed.

This project introduces new techniques and you will gain a deeper knowledge of how WordPress themes are created. You will learn how WordPress templates are used and learn about various WordPress functions to build our theme.

Finally, the last section will be focused on useful techniques to add to your WordPress knowledge. Here we will cover exporting your localhost websites to a live server, various plugins etc.

All images and files etc you will need is included to download, there is also need no extra software, subscriptions or purchases etc to complete or take this course.

So are you ready to take your web design or WordPress skills to the next level?

Join me now and I look forward to having you on board!

Transcripts

1. Welcome!: welcome to the WordPress Academy course. Why you will go from a beginner to a competent WordPress website developer. My name is Chris, and I'm here to guide you through this girl's step by step. I have many years of experience development websites and also creating online courses with thousands of satisfied students. This course is being designed for anybody looking for a comprehensive guide to building websites using WordPress. By the end of this course, you will have the confidence and ability to build a variety of different websites and also even Congo to hate him. A website to WordPress theme This course is designed with a project based approach, so the techniques he alone will be immediately put into practice. We begin by introducing you to WordPress on getting familiar with the dashboard and also the files and folders included. Also, you will learn how to set of a local development environment along with installing WordPress and also the database. As you progress through the course, you'll build free complete website projects which cover everything you need to know about building websites. With WordPress, we'll cover everything from building blog's to e commerce stores. Then we take things even further by covering PHP basics and then move on to call our own team by converting hate mail website WordPress completely from scratch. After that, we even take a dive into WordPress. Networking will allow you to build your own WordPress multi site. This is great for uses, such as having a network of sites under the control of one dashboard. The ideal students. This course is somebody new to WordPress or even if you try WordPress before but never quite manage to fully understand how to use it effectively. A little experience of hate, Schimmel and CSS will be an advantage, especially in the last project. However, there are no over requirements for taking his course. Justin Eagerness to learn. So feel free to take a look for the course description. Onda, also the lectures covered to discover everything you will learn during this costs. So hit to take this course burn, and I look forward to seeing you inside the course 2. Why WordPress?: WordPress began life as a simple blogging platform. I'm just 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 under download. On is built by hundreds off community volunteers, along with all the great features of WordPress, which you'll learn in this class. One of the things I really love about WordPress is it has something for everybody. If you were a non a technical person or a beginner, you could buy some simple Web posting. Use a warning click install. Select the fame on you have your very own website, or blawg in under half an hour on four Web designers or developers or people who want to jump in even deeper. There's also many great things you can do technically, to make a powerful website. You can call your own themes and plug ins, make WordPress look and function exactly how he wanted to be, where prices also always under constant developments. It's always improving, whether this is a security fix or a new feature to keep WordPress from becoming outdated, and the creators of WordPress have made these updates really easy to apply, so we don't need to worry about any complicated updates on installs. If you head over to WordPress toe all, which is the official website and then go into the team's top, there's also lots of great themes available to download for free. And that is pretty much any type of theme for any type of website, which you may want to build. The free themes on the sites are really goods, and there is also premium versions available on websites or marketplaces such as Forest, and we'll take a look out themes in more detail very soon. We're press corps, which you don't know is really simple, yet very powerful impact with many features. However, if there is some functionality missing, which your app or website needs, there is most likely going to be a plug in available to looking czar pretty much what they sound like. They're something which you can download the plug in and extend the WordPress coal, the art functionality and features on the usually it's simple to install as clicking on a few buttons, and we'll also learn more about installing plug ins as we build our projects in this course some of the great benefits off WordPress are there is really search engine friendly by using WordPress, many s CEO best practices are already taken care off four rows behind the scenes. If you want to also take things fervor with s ego, that is also something great plug ins which will use on. We'll discover some of these later on. Leslie WordPress has a really useful mobile up to buy U. S. And Android, which is free to download. The APP allows you to write of content on update your website on the move. Honey can even upload photos, money to blow comments, unedited pages on the up to. So these are some of the great reasons for choosing WordPress. Of course, there are many more to on. I'm sure you will find your reasons for using WordPress as you progress through this course . 3. WordPress.org or WordPress.com?: when first started are weird, were pressed. One of the things which confuses many beginners is the difference between the websites off wordpress dot com on WordPress Dog. This is understandable since both domain names are very similar on both were related to building WordPress websites. So what exactly is the difference? Let's begin with wordpress dot ogg, which we said in the last video was the official WordPress websites. And this is the home page for the popular open source WordPress software. Open source means anybody can use it or contribute to it free of charge. So it really is a big community effort. This is the official software which will be using to create our projects. For all this course, we can download it, customize it on updated to a live server. Once complete, it basically gives us total flexibility since itself hosted and also hosting costs for WordPress are relatively cheap. When starting out at the navigation at the top of this page, you'll see he that we have the available plug ins on themes which we cannot to our projects . We also have these supports hablo confined to the documentation. If you want to find out more information about any WordPress feature. We will refer back to this documentation for all this course, and it covers everything you will need from installed and themes right through to you. Security topics. We can click on the get WordPress button to download the software. I'm going to be doing this very soon, so don't in. This software, as mentioned, will give us total control over everything related to our project. All the alternative is wordpress dot com. Wordpress dot com is more of a service which allows us to have a WordPress site hosted for us uses the same WordPress software which we just looked at. It takes away all of the set up on will host it for us. Yes, I was created by one of the WordPress founders. But the ease of set up does come at a cost. We don't have the flexibility. We have one self hosting under our restrictions on which teams and plug ins we can use, depending on the price in a plan which which use, Let's take a look at the plans. Remember, these price and plans do change over time, so the might be silent different when you visit but we have the option to you. Start with a personal sites, and it's also a free option at the top two. One of the things to watch out for with the free option, though, is the fact that your site will also have wordpress dot com. Advertising, too noticed, is probably not something which you want to use for a serious project, and you may want to go for one of the personal or premium plans when first starting out on some of the lower plans. We also don't have access to all of the themes and plug ins which have access to you when self hosting, too. So we're presto August. Want to go for If you want full control of your project unhappy to do a little set of work , I will be choosing this path it for all the rest of this course. Or you could also go for wordpress dot com. If you want everything to be taken, care off for you. But remember, there are restrictions unless you go for the more expensive plans 4. Where to find WordPress themes: One of the great things about WordPress is weaken, aren't our sides content and then quickly change the look and feel by switching between different themes? There are thousands of these available on many also free to. I'm going to show you a few resource is which you can use to find Team C or projects. So as we discovered in the last few videos, they were Presto. All websites has this theme section just on here. We can find some of the most popular or latest themes also filter by a certain feature. We also concert for different themes. If we already know the name of the theme of fronts, these ones at the top of the page, each other ones, which had included with the word press corps. So when first started, I would. WordPress You will have the default theme or that particular year. Once you find one what you like, you can find out some more information on. You'll also be able to you choose a preview to one of the things to watch out for when it's using. A new theme is also when it was last updated. It's important to make sure that the WordPress themes are regularly updated on also compatible with your version of WordPress. It's going down. We also have these tags, which are important, too. You'll find out what a lot of these terms mean as we progress through the course, such as the supported templates, the featured images laying out in a different columns. Custom Logo's on so much more. But these things will give you a good idea of what you will need forced on your project. This is really important because a theme not only changes the look and style of your site, but you can also add some different features to and also some different options for customizing the layout. Anybody kind, create a WordPress theme and uploaded to the sides. However, there is an approval process to go through first, making sure that these themes are all reaching a minimum standard. We can also check out a preview just by clicking this button. One of the things to watch our four is often the preview doesn't look anything like the image which we see here. This is because this demo picture you see on the left is how the theme would look once it's got more content, such as images and on the preview will often see the block page being demonstrated. Since this is default in WordPress, very soon, we're going to take a look at how we can download and install themes. No project. You can download the file with. This puts in just here and drop this into our WordPress folder or we can install directly from the dashboard. I will take a look at this very soon if we exit out off the preview and go back to, well, themes list as well as all of these three themes which were available, we're pressed. A log also has a commercial fame Section two, which has some premium themes which you will need to pay for on often. These will also call moved its support to another popular resource for paid WordPress themes is being forest don't net along with money, code samples and snippets. We also have a WordPress section where we can check out all of the available themes, just like Woodward Presto or we find a list of all of the popular best sellers. We can also search unfiltered er to find the correct theme for all projects society is basically a marketplace sellers, so most of the content on here does come our cost. But it does also often include support to get you going if you have any problems. There's also many people making a full time living it, creating WordPress themes on that selling them on WordPress market places just like this, just like before. We can also click on these on to see a live preview. You can also find out what sort of features are available. With the theme. We could find out what versions WordPress. This is compatible with what sort of layouts are included with the theme. If you want to see how this is looking in real life, we could check out the live preview. Usually, these demos also allow us to switch between different layouts, which is also provided with the theme and also see how we look with different color schemes if available. So this is just too popular. Resource is for finding themes for your project. As with most things, you could also do a search for work Breast teams two, and you'll find many of her sources, too. We are going to come back here very soon, and look at how to set these teams up. But first we need to install WordPress so broken begin building all projects. 5. The WordPress web server: if you build a website in the past using Hey, HTML and CSS. One of the things which will be used to is simply opening up a world project inside the browser. On everything works, however, Woodward press this works a little differently. WordPress needs a Web server to generate all pages first. This is because WordPress is wrote in a programming language called PHP. We don't need to understand Ph. B to be able to use WordPress, but understanding this will really help us understand how WordPress generator websites. If you consider a website such as Facebook or Twitter science like this, look the same for every user. But the details are different, such as your user name, your personal friends, any post on so on So we can think of sites like this as a template, and then the details are injected in where needed. This is an example of what PHP does it can generate. A webpage would change the details for each user on that page, and this is an example of what is called a dynamic website. These kind of pages have generated on a Web server before being sent to the user's browser on This is exactly why a Web server is needed. The room were press. Also, WordPress needs a database to distort, although pages upload posts on all the information for oversight on, the server is also responsible for talking into our database to so to get started creating a WordPress project. This now leases with some options. If you already have a live Web server which come from WordPress, you can, of course, go ahead on you. Use that. Are we going to run through some options in the upcoming videos to get you started? What makes you you just use one of these options with this as a background we now going to run through how to set a WordPress any of common videos. 6. Option1: Installing with Local (recommended): in this video and also the next one, we're going to discover two different ways off setting up WordPress on our own computer. We don't need to purchase any Web hosting. This video is going to focus on a service called Local, which is by a company called Flywheel. This will allow us to settle WordPress websites really fast, and in the upcoming video, we're going to look at an alternative cold bump. I would recommend following along with this video rather than the next one, especially if you are a beginner, since Mom can cause problems to some. But this is totally up to you to get started. Head over to local WP dot com. There are paid versions, four teams and agencies, but we just need the Free Community Edition, which is available for Mark Windows on Lennox. Just need to choose your operating system and then go ahead and download as normal. Local allows us to quickly set a WordPress projects on our own computer really fast and easily, and also takes care all setting up the Web server and database photos. It has lots of great features. We convey your site on admin section at the click of a button. We can generate a live link to view our projects anywhere on. Also share with those two, along with lots more advanced features, such as the ability to set a WordPress multi side on so much more I would have this available. So go ahead and download. It may take a few minutes to download, so come back. Pontus is finished. Once this is finished, downloaded and go through the usual insulation for your machine and then you'll be presented with a screen which looks just like this. Get started. All we need to do is to create a new site by clicking this button and then given our site a name I want to call mine WP Festival. You can call this anything which you prefer. You can continue. We don't have the option to set up custom settings such as the PHP version on also the version off the my SQL database. We don't exchange any of these, so I'm going to go with the preferred option, and then we need to set up a user name and password log into WordPress. Want to call this the festival admin or festival in this Codman on a password and then a email address for the admin Click on outside, and this will now set up a WordPress project for us. If using a mark, you may need to add your password to grant access to local to create the site. And then, once done, you should be seen a page which looks like this. Once we taken into this page, we see that one site is runnin. I'm have the green light, meaning everything is good to go. We have a overview off all of our project settings. I'm looking access our admin and also decides with these two buttons here. If we click on view sites, this will and take us to the home page of a WORDPRESS installation. Use need default theme. We can also access the admin to by clicking on the admin button we can, then at the user name and password, which we set up just before. So this is the gunman on the back in off our wordpress sites on on the left hand side, we have all of the options for configuring our project. I'm not going to go into any detail just yet because we're going to look into this in more detail very soon. But if you have these two pages on display in, this means that your WordPress project is now all set up. Also, if we go back over to the local start screen, another great feature about local is he also provides a live link. We could enable this, and this will generate a link which would go to in the browser on any device. We can also share this link with friends and family and open it up on your phone or any of advice. If you were happy using local for this course on, everything is working correctly. You can now let's skip the upcoming optional videos. 7. Option 2: Installing with MAMP: This is an optional video to set of WordPress using a service called Mom. 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 set of using bump. So let's get started by heading over to Mom Got involved. This is also going to create a free local development server are not to take off the database for us, too. We could download a free version by clicking on the link here and then download for your operating system. I'm going to go for the mock version. Give us a few minutes to download. Okay, so once this has downloaded will need to go through the installation steps off your computer, I'll just continue through each one of these. You may also need to You aren't a possible to to install this under. Month also comes with a paid version called Mom Pro. This also downloads at the same time, but you don't need to use this. Just need to stick with the free version of Bump as we don't need any of the pro features. Once Mom has finished installing, if your machine you will be taken to a start screen, which should look just like this. You may also be asked to upgrade the my SQL database. So go ahead and do that to you. Inside the heli key thing to note is the two green lights over the top. This means that our Web server and also a database is open. Run in. I'm looking Now, download the world press corps. And at this to our mom folder, me mum is stored inside of my applications. And then we have this mom folder inside of here. The key folder which will be working with is these Haiti docks. This is going to be the location where we aren't all of our wordpress projects for all this cause to do this, we need to go over to WordPress. Talk on from the home page. We'll have a get WordPress button just on here. Descent takes us to this download section working. Download the world press corps. This is a zip file, so it shouldn't take too long to download. Once this is done, we can click on this package on opens up, and this is now our WordPress Project folder. So you can go ahead and rename this. I'm going to call this the BP Festival, and then we can drag this project over to our Haiti docks. Let's grab this places inside of the hasty docks. Open this up. I'm looking. Check this is that the next thing we need to do is to create a database for our project inside of the mumps start screen. If we open up the Web start page from here, we can go to PHP My admin. If we click on tools, click on PHP my on men where we can add a new database so you can see on the left I would have many databases already set up, but I'm going to click on you and then creating new database on this could be any name of old choice. I want to call They see WP, Josh Festival, click on Create, And then we don't need to create any tables or any data in the world. Press is going to handle this for us, but this now sets up. We can go back over to mumps at all to the start screen. Now the older versions of Mom Houston have the preferences on here, but now that's available in the main options. If using a mark, you can head to the Mumbai icon in the top corner and then click on the Preferences link. This will end link us to the section where you can check out which Paul we use in. If we could comports, we can see the default Web server. Port is 8888 We're not going to use this to access our project in the browser, so we need to do you stick. Click on local host in an 8888 he's enter, and then we're taking it to the index off Jorge HD docks. This will contain all the project, which we are inside a month. We want the WP festival, so clicking on this will then start up the WordPress installation script. The first step is to choose the language. I'm going to go for English and then continue. This page is just letting us know we need to set up our database first. We need to have access to all of this information. Nickell. Let's go onto the database name which was WP festival. The database user name, which is root and also root for the passwords working on the local host. And then click on submit once connected to old database weaken, then run the installation script. We need to, first of all, aren't in the site title. I want to go for WP festival, and this could be changed later on in the wordpress dashboard. So don't worry too much about this. We don't need to add a user name and password to log into a WordPress back ends. I want to go for festival on man a password and then also a email. I'm going to and check this for now. Since our site is not live and then click on install WordPress, we can then log in using all the details, which we just provide it. My user name was festival admin, then paste in the password they sent takes us to the WordPress dashboard, where we can control our site. I will take a look at this in more detail very soon. You can also click on this whole Maikon just about the top and this will end. It switches to our WordPress site. And if you got to the stage, congratulations. Wordpress is now open. Run in using mumps 8. Option 3: One month free web hosting: But it's cause I have teamed up with the popular Web hosting service called Psych Round. So if you a month for free Web hosting it to complete this course, Cyclone is a fast, unreliable where post and is even more of the recommended hosts on the official WordPress dog website. It makes setting up WordPress much easier and will be open running in only a few clicks. Take advantage off this free offer. Head over to the link on the screen on the free, mournful automatically be triggered. No credit card is required to sign up, so you don't even need to worry about that. The link provided will take you to this London page weapon. Click on Sign Up Now, so click on this. So go ahead and sign up with your information on again. No credit card is required. Distract. The total is zero at the bottom. Agree to the terms of service and then click on the pay now button. Once this order has been submitted, the account will just take a few moments to be created, and you will receive an email as soon as this has been done. It shouldn't take too long, so once you have done this or you need to do is click on the link in the email or click on the log in button in the top corner. Once you have logged in with the details you have just provided, the next step is to choose an installer. Of course, we're gonna go for the WordPress installation, so select the WordPress logo, and then we can add a admin email, user name and password. This is the admin email and password to log into the back end of WordPress raft on the one provided for site grounds, although the email impossible would come to the same to make things easier, the next step is to confirm the terms and then click on a complete set up and then give us a few moments to generate a new WordPress installation. As the message say. So you will get an email confirmation once it's being done, or you can click on proceed to customer area. Once this has been done, this will then take it to the home page off your account, where you can click on the my account, stop bullets up. So here we can see what type of account we have. We've got the start of account. Have the date when we signed up on, we also have the expiry dates, which is one month from now. So all we need to really take note off on the screen is the link just here, which is the link to our WordPress sites. So I'm going to open this up into a new tub on This is our WordPress installation all set up. This will be paid me to go to during the course to check out any changes will make the other sides. We can also go back. Teoh. I was signed ground admin. We click on the admin panel. I'm also going to open this up into a new top. You may need to also log in with the WordPress user name and password, which you provided when signing up. So this is the same admin screen which will see June the course. You have all the information on the left such as the posts and immediately want art. Any pages? We can change the appearance on themes on anything else. We won't Seo June the calls. If you do need access to any off the WordPress files and folders. We can also access thes from the sea panel so we'll go back to the EU's area. Have a red button here saying Go to see panel. We can click on this. Proceed, See Panel will allow us to manage our accounts, but all we need to do is scroll down. Look for the file section, have a file manager. We can click on the Congo and then inside here we have all of the WordPress files and folders, which you may need and it can access is by clicking on the navigation panel on the left. Inside, for example, would go to content. We can check out our themes which were installed on. We can also upload all delete any files as we need to do in the course. So this is the same file and folder structure which you'll find if you used month before inside of the hasty docks, so it shouldn't throw up any surprises. So remember, this is also a live link to which you can share with friends and family. June the free month. You can also access the admin just like with any over WordPress installation, by selecting four slash admin, which will then take us the back end of the website. We can also click on the Homelink here to be taken back to our site. 9. WordPress dashboard : So, regardless of whether you use Mom or local to set up your WordPress project, we had a quick preview off the WordPress dashboard just before when setting up our project . This is basically all websites control center, where we can ARDS, edit, update and delete any content. We can also use it for installing things such as new themes or new plug ins. I'm not going to go too deep into all these options in this video, as will get a lot more practice unused, most of them rather's costs. But I just want to give you a quick overview so we don't feel too lost. It first started out over on the left. We have all of our options, and we'll also see when updated, available for work. Press corps. We're using different WordPress. Themes of plug ins will also be notified when new versions come out to on its from this link where we can update each one of these. WordPress is also well known as a blogging platform. No one creating block posts. We can control them from this link. We can aren't a new post. We can then assign them to different categories and tags Once we go into here, we can also check out all of the different options. As you can see on here, we just have a sample. Hello, World Post, where we can edit or delete Lowell Blood Post. We also have this media library, which is a place where we can add all of our assets were going to use. So Charles Images, Conard videos, music files, documents on so much more. All of these assets are going to be stored in one central location, which is this media library on all of our different pages or blow posts. We'll all have access to this media library. We also need to add various pages to all sites when great blocked pages about US contractors pages on anything else which you would like on. The control is from this pages link. We will have a default page which is provided with the WordPress car. We could remove this sample pages wants We also have a privacy policy. Just here to if we used this as a blood will also make use of the comments. This is where users can upload comments for a blood post, for example. We also have the options control over these comments are available all whether we need to authorize the comments before they appear on the page. We'll also spend a lot of time in this appearance section, where we can arts and customizable theme. We can rearrange widgets, which are blocks of content. We conard in, edit our menus and generally make lots of changes to the look and feel of our theme. Look into where we extend the WordPress court aren't new features. So, for example, if we want to aren't some more SDO features, we could use a plug in. We'll also be making use of things such as contact forms from this course. You can also manage our users on also the roles and permissions that each use the house. We can set up different users to have admin privileges so they can have a higher level of control off our sides. We can also create regular users, weaken grade users to be editors and so much more. The tool section, if we check this out, is an area where we can important export data. For example, if we have a WordPress site somewhere else and we want to import all of the data into our new sites down to the bottom. We also have our settings, and he wouldn't control pretty much anything we want to you on our side. These settings contain lots of options which will go through in this course. So just that in the four months of the date where our bloke post will appear and also, if they use the kind of comments on a bum post, we can also switch between the back end or this dashboard and also the front end of our sides by clicking on the site title open Enough bar. So this is just a quick overview off the wordpress dashboard. If you weren't new to WordPress next we're going to move on to take a look at what is included in the WordPress call where we will discover all of the files and folders 10. WordPress files & folders: when we first set up a WordPress project. We don't want the WordPress call. You were Press call contains all of old files and folders, which were press 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 cold inside of these. But understanding the basics will really help us. Don't find all of the files and folders. This will depend on whether you use in local or mom to set up your project. If you were using the local, you'll need to go to the start screen and click on the arrow. This will let open up a window with the location off our projects. We go into here and then inside of all up in public. This is all of the core files and folders, which is needed for WordPress to function. If he was a mom, just like we're seeing before, we need to go to the hates detox and then into our Project folder. And then we are presented with the same files and folders, which is what is called the World Press Corps. The World Press Corps is not intended to be edited, so we generally leave these as they are. One of the main files which will have is the WP config, which is a PHP file on this fire is where we tell WordPress all of the database settings, which would have for all projects. This file can be created manually. But in our case, this fire was set for us when we created our science using local. Or if you chose to use Mom for this project. This file was created when one in the installation script earlier. Just below this, we have the WP content, and this is probably the location where we'll spend most of all time. This is an important folder, since it contains everything which will use for the site on any images or videos, which will be stored in the uploads folder. You may also often see a upgrade folder to which is a temper folder used by WordPress. When updating our site, you may also see a languages folder to if making you saw over language is your theme. If we open up the themes folder by default, where press provides some default themes for us to get started weird over on the left. Here we can see the default team, which is currently 2020. I'm looking changes inside the dashboard. You can also download new themes and drug them into this folder and then activate them that way too. We also have the plug ins just above this is going to be the location where we store all plug ins either via the dashboard or by downloading them on died in em to this folder. If you want to make some modifications to all themes, we can drag our feet folder. So, for example, 2020 weaken drug this over to a text editor. I will do this in one of our projects later in the course, including creating our own page templates. So this is a quick overview off some of the main files. I'm all jump into this folder as we need to during the course. Now we understand a bit more about WordPress. Let's move on to create in our first project 11. Music Festival Project: What we will be building: we can't begin with. A simple project to get was used to how WordPress works, including setting the pages, including themes on guardian general content. Let's take a look at what we're going to build doing this section. What is it going to be? My version off the project, which is going to be in London page for a music festival. You can follow along on greatest exact version. I could make it you don't to by using a different theme or design. If you were just starting out on the brand new to WordPress, you may want to follow along with the same steps and design which I've created and then possibly customized at the end, when you feel more comfortable doing so. So this is the project we're going to build in the section. It includes a navigation bar at the top. We're only going to create a London page, so I 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 head of section and then scroll on down. We're going to make use off. WordPress is new editor To create all of the layout and content for our home page, we're going to create different roles on blocks of content. Using this editor Learning house are different types of content, such as images, galleries on lists. We'll also find out how to lay things out in different columns. So we construct our content. Exactly how would like will also discover how to use things such as the media library, how to include widgets for blocks of content and also how to says abo theme, I'm going to kick things off by adding this fame in the next video. 12. Music Festival Project: Installing themes: back over to our WordPress installation, we're going to begin by installing a theme for all projects. I'm going to be using a free theme from WordPress Dog, but this is totally up to you. You can also choose a different team if you prefer. With Dewberry, mind that some themes have different options in the dashboard. So if following along with me using a different team, you may not have the exact same options which I dio. And you may also have extra options to depending on that team. So this is the default theme, which is came with the WordPress installation default in it to the blow page. We go over to the dashboard weaken, check out which FEMA's installed by going to appearance and then two teams, and he will see the themes which have been included when Donald in the World Press corps on by Default Mine Easy 2020 theme, which is the color scheme, which you can see when visiting our site. I want to go off to work. Presto dog on select the themes and a theme I'm going to be using is a long Caldas era, so I'm going to search for this. This is a theme I'm going to use for this project. So now we have a couple of options How we can include this. We can download this and places into our Project Teams folder just like we looked at earlier or can directly install from the dashboard. We go to out new, we can do a search and then wants the one that pops up which you want to use working, install. Then click on Activate to set this as our theme. The other themes which we still have installed are still available on. We can go ahead and activate these in the future. So don't worry about over idea in our existing theme when adding a new one. So now this is activated over to our project. I'm going to you refresh. I'm can instantly see a difference in Equal ism layout. However, we can still see the same bug post that we had before, so all of the content stays intact. All you're doing is placing a new theme on top of this. So generally one of the first things we want to do is to set the site title. If we go over to the dashboard and then to appearance on Customize inside. Here we have all of these settings for changing our theme. If you go to site identity about the top, we can change our site title, although it may already be set if using flywheel. Since we set this up during the installation, we can also serves a tug line which, as we can see from the finished version, appears inside of the tub. We can also set this to be displaying on our sides or check this box to hide this, too. I want to set this as Europe's biggest music festival. If we uncheck this, this one, I'll display underneath our site title. What I'm going to leave this object nightly. Com published To save all changes, the theme looks different to how it first looked when we seen the inside of the pictures over in WordPress Dog. This is because we don't have the same content set up as with this demo. The job of a theme is simply just to provide a skin or a color scheme and layout for our content. Also by default were Prestes Place upload posts on the home page two. We're going to changes in the next video by setting off our first page 13. Music Festival Project: Creating our first page: okay. We discovered in the last video the WordPress will default to display in our block posts on the home page. Just like we see here with the sample block post which is created when installing WordPress . We can change us. But first we need a page to replace this would in the dashboard. If we go over to the admin section, we have the pages option over on the left. This is where we conard money, Joe pages for this website. If we click on this, well, she would have this sample paid, which we can edit or weaken delete. So I'm going to click on the trash button just here and then create a new page of at the top. This new page is going to be our home page, and we're going to use it to replace Old Block. We have some information about how to use the word press editor. I'm going to look at this in more detail in the next video and although was simply going to add a page title and then hit Enter. And although I'm not going to add any more content below Conard new blocks of content using this icon just here. But for now, we're going to leave this as the page title on combat. Today's very soon over on the right, we have the options for when editing HelpAge depending on the block of content we're editing. We have very settings, such as the text settings of color. On alignment on. We'll work with these. More women have more content. We also have the document link, which is more related to the actual page. He would consent if one d paid to be public or private on. Also, if you want the page to be protected by a password, we can also set the option to publishes immediately. Or just like when I didn't a blood post weaken schedule a date and time when we want this to appear. Hello, This we have the permanent, which includes the WordPress Look. They were press log is the link to the page. So, for example, will have our u R l and then forward slash and then home just like this. You can use this in things such as men use if we wish to. We also have the featured image, which is the main image for all page or post. Depending on which team you're currently using, the themes offer may places in different locations. I'm going to set this when we come back to you adding content to this page. We have the discussion section where we can enable use the comments, and then we can set the page order down in the attributes. But we only have one page for now, so this isn't an issue. We also have other options about the topic. We click on the free dots. We can change the editor to be a coat type, rather on the visual one which we see here. We can change the default layout off this editor honest also a help. Section two. Next to this, we can also toggle the menu options if we just want a clear view off the editor down below . This would have some layouts options. Starting with the sidebar. We cannot a sidebar to add some more options for page ive on the left, on the right, or on both sides or confused to not have one at all. We also have other options here, too, and we'll take a look at these in more detail very soon. But the moment. I'm just going to click on Publish and then we contract our settings. I'm going to publish mind immediately and then click this again to confirm we can then view while page with this link here understates is to the forward slash homelink, which was seen before as these look, we don't currently have any content. We just have the page title of the talk, and you can keep this title in place if you prefer. Often, we don't want the page title to be about its off on displayed in bold like this. So we come to move this, using the themes that ends. I'm going to click on any page to be taken back to the editor, and not all themes have this option. To remove this, we often have to go into a bar code and then remove it manually. But luckily, this theme has the option. If we go down to our layouts, options have the option to disable our elements. On. The option we have is the content title. If we check this on update all page, click on the preview button and now all page title has been removed. Liveness would a fresh page to our our own content. So since this is going to be our home paging, next thing I'm going to do is to add this to the root of all Project Girl needs said to be the link off four slash home. We want this to appear just on the routes for project. We don't forward slash home. So if we remove this current, you have all blogged by default. I'm looking changes over in these settings. Let's go back to the dashboard by clicking the WordPress icon in the corner. And then, if we go down to settings and then our reading link on here, we'll see that the home page is currently set to display the latest posts. So we want to know changes to be a static page on the home page. Which wants is this whole morning, which we just created. We don't have the option to assign our block posts to a different page, but we don't have one just yet, so I'm going to save these changes, go back over to a home refresh, and I would say that's our home page is now displaying. Since we don't have any blow posts on this is without using the forward slash HomeLink in the URL so almost done now with our home page. But the last thing I'm going to do is to head over to the customizer ennui concerts, our social media links, which we have in this yellow section on the left. If we go once again over to the dashboard and into appearance on customize just like we looked at in the last video, If we go down to socials, click illness, weakening to certain social media profiles and these are the links which you see in yellow just on here. So, for example, we could go to twitter dot com American Art. I would twitter handle inside here. This link will now be used when clicking on the tweets icon. We can also go ahead and aren't in any other social media profiles. I'm just going to set the Warner for now and click on publish. If we now go over to our home page on Refresh. If we click on the Twitter icon when I'll see were taken into this link just here. So this is our home page now set up. Now let's move on to the media Library. Someone can add some images into all projects 14. Music Festival Project: The media library: Sooner or later you will have the needs are images to your projects. WordPress gives us an easy way to upload and organize all of these different assets. The dashboard has the media option. If head over there, let out of the customizer and then we can click on the media link. This will take us to the media library, which is not just for images. Also fall over types of media such as videos, documents and audio. You can use these same images as me for this project, which is available as a download. Or you can also use your own if you prefer. I also have the project images downloaded on my desktop just here. If we open this up, we have six different images, which I'm going to use for this home page. We can either drug these over individually, or we can simply drug over the full images folder. These will be added to oh Media Library. Once this is done, we can click on any of these images and edit the information such as the old text we can add in captions and descriptions. And it's really good practice for search engines on accessibility to do this before deploying any side Live to the Web. I'm not going to go through each one of these images. Text for now, since this is just a demo project and not intended to be uploaded. With these images now included in all Media, Library will now have full access to these inside of all block posts on also all pages. Let's go back over to our home page, which you created before go to all pages and then hover over the home link and click on edit. We can answer these images directly into the pages content section. I'm going to do this in the next video. At the moment, I'm going to set the featured image for the page, which you can see over on the right hand side. The pages featured image come be displayed in a number of locations. You know what case the themes offer? Said this location to be in the header, we can upload a new image over can click on the media libraries, access any of the images we already have saved. I'm going to select this one click on search featured image. We should you update D page by clicking on the update button. Go back to the dashboard and then I'm going to go to appearance and back to the customizer , where we can now also use this image for the site icon we can see in the preview. That's our image is also being a needs to the top of all page. I'm going to make use off this same image to set the site icon by cropping this heart section. And then it will appear in the browsers top click on site identity, and then we go to the sights icon. I want to go with the same image and then cross a smaller section. This looks fine, look on crop image and then publish our changes and now this image is now placed up in the browsers top. 15. Music Festival Project: The Gutenberg editor: in WordPress Version five, they released a whole new revamped editor. The both create in Our pages aren't also blow posts. This new editor was called Gutenberg, and it moved away from a sort of text editor style and replaced it with blocks the length these pages were pressed. Dog forward slash Gutenberg on. You don't actually need to head over to this page. What is going to give you an idea off? Some of the blocks, which are available to create our home page scrolling down, have a selection off some of the blocks, which is available. We have basic text box images, buttons and also wants to help out with layout such as columns. We can edit these blocks. We couldn't rearrange them. I'm looking also nest, some of them inside of each of the two over to our home page in the dashboard. We can start to work with this new editor by going into our new page. So it's all pages American hover over the home link and click on edit. When I created this page early on was simply just I did it. The page title. I'm looking now. Go ahead and add any different type of blocks to construct our new page. Click on the plus icon to are the block concert through the various blocks go through the most used on all these blocks are arranged into different categories. Almost frequently used will appear in the very first section. We have the common blocks for images, text headings and list. For example, we have a farm out in Section four, things such as coal blocks inserting custom HTML on also tables. We have the layouts elements where we can divide over content off into various columns. We could have things such as images and text alongside each other on also grouped together related content. We have the widgets. We will discover more about widgets in the next video, but these are basically self contained pieces of content. You could art area, which is plays all of all, blow post categories on so much more. At the very end, we also have a very Sinbad where weakening to Twitter content, we can add a YouTube video looking at a Facebook post along with various of us too. So let's get started by creating the home page, which we looked at earlier on. Of course, you can edit this to suit your project. I want to do a search boy head in. He had Iman comes off. We just need to click on this. But I was simply under the tax for our heading, so I want to say a full weekend off, live music on and statements it will hover over this block. We also have various formatting options so we can line our text. I want to align this in the center. You can also change the level of heading. This is currently a level to head in with the lower numbers, such as hate to be more important on also larger than the higher numbers. You can also change this into links and also make a bold or italic if we prefer. But I'm happy with how this looks for now. We can then also create some more blocks, even above or below by using the same icon just here or, if you hover over, we can see the plus symbol appears above on also just below two. That's on a block just below. I want to go for a two column layout for the next row. Let's go into the layout Ling just here. Click on columns. We have different options here, but I'm going to go for the 1st 1 which is to equal columns. Click on this and then inside. Here we gain have this plus icon the at a block of content. Since this event is over a full weekend, I'm going to use the left column to have a list off everything which is happening on the Saturday and then on the right. The same for the Sunday Let's start with a head in. This is going to be for Saturday. Most wants changes to be a level free heading, so it's smaller and less important than our main headings also line this into the sensor over on the right. We also have some additional options, such as equal settings. I'm going to train just to be a green color. We can use any of these theme colors. Also, choose a custom color, too. Over on the right, I'm going to do exactly the same by choosing a head in. This is for the Sunday I'm also going to online. This in the center changes to be a level free head in and also used the same color. So now for each one of our columns, I'm also going to add a list just below this head in. This is going to highlights all of the events which happened in on each day. Click on the plus icon. We have the list just here on this. Could be any information which you preferred aren't I'm going to go for a life. Bonds, 20 singers, two DJs, eight food and drink stalls, ball stages on three arenas. And then the last one is going to be free overnight camp in. I must say we've all tickets to make this simple are almost going to just copy this list by using command or control. See at over to the Sunday block on. Also, add a new list we can paste in this link once again. And also, of course, you can change any of these details to suit your project. Okay, so just blow this. I'm going to add a new section which is going to be a media and text block. This is going to give was a image or a video on one side, and then some text on the opposite side, too. This is just going to be a picture and also the text off Early bird tickets now available. I'm gonna go ahead and aren't a new block just below this. You can find this under the layout elements and then media and text. We'll see on the right inside here. We have an example of how this will look. Let's use this. We can also switch the direction. If you want the media to pee on the opposite side, we can switch with these two buttons just here. So in the media area, we can also upload an image or choose from our media library. Let's go. For it exists an image and not on the right inside. I'm going to answer text, so I'm going to say Allibert tickets no available. You can also add it. Some form out into these sections two on the right. But I'm happy with this for now. That's any point during construction, you can also check out a preview by clicking on this link on this. Well, it was an idea of how all page will look with the changes were made so far. So these are the two rows just here. I'm actually going to add a separator, which the line between each one of these pieces of content. Let's do this point. I didn't a new block. We can do a search for a separator. Click on this and then we can click on this icon just here and drag this exactly where wanted to appear. I'm going to add one more click on this number, never drug mistress Below or click on the town icon. This will and go below. Our next piece of content inside of these sections were not just limited to text. We can also add different pieces of content to So, for example, if we click on our block while still within the right section, I'm going to add a button once I d text off by. No, we can also changes into a link by clicking on it. This put interest here and then typing in a you borrow. I'm also going to you change the text color to be the green to match the headings from both . So after this separator, I'm going to add a new level to head in. This next section is going to be some images from last year's event. We can also sensitise once keep this as level to too much the one from above, just here. And then after this, we can add a image gallery. This image gallery is going to display all of the images, which we added in the media library. Let's do a search. We could go for gallery. We can also upload additional images or choose from our media library. We've already used the guitar image, so I'm going to select all of the rest. Click on Create New Gallery than insert. We can also find you in the display of this gallery, for example, concerts. How many columns who want to appear if we drop this to to you have been out to images side by side. Whether I'm going to keep this as free columns, you can also rearrange the order of these images by clicking on the left and right buttons . Just after this, I'm going toe aren't a separator, and then a new level to head in, which is going to be 40 tickets information just like the ones above. This is also going to be a level two on also aligned into the center on the final block, which I'm going to art is for a table, which is for the ticket prices. We could add a table block if we side for this. This is also available, but I'm going to create my own. He was in a free column layout so we don't have the borders around itself. So instead, let's search for a column Click on this. On this time, I'm going to go for free equal columns. The first column is going to be the price in information for pre sale. Well, don't have the early bird section in the middle and then the standard ticket prices on the end, the 1st 4 we're going to add a paragraph with the text off pre sale. I want to make this bowls on. All of the text in this section is going to be aligned into the center if we hit enter whilst in this cell in this section is going to be all gone. So all the tickets for the pre sell have gone, so we're going to send to this in the middle. What was going to make this red since they are sold out, it enter and then other new block. We can also other text inside of here. I want to go for 29. A line is in the sensor. Since this section is all sold out, I'm going to click on the drop down icon just here and then you can add some additional settings. I'm going to go for the strike through, since this is no longer available. So highlight this click on strike through When Now see the line in between Here in extraction is for the early bird, which is also going to be in a paragraph. I was like this. Make it bold on also centered It's enter on a new block of a paragraph. This is going to be on sale now Make sure this is sensitive to I like this and we're also going to change the color settings to be green since he is now on sale just like before hit , enter, looking aren't offered role. This is also going to be a paragraph on the text off 35 as mentioned before, it probably would be easier to create is in a table. But we would have all of the borders around each one of these sections differed head in Also, a paragraph will have the text or standard it's high like this. Make it bold on also centered, it's enter. This is going to have a date when the east under tickets are available, Someone to say after the 20th of August. Listen to this. It's enter on. The final piece is also going to be a paragraph with the center text off 49. So let's click on the preview and check. All of all changes are looking how we want them to. We have the two sections from before with these separators between each one healthy image gallery, all of our headings on also the ticket info. So once you are happy with this design would go back to the editor. Click on updates on all of the changes will be saved. 16. Music Festival Project: Widgets: the theme which I have chose to use for this project, along with many others supports. I didn't widgets. A widget is basically a block of content. What a feature which we conard to parts of all theme. The themes offer sets. Exactly which part of the theme we conard a widget to Anamika drug various widgets into these areas back inside of our home page. Any screen which we used in the last video, it was gold down to the bottom. We have the foot of widgets on the left. The offer of this fame has allowed us to set how many widgets areas we want in the footer. The default value is free, meaning our footer is split into three sections where we can aren't content blocks remember also hard the layout options, including sidebars. Well, I would just can also be I did it to a sidebar to along with the foot areas. We can do this if we click on the WordPress link to take us back to the dashboard and then go down to appearance and then inside he will have a widget link. This page has two sections on the left hand side. We have the available widgets where we conard things, which is a calendar, a menu block, we conard, a search box and also things related to our blawg, such as comments on the recent posts. And here we can see all of the areas which the themes offer. How Seth such as the sidebar on the foot areas. So all of these areas can be customized, and I'm now going to add it. Some widgets to the foot, sir. So the footer Widget one is the first block of content which will be on the left onside. I'm going to answer these a text block by drug in this over and then dropping this into a section inside here. We're going to add some information about the V I p tickets. Some would say go V I P. And then some text inside of the any, sir, I'm going to say of great U V I P. Enjoy your weekend even more. After this, I'm going to add a list. I'm going to say exclusive the I P only boss, exclusive toilet facilities and also the company area close to main stages. Click on Save. It's no closes down and we can get to work on all foot widget to inside of here. I'm going to drug over the content book, which is recent posts. We only have the one block post at the moment, but we can also limit the number of posts which is shown in this section. I'm going to keep this US five and the need text off. Keep up to date with all block. You can also add the date if we choose by clicking on this and then say this section but the third Witch area, I'm going to add a sound clip from last year's festival. We can do this with the order your widgets by drug, and it's over. I have an audio clip saved on the desktop. Just here. You can download one if you like, or choose any of the widgets. This audio clip needed license. So if no included this as a download with the course we're gonna gain at a title. I want to say he a sample from last year. We cannot audio. I want to drag this into the media library. We're gonna tow widget and then say this. Remember that by default there is free separate areas in the footer. So now these audit, I'm going to go over to the project and then refresh Go down to the foot of section. We have a list just here. We have a one block post which is being created on. This is also a link to it. Embarked. We also have audio clip. We can start us off, and this is a fully working audio player. So our first project is now completed and we have a nice looking project in a very short time. This is also fully responsive to by default. If we think the browser down, it will also look good on all screen sizes, including a drop down navigation menu. In the next project, we're going to go a little deeper into WordPress. Where will build your very own blawg? And we will also learn about new things that just love menus. Users comments on so much more 17. What we will be building: Welcome back to this brand new section. We're going to be building a new project in the upcoming sections, which is going to be a Web development block project. You can, of course, Taylor this plug to be any subject off theme which you choose. But the purpose off this project is to learn about some new WordPress techniques, such as adding different pages, working with menus, working without blood posts of dating anything on also how we can work with different users on also the permissions on the roles which each user has. Let's take a look at what we're going to build in the upcoming section, so this is going to be the blood project which we're going to crate in the upcoming sections. Of course, this is just my version, and you can completely make it your own using a different theme. Different images on also different content. So as you can see about the top, we're going to have a slider which is going toe have different header images. Well, all this we're going to construct our home page using various which areas on also a template which is being provided with this spacious theme. We're going to have links to various pages. We're going to have a calls Action section Recent testimonials case, that is, I'm also a featured area. I was going to make use off widgets to create this foot area. We're going to take a look at lots off different customized options along with our menu about the top. Ross cons aren't a block section, which is going to be on its own dedicated page. We can then click through on any of these blood posts to be taken into the full blow post. We're also going to take a look at how we can use a plug ins at a contact form along with various over subjects such as search engine optimization, fucking up our site. Great in different menus, managing users on permissions. A long way to comments for all blogged. So this is what we're going to be great in. And I'll see you in the next video. Where will begin to set this up 18. WordPress Blog: Project setup: going to set up our second project pretty much the same as the last one. I want to be using local to set up this project. But you can also use Mom if you prefer We need to do is follow the instructions from the first project. You can follow exactly the same steps if you zoom ump, but change the database name and also the project name along with any log in details. If you prefer. I want to get started with local by stopping our first site. Although this isn't essential, click on the plus icon and then we can start our second project. I once gold mine the Web Deb log Continue stick with the preferred environments. We can set the user name and password, the simplicity. I'm just going to go for block. This is, of course, just for demo purposes, But make sure yours is more secure. Click on outside. Give us a few seconds to get open. Run in. It may also need to enter your password if using a mark for the insulation to complete. Once this is open running on, we have the green icon just next to it. Economic click on view sites just like we did for the first project. Un. Also open up the admin. I'm going to log in as a Wadman. We see the now familiar dashboard on. We're going to go ahead and start with the appearance and then themes. Then that's our our theme, which is going to be called spacious. So click our new do a search for spacious. And this is the one which I'm going to use install and then activates. The theme is now set to default over to the project off I'm looking track. Everything has bean set up correctly. This is our new theme, just like with all of the projects during this course, you can choose a different theme if you prefer, but just bear in mind that some of the options may be different inside the dashboard. So if you are completely new, I would recommend that you stick to the same themes as we used you in the course. If your team has taken effect just like this, we're going to move on it. So the next video and take a look at UN in some sample data 19. WordPress blog: Importing sample data: no have all basic theme installed. We need to know. See what it looks like with some content at the moment, we just have some very basic block pulls content, which is provided by default with WordPress. But I want to see what this theme looks like with some additional content. One way of doing this is to write lots of different block posts, lots of different pages and also lots of different media and content. We'll, of course, be I don't know your own posts and pages on all the information which we need, what a different way is to use the word breast test data. This data is used by many theme developers on also the WordPress team. When reviewing a theme by using this test, data would make sure that we have all of our angles covered along with sample blow posts included his things like images, comments, pages and tugs. So we need to see all this content into all theme and make sure our theme is ready for all of these different types of data. Of course, professional on published Dreams on theme forest on WordPress Dog should have already being tested before approval, so Let's import this sample data and see how old team looks with some more content. Let's do a search for WordPress Theme unit test. This is the language is need here, which is Codex that WordPress dog Ford slash theme unit test. Just under the set up here, we can download a copy, so I'm going to right click and then save link us and then say this onto the desktop with the default name. Once this has downloaded, we need to go back over to our dashboard where we could now import at this data. We do this in the tool section and then to import scroll down. We have this WordPress linked you CIA. As we see here, we can use this to import various pages and posts on Also, I was sample data includes all of these things, so we can just click on install. Now, with this installed, we can then run the importer where we can provide our new file, which we just downloaded. Years old file. I'm saved on the desktop. Click on a file and then open this up upload. So since we are important things such as blood posts, we can also assign a certain user or a certain offer to appear for each one of these. Since this is just test data, I'm going to leave this empty. But I am going to import the attachments, click on submit to begin the import process. Once this has finished, we should then see the old on message back over to our project reloads. I'm gonna have a lot more content to work with. So very occasionally, sometimes something will be missing. It's such as, um, images. But don't worry about all of this. This is just some sample data toe work with without project. We see the blow pole star displaying on the home page. Since this is the default setting, we also have various different pages. We have dropped down my news. We have comments, we have different categories and tags. So this gives a good indication of how our size will look once we have a lot more content. In the next video, we're going to look at how to add our own log posts and also how to update existing ones too 20. WordPress blog: Adding and updating posts: Welcome back when I'm going to look at how we can start our own blood posts. And also how to update existing months in the last video added all of this information by pulling in some sample data which included lots of different blood posts. This is great for saying, Hell, things will look in our theme. But of course, we also want to add our own blood pools to. So to do this, let's go over to the dashboard. And then if we head over to the Post, we have the option to view all of all posts On also are new beauty categories on also the tags. This is laid out in a very similar way to the pages section which we looked out for the first project. Let's go to all posts. This gives us a list of all the block polls which were being pulled in with our sample data . We have the blood post title. We could hold her over this to edit and also remove this too. We could see which offer has been assigned. These air also pulled in from the sample data, but the offer will be ourselves when we aren't our own block posts. We can see the categories which is being assigned to this post on also any tugs to. We can also see if any book posts have any comments. This particular one has one commenter scientific it's on. You can also click on this to be taken to the comment. We can see the date when the Post was published. We can also see that this particular one here has been scheduled to a later date. When creating a new block post, Weaken either publishes immediately over contractual ISS for any time in the future. So let's go up. I'm looking at a new post, even here, all by clicking on the new post just here. Also from the sidebar to So click on this. And then we're taking it to the Gutenberg editor, just like we used when adding a new page to begin. We aren't the blood post title. Someone's on my first block post and then hit Enter. We don't have access to all of the blocks, which we looked at in the pages in the early sections. Look at our paragraphs images, audio clips on also lots of different layouts district your old log exactly how we wanted to. Dad, some content. I'm going to add some sample text from Laura MIPs. Um, let's do a search for Laura MIPs. Um, and if you've not use this website before, which is lips, um dot com. This is simply a way to generate some sample text. That's while blood posts or pages. I'm going to go for five paragraphs, click generates, and then we have five paragraphs of text which wouldn't copy so command or control see back over to our post on this defaults to a paragraph. So we're gonna paste this in and you can see it. Each one of these has its own paragraph section so we can edit these individually to we have some familiar options from the last sections where we can align our tax. We could make a bold, italic weaken turn part of it in the links. I would also have the color settings on the right on site. Another useful thing we can do if we have a really long block post, is to break it up into multiple pages. We could do this again with a block. Let's go for just in between here, we cannot a page break and then this will splits are blow post into two separate pages. Then we'll move you. This inside the browser will have page born and to at the very bottom I'm looking. Click between these two different pages. We also seen before when we looked at the list off different blood posts that if we click on document here, we have the ability to assign this block polls two different categories on also different tanks. These are some of the categories which are being provided with these sample data, So we're gonna sign them to any of these. All can also add our own category. Let's go for custom. I'm gonna check this, too, on this to upload post. We can also do the same if you want to add tags. So, for example, let's go for news on this. I'm looking at as many different times as we would like. We also have the permanent, which is the direct Link 12 Love Post, which would click on inside the browser. We also have the featured image, which we looked out when adding pages, and we'll take a look at this very soon. The exert is a shorter or a preview of our blood post. This can appear in our list of blood posts as a short version, which we can click on it to be taken into the full version. If we don't have this in, WordPress will lend River back to the start of our blood post and use this as our shortened version below. This we have the option to enable or disable comments on opposed to. Its theme also allows us to select different layouts on also place aside by alongside of a content to just like we mentioned before. We also have the options to make this published, or we can show you a list to a later date. Let's click on preview and take a look at our blood post. Click on Publish. We can then go over to a blood page refresh on our block. Post is just here. Even though this is the most recent, we don't see this about the very top. This is because with the sample data, we have a sticky blood post included, too. A sticky block post means that this one will stick to the very top of all blank page. If we go into this. We then taken it to the full version. We can also edit this block post with the link over the top, then over in a side by will have the option to stick this to the top of the blawg. We're going to uncheck this click on publish and then head back over to our side. I click on the WordPress icon and then visit site. This now means that we don't have any sticky posts on our recent block. Post is now added to the very top. This is the shortened or the exert, which will mention before we can click on this and then be taken into awful version, we can see our tugs on. You can also see that this post has been split into two separate pages on this block post, just like any of the other ones can be edited with this link up at the top. So this is how we can add new blood posts and also edit existing ones. One of the ways we can really bring all blood post the life is by adding images on different types of media. I'm going to take a look at some resource is for this in the next video 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 have all blood posts with some content, which is great. But we can really bring it to life by adding media such as images, audio and videos. So if we scroll down, we're going to begin with our featured image. These ones currently at the top are just simple plain text, but we can make it stand out a lot more with a featured image just like this sample posted just here. So it's calling back to the very top when click on upload post American entities of at the Very Top, as in a featured Imageworks, just like in the first project, when we added it to a page. But this time the featured image will appear on the block post listing click on Set featured image where can upload our own file or take advantage off the media library. We now have some images which provided with the sample data, so let's click on any of these. I want to go for this one just here, so this, as the featured image look, date and then we can also preview this. So as we can see from the full version of all blood, post the featured images not included on this section. The featured image for this particular theme will only display on the blawg page listing. But what? I wanted to add this image to this page two. Well, this is something which could be hard coded in if you know how to code a WordPress theme. But instead we can go into any post I'm looking also rd image as a block. So don't blow this section. I'm going to add a new block. Let's go for the image where we can upload or access old media library. We can choose any image off here. I'm going to go for the same one once this is highlighted. We also have various options. We can move this open down just like we come with any of a block. We could replace this image. We can link this to a different page and over on the right, you can also change the size of the image to along with these single images. We also have the option to art a gallery too, just like we did in the first project. Let's go back to the media library. I'm looking select as many different images as we would like to include in our gallery, click on Create. We can then reorder these and then insert click on update, and then we go back to old bloke Post refresh now images and now, displaying on the page. We can also and video clips to, Just like with any of the block. Let's click on early plus symbol. Go for a video that search for this. This is any common block section, so we could go to the media library. If we have a video clip over, can upload our own. I want to go over to pick sabei dot com and then click on the videos. We can select any video clip from here. I'm going to go for this one. Click on the free download. This moment is fine, since this is just a blood post well mode back over to the any page. We can click on the upload button and select our new video clip. My only saved inside of the downloads. Click on this and then open. We have some video settings in the sidebar. If you want the video toe loop, if you wanted to be muted, and also if you want the controls to be visible. Click on a date and then preview. Go down, click on play, leaving us with faithfully work in video clip. We can also add that some audio clips in exactly the same way, so that's aren't a new block this time. Let's go for audio. Want to grab a audio clip from ben sound dot com? We do need to add it. Some attribution. If we don't have a license so we can click on the download, let's go for this one. We can see what can use this audio clip for free as long as we aren't a credit to ben sound dot com inside of the description. So we'll have an example of how to attribute to the author at the bottom. I'm going to copy this. I don't know the audio clip. And then if we go back to a post and then into the eddy section will have all your block, we can again select this with the upload. Open this file it Wouldn't it click on the replace, dropped down and then go to the media library. We can then select our clip. I'm not the attribution into description. Click on select to now save this update and then preview all post down the bottom. We can click on her audio player. We can play and pause along with interesting the old your levels. So the final thing I want to show you to include media is to included from a u R L. So currently we've included things such as all you on video by using the upload button. We've also included images from the media library, but we can also linked to a girl. So if we go to Wikimedia Commons, for example, this includes lots of different images on media, which we can include in our projects for free. So this has a image of the day. I'm going to click on this and then right click copy image address and then it will go back to any post this time it when we are a new piece of media. So let's click on a new block. It's like the image. Instead of uploading a new image or choosing from the media library, we can also insert from a URL paste in the Link Update Oh post and this is an alternative way off. I did not some media into a block posts without including them in 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 blawg and also how much access each user actually has. You may have already noticed when working with WordPress. So far inside the dashboard, we have this uses option on the left it uses option has the ability to display all of the current users, which we have for project. We can also add new users on also, check out our own profile. I want to click on all users and see all the uses which are available, which has been included with your sample data. So why the top? We have ourselves. We have a we use the name. We don't currently have a name set, but we can edit this if we want to. We can see the email on also the roll off administrator. This role of administrator basically means we're in complete control off this full project . We can basically add, edit or delete any time of content which you want for this project. Well, this we also have to subscribers which have been added with the sample data and since we are logged in as the current administrator, we can also edit. The particular roles for any users we need to do is to go into their profile, and it changed the rule just on here. We can also edit any off the rest of the information to, such as the email, and then update the user just here. Let's go back along with this roll off administrator and subscriber. We also have different roles, such as contributors, offers editors and also a super admin to. So let's go over to Google and do a search to take a look at these in more detail and then do a search for WordPress roles and capabilities. And this is the link we need just about the top here on the WordPress Dog website. We'll see the WordPress hard. Six pre defined roles have the super admin administrator editor offer contributor on subscriber. Each one of these roles has access to different permissions, which allows a certain level of access to our side about the very top. We have the super admin, which is the administrator when we use a WordPress multi site. A WordPress multi site is a network off multiple WordPress websites or using the same WordPress installation all the same dashboard. We're going to look at this in more detail later on in the course, but these super admin is basically in control of all of these different websites. If we just have a single website just like we do at the moment, with all blawg, the top level of privilege is the administrator. This is someone who has access to all of the features off our site. The next step down is the editor, which is somebody who can not only publish and manage their own posts, but it's also posts off over uses to. After this, we have the offer who can publish and manage their own post only but not the post off over users. Contributor is somebody who can actually create a post, but that post is not yet published until this is approved by somebody with a higher level of privilege. Down at the very bottom have a subscriber, which is a general user of our sides. They could only manage their own use information such as their name and email. Have no capability off guardian, a block post and you page or any content to our site. So back over to the dashboard on into the use of section. We already have our administrator, which we created when we set up this project and also the two subscribers from the sample data. But now we're going to go ahead and add our own user. So click on at new off the very top someone to go for a test user email. Just a test. We don't eat either website inside here. We can also any password. I'm going to keep this as test to the simplicity. Of course. Don't do this on a real website. We can confirm on here. We can also set the role of this user. I want to set this user to be a subscriber, which is the lowest level available. And then if we click on our icon upon the very top, that's log out as the administrator number can log back in with our test user. So the email was test on tests. Don't come the password. So now we looked in as a subscriber. We don't have any of the dashboard options on the left. We only have access to own personal profile. We can change the color schemes and also our work personal information. If we now head over to the actual site on the front end of our projects. Let's go into one of the blood post. You can see we still have a full access to all of the information because we want anybody to actually see the content on our side. However, we don't want to give anybody full access to adding content. Let's see what happens when we are day comment. So let's on a comment off. Hello, posted comments. We see the message, all that your comment is awaiting moderation that's no longer alter as I will subscriber. I'm working a lot back in, asked our administrator. So answer the original user name and password to be taken back to the dashboard as the admin. You should now see a number right next to our common section, which is a number of comments which we need to approve. But its opposite is 34 different comments which have been included with the sample data. 30 have been approved, but we still have four, which is pending. Let's click on this. We see the one of depending comments. Is this Hello? Comment which we are did it from all test user. I'm going to select the check box at the top to select all, then inside of the bulk actions we can click on approve, then apply this to all four of these comments. Let's go back over to all sites on back into this very first blood post. Go down to the bottom. His comments has now being approved by default. If a visitor visit your website on signs up as a new user, it will automatically have the subscriber role by default. We can change us, however, down in the dashboard settings and then go to general inside. He will have the option off new user default role, makin changes to be anything over it and subscriber if we have a website which has this need generally low for most types of website a subscriber, you say sensible role to go for US default so we can better control who can add content to our site. Also as an administrator, there is more settings to control these comments inside of the set in section under discussion, but example, we could restrict comments to users who are logged in well concerts. How many levels deep wants over comments to be nested we can receive emails when somebody and say comments and also many of the options to. So there you go. This is how we can manage different users on our website, how we can change permissions off users and how we can safely control the comments being posted to a blawg. 24. WordPress blog: Adding pages: it's now in this project will be mainly focusing on our blawg on also on blood posts. In this video, we're going to focus on audience, um, custom pages. We're going to go ahead in at a about his page on also a contact. So this is all of the links at the very top. Easier on if you go to the dashboard on into the pages will see a list of all of these different pages. So it was a clean start to work with. I'm going to remove all of the sample data. I'm going to other own pages in small theme. So through this, let's click on the check box of Very Top on Under the bulk actions we can click on it, moved to trash and then applying this to all of all pages. We also have some on the next page, so we could do the same to these last ones, too. That's that new upon thievery. Top on the 1st 1 I'm going to add is going to be the about US page. If we now go to our blawg reload, the home page will see that our menu options have now disappears. This is because we currently have no pages to display and we'll fix this very soon. So first for Weaken adds a page title. This is going to be about us. American aren't any different blocks, just like we've looked at in previous videos. So I'm going to go for a paragraph to begin with. I'm looking out at some simple tax about others. So again, I'm going to go to Laura MIPs. Um, I'm looking, generates some sample text. We can also fill in some details about yourself, too. I'm going to copy the sample data basis in to our page even us, with some content to work with over on the right have all of the usual options will help throw page. We also have the page attributes where we can set a page templates. Currently we set to the default template. But these themes offer has also provided some layouts. Alternatives. Page templates are special, a template files which we can use on either a single page or we can apply the same template to many different pages to to apply a consistent look and feel across our site. So, for example, we can have a specific template boy four or four page and then have a difference. Multi use templates available to use on our abounds and contact pages to keep our layout consistence. We will look at template in more detail soon on. Also, in particular, Woman created our own custom theme. We can also set the display order of all pages to UN. Also selected the layout just below we consume active Who wants a sidebar, which I would want the sign barter display or, if you want, no sign about it. All these all of the options which are available with this current theme. If we go buckle to WordPress Dog and into the Themes section inside here, I'm going to do a search for spacious Take a look at our current theme. It was rolled down to the different tugs on also the description. We can see how Maney differently lt's fame has. You can see how many widgets areas and also the options for sidebars to. So we did touch on this earlier when we looked at how to find our themes for our project. But hopefully now this information will make it a little bit more sense. Now you understand a bit more about WordPress Buck over 12 page. Let's click on Publish. Using the default layout into a project on Refresh the Belt is Page has automatically being added to our menu. Let's go into this. I must see all of our sample data just here. If we go back to the edit screen and then down toward layouts, let's take a look at some of the over examples here. Let's go for the no sidebar and any content in the center update this post on reloads the page. Even all content now in the center, back over to the dashboard, we can create our next page, which is going to be contractors. So back to the dashboard, didn't you the title. It's off of contractors this time, rather than adding that the sample data going to are they? Oh, no, the list. So let's click on the list block just here. Let's just add some sample lines off address inside here. So one I want to copy this on. Pace this into a few more lines. Welcome back to this contact was page very soon, where we're going to add a contact form. So let's click on publish. Confirm back to the dashboard on the third and final page, and God's art is going to be for all blawg. This is going to be simple, or when is to is to hit. Publish. I make this available for later on where we can assign all block posts to this particular page. We load our project, and now we have all free pages about the top, which is being automatically assign it to all menu on its this navigation menu, which we're going to look at in more detail in the next video. 25. WordPress blog: Adding our navigation menu: We already have a menu in place at the top of our home page, which was added with the sample data. And also each time we had a new page such as The About Us on Also the Contractors Page. These were automatically I did as linked into the menu. So when using a pre bill theme and also including its sample data, sometimes things like all men you just appear in can just happen behind the scenes. However, we want to learn all about WordPress. Let's now go over the dashboard and take a look at how we can art our own navigation menu. So head over the dashboard on inside of the appearance. Have a menus option just here. We'll see some of the menu links are in red. We also have a message just here. This is because we have removed a lot of the sample pages, so these are no longer available for this menu. This doesn't really matter, because we're now going to go ahead and create our own menu to replace this one. We can do this by clicking our links just here to create our new menu. So let's begin by giving this a menu name. I'm going to go for top navigation. Since this is going to replace the header, navigation creates our menu, and then inside of these settings will have some options. The 1st 1 which I'm going to check, is to automatically aren't new pages to our menu. This is a reason why the previous Manu Heart or free links, but the free pages which were created. I'm going to make this the primary location. Therefore, this will replace the worn in the top navigation section will also create a foot A menu in just a moment and then when it's odd, what pages or links we want to include in this menu over on the last week in art, all menu items beginning Widow pages, I'm going to add all free off our pages, which we created. Click add to menu and knees No P A. On the right on site we conard direct links, 12 block posts All. We can also add custom links to different websites or different pages on our own site. All we need to do is start the girl inside here on also the text, which will appear as a link in the menu. But all this we can also linked to any categories which you created to. This will provide a direct link if you wish to Ardis in. So let's go ahead and save this menu. And since this is in the primary location, you should know replace the default menu, which were hard in from before. We can just check. This is our own rather than the one from the sample data. Let's go to contractors. Click on the drop down. We can remove this, save all my new reloads, and now we see our two links about the top. Let's reintroduce the contact page that's in my new. We can also rearrange each one of these links by drugging them. Or we can make thes eight sub item just like this. A sub item is a drop down, which means our links are not directly visible in the menu. Instead, if we say this, we should know after hover over our link and then get the drop down links. I'm going to restore these by clicking on out from on the block and also the same we'll contact to Let's also create a new navigation for all foot area at the minute. We just have this copyright section, so that's great. A new menu to go in this location once called this the foot the menu create this click on the foot of my new as the location I'm looking also changes with the locations, Tom. But just here as an example, I'm going Teoh categories to this menu. So that's select all of these on these 20 menu. Save this reloads. Our project on these links are now at the very bottom of all flutter. If we want to remove any of the existing menus, we could go back into the menus link and then inside of all, drop down. We have a list of all the menus which are being created. So, for example, let's go for social menu. So, like this, all we need to do is to click delete menu down on the bottom, and this is now being removed from our site. Leaving is now with our custom menus under full control over our navigation 26. WordPress blog: The customizer in more detail: in this section, we're going to focus more on customizing our theme to suit our needs. We've already took a basic look at the customizer in the dashboard, which is under the appearance section, when I was going to revisit this customizer and make some changes to the look and feel of our site. This will also give us the chance to see some of the different options which have been added by this particular theme on my desktop. Over on the right here I have a Images folder, which is included with this course as a download. So go ahead and download this. If you want to use the same images, me or you can also choose your own, too. Let's begin it by going into the media library on drug in over these images. So dashboard a media on weaken drug over the full images folder. Of course, for real production sites, make sure that the alternative text on the rest off the descriptions are filled in correctly. I'm looking now uses over in the customizer. Let's go back over to appearance and then customize we'll have the familiar sight identity which were used in the last project where we cannot change these sites. Isil. So I'm going to you changes to be Chris Dickson's Blawg the tag line. We can also change this, and this is the text, which appears just below the site. Name. Mine is going to be all things Web developments. We also have the option to select the logo to, which is going to go alongside our sights title. So let's do this and go into the media library. I'm going to select this one. We can skip the crop in so it stays in the original size. We also have the option to change the logo for retina devices to, but I'm just going to leave the standard one just like this. So even though our logo is uploaded, we don't see this alongside the site title. This is because we need to. It's like this in the options just below. We currently have the header text only I'm going to switch between the logo or even show both. The site icon is the one which appears in the tub of the browser, just like in the last project. I'm going to go for this one just a, uh like this and then publish our changes. If we go back to the main customizing menu, we also have a lot more options. Some of them were in the last project, but some of them are specific to this theme. We can change the colors of all theme, such as he had attacks on also the background color. I'm going to change the color. Let's go for any random color inside here, make it a little bit lighter. So this is fine. Don't worry too much about this because it can be changed our later date on. Also later in this section, we're going to look at how we can add a background image to replace this color. I'm going to publish using this color, but the main options well, this will have a lot more options to on. All of these are going to be covered in more detail very soon. For about this section on also included some dedicated videos. It was go down to the design section. We can make more changes to the layout off all plug about the very top. We can choose a default site layout, which is reflected throughout the whole site. We have the box layouts of the top, which includes the background on the left and right inside. We can also make a D A full width to so we don't see the background color on either side. Since we've just said the background color, I'm going to leave this as the box layout and then go back to our design section. We also have a TsUM layout options just below. So to begin with concert the default layout, which declares, if want a sign bar to appear on either the left or the right or not at all, I'm going to remove this sidebar from the home page and also make the blood post for narrow and also centered. Let's publish this. So if we now click on any of these blood posts we know taken to the full post view, this will still include the sidebar because this is controlled with a dedicated layout. As we see here, this default layout, which have chosen without the sidebar we'll apply to things such as the archives on the search. But we also have full control over this single post view. If you go back inside of this section just here, so inside here if we wanted to also remove the sidebar, we could also choose a different option. But I want to leave this sidebar for this view. We can also change the default layouts for all of the pages to And also, if you go to the block post displayed side and also Bach Teoh home page. We also have some more fine control over how this will look. We couldn't have the large image we can also change is to be a smaller medium size on alternative also displayed the full content to this will leave was with a really long home page. So I'm going to change this back to the large size and then publish. You can also override any of the colors which is set from our theme. But I'm happy with the green color which we currently have on. This theme also provides a dark option two. I want to publish this leaving this Ask the light beam. If we go back to the main customizer, we'll also cover some of these over options very soon too. Just above this, we also have the option for some additional CSS. CSS is the standard way to style and layout. A Web page I'm looking also apply our own custom CSS here. So if you know a little CSS, you can apply your inside of here and this will be saved into your team. So inside here, if you want to target a section which is using a developments. Okay, then it said the text color to be read, for example, and this will affect all of the deep sections in our theme. I'm not going to apply any custom CSS, since this is completely down to personal taste, what is worth no one? That this option is here if we need it. Lastly, down at the very bottom, we also have these free, different icons. Currently, we're customizing the large desktop size, but we can also see how our changes will look in a tablet or a mobile size screen, too. So there's still quite a few options we have not yet covered in the customizer, but we look at these in more detail in the off common videos on It's also worth noting that some of the other options which we see in the dashboard, for example, if we go back to our main dashboard and then to appearance and then had a Some of these options will take us back to the customizer. So they are effectively short goods the same if we go to appearance and backgrounds. This is also a link to the customizer too. So this is how we can easily customize our website. We don't need in any code and knowledge. We will leave this video there because we're going to be covering the rest of the options as we move through this section. 27. WordPress blog: Adding header images: another. One of the options we have in the customizer is the ability to add a header image. He had an image. Is this large book on no part image, which you can see at the top off the spacious theme? It's ideal for Brandon and also gives the user a feel for our sites. So let's go over to the customizer. Inside the dashboard may need to log in, look into the dashboard of all sides and this option is inside of the customizer. So appearance on customize I know we need to go down to the head of Media section. This is just in here. This and gives us the options are either a video or a image into a header. We just had the video in the same way we click on this another construct one from the media Library. I'm going to go for the had the image, click our new and then choose won't from the Media Library. I'm going to go for this one selecting crop. I want to escape the cropping for this born and it's automatically antes to the top head of section off our project. It was gold on. We can also see a button to randomize the headers we can go ahead on, and I'm going to remove these two previously used ones, then on a second image. So, like this, I'm also going to skip the crop in. And when I'll have to images of loaded we can click on randomize and then publish our changes. And then each time we reload to the home page, I'm gonna keep trying to reloads. And then we see a random had the image by default, This header images placed at the very top of our sides above the header links and also the logo. We can reverse this order if you want. Back over in the customizer, all we need to do is to go back to the main customized options and then it go down to a Hedda inside. He will have this option for had an image position. We can switches to be positioned below, probably fell changes, and it's a move the image down below our links entitle. So just to recap, this is how we can add a head image to our project. This is how we can change the position and also how to applaud multiple images which will be displayed randomly 28. WordPress blog: Adding a background image: early on in this project, we said to the background color which is on the left and right of all sites. We consider these because we said the content into the center and also set it to be boxed. We did this inside of the cooler section by setting the background color just here. Now this is a good way to quickly customize and change the look and feel of our size. But sometimes you want to go a little further by adding an image to the background, or could even upload a custom texture to make our side more personal. We can also do this inside of the customizer and for this option we need to go down to the background image and then we can access our media library Supplied with the course images is this great looking texture, which is BG dot p and G. It's like this. I will concede if we look closely. This has a slight texture to make our background a little bit different. This simply replaces all of the colored section which we added earlier, and these all of the contents in place. We can also change the presets on find control of how our image will display. For example, if want the image to be stretched on Phyllis Green, we'll go ahead and do this. But you can see from our current background image that the texture is quite a small image, even it, looking it quite stretched. We can also sad to the image position, so at the moment this is placed on the top left corner on. This will stretch out to the right and bottom. You could also sensitise on begin our image from any different side, although it doesn't make much difference in our case. Since this image is stretched anyway, I'm going to go for the repeat. Since it is a small texture, we're going to repeat this for the full size of the background again, we concerted the starting position, although it doesn't matter for case. It's also a check box down on the bottom concert, if one this image to scroll with the page so it's quite hard to see. But if we scroll down, we can see by the texture did. This will scroll with the page. However, if we'll inject this, you will notice that the texture stays in the exact same position on only the content in the center will actually stroll. I want to distract in publish a no backroom. Davidge is now set, leaving us with a nice looking texture behind all of our content. 29. WordPress blog: Plugins & social media integration: WordPress plug ins, Air really easy and effective way the an extra features and functionality to our websites. If we go over to WordPress Dog and then into the plug in section, which is also available with this link about the top, we can see that currently there is over 56,000 different types of plug ins available to include in our sights. There's plug ins available for pretty much everything from including anti spam filters. We also have the option to revert back to the classic editor if we don't want to use the Gutenberg editor, which is available in the newer versions. It is plugging start things, which are starts, contact forms and even wants to transform your site into a WordPress e commerce store. We're going to include a lot of these plebeians as we progress for the rest of the course, but for now we're going to include some social media sharing icons into our project. So we go over to the dashboard. We have a dedicated plebian section where we can see the plug ins which are included with our site. Currently, we just have this WordPress importer, which pulls in data from different WordPress sites. But we can go ahead and add a new plug in with this button and just appear we can see some the featured and also recommended ones or weaken do a search for all Rome. I want to do a search for social and at some social media icons into our site. It's worth noting when adding new plug ins for all sides. No, we should also look, answer the last updated section on. Also, check that this is compatible with our version of WordPress. This is the one I'm going to go for by ultimately social. Only to do is click on install, then activate this just like when we added a new theme. We can allow any security alerts if we would like or skip this. And then we have three different options, which we can use to customize our icons. This is included with a dedicated link. Now, in the sidebar on, the first thing we need to do is to select which icons we want to include. I'm going to keep this simple going to deactivate the email on exit. Lt's Under is going to go for Twitter are and YouTube you can of course, Modify this to suit your site. Say this 1st 1 than into option two, where we can set what we want each one of these social media icons to do So, for example, Twitter gives us the option to physical profile to followers. Also two tweets about a particular page. So I'm just going to go for follow me on Twitter at Twitter handle inside of here. And then we can also do the same for YouTube. Just below say this and then the third required one is the section on our side where the plug in will be displayed. So we have the option off these icons floating over our sides. So any of the pages we can set the position. So the top right, for example, it up left. But do be careful that these may cover up some existing content, so may need to play around with these. We can select one or more of these. So we also have the option to share these by a widget. And just like we looked at in the last project weaken drug this with your area into any of the positions which the themes offer House set. I'm going to leave this as a contract. We can also a place he's via a short code. Now, a short code is not something we've covered yet, but this is a way off. Given us a cold, which is in square brackets just like this. I'm looking. Copy this and paste it into our editor. So, for example, a blood post or a page where one is to appear working. Copy this on. If I could just say this, go over to our pages. And then if we go into the about wars, for example, let's add a new block. A paragraph is fine. Based in oh, short code on of data page. Now, if we click on preview, we're taking Steve, I was page on. The short code has placed in the icons exactly what we've added these in our editor. So I'm going to remove these. Since this was just an example to show you how to use these, we're going to leave the bloc and then of data page back into the dashboard and then into the social media section. We're gonna finish off setting up this plug in so back into option free weaken. Uncheck This I'm looking also include these, after all posts. So one of the things to watch out for when selecting this option is we can only use the icons, which you're being preset, if once using icons which are being selected above. This is a feature which is only available with the premium plug in. So I'm going to leave this unchecked and in places. Icons in the top, right? Save this. These are the free required options for this plug in tow work. We also have some optional ones just below two, which will allow us to fine tune our options. But I'm just going to save go over to all sides. Reload. I know. Shitty on any of all pages, we now have our icons positioned in the top, right. We can click on follow within. Taken swell profile. YouTube button probably won't work, since we've not added a U R l. Well, you can go ahead and are yours into their if you like. So this is just a first look at increase in Old website's functionality. By using WordPress plug ins, we will use many more plug ins as we progress through our projects in this course. But for now we're going to move on to setting up our home page 30. WordPress blog: Home page setup & widgets: at the moment if we visit the home page for other sides will see a list of all of the latest book posts as well. You know, this is the default when using WordPress, but in this video we're going to construct a new home page. We're going to do this by creating a new layout by taken advantage off the template, which is provided with this theme. This template will also allow us to create which areas so we can construct this home page exactly how we want it. We can also move all blogged to this plug link about the top two. So it has its own dedicated page. If we take a look at of the spacious theme, we can see an example just here off how our home page will look. This includes a widget area and also a widget, which is going to link to free dedicated pages, which is going to showcase the services which will provide I'm going to add free new pages for Web development more well, developments and also logo on Brandon Services. But you concretely speak any different topic if you prefer. So to get started, we need to create some new pages. We need to create free new pages for services, along with a new home page two. So let's get started over in the pages section. Well, first aren't our home page. All we need to do is to add a page title and then in the documents section, weaken select our template. So rather than the default template, we also provided with this business template to which will allow us to lay out our home page just like we're seeing on the example before. We're going to do this by taking advantage off the business widgets areas, which will take a look out in in just a moment or we need to do for this page is click on publish and then we can create our free extra pages. Michael Todd knew the 1st 1 I'm going to do is for Web development Services, So I'm gonna add a title. I want to say we're developments on also design and then just blow this. I'm going to add a simple text block. You started some content of his page. We raced on in responsive Web designs using WordPress. You can have more content if you prefer, but this will give us something to work with. A number can also sets our featured image for this page, which is a WordPress logo and settle featured image. Click on Publish Uncle Thumb. This featured image will show up on the home page along side of the page title. Go ahead and on two more. This one is going to be for branding and also logo design. We can set the featured image. I want to choose services. Dutch design quickly, handsome textures below. So let's take a off your brother Needs meant update unpublished this. Okay, so the third and final page I'm going to add Go back to our new is going to be for a mobile development section. This is going to use a featured image, which is the UN roid icon, said this. And then some text below. Let's go for we Crate Stone in customer mobile applications for all devices unpublished our third page. So now we have our home page and also these free extra sections, but you're going to you construct our home page that's no go back to the dashboard and then into the settings on reading inside here we can set the home page to be home. Un also move a block posts 12 love page, Say this Refresh your home page. And now this is an empty page for us to work with. Click on the block. Oh, posted now moved. So now we can construct our home page using the widgets under widgets area is provided by the theme So appearance and then widgets. So inside he will have the familiar sidebar on for two sections which we've seen in the first project Know that we also have these business sections which will go with the business template which was selected for home page. So to begin about the very top we have the business top section and this is the first widgets area just below our head of image. Inside here, I'm going to link to our free new pages. You can do this with the TG services. So that struggling scene we can select multiple pages. I want to go forward developments, our Brandon page and also the mobile developments. Say this. Let's see how this looks on the home page. Okay, good. We have holdings. Two or three pages. We can click on these. I was taken to a page, it's Goldbach. So the next thing I want to do is to add a call to action section, which is going to link to a contractor's page. If we go into the same business, Top widgets weaken drug over any new widget from the left inside. I'm going to go for the call to action widget in places just below the services. We cannot the main text, which is going to be needed to speak to somebody about your ideas we're gonna detects, which you want to add into the button. I'm going to say, Get in touch today and it's also needs to link to a Page two. So I'm going to go over to the contractors, open this link, basically saying on say this widget when I reload or home page, we know how they called Auction section. Click on the button on we taken into our contact section back over to our home page. We're going toe, and it's, um, new widgets. Just below this top section, click on the middle section. I will have the option off the left and right on the left. Inside. I'm going to add a testimonial when we can do this with the TG testimonial widget looking at a title and I want to go for a recent testimonial. The description just going to add some sample text into here. Let's go to alarm Ipsum. Ah, no need is one paragraph Generate This police is saying I'm looking aren't a name and also a title Say this and that This is our left section No complete. If we refresh the home page, we have the testimonial and also the space on the right. Inside this right inside is taken up by the middle right section. On inside he will concert a featured page to do this We have a widget called featured single page. Let's drag this one into a widget area on the right inside. This is going to allow us to showcase any particular page which would choose I want to go forward. Developments also had a title. So read more about our web development services. We then have the option to remove the featured image. But I'm going to leave this in place and on this after the title, so this Okay, so this is the middle section now completed and we also have a widget for the very bottom. So this is going to be the full width of our page on. I'm going to use this to create a section which is going to include free case studies. We need to included the widget cold featured widgets. Let's bring this in with the title off case studies on the description. He would take a deep dive into recent projects to show you what goes on behind the scenes below this week, and then it select Frida from pages. So if you wanted to, E can't great free separate pages turning to a real case study. But for this example, I'm just going to select three pages, which we already have Click on Save and then refresh your home page, and it's now gives us a link. 12 3 separate case studies. We can also click on these to be taken into the full detail, so this is now our home page complete. Just to finish things off, I'm going to remove these extra menu links from the top navigation, just like earlier we go into the menu section. Inside of appearance, we can select our custom menu, which was top navigation. I want to remove these free extra pages by clicking on the drop down and then remove all three of these and then finally rearranged the order slowly. Home pages first. Savo Manu. They should not take effect in the enough bar, so home page content is now complete by using widgets. I'm going to stick with the subjective widgets in the next video by creating a foot a section. 31. WordPress blog: Creating the footer: welcome back, but I'm going to focus on our foot area and also make use off. Are we just again to do this? We're going to go back to the appearance on the widget section and take advantage off the foot of sections which have been provided with this theme. We have four foot two sections, which you can see over on the right inside. And these are the four foot two sections from left to right, just like earlier work on drug in a piece of content. We don't even need to use all four, but for this example, I'm going to take advantage of all four different areas. They're starting off with the sidebar worn, which is the piece of content on the left hand side. I'm going to drag over some pages into this section. What you see is a list off our sides pages. Let's drugs into our section. We can also give this a page titled, but I'm going to do this empty and we can also solve these by various things such a seepage order on di Di. But I want to leave this as the default title. We can also exclude certain pages to buy the I DS. Well, I'm just going to leave this ass default. The sign bar to which is the second piece of content want to drag over a calendar? You can't completely make this your own and drug in different types of injured if you prefer. This calendar is a widget, which will display the dates when I proposed to be made. We can also add a title, but a calendar is pretty self explanatory, so we'll just leave it there. Next. We have sidebar free in the third section. I'm going to drug over the social media icons, which are being added with the plug in which we installed. So this is ultimate social media icons. Stop this in. You can edit the title, and also these settings are available from the Plug Ins page, which we looked up previously. The sidebar four. If we go into this, I'm going to add the recent comments which have been added from all vlog posts. So the witches is. Recent comments on the most recent will appear at the top again. We could give us a title and also restrict the number of comments which will display I'm going to leave these as default. Since I'm happy with these settings, these have been automatically saved followers. So all we need to do now is go over to our project, reload the page and then go down to the very bottom and we'll see our four content areas. This is a link to all of our pages. We have a calendar which we can go back and forward with the dates, and we can also see by the highlighted dates. Now, this is also a link to that particular post which was created on that date. We have the Social Media section, which includes our settings which have already created in the last video with our YouTube on Twitter links. We then also have any recent comments which were restricted to the last five. We don't have a lot of customized options for this theme, but one of the things we can do if you go back over to appearance and customize down at the bottom we have this foot a link on this foot unequal. I was to set how many columns we want to appear in the foot for all project. Next up, we're going to transform overhead images into a slider 32. WordPress blog: Adding a slider: early in the course, we added some various images to our header. We also randomized these, so a different image may appear each time. What? We reload the page in this video. I'm going to show you how we can use the same images, but incorporate them into a slider. We could do this over in the customizer, Back over in the dashboard. Inside of here, we have a option for a slider down near the bottom on. The first thing we need to do is to activate the slider. This is just a simple jack box wouldn't click on this, and then we need to go back to our options. We have a second option, it just below, which is to disabled the slider on the post page. I'm going to check this and then we have the options to set our images. So for all first image, we can add a image with the up loader over can use the media library. I'm going to set the same images that we use before. That's like this one. We can also set a title which will overlay our image, and we also have a read more button. If wanting to a full post or a different page. Let's start with the title You want to go for mobile development, a number conard, a description just below. Let's say, from design to up store, we can change the default but in text. But I'm going to leave this ass read more, so I'm going to link this to a page. If we go into our sides and then click on mobile developments, we don't have our link to this page. Let's copy. This link on paste is into a slider, and then we could do the same for our second image. I want to go for the same one that were hard in the head of image just before on the site. All this time is going to be four. Web design and development. A simple description. It's a WordPress. Developments from the experts and also a link so back to a page go for the Web development on design page and also bring this link over to publish your changes. I could see that I was slider is now appear in, but we also see the had a image to once edit. This would go back to the main links, or we can click on this icon in the corner to be taken straight. All had a media. I'm going to go down and click on Hide image. Even. It's just wait. Our rotating carousel makes you. Our changes are published over to our home page on reloads. We'll see that we don't see the slide at the moment because we are in the post page. I remember we disabled these inside of the options when the check box just here. If we go back to your site and then go to home, we'll see your slider is now working. We can also click on these two buttons just on the bottom to switch between these manually un. Also click on the breed more button to be taken it to the full page. Let's try the Web development thing to, and this also takes us to the correct page. So this is how quick and simply is to add a slider to all theme. And next we're going to move on to customizing our contractors page by adding a contact form 33. WordPress blog: Creating the contact form: when we added all pages early on in this project, we also added a empty contractors. What? He studied someone dummy lines here. And we mentioned that will return back to this page later on in the course, and that a contact form which will allow a user to contact the site administrator like with most things and WordPress, there is a vast array off different plug ins available to achieve this. One of the popular ones on the warm, which I'm going to use for this project is a plug in called contact form seven. To install this, we go over to the dashboard. Make sure you locked in has come out of the customizer and back into the plug in section. Click on add new and you can even do a search for contact form seven. But currently this is in the popular tab about the top, so I'm going to install and then click on activate, like with many plug ins. This will leave a option on the dashboard. So we now have this contact option which would click on to be taken to our contact forms on inside here. We can see all the contact forms which we have created for this site because we have this demo one just Leah. But rather news is I'm going to go to our new about the very top. We can start by giving this contact form a name. I want to go for contacts, page form, then blow. This would have our form section where we can add various form inputs. Now we don't need to understand the language which is rotating, but if you take a look in more detail, we can see that this is a name field, and it's also required. The user can also add their email, the subject of the email and then a message. Section it down at the bottom right. At the very end, we have this submit button, which will send the form to the site administrator so we can go ahead and add any different form imports, which we have available about the top. We have inputs for telephone numbers, standard numbers dates, drop down my news check boxes, radio bulletins on so much more. So I'm going to leave these default settings inside here and just add one more option as an example. So I'm going to go for a check box. So I'm going to add this check box. So the EU's gonna let us know how they heard about us. I'm going to add four different options were going to say search engine recommendation use previously and over. So the first thing to do is to check if this is going to be a required field, meaning that this form could not be sent without this information. The name McKinley. This just as is American, adds our various in put options. We see here that we are one option per line, so the 1st 1 is going to be search engine. The 2nd 1 It's going to be recommendation. The 3rd 1 is going to be used. Previously on the 4th 1 is going to be over. I'm going to leave all of the default settings. We can also add any optional idee or class to this element if want to. But I'm just going to click on insert type. Is he going to now insert our check box unless we mention before we don't need to know any of this code only need to do is to click on any of these buttons above. I'm looking at these in using this same editor. So for now, let's click on safe once this is saved. Were now gets a short code which received just here. This isn't a short code inside of these square brackets, just like we looked at previously. When adding the social media icons, we can copy this Paste this into any of our post or page is exactly where we want this to appear. So copy the short code. No one go over to our pages into all contact. Click on. Add it on instead of the state are just here. We couldn't move this pace. No short code. On the day. The page back over to the front end of our side. I won't go into the contact. Reload. The page on our contact form is now displaying. We see all of these same fields will have the name we have. The email will have a subject area. We have the four check boxes which we handed ourselves the message area on also the send button down to the bottom. If we go back into the WordPress dashboard on into the contact section back into our contact page form inside here We also have some different options at the very top wing click on the male tub and inside here we could set the email address for where or messages will be sent to. This could be the site administrator, all the particular person looking after your website. We can also set the arrest of the email information for when we send an email to, we can edit the subject. We can edit the from section on. Also create a message body inside the message body were conard it personalized messages. We also have some variables to inside of these square brackets. We see here that the from section is automatically populated with your name and also your email, and we also have the subject on the subject line just below wanted by the actual email message. This message can be certain if we go to the messages. Tom, I'm looking ahead. It's any of these different messages, which would like such as the send. His message was sent successfully. The message was failed and also various over messages for form validation to finally, we also have the additional settings. We won't recover in any of these additional settings in this course, but you can be taken it to the Contact Form seven home page by clicking on this link here. And this will include some different settings which you can import into all projects. So this is our contact form now complete. Do you feel free to customize is to suit your needs. UN. Also create different contact forms for different sections. 34. WordPress blog: Improving SEO: so by default, WordPress is pretty search and your friendly by nature. However, like anything, there is always room for improvement. In this video, we will be covering a great plug in called Yoast Seo, which takes the call WordPress Seo to a whole new level. If you insurer off, what s CEO? Is it short for search engine optimization? It is basically the process off optimizing our website to appear higher in the older off search engines so we can optimize things that just keywords, descriptions and also optimize of a content which is making all blood post more relevant to certain searches. This book is also going to help with things so chance adding keywords and also making sure these keywords also repeated in our images all tax. It can also help with metadata, which is information about our site to make it more visible to search engines. It could also generate a site map two, which could be submitted to Google along with so many more things. Let's head over Julie Dashboard and install this plug in has ever will go to the plug in section on at New and just like the contact form, this will probably be in the popular section if we click on this. This is the plugging we need here, which is Yoast Seo. Click on Install. This is also combustible with our version of WordPress to and it's also being recently updated. Activate these. Plug in. We now have this s e o option inside the dashboard. If we click on this, we can see you will have any problems or notifications. And this plug in will also have some options in our posts on also all pages to Let's start . By going over to any random page, I'm going to go for Web design and development. Click on it It and it's looking now leaves the Yoast Seo section inside of all page. So the first thing is our focus key phrase. Now, this is going to be the main keywords. Want to focus on for this whole page? I once said this to you Web design Below this, we also see exactly how old Page will look on a Google preview. We have the move, our results on also the desktop results. You below this. We have the CEO analysis and this is going to tell us what we're doing good on all page on also what we need to improve. So first of all that down at the bottom we have a key phrase land, which is good. We also have these keywords inside of us look to, which is also good for S e o Above this would have it some various improvements such as we can also add these keywords into the image. Old text. Let's start with this one. By clicking on the featured image inside the old tax, we can add a key phrase or by design today this click on updates of its off. Now we reload the page on Go back Down to our CEO analysis. This image improvements has now been removed. The next thing is he key phrase in the title doesn't contain a exact much. So we have our march as Web design and it's also warning us that we have this innate, slightly different order. Let's change it around problem Web development and design. We can swap this around to be Web design on development. Looked like this reloads but down to our analysis and now this improvement has been removed of this, we also have some major issues we conceived by the red indication on the left. The 1st 1 is the text land. We only contain eight words inside of our description. This is fine, since this is just a example. But of course, this is something which would need to be addressed when using a live project. It also recommends I've been some internal on external links to along with recommending our key phrases included in the first paragraph of all pages content. So for life pages, this is something we could easily go through and fix to make our webpage a lot more search engine friendly. We can also are they related key phrase to, but this is only available with the paid version of this plug in. We can also set a page or a block post as cornerstone content to. And this is to basically mark this piece of content on our site as the most important article or page. So this is personal preference under also dependent on the type of site which you make in well, this we also have a advanced section where we can update our s your rules. So chance, if you want the page included in search results. We can also add it some advanced matter robots, settings inside of this field. Here, too. We're not going to cover this in this course, but do feel free to check out the your documentation. If you want to find out more about these settings at the very bottom, we have a canonical you are well, so economical. U R l is a way to deal with any content which appears in multiple places on our site. So, for example, on a e commerce store which sold T shirts, we may have the same T shirt to pee in two locations. So, for example, in may appear fold slash shirts and then forward slash awesome T shirt. It may also have this same T shirt appear in a different Category two. So, such as the sale section, therefore meaning ot show will pee in two separate locations. We need to decide which one of these T shirt links is the original link. So, for example, we may decide that the shirts link is the original. Therefore, we would leave this section as empty. We then go over to the sale link and then paste in the URL two point Teoh assured section, meaning that the search engines will know exactly which is the original piece of content and therefore display this page to the user. I'm going to leave his empty. And if we also go back to the dashboard and into a blogger posts, we can also improve the S e o in any evolved long post, too. Let's head over to any of our random block posts into the eddy section, scroll down below or content. You can also find, you know, blood post to to soothe the search engines. So this is how we can use the Yoast Seo plug in to really improve our sides. Search engine optimization. As you can see, search engine optimization is a really deep subject on there is a lot of advanced settings to there is a cross of S E o plug ins available to which do a great job. But this is one which I really like and find very useful. So go ahead and update your pages and post if you would like to make them more s your friendly and next we want to take a look at another important subject and this is how to back up our site. 35. WordPress blog: Backing up your site: when in dealing with technology, even with all of the care in the world, things come on, Do you go wrong? If the worst was to happen, we could potentially lose all of all website data. But we want to make sure that all of our hard work is not lost. It makes sense to cover this possibility by creating backups of our sides on with lots of great WordPress plug ins available to do this easily, there really is no excuse not to duty someone to use a plug in called back to BP up. If you go to the plug in section on our new, we do a search. So back to BP up. This is the one I'm going to use hereby inside, Click on install and, as usual, click on Activates And then we'll also gets a option inside of the cyber. Let's begin by clicking on the dashboard inside veep marketability obstruction mostly a list of steps which we need to take. The 1st 1 is to check the installation. This will cover together all of the information about our current WordPress installation. This all appears to be fine, so there is no problems there is also very stumps at the top to change your settings. Most could be left as default. But we can change things such as the maximum number of log files, which is in the logs tub on, also where we want to compress these files to. We can also see that these logs are stored in a uploads folder, which is stored inside of the WP content. So I'm going to leave all of these settings as defaults and go back to the dashboard. The next thing, which is Step two and this is to create a new job. We're going to use this job to create a backup if we go to the jobs. Tom just here to say we don't currently have any set up. Let's go back to our new. The first thing we need to do is to give this job a name. I'm going to call this the Weekly Buck up. I'll always be concert exactly what we want this back up to do this by default is going to perform a database backup, a file backup on also enlist off install plug ins. We can also perform a database tables check, and we can also export all of our WordPress data as a XML file if we want to. But I'm just going to keep the default settings if you want to. We can also set the four months of all file name Kourtney. We can see that this is the year, the month, the day, the hour, the minutes on the second. And this is how we create the file name for this back up. I want to leave this as default. Also say this as a zip with inserts Where want this back up to be stored? I'm going to click on the folder, which was the uploads folder in the DWP concerns, which we looked up before. You can also synchronizes with Dropbox different Web services on also send by email, click on Save, and the next thing to do is to schedule when we want this job toe happen. We named this job a weekly backups. Or rather than doing this job manually, we're going to use a WordPress Kron. We can see when we click on this would then have a scheduler down at the very bottom. I'm going to show you a list happen weekly on. You can also set exactly which day our a minute of the week we want this to happen. I'm going to keep this US default on to save the changes. Next we have the DP back up top. You can choose exactly which database tables want to back up. I'm going to leave this as all selected and I move on to the files, the files, times where we can select or exclude any particular files which we don't want to back up. So, for example, if we have various themes which we aren't using, such as 2020 we can select this and this will be excluded from all back up. Also, if we don't want to back up any older posts, so just wants from a earlier, we can also exclude these two. After this, we have the plug in stuff and all we can do here is changed the file name off applicants list on also certainly far compression if you like. So if you made any changes inside these options, go ahead and click, save and then go back over to the dashboard economic click on Step Free, which will take us to the jobs link, which is just here. This will give us a list of all those jobs which we have set. We only have this weekly back up where we couldn't run. Now want to click on this and this will do our initial back up after this initial back up. It will ruin it once a week on the day on the time which was set. Okay, So once this has been done on a C 100% I'm going to go back the local click on our final location for our sides. And then this will open the soft inside of the finder. Well, they need to go into our web development. Blawg going up public WP content. Remember, from before we're seeing that this same inside of the upload folder, let's click on this no, see all backups and also logs which would just generated. And these will be saved on a weekly basis. We can also see this back up to if we go back to the options inside of the dashboard, click on the backup section. You can also see this back up just here. So as you can imagine, running WordPress backups is a really important step When running a WordPress site, especially if you have lots of important information on content on there. So this is the end off the section on also the blood project coming up. We're going to get to work on a fresh project, and this is going to be a wordpress e commerce store. 36. Project Setup: right. Let's get started with our next project. Now I'm going to use local once again to says about WordPress e Commerce Store. And you can also use Mom for the life hosting if you prefer, so we should know how to do this. Now. Using local, I'm going to create a new site, even with this button and just here all the plus icon. So the site name I want to go for a shirt store, continue on through the options. We can keep the prefer set up continue and then a admin user name and password. I want to use it shirt store admin in a password and then, oh, email to So we can also use the same email with used for the previous sites. That's completely fine at all sides on. Let this do the set of work for us out of sight on defusing the market may also need to use a password. So at this in just to authorize our new projects, we then have the usual admin on view side buttons. Let's log in the mama shirt store in this God mean there's a live dashboard back the local and we can also view our site. So here we are with our new project set up on the Hello World example and next we're going to move on to add in a theme and also the require plug ins to set up the WordPress e commerce functionality. 37. Getting Started With WooCommerce: you know, have a blank WordPress project now set up on in this video. We're going to go ahead and add it some equal mercy functionality. We're going to do this by using a product called Wu Calmus now in this video, going to take a look at doing this in two stages. So first of all, we're going to include a theme which is called the Storefront theme. This is also by the same offer as he woke, almost plugging so everything will fit together nicely. So we're going to see plug in for the e commerce functionality. I'm going to use the theme to give us a look and feel often e commerce store. So we'll commerce is the offer for both of these. We can see some of the features off. This plug in on this home page allows us to set up secure payments, different shipping options. We can also set up physical products, virtual products, which we can download. We can also set up subscriptions on also integrate. Lots of different extensions to some of the extra functionality is paid, but don't worry about that, because all of the functionality which we need to get going is included in the free plug in Back Up the Navigation. We can also go to the theme store. I'm going to use this storefront themes. Click on this, and this will be the theme which we're going to use for our e commerce store. This will, by default givers, e commerce, look and feel and also the required pages, such as a shopping cart, a check out page on the actual product listings to both this plug in and also the theme is well established. They've both been around for a long time and also power tens of thousands of live e commerce stars on the Web. Right now, the theme is fully customizable and also responsive. So look good on all screen sizes. You can also see just here that we have various options in a customized to so we can play around with the look in the field and also the color scheme to. So let's get started by going back over to the dashboards. The first thing I'm going to do is to go over to appearance and number can aren't I worked new theme. A new when he eats storefront, Install said, is to be our active theme. Once this is done, we can now reload the home page. Someone else see a difference, look and feel. At the moment, we don't see much in terms off e commerce functionality. All see is the standard home page on also the sample paid, which had included with the default WordPress installation art the e commerce functionality . Let's go back and add this as a plug in. Oh, it's a plug ins and we can add the will commerce functionality, a new such for we commerce. This is the woman eat here on the crater is by automatic install. Now we can also see that this is being regularly updated on also compatible with our version of WordPress. Activate this just as a quick side note the offer of this plug in automatic. It's also founded by the creator off WordPress itself. So we're in pretty good hands. The next thing to do is to go through a installation if you want to, which is going to. It was a quick set up. We can skip this and do it manually, but I'm going to run through the basic set of options. The first thing to do is the art and address for where our store is located. Now. The actual address doesn't muster for all purposes at the moment, but it can be a benefit to art in the country. This is because we commerce will use our country to set of various options, such as the currency. So let's add some dummy data and then continue on. Since I'm creating a T shirt store, the category for mine will be fashion continue and any type of product which we're going to be selling. I was going to be physical products. Since we do on the clothes. We can also sell virtual products, which the user can download subscriptions, memberships, custom products on also bookings to. So how many products do we plan to display? So let's go for I don't have any product yet. Curry, sullen elsewhere, will say no. I'm also going to uncheck all these options to since we want to on these manually. If we need them, I'm going to stick with the basic star from theme. There is also some paid on free themes to which we can change too, but this is five our needs. So it's like this No thanks. Come back to the dashboard. We now have a dedicated work, almost section with lots of options which will go through in this section. We're just looking now activated. Let's reload or home page and see the changes take effect. This will have the home page. We also have a shopping cart where are selecting product will appear. We also have a check out. An account area on the user has lots of options, such as checking any previous orders. They also have access to any virtual products which need to be downloaded on. Also, they can change their account details. A sample page on also the show. This is where all of the products will be displayed when we aren't them inside the dashboard. But for now, we're going to get a quick start with our store by including some sample data. Assemble data for woo commerce is included with the plug in. So let's go over to the dashboard on Set this up. Now we can import this with the WordPress importer inside of tools and then import if we're using the WordPress imported for the first time, licking, stole, and then click ruin importer. This is going to allow us to on a file with data, so let's open itself on. If you're unsure of the exact location we are, project is stored. If you're using local head over to the welcome screen on to click on this icon just here, this will open up the project at the location inside of your file directory. If use a mom, people need to go into the Imam folder and then into a page to Doc's and then find D project from there. So minds in the Shirt Star Project and up into public WP content The plug in is in the plug INS folder under will Commerce sample data. How many of the sample products don't XML open this up on upload the file role of this incoming data? We also need to assign a offer so we couldn't have a shop manager. We can create a new user organ, a sign post to our existing user, which is the admin, which we set up earlier. I don't know the attachments on submit. We can now see this data. If we go back to the home page on reloads, click on the shop. I don't have a couple of pages or products which can work with. We will, of course, our own products very soon. But this will give us some data. Start working on our store. It would click on any of these What? I'm taking fruit to the product detail. We will have a image I'm consuming. We have all of the data on the product, the ability to art It is to the cart which will see with this link just here. We have a description additional information on reviews on when we set up our products. We can also link thes two related products to So let's see how this works. But I didn't it to cart. We didn't get the updates and also a short cooling to the car page where we can see a review of all of our products and also change the quantity to notice. We also have the ability to art coupons and then at the bottom we can proceed to check out . This is the final stage where we aren't all billing details on also delivery address on also the final review of the order. As you can see, he record, we don't have any payment methods set up for project. But we'll fix this during this section. So this is our e commerce store now set up with the basic functionality on. Also taken advantage off the week. Almost plug in Dundee storefront theme. Next, we're going to take a look at the importance off a child team on how we can set one up in our project. 38. WordPress eCommerce: Why use child themes: but this project, we're going to be creating that some modifications in a slightly different way than the 1st 2 projects. We want to be making what is called a child team going. At the moment, all the themes which have created in our project can be considered a parent theme. This is because that these are the main theme which we use in. We can also make use off these parent themes as a base or a starting point. We condemn branch off by creating a child theme which will then inherit all of these styles and functionality off the parent theme. So why exactly would we want to do this so we often do this one. We want to make some customization ins to a theme. So when working with a pair and theme, it's completely fine to make use of the tools such as the customizer to make changes to our layout. Using the templates, we can also use different colors and these all completely fine to use. However, though, if you want to dig a bit deeper into all theme, so just creating a new file or making any more extensive changes, would you want to create a child team. One of the reasons why is because when the parent team gets updated with the need to download the new updated version, this new updated version will override the existing parent theme and also any additional files or modifications which you've made. If you create a child team weaken, then safely update or parent theme on the child team will still inherit all of the updates , but it will also apply o changes to it is also some other benefits, just like we can see here. We keep our customization separate on. Also in one place we see the update and benefits which we just mentions also, rather than creating our own theme from scratch, which will look at later on, we can inherit all of the tried and tested work which is being put into a proven fame and then make our own customization zahn modifications to suit our needs. So this is the why behind a child team and in the next video we'll take a look at how we can set one up 39. WordPress eCommerce: Child theme setup: This is a theory behind a WordPress child team. And now we're going to take a look at actually how we can set this up into our project. This is going to be lowers to make any changes or customize ations to our storefront theme without all right in any of the original settings. The way we do this is to go into our project folder. So if you use a mom, make sure to go to the hasty docks and then into your current project, I'm using locals. So all we need to do is click on this icon just here. Let's go into our project into our shirts. Tall theme. I need to go toe up public and any 12 content where our themes are located. So we couldn't have the default themes on also the storefronts. And now we're going to create a new folder for our child theme. I'm going to call this the storefront dash Child. No need to do to kick things off Easter are that some required files so we don't need to go too deep into any PHP knowledge into any code. In all we need to do is to open up our folder and added some basic files. So don't worry if this is something completely new, there's just some basic steps to take. So to our new files, I'm going to open up a text editor and the one I'm going to be using is called visual studio code. Visual studio code is basically a way for us to open files and folders and edit the cold inside. So if you've not got a text editor, which you currently use, do you head over to the link on the screen? And you can download this for use in this project? Let's strike over. I was stole from Child and we can begin where I was set up. So now we inside of our Project folder, I'm going to add a new file. The first file, which we need on this is also required, is going to be called the style dot CSS. The style dot CSS is where we aren't any different styling or layoffs. Options, which you want to use toe over rise our parent theme. It's also going to be the home for some WordPress settings on. We'll add these in just a moment. The next required file is going to be called functions. Don't PHP the dot PHP extension just declares that we use in the PHP programming language. The next step is to head over to the browser and go to the WordPress developer site. Inside of themes, advanced topics on child teams. We'll have this section which tells us how to create a child team. If we scroll down, you can see that we have created our feeding folder, which is Step one. We've created a style sheet, which is Step two, but we also need to add some information about this fiend too. We can do this by copying over this sample comment. If you grab this and then go back to our own style dot CSS paces in our to the very top. This is going to be used to provide some information about our theme. The 1st 1 is pretty obvious. This is going to be the name of our team we call. That was the stall from child. So makes you word. To change this, we can also add a theme. You are I. If we have a dedicated website, set up the description Still friend child theme aren't your name as the offer. You can also add to your own personal website, and also we need to change the template to reflect the parent theme. The parent theme is called Star Friends. So make this change. We can add a version number if we would like under also a license to next. We have the tugs, which is going to describe our theme. So tags it away off talking our theme with certain features. We have some defaults, such as the color scheme, the number of columns the sidebar position in and all of these options are fully customizable. Let's go back over to the browser. You don't need to navigate to this link if you don't want to. This is just generally a page, which will give us a better idea of all of the available theme tanks we can see at the top . We have some subject tags. Where does the maximum all free? If we have a block theme a e commerce team education, for example, these can also be listed as our tanks. We have various layout tags where we can describe exactly what type of layouts are available in our theme. We have the features to. If this is accessible. It has custom headers, custom colors, menus on featured images, and this could also be gradually added into the theme, as we aren't more features. If you quickly go over to WordPress the organ into the theme section. These are also the same available tags, which would have if you click on any of these themes just in this section here. These are the tags which, applying to this current theme. So, for example, we can see this theme. Is accessibility ready? It has custom menus it has for two widgets on also translation ready. So, as you can see, these times become even more important if you were to upload a theme to WordPress dog or any of a marketplace back to our style sheets. We can also edit these tags, but I'm just going to move down to the text domain. The text domain is a unique identify it for our theme, and it's also used if you want to translate our theme at a later date. The text domain should also much the name off all Project folder, which is storefront Dust Child. The next step for our child team is to also add a image. This is going to be the image which we see inside the dashboard when we select the current theme. I've also included a images folder for this project. This includes a site icon, a screenshot on also two different images for our slider. But now the image which we are interested in is a screen short daughter, PNG. This is going to be the image which we're going to see inside the dashboard when we select this as our active team. The name is also important to this must be named the screenshot dot p and G, but is to take effect. All we need to do is to drag this screenshot into our child beam so we can do this inside off visual studio code. Let's drug this directly in all. We can also drug this over into the Project folder. With this in place, this is now the Berman moment, which we need to activate our theme. So let's go over to the dashboard into appearance on themes. WordPress is now detected. I was stole from child, and we can also see the screen short. Don't PNG. Let's activate this theme and then visits all sides reload the browser. I'm a contract. This is working by making a small change into old style dot CSS. Let's art. It's, um, custom styling and grab the Body section, which is the main rapper for all content. If you don't know any CSS, don't worry about this section, which is going to apply a simple background color. We can do this by setting background to be any color, so just read. Save this file on. If we reload and the red background color has now taken effect, let's just check. This is only on the child team. If we know activate the original storefront. Is this our sides? And this is now being removed. I'm going to now reinstate the child team. Now we know that all of the customization ins are only applying it to the child team. But reload bucko to visual studio cold on. You could remove the styling, say this file, and now we're good to go with our child team just as a born quick side note. When creating a child theme. If you go back to the WordPress developer sides and scroll down, we can see that for some themes we need to you in Q A style sheet. This is basically a way forward. Press the load off the parent styles and also the child styles, too. If we scroll down, there is some cold samples which we conard into the functions dot PHP. However, this step is not required when working with the storefront team. If we go over to the WordPress, documentation on Into the Child team sets up section when we scroll down to see we'll have our styles, not CSS, which we've already created. We have over styles Nazi SS Comment, which is based on the store for and templates, and we also have a note just here. We'll see that when using the storefront theme, we don't need to in Q. Any of the parents styles? This is actually something which the storefront theme does follows, so that's one less step to take. The only thing we need is the functions dot PHP on our custom style sheet. This is everything we now need for work. Custom child theme. Let's now move on and take a deeper look into products 40. WordPress eCommerce: Product categories, tags & attributes: You'll notice that WooCommerce has added some options to the dashboard, on the left-hand side. So it's the WooCommerce options and also the products options. We'll get into more details of the settings as we move through the project. But for this video we'll be focusing on only the products. So go to products and then the Products option in the Subnav and we've got a list of all the available products that were pulled in with the sample data. We'll look at adding our own products in the next video. But before we create our own products, I'm going to decide on some categories, tags on product attributes, which we're going to need. This way when we create our own products, all the necessary options are all there ready for us to select. So first let's head over to the categories option in the menu. You can see there's already some categories in place from the sample data which we imported. There is pairing categories such as clothing and then if you scroll down, there's posters and also music. These three categories also have child categories, grouped within them and you can tell that they are child categories by the dash, which is placed before the name. So I want to stop by and delete in all the sample categories by selecting the checkbox at the top, and then Delete and Apply, and then we can create our own categories. So to start with I'm going to create a T-shirt category as the main parent category. This may seem a little unnecessary as its only a T-shirt store, I'm not selling anything else. However, it may be a good idea for if we decide to sell other items in the future, other than T-Shirts. So the first product category, I'm going to give a name of T-shirts. The slug, it's a URL friendly version of the name and it's usually all lowercase and contains letters, numbers, and hyphens. So I'm going to call mine T-shirts again, it has no parent because it is the parent category. You can add a description, but it's not required. The display type, I'm going to keep it as standard. I'm also going to upload a image as a thumbnail so I'm going to select the images which have been provided with this course. So the shirts store images and in fact, I'll just select them all and drag them all in there. So I select the T-shirt image and then use image and that's pretty much all we need to do for now unless we decide to add a different category in the future. So add that product category, and you can see appearing in the list. Now we can move on to adding some tags to our products. So select the tags option from the menu and we can simply add the tags on left-hand side. So the first one, going to create a summer tag. A lowercase version and add new tag, and then will do the same for branded, and then unisex, and then lastly male and female. So just add those in and they've got a list again of tags on the right-hand side. So now we need set up some attributes to go with our products. So we've currently got the color attribute, which is pretty essential for a t-shirt store. So we need to add one or two more attributes that we may need. So let's have a think of what attributes other than color that we can use for a T-shirt. So we'll need something such as a size attribute. So let's add this in, so on the left-hand side on the Add New Attribute, let's add the name of size, the Slug of size, Enable Archives I'm going to leave unchecked. The type, so under the Type, we've got the option of Select or Text. So when we're creating a product and we want to add attributes we can have a select from a select box of pre-set attributes such as small, medium and large. It will have this set to text. We need to manually type in the entry, each time you'll want to add the attribute. So I'm going to leave select, we're going to pick which ones we need when creating products and we'll leave the default sort order to custom ordering and then add these attributes. So now we can see on the right-hand side we've got the color and also the size. Both for the color we've got the free terms of, black, blue, and green. But our size currently has no properties so to add these in click on the Gear icon on the right-hand side. So I'm going to add a first one, of small, the slug of small and then save that and then do the same for medium, and then for large and then lastly extra-large add that in. Okay, so there's our attributes added. So now I'm going to go back to the attributes and also add a sleeve-type and a style attribute. So the first one is the sleeve-type, and here we can select if it's going to be a long or a short sleeved. So add the attributes and then let's add the terms. So the first one of long sleeve and then a short sleeved version and also add that one, back to the attributes and then finally the style. Again, a select box and add that in. So going to add a couple of styles into this. So the first one is a plain T-shirt, and then an option for a printed T-shirt and then lastly, a striped T-shirt. So add the stripes into there, a new style and that's it. In the next video, we're going to come back to adding products, we'll have all these available options to select from and if you want to add some more, feel free to do that. If not, let's move on to the next video and we'll add some new products to our shirt store. 41. WordPress eCommerce: Adding products: Welcome back. In the last video, we set up all the attributes, categories, and tags, which you're going to need to set up our own products. I'm in the products section of the dashboard and we've got a list of all the products which we've pulled in by using the sample data. You can see things such as the products image, the name of the product, and the stock keeping unit which you want to add or a product code. We can see if the product's in stock, we can see a price or the current price, and a sale price. You can see a list of the categories and tags which you may want to add to the product. Also if the product is a physical or a downloadable item and lastly, the date which the item was published. We're going to create our first product. So go to, "Add products." Then I'm going to create a new t-shirt, so I'm going to create a "Ninja T-Shirt" with a favor description of a short sleeved design, in gray and then the size of small inside. When I bring out a ninja in you, with this awesome ninja t-shirts in gray. The short sleeve t-shirt is ideal for summer, and is manufactured in a cool lightweight material. This is the description which will show up on the product page. Then we can add some more information about the product. In SKU, stock keeping units or a product code. I'm going to call it the ninja gray small, add a price into there. You can also set a sale price and schedule the price to start at a later date. You're going to set if the product or just the shipping is taxable. Also add a tax class. I'm just going to leave that at standard and then inventory. This is where we can keep track of the stock product levels or the stock management levels. We'll can't enable stock management. We can select if it's in or out of stock. We can change the shipping signs by adding different weights on different dimensions and also add different shipping classes onto there. We can add link products, we are going to up-sell and cross-sell, and also group products together to improve our sales. The attributes we added in the last video. We've got the color, size, sleeve type, and the style. So let's change the size. We can add that to it because we had created a small, so you click "Add First" and for the size we created a small t-shirt, save that. It's also short sleeved, so add the sleeve type and then the value is short sleeve. In the advanced section, we can do things such as enable the reviews and also add a note, which is sent to the buyer after the purchase. Then below this is a short product description just to show in version of what we've included over the top. I'm just going to copy the first sentence and paste that in there. Then we've got options on the right-hand side, which is similar to when we create pages or blog posts. On the category of t-shirts, we can add tags, set the products image. In fact, I'll use one of the Woocommerce images. I'll select the "Gray Ninja T-shirt." Select that and then add some tags. So ninja, summer and unisex. Then I think that's it. We should be able to publish this product now. Then let's go over to the shop. Let's find the one that we just added. There we go, so that's a Ninja T-shirt in short sleeve on gray. If I click on that, we should get the full description, with all information about the tags, the category, and then the extended description at the bottom. I'm just going to add one more products by going back over to the dashboard and then to products. In fact, first we'll just lay any item which isn't a T-shirt so we can remove the albums. This is going to be deleted too. Then I'm going to delete T-shirts. So I move those to the bin and apply. Now we're just left with T-Shirts. I'm going to create one more products by duplicating the one that we just created. I'm going to create a medium version. So duplicate that. Can move the copy, change the size to medium. The description can remain the same. But we do need to change the SKU to be unique. So let's change its medium and also the attributes. We need to change the size from small to be medium. So change that and save. Once that's finished here on Publish. Then let's check out the store and just check the all the items over the t-shirts have been removed. So go to the shop. We're left with only t-shirts and we've got our two t-shirts, we varied our self, the medium version and the small version. That's how we can add products by using Woocommerce. Next we'll move on to lay out the homepage and adding a slider. 42. WordPress eCommerce: Home page layout & slider: In the first project of this course we looked at how by default, WordPress have our blog setup on the front page. This is also true for the Stefano theme which you've installed. In this video, I'm going to be changing the front page of our website, to be more e-commerce like. Which means you'll be able to see things such as top rated products, items which are on sale and also featured products. To do this, we're going to go over to the dashboard and then into pages. Then other new page called home. All we need to do for this page is go down to the template and change this to be the homepage template. Then we can publish this. Then like we looked at previously, if we go over to settings and then reading, we can change the setup of the front page. Rather than the latest posts, we can change the front page to the homepage that we just created. Now we'll clean the blog posts on Stefano and then save the changes and then visit a site. So now if you scroll down the homepage, we've got various categories showing. We've got the new in section, we've got the recommended section, a sale section, bestsellers and it starting to look a little bit more like an e-commerce store. But because we've only got one category, I want to remove this from the homepage because it looks a little bit odd at the minute or. To do this, we're going to use a plugin called Homepage Control, this is also by wooThemes. So go over to the dashboard and then plugins add new and then do a search for homepage control, and then such for that. The plug-in we need is Homepage Control by wooThemes, and this allows us to reorder or disable the homepage components. So install this,and then activate once it's done. This plugin adds a option to the customizer. Then now there's a new option called Homepage Control, so click on that. I'm going to start by removing the homepage content, which is the body section and the title of the page, so we don't want that up on there. So we just uncheck that section. As I mentioned before, we want to remove the product category because we've only got the T-Shirts category, so it makes sense to also remove this. The new in section, I'm going to leave that. The we recommend section, because we don't have any feature products, we are going to remove this title from there. I'm going to leave the favorites and also the sale section, along with the best-sellers, so save and publish, and let's head over to the homepage and see how it is looking. Good. So we're now looking more like an e-commerce store but I'd like to make the homepage even better by adding a slider. So wooCommerce does not come bundled with a slider by default, like the theme for our first project. This allows us to install a plugin, if one is required. This allows us to choose a suitable one for our needs. So I'm going to go ahead and download a plug-in. So go to the Plugin section and then, Add New, and then in the search box, so feel free to choose any slider which you prefer. But I want to search for a Huge-IT slider. This is what we need by Huge-IT. So install now, and then activate, and then once that's done, we can go down to the sliders menu link and then go to slider. So we've got a default slider of my first slider, which is part of the plugin. So I'm going to go to Add New Slider. Then to edit a name, just click on the top and to the new slider. I'm going to call this Shirt Store. Then we can add some slides. So we can either add video slides, a slide of posts, or also a slide of images. So I'm going to add a couple of images. So I'm going to use the ones which have been supplied with the course. So slide one, insert into post, and then add a title. So the title of therefore is Two For One, and also description, two for one on plain T-Shirts. You can add a URL to the Offers page, so we create a new page and link to that. The branch will leave that empty, and then add a second image. So this time, slide number two, in-sentence post. So free printing on your first order, and then just saved that. So on the right-hand side we've got some current slide options. So I'm going to change the width of the sliders to be a little bit bigger. So 1200 pixels, a height of 500 pixels. I want the effect to be fade, and you can change this to be various different settings, and this is a way it transitions from one image to the next. So I want this to be a fade, and you can also play about with the speeds. So I'm going to save that. So if we go over to the homepage, you'll notice that the slider still hasn't been added to the homepage. This is because we need to include a into our theme. So if we go back over to the dashboard and then into the slider settings under sliders, and then go into the custom slider, you'll see there's a section for usage at the bottom. There is a few ways we can add the slider. We can either copy and paste a short code into a WordPress post or a WordPress page. There's also a section of code to paste into a template file. Another way to do this, we can use a widget. So if we go onto appearance and then widgets, you'll see there is no a Huge-IT slider widgets. So I'm going to use this and I'm going to drag it into the blow header section. It's a place will just blow the header above the name content. The slider I want to show, is the Shirtstore slider, and then save, and that should hopefully make this slider appear on the homepage. Then head back over to the site, and let's see if the slide is working. So there we go, there is a slider just below the header section and above the main content. In fact, I'm just going to edit these images to remove the titles. So I'm going to go over to the slider, and select the Shirtstore on, and that should delete the text, and then save that, and hopefully that should look a little bit better now. Then we've also got the two dots are the top to show those two images. We've got the left and right arrows where you can switch between the images in the slideshow. So that's all working fine. There's also some further options to customize.If you go into the slider options, and then general options. There's many things you can change in the general options such as styles and sizes and colors. But these options are for the paid version of the plugin. So you need to upgrade if you want to change some of the settings. So now our homepage is looking more like a e-commerce store. We've got a revolving slide show, we've got all the newest products on the homepage. We've got a Favorites, a Sale, and a Bestseller section. So next we'll move on to customize and the look and feel of our store by changing the colors on the branding. 43. WordPress eCommerce: Customising the look of our store: Now we've got the homepage laid out more like we want it. I'm now going to move on by adding some more customizations to the stall. I'm going to change some of the branding and some of the colors to make it look a little bit more custom. So I'm going to do this in the Customizer. I'm going to start with the Site Identity. We've got the site title of Shirt Store which is fine. We've already set this up. The tagline make changes to Custom and Branded T-shirts, and then we're going to change the icon. We select "Image." I'm going to use icon dot png. We Select that, and then we could just Save and Publish our section. Then now I'm going to move back and go into the Header section where I'm going to change various colors of the website. I'm going to go for the Background color, and I'm going to change this to be a4c1c4. The Text color, I'm going to change it to 43454b. Then the Links color, I'm going to changes to grape so f2f2f2, and then save that. That gives us a nice color header, and then we'll make the footer consistent too. Let's select the Footer option, and we'll change the Background color, and this is going to be the same as the header so a4c1c4. If I go down to the bottom you can see that should have changed. The Heading color we can just leave that as Default. Text color. Again we'll make this the same as the header so it's consistent, and that was 43454b. The same color links as a header f2f2f2. We'll Save that. Now this footer section matches up nicely with the colors from the header. So go back, and then I'm going to change the colors of the buttons. We going to do this in a Buttons tab, and then the Background color. We change this to be the same green. So this was a4c1c4. Also the Text color of f2f2f2. Then Save and Publish. Everything else I want to leave as Default. That's given our website a little bit more of a custom appearance, and all matches in nicely. The header, and the footer, and all the buttons are consistent. We'll move on now to the next video, and I'm going to create some more custom pages for a website but we'll do them a little bit different this time. We'll be using a great tool called Page Builder. 44. WordPress eCommerce: Flexible layouts using Page Builder: In this video, we are going to be creating extra pages for our website. We'll be doing a little bit differently to the last project, because we're going to be using a tool called Page Builder. Page builder allows us to build pages quickly, and easily, by allowing us to drag and drop widgets into place on the page. No coding is required to build the layouts, and it works with any theme. Let's head over to the dashboard to install a plugin. Plug-ins, and add new. Inside the search, we need to look for Page Builder. We need to find the one by SiteOrigin, so just scroll down, and this is what we need by SiteOrigin. Also, it's compatible with our version of WordPress, so we're good to go. Install now, and then activate. Before we move on, just one more we need to add,and this is a collection of widgets. Search for SiteOrigin, Widgets Bundle, and then this is what we need by SiteOrigin again. It's a collection of widgets, which includes things such as Google Maps, which I'm going to use for the contact us page, so also install this, and then activate. Let's get to work on the pages, select pages, and then all pages. First of all, I'm going to remove the sample page because we don't need this. Click on pin, and then let's add a contact us page. We've add new, so, you see as well as the visual and a text editor, we've also got the Page Builder option. We've got the option to add to our page, a widget, we can add a row, some pre-built layouts we can use. There is also a Live Editor, which you can see in real time the changes that we're making. I'm going create this page inside the Live Editor, so, the first thing I want to do is creating a row. At the top, we've got the plus icon, we've got the widgets, we've got the row, the pre-built layouts, and also the history. I'm going to click on other row, we can set how much of the column we want to have on the left, and also the right hand side, and you can click on the section in the center. You can drag this to create more room on one side, or actually leave even, 50 percent, and then insert this. Now our page has two sections within the row, and I'm going to add a widget. Here's a list of all our standard widgets, and also the extra ones which we downloaded from SiteOrigin. To begin, I'm going to add a text widget. I'm going to place this text widget in the left-hand side, and then just click on it to edit it so, here I'm just going to add some address information. You can find this at, then colon, and then we'll just add address line one, and then we'll add a HTML breaks up in there,just so line two appears on the next line. Just paste these in a few more times. Line two, line three, and line four, and then click on done, and you can see it up here in the preview. Also, one more widget we'll add as a text widget again. Place this inside the left-hand column, just below the address, and then click to edit, and then add some useful contacts, which are the email address in there, and also the URL. Save that, by clicking done. In the right-hand section of the row, I'm going to add a Google Maps widget, so, look for the SiteOrigin, Google Maps, and then to get this to work, we need to add a city. We can do that in the map center, so change the map center to be a city. I want to change that to be in New York. You can change the map type to be interactive, or just a static image. The interactive type is the one we can drag [inaudible] and zoom in and out. You can add the custom heights and also the zoom level, so I'm just going to click on done. I should add this into the right-hand side, and once you've finished, just click on done. Because this is a contact page, I'm going to remove the sidebar from the right-hand side. We can do this by changing the template to be full width, and this will remove the sidebar, and then publish that. Let's take look. Okay, look we've got a row across the page, we've got two widgets on the left, one is the Contact Us widget, then the useful contact widgets, and in fact we need to put a break tag between those two, and then the Google Maps widget on the right-hand side. Of course you can carry on by creating more rows, and adding more widgets, and also adjust how much space each column takes up on the left or right-hand side. Feel free to create some new pages, and to have a play about with page builder. It's really good for creating flexible layouts, really fast. But now we're going to move on to the next video, we'll be taking a look at rearranging our menus. 45. WordPress eCommerce: Rearranging menus: Welcome back. In this video, we're going to get to work on rearranging our menus. As it stands, we've only got one main menu in the header section and by default, all the pages created have been automatically added to this main menu. In this video, we're creating two new menus. One will be a user menu, which will appear in the top of the header and this will have links to the user's accounts, the shopping basket, and also the checkout. We'll also create a second menu, which will be more of a site navigation containing page links such as the home, the contact us and the shop. We can do this inside the customizer and then going on to the menus option. The first menu, I'm going to add the navigation menu. Click on "Add a menu," and this will be the menu which holds all the links to pages on the website. Call this the "Navigation menu." And then, "Create menu." And then we need to add some items to this. Click on there and you can see there's various things we can add to the menu, but I'm going to go for the pages and the pages I'm going to add is a link to the homepage, a link to the contact us page, and also the shop. Scroll down to the shop and then we want this to be the primary menu. So on the menu locations click on "Primary menu." That sets out to be the main navigation bar in the header. Once you've done that just click on "Save and publish." There's our navigation menu inside the customizer. The second menu is going to be a user menu and it'll have links to the shopping basket, the user's accounts, and also a link to checkout. Click, "add a menu" and the menu's name is the user menu. So create this and then "add items." Again, once I add pages. I'm going to check on the "My account, the checkout," and also the "Shopping basket," and then the "Location." This time it's going to be the second menu. This is the small area at the top of the header which you can see appearing there, so save and publish. Lastly, we can create a third and final menu and this is going to be for the mobile view. Click on the, "mobile tab " at the bottom of the screen and then we're going to click "add a menu or create menu," sorry and then give this menu a name. We'll call it the mobile menu creates and the menu location is the handheld menu. Let's add the items. In the mobile menu, I'm going to add all the pages and then just rearrange these. We'll start with the actual pages. So home, the contact us, the shop, and then we'll start with the account links; So my accounts, the checkout and the basket. Make sure it's checked in the handheld menu and then save and then now if we go over to the preview, and there we have a nice drop-down menu, which is optimized for a mobile phone and there's all our links for all pages that was set in the mobile menu. Just click on the cross and then if we resize this up, set the tablet view. We'll get the same mobile menu and then back to the desktop view. We've got our navigation and our user menu. There's our menus all now set up and working. Next, we'll move on to finishing off the shirt store by creating the footer section. 46. WordPress eCommerce: The footer area: Welcome guys. Most of our website is now beginning to take shape. Next, we want to move on to the Footer area, at the bottom of the page. I'm just going to go on to the Home, and then down to the bottom. A few videos ago, we changed the Footer's colors to match the rest of the website. But at the moment it's still looking a bit better. Let's get to work. We'd add in some widgets, to add some content to the Footer. We go over to the Widget section, inside the Dashboard. We've got four different Footer areas, which is a four columns from left to right. I'm going to get started with the far left column, which is Footer area 1. I'm going to create the left section to be a link, or some menu links to different pages. We can do that by adding a widget called the Custom Menu. Drag Custom Menu into Footer area 1. We don't need to give it a title, but we can select one of the preexisting menus. First I'm going to select the User menu, and then Save that, and this'll provide some links to the checkout, the basket and the account pages. I'm also going to add a link to the User navigation menu. I'm going to drag a Custom Menu, just below the User menu that we just inserted. I'll Select the Navigation Menu, and then Save, and let's just take a look at this. We go back over to the website, and then the Shirt Store, and then down to the bottom. This is the Footer area 1 on the left-hand side. There's our two sets of menus, and then I'm going to move on to area 2, which is going to be a section which is going to hold some address information, and contact those links. We can do this with text widgets, just like we did on the Contact us page. Let's find Footer area 2, and now let's put a text widgets inside of there, and so I'll drag this up into Footer 2. Just like the Contact us page, you can find us at, and then let's add some address lines into here. I'm just going to Copy there, and Paste there in few more times, 2, 3, and 4, and automatically add paragraphs, and then Save. Now I'm going to add a new Text Widgets into there, and this is for the email address and website. I'll drag in over a text widget, just below the address, and this is useful contacts. Just an email address into there, and the link to the website. Automatically add paragraphs and then save, and close up, and let's refresh the Homepage. That's over to text widgets. Now we can move on to the third column, and I'm going to insert a Google map into there. I'll go down to Footer 3, and then when it decides origin, Google maps 1. I'll drag that over, and put that into footer 3, and just like the last time we used it, we need to put a city for this to work. Because it's the footer area, I'm going to make the height a little bit smaller this time. I'm going to change that to 300, and then Save that, and then refresh the homepage and see how this is looking. Great size, our map appear in the third column. You can add a fourth column if you wish, but I'm happy with how this is looking for now. Now we've got a fully functional e-commerce web store, and in the next video, we'll take a look at some of the final e-commerce settings, that we need to enable us to take payments. We'll also take a look over things such as the order screen, how to add coupons, and also reports. 47. WordPress eCommerce: WooCommerce settings: Welcome back. We're now looking in e-commerce website. But before we can begin to sell anything, we need to make sure that all of our settings are correct, such as taxes, currency, and shipping methods, to name a few. We also need to familiarize ourself with the WooCommerce backends. Well-built, see hopefully, all of our orders come flooding in. We can do this inside the dashboard. Then, down to WooCommerce, and then, settings. There's many different options available to customize histo. A lot of these will be dependent on your location and also exactly what you're selling. You can customize all these depending on your needs. A lot of the general settings we covered when we first set up newcomers, such as the locations, the countries, and also the currency and the way we want the currency to be displayed on the screen. We have the options change the measurements for the weight and dimensions with the products. We can also enable reviews and also change things such as allowing own reviews from verified owners. Underneath each one of these tabs is also a sub-note. So be sure to make sure we go through all these as well, and make sure that all the settings are correct depending on your needs. We can change the area on the website where we display our products. We can also change the size of the product images. Well, my view in these images in the catalog, the full product view, and also the thumbnails. Inventory, we can also manage stock control and we can manage our stock control notifications. The tax options which we briefly looked at when we set up the stock. So we have options to enable taxes and how the products to be displaying the prices inclusive or exclusive of tax. Make sure all the settings are correct to your particular country. The checkout area, this is the place where we can enable coupons. We can do things such as enabling a guest checkout. So we don't need to register a user to enable them to purchase. There's various payment options such as box. We can accept cheques, cash on delivery, and also paypal. Just make sure one of these is enabled. Save any changes. We can add shipping rate. It depends on where the package is going to, if it's local or international. We can also set up accounts on registration information. Setup custom email notifications and it will be automatically processed for example, when a new order is being created or an order has been refunded. Then, we're going to take a look at the oldest section. Hopefully, this is the exciting part where the order is going to come through to and you begin to make some money out of your stock. There's no orders in the list of your stocks yet, but once your site goes live, hopefully, that will begin to fill up. You can also search and filter using the search box. We can add and create coupons to the products. We can check out reports. We can see how much money we made in certain periods. We can filter it down by the year, the month, or the last week, or between a custom dates. We can check our sales by a particular product, sales by categories, also, sales by coupons. We can also go to the customers tab where you can check out how many customer sales against guest sales we've got. We can filter it down to the customers and see how much money they spent, how many orders are placed, and when the last order was. We can also look at stock reports and find out if there are any products which are low in stock. Also reports on taxes. We can also download any of these reports into a spreadsheet. Before we go, we're going to create a coupon and show you how these work. So we just need to go to Add coupon. I'm going to call this coupon 10 off and this is going to be for 10 percent. The discount type, we can apply this to the whole of the basket or a particular product. I want to save it to be the basket percentage discount. The coupon amount is 10 percent and is also an option to enable free shipping. When using this coupon, we can add an expiry date. We can also add usage, restrictions, and limits. To enable a coupon, we may need to enable a minimum spend. We can exclude sale items, we can also exclude certain products. We can also set limits per coupon on per user. I'm just going to hit publish and then go to the stall. Move down. I'm going to select one of our products. Well, for the Ninja T-shirts and then, add to basket. You can see now at the top, in the navigation, we've got a basket appearing with the value and the number of items. If we go down to view baskets, and then, if we go further down, we've got the option to apply a coupon code. 10 off and apply. But the green bar is saying coupon code has been applied successfully. You can see in the basket sold tools, we've got the 10 percent off. Everything is working well. In the payment method, we could go through and proceed to the checkout and then you're provided with a list of all the checkout details. You can put in all your own details, you can check out the order and then select your shipping address and also any payment details. So congratulations on getting to the end of the e-commerce project. I hope you've enjoyed it and I'll see you at the beginning of the next section. 48. 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. 49. 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. 50. 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. 51. 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. 52. 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. 53. 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. 54. 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. 55. 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. 56. 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 existi