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
277 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, where 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 course step-by-step. I have many years of experience developing 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 convert a HTML website to WordPress theme. This course is designed with a project-based approach so the technique you learn will be immediately put into practice. We begin by introducing you to WordPress and getting familiar with the dashboard and also the files and folders included. Also, you will learn how to set up 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 blogs to e-commerce stores. Then we'll take things even further by covering PHP basics and then move on to coding our own theme by converting a HTML website to WordPress completely from scratch. After that, we even take a dive into WordPress networking to 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 student for this course is somebody new to WordPress or even if you've try WordPress before but never quite managed to fully understand how to use it effectively. A little experience of HTML and CSS will be an advantage, especially in the last project. However, there are no other requirements for taking this course, just an eagerness to learn. Feel free to take a look through the course description and also the lectures covered to discover everything you will learn during this course. Hit the "Take This Course" button, and I look forward to seeing you inside the course. 2. Why WordPress?: WordPress began life as a simple login platform and has 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 and to download and it's built by hundreds of community volunteers along with all the great features of WordPress which you will learn in this course. One of the things I really love about WordPress is it has something for everybody. If you are a nontechnical person or a beginner, you can buy some simple web hosting, use a One-Click Install, select a theme, and you have your very own website or blog in under half an hour. For web designers or developers or people who want to jump in even deeper, there is also many great things you can do technically to make a powerful website. You can code your own themes and plugins to make WordPress look and function exactly how you want it to be. WordPress is also always under constant development. It's always improving whether this is a security fix or a new feature to keep WordPress from becoming outdated. The creators of WordPress made these updates really easy to apply, so you don't need to worry about any complicated updates and installs. If we head over to wordpress.org, which is the official website, and then go into the Themes tab, there's also lots of great themes available to download for free, and there is pretty much any type of theme for any type of websites which you may want to build. The free themes on this site are really good and there is also premium versions available on websites or marketplaces such as ThemeForest. We'll take a look at themes in more detail very soon. The WordPress core, which you download, is really simple yet very powerful, packed with many features. However, if there is some functionality missing, which your app or website needs, then there is most likely going to be a plugin available too. Plugins are pretty much what they sound like. They are something which you can download, the plugin and extend the WordPress core. They add functionality and features and they usually are simple to install as clicking on a few buttons. We will also learn more about installing plugins as we build our projects in this course. Some of the great benefits of WordPress are that it's really search engine friendly. By using WordPress, many SEO best practices are already taken care of for us behind the scenes. If you want to also take things further with SEO, there is also some great plugins which we'll use and we will discover some of these later on. Lastly, WordPress has a really useful mobile app too for iOS and Android which is free to download. The app allows you to write up content and update your website on the move and you can even upload photos, manage blog comments, and edit pages on the app too. These are some of the great reasons for choosing WordPress. Of course, there are many more too, and I'm sure you'll find your own reasons for using WordPress as you progress through this course. 3. WordPress.org or WordPress.com?: When I first started out with WordPress one of the things which confuses many beginners is the difference between the websites of WordPress.com and WordPress.org. This is understandable since both domain names are very similar, and both are related building WordPress websites. What exactly is the difference? Let's begin with WordPress.org, which we said in the last video was the official WordPress website and this is the homepage for the popular open source WordPress software. Open source means anybody can use it or contribute to it free of charge. It really is a big community effort. This is the official software which we'll be using to create our projects throughout this course. We can download it, customize it, and update it to a live server, once complete. It basically gives us total flexibility since it's self 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 here that we have the available plugins and themes which we can add to our projects. We also have the support tab where we can find the documentation. If you want to find out more information about any WordPress feature, we will refer back to this documentation throughout this course. It covers everything you will need from installing themes right through to security topics. We can click on the Get WordPress button, to download the software, and we're going to be doing this very soon. Downloading this software, as mentioned, will give us total control over everything related to our project, or the alternative is wordpress.com. Wordpress.com is more of a service which allows us to have a WordPress site hosted for us. It uses the same WordPress software which we just looked at, but takes away all of the setup and we'll host it for us. The site was created by one of the WordPress founders, but the ease of setup does come at a cost. We don't have the flexibility we have when self-hosting, and there are restrictions on which themes and plug-ins we can use, depending on the price and the plan which we would use. Let's take a look at the plans. Remember, these pricing plans do change over time, so they might be slightly different when you visit. But we have the option to start with a personal site, and there's also a free option at the top too. One of the things to watch out for, with the free option though, is the fact that your site will also have wordpress.com advertising too. This 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 when self-hosting too. WordPress.org is the one to go for if you want full control of your project, and happy to do a little set of work, and will be choosing this path throughout the rest of this course, or you could also go for WordPress.com, if you want everything to be taken care of 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 we can add our site's content and then quickly change the look and feel by switching between different themes. There are thousands of these available and many are also free too. I'm going to show you a few resources which you can use to find themes to your project. As we discovered in the last few videos, wordpress.org website has this theme section just on here, we can find some of the most popular or latest themes or also filter by a certain feature. We also can search for different themes if we already know the name of the theme upfront. These ones at the top of the page are the ones which are included with the WordPress core. When first start out with WordPress, you will have the default theme, all that particular here until you find one that you like, you can find out some more information. You'll also be able to choose a preview too. One of the things to watch out for when choosing a new theme is also when it was last updated. It's important to make sure that the WordPress themes are regularly updated and also compatible with your version of WordPress. Scrawling down, we also have these tags which are important too, you will find out what a lot of these terms mean as we progress through the course, which has these supported templates, the featured images laying out in different columns, custom logos and so much more. For these times will give you a good idea of what you will need for starting 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 too, and also some different options for customizing the layout. Anybody can create a WordPress theme and upload it to this site. 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 out for is often the preview doesn't look anything like the image which you see here. This is because this demo picture we see on the left is how this theme would look once its got more content such as images. On the preview will often see the blog 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 in our project. We can download the file with despots and just here and drop this into our WordPress folder. Or we can install directly from the dashboard, and we'll take a look at this very soon. If we exit out of the preview and go back to our themes list, as well as all of these free themes which are available, wordpress.org also has a commercial fame section too, which has some premium themes which you will need to pay for and often this will also come with support too. Another popular resource for paid WordPress themes is themeforest.net, along with many code samples and snippets, we also have a WordPress section where we can check out all of the available themes. Just like with WordPress.org, we find a list of all of the popular bestsellers. We can also search, and filter, to find the correct theme for our projects. These site basically a marketplace for sellers, so most of the content on here does come at cost, but it does also often include support too get you go and if you have any problems. There is also many people making a full-time living creating WordPress themes and selling them on WordPress marketplaces, just like this. Just like before, we can also click on these and see a live preview. We can also find out what saw features are available with the theme, we can find out what versions of WordPress this is compossible with. Most layouts are included with the theme. If you want to see how this is looking in real life, we can check out the live preview. Usually these demos also allow us to switch between different layout, which is also provided with the theme, and also see how we would look with different color schemes if available. This is just too popular resources for finding themes for your projects. As with most things, you could also do a search for WordPress themes too and you will find many of their sources too. We are going to come back here very soon and look at how to set these themes look but first we need to install WordPress so we can begin building our projects. 5. The WordPress web server: If you build a website in the past using HTML and CSS, one of the things which will be used to is simply opening up a web project inside the browser and everything works. However, with WordPress this works a little differently. WordPress needs a web server to generate our pages first. This is because WordPress is wrote in a programming language called PHP. We don't need to understand PHP to be able to use WordPress but understanding this will really help us understand how WordPress generates our websites. If you consider a website such as, Facebook or Twitter, sites like this look the same for every user but the details are different, such as your username, your personal friends, any posts and so on. We can think of sites like this as a template and then the details are injected in when needed. This is an example of what PHP does. It can generate a web page or change the details for each user on that page, and this is an example of what is called a dynamic website. These pages are generated on a web server before being sent to the user's browser and this is exactly why a web server is needed to run WordPress. Also WordPress needs a database to store all of our pages, all blog posts and all the information for our site, and the server is also responsible for talking into our database too. To get started creating a WordPress project, this now leads us with some options. If you already have any live web server which can run WordPress, you can of course go ahead and use that. All we're going to run through some options in the upcoming videos to get you started, but make sure you just choose one of these options. With this as a background, we're now going to learn through how to set up WordPress in the upcoming videos. 6. Option1: Installing with Local (recommended): In this video, and also the next one, we're going to discover two different ways of setting up WordPress on our own computer without the 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 setup WordPress websites really fast, and in the upcoming video we're going to look at an alternative called MAMP. I would recommend following along with this video rather than the next one especially if you are a beginner since MAMP can cause problems to some, but this is totally up to you. To get started, head over to localwp.com. There are paid versions for teams and agencies, but we just need the free community edition which is available for Mac, Windows, and Linux. You just need to choose your operating system, and then go ahead and download as normal. Local allows us to quickly set up WordPress projects on our own computer really fast and easily, and also takes care of setting up the web server and database for us. It has lots of great features. We can view our sites and admin section at the click of a button, we can generate a live link to view our projects anywhere, and also share with others too, along with lots more advanced features, such as the ability to set a WordPress multi-site and so much more. I'd have this available, so go ahead and download. This might take a few minutes to download, so comeback once this is finished. Once this is finished downloading, go for the usual installation for your machine, and then you'll be presented with a screen which looks just like this. To get started, all we need to do is to create a new site by clicking this button and then give in our site a name. I want to call mine WP Festival. You can call this anything which you prefer. Click on "Continue". We then have the option to set up custom settings such as the PHP version, and also the version of the MySQL database. We don't need to change any of these, so I'm going to go with the preferred option. Then we need to set up a username and password to log in to WordPress. I want to call this the festival admin, or festival_admin, add a password, and then a email address for the admin. Click on "Add site" and this will now setup a WordPress project for us. If using a Mac, you may need to add your password to grant access to Local to create these sites. Then once done, you should be seeing a page which looks like this. Once we are taken to this page, we see that one site is running, and we have the green light, meaning that everything is good to go. We have a overview of all of our project settings, and we can access our admin and also the site with these two buttons here. If we click on "View sites," this will then take us to the homepage of our Wordpress installation using the default theme. We can also access the admin too by clicking on the "Admin" button. We can then add the username and password which we set-up just before. So this is the admin on the back end of our WordPress sites. On the left-hand side, we have all of the options for configuring our projects. I'm not gonna 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 all now displaying, 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 it also provides a live link. We can enable this and this will generate a link which we can 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 other device. If you're happy using Local for this course and everything is working correctly, you can now skip the upcoming optional videos. 7. Option 2: Installing with MAMP: This is an option video to setup WordPress using a service called MAMP. If you successfully installed WordPress in the last video using local, you can skip this video. However, if you use month before or you just want to try something different you can follow along with this video and setup using MAMP. Let's get started by heading over to mamp.info. This is also going to create a free local development server and also take care of the database for this two, we can download a free version by clicking on the link here and then download for your operating system. I'm going to go for the mac version and give it a few minutes to download. Once this has downloaded, will need to go through the installation steps to your computer hit Continue through each one of these. May also need to add a password to to install this. MAMP also comes with a paid version called MAMP PRO. This also downloads at the same time, but you don't need to use this. We just need to stick with the free version of MAMP as we don't need any of the prophages. Once MAMP has finished installing to your machine you will be taken to a star screen which should look just like this. You may also be asked to upgrade the MySQL database. I'll go ahead and do that too. Inside here the key thing to note is the two green lights up at the top. This means that our web server and also a database is open and running. We can now download the WordPress core and add this to our MAMP folder. For me, MAMP is stored inside my applications, then we have this MAMP folder inside here. The key folder which we'll be working with is these htdocs. This is going to be the location where we add all of our WordPress projects throughout this course. To do this we need to go to WordPress.org and from the homepage will have a get WordPress button just down here. This then takes us to this download section where you can download the WordPress core. This is a zip file it shouldn't take too long to download. Once this is done, we can click on this package and open this up. This is now our WordPress project folder. We can go ahead and rename this, I'm going to call this wpfestival Then we can drag this project over to our htdocs. Let's grab this, places this inside of the htdocs, open this up and we can check this is that. The next thing we need to do is to create a database for our project. Inside of the MAMP start screen we open up the webstar page. From here we can go to PHPMYADMIN. If we click on tools, click on PHPMYADMIN where we can add a new database. You can see on the left I already have many databases already setup but I'm going to click on New and then create a new database. This can be any name of our choice. I'm what's called this, the wp-festival. Click on Create, then we don't need to create any tables or any data. Since WordPress is going to handle this photos. With this now sets up, we can go back over to MAMP, add to the start screen. Now the older versions of MAMP used to have the preferences on here, but now it's available in the main options. If you're using a Mac, you can head to the MAMP icon in the top corner and then click on the preferences link. This will end that linkage to the section where you can check out which port we using. If we click on ports we can see the default web server port is 8888. We're now going to use this to access our project in the browser. All we need to do is to click on localhost. Then 8888 hit Enter. Then we take it to the index of our htdocs. This will contain all the project which we are inside a MAMP. We want the wpfestival. Clicking on this will then start to up the WordPress installation scripts. The first step is to choose the language. I want to go for English and then continue. This page is just let us know we need to set up our database first only to have access to all of this information. Click on Let's go to the database name, which was wp-festival. The database username, which is roots and also roof for the password, working on the localhost, and then click on submit. Once connected to our database, we can then run the installation scripts. We need to first of all add the subtitle. I'm going to go for wp-festival. This can be changed later on in the WordPress dashboard. Don't worry too much about this. We then need to add a username and password to login to a WordPress back end. I want to go for festival admin, a password and then also an e-mail. I'm going to uncheck this for now since society is not live. Then click on install WordPress. We can then login using our details, which we just provided. My username was festival admin, then paste in the password. This then takes us to the WordPress dashboard where we can control our site. We'll take a look at this in more detail very soon. We can also click on this home icon just above the top. This will then switches to our WordPress site. If you've go to the stage, congratulations, WordPress is now open running using MAMP. 8. Option 3: One month free web hosting: But it's because I have teamed up with the popular web hosting service called SiteGround to offer you a month of free web hosting to complete this course. SiteGround is a fast and reliable web host and is even one of the recommended hosts on the official WordPress.org website. It makes sign-up WordPress much easier and will be up and running in only a few clicks. Take advantage of this free offer, head over to the link on the screen, and the free month will automatically be triggered. No credit card is required to sign-up. You don't even need to worry about that. The link provided will take you to this learning page where we can click on ''SIGN UP NOW''. Click on this. Go ahead and sign up with your information. Again, no credit card is required. Just check 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 e-mail as soon as this has been done. It shouldn't take too long. Once you've done this, all you need to do is click on the link in the e-mail or click on the login button in the top corner. Once you've logged in with the details you're just provided, the next step is to choose an installer. Of course, we are going to go through the WordPress installation. Select the WordPress logo and then we're going to add a admin e-mail, username and password. This is the admin e-mail and password to log into the back end of WordPress rather than the one provided for SiteGround. Although the e-mail and password can be the same to make things easier. The next step is to confirm the terms and then click on ''Complete Setup'' and then give us a few moments to generate a new WordPress installation. As the message says here you will get an e-mail confirmation once it's been done or you can click on ''Proceed to Customer Area'' once this has been done. This will then take you to the homepage of your account, where you can click on the My Account tab at the top. Here we can see what type of account we have. We've got the startup account, have the date when we signed up and we also have the expiry date which is one month from now. All we need to really take note of on this screen is the link just here, which is the link to our WordPress site. I'm going to open this up into a new tab. This is our WordPress installation all setup. This will be the page we need to go to during the course to checkout any changes we make to our site. We can also go back to our SiteGround admin. We can click on the admin panel. I'm also going to open this up into a new tab. You may need to also login with the WordPress, username and password which you provided when signing up. This is the same admin screen which we'll see during the course, you have all the information on the left such as the posts, any media you want to add, any pages, we can change the appearance and themes and anything else who wants to during the course. If you do need access to any of the WordPress files and folders, we can also access these from the cPanel. We'll go back to the user area. We have a red button here saying Go to cPanel. We can click on this, proceed. The cPanel will allow us to manage our accounts. But all we need to do is scroll down. If you look at the files section, have a file manager, we can click on. Click on ''Go''. Then inside here we have all of the WordPress files and folders which you may need. You can access this by clicking on the navigation panel on the left hand side, for example, will go to content. We can check out our themes which were installed and we can also upload or delete any files as we need to during the course. This is the same file and folder structure which you will find if you've used MAMP before inside of the htdocs. We shouldn't throw up any surprises. Remember this is also a live link to which you can share with friends and family during the free month. You can also access the admin, just like with any other WordPress installation by selecting forward slash admin, which will then take us back end of the website. We can also click on the home link here to be taken back to our site. 9. WordPress dashboard : Regardless of whether you're using MAMP or local to set up your WordPress project. We had a quick preview of the WordPress dashboard just before when setting up our project. This is basically our website control center where we can add, edit, update, and delete any content, we can also use it for installing things such as new themes or new plugins. I am not going to go too deep into all of these options in this video as we'll get a lot more practice and use most of them throughout this course, but I just want to give you a quick overview so you don't feel too lost if first starting out. Over on the left, we have all of our options. I'm going to also see when updates are available for our WordPress core, if we're using different WordPress themes or plugins, we'll also be notified when new versions come out too, and it's from this link where we can update each one of these. WordPress is also well known as a blogging platform, so when creating a blog post, we can control them from this link, we can add new posts, 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. On our blog post, we also have this media library, which is a place where we can add all of our assets we're going to use such as images, we can add videos, music files, documents, and so much more. All of these assets are going to be stored in one central location, which is this media library, and all of our different pages or blog posts will all have access to this media library. We also need to add various pages to our site, we can create blog pages, about us, contact us pages, and anything else which you would like on the control list from this pages link. We will have a default page which is provided with the WordPress core, we can remove this sample page if we want, and we also have a privacy policy just here too. If we use this as a blog we'll also make use of the comments, this is where users can upload comments for a blog post, for example. We also have the options control, wherever these comments are available or wherever 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 add and customize our theme, we can rearrange widget, which are blocks of content, we can add and edit our menus, and generally make lots of changes to the look and feel of our theme. Plugins are where we extend the WordPress cores, add new features, so for example if we want to add some more SEO features, we can use a plugin, but also we'll be making use of things such as contact forms throughout this course. We can also manage our users and also the roles and permissions that each user has. We can set up different users to have admin privileges so that they can have a higher level of control of our sites, we can also create regular users, we can upgrade users to be editors and so much more. In tools section, if we check this out, is an area where we can import and export data. For example, if we have a WordPress site somewhere else and we want to import all of the data into our new site. Down at the bottom we also have our settings. Here we can control pretty much anything we want to on our site. These settings contain lots of options which we'll go through in this course, such as setting the format of a date, where our blog posts will appear, and also if a user can comment on a blog post, we can also switch between the back-end of this dashboard and also the front-end of our site by clicking on the site title, open the navbar, so this is a quick overview of the WordPress dashboard, if you are new to WordPress. Next time we're going to move on to take a look at what is included in the WordPress core, where we will discover all of the files and folders. 10. WordPress files & folders: On the first setup a WordPress project. We download the WordPress core. The WordPress core contains all of our files and folders, which's what a person needs to function correctly. Now, we don't need to know the exact roles of each one of these files and folders, since there is a lot of code inside of these. But understanding the basics will really help us. To find all of the files and folders, this will depend on whether you're using local or MAMP to set up your project. If you were using the local, you need to go to the Start screen and click on this arrow. This will then open up a window with the location of our projects. If we go into here and then inside of our app then public, this is all of the core files and folders which is needed for WordPress to function. If we use a MAMP, just like we've seen before we need go to the htdocs and then into our project folder, and then we are presented with the same files and folders, which is what is called the WordPress core. The WordPress core is not intended to be edited, so we generally leave these as they are. One of the main files which we have is the wp-config, which is a PHP file. This file is where we tell WordPress all of the database settings which we'll have for our projects. This file can be created manually, but in our case, this file was set for us when we created our site using local. Or if you chose to use MAMP for this project, this file was created when running the installation script earlier. Just below this we have the wp-content. This is probably the location where we'll spend most of our time. This is an important folder since it contains everything which we'll use for our site, and any images or videos which will be stored in the uploads folder. You may also often see a upgrade folded too, which is a temporary folder used by WordPress when updating our site. You may also see a languages folder too, if making use of other languages for your theme. If we open up the themes folder, by default, WordPress provides some default themes for us to get started with. Over on the left here, we can see the default theme, which is currently 2020, and we can change this inside the dashboard. We can also download new themes and drag them into this folder and then activate them that way too. We also have the plugins just above, and this is going to be the location where we store our plugins, either via the dashboard or by downloading them and adding them to this folder. If we want to make some modifications to our themes, we can drag our theme folder. For example, 2020. We can drag this over to a text editor and we'll do this in one of our projects later in the course, including creating our own page templates. This is a quick overview of some of the main files, and we'll jump into this folder as we need to during the course. Now, we understand a bit more about WordPress, let's move on to creating our first project. 11. Music Festival Project: What we will be building: We're going to begin with a simple project to get us used to how WordPress works including setting up pages, including themes and adding general content. Let's take a look at what we're going to build during this section. This is going to be my version of the project, which is going to be a landing page for a music festival. You can follow along and create this exact version or you can make it your own too by using a different theme or design. If you were just starting out and are brand new to WordPress, you may want to follow along with the same steps in design which I've created then possibly customize at the end when you feel more comfortable doing so. This is the project we're going to build in this section. It includes a navigation bar at the top. We're only going to create a landing page so we only have one menu link. We're also going to create our site title at the very top. We'll have some social media links on the left-hand side, which you can use to link to your profiles. We'll have a full size background image in the header section. Then scrolling down, we're going to make use of WordPress's new editor to create all of the layout and content for our homepage. We're going to create different rows and blocks of content using this editor. Learning how to add different types of content such as images, galleries, and lists. We'll also find out how to lay things out in different columns so we can structure our content exactly how we would like. We'll also discover how to use things such as the Media Library, how to include widgets for blocks of content, and also how to set a bow theme. We're going to kick things off by adding this theme in the next video. 12. Music Festival Project: Installing themes: Back over to our WordPress installation. We're going to begin by installing a theme for our project. I'm going to be using a free theme from WordPress dot org, but this is totally up to you. You can also choose a different theme if you prefer, but do bear in mind that some themes have different options in the dashboard. If following along with me, using a different theme, you may not have the exact same options, which I do. You may also have extra options too, depending on that theme. This is the default theme which just came with the WordPress installation, defaulting it to the blog page. If we go over to the dashboard, we can check out which theme's installed by going to appearance and then to themes. Here, we see the themes which had been included when downloading the WordPress core. By default, mine is the 2020 theme, which is the color scheme which you can see when visiting our site. I want to go over to WordPress dot org and select the themes and the theme I'm going to be using is a one called asura. So I'm going to search for this. This is the theme I'm going to use for this project. So now we have a couple of options of how we can include this. We can download this and place this into our project themes folder, just like we looked at earlier, or we can directly install from the dashboard. We can go to add new. We can do a search and then once the one pops up which you want to use, we can install. Then click on activate to set this as our theme. The other themes which we still have installed are still available and we can go ahead and activate these in the future. So don't worry about overriding our existing theme when adding a new one. Now, this is activated. Over to our project. I'm going to refresh. We can instantly see a difference in the colors and layouts. However, we can still see the same blog posts 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 and customize, inside here we have all of these settings for change in our theme. If we go to site identity, a part at 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 set a tagline which as you can see from the finished version, appears inside of the tab. We can also set this to be displayed on our sites or check this box to hide this too. I want to set this as Europe's biggest music festival. If we uncheck this, this will now display underneath our site title. Which I'm going to leave this as checked. Then click on publish to save all the changes. The theme looks different to how it first looked when we seen the inside of the pictures over in WordPress.org. This is because we don't have the same contents that set up with this demo. The job of a theme is simply just to provide a skin or a color scheme and layouts for our content. Also by default, WordPress displays all blog posts on the homepage too. But we are going to change this in the next video by setting up our first page. 13. Music Festival Project: Creating our first page: We discovered in the last video that WordPress will default to display in our blog posts on the homepage just like we see here with the sample blog post, which is created when installing WordPress. We can change this, but first we need a page to replace this with. In the dashboard, if we go over to the admin section, we have the pages option over on the left. This is where we can add and manage our pages for this website. If we click on this, we see we have this sample page which we can edit, or we can delete. I'm going to click on the Trash button just here, and then create a new page up at the top. This new page is going to be our homepage and we're going to use it to replace our blog. We have some information about how to use the WordPress editor and we're going to look at this in more detail in the next video. Now, although we're simply going to add a page title and then hit ''Enter''. Now, although I'm not going to add any more content below, you can add new blocks of content using this icon just here. But for now we're going to leave this as the page title and come back to this very soon. Over on the right, we have the options, for when editing our page, depending on the block of content we're editing, we have various settings, such as the text settings of color and alignment and well work with these more when we have more content. We also have the document link, which is more related to the actual page. Here we can set if we want the page to be public or private and also if we want the page to be protected by a password. We can also set the option to publish this immediately, or just like when adding a blog post, we can schedule a date and time when we want this to appear. Below this we have the permalink which includes the WordPress slug. A WordPress slug is the link to the page. For example, we'll have our URL and then f/ and then home. Just like this and we can use this in things such as menus if we wish to. We also have the featured image, which is the main image for our page or post, depending on which theme you are currently using. The themes offer many places in different locations. We're going to set this when we come back to adding content to this page. We have the discussion section where we can enable user comments. 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 up at the top. If we click on the three dots, we can change the editor to be a co-type rather than the visual one which we see here. We can change the default layout of this editor and there's also a help section too. Next to this, we can also toggle the menu options if we just want a clear view of the editor. Down below this we have some layout options starting with the sidebar. We can add a sidebar to add some more options to our page, if on the left, on the right, or on both sides or we can choose 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 at the moment I'm just going to click on Publish and then we can check our settings. I'm going to publish mine immediately and then click this again to confirm. We can then view our page with this link here. This takes us to the /home link, which we seen before as the slug. We don't currently have any content. We just have the page title at the top. You can keep this title in place if you prefer. But often we don't want the page title to be up at the top and displayed in bold like this. We move this using the theme settings. I'm going to click on Edit Page to be taken back to the editor. Not all themes have this option to remove this, we often have to go into our code and then remove it manually. But luckily, this theme has the option, if we go down to our layout options, you have the option to disable our elements and the option we have is the content title. If we check this and update our page, click on the preview button and now our page title has been removed, leaving us with a fresh page to add our own content. Since this is going to be our homepage, the next thing I'm going to do is to add this to the root of our project. Currently it's set to be the link of /home but we want this to appear just on the root of our project, we don't want /home. If we remove this, currently we have our blog by default. I'm making changes over in the settings. Let's go back to the dashboard by clicking the WordPress icon in the corner. Then if we go down to settings and then our reading link on here, we see that the homepage is currently set to display the latest posts so we want to now change this to be a static page and the homepage which you want is this home one which we just created. We then have the option to assign our blog posts to a different page but we don't have one just yet. I'm going to save these changes, go back over to our home, refresh and now we see that our homepage is now displaying, since we don't have any blog posts. This is without using the /home link in the URL. We're almost done now with our homepage. But the last thing I want to do is to head over to the customizer and we can set our social media links, which we have in this yellow section on the left. If we go once again over to the Dashboard and then to Appearance and Customize, just like we looked at in the last video. If we go down to socials, click on this. We can link to certain social media profiles. These are the links which you see in yellow just on here. For example, we can go to twitter.com and then we can add our twitter handle inside here. This link will now be used when clicking on the Twitter icon. We can also go ahead and add in any other social media profiles. I'm just going to set the one for now and click on Publish. We now go to our homepage and refresh, if we click on the Twitter icon, we now see we're taken into this link just here. This is our homepage now set up. Now, let's move on to the media library so we can add some images into our project. 14. Music Festival Project: The media library: Sooner or later you will have the need to add 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 I head over to there, click out the customizer, and then we can click on the media link. This will take us to the media library, which is not just the images, but also for other types of media such as videos, documents, and audio. You can use the 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 homepage. You can either drag these over individually, or you can simply drag over the full images folder, and these will be added to our 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 and accessibility to do this before deploying any site 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 our media library, we now have full access to these inside of our blog posts and also our pages. Let's go back to our homepage, which you created before. We go to all pages, then hover over the home link and click on edit. We can out of these images directly into the page's contents section. I'm going to do this in the next video. At the moment though, 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 can be displayed in a number of locations. In our case, the themes offer ascend dislocation be in the header. You can upload a new image or you can click on the media library to access any of the images we already have saved. I'm going to select this one. Click on set featured image. Wish you to update the 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. Thus, our image is also being added to the top of our page. I'm going to make use of this same image to set the site icon by crop in this section, and then it will appear in the browser tab. Click on site identity. Then we can go to the site icon. I want to go with the same image. Then crop a smaller section. It looks fine. Click on crop image and then publish our changes, and now this image is now placed apparently browsers tab. 15. Music Festival Project: The Gutenberg editor: In WordPress version five, they've released a whole new revamped editor for both creating our pages and also blogposts. This new editor was called Gutenberg, and it moved away from a text editor style and replaced it with blocks. The link to this page is wordPress.org/gutenberg and you don't actually need to head over to this page, we're going to give you an idea of some of the blocks which are available to create our homepage. Scrolling down, we have a selection of 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 can rearrange them and you can also nest some of them inside of each of the too. Over to our homepage in the dashboard, we can start to work with this new editor by going into our new page. It's all pages and then we can hover over the home link and click on Edit. When we created this page early on, we simply just added the page title. We can now go ahead and add any different type of blocks to construct our new page. Click on the plus icon to add a block. We can search through the various blocks, go for the most used, and all of these blocks arranged into different categories. Our most frequently used will appear in the very first section, we have the common blocks for images, text, headings and lists, for example. We have a formatting section for things such as code blocks, inserting custom HTML, and also tables. We have the layouts elements where we can divide our content top into various columns. We can have things such as images and text alongside each other and 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. We could add a area which displays all of our blog post categories and so much more. At the very end, we also have various embeds where we can link to Twitter content. We can add a YouTube video, we can add a Facebook post along with various of this too. Let's get started by creating the homepage which we looked at earlier, and of course you can edit this to suit your project. I want to do a search for a head in. The head in one comes out, we just need to click on this and then we simply added the text for our heading. I want to say a full weekend of live music and entertainment. If we hover over this block we also have various formatting options, so we can rely on our text. I going to align this in the center, and we can also change the level of heading. This is currently a level two heading with the lower numbers, such as H2 be more important and also larger than the higher numbers. We can also change this into links and also make it bold or italic if we prefer but I'm happy with how this looks for now. We can then also create some more blocks either above or below, by using this same icon just here. Or if we hover over, we can see the plus symbol appears above and also just below too. Let's add a block just below. I want to go for a two column layout for the next row so let's go into the layout link just here. Click on Columns. We have different options here, but I'm going to go for the first one, which is two equal columns. Click on this, and then inside here we again have this plus icon to add a block of content. Since this event is over a full weekend, I'm going to use the left column to have a list of 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. I'm also going to change this to be a level three heading, so it's smaller and less important than our main headings. Also the lioness into the center over on the right we also have some additional options, such as the color settings. I'm going to change this to be a green color. We can use any of these theme colors or also choose a custom color too. Over on the right I'm going to do exactly the same by choosing a heading. This is for the Sunday, I'm also going to align this in the center. Change this to be a level three heading and also use the same color. Now for each one of our columns, I'm also going to add the list just below this heading. This is going to highlight all of the events which are happening on each day. Click on the plus icon. We have the list just here, and this can be any information would you prefer to add. I'm going to go for eight live bands, 20 singers, two DJ's, eight food and drink stalls, four stages and three arenas. Then the last one is going to be free overnight camping, with all tickets. To make it simpler I'm also going to just copy this list by using command or control C, head over to the Sunday block and 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 us 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 of early bird tickets now available. We can go ahead and add a new block just below this. You can find this under the layout elements and then media and text. We see on the right-hand side here we have an example of how this will look. Let's choose this. We can also switch the direction if we want the media to appear on the opposite side, we can switch with these two buttons just here. In the media area, we can also upload an image or choose from our media library. Let's go for an existing image and then on the right-hand side I'm going to add some text. I'm going to say early bird tickets now available. You can also add some formatting to this sections too over on the right, but I'm happy with this for now. At any point during construction, we can also check out a preview by clicking on this link. This will give us an idea of how our page will look with the changes we've made so far. These are our two rows just here. I'm actually going to add a separator which is aligned between each one of these pieces of content. Let's do this by adding a new block. We can do a search for a separator. Click on this. Then we can click on this icon just here and drag this exactly where we want it to appear. I'm going to add one more. Click on this. Then we can either drag this just below or click on the down icon. This will then go below our next piece of content. Inside of these sections, we're not just limited to text, we can also add different pieces of content too. For example, if we click on add block while still within the right section, I'm going to add a button. We want our detects all by now. We can also change this into a link by clicking on this button just here, and then typing in a URL. I'm also going to change the text color to be the green to match the headings from above. After the separator, I'm going to add a new level to heading. This next section is going to be some images from last year's event. We can also center this we want to keep this as level two to much the one from above just here. Then after this, we can add a image gallery. This image galleries going to display all of the images which we added in the media library. Let's do a search we can 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, then insert. We can also fine tune the display of this gallery. For example, we can say it's how many columns you want to appear. If we drop this two, it will be now two images side-by-side. However, 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. Next after this I'm going to add a separator, and then a new level two heading, which is going to be for the tickets information. Just like the ones above this is also going to be level two and also aligned into the center. On the final block, which I'm going to add is for a table, which is for the ticket prices. We could add a table block. If we search for this. This is also available but going to create my own using a free column layout, so we don't have the borders around each cell. Instead, let's search for a column. Click on this, and this time I'm going to go for free equal columns. The first column is going to be the pricing information for pre-sale. We'll then have the early bird section in the middle and then the standard ticket prices on the end. First of all, we're going to add a paragraph with the text of pre-sale. I want to make this bold, add all of the text in this section is going to be aligned into the center. If we hit Enter whilst in the cell and this section is going to be all gone. All the tickets for the pre-sale have gone so we're going to center this in the middle. We're also going to make this red since they are sold out. Hit Enter, and then add a new block. We can also add a text inside here, we're going to for 29, align this in the center. Since this section is also sold out, I'm going to click on the drop-down icon just here and then we can add some additional settings. I'm going to go for the strikethrough since this is no longer available. We highlight this, click on Strikethrough, and we now see the line in between here. The next section is for the early bird, which is also going to be in a paragraph. We'll select this, make it bold and also centered. Hit Enter, add a new block of a paragraph. This is going to be on sale now. Make sure this is centered too, highlight this and we're also going to change the color settings to be green, since this are now on sale. Just like before hit Enter and we can add our third row. This is also going to be a paragraph, and a text of 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 had in also a paragraph, we'll have the text of standard. Let's highlight this, make it bold and also centered, hit Enter. This is going to have a date when this standard tickets are available. I want to say after the 20th of August centered this, hit Enter. The final piece is also going to be a paragraph with the centered text of 49. Let's click on the preview and check all of our changes and looking how we want them to. We have the two sections from before with the separators between each one, we have the image gallery, all of our headings and also the tickets info. Once you are happy with this design, would go back to the editor, click on Update, and all of the changes will be saved. 16. Music Festival Project: Widgets: The theme which I've chose to use for this project, along with many others, supports add-in widgets. A widget is basically a block of content or feature which we can add two parts of our theme. The themes author sets exactly which parts of the theme we can add a widget to, and then we could drag various widgets into these areas. Back inside of our homepage, any screen which we used in the last video. If we scroll down to the bottom, we have the footer widgets on the left. The author of this theme has allowed us to set how many widget areas we want in the footer. The default value is free, meaning our footer is split into three sections, where we can add content blocks. Remember also we had the layout options including sidebars. Well, our widgets can also be added to a sidebar 2 along with the footer areas. We can do this if we click on the "WordPress" link that goes back to the dashboard and then go down to appearance, and then inside here we have a widget link. This page has two sections, on the left-hand side, we have the available widgets where we can add things such as a calendar, a menu block, we can add a search box, and also things related to our blog, such as comments, and recent posts. Here we can see all of the areas which the themes all for hazards, such as the sidebar and the footer areas. All of these areas can be customized, and I'm now going to add some widgets to the footer. The footer widget one is the first block of content, which will be on the left-hand side. I'm going to add to this a text-block by dragging this over and then dropping this into our section. Inside here we're going to add some information about the VIP tickets, so I'm going to say go VIP. Then some text inside of the editor, so I'm going to say "Upgrade to VIP" and enjoy your weekend even more. After this, I'm going to add a list, I'm going to say "Exclusive VIP only bars," "Exclusive toilet facilities," and also the camping area. Close to main stages, click on "Save." Let's now close this down and we can get to work on our footer widget two, inside here I'm going to drag over the content block 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 as five, and then the text off keep up to date with our block. We can also add the date if we choose by clicking on this and then say this section. Well, the third widget area I'm going to add a sound clip from last year's festival. We can do this with the audio widgets by dragging this over. I have an audio clip saved on the desktop just here, you can download one if you like, or choose any other widgets. This audio clip needed a license, so I've not included this as a download with the course. We can again add a title, I want to say here, a sample from last year. We can add audio and want to drag this into the "Media Library." Click on "Add widgets." Then save this. Remember that by default, there's three separate areas in the footer, so now these are added. I'm going to the project and then refresh, go down to the footer section, we have our list here. We have our one blog post which has been created, and this is also a link two. We also have our audio clip, we can start this off, and this is a fully working audio player. Our first project is now completed and we have a nice-looking project in a very short time. This is also fully responsive by default, if we shrink the browser down, It will also look good on all screen sizes, including a drop-down navigation menu. In the next project, we will go a little deeper into WordPress, where you'll build your very own blog. We will also learn about new things such as menus, users, comments, and so much more. 17. What we will be building: Welcome back to this brand new section. We are going to be building a new project in the upcoming sections, which is going to be a web development blog project. You can, of course, tailor this blog to be any subject or theme which you choose. But the purpose of this project is to learn about some new WordPress techniques, such as adding different pages, working with menus, working with our blogposts, updating, editing, and also how we can work with different users, and also the permissions and the roles which each user has. Let's take a look at what we're going to build in the upcoming section. This is going to be the blog project, which we're going to create 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, and also different content. As you can see up on the top, we're going to have a slider which is going to have different header images. Below this, we're going to construct our homepage using various widget areas, and 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 call to action section, recent testimonials, case studies, and also a featured area. We're also going to make use of widgets to create this footer area. We're going to take a look at lots of different customizer options along with our menu at the top. We're are also going to add a blog section which is going to be on its own dedicated page. We can then click through on any of these blogposts to be taken to the full blogpost. We're also going to take a look at how we can use a plugin to add a contact form. Along with various other subjects such as search engine optimization, backing up our site, creating different menus, managing users and permissions, along with the comments for our blog. This is what we are going to be creating, and I'll see you in the next video where we'll begin to set this up. 18. WordPress Blog: Project setup: We're going to set up our second project, pretty much the same as the last one. I'm going to be using a local to setup this project, but you can also use MAMP if you prefer. All you need to do is follow the instructions from the first project, you can follow exactly the same steps if you're using MAMP, or change the database name and also the project name along with any login details if you prefer. I'm going 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. Once called mine, the webdev- blog. Continue to stick with the preferred environments. We can set the username and password for 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 Outsides. Give us a few seconds to get up and running in. Males need to enter your password if using a mark for the installation and to complete. Once this is up and running and we have the green icon just next to it, we can then click on View sides, just like we did for the first project and also open up the admin. I'm going to login as an admin. We see the now familiar dashboard. I'm going to go ahead and start with the appearance and then themes. Then let's add our theme which is going to be called spacious. Click, Add New. Do a search for spacious. This is the one which I'm going to use, install and then activate. The theme is now set to default over to the project tab. We can check everything has been 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 maybe different inside the dashboard. If you are completely new, I would recommend that you stick to the same themes as we used during the course. If you're theme has taken effect just like this, we're going to now move on to the next video and take a look at some sample data. 19. WordPress blog: Importing sample data: Now we have our basic theme installed. We need to now see what it looks like with some content. At normal, we just have some very basic blog post content, which is provided by default with WordPress. We're now going to see what this theme looks like with some additional content. One way of doing this is to write lots of different blog posts, lots of different pages, and also lots of different media and content. We'll of course be adding our own posts and pages and all the information which we need but a different way is to use the WordPress test data. This data is used by many theme developers and also the WordPress team when reviewing a theme. By using this test data, we make sure that we have all of our angles covered, along with sample blog posts, included things like images, comments, pages, and tags. We need to see all this content into our theme and make sure our theme is ready for all of these different types of data. Professional and publish themes on FEM forest and WordPress.org should have already been tested before approval. Let me pull this sample data and see how our theme looks with some more content. Let's do a search for WordPress theme unit test. This is the link we just need here, which is codex.wordpress.org/theme_unit_test. Just under the set up here we can download a copy. I'm going to right-click and then save link as and then save this onto the desktop with the default name. Once this has downloaded, we need to go back over to our Dashboard where we can now import this data. We do this in the Tool section and then to Import, scroll down we have this WordPress link just here. As we see here, we can use this to import various pages and posts and also allow sample data includes all of these things. We can just click on " Install Now". With this installed we can then Run at the Importer where we can provide our new file which would just downloaded. Here's our file one we saved on the desktop. Click on our "File" and then "Open" this up "Upload". Since we are importing things such as blog posts, we can also assign a certain user or a certain author 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 it has finished, we should then see the all done message. Back over to our project hit "Reload" and we now have a lot more content to work with. Very occasionally, sometimes something will be missing, such as some images but don't worry about all of this. This is just some sample data to work with with our project. We see the blog post start displaying only homepage since this is the default setting. We also have various different pages. We have drop-down menus, we have comments, we have different Categories and Tags. This gives us a good indication of how our site will look once we have a lot more content. In the next video, we're going to look at how to add our own blog posts and also how to update existing once to. 20. WordPress blog: Adding and updating posts: Welcome back. We're now going to look at how we can add our own blog posts and also how to update existing ones. In the last video, we added all of this information by pulling some sample data which included lots of different blog posts. This is great for seeing how things will look in our theme. But of course, we also want to add our own blog posts too. To do this, let's go over to the dashboard and then if we head over to the post, we'll have the option to view all wall posts and also our new UD categories and 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 go to all posts. This gives us a list of all the blog posts which are being pulled in where there was sample data. We have the blog post title. We can hover over this to edit and also remove this too. We can see which offer has been assigned. These are also pulled in from the sample data. Pull the author we'll be ourselves when we add our own blog posts. We can see the categories which has been assigned to this post and also any tags too. We can also see if any blog posts have any comments. This particular one has one comment assigned to it and we can also click on this to be taken to the comments. We can see the dates when the post was published and we can also see that this particular one here has been scheduled to a later date. When creating a new blog post, we can either publish it immediately or we can schedule this for anytime in the future. Let's go up and we can add a new post either here or by clicking on the new post just here or also from the sidebar too. Click on this and then we are taking it to the Gutenberg editor just like we used when adding a new page. To begin, we add the blog post title. I'm going to add my first blog post and then hit "Enter". We then have access to all of the blogs which looked at in the pages in the early sections. We can add paragraphs, images, audio clips and also lots of different layouts. Just structure our blog exactly how we wanted to. To add some content we want to add some sample text from Lorem ipsum. Let's do a search for Lorem ipsum. If you've not used this website before which is lipsum.com, this is simply a way to generate some sample text that's for blog posts or pages. I'm going to go for five paragraphs. Click "Generates" and then we have five paragraphs or text which we can copy. Command or Control C. Back over to our post and this defaults to a paragraph. We can paste this in and you can see that each one of these has its own paragraph section, so we can edit these individually too. We have some familiar options from the last sections where we can align our tags. We can make it bold, italic. We can turn parts of it into links and we also have the color settings on the right hand side. Another useful thing we can do if we have a really long blog post is to break it up into multiple pages. We can do this again with a block. Let's go for just in between here. We can have a page break. Then this will split our blog post into two separate pages. Then we'll move you this inside the browser we'll have page one and two at the very bottom and we can click between these two different pages. We also seen before when we looked at the list of different blog posts. That's if we click on document here, we have the ability to assign this blog post to different categories and also different tags. These are some of the categories which are being provided with the sample data. We can assign them to any of these or we can also add our own category. Let's go for custom and we can check this to add this to our blog post. We can also do the same if we want to add tags. For example, let's go for news and this and we can have as many different tags as we would like. We also have the permalink which is the direct link to our blog post which you can click on inside the browser. We also have the featured image which we looked at when adding pages and we'll take a look at this very soon. They excerpt is a shorter or a preview of our blog post, this can appear in our list of blog posts as a short version which we can click on it to be taken to the full version. If we don't add this in WordPress we'll then revert back to the start of our blog post and use this as our shortened version. Below this, we have the option to enable or disable comments on our post too. Its theme also allows us to select different layouts and also place a sidebar alongside our content too. Just like we mentioned before, we also have the options to make this published or we can schedule this to a later date. Let's click on "Preview" and take a look at our blog post. Click on "Publish". We can then go over to our blog page, refresh and our blog post is just here. Even though this is the most recent, we don't see this at the very top. This is because with the sample data we'll have a sticky blog post included too. A sticky blog post means that this one will stick to the very top of our blog page. If we go into this we're then taken into the full version. We can also edit this blog post with the link up at the top, then over in the sidebar we have the option to stick this to the top of the blog. We can uncheck this, click on "Publish" and then head back over to our site by click on the WordPress icon and then visit site. This now means that we don't have any sticky posts and our recent blog post is now added to the very top. This is the shortened or the excerpt which we mentioned before. We can click on this and then be taken to our full version. We can see our tags. We can also see that this post has been split into two separate pages. In this blog post, just like any of the other ones can be edited with this link up at the top. This is how we can add new blog posts and also edit existing ones. One of the ways we can really bring our blog post to life is by adding images and different types of media. We're going to take a look at some resources 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 far we have our blog post with some content, which is great, but we can really bring it to life by adding media such as images, audio, and videos. 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 post just here. Scrolling back to the very top, we can click on our blog post, and then we can edit this at the very top. At a featured image, works just like in the first project when we added it to a page, but this time the featured image will appear on the blog post listing. Click on "Set Featured Image" where we can upload our own file or take advantage of the media library. We now have some images which are provided with the sample data, so let's click on any of these. I want to go for this one just here. Set this as the featured image, "Update", and then we can also preview this. As you can see from the full version of our blog post, the featured image is not included on the section. The featured image for this particular theme will only display on the blog page listing, but what if we wanted to add this image to this page too? 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 "Edit Post", and we can also add a image as a block. Down below this section, I'm going to add a new block. Let's go for the "Image", where we can upload or access our media library. We can choose any image of here. I want to go for the same one. Once this is highlighted, we also have various options. We can move this up and down, just like we come with any of the block. We can replace this image, we can link this to a different page. Over on the right, we can also change the size of the image too. Along with these single images, we also have the option to add a gallery too, just like we did in the first project. Let's go back to the media library, and we can 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 can go back to our blog post, "Refresh". Our images are now displaying on the page. We can also add video clips too just like with any other block. Let's click on the plus symbol, and we go for a video. Let's search for this. This is in the common block section, so we can go to the media library if we have a video clip, or we can upload our own. I want to go over to pixabay.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". The small one is fine since this is just a blog post, "Download". Back on to the edit page. We can click on the "Upload" button, and select our new video clip. Mine is saved inside of the Downloads. Click on this and then open. We have some video settings in the sidebar if we want the video to loop, if you wanted it to be muted, and also if we want the controls to be visible. Click on "Update", and then "Preview". Scroll down, click on "Play". Leave this but it ain't fully working video clip. We can also add some audio clips in exactly the same way, so let's add a new block. This time, let's go for "Audio". Once you grab a audio clip from bensound.com, we do need to add 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 we can use this audio clip for free as long as we add a credit to bensound.com inside of the description. We'll have an example of how to attribute the author at the bottom. I'm going to copy this, download the audio clip. Then if we go back to our post, and then into the edit section, we'll have our audio block. We can again select this with the upload, open this file. If we then click on the "Replace" dropdown and then go to the media library, we can then select our clip, and then add the attribution into the description, click on "Select" to now save this, "Update", and then preview our post. Down at the bottom, we can click on our audio player, we can play and pause along with adjusting the audio levels. The final thing I want to show you to include media is to include it from a URL. Currently, we've included things such as audio and video by using the Upload button. We've also included images from the media library, but we can also link to a URL. If we go to Wikimedia Commons, for example, this includes lots of different images and media which we can include in our projects for free. This has a image of the day. I'm going to click on this, and then right-click, copy image address, and then if we go back to edit post, this time when we add a new piece of media, so let's click on a new block, select the image. Instead of uploading a new image or choosing from the media library, we can also insert from URL, paste in our link, update our post. This is an alternative way of adding some media into our blog post 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 user in our blog, 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 users option on the left. This users option has the ability to display all of the current users which we have for our project. We can also add new users, and also check out our own profile. I'm going to click on All Users, and see all the users which are available, which is been included with our sample data. At the top we have our self, we have our username. We don't currently have a name set, but we can edit this if we want to. We can see the e-mail, and also the role of administrator, this role of administrator basically means we are in complete control of this full project. We can basically add, edit, or delete any type of content which we want for this project. Below this we also have few subscribers, which have been added with the sample data but since we are logged in as the current administrator, we can also edit the particular roles for any user. All we need to do is to go into that profile, and change the role just on here. We can also edit any of the rest of the information too such as the e-mail, and then update the user just here. Let's go back, along with this role of administrator and subscriber, we also have different roles such as contributors, authors, editors, and also a super admin too. Let's go over to Google and do a search to take a look at these in more detail. Then do a search for WordPress roles and capabilities, and this is the link we need just about the top here, on the WordPress.org website. We see here the WordPress has six pre-defined roles, we have the super admin, the administrator, editor, author, contributor, and subscriber. Each one of these roles has access to different permissions, which allows a certain level of access to our site. Look at the very top we have the super admin, which is the administrator when we use a WordPress Multisite. A WordPress Multisite is a network of multiple, WordPress websites, all using the same WordPress installation or the same dashboard. We're going to look at this in more detail later on in the course. For the 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 our blog the top level of privilege is the administrator, and this is someone who has access to all of the features of our site. The next step down is the editor, which is somebody who can not only publish and manage their own posts, but also posts of other users too. After this, we have the author who can publish and manage their own posts only, but not the posts of other users. A 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 we have a subscriber, which is a general user of our site. They can only manage their own user information such as their name and e-mail. They have no capability of adding a blog post, a new page, or any content to our site. Back over to the dashboard and into the user section. We already have our administrator, which we created when we setup this project, and also the two subscribers from the sample data and now we're going to go ahead and add our own user. Click on Add New up at the very top. I'm going to go for a test user, e-mail, [email protected] We don't need to a website inside here, we can also add a password. I'm going to keep this as test too for simplicity, of course don't do this on a real website. We can confirm, and 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 up at the very top, let's logout as the administrator, and then we can log back in with our test user. The e-mail was [email protected], the password, now we're logged in as a subscriber. We don't have any of the dashboard options on the left. We only have access to our own personal profile. We can change the color schemes, and also our personal information. If we now head over to the actual site, or the front end of our project, let's go into one of the blog posts. You can see we still have full access to all of the information, because we want anybody to actually see the content on our site. However, we don't want to give anybody full access to adding content. Let's see what happens when we add a comment. Let's add a comment of hello, post this comment, and we see the message of, ''Your comment is awaiting moderation.'' Let's now log out as our subscriber, and we can log back in as our administrator. At the original username and password, to be taken back to the dashboard as the admin. You should now see a number right next to our comments section, which is the number of comments which we need to approve. Up at the top we see that it 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 that one of the pending comments is this hello comment, which we are did it from our test user. I'm going to select the checkbox at the top to select all. Then inside of the bulk actions we can click on Approve, and then apply this to all four of these comments. Let's go back over to our site, and back into this very first blog post. Go down to the bottom, and this comment has now been approved. By default if a visitor visits your website, and signs up as a new user, they will automatically have the subscribe role by default. We can change this, however, down in the dashboard settings, and then go to General. Inside here we have a option of New User Default Role and we can changes this to be anything other than subscriber if we have a website which has this need. Generally though for most types of websites, a subscriber is a sensible role to go for as 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 settings section under discussion. For example, we can restrict comments to users who are logged in. We can set how many levels deep we want our comments to be nested. We can receive e-mails when somebody adds a comments, and also many other options too. There we go. This is how we can manage different users on our website, how we can change permissions of users, and how we can safely control the comments being posted to our blog. 24. WordPress blog: Adding pages: Up to now, in this project, we've been mainly focusing on our blog, and also on blog posts. In this video though, we're going to focus on adding some custom pages. We're going to go ahead and add a About Us page and also a Contact. This is all of the links at the very top here. If you go over to the dashboard and into the pages, we see a list of all of these different pages. To give us a clean start to work with, I'm going to remove all of the sample data and we're going to add our own pages into our theme. To do this, let's click on the checkbox at the very top. Under the Bulk Actions, we can click on "Move to Trash", and then apply this to all of our pages. We also have some on the next page, so we can do the same to these last ones too. Start new upon the very top on the first one I'm going to add is going to be the About Us page. If we now go to our blog, reload the homepage, we see that our menu options have now disappears. This is because we currently have no pages to display. We'll fix this very soon. First of all, we can add a page title, this is going to be About Us. Then we can add any different blocks just like we've looked at in previous videos. I'm going to go for a paragraph to begin with, and we can add some simple text about us. Again, I'm going to go to Lorem Ipsum. We can generate some sample text, we can also fill in some details about yourself too. I'm going to copy the sample data. Place this in to our page. Even as with some content to work with. Over on the right, we have all of the usual options, we have for our page. We also have the page attributes where we can set a page templates. Scrutiny we set to the default template for the themes offer has also provided some layout alternatives. Page templates are special template files which we can use on either a single page or we can apply the same template, many different pages to, to apply a consistent look and feel across our sites. For example, we can have a specific template for a 404 page, and then have a different multi-use templates available to use on our About and contact pages to keep our layout consistent. We will look at templates in more detail soon. Also in particular, when we create our own custom theme. We can also set the display order of all pages to, and also select the layout just below. We can select if we want a sidebar, which side we want the sidebar to display, or if we want no sidebars at all. These all of the options which are available with this current theme. If we go back to WordPress dot org, and enter the themes section. Inside here, I'm going to do a search for spacious. Let's take look at our current theme. If we scroll down to the different tags and also the description, we can see how many different layout this theme has. We can see how many widgets areas, and also the options for our sidebars too. We did touch on this earlier when we looked at how to find our themes draw projects. But hopefully now this information will make a little bit more sense. Now, you understand a bit more about WordPress. Back over to our page. Let's click on publish using the default layout. Into our project and refresh the About Us page has automatically been added to our menu. Let's go into this. We'll see all of our sample data just here. If we go back to the edit screen and then down to our layouts, let's take a look at some of the examples here. Let's go for the no sidebar, and then the content in the center. Update this post and reload the page. Leave no content. Now, in the center, back over to the dashboard, we can create our next page which is going to be contact us. Back to the dashboard, add new. The title on top of Contact Us. This time rather than add in the sample data, I'm going to add a another list. Let's click on the list block just here. Let's just add some sample lines of address inside here. One let's just copy this and paste this into a few more lines. We will come back to this Contact Us page very soon, where we're going to add a contact form. Let's click on publish, confirmed. Back to the dashboard on the third and final page and go to add is going to be for all blog. This is going to be simple. All we need to do is to hit publish and make this available for later on where we can assign our blogposts to this particular page, reload our project, and now we have our free pages up at the top, which had been automatically assign it to our menu. It's this navigation menu, which you are 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 homepage, which was added with the sample data. Also each time we add a new page such as the About Us and also the Contact Us page these will automatically added as links into the menu. When using a pre-built theme and also including a sample data, sometimes things like our menu disappearing, can just happen behind the scenes. However, we want to learn all about WordPress. Let's now go over to the dashboard and take a look at how we can add our own navigation menu. Head over to the dashboard and inside of the appearance we have a menu's option just here. We see some of the menu links are in red and we also have a error 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 are now going to go ahead and create our own menu to replace this one. We can do this by clicking our link just here to create our new menu. 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, create our menu and then inside of the settings we have some options. The first one which I'm going to check is to automatically add new pages to our menu. This is the reason why the previous menu had our free links for the free pages which were created. I'm going to make this the primary location therefore, this will replace the one in the top navigation section. We'll also create a footer menu in just a moment and then we need to add what pages or links we want to include in this menu. Over on the left, we can add our menu items, beginning with our pages, I'm going to add all three of our pages which we created. Click "Add to Menu" these now appear on the right-hand side. We can add direct links to our blog posts or we can also add custom links to different websites or different pages on our own site. All we need to do is to add the URL inside here and also the text which will appear as a link in the menu. Below this, we can also link to any categories which we created too. This will provide a direct link if we wish to add these in. Let's go ahead and save this menu and since this is in the primary location, you should now replace the default menu which we had in from before. We can just check this is our own rather than the one from the sample data. Let's go to Contact Us, click on the drop-down, we can remove this. Save our menu, reload, and now we see our two links up at the top. Let's re-introduce the contact page, that's a menu. We can also rearrange each one of these links by dragging them or we can make these a sub item just like this. A sub item is a drop-down, which means that will links and not directly visible in the menu. Instead, if we save this we should now after hover over our link and then get the drop-down links. I'm going to restore these by clicking on Out on the blog and also the same for Contact too. Let's also create a new navigation for our footer area. At the menu we just have this copyright section, so let's create a new menu to go in this location. I'm going to call this the footer menu. Create this click on the Footer Menu as a location. We can also change this with the locations tab just here. As an example, I'm going to add our categories to this menu, so let's select all of these. Add these to our menu save this, reload our projects. These links are now at the very bottom of our footer. If we want to remove any of the existing menus, we can go back into the menus link and then inside of our drop-down we have a list of all the menus which are being created. For example let's go for social menu, select this all we need to do is to click Delete Menu down at the bottom. This has now been removed from our site leaving us now with our custom menus and 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. We're now 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. Go ahead and download this if you want to use the same images as me, or you can also choose your own too. Let's begin by going into the media library and drag in over these images. Dashboard and media. We can drag over the full images folder. Of course, for real production sites, make sure that the alternative texts and the rest of the descriptions are filled in correctly. We can now use these over in the customizer. Let's go back over to appearance and then customize. We'll have the familiar site identity which we used in the last project, where we cannot change the site title. I'm going to do changes to be Chris Dixon's blog. In tagline, 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 development. We also have the option to select a logo too, which is going to go along side our site title. Let's do this and go into the media library, I'm going to select this one and we can skip the cropping so it stays in the original size. We also have the option to change the logo for retina devices too. 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 this site title. This is because we need to select this in the options just below. We can only have the header text only. I'm going to switch between the head logo or even show both. The site icon is the one which appears in the top of the browser, just like in the last project. I'm going to go for this one, just here, select this, and then publish our changes. If we go back to the main customizer menu, we also have 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 our theme, such as the header tags and also the background color. I'm going to change the color. Let' s go for any random color inside here, a little bit lighter; this is fine. Don't worry too much about this because it can be changed at a later date. Also later in 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. Back to the main options below this we have lots more options too. All of these are going to be covered in more detail very soon throughout this section, and also included some dedicated videos. If you scroll down to the design section, we can make more changes to the layout of our blog. About the very top, we can choose a default site layout, which is reflected throughout the whole site. We have the box layout at the top, which includes the background on the left and right-hand side. We can also make it the full width to, so we don't see the background color on either side. Since we've just set the background color, I'm going to leave this as the box layout and then go back to our design section. We also have some layout options just below. To begin, we can set the default layout, which declares if we want a sidebar to appear on either the left or the right or not at all. I'm going to remove this sidebar from the homepage and also make the blog posts more narrow and also centered. Let's publish this. If we now click on any of these blog posts, we now take into 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 you've chosen without the sidebar, will apply to things such as the archives and the search. We'd also have a full control over this single post view. If we go back inside of this section just here. Inside here, if we wanted to also remove the sidebar, we could also choose a different option, boots. I'm going to leave this sidebar for this view. We can also change the default layout for all other pages too. Also if we go to the blog post displayed side and also back to our homepage, we also have some more fine control over how this will look. We could only have the large image. We can also change this to be a smaller, medium-size, an alternative or also display the full content too. This will leave us with a really long homepage. I'm going to change this back to the large size and then publish. You can also override any of the colors which you set from our theme. But I'm happy with the green color which we could only have. This theme also provides a dark option too. I want to publish this, leaving this as the light theme. If we go back to the main customizer, will also cover some of these other options very soon too. But just above this, we also have the option for some additional CSS. CSS is the standard way to style and layout a webpage. We can also apply our own custom CSS here. If you know a little CSS, you can apply inside here and this will be saved into your theme. Inside here, if we want to target a section which is using a div elements, we could then set the text color to be red, for example. This will affect all of the div sections in our theme. I'm not going to apply any custom CSS since this is completely down to personal taste. But it's worth knowing that this option is here if we need it. Plus laid down at the very bottom, we also have these three different icons. Currently we're customizing the large desktop size, but we can also see how our changes we'll look in a tablet or a mobile sized screen too. There is still a quite a few options we have not yet covered in the customizer. We will look at these in more detail in the upcoming videos. 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 header. Some of these options will take us back to the customizer so they are effectively shortcuts. The same if we go to appearance and background, this is also a link to the customizer too. This is how we can easily customize our website without needing any coding knowledge. We will leave this video there because we are going to be covering the rest of the options as we move through this section. 27. WordPress blog: Adding header images: One of the options we have in the Customizer is the ability to add a header image. A header image is this large book and no part image which you can see at the top of the spacious theme. It's ideal for branding and also gives the user a feel for our site. Let's go over to the Customizer inside the dashboard, we may need to log in. Log in to the dashboard of our site, and this option is inside of the Customizer. Appearance and Customize, and then we need to go down to the Header Media section. This is just in here. This thing gives us the option to add either a video or a image into our header. We just add the video in the same way. We click on this and then we can select one from the Media Library. I want to go for the header image, click "Add New", and then choose one from the Media Library. I'm going to go for this one, select and crop. I want to skip the cropping for this one. This automatically adds this to the top header section of our projects. If we scroll down, we can also see a button to randomize our headers. We can go ahead. I'm going to remove these two previously used ones then add a second image. Select this. I'm also going to skip the cropping, and we now have two images uploaded. We can click on "Randomize" and then publish our changes. Then each time we reload the homepage, and we can keep trying to reload, and then we see a random header image. By default, this header image is placed at the very top of our site, above the header links and also the logo. We can reverse this order if we want back over in the Customizer. All we need to do is to go back to the main Customize Options and then go down to our header. Inside here we have this option for Header Image Position. We can switch this to be Position Below. Publish our changes, and this moves the image down below our links and title. Just to recap, this is how we can add a header image to our project, this is how we can change the position, and also how to upload multiple images, which will be displayed randomly. 28. WordPress blog: Adding a background image: Earlier on in this project, we set the background color, which is on the left and right of our site. We can see this because we set 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 site. 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 site more personal. We can also do this inside of the customizer. For this option, we need to go down to the background image. Then we can access our Media Library. Supplied with the course images is this gray looking texture, which is bg.PNG. Select this. We can see if we'll look closely at this has a slight texture. Let's make our background a little bit different. This simply replaces all of the colored section which we added earlier and leaves all of the contents in place. We can also change the preset and fine control of how our image will display. For example, if want the image to be stretched and fill the screen, we can go ahead and do this. But you can see from our current background image, that the texture is quite a small image, leaving it looking quite stretched. We can also set the image position. At the moment, this is placed on the top left corner, and this will stretch out to the right and bottom. We could also center this and 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 can set the starting position, although it doesn't matter for our case. There is also a checkbox down at the bottom. We can set if we want this image to scroll with the page. It's quite hard to see, but if we scroll down, we can see by the texture to this will scroll with the page. However, if we uncheck this, you will know is that the textural stays in the exact same position and only the content in the center will actually scroll. Once it is checked, hit "Publish". Now our background image is now set, leaving us with a nice-looking texture behind all of our content. 29. WordPress blog: Plugins & social media integration: WordPress plugins that are really easy and effective way to add extra features and functionality to our websites. If we go to wordpress.org and then into the plugin section, which is also available with this link up at the top. We can see that currently there is over 56,000 different types of plugins available to include in our sites. There's plugins 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. There's plugins to add things such as starts, contact forms and even ones to transform your site into a WordPress e-commerce store. We're going to include a lot of these plugins as we progress through the rest of the course, but for now we're going to include some social media sharing icons into our project. Let's go over to the dashboard, we have a dedicated plugin section where we can see the plugins 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 plugin with this button just up here. We can see some of the featured and also recommended ones, or we can do a search for our own. I want to do a search for social and add some social media icons into our site. It's worth noting when adding new plugins to our site, that we should also look at the last updated section and also check that this is compatible with our version of WordPress. This is the one I'm going to go for by ultimatelysocial, all I need 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 and the first thing we need to do is to select which icons we want to include. I want to keep it simple. I'm going to deactivate the email and exit out this and we're going to go for Twitter and YouTube. You can of course modify this to suit your site, save this first one. Then 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 visit our profile, to followers, or also to tweets about a particular page. I'm just going to go for, follow me on Twitter add the Twitter handle inside here and then we can also do the same for YouTube just below. Save this and then the third required one, is the section on our site where the plugin will be displayed. We have the option of these icons floating over our site. Any of the pages we can set the position, so the top-right for example, the top-left, but do be careful that these may cover up some existing content. You may need to play around with these. We can select one or more of these. We also have the option to share these via a widget and just like we looked at in the last project, we can drag this widget area into any of the positions which the themes offer has set. I'm going to leave this as unchecked. We can also place these via a short code. Now a short code is not something we've covered yet, but this is a way of giving us a code which is in square brackets just like this and we can copy this and paste this into our editor. For example, a blog post, or a page where we want this to appear, we can copy this and just save this. Go over to all pages and then if we go into the about us, for example, let's add a new block, a paragraph is fine. Paste in our short code and update the page. If we click on preview, it will take us to the about us page and the short code has placed in the icons exactly where we've added these in our editor. I'm going to remove these, since this were just an example to show you how to use these. We can remove the block and then update our page, back into the dashboard and then into the social media section. We can finish off setting up this plugin, so back into option three, we can uncheck this, and we can also include these after our posts. One of the things to watch out for when selecting this option is we can only use the icons which have been preset. If once you use the icons which had been selected above, this is a feature which is only available with the premium plugin. I'm going to leave this unchecked and then places icon in the top-right. Save this and these are the three required options for the plugin to 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 site, reload and now we should see on any of our pages, we now have our Icons positioned in the top right. We can click on Follow, we then taken to our profile. The YouTube button probably won't work, since we've not added a URL, but you can go ahead and add yours into there if you like. This is just a first look at increasing our website's functionality by using WordPress plugins. We will use many more plugins as we progress through our projects in this course. But for now we're going to move on to setting up our homepage. 30. WordPress blog: Home page setup & widgets: At the moment, if we visit the home page for our site, we see a list of all of the latest blog posts. As we already 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 taking advantage of the template, which is provided with this theme. This template will also allow us to create widget areas so we can construct this home page exactly how we want to. We can also move our blog to this blog link up at the top too, so it has its own dedicated page. If we take a look at this spacious theme, we can see an example just here of how our Homepage will look. This includes a widget area and also a widget which is going to link to three dedicated pages, which is going to showcase the services which we provide. I'm going to add three new pages for web development, mobile development, and also logo and branding services, where you can create [inaudible] any different topic if you prefer. To get started, we need to create some new pages, we need to create three new pages for our services along with a new Homepage too, so let's get started. Over in the pages section, we'll first add our Homepage. All we need to do is to add a page title and then indeed document section, we can select our template. Rather than the default template, we're also provided with this business template too, which will allow us to layout our Homepage, just like we've seen on the example before. We're going to do this by taking advantage of the business widget areas, which we'll take a look at in just a moment. All we need to do for this page is click on Publish and then we can create our three extra pages, click on to Add new. The first one I'm going to do is for Web Development Services, we're going to add a title. I'm going to say Web Development and also Design, and then just below this, I'm going to add a simple text block. You start with some content, that is page, [inaudible] responsive web designs using WordPress. You can add more content if you prefer but this will give us something to work with, and then we can also set our featured image for this page, which is the WordPress logo and set our featured image. Click on Publish and confirm. This featured image will show up on the Homepage, alongside the page title. We can go ahead and add two more. This one is going to be for branding and also logo design. We can set the featured image, I'm going to choose services dash design and quickly add some text just below. Let us take care of your brand and needs and then update and Publish this. The third and final page I'm going to add, I'll go back to Add new, is going to be for a Mobile Development Section. This is going to use a featured image, which is the Android icon. Set this, and then some text below. Let's go for [inaudible] customer mobile applications for all devices and then Publish our third page. Now we have our Homepage and also these three extra sections, which are going to construct our Homepage. Let's now go back to the dashboard and then into the settings and read in. Inside of here, we can set the Homepage to be home and also move all blog posts to our blog page, Save this, refresh our Homepage, and now this is an empty page for us to work with. Click on the Blog, our posts have now moved. Now, we can construct our Homepage using the widgets and the widgets area is provided by the theme, so appearance and then widgets. Inside here we have the familiar sidebar and footer sections, which we've seen in the first project. Now though we also have these business sections, which will go with the business template, which was selected for our Homepage. To begin up at the very top, we have the business top section and this is the first widget area, just below our header image. Inside here, I'm going to link to our three new pages and we can do this with the TG Services. Let's drag this in, we can select multiple pages. I want to go for a Web Development, a Brand Name page and also the Mobile Development, Save this and let's see how this looks on the Homepage. We have our links to our three pages, we can click on these and we're taken to our page. Let's go back. The next thing I want to do is to add a call to action section, which we're going to link to our Contact Us page. If we go into the same business top widget, we can drag over any new widgets from the left-hand side. I'm going to go for the call to action widget and place this just below the services. We can add the main text, which is going to be needed to speak to somebody about your ideas. We can then add the text which we want to add into the button, I want to say, get into [inaudible] today. This also needs to link to a page too, so I'm going to go to the Contact Us, copy this link, paste this in and Save this widget. If we now reload our Homepage, we now have a call to action section, click on the button and we're taken to our contact section. Back over to our Homepage, we're going to add some new widgets just below this top section. Click on the middle section and we have the option of the left and right. On the left-hand side, I'm going to add a testimonial, and we can do this with the TG testimonial widgets. We can add a title. I want to go for recent testimonial, the description. I'm just going to add some sample text into here. Let's go to Lorem ipsum. All I need is one paragraph. Generate this paste this in and we can add a name and also a title. Save this, and this is our left section now complete. If we refresh the homepage, we'll have the testimonial and also the space on the right-hand side. This right-hand side is taken up by the middle section, and inside here we can set a featured page to do this, we have a widget called featured single-page. Let's drag this one into our widget area on the right-hand side. This is going to allow us to showcase any particular page which we choose, I'm going to go for Web developments and also add a title. 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 add this after the title. Save this.. This is the middle section now completed. We also have a widget for the very bottom. So this is going to be the full width of our page. I'm going to use this to create a section which is going to include free case studies. We need to include the widget called featured widgets. Let's bring this in with the title of case studies and the description here we take a deep dive into recent projects to show you what goes on behind the scenes. Below this, we can then select three different pages. If you wanted to econ, create three separate pages to link to a real case study. But for this example, under continuous select three pages which were already have. Click on save and then refresh our homepage. This now gives us a link to all three separate case studies. We can also click on these to be taken into the full detail. This is now our homepage 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. Let's remove these free extra pages by clicking on the drop-down and then remove for all three of these. Then finally rearrange the order. So the homepage is first, save our menu. This should now take effect in the navbar. Our homepage content is now complete by using widgets. We're going to stick with the subjective widgets in the next video by creating a footer section. 31. WordPress blog: Creating the footer: Welcome back. We're now going to focus on our footer area and also make use of our widgets again. To do this, we're going to again go back to the appearance and the widget section and take advantage of the footer sections which are being provided with this theme. We have four footer sections which you can see over on the right-hand side, and these are the four footer sections from left to right. Just like earlier, we can drag 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. Starting off with the sidebar one, which is the piece of content on the left-hand side. I'm going to drag over some pages into this section, which you can see is a list of our site pages. Let's drag this into our first section. We can also get this a page title, but I'm going to leave this empty. We can also sort this by various things such as the page order and ID. But I want to leave this as the default title. We can also exclude certain pages too by the IDs. But I'm just going to leave this as default. The sidebar 2, which is the second piece of content, I want to drag over a calendar. You can completely make this your own and drag in different types of widgets if you prefer. This calendar is a widget which will display the dates, when our post 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 a sidebar 3. In the third section, I'm going to drag over these social media icons, which are being added with the plug-in which we installed. This is ultimate social media icons. Drop this in. We can edit the title, and also these settings are available from the plugins page, which we looked up previously. The sidebar 4, if we go into this, I'm going to add the recent comments which have been added from our blog posts. The widget is recent comments, and the most recent will appear at the top. Again we can give this a title and also restrict the number of comments which will display. I want to leave these as default since I'm happy with the settings. These have been automatically saved photos, so all we need to do now is go over to our project, reload the page, and then go down to the very bottom. 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. We can also see by the highlighted dates, that 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 we've already created in the last video with our YouTube and 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 we go back over to appearance and customize, down at the bottom we have this footer link. This footer link will allow us to set how many columns we want to appear in the footer for all projects. Next up we're going to transform our header images into a spider. 32. WordPress blog: Adding a slider: Early in the course, we added some various images to our header. We also randomize these so a different image may appear each time we reload the page. In this video, I'm going to show you how we can use the same images. Let's incorporate them into a slider. We can 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. The first thing we need to do is to activate the slider. This is just a simple checkbox. We can click on this. Then we need to go back to our options. We have a second option just below, which is to disable the slider on the post page. I'm going to check this. Then we have the options to set our images. For our first image, we can add a image with the uploader or we can use the Media Library. I'm going to set the same images that we used before like this one. We can also set a title which will overlay our image, and we also have a Read More button if you want to link to a full post or a different page. Let's start with the title. We want to go for Mobile Development and then we can add a description just below. Let's say, from design to app store. We can change the default button text but I'm going to leave this as "Read more." I'm going to link this to a page. If we go into our site and then click on "Mobile Development," we then have our link to this page. Let's copy this link and paste this into our slider. Then we can do the same for our second image. Let's go for the same one that we had in the header image just before. The title this time is going to be for Web Design and Development. A simple description, let's say, WordPress development from the experts and also a link. Go back to our page and go for the Web Development and Design page, and also bring this link over too. Publish our changes, and we can see that our slider is now appearing, but we also see the header image too. If we want to edit this, we can go back to the main links or we can click on this icon in the corner to be taken straight to our header media. I'm going to go down and click on "Hide Image" leaving us just with our rotating carousel. Make sure our changes are published. Over to our homepage and reload. We see that we don't see the slide at the moment because we are in the Post page. Remember, we disable these inside of options with the checkbox just here. If we go back to our sites and then go to home, we'll see our slider is now working. We can also click on these two buttons just at the bottom to switch between these manually, and also click on the "Read more" button to be taken to the full page. Let's try the Web Development link too, and this also takes us to the correct page. This is how quick and simply it is to add a slider to our theme. Next, we're going to move on to customizing our Contact Us page by adding a contact form. 33. WordPress blog: Creating the contact form: When we added our pages early on in this project, we also added eight empty contactors. We just added some dummy lines here and we mentioned that we will return back to this page later on in the course and add a contact form which will allow a user to contact the site administrator. Like with most things in WordPress it is a vast array of different plug-ins available to achieve this. One of the popular ones and the one which I'm going to use for this project is a plugin called Contact Form 7. To install this we go over to the dashboard, make sure you are logged in and come out of the customizer and back into the plugin section. Click on "Add new" and you can even do a search for Contact Form 7 but currently this is in the popular tab up at the top. I'm going to install and then click on "Activate". Like with many plugins, this will leave a option on the dashboard so we now have this contact option, which we can click on to be taken to our contact forms and inside here we can see all of the contact forms which we've created for this site. Currently have this demo one just here rather than use this, I'm going to go to add new up at the very top. We can then start by giving this contact form a name. I'm going to go for contact page form. Then below this we have our form section where we can add various form inputs. Now we don't need to understand the language which is written 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 e-mail, the subject of the e-mail and then a message section down at the bottom. Right at the very end we have this "Submit" button, which will send the form to the site administrator. We can go ahead and add any different form inputs which we have available up at the top. We have inputs for our telephone numbers, standard numbers, dates, drop-down menus, check boxes, radio buttons, and so much more. I'm going to leave these default settings inside here and just add one more option as an example. I'm going to go for a checkbox. I'm going to add this checkbox, so the user can let us know how they heard about us. I'm going to add four different options. We're going to say search engine, recommendation, used previously and other. The first thing to do is to check if this is going to be a required field, meaning that this form can not be sent without this information. The name, we can leave this just as is and then we can add our various inputs options. We see here that we add one option per line. The first one is going to be search engine, the second one is going to be recommendation, the third one is going to be used previously and the fourth one is going to be other. I'm going to leave all the default settings. We can also add a optional ID or class through these element if we want to but I'm just going to click on "Insert Tag". Is it going to now insert our checkbox? As we mentioned before, we don't need to know any of this code, all we need to do is to click on any of these buttons above and we can add these in using this same editor. Now let's click on "Save" and once this is saved we now get a short code, which we see just here. This is another short code inside of these square brackets, just like we looked at previously when adding the social media icons. We can copy this and paste this into any of our posts or pages exactly where we want this to appear. Copy the short code and then we can go over to our pages, into our contact click on "Edit" and instead of this data just here, we're going to move this paste it in our short code and update the page. Back over to the front end of our site and we'll go into the contact, reload the page and our contact form is now displaying. We see all of these same fields, we have the name, we have the e-mail, we have a subject area, we have the four check boxes which we added our self, the message area, and also the "Send" button down at the bottom. If we go back into the WordPress dashboard and into the contact section back into our contact page form. Inside of here we also have some different options at the very top. We can click on the mail tab and inside here we can set the e-mail address for where our messages will be sent to. This can be the site administrator or the particular person looking after your website. We can also set the rest of the e-mail information for when we send an e-mail too. We can edit the subject, we can edit the from section and also create a message body. Inside the message body we can add personalized messages, we also have some variables too inside of these square brackets. We see here that the From section is automatically populated with your name and also your e-mail and we also have the subject on the subject line just below. Followed by the actual e-mail message, this message can be set if we go to the messages tab and we can edit any of these different messages which we would like. Such as the senders message was sent successfully, the message was failed, and also various other messages for form validation too. Finally, we also have the additional settings. We won't be covering any of these additional settings in this course but you can be taking it to the Contact Form 7 homepage by clicking on this link here and this will include some different settings which you can import into our project. This is our contact form now complete. Do feel free to customize this to suit your needs and also create different contact forms for different sections. 34. WordPress blog: Improving SEO: By default, WordPress is pretty search engine friendly by nature. However, like anything, there is always room for improvement. In this video, we will be covering a great plug-in and called Yoast SEO, which takes the core WordPress SEO to a whole new level. If you are unsure of what SEO is, it short for Search Engine Optimization. It is basically the process of optimizing our website to appear higher in the order of search engines. We can optimize things such as keywords, descriptions and also optimize our content, such as making our blog post more relevant to certain searches. This plugin is also going to help with things such as adding keywords and also making sure these keywords also repeated in our images or text. It can also help with metadata, which is information about our site, to make it more visible to search engines. It can also generate a sitemap too, which can be submitted to Google, along with so many more things. Let's head over to the dashboard and install this plugin. Then we'll go to the plugin section and add new. Just like the contact form, this will probably be in the popular section if we click on this. This is the plugin we need here, which is Yoast SEO. Click on Install. This is also combustible with our version of WordPress 2, and it's also been recently updated. Activate this plugin. We now have this SEO option inside the dashboard. If we click on this, we can see you can have any problems on notifications. This plugin will also have some options in our post and also our pages too. Let's start by going over to any random page. I'm going to go for Web Design and Development. Click on Edit. This plugin now leaves the Yoast SEO section inside of our page. The first thing is our focus key phrase. Now this is going to be the main keywords, you want to focus on for this whole page. I want scientists to web design. Below this we also see exactly how all page will look on a Google preview. We have the mobile results and also the desktop results too. Below this we have the SEO analysis. This is going to tell us what we're doing good on our page and also what we need to improve. First of all, down at the bottom we have a keyphrase length, which is good. We also have these keywords inside of our slope two, which is also good for SEO. Above this, we have 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 text, we can add our keyphrase of web design. Update this, now click on Update at the top. Now if we reload the page and go back down to our SEO analysis, this image improvement has now been removed. The next thing is the keyphrase in the title it doesn't contain a exact match. We have our match as web design. It's also warning us that we have this in a slightly different order. Let's change this around, so rather than web development and design, we can swap this around to be web design and development. Update this, reload, back down to our analysis. Now this improvement has been removed. Above this we also have some major issues. We can see it by the red indication on the left. The first one is the text length. We only contain eight words inside of our description. This is fine since this is just an example. But of course this is something which would need to be addressed when using a live project. It also recommends adding some internal and external links too. Along with recommending, our keyphrase is included in the first paragraph of our page's content. For live pages this is something we could easily go through and fix to make our webpage a lot more search engine friendly. We can also add a related keyphrase too, but this is only available with the paid version of this plug-in. We can also set a page or a blog post as cornerstone content too. This is to basically mark this piece of content on our site as the most important article or page. This is personal preference and also dependent on the type of site which you are making. Below this we also have an advanced section where you can update our SEO rules, such as if you want the page to be included in search results. We can also add it some advanced meta robot 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 Yoast documentation if you want to find out more about these settings. At the very bottom, we have a canonical URL. A canonical URL is a way to deal with any content which appears in multiple places on our site. For example, on an e-commerce store which sold t-shirts, we may have the same t-shirt appear in two locations. For example, it may appear at/shirts/awesome-t-shirt, we may also have these same t-shirts appear in a different category too. Such as the sale section. Therefore, meaning our t-shirt will appear in two separate locations. We need to decide which one of these t-shirts links is the original link. For example, we may decide that the shirts link is the original. Therefore, we would leave this section as empty. We would then go to the sale link and then paste in the URL to point to our shirt 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 this empty. If we also go back to the dashboard and into all blog posts, we can also improve the SEO in and evolved blog post too. Let's head over to any of our random blog posts, into the edit section. Scroll down, below our content and we can also fine tune our blog post too, to suit the search engines. This is how we can use the Yoast SEO plugin to really improve our sides Search Engine Optimization. As you can see, search engine optimization is a really deep subject, and there's lots of advanced settings too. There is a course of a SEO plugins available too, which do a great job. But this is one which I really like and find very useful. Go ahead and update your pages and posts if you would like to make them more SEO friendly. Next we're going to take a look at another important subject. This is how to backup our site. 35. WordPress blog: Backing up your site: When you're dealing with technology, even with all of the care in the world, things can and do go wrong. If the worst was to happen, we can potentially lose all of our 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 sites, and with lots of great WordPress plugins available to do this easily, there really is no excuse not to. Doing this, I'm going to use a plugin called backwpup. If it goes to the plugin section and add new, we can do a search. Backwpup. This is the one I'm going to use here by Inpsyde click on "Install." Then as usual you click on "Activate." Then we'll also get a option inside of the sidebar. Let's begin by clicking on the dashboard inside the backwpup section and will see a list of steps which we need to take. The first one 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 a various tabs at the top to change our settings. Most can be left as default, but we can change things such as the maximum number of log files, which is in any log tab, and also whether we want to compress these files too. We can also see that these logs are stored in a uploads folder, which is stored inside of the WP Content. I'm going to leave all of these settings as defaults and go back to the dashboard. The next thing which is Step 2, and this is to create a new job. We're going to use this job to create a backup. If we go to the job's tab just here, you see we don't currently have any setup. Let's go back to add new. The first thing we need to do is to give this job a name, I'm gonna call this the Weekly Backup, and always we can set exactly what we want this backups to do, is by default is going to perform a database backup, a file backup, and also a list of installed plugins. 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 we want to, we can also set the format of our filename. Currently, we can see that this is the year, the month, the day, the hour, the minutes, and the seconds, and this is how we create the filename for this backup. I'm going to leave this as defaults. Also save this as a zip with a set where we want this backup to be stored, I'm going to click on the folder, which was the uploads folder in the WP content which we looked up before. We can also synchronize this with Dropbox, different web services, and also send via e-mail, click on "Save". The next thing to do is to schedule when we want this job to happen. We named this job a weekly backup, rather than doing this job manually, we're going to use a WordPress cron. We can see when we click on this, we'll then have a scheduler down at the very bottom. I'm going to schedule this to happen weekly, and we can also say it exactly which day, hour, a minute of the week we want this to happen. I'm going to keep this as default and save the changes. Next, we have the DB backup tab. Here we can choose exactly which database tables we want a backup. I'm going to leave this as all selected and then move on it to the files. The files tab is where we can select or exclude any particular files which we don't want to backup. For example, if you have a various themes which we aren't using, such as 2020, we can select this and this will be excluded from our backup. Also if we don't want to backup any older posts, such as warms from earlier, we can also exclude these two. After this, we have the plugins tab, and all we can do here is change the filename of our plugins list and also set the file compression if we would like. If you made any changes inside of his options, go ahead and click "Save", and then go back over to the dashboard. We can then click on "Step 3" which will take us to the jobs link which is just here. This will then give us a list of all of our jobs which we have set. We only have this weekly backup where we can run now. We want to click on this and this will do our initial backup. After this initial backup, it will run once a week on the day and the time which we set. Once this has been done and we see 100 percent, I'm going to go back to local, click on our file location for our sites, and then this will open this up inside of the finder. We then need to go into our web development blog, gone up, public, WP Content. Remember, from before was seen at this saves inside of the upload folder, let's click on this. Now we'll see our backups and also our logs which would just generated, and these will be saved on a weekly basis. We can also see this backup to if we go back to the options inside of the dashboard, click on the backup section, and we can also see this backup just here. 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 and content on there. This is the end of the section and also the blog project. Coming up, we're going to get to work on a fresh project. This is going to be a WordPress e-commerce store. 36. Project Setup: Let's get started with our next project. Now, I'm going to use local once again, two sets of our WordPress, e-commerce store. You can also use MAMP or the life hosting if you prefer. 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 or the plus icon. The site name, I want to go for shirtstore. Continue on through the options we can keep the preffered setup. Continue and then in admin username and password. I'm going to use a shirtstore admin then a password and then our e-mail too. We can also use the same e-mail we've used for the previous sites. That's completely fine. Add our site and let this do the setup work for us. Add our site. If using a MAC you may also need to use a password. Add this in just to authorize our new project. We then have the usual admin and view side buttons. Let's login. Shirtstore underscore admin. There's our dashboard back to local and we can also view our site. Here we are with our new project setup and the HelloWorld example. Next we're going to move on to adding a theme and also the required plugins to setup the WordPress e-commerce functionality. 37. Getting Started With WooCommerce: You should now have a blank WordPress project now setup. In this video we're going to go ahead and add some e-commerce functionality. We're going to do this by using a product called WooCommerce. Now, in this video, we're going to take a look at doing this in two stages. First of all, we're going to include a theme which is called the Storefront theme. This is also by the same author as the WooCommerce plugin so everything will fit together nicely. We're going to use the plugin for the e-commerce functionality and we're going to use the theme to give us a look and feel of an e-commerce store. WooCommerce is the author for both of these and we can see some of the features of this plugin on this homepage that 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 and also integrate lots of different extensions too. 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 plugin. Back up the navigation, we can also go to the theme store and we're going to use this Storefront themes, click on this. This will be the theme which we are going to use for our e-commerce store. This will by default gives us a e-commerce look and feel and also the required pages such as a shopping cart, a checkout page and the actual product listings too. Both this plugin 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 stores on the web right now. The theme is fully customizable and also responsive, so will look good on all screen sizes. You can also see just here that we have various options in the customizer too, so we can play around with the look and feel and also the color scheme too. Let's get started by going back over to the dashboard. The first thing I'm going to do is to go over to Appearance and then we can add our new theme. Add New, now we need Storefront, install. That will be our active theme, once this is done, we can now reload the homepage. Now I'm going to see a different look and feel. At the moment we don't see much in terms of e-commerce functionality. All we see is the standard homepage and also the sample page which were included with the default WordPress installation. To add the e-commerce functionality, let's go back and add this as a plugin. Always add plugin so we can add the WooCommerce functionality. Add new, search for WooCommerce. This is the one we need here and the creator is by Automatic. Install now, we can also see that this is being regularly updated and also compatible with our version of WordPress. Activate this. Just as a quick side note, the author of this plugin, Automatic, is also founded by the creator of WordPress itself so we're in pretty good hands. The next thing to do is to go through a installation if we want to, which is going to give us a quick setup. We can skip this and do it manually. First, I'm going to run through the basic setup options. The first thing to do is to add an address to where our store is located. Now, the actual address doesn't matter for all purposes at the moment, but it can be a benefit to add the country. This is because WooCommerce will use our country to set up various options, such as the currency. 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 then the type of product which we are going to be selling, ours is going to be physical product since we're dealing with clothes. We can also sell virtual products which the user can download, subscriptions, memberships, custom products and also bookings too. How many products do we plan to display? Let's go for, I don't have any product yet. Currently selling elsewhere, I will say no. Also we're going to un-check all these options too, since we want to add these manually if we need them. I'm going to stick with the basic storefront theme. There is also some paid and free themes too which we can change to, but this is fine for our needs, so select this. No, thanks, and back to the dashboard we now have a dedicated WooCommerce section with lots of options which will go through in this section. With this plugin now activated, let's reload our homepage and see the changes take effect. We still have the homepage. We also have a shopping cart where our selected products will appear. We also have a checkout, an account area and the user has lots of options such as checking any previous orders. They also have access to any virtual products which needs to be downloaded and also they can change their account details. A sample page, and also this shop. This is where all of the products will be displayed when we add them inside the dashboard. But for now we're going to get a quick start with our store by including some sample data. The sample data for WooCommerce is included with the plugin, so let's go over to the dashboard and set this up now. We can import this with the WordPress importer inside of Tools and then Import. If we're using the WordPress importer for the first time, click Install and then click Run Importer. This is going to allow us to add a file with some data, so let's open this up. If you're unsure of the exact location where all projects start. If you use local, head over to the welcome screen and click on this icon just here. This will open up the project at the location inside of your file directory. If you're using mump, you need to go into the mump folder and then into the ht docs and then find the project from there. Mine is in the shirts projects, under app, into public, wp-content. The plugin is in the plugins folder, under WooCommerce, sample data. I'm in the sample_products.xml. Open it up and upload the file. For all of this incoming data, we also need to assign a author. We currently have a shop manager. We can create a new user, or we can assign post to our existing user, which is the admin which we set up earlier. Download the attachments and submit. We can now see this data if we go back to the homepage and reload, click on the Shop. We now have a couple of pages of products which can work with. We will of course add our own products very soon. But this will give us some data to start working on our store. If we click on any of these, we're then taken through to the product detail where we'll have a image and we can zoom in. We have all of the data on the products, the ability to add this to the cart, which we'll see with this link just here. We have a description, additional information and reviews. When we setup our products, we can also link these to related products too. Let's see how this works by adding it to cart. We then get the update and also a shortcut link to the cart page, where we can see a review of all of our products and also change the quantity too. Notice we also have the ability to add coupons, and then at the bottom we can proceed to checkout. This is the final stage where we add our billing details and also delivery address and also the final review of the order. As you can see here, we currently don't have any payment methods setup for our project, but we'll fix this during this section. This is our e-commerce store now setup with the basic functionality and also taking advantage of the WooCommerce plugin and the Storefront theme. Next, we're going to take a look at the importance of a child theme and how we can set one up in our project. 38. WordPress eCommerce: Why use child themes: For this project, we are going to be creating some modifications in a slightly different way than the first two projects. We're going to be making what is called a child theme. Currently at the moment, all the themes which we've created in our project can be considered a parent theme. This is because these are the main theme which we're using. We can also make use of these parents themes as a base or a starting point. We can then branch off by creating a child theme, which will then inherit all of these styles and functionality of the parent theme. Why exactly would we want to do this? We often do this when we want to make some customizations to a theme. I'm working with a parent 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 we want to dig a bit deeper into our theme, so just creating a new file or making any more extensive changes. Would you want to create a child theme? One of the reasons why is because when the parent theme gets updated we don't need to download the new updated version. This new updated version will overwrite the existing parent theme and also any additional files or modifications which you've made. If we create a child theme, we can then safely update our parent theme, and the child theme will still inherit all of the updates, but it will also apply our changes too. There is also some other benefits, just like we can see here. We keep our customization separate and also in one place, we see the updated benefits which we just mentioned. Also rather than creating our own theme from scratch which we'll look at later on, we can inherit all of the tried and tested work which is being put into a proven theme and then make our own customizations and modifications to suit our needs. This is the why behind a child theme. 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 theme. Now we're going to take a look at how we can set this up into our project. This is going to allow us to make any changes or customizations to our storefront theme without overriding any of the original settings. The way we do this, is to go into our project folder. If you are using MAMP make sure to go to the ht docs, and then into your current project. I'm using local, so all we need to do is click on this icon here, let's go into our project, into our Shirtstore theme. We need go to app, public and then into our content, where our themes are located. We currently have the default themes and also the storefront. Now we're going to create a new folder for our child theme, I'm going to call it, the storefront-child. Now what we need to do to kick things off, is to add some required files. We don't need to go too deep into any PHP knowledge, into any coding, all we need to do is to open up our folder, and add some basic files. Don't worry if this is something completely new. There's just some basic steps to take. To add 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 up files and folders and edit the code inside. If you've not got a text editor which you currently use, do head over to the link on the screen and you can download this for use in this project. Let's drag over our storefront child and we can begin with our setup. Now we're inside of our project folder, I'm going to add a new file. The first file which we need, and this is also required, is going to be called the, style.css. The style.css is where we add any different styling or layout options, which we want to use to override our parent theme. It's also going to be the home for some WordPress settings, I will add these in just a moment. The next required file is going to be called, functions.php. The.php extension just declares that we using the, PHP program language. The next step is to head over to the browser and go to the WordPress developer site. Inside the themes, advanced topics and child themes, we have this section which tells us how to create a child theme. If we scroll down, you can see that we've created our theme folder, which is step one. We've created a stylesheet, which is step two. But we also need to add some information about this theme too. We can do this by copying over this sample comment. If you grab this and then go back to our own style.css, paste this in at the very top. This is going to be used to provide some information about our theme. The first one is pretty obvious, this is going to be the name of our theme. We called ours the storefront child, so make sure to change this. We can also add a theme URI, if we have a dedicated website setup. The description, storefront child theme, add your name as the author. You can also add your own personal website and also we need to change the template to reflect the parent theme. The parent theme is called storefront, so make this change. We can add a version number if we would like and also a license too. Next step, we have the tags, which is going to describe our theme. Tags are way of tagging our theme with certain features. We have some defaults, such as the color scheme, the number of columns, the sidebar positioning, 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 tags. We can see at the top we have some subject tags, where there's the maximum of three. If we have a blog theme, an e-commerce theme, education, for example, these can also be listed as our tags. We have various layout tags, where we can describe exactly what type of layouts are available in our theme. We have the features too; if this is accessible, if it has custom headers, custom colors, menus, and featured images. These can also be gradually added into the theme as we add more features. If we quickly go over to, wordpress.org, and into the theme section. These are also the same available tags which we have. If we click on any of these themes, just in this section here, these are the tags which apply to this current theme. For example, we can see this theme; is accessibility ready, it has custom menus, it has footer widgets and also translation ready. As you can see, these tags become even more important, if we were to upload a theme to Wordpress.org or any other marketplace. Back to our stylesheet. We can also edit these tags, but I'm just going to move down to the text domain. The text domain is a unique identifier for our theme. It's also used if we want to translate our theme at a later date. The text domain should also match the name of our project folder, which is storefront-child. The next step for our child theme, is to also add an image. This is going to be the image which we see inside the dashboard, when we select the current theme. I've also included an images folder for this project. This includes, a site icon, a screenshot and also two different images for our slider. For now, the image which we are interested in is this screenshot.png. This is going to be the image which we're going to see inside the dashboard, when we select this as our active theme. The naming is also important too, this must be named the screenshot.png. For this to take effect, all I need to do is to drag the screenshot into our child theme. We can do this inside of visual studio code. Let's drag this directly in, or we can also drag this over into the project folder. With this in place, this is now the perfect moment which we need to activate our theme. Let's go over to the Dashboard, into appearance and themes. WordPress has now detected our storefront child and we can also see this screenshot.png. Let's activate this theme, and then visit our site, reload the browser, and we can check this is working by making a small change into our style.css. Let's add some custom styling, let's crop the body section, which is the main wrapper for our content. If you don't know any CSS, don't worry about this section, we're just going to apply a simple background color. We can do this by setting background to be any color, such as red. Save this file, and if we reload, the red background color has now taken effect. Let's just check, this is only on the child theme, if we now activate the original storefront, this is our site, and this is now being removed. I'm going to reinstate the child theme. Now we know that all of the customizations are only applying to the child theme. Let's reload, back on to visual studio code, I'm not going to remove this styling, save this file, and now we're good to go with our child theme. Just a one quick side note when creating a child theme. If we go back to the WordPress developer sites and scroll down, we can see, that for some themes we need to enqueue a stylesheet. This is basically a way for WordPress to load up the parent styles and also the child styles too. If we scroll down, there is some code samples which we can add into the functions.php. However, this step is not required when working with the storefront theme. If we go over to the WordPress documentation and into the child theme setup section. When we scroll down, we see we have our styles.css, which we've already created. We have our styles.css comment, which is based on the storefront templates. We also have a note here, we see that, when using the storefront theme, we don't need to enqueue any of the parent styles. This is actually something which the storefront theme does follow, so that's one last step to take. The only thing we need is the functions.php and our custom stylesheet. This is everything we now need for our custom child theme. Let's now move on and take a deep 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 existing website to WordPress. So as you go through the next section, we'll be referring to the WordPress Codex, quite regularly, which you can find out the codex.wordpress.org. So the Codex is the online manual for WordPress. It's a repository for WordPress information and documentation. It covers pretty much eve