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

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

WordPress Academy: Learn WordPress step by step

teacher avatar Chris Dixon, Web Developer & Online Teacher

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

84 Lessons (8h 26m)
    • 1. Welcome To The Class!

    • 2. Why WordPress?

    • 3. WordPress.org or WordPress.com?

    • 4. Where To Find WordPress Themes

    • 5. The WordPress Web Server

    • 6. Option1: Installing With Local (recommended)

    • 7. Option 2: Installing With MAMP

    • 8. The WordPress Dashboard

    • 9. WordPress Files & Folders

    • 10. Music Festival Project: What we will be building

    • 11. Music Festival Project: Installing Themes

    • 12. Music Festival Project: Creating Our First Page

    • 13. Music Festival Project: The Media Library

    • 14. Music Festival Project: The Gutenberg Editor

    • 15. Music Festival Project: Widgets

    • 16. What we will be building

    • 17. WordPress Blog: Project Setup

    • 18. WordPress Blog: Importing Sample Data

    • 19. WordPress Blog: Adding And Updating Posts

    • 20. WordPress Blog: Where To Find Great Photos For Your Blog Posts

    • 21. WordPress Blog: Including Media

    • 22. WordPress Blog: Users, Permissions & Managing Comments

    • 23. WordPress Blog: Adding Pages

    • 24. WordPress Blog: Adding Our Navigation Menu

    • 25. WordPress Blog: The Customizer In More Detail

    • 26. WordPress Blog: Adding Header Images

    • 27. WordPress Blog: Adding a Background Image

    • 28. WordPress Blog: Plugins & Social Media Integration

    • 29. WordPress Blog: Home Page Setup & Widgets

    • 30. WordPress Blog: Creating The Footer

    • 31. WordPress Blog: Adding a Slider

    • 32. WordPress Blog: Creating The Contact Form

    • 33. WordPress Blog: Improving SEO

    • 34. WordPress Blog: Backing Up Your Site

    • 35. WordPress eCommerce: Project Setup

    • 36. WordPress eCommerce: Getting Started With WooCommerce

    • 37. WordPress eCommerce: Why Use Child Themes?

    • 38. WordPress eCommerce: Child Theme Setup

    • 39. WordPress eCommerce: Product Categories, Tags & Attributes

    • 40. WordPress eCommerce: Adding Products

    • 41. WordPress eCommerce: Variable Products

    • 42. WordPress eCommerce: Home Page Layout & Slider

    • 43. WordPress eCommerce: Customising The Look Of Our Store

    • 44. WordPress eCommerce: Flexible Layouts Using Page Builder

    • 45. WordPress eCommerce: Rearranging Menus

    • 46. WordPress eCommerce: The Footer Area

    • 47. WordPress eCommerce: WooCommerce Settings & Managing Your Store

    • 48. PHP Basics: Introduction

    • 49. PHP Basics: Hello world

    • 50. PHP Basics: Strings , variables & constants

    • 51. PHP Basics: Data types & operators

    • 52. PHP Basics: Arrays

    • 53. PHP Basics: Functions

    • 54. PHP Basics: Conditional statements & more operators

    • 55. PHP Basics: Switch statements

    • 56. PHP Basics: Loops

    • 57. PHP Basics: The Codex

    • 58. Theme Development: Database setup & WordPress installation

    • 59. Theme Development: Underscores starter theme

    • 60. Theme Development: Understanding WordPress / PHP templates

    • 61. Theme Development: Header & footer sections

    • 62. Theme Development: Adding the CSS & images

    • 63. Theme Development: Converting the front page

    • 64. Theme Development: Converting our menu

    • 65. Theme Development: Setting up the blog index page

    • 66. Theme Development: Setting up the blog posts

    • 67. Theme Development: Sidebar

    • 68. Theme Development: Single post page

    • 69. Theme Development: Converting the about page

    • 70. Theme Development: Search box & finishing touches

    • 71. WordPress Multisite: Intro

    • 72. WordPress Multisite: What is a multisite?

    • 73. WordPress Multisite: Activating a WordPress network

    • 74. WordPress Multisite: Adding sites to a network

    • 75. WordPress Multisite: Users & the super admin

    • 76. WordPress Multisite: Plugins & themes

    • 77. WordPress Multisite: Allowing users to add websites to the network: Part 1

    • 78. WordPress Multisite: Allowing users to add websites to the network: Part 2

    • 79. Bonus Lectures: Uploading to a live server

    • 80. Bonus Lectures: East child theme plugins

    • 81. Bonus Lectures: Removing sample data and resetting our database

    • 82. Bonus Lectures: Setting up a second project using Siteground hosting

    • 83. Thank you

    • 84. Follow me on Skillshare!

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





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!

Meet Your Teacher

Teacher Profile Image

Chris Dixon

Web Developer & Online Teacher

Top Teacher

Hello, My name is Chris and I am a web developer and online teacher. I am passionate about what I do and about teaching others. I have started various online and offline businesses.

Whatever your reason for learning to build websites you have made an excellent career choice.

My personal motivation was to become my own boss and have more freedom and flexibility in my life. I also enjoy the technical challenge it provides and the way it constantly evolves. I built my first website back in 1999 and i have watched the web evolve into what it is today.

I try to make my courses enjoyable and try to remember what it was like when I was learning. I also believe the best way to learn is by doing and try to include as many practical examples as possible in my courses.

... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Welcome To The Class!: WordPress powers a huge percentage of websites available today. You've almost certainly visited a website which runs on WordPress. Some of the biggest names and brands of trusted WordPress including Disney, PlayStation, MTV, Microsoft, Sony, and so many more. The good news is, it's easy for beginners to get started with and you don't need to know any coding to build amazing websites. During this course, I will guide you through the process of building multiple WordPress websites. Including a music festival landing page, a blog, and also an e-commerce site too. Once you are familiar with WordPress from these projects, we then step things up even further and introduce some code by converting a regular website into a fully custom WordPress theme. Before rounding things off by taking a look at how we can setup a WordPress multi-site installation. Who am I? My name is Chris and I'm a web developer from the UK. For me WordPress has allowed me to create lots of amazing sites for clients or businesses or personal use from a single landing page right through to a complex e-commerce site. It does this by providing a flexible core and then pose as a user and extend it with a huge selection of plug-ins, it extended the functionality. Let's jump into learning WordPress together by building some fun and educational project. I'll see you in the first lesson. 2. Why WordPress?: WordPress originally began life as a blogging platform and it's now grown into the most popular content management system available today, which also powers some of the world's most popular websites. WordPress is completely free to use, free to download, and it's also built by hundreds of community volunteers along with all of the great features which WordPress provides. We'll find out about these during the course. One of the things I really love about WordPress is that it has something for everybody. If you are a non-technical person or a beginner, you can buy some simple web hosting, use a one click installation, select your theme and you have your very own website or blog in under half an hour. For web designers or developers or general people who want to jump in a bit deeper, there is also many great things you can do technically to make a really powerful website. You can call your own themes and also plugins to make WordPress look and function exactly how you want it to be. WordPress is also under constant development too, its always improving, whether that's a security fix or a new feature to keep WordPress from becoming outdated. Also the creators of WordPress have made these updates really easy to apply too. You don't need to worry about complicated updates and installations. These updates are generally performed from the WordPress dashboard and often just involve the click of a button. As you can also see from the WordPress homepage which is wordpress.org, there is also many different themes you can choose. If we go into the theme section we can see there is over 7,000 different themes are present. These will allow us to build almost any type of website which we want to create. When we actually create a WordPress website, all of the content stays exactly the same, and we can then switch between different themes to give our content or our site a completely different look and feel. On the first set of WordPress some of the themes will be pre-installed, or we can search through any of these themes from wordpress.org. These are free themes to set up our projects. Along with these free themes there is also premium themes available too, which you can also buy on websites such as ThemeForest, but we'll look at this in more detail as we progress through the course. The WordPress core which we are going to download is really simple yet very powerful, and also packed with lots of features. However, if there is some functionality missing which your app or website needs, then this functionality is more than likely going to be available as a plugin. Plugins are pretty much what they sound like. They are something you can download to plugin and extend the WordPress core. They add functionality and features which are usually simple to install as clicking on a few buttons, but again we will take a look at plugins in more detail later in the course. Some of the other WordPress benefits are that it's really search engine friendly. By using WordPress, many SEO best practices are already taken care of for us behind the scenes. If you want to take it even further there is also some great plugins too, which well take a look at it in the plugins video. Lastly, WordPress has a really useful mobile app for iOS and Android which is free to download. The app allows you to write WordPress contents and also update your website on the move. It can even upload photos, manage blog posts, manage all comments, and also edit pages as you go. These are some great reasons for choosing WordPress. Of course, there are many more and I'm sure you'll find your own reasons for using WordPress as you progress through this course. 3. WordPress.org or WordPress.com?: Let's begin with WordPress.org, which is the homepage for the popular open source WordPress software. Open source means anybody can use this or contribute to it free of charge. This is the site for the official WordPress software, which we are going to be using to create our project through out this course. We download it, we can customize it and uploaded to a live server when complete. It basically gives us the total flexibility since it's completely self hosted, and also hosting costs for WordPress a relatively cheap when it first started out. At the top navigation of this page, you can see here that we have the available plugins and themes which we can then use. We'll make use of both of these throughout this course. There is also a support section where we can have full access to the WordPress documentation, which we're going to refer to quite often, and of course, everything we need from installing themes, right through to security topics. The actual software is available from clicking on this get WordPress button, and this is one of the setup options which we're going to take a look at very soon. Download this software as mentioned will give us the total flexibility and control over everything we're going to do with our WordPress site, or there is an alternative which is available from Wordpress.com. Wordpress.com is more of a service which will allow us to have a WordPress site, posted photos. It uses the same WordPress software which we just looked at, it takes away this setup and provides hosting for this software. This site was created by one of the WordPress founders. For the ease of setup does come at a cost. We don't have the flexibility we have when self-hosting. Under also by restrictions on which themes plugins we can use, depending on exactly which paid plan which you use. With this in mind, if we click on a Plans and Pricing from the navigation, there is various different price levels along with a free option, which we can see at the top, is 3ca coming option when starting out. But it does also place advertising banners on your site, which you probably don't want. We then have options from a personal side right through to an e-commerce store. We can see these options in more detail, if we scroll down to this table. As far as I mentioned, there is some restrictions, as you can see here when using Wordpress.com, and these restrictions are lifted as we go through higher pricing options. WordPress.org is the one to go for if we want full control over our site, and we are happy to do a little set up work. We're going to be choosing this path through out this course, or this site which is WordPress.com is a good option if you want everything taken care of for you. But remember there are restrictions unless you go for the more expensive plans. 4. Where To Find WordPress Themes: This course doesn't require any purchases for a theme or any additional software. Though at some point in the future, you may be using WordPress to build lots and lots of sites, whether that's for a job, or paying clients, or for businesses. For this use case, you may also want to look at some premium theme options. One of the options for this is themeforest.net. This is a marketplace for not only WordPress themes, but also money of a code, snippets, photos, and also videos too. We're going to be focusing on the WordPress themes which we can go to from this tab. From here, we can check out all of the different categories, we can also search using the search bar up at the very top and there is generally themes available for pretty much any type of WordPress site which you want to create. For example, if we want to create a wedding website, we can do a search, and the wedding search returns over a thousand different themes to choose from. As I mentioned, it's mostly paid content on this site, but this price also does often include support too. It is also many people and companies making a full-time living, creating themes and selling them on marketplaces just like this. If we go back to the popular items, we can see some of the popular themes such as the Avada theme, this is currently one of the most popular themes and it has hundreds of thousands of sales. We can take a look at the live preview and see exactly how this theme will look with various layouts, we can scroll through any of these themes and check out all the features which comes with it and generally, many of these themes have lots of different options for layouts or changing the color and they're also very flexible too so we can use it for product pages such as e-commerce sites, we can use it for blogs and also personal sites too. Along with seeing how our website will look and feel with a particular theme, it's also very important too to check out all of the information which is listed below. We want to make sure our theme is regularly updated, we want to make sure that it got good reviews and also it's compossible with our version of WordPress. When choosing a theme, it's not just about how it looks, it's also about the features and the things we can do with it too. One of the good indications of the features is the tags which is down at the bottom. These tags will often reflect exactly what features is included with a theme, such as the number of layout options, if it's going to have a two column layout, if it's going have a three column layout, if it's compatible with WooCommerce for e-commerce stores, if it's translation ready and also what customizations are available for this particular theme. We can also see exactly what browsers this is compatible with and also which versions of WordPress plug-ins are also compatible with this theme too. This particular one is also widget ready too, which means we can enable widgets which are self-contained pieces of content which we can place on our site, as well as all of the paid themes which are available on the site. As we looked at earlier, the official wordpress.org website also has a themes option at the top. There also is paid themes from this commercial section but we are only going to be focusing on the three themes which we have listed here. We can download any of these themes from the WordPress dashboard and we're going to do this when we setup our first project. Just like the themes which we just looked at, we're going to be able to click into any of these themes, we can check out a preview and this will give us an idea of how our theme will look with some blog content. Again, it's also worth checking out all the additional information such as the last time it was updated, the reviews and ratings, and also the tags too. We can see this one is accessibility ready, it's got various customizations such as the background, the colors, the logo, the header, and also the menu. It's e-commerce compatible, its translation ready, and also has various layout such as a one column and also a two column layout. These are really important things to consider for your site but don't worry just yet about selecting themes with all of these tag options because we going to discover exactly what most of these are as we progress through the course. Having all of these themes available for WordPress allows us to decouple the content which we have on our sites with the look and feel. Even if we have a blog which we call hundreds and thousands of blog posts, down the line we can also completely change the look and feel by simply switching the theme. This theme will not affect the original content and we still have all of this information still available and most of these themes are generally customizable from the WordPress dashboard as well as downloading themes like this. We can also create our own custom themes, we can either use these themes for personal use, for a paying client, or we could also upload them back to the theme store. As with everything, if you do a search online, there will be hundreds or even thousands of options which you can choose from but for now though, we're going to come back to our themes and take a look at how we can add these to our sites. First of all, we need to take a look at how to install WordPress. 5. The WordPress Web Server: If you built a website in the past using HTML and CSS, you will be used to just writing this in a HTML file, opening up this file in the browser, and everything just works. Well, this is a bit different when using WordPress because WordPress needs a web server to run. Why is this? Well, this is because WordPress is wrote in a programming language called PHP. PHP will only run on the server, it doesn't work inside the browser. For WordPress, you don't need to understand any PHP course. Good understanding of PHP is running on the server, is key to understanding how WordPress works. If you consider a sites such as Facebook or Twitter, or generally any blog sites, chat application, or even social network, they all look the same for every user, but the details on the page are different. Such as the username which will change your personal friends or connections, your blog posts, and so on. We can think of things like Facebook and Twitter as a template and any details are injected in when needed, and these all based on the logged-in user. This is an example of what PHP does, it can generate a web page which change the particular details for each user or each page. This is an example of what is called a dynamic web page. It's on a web server, where these pages are generated. On the server, it will have the template or the basic setup. Then it will place in all of the details which you pulls into the database, such as a user, or the blog posts which we just mentioned before. You don't need to fully understand all of this at the moment, but just be aware that this is the reason why we need a web server to run WordPress, rather than just open it up inside the browser like we can do with a regular HTML page. Unfortunately, we can set up a web server on our own computer to run this. Also, WordPress needs a database too, which is used to store all of the pages, the blog posts, the images, and all the information which it needs. It's this web server which we'll also talk about the database and grab all this information for us. This now leaves us with some options. If you already have purchased some web hosting in the past, which can run WordPress, you can, of course, use that for this course. Are we going to run through some of what is called local options, which is the ability to set up a web server locally on our own computer? There will be a couple of different options, so make sure you just use one, and I would recommend the next video if you will ensure. With this as a background, we now going to run through how to set a WordPress in this next video. 6. Option1: Installing With Local (recommended): Now we understand that WordPress needs a web server to actually run. In this video and also the next, we're going to look at some options to get started with creating a web server on our own computer. This video is going to focus on a service called Local by Flywheel which will allow us to create a web server on our own computer, and then we can create our WordPress websites. You only need to either follow this video or the next video, and the next video will focus on a alternative solution called MAMP. I would recommend that you follow along with this video rather than and the next one. To get started, we're going to head over to localwp.com. From here we're going to click on the download button, where we can download for both Mac, Windows and Linux. There's also a paid version for teams and agencies, but we just need the free community edition. Flywheel is going to allow us to quickly assess WordPress projects on our own computer, which is going to be really straightforward and take care of all the setup, the server, and also the database for us. Local has lots of great features. We can view our site and admin section at click of a button. We can generate a live link to view our project anywhere and also share with others too, along with a lot more advanced features such as the ability to set up WordPress multi-site and so much more. Choose your particular platform, download and then go through the installation steps. Once Local is fully installed and setup, you're taken to a screen which looks just like this. This is where we can add and also manage our Wordpress sites. I already have some sites setup just here if this is your first time, you won't see any in the sidebar. To add on new project we need to click on this green button in the left corner and then give our site a name. I'm going to give this title of Festival, and we don't need any of these advanced options for now. Continue, I going to stick with the preferred default environment. Then we need to add a username, a password, and an email. The username, let's go for the festival_admin, and this is going to be the details we need to log into the back-end of our WordPress site. We'll take a look at this in just a moment. The password, make sure you change your email if needed to. Click on Add Sites. If you're going to using a Mac you may also need to add the administrator password too. Good, once this is done our site is automatically started up. We can see this because we have the option to stop our site in the corner. If yours is green and it say start site, you will need to click on this to start up the server. We can see all the version numbers for our servers, for PHP and also the database which we're using too. We don't need to change any of this information, but it's all there if we need this in the future. One of the great things about using Local is this live link down at the bottom. We can click on Enable, and this will give us a live URL which we can share with others too. This means we could share our work with colleagues, with friends or family, and it's also useful for getting feedback on our site to run other people. We'll spend most of the time during this project in these two sections up at the top. We have a admin section which will link us to the back-end of our site. To login we need add in details which we added into Local just before. My username was the festival admin and the password. Click on Login and this will then redirect us to the WordPress dashboard. The WordPress dashboard is like the control center of our sites where we can add new features, we can update it, we can change themes, and we'll take a look at this in just a second. The other button is to open our site, and this is our actual WordPress website. If yours looks a little bit different to this don't worry, the default theme does change from time to time. This will now give us our back-end or front-end using these two terms. If we want to switch between these manually, if we are on the site just like this, we can hover over the site title and then go over to the dashboard. When inside the dashboard we can do the opposite and then head back over to visit our site. To the dashboard we'll take a closer look at all these options in the next video. For it's from here where we can update our sites if we have any themes and plug-ins or even the WordPress call. If any updates become available, we will be notified from this view. We can manage and update our posts. We can upload different assets and media such as images, videos and audio. We can work with our pages. We can edit them, we can add new, we can manage any comments on our blog posts. There is an appearance section where we can customize the look and feel of our site. We can upload different themes. We can change menus, background images, and lots more. We briefly talked about plug-ins early on and it's from this section where we can either manage our plug-ins or add new ones too. For example, if we wanted to add email to our site, this is the plugin section where we could add this. We can manage our users, such as seeing who is signed up. We can change the preferences. We can update profiles and permissions and lots more. We have a tool section where we can do things like importing and exporting data. We also have a setting section where you can fine-tune all of the options for our site. For all of these projects in this course, we will spend a lot more time in this back-end. Starting in the next video we'll take a deeper look for all of these options. 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. The WordPress Dashboard: We had a quick preview of the WordPress dashboard, just before when setting up our projects. This is the control center for our website where we can add new content, we can update, and also delete our content too. We can also use it to install new features such as plugins or themes. But currently I'm not going to go too deep into the WordPress dashboard because we are going to be jumping into all of these options in more depth throughout this course. To begin, we have this homepage which gives us a status update where we can see our site is in good health. This is also a section where we can customize and we can also see recent activity such as recent comments. We'll also get notified of any updates which is required for WordPress and also any plugins or themes too. The first option over on the left is our blog post. When we first set a WordPress, we see we have a hello world sample blog post. We can hover over this and we can edit this, we can remove this. We can also see how many comments are being provided for this blog post. We can add new and we can also create different categories and tags too, so we can organize our blog post into different sections. Over this we have the media library which is a collection of all of the assets which we need for our website. The media library can hold assets such as images, audio clips, video, and these are all organized into one easy-to-use library. We also have access to all of these assets when we create a new blog post and new pages, so these are easy to select. After this, we have the pages section which is laid out in a similar way to the blog post. From here we can access all of the pages on our site, we can edit them, we can remove them, and also add new with this button too. The comments section is related to our blog post. From here we can have full control over the way a user interacts with our blog. For example, we can moderate them. If anybody has offensive comments, we can review them first. Then we can also remove them or allow them to be displayed on the website. The appearance section is where we are going to be controlling the look and feel of our site. We can upload different themes, we can customize our current theme, we can organize widgets which are sections of content to display in different parts of our theme. We can create and edit different menus for different parts of our sites, and also play around with different layouts and color schemes too. The plugins section is where we are going to manage all of the extensions for our sites. This is where we add the different functionality which is not included with the WordPress core. For example, we're going to be using plugins, which are going to add e-commerce functionality, we're going to add e-mail functionality, and as a plugin for pretty much any type of feature which you want to add to your site. After this we have the user section where we can manage all of our users for our site. Currently, we just have ourself because we've only just set up this site. Each one of these users is assigned a different role. We have full access to this dashboard and we can upgrade all the content which we want to use. We have the administrator role. But there is also other roles too which are for regular users, so they can't just log in to the dashboard and change our site. But more on this later. The tool section is going to allow us to do things such as importing content and also exporting our data too. Finally, we also have lots of different settings or options for our site, and we're also going to get lot more familiar with all these options as we go through the course. So this is just a quick overview of what is included with the WordPress dashboard and exactly what we can control too. Next, we'll have a look at the files and folders which are included when we set up WordPress. 9. 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. 10. 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. 11. Music Festival Project: Installing Themes: To begin, we're going to install a new theme for our project. I'm going to choose a free theme from wordpress.org, but this is completely up to you. I would recommend if you are a beginner, to stick with the same theme which I'm using, since if you do choose a different theme, it may come with some different options or may have a different look or feel, or it may also have some extra options too. If you are a beginner, I would recommend you stick with this same theme, or if you want to play around with things afterwards, you can take a look around and choose a different theme too. Let's jump into installing our WordPress theme. At the moment, we just have the basic default themes which we included when we set up a WordPress originally. We can see these if we go to the visit site button or I still have mine already available inside the browser. This is the default theme which is included and we can see this if we go to the dashboard, and then into the appearance and theme section. From here we currently have three different themes installed, and we're using the 2020 theme at the moment. We can also hover over any of these different themes, and also activate these too. This is how the 2020 theme currently looks, and by default, we'll first set up WordPress, all of the blogposts are displayed on the homepage. At the moment, we would just have this simple Hello World blogpost and also this sample comment just below. We also have a Sample Page too, and we can also rearrange the contents for any of these pages from the WordPress dashboard. For example, we can move all of the blogposts which are currently on our homepage to be on a dedicated blog page. To start off with this project, we're going to install our new theme. From wordpress.org, we can go into the theme section and we can include any of these available themes to make our site look as different or personal as we want. The options which you have to install a theme is we can either select any of these and click on the Download button. This file which we downloaded, we drop this into the theme section from all files or folders that we looked at previously. Alternatively, and probably a more simple way is to go back over to the dashboard, and we can click on "Add new". This project I'm going to be using a theme which is called Asura. We can do a search and the Asura theme is going to be this one which we see just here. To install, we simply click on the Install button and then once this has been downloaded, we just need to activate this as our current theme. Once it is activated, we then have the option to customize our theme. The customizer gives us the options which are on the left and we can see a live preview of any of the changes over on the right. For example, if you go into the site identity, we can change our site title and also the tagline too. We can include a logo and a site icon and we have lots of different options to change the look and feel of our theme. Just because we're using a pre-built theme, it doesn't mean we just stick with the exact look which is provided. We'll make use of many of these options as we progress through the course, and we can also now see our active theme if we reload the front end. It does currently look a little different how it looked in the pictures, but this is just because we don't have the same content set up as the demo. The job of a theme is just to provide a skin or color scheme for our content. 12. Music Festival Project: Creating Our First Page: As we discovered in the last video, WordPress by default will display our blog posts on our home page. We can change this to display these posts on any other page, but first we need to create a new page to display these on. Over to the dashboard. From here, we have the pages option over on the left. If we click on this, we can add and manage all of the pages which are on our site. I'm going to leave a place the privacy policy which is already setup, but we can remove the sample page. Let's remove this, and then we can add a new page, which is going to be our home page. The first thing we need to do when creating a new page is to add the page title. Then we can add all of our content below. We're going to cover adding our page content on the content editor in more detail in the next video. We also have some options to either publish this page immediately, or we can schedule a list for a later time. We have a permalink section where we can set the link to this page. For example, this would be our URL, and then forward slash home. If you had a blog section this will be forward slash blog and so on. We have a featured image which is the main image, which we can use when at least in this page. We can link this by clicking on this button, and this will be uploaded to our media library. Have the discussion section where we can allow comments for this page, and also any attributes which you want to add, such as the order which this page will appear. Also included with this theme, is some options where we can lay out the sidebar. We can have the sidebar on either the left or the right or no sidebar at all. These sidebar layout options have been coded by the creator of this theme. Yours may be a little different if you chose a different theme. Now with our site title in place what we need to do is to click on "Publish" and then "Confirm" and this home page is now live. Back to our front end of our site and refresh. I want us to have access to our home page, click on this. This is the permalink which we've seen before which is forward slash home, and then our page title. We don't have any page content just yet, but there is a couple of things to note. First of all, this homepage title is displaying, and it's pretty bold, so you may want to keep this in place depending on your project. But I'm going to remove this from the dashboard. Back over to your page. Then down at the bottom where our layout section is, we can go to the disable elements section. From here we can check the content title, close the section down. We now have access to an update button. Then refresh the page to confirm this has been removed. The second thing is we actually want this home page to be the home page for our site, rather than the blog post which we currently see. To change this we can go over to the dashboard, and if we click on the WordPress icon, will then take it back to the main dashboard section. In the settings section, we can go into reading. From here we can change what the home page will display. Currently, this is set to display the latest blog posts, but we're going to change this to be a static page, where we can select our new home page. Click on "Save". Now if we reload the project, we now see our empty home page. If we had a dedicated blog page, we could also set this too but we're going to look at this in a future video. Just before we move on to adding more content, we can also set up the site title, and also the tagline for this project. As to this back over in the customizer, which is available under the appearance section. We've already looked at how we can change the site title and also the tagline using this site identity section. The tagline doesn't matter at the moment because we've already got this hidden, but if we wanted to we could also add a logo to the header. But I'm going to leave this and add this directly to our page. We can also set a site icon which will appear in the browser tab. We want to do both of these in the next video. Back to the main menu. We'll use a lot more of these options throughout the course. But next, we can also make use of the social media links, which have been provided with this theme. From this section, we can add the links to all of our social media profiles. Just as an example, I'm going to add my Twitter URL. If we now publish this, as tests are, we can close down the customizer and refresh the browser. Click on the Twitter icon, and this will only take us directly to our social media link. With this first page now setup, let's move on into the media library where we can add some images to our project. 13. Music Festival Project: The Media Library: Sooner or later you will have the need to upload different types of media, such as images, your project. WordPress provides us with a really simple and easy to use solution, which is the Media Library. The Media Library is a central location where we can place all of our assets, such as images, video clips, and audio, or even files too. It then gives us access to this media library when we create things such as new blog posts or new pages. Let's take a look at how we can use this now. From the dashboard, we have this media library option from the sidebar. If we click on this, we can see any of the existing assets which we have inside of our project. This media library is not just the images, but also other types of media such as videos, documents, and audio. You can use these same images as me for this project which are available as a download, or you can also select your own if you prefer. From this view, we can either click on the Add New button where we can drag and drop any [inaudible] files, or we can select files from our machine. Over on the left, I have a folder which has all the images for this project. We can either drag over each one of these individually or instead, we can simply drag over the full folder. Once these have been imported, we can click on any of these individually. It's also recommended if you are pushing this site to production to also fill in the additional details, especially the alt text. We can also edit the title, the caption, the description, alongside the file URL, which we can link to in any web blog posts or pages. Since this is a demo project, I'm going to leave all of the additional image information empty, but do be sure to fill in this additional information if you are using a live site, which will help with search engines and accessibility. Now, these images are included in our media library, we can now access them in our pages or blog posts or our pages if we go into our home section, click on "Edit". We can directly add images into our page by adding a image block, and we'll take a look at how to do this in the next video. Now, although we're just going to go into the document section and then sets our featured image. I'm going to select this one and then set this as our featured image. A featured image is an image which represents our blog post or our page. The page is featured image can be displayed in a number of locations. In our case, the themes author, you set this to be inside the header. Now if we update this and refresh our site, we now see that this has been placed in the header. We can see here we have some white space over on the right-hand side. This is because for this course project, we keep the image file sizes down. I've not included any huge images. We'll have a few different ways we can fix this. We can either upload a larger image or if we wanted to, we could also adjust the CSS. We can add our own custom CSS by going over to the Dashboard, down to the customizer, then we have a Additional CSS section. We can target our HTML image, which is "img" Then inside of the curly braces, we can set the width of the image to be 100 percent. Refresh our site, and now our image has been stretched to the full width of the browser. This is the featured image for our page, but if we were to add a featured image to a blog post, these often displayed alongside each blog post on the blog page listing. Also as a side note, these featured images used to be called post thumbnails. These were in early versions of WordPress, so you may still see some references to this in the documentation or also some guides. Back over to the customizer, I'm also going to set the site icon. Back into the main menu and from the Site Identity, we can select the site icon. We want to go for the same image, select this, then we can also crop this to be a smaller size. I'm going to go for the image, the hands, crop this, publish our changes. We can now see the site icon inside the browser tab has been updated with our new cropped image. 14. Music Festival Project: The Gutenberg Editor: In WordPress version 5, they released a whole new revamped editor for editing our blog posts and pages. This was called Gutenberg. This allows us to move away from a sort editor approach and replace our content using blocks. We're now going to take a look at the Gutenberg website and take a quick overview of how these blocks work. I'm currently on wordpress.org, which has this Gutenberg section. This is going to give us an overview of some of the blocks which are available to create our blog posts and our pages. Now we don't need to head over to this page, but this is going to give you an idea of exactly what is available. We have some basic text blocks, we have images, we have buttons, and also ones to help out with layout such as columns. We can edit them, we can rearrange them, and in some cases we can also nest them inside of each other too. If we go back over to the Dashboard, we can make use of these inside of our pages. Currently our homepage is empty, so we're going to go over to this, and we'll go into the edit section, where we can make use of some of these blocks. To add a block we can simply start to type inside here. This will give us a simple text block or we can click on the plus icon in the top left. We can scroll through all the different types of blocks and sections which are available. We've got pretty much any type of content which is going to be required for building the page. We have tables, we have images, we have galleries, we have video sections, we have this design section where we can lit up our page into different sections and columns. We can break up our pages. We edit separators, we have all of these pre-built widgets which will allow us to add calendars and links to our latest blog post. We've social media links, and also different plugins can add different blocks in here too, such as WooCommerce, which will allow us to add some e-commerce functionality into our pages. To begin, I'm going to add a heading into our page, which is going to be a level 2 heading. We click on this, make sure the H2 is selected. Then we can simply add the text which we want as our page heading. Since this is a festival, I'm going to say a full weekend of live music and entertainment. All we need to do is click off this and now our heading is in place. Since this is a festival and it's based over the weekend, the next block I'm going to create is going to be a two column layout. The left column is going to be for the Saturday, and the right column is going to be for the events which is happening on the Sunday. Go back to our plus icon, and inside here, if we scroll down to the design section, we can click on "Columns" We're going to go for a 50/50 two column layout. First of all, the left column is going to be for the Saturday. I'm going to nest a new block inside which is going to be a heading. This time we'll make this our level 3 heading so it's a little bit smaller, and this is for our Saturday. We can also format this section too. I'm going to align the text into the center. I'm going to also go to the color settings and adjust this too. I'm going to go for the green color for this section. Then with this selected, we can click on the plus icon or just below. This will add a new block directly below our level 3 heading. This is going to be a list which is going to list out all of the events or all of the information about this Saturday. We're going to say eight live bands. Then if we hit "Enter" we can keep going with our list. We'll say 20 singers, two DJ's, eight food and drink stalls, four stages and three arenas. Then finally, free overnight camping with tickets. Once we're done, we can just come out of this, and let's remove the last bullet point. Then this is the Saturday section all complete. Now over on the right, we can create the Sunday section, beginning again with a level 3 heading, which is going to have the text of Sunday over this, and we're going to then align this into the center. Then match the color from the left. Then if we click on the plus icon, we can then add our list just below. This Sunday is going to have 10 live bands, 18 singers, three DJs, eight food and drinks stalls, same four stages, and three arenas. Finally the closing party. At any point we can click on "Update" and we can checkout how this is looking. We go and visit our front page. Go down. We see our heading and also the two lists on the left and right. You maybe also want to center this level 2 heading, so let's go up to this. If we hover over, we can align this text into the center. Update this. Next we're going to introduce a media and text block. If we click on the plus icon, we can actually do a search for this or say Media and Text. Then on the left-hand side we can add an image or a video. If we go over to the Media Library, we can select any of these pre-uploaded images. I want to select the image of the guitar, and then say early bird tickets now available. Between each one of these blocks, I'm also going to add a separator. If we click on the plus icon, we can use the search for a separator. Then we can click on the up icon to rearrange this and place this above our media and text. We'll do the same just below, we'll also add a separator. This time we'll keep this below our section. Even though this is a media and a text section we're not just restricted to adding text into this section. If we hit "Enter" we can then click on the plus icon, and we can also add a button inside here. This button is going to allow us to link to the tickets which we're currently offering, so we'll say by now. To give this some styling, I'm also going to use the same green color that we used before. Let's update this and see how this is looking on the front-end. The next thing we're going to move down to is an image gallery from last year's event. At the next section we're going to add a level 2 heading, which is going to have the text of last year's event. We can also place this into the center. Then just below this click on the plus icon and we can add an image gallery. Again, we can upload fresh images or we can use the Media Library to reuse the existing images. Let's select any four of these, and we can select multiple images at the same time. Click on "Create a new gallery" and insert. Clicking on any of these images will allow us to click on the left and right buttons so we can rearrange the order of these images. After this, we'll add our separator, keep it consistent. The last section is going to be for the tickets information. Let's give this a heading of ticket info. We'll also align this into the center. The final block which we're going to use at the very bottom is going to be for a three column layout. I'll select the columns. Inside here we can go for three equal columns. This is going to be laid out pretty much like a table for all of our ticket prices. We're going to have a pre-sale section, an early bird section, and then the standard ticket rates. We could also add this table with a table block which is available. But I'm going to create my own using three columns, though we don't have the borders around each section. In the same way as we did with the two column section just above, inside of each one of our columns, we can add new blocks. These are just going to be text sections. Click on the "Paragraph" for each one of these pieces of text. The first one is pre-sale. Since this is a header, we'll make this bold. Make sure it's all selected, and then click on "Bold" Also we'll put this into the center. It can be a little bit tricky to click on the plus icon on the correct point. If we just come off this, the next plus icon we'll create this section below this whole three-column layout. Instead with our text selected, if we hit "Enter" we then have the option to add a new line of text. We'll say all gone. Enter this. Since this is a sold out section, we'll change the text color to be red. Click inside of our text section and then hit "Enter" The next one is going to be for the price. Since this is a sold out section we'll highlight our text. Then we'll add a strikethrough to show this is being sold out. Place this into the center. Our first column is now done. Into the middle section this is going to be for the early bird section. Place this into the center and also make this bold. Hit "Enter" This is going to be on sale now. This is the active section, so instead of having this as red, we're going to highlight this as the green color. Once again hit "Enter" and we can add a price into this for 35. After the early bird section, the final one is going to be for the standard rate. Select all, I'll make this bold, place into the center. The second line is going to be after 20th of August. Place into the center. Then finally the price for the standard section of 49. Place this into the center, and our section is now done. Update this. There's our image gallery and our ticket information down at the bottom. 15. Music Festival Project: Widgets: The theme which I have chosen, along with many others, supports add-in widgets. A widget is a small feature or a small piece of content which we can place into our theme. Now, we can't just go ahead and place these widgets into any area which we would like. These widget areas where we can drop these into has been preset by the themes offer. Let's take a look at how we can work with widgets with our current theme. If we go back over to our homepage and into the edit section, right down at the very bottom below all of our blocks with the under the layout section, we have these footer widgets. The author of this theme has allowed us to assess how many areas we want to customize inside the footer. The default value is free, meaning the footer is split into three sections where we can add our content blocks. Also, remember from just above this, we have this sidebar section, where we can lay out our content alongside a sidebar. Well, both the sidebars section and also the footer section and both exact widget. To access our widgets, we go back to the main dashboard and then into the appearance section where we have a dedicated widgets menu. This page has been split into two sections, where on the left we have the available widgets which we can add to our project such as calendars, menus, search boxes, and also things related to our blog, so just comments and recent posts. Then on the right, we have all of the available theme areas where we can add these widgets too, all these sections can be customized, and I'm now going to add some widgets into the footer. Footer Widget 1 is the first position inside of our footer. This is going to be placed on the left-hand side. This first widget is going to be a simple text blocks so you can drag over the text widgets, the title of Go VIP, and then some text in the block below of upgrade to VIP, and enjoy your weekend even more. The text editor is pretty simple, I'm going to add a bulleted list just below. On the first line is going to be exclusive VIP only bars, the next is going to be for exclusive toilet facilities, and the final one is going to be the camping area close to main main stages. Now, we're going to go over to the footer area 2. This will be the middle section of our free. Inside here, we're going to create a link to our latest blog posts. To do this, we have a recent post widget which we can drag over. If we wanted to, we could also add a multiple widgets into any one of these sections. We're not restricted to just one. The title of keep up to date with our blog, and then we can set how many of the recent posts we want to show. Our site, currently, has the single blog post which was created when we installed WordPress. Well, over though we can restrict this to be five and we can also display the post date one too like this and save our widget. The third one is going to be a audio clip from last year's events. To do this, I have a audio clip just saved on my desktop. Now I've not included this audio file with the cost, since this was a licensed piece of audio. But you can use an audio clip of your own or search online and then include this if you want to. This is going to go into Footer Widget 3. Drag over the audio section, add a title of, hear a sample from last year's events.' We can then access the media library where we can drag over our audio clip at this and then save our widget. Let us go now and check out our footer area on the front end. Go down to the bottom and here is our free sections which we just recreated. We have our text widgets, have the blog section, and we can click on any of these links. We only have this one sample hello world blog post. But remember this will show a maximum of five. Then in the third section of our footer, we have this audio clip, which is a fully working audio player. We can play, we can pause, we can skip through different parts of our track, and we can also control the audio volume too. This is now our first project now completed. We have a nice project in a very short time. This webpage is also responsive too by default. If we shrink this down to a smaller size, it will adjust the layout and also the scaling to suit this device. The next project we're going to go a little deeper into WordPress, where we're going to build our own personal blog and we'll also learn about new things such as now menus, users, comments, and so much more. 16. What we will be building: For this section, we're going to be building a brand new project. As you can see, this is a web development blog, and this will teach us some different techniques. We use some different options from the previous sections. We're going to be using a completely different theme. We'll be making use of lots of different widgets, we'll be adding a sliding carousel, just like we see here, and this will link to different pages. These pages are also available from different sections below. We have some widget areas. We're going to be constructing this page using some template which should be provided with this theme. We have some featured areas which will focus on certain sections of our site, and these will all link to different pages. We have some banners, we have some testimonials, we have some case studies, we have a focus area on a particular section. Then we've got a footer down at the very bottom. This footer will also link to all pages, we have a calendar which will link to previous blog posts, we'll integrate social media icons, and also link to recent comments too. The social media icons will also be placed in different locations. We can see them hovering over the top right of our site, and these are fully functional. We'll look at how to move our blog posts on to different pages, we'll look at how to change the layout and style in, and make heavy use of the customizer to change the look and feel of our site. For any one of these blog posts, we'll also be able to click through to the full version where we'll also see a sidebar over on the right, and we can also leave comments for each user. As well as this, we're going to have different pages such as the About Us, which we can click on and be taken through to this page. We'll also have a Contact Us page too. This is a fully functional Contact Us form, and we'll also take a look at how to customize this and also add and remove different fields. This project is heavily based around adding and updating blog posts, how to include media to make our post look really good. We'll also take a focus on how we can work with different users, different permission levels, and also what kind of access each user has to our site. We'll work with navigation menus, the customizer page templates, adding a slider, working with plugins, and so much more. By the end of this project, you'll have a really good idea of how to customize your site even when using a pre-existing theme. To round things off, we'll also take a look at how we can improve our site search engine optimization, and also how to perform regular backups, make sure we don't lose all of our valuable data. I hope you are excited about this project, and we'll begin in the next video by setting up this project. 17. WordPress Blog: Project Setup: Let's get going with our next project which is going to be a WordPress blog. Now, a blog was traditionally what WordPress was well known for in the early days, though it has grown and expanded to be able to build any type of website which you want to create. To get started, I'm going to begin with local to create the sites. Below we'd just like in the set of videos for the last project, it can also choose [inaudible] if you prefer to. Once Local is open, if you do already have a existing website open, you may need to click on the "Stop Site" button in the top corner, although I don't have any projects currently running, though we can click on the green plus icon to begin with a new project. As ever, let's give this a site name, and let's call my new webdev-blog. We don't need any of these advanced options, so we can continue on with the preferred setup 2. Next the login details for the admin. First of all, the username. We want to go for blog admin, a password, and I hope yours is stronger than mine, and also a email address too. We can add the sites and just give us a few moments to setup. Just like with the last project, if you're using local, you may also need to add in the administrative password if you're using a Mac. Okay, good. Mine is all now setup. I'm going to log into the dashboard with the details which you just provided. It was blog-admin and also a password too. We all signed in and we can open up the front-end of our sites. I'm going to see what WordPress looks like with the default theme. Back over to the dashboard, the only change we're going to making in this video is to introduce our new theme. To do this, we go down to the appearance on into the theme section, and we can add a new theme with this button. Now, just like with any project inside of this course, you can choose any theme which you like for your project. However though, if you are a beginner, I would recommend you stick with the same themes which I am using. You saw things like the same options that are available so you don't get too confused. The one I'm going to use is going to be spacious. I'll type this in and we can search for this. This is the theme just here. You can preview if you would like to see how this would look, but I'm going to click on the "Install" button and then activate this once ready. With this now as our active theme, we can go back over to the front end. If we reload the page, you will now see a different setup for all projects. It has the exact same content. We have the Hello world example blogpost, we have some sample comments, and also a sample page about the top 2, but this is just being covered up with a completely different theme. It's this theme which we are going to work with in the rest of this project. Starting in the next video, we're going to pull in some sample data so we can see exactly how this theme would look with a lot more content. 18. WordPress Blog: Importing Sample Data: Welcome back. Now we have our new theme installed for our project. We're now going to see what it looks like with some content. At the moment, we just have some sample data, the blogpost, the comment, and also the sample page too. One way of adding content is to write lots of different blogposts, to add lots of different pages, and generally create lots of content. As we progress through this project, we will be adding a lot of our own content. But for now we are going to put in at some sample data, to check out this theme with more content. The way to do this is to head over to the WordPress website and download the Theme Unit Test data. This is the same test data which is used by the WordPress team to review any newly uploaded themes. The whole point of this is to make sure you have all angles covered. For example, if we create a new theme of our own and we want to upload it to WordPress.org, if we've not fully tested it ourselves with lots of data, we may find that the layout looks a little bit strange when we have a certain type of image, a certain number of blogposts. By populating this with all this data, we can be sure our theme looks good for all situations. But in our case, we're just going to be downloading this to give us a head start with our new project. The way to install this is to go down to the Setup section and we can download a copy from this link. I'm going to right-click this and then Save Link as and then save this to the desktop. To import this, we go back over to the WordPress dashboard and then go down to the tool section, and inside here we have this importer. There is already various importers or setup to just if we want to import data from a blogger or a RSS feed. But the one we need is this WordPress importer down at the bottom pulling our data from an export file. Click on Install now, set this up. Then run our importer, select our file and mine is saved onto the desktop, and this is the XML file just here. Open this up, click on Upload. Just before all of this information is downloaded, we can also assign various authors to these new blogposts and these pages which are being created. We could have create a new username, or we can select any one which you already have set up, and in our case, we only have this blog admin. We can assign this if we want to. However, though, I'm just going to leave this empty, or I'm going to check the import attachments section. This will download things which such as the images, which we're going to need for our project. Click on Submit and give this some few moments to download. Great. Once it has finished, we can on go to the front end of our site, hit Refresh. All of this sample data has now been imported. We can see all of our pages at the very top, we also have some drop-down menus. We have all of our blogposts. If we scroll down, we can see some of the media which has been downloaded, we have various images. These have various dates, they have various offers, also some of these will have comments and also various tags and categories. You see the comments over on the right, we can click into these. This now leaves us with a some of blogpost data to work with in our project. If you did have any issues at all downloading this data, don't worry, this is just some sample data to work with. Next we're going to move on to the next video where we're going to see how we can add our own blogposts and also update any existing ones too. 19. WordPress Blog: Adding And Updating Posts: In the previous video, we added lots of sample content, and in particular, we now see lots of blog posts on our homepage. In this video, we're going to add our own blog post and also take a look at how we can edit existing ones too. As ever, the way to do this is to head over to the dashboard. Then we go to this Posts section just here. The layout today is similar to the pages, one which we looked at in the last video. We can go over this and we click on all of our posts. We can directly add a new one and we can also skip to any categories and tags too. Let's go into the All Posts and we can see all of the ones which have been created with our sample data. We also have this Hello world! one which we set up when we first setup our Wordpress installation. We can see the author of any of these, this Theme Buster one and the Theme Reviewer is sample data. With any blog post which we add ourselves, we'll have our current logged in author. We can see which categories this has been assigned to and also any tags which have been added to. After this, we can see the comments which are being created. This particular one has a single comment which has been assigned to this blog post. If you wanted to, we could click on this. You will be taken directly to these comments, where we can approve this, we can reply, we can edit it, and we can also remove any inappropriate comments too. Click on the back button to be taken back to All Posts. The last section is the date which this was published. When we create a new blog post, we can either publish this immediately or we can schedule these for a future time. If you hover over any of these blog posts, we can also edit them. We can also remove them. For now, let's click on the "Add New" button at the top and create our own blog post. When adding a new blog post, this is also going to take advantage of the block-based Gutenberg editor, just like we looked at when we created our pages in the previous project. At the top, we add a blog post title. I just want to go for My First Post. Then below this, we can add various blocks of contents such as images, text, and anything else, which we've seen in the previous videos. I'm just going to add some sample text and the way I'm going to do this is by doing a search for lorem ipsum. This will take us to lipsum.com, which is just a simple site for generating some sample data. What we need to do is to scroll down and we can generate a certain number of paragraphs of words, five paragraphs is fine, click on "Generate". Then this will give us our five paragraphs, which we can now copy and paste into our project, paste this in. We now have five paragraphs of data. We can hover over any of these sections and also see a menu pop-up. We can do things like rearranging the order. We can make the text bold, italic. We can create links by selecting any parts of this text and then a URL which you want to link to. We can also set things like the alignment. We also have various options with this drop-down over on the right. Also with this selected text, we have five options over in the sidebar. We can change the default font size. We can change the color settings. If you want the very first letter to be larger, we can also select this too, and if we click on the Post button at the very top, this will now give you some general settings for our blog post. First of all, we have the visibility and we can select this to be public so anybody can read our post. We can make this only available to site admins and editors. This is all based on the particular roles which we give the users. We'll have a dedicated video on this very soon. If we have some sensitive information, we can also password protect our blog post too. We then have the date, we can publish this immediately, or we can schedule this for any future date. Then a lot of these similar options which we have seen in the previous videos, where we created at different pages. We have the permalink, which is a direct link to this post. We can assign the various categories or tags. We can either select any existing categories or add a new one too. Same for the tags. We have a featured image which you can also add. This is a image which will appear next to our blog post, any blog page list in. The excerpt, this is a preview or a shortened version of our blog post. This is what we see if we go to the front end of our site. This is all of the shortened versions which you see here. Since we don't want to show the full blog post on this listing because this page will be really, really long. If we don't add any excerpt into here, WordPress will automatically take the first sections of our blog post. After this, we can also set if discussions or comments are allowed for this post. This particular theme also allows us to select a different layout. We can add sidebars to the left and right. We can remove the sidebar and have a full-size content. I'm just going to leave this as the default. Up to the top, let's publish this so we can see this on our site. Confirm. Over to the front end and refresh the browser. You see My First Post is now appearing. Since this one is the most recent blog post, you may expect this to appear right at the very top, and this will often be the case, but however, when importing all the sample data, one of these posts has been set to be sticky. If we click into this, we then take into the full version of our post and go to "Edit Post". Then over in the settings on the right, we can see that this has been stuck to the top of the page. We can uncheck this, update our post, and back over to our site. This now leads our first blog post right at the very top. Into here we can see our custom editor and we can see the different colors. We can see the larger first letter and also we can do pretty much anything we wanted to with all of our content blocks. Also, if our post is becoming really long, we can also insert a page break. Click on the Plus icon. Search for the page break. This will now split up our content into two pages. We can add as many of these page breaks as we would like. I'm just going to keep that one for now. Update this post. Now if we refresh our site, we see the bottom half of our content has now been removed. We can also switch between our pages at the bottom. This is how we can add new blog post and also edit existing posts. If you want to, you can go ahead and add as many different posts as you would like or even update any of the existing ones too. One way of really bringing our blog post to life is by adding different media such as images. This is what we're now going to move onto in the upcoming videos. 20. 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. 21. WordPress Blog: Including Media: So far we've created our own blog post with some simple text and we can really bring our blog post to life by adding the various pieces of media such as images, video clips, and also audio too. Now, to do this, we're going to first begin by adding a featured image. We've already looked at adding featured images in the first project, where we added them to our pages. With this project when adding them to our blog post, in this theme, the featured image will display alongside our blog post except just inside of this blog post listing. If we scroll down to our sample blog posts, we can see the featured image just here. Let's add these if we go into our blog post or can also directly accesses from our dashboard too, we can also go into the edit post link. Over on the right, we have the featured image section from the menu where we can set this for our blog post. You can either select your own image to upload or directly access the Media Library. All of these images have been provided when we downloaded the sample data. So we have some images to work with for this project. Select any of these and conveniently we also have things like the alt text already filled in for us. We can just set this as our image, Update, then back over to our project, visit site. We now have an image for our blog post. Now, this is a great way of adding an image when we display a list of all our blog posts like this. But what about if we click on this to see the full blog post? We want to also sometimes add images in between all this blog post content too. Now, to do this, I'm actually going to go back over to the Dashboard View, and let's just refresh this so we have the updated version. Images can also be added as a block. We can hover over the area where we want to add a new block. Click on "Add". This image block is currently at the very top or we can also search. Click on this. Then we can also upload a new image or select one from the Media Library. Just like before, we've taken it to all of our images which we currently have. We can select any of these, update our post, and also to the front end of our site, we can refresh. We now see our image has been inserted. As with most of these content blocks, we can also click on these or hover over and we can see eight options menu. We have lots of different options such as cropping the image, we can link to different URLs. We can also rearrange our content to be above or below different blocks and also over on the right, we have some options too. We can play around with the style of our image by rounding the corners, we can change the alt texts, we can change the size, and as well as I adding a single image like this. We can also upload multiple images in the form of a gallery. A gallery is also a content block too and we just need to select a location where we want this, do a search for the gallery. Then from here, we have the familiar options of uploading new images or also accessing the Media Library. Once we stick with the Media Library, we can select multiple images to display inside this gallery and choose any of these. We want to select these five. Click on "Create." Just before we insert these into our gallery, we can also drag and drop these images to rearrange. Once we're happy, insert these. These gallery images can also be linked to URLs too, and we can also change the number of columns which you want. This is really flexible to use. Update this and over to the website and refresh our blog post. First, we see our image has the rounded corners. If we go to page 2, we now have a nice image gallery. As well as images, we can also insert different types of media, such as video clips. This is inserted in pretty much the same way if we go back to our edit screen. Then if we find any location where we want to add any block, click on "Add." Search for the video. If you already have a video clip saved on your computer, you can, of course, use this too. I'm going to go to pixabay.com. If you click on the dropdown, we can search for videos. Hit "Enter." It will give us a list of all the videos we can select from this site. This one looks fine. Click on this "Downloads." I'm just going to go for the smallest version for now. Then once this is finished, remember this one isn't currently inserted in the Media Library, so we need to go to Upload, into the Downloads. Select this clip, and uploading this will automatically place this into the Media Library 2. Over on the right, we have various video options, such as we can loop this video, we can mute it when it's initially loaded, we can also add the control such as play and pause, and also play too. A poster image, this is a still image which will display when the video is not playing. This is a really handy feature to have too. Again, you can also rearrange these blocks and change some of the options. Once you are happy, click on "Update." We can check if this is working by refreshing our blog post. We have the controls at the bottom with the time. Click on "Play" and this all works fine. Next, you may also want to add audio clip into your blog post and this place this down at the very bottom. Click on the "Insert Block." As you might expect, this is called the audio block. To grab an audio clip, I'm going to go over to bensound.com. This will give some free audio samples which you can download. Or you can also use your own if you prefer to. Click on the Download button for any of these and we can download a free version to use with attribution. Attribution means we need to credit benson.com with this audio clip. To do this, we just need to copy this example at the bottom. Download this. Just as we did with the video clip, back over to the post, select this from our downloads. This audio clip is now inserted. We have the Play button and we can also change the audio settings on the right too. These defaults are fine for me. I'm just going to click below this audio clip and then insert the attribution. Update this blog post, refresh the browser and we can test if this is working. You maybe you can't hear this from your end, but this is all working fine. If we take a look through all of the different types of blocks it also varies over types of blocks in media which you can insert into these blog posts too. The final thing I'm going to show you is how to insert some media directly from a URL. For this, let's place in add image block, and then we can use the third option which is insert from URL. But this, of course, we need a media URL to link to. A good place to grab on these is the Wikimedia Commons website, which is available from Commons.Wikimedia.org. You can search through the huge library of free images to select. All I'm going to select this image of the day. Click on this and then we're taken to the full-size version where we can right-click. We could save this image and add this to the Media Library. But instead, I'm going to copy the image address and then paste this as our URL. Hit "Enter." There's a preview of our image. Update, reload. This is just a different way of adding images rather than using the Medial Library. Our images also now displayed at the bottom. This is just an alternative way of adding images rather than accessing the Media Library. 22. WordPress Blog: Users, Permissions & Managing Comments: Now it's time to think about who is actually going to be using our blog and also how much access each user actually has. When inside of the dashboard view just like this, you may have already noticed we have this "Users" option over on the left. If I hover over this, we have the option to go into all users, we can directly add a new one, or we can go into our current profile. Our current profile has some options, such as changing the color scheme, we can also update our personal information, our contact information, our profile picture, and also reset the password too. But this video is not about those, this about adding new users, and also checking out the different permissions they have too. Let's head over to the All users section. Up at the top we see our blog admin, which is the one and only user which we have setup. We can also add a new name if we wanted to from the edit screen. We can see our e-mail. We also have this role of administrator. An administrator is a user which has all of the required permissions to do or to change anything they want to on this site. This is why we have all of these options on the left. We can delete, post, we can add new pages, we can approve comments, and also change the look and feel of this site. When we only have a single site, just like we do here, this is the top level role. We've created two blog posts when in fact we've only actually created one. But when we first setup WordPress, the "Hello world" example was assigned to our user too. This one, we added the sample data. Also included with this data was two additional users. The difference between these two and ourselves is this role of subscriber. We'll take a look at this in more detail in just a moment. Since we're currently logged in as the administrator, we also have the power to be able to select any of these additional users. We can also go into the edit screen and change any of the details. Also, very importantly, we can change the current role too. If we wanted to have an additional administrator we could, and also generally upgrade or downgrade any users role. Access all users if we wanted to, we could also even remove users. We do this in a similar way to when we dealt with the pages and blog posts. All we need to do is to hover over any of these users and select the "Delete" button or we can also apply these in bulk too by selecting multiple ones, and then you see it drop down from above. As we've just seen with the drop down in the edit screen, alongside the administrator and subscriber, we do have various other roles too. To find out more about these settings, we can go over to our search engine and do a search for WordPress roles. My top search is from the WordPress.org site and it takes us directly into the roles and capabilities. Click on this, scroll down, and then we'll see a summary of each one of these roles. I did mention before, when we have a single website like we do, that the administrator is the top level role. As we can see, this is somebody who has access to all of the administrative features within this one single site. However, though, as we'll find out later on in this course, we can also create a WordPress network or a WordPress multi-site installation. This type of WordPress setup also generates a new type of role called the super admin. A super admin is somebody who is responsible for all of the administration features on the network of sites. We don't need to worry about this super admin just yet, all we need to focus on is the five roles just below. Just below the administrator, we also have the editor. This editor also has some responsibility too. They can also publish and also manage their own blog posts, and also they post for other users too. After this, we have the author. This is somebody who can publish and manage only their own post and not any post from any other users. After this, we have a contributor who is somebody who can write their own posts, but they cannot directly publish them without a confirmation from the administrator. Then finally, the lowest role is the subscriber. This is just somebody who can sign up to our sites and also manage their own profile too. They can't create any content, they can't manage any other people's content. All they can effectively do is sign up and change their user's details. We can also see here that our administrator account has been automatically created when we first setup WordPress. Now, with this in mind, we can manually add a new user to our site. Head over to the dashboard and we have this "Add New" button at the top, which we can also access from the sidebar too. I click on this and I'm going to add a sample test user and an e-mail. Just test for now, a terrible password. Of test 2, will confirm this is fine because we're just creating a sample user. Then at the bottom we can also change the role too, which we want to leave as a subscriber, which was the bottom level of roles. Confirm this. A new user has been created. We can also edit any of these details if we want. But I'm going to now log out of the administrator profile by hovering over this section in the corner. Click on "Logout" and then we can login as our test user, which was [email protected], a super-strong password. Log in, and now we're taken to our test user's profile. We have seen before from the roles and capabilities that a subscriber can only manage their own profile. They don't have access to any of the other admin features, and this is why we don't see any of the admin features in the sidebar. We can't create any new posts or pages or generally have any input into the site. Also any content which is created needs to also be approved by the administrator too. We can see this if we go over to our site and then refresh. We see our user has been updated to our test. Head over to the homepage and select any one of these blog posts. Remember that comments were enabled for this post. I'm going to leave a comment down at the bottom of "Hello", then click on "Post". We have a message of "Your comment is awaiting moderation." Since we don't have approval to post any content onto this site, what we now need to do is to log back out of our own name. Logout and then log back in as our administrator, that was the blog admin. Once again, we have access to all of our admin features. Then over on the left we can see we have four comments awaiting approval, head into this section. We can see including our sample data we have 34 comments in total, 30 have been approved, and we have four which is pending. Click on this too, filter this down, and we have our test user's comments at the very top alongside the three comments from the sample data. We can either hover over these manually and approve. We can edit the content. We can either remove this if we don't want this to be published onto our site, or if we wanted to approve all of these comments at once, we're going to click on this checkbox. Into the "Bulk Actions" we can approve, apply this, and the four comments have now been approved. Over to our blog posts and refresh. The hello comments has now been approved and is visible just below our blog post. By default, when we sign up our users, we seen that this has the subscriber role. We can also change this inside of our settings if we wanted to, into the "Settings" option and then into "General". One of the options inside here is the "New Users Default Role"; currently, this is set to subscriber. What if we had a certain use case for a higher level of role? We could also set this to be a different default too. Also as an administrator we also have lots more options to control the settings of the discussion or the comments. Still inside the settings we have these discussions link, and this really allows us to fine tune all these settings related to our comments. We can have things, such as e-mail confirmations when a new comment is posted. We can check if the author must fill out their name and e-mail. We can check if they need to be registered and logged in to comment. We can close comments after a certain amount of days, and also various other options too, such as blacklisting certain words which may be included in a comment. There we go. This is how we can manage different users on our WordPress website, how we can change permissions of a user, and how we can safely control the comments being posted onto our blog. 23. WordPress Blog: Adding Pages: Now, we've been mostly focusing on our blog and also our blog posts, but in this video, we're going to look at how we can add some custom pages, such as an About Us and also a Contact Us page too. Pages which were added with the sample content earlier have automatically been added to our menu at the top. We don't need any of these pages for our project, so we're going to remove these and then create our own, over to the Dashboard view and into the pages select "All." From here, we can hover over and delete any of these manually or we can click on the top checkbox and then delete these with the bulk actions, move to trash, and apply this to all of these. We also have a second Page. I will remove these ones too, Add New. This first page will be the About Us, so adding the page title. Then we can go ahead and add some content just below. You can create any About Us information which you want to, but I'm going to go to Lorem Ipsum and then grab some sample content, place inside here. Search for "Lorem Ipsum," head over to lipsum.com. We can generate as many paragraphs as we would like. I'm going to stick with five. Copy all of this back over to a new page and then we can paste this into the block just below. Also, just like earlier, we can hover over any of the sections and we can edit them, we can change the colors, we can change all of the font settings. However, I'm just going to leave this as plain text for now. But this is one option of adding content per page, as well as adding all of these content blocks, if we go to the page section hover on the right, amongst all of the other options we have the Page Attributes where we can select a template. A template is something which is provided by the Themes Creator and it allows us to create different layouts and at different types of content to our WordPress pages. These templates are special files which are inserted in our theme, and we can use on either a single page just like this, so it only applies to one or single page, or we can have a more generic template which you want to apply to multiple pages. For example, we could have one template which is for a 404 page, then we could have a different multi-use templates, which is applied to all of the pages to give us a consistent look and feel. We will look at templates in more detail when we get to creating our own theme from scratch, which we'll do later on in the course. But for now let's just stick with this page content which you've added inside the blocks, publish our page, confirm. Now if we refresh, all of these sample pages have been removed and the About Us page has been automatically added to this menu. Click on this. There's all of the texts which we've added to our page. Of course, we are free to use as many blocks as we want. We can add media and all of the different types of blocks which we've seen in previous videos, as well as this content and also the templates, we click on this. We also have different layout options down at the bottom. We're currently using this default layout, which you can see is the text on the left and the sidebar over on the right. We can also change this, for example, if one of these sidebars replaced on the left, we can update this, refresh. We can also remove the sidebar and have the content be the full width of the page. This is really useful for changing the look and feel of our pages. I want to leave this as the default, which is the sidebar on the right. Remember, all of these options are available because of the specific theme which we have chosen. You may be thinking, "Well, how do we know exactly which options are available before downloading a theme?" Well, this is available when downloading a theme from wordpress.org and also some of the overall theme providers too. If we go into the theme section, let's take a look for our spacious theme. This is one here, so we can click on "More Info" and then we see this has 13 different widget areas; it has four different page layouts, different page templates, it's responsive, and all over with different layout and color options too. Now, although we've looked at these theme options in the past and also the tags which were available, hopefully now you seen inaction inside of a site. You should be now a lot more comfortable with Slack and a particular theme, based on these options. I go over to our slide. Now, I'm going to add the rest of the pages which we need, which is going to be the Contact Us page and also the Blog page. Make sure this is updated, and then we can click on the "WordPress Icon," we're taken back to all pages, "Add New." This one will be for the Contact Us. Just below this, I'm going to add a content block which is a list. Let's search for this and just a few lines of sample address data, Address Line 1. Copy this, hit "Enter" and we can add as many lines as want to inside here. It doesn't really matter for this demonstration. As with all of your blocks, we can select any of these lines. We can change this to be a ordered list with the numbers, but I'm going to keep this as the bulleted list, which is unordered. Just like with most of text blocks, we can format the text, we can change the color, and also change the links if we would like. Now, we could go ahead and publish this page if we wanted to, and this page will automatically be added to our menu alongside the About Us link. However, though I'm going to do this a little differently, what I would like for the Contact Us page is for this to only appear when we hover over the About Us link. So when we place the mouse over this, is will get a drop-down menu where we can select our contact page. Do this, instead of publishing this directly, we're going to go into the page settings and then down into the "Parent Page". We only have this About Us page, so we can select this. If we have multiple pages, we could also rearrange the order. But for now hit "Publish", "Confirm", refresh our blog. Then hover over the About Us link will reveal our new contact page. We can also select this and we'll be taken to our Contact Us page, which is nested inside of the About Us link. Now this is just some data which is going to display, but later on we're going to come back to this page and add a contact form. Just to round off this video back over to the Dashboard into the pages where we're going to add our third and final page for the blog. The blog page is going to be the home for our blog posts rather than the default homepage, which we currently have, if we click on our "Site Icon." At the moment, all of these blog posts are listed on this homepage, but later on we'll have a dedicated blog page where these would be placed inside. All we need to do is to publish this, refresh and now this empty page is now being also placed inside of the Nav bar. This is all the pages which we need for now. Next, we're going to take a look at Navigation Menus and how to add a custom menu to our site. 24. WordPress Blog: Adding Our Navigation Menu: As we've discovered in the previous video, each time we add a new page, it is automatically added to our menu and also, this menu is already been created for us. We haven't done anything to create it ourselves. This particular menu has been added when we created the sample data in the early videos. But of course, we don't want to rely on the sample menus. We want to know how to create our own. As with everything else in WordPress, we need to go over to the dashboard, and then into the main options. To create or manage our new menus, we need to go to appearance. This has a dedicated menu's link. At the top, we have a drop-down menu with all of the available menus which are being provided with the sample data. Currently we have all pages selected and at the moment we see we have some errors inside of this menu and these have all been changed to this pink color, so we know there is an error. Each one of these pink blocks is going to be a menu link. We have a blog page, we have the front page, we have the about the tests and these all are sub pages which are nested just below this page too. The reason why we see these errors is because we have removed all of the unused pages from our site. This is just WordPress's way of warning us that we no longer have access to any of these pages. We could go ahead and remove any one of these links or could also remove the full menu too. Same for any of these existing menus, we can select them. We can go to "Select." Then we can also remove any of these unused menus. But at the moment, I'm just going to go ahead and create our new menu with this link just here. This menu is going to replace our one at the very top. I'm going to give this a title of top navigation. Create our menu and then we can select some options from the settings just below. The first option is to automatically add new top-level pages to this menu. This means just like in the previous video, that each time when we create a new page, this will be automatically be added to our menu. This theme already comes with three different locations where we can place our menu. This is going to be the primary menu. Let's click on this. We could save this and check it out, but we don't have any pages to display in our theme just yet. What we need to do is to go to add menu items and then we can select what content we want to place in this menu. Under the Pages tab, I'm going to select all, add this to our menu, and now we have our three menu links. We can also choose various blog posts which you want to add. We can also create custom links to go to external websites. For this, we just add a URL which you want to link to, and then some texts which you want to display for our menu link. Finally, we also have categories where we can select different categories where we want to provide a direct link to. But for now, all three pages are fine so let's save this menu. It's all sized and refresh. There's our three links in place. We could leave this structured exactly how it is. Or if you want to have a sub-menu just like we've seen before where the contact is placed underneath the About Us link, we need to go back to our pages and then the child link, we need to click on, move this over to the right. Pop this in place and this is now classed as a sub item. If we want this again to be moved to the top level of our menu, we could either drag this back over, or go into our item and click on the Out from under About Us link. Save this, reload. I want to hover with drop down menu in place. Let's also go ahead and add one more menu, which is going to place down inside of the footer area. This will be placed alongside our text over on the right-hand side, into our menu's option. We could either create a new menu and place this into the footer area or instead, if we go to manage locations, we can reassign different menus to different locations. The footer menu, let's go for the preexisting social menu. Save our changes. Now if we refresh, we see our social media links are placed down at the bottom. If we want to rearrange the order of each one of these links, you just need to select the menu which you want to edit. For example, the social menu. Select this and then we can reorder each one of our links. Also, if we want to amend this in a more visual way, we can also go into the themes customizer, I select new customized link, and the customizer will give us a visual preview of all the changes which we made to our site. It has a menu section where we can access all the locations and all of the existing menus. For example, the social menu, we can click on this. We can also amend our links and these all change in real time. If we change one of the labels and then go down to the bottom, we can see this has been previewed inside the browser. This is how we can add menus, how we can delete menus, also how we can edit, and rearrange them and in the upcoming section we're going to get a lot more familiar with this customizer. I got for you lots of the available customizing options to make this theme more personal. 25. WordPress Blog: The Customizer In More Detail: In the previous videos, we've already had a brief look at the customizer, which is available from the Appearance tab inside the dashboard. The customizer is a way to make changes to our theme and see a live preview of these changes before saving them and making these apply to our project. We're now going to revisit the customizer and make some changes to the look and feel of our site. Over my desktop, I have a Images folder for this project and this is included with this course. You can download this yourself and use the same images as me. Or instead, if you prefer, you can choose your own and use these instead for the media library. We have these available. Let's go into the medial library now, and then we can drag over the full project folder, and drop this inside of here. You have various logos and images, you have some icons, and also a texture which we'll use soon. With this now in place, we can now go back to the appearance and then into the customize option. Some of these options will have dedicated videos coming up. We're not going to go through every option right now in this video, but we're going to start off at the very top inside of the header section and begin by adding a logo. We can do this inside of the Header option, and then into the Site Identity. From here we're going to add a logo which is going to appear next to our site title. You can choose any logo, of course. I'm going to use this one which is included with the course like this. We can also crop this if we prefer. I'm going to make this the full size. You can crop. At the moment, we don't see any changes appearing inside of our preview. This is because if we scroll down, we also have a third option, whether we want to show the logo, or the texts, and we can actually select both, so these appear side-by-side. Beside title, this is automatically being set when we created a WordPress site early on, and you can change this if you like to. I'm going to leave this as it is, but I am going to change the tag line just below. This is going to be all things web development. We can see as we're typing, this is automatically updated inside the preview, and the last thing I'm going to update in the section is going to be the site icon. This is the small image which appears inside of the browser's tab. We can select an icon, I'm going to go for this one, below this. We see this is automatically being applied to our top. If you'd like to, you can also change the header text color too, but I'm happy with the color, which is supplied as default. A couple of other things to note too here is we also have some options to see how the site looks in different screen sizes. Down at the bottom, we are currently on the desktop view, we can also preview the look and feel of this in a tablet. We can click on the middle button to do this, and also the smaller screen mobile view too. This gives us a good chance to preview how things would look if we maybe upload an image which is too big, awesome text which doesn't quite fit, but generally a lot of these themes which you uploaded to the Theme Store, are generally fully responsive. We can't publish our changes once we're happy, and these will also be reflected inside of our site. Back into the customizer, we do have lots of different options inside here. We do see some shortcuts over on the right. We can click on the pencil icon next to any of these editable areas, and then we taken straight to the customizer section, where we can make our changes. Back to the main menu at the very top, we have this global option where we can apply some settings for different colors, our typography, and also our layouts and background too. If you wanted to, you could change all of the colors. We have a primary color set by the themes offer, and we can change this so it applies to all of the green areas of our sites. You can also change this to be a dark mode too. If you prefer this for your blog, the typography option will give us a chance to change the standard fonts which we're going to use for our project, and we can change this to be either some of these supplied standard fonts, or one of the selected ones from Google too. What's changed both the body and the heading tags to be Roboto, publish this. The background color, we can select any different background color which applies to outside of our main content area. Currently this is a light gray color bars you can see. We can move the color around to any one of these colors and change the feel of our site. If we wanted to, we could also upload a background image or a texture to replace this standard color. Layout, this will give us a chance to set the width of the content, which is this dark, gray color. We can either have a box just like we see here with a certain width, or we could have it to be the wider layout and then we're going to boxy content into the center. Alongside when we amend our pages to from this customizer, we can also change the positioning of the sidebar from here if want to have a play around and see how this feels with different layout options. This is the default layout to begin, which will apply to all of the pages, and then we have a layout which is more specific to pages and also to blog post too. Maybe on this blog post listing, we don't want any sidebar at all, so we can select this view, and then when we click on to any of these blog posts, to be taken into the full post view. We can then reintroduce a sidebar onto any side which we want to. Again, this can also be different for all pages, so if we go into the "About us" page, we'll still see a sidebar inside here, and we can also remove this too. I'm going to publish these changes, and then click on the site logo to be taken back to our homepage. If I could just make this a little bit narrower. Yeah, that looks better, publish this. Back up to the top. We will have dedicated videos for a lot of these options, but just one last thing I would like to show you is the additional CSS download button. If you do know how to use CSS, this is a place where you can add it. But don't worry if you don't know any of this code, is just going to be an example of what we can do. For example, if we want to target any of the text, which is an EP elements, we could apply our custom CSS just like this, given as full control over all of the styling and layout for our theme. Don't worry if you don't know any of this, this is just something extra which you can maybe use in the future. This is the customizer and also one thing to remember when using the dashboard, some of the options inside here will also link us back to the customizer too. For example, if you go to the appearance and then down to the header link, this will take us to the header section of the customizer. I'm going to leave the site as it is for now and you can make some additional changes if you prefer, using the customizer without the need to apply any coding. We'll leave this video there because we'll be covering the rest of the options as we move on through this section. 26. WordPress Blog: Adding Header Images: We're going to now do a little bit more customization with our project header. Also, add this header image which you can see inside of the spacious theme preview. The header image is this large background image with this book and this phone, which appears at the top of our website. It's ideal for branding and gives our website a unique look and feel. This can also be done over in the dashboard inside of the customizer. Back to the appearance and into the customizer section where we're going to jump in to the header. To change these images we need to go into the header media section where we can upload a new video or a new header image. We could play a video in the background if we wanted to, or link to a YouTube URL. Instead, I'm going to go for the header image. Click on "Add New Image" where we can upload a new one or jump into the Media Library. The image I'm going to use is this one just here. Select this and we can also crop the size if we'd like or click on "Crop". This one will be uploaded at the top of our project. We can also add multiple images too. There is a second one provided with this course. This is computer image just here. Again, select and crop. From the customizer, we can see this is the current header and we also have some previously uploaded ones too. If we wanted to, we could stick with one single image, or instead, we can click on "Randomized uploaded headers". Then a random one displays each time the page has loaded. By default, this is appearing above our header section. We can move this just below by clicking on "Position below" inside of this section at the bottom. If we now publish these changes and go over to our site, refresh. If we keep refreshing the browser we see a random image is selected each time the page loads up. We will also come back to this header image later on in the project where we are going to replace this with a carousel. Now, this is fine. Let's go back over to the customizer. If we go back one level into the header section, we can also click into the primary menu too. From here, we're going to enable the search icon in the header. This will give us a search box which we can search for any blog post, or page on our sites. For example, we've included some Lorem Ipsum. If we search for this, we'll see this will then return back our blog post with the text of Lorem. We can also change this to be the new responsive menu too. For this, we drop down the size of the browser. This is what the regular drop-down menu looks like. If we wanted to, we could also switch the new responsive menu, which is appearing over the top right, just like this. The choice of menu is completely up to you, but I want to leave this as unchecked and then publish our changes. Now we've got these really wide images, I'm going to go back to the global settings and into the layout. Where I'm going to is switch this back to the box layout. This will just stop the image from becoming a lot wider than the rest of the content. Publish our changes, refresh the browser. Our changes have now been updated. In the next video, we'll take a look at how to add a background image. 27. WordPress Blog: Adding a Background Image: Earlier when looking at the customizer, we added a different color to our background. This is the color which surrounds all of these darker content in the middle. We did this over in the customizer, the dashboard, into the appearance and customize. On the global options, we had a background option just here, and this is where we set this background color. Another thing we mentioned was we could also change the background image. We can select any image which we would like to place in the background or even a background texture. Supplied with the images for this of course is a gray texture color, which I'm going to apply to this background. We can see straight away that this texture has applied all around our project. We have various presets where we can repeat the image, we can fill the screen, but we can currently see our image is already filling the screen because this is repeated. Even though the supplied texture is just a small square, if we uncheck the Repeat Background Image, we can see we just have this small square up in the corner. This is placed in the corner because of the image position. I never had a different image which you wanted to place in any particular corner or even the center. We could change the location with these buttons. The size of the image can also be updated too. Another feature we have down at the bottom is the ability to scroll the background image with the page. What this means is if this is checked, and if we scroll down, we can see the background image is pushed up with the rest of the content. If this, however, is unchecked just like this, the background-position stays in a fixed location. I will not scroll with the rest of the content. I prefer it the other way. I'm going to click on the Scroll with Page and also repeat this so it covers the full background image. Many of these options are not really useful when using a small texture just like this. Just repeating this is usually fine for our purposes. However, though, if you are using a different image, a lot of these options will be much more useful. Click on "Publish" to save our changes, refresh the browser, and the changes have now taken effect. 28. WordPress Blog: Plugins & Social Media Integration: Welcome back to this video on plugins. Plugins are a really important part of WordPress and they allow us to extend the WordPress core. Now by that, we mean that we have a WordPress downloads when we initially setup any of our WordPress projects. Then we can extend it to provide lots more different features and a different set of functions. So we could include things such as contact forms. We could add tools for SEO. In this particular video, we'll take a look adding a plugin to add some social media icons from the wordpress.org homepage. We can go into the plugin section, just like we did early on with the themes. We can see currently we have over 50,000 available plug-ins to extend our WordPress site. We have things such as booking calendars, we have galleries, we have contact forms. We can add anti-spam protection, the ability to backup our site and if we didn't like the new Gutenberg editor, which is applied on version five and above, we can also revert back to the classic editor if we prefer. To add these plugins and to also see what plugins are available for our site, we can go back over to the dashboard, make sure that any changes are saved in the customizer. We have a dedicated plugin section. Click on this. Currently, we have the word pressing policy, which we used earlier. This was activated when we installed the sample data. Logins are really simple to add we just click on the add new button. Insulation is very similar to a theme. We can see all the featured and also the popular plug-ins and we can directly install these from the screen. Or as we've seen, there is so many differents plug-ins available we may also need to search for the desire to want to. In our case I'm going do a search for social, fill up all of the social media icons. The one I'm going to use is this one, which is by ultimately social. It's also really important to note that when installing any plug-ins, it's worth checking when there were last updated to make sure that these are regular maintained and also make sure these are also compatible with your current version of WordPress. Usually, the reviews is a good indication of whether you are installing a useful plugin or not. All we need to do is click on Install, which will download this plug-in and then once this is done, we can then activate this to use it in our site. Activate this plugin. Once we allow this plug-in we can then see from the sidebar, we now have a new icon inside the Dashboard. We can click on this. We take into our options, we'll need to run through the setup of our plugin. We're going to close this down and then run through some of the required settings. We have three different settings which we need to configure up at the top. The first one is which icon to want to show on our site. This is completely up to you. I'm going to go for Twitter and also YouTube. Keep this pretty simple. We'll just confirm the activation. Also the RSS feed, we can remove this. If you do have any accounts with any of these other providers, you feel free to check these buttons too. Save our first option. Next option two is what do we want these icons to do? For example, with Twitter, when the user clicks on the Twitter icon, you want them to visit our profile, you want them to follow us or you want to tweet about the particular page. In my case, I'm going to set this to be, follow me on Twitter. Then add in my Twitter handle. Down to YouTube we can also insert the YouTube URL, which you're going to link to your YouTube page. You can also allow people to directly subscribe to your channel too, save option to. Then the third one is where will these buttons be displayed? We could allow them to be floated over the website pages. We set the position of these icons to be in the top corners or in the center of our site. We could also add some margin in the top right, bottom or left. This is some spacing which will push over the icons from any particular side. This is maybe useful if these buttons are covering up a certain piece of content and we just want to fine-tune the layouts so they don't cover up any important pieces of information. We can also check as many of these options as we would like. If you want to, we can also place these buttons into a widget. This will allow the social media widget to be dragged into any one of our themes, widget areas. I'm going to uncheck this since we don't need it. The next option is to place via a shortcode. We've not covered a shortcode just yet, but this is a small snippets of code which you can place into any one of our blog posts or pages. We will also look at this later on, but for now, we can insert this by copying the code inside of these square brackets. By copying this section, we can place our widgets into any one of all pages or posts. Let's see this in action by saving. We can go over to one of our pages, select any of these and go into edit. Then all we need to do is to paste this into a text block update. Then we can check out our about us page inside the browser. Go down and below all of our texts we can now see these social media icons have been inserted with this shortcode. This is really useful if we want to include this on one particular page, on a particular blog post. I'm going to leave these icons on this about us page since it may be useful for the user to share this page with others. Back to the dashboard, click on the WordPress icon. Back into our icons we can now finish the setup. The location, I'm going to place mine in the top right. We can leave the shortcode in. If you wanted to you could also place this in the theme's header and also show this after all of our posts. There is also some optional settings just below too. For example, if you want to play around with the design and animation of these, you can change the look and the feel of all of our icons. We can add a counter next to each one of these icons and generally tailor how these will act on our website. I'm going to leave all these options and save our plugin over to the website. Now we can see if we visit any one of our pages, we have these icons appear on over in the top right. We can click on the Twitter icon, which is a follow button, where we're instantly taken to our profile and we can directly follow this user. We also have a YouTube link which probably won't work since we have not added a URL, but you can go ahead and add your own URL into here, or any other social media icons if you would like. Good, with our social media icons now all in place and set up. Next, we're going to move on to modifying this homepage and also introducing some widgets. 29. WordPress Blog: Home Page Setup & Widgets: In this video, we're going to focus on this homepage and reconstructing it using widgets. We did take a look at using widgets early on in this course, in the other project. Widgets, if you remember, is like a self-contained piece of content which we can drag into a particular location inside of our theme. With the spacious theme, we do also have access to some custom widgets which had been supplied with this theme. Also supplied alongside these widgets is a homepage template which is going to allow us to rearrange this homepage, look more like it did when we first checked out this theme on WordPress.org. Now to do this, we're going to move all of this blog section, all of our blog posts, over to the custom blog page. Then this is going to leave us some space to create a new homepage where we can add this new template. Let's begin over inside of the dashboard. We're going to go down to pages and add our new homepage. So the title of Home. Then over on the right, inside of the page attributes section, we can select a template which we want to use. At the moment, we're just using this default template. But we can see, we have some other templates which are being provided with this theme. The one we're going to use for this homepage is this business template, publish this. If we refresh, we see our homepage up at the top here. But as we mentioned just before, we're going to make this our actual homepage when we visit the root of our project. The way to switch around our pages is to go back to the dashboard, down into the settings. We need to head into the Reading option. Instead of our homepage, is bringing our latest posts, we're going to switch this to be a static page which is the newly constructed homepage. Then move all post over to our custom blog page. Save our changes. Let's check this has all taken effect inside the browser. Good. There's our homepage. We don't have any content just yet, but we'll come back to this, the blog. We'll see our blog posts have now been moved to this blog link. To construct this homepage, we're going to add some widgets. Just like earlier, we go to the Appearance into the Widget section, and then we can drag over any of these available widgets into the themes widget areas. This particular theme also has some custom widgets, will have all of the custom widgets beginning with ATG. We know which ones are supplied by this actual theme. We have the social media icons which were supplied by the plug-in, and then most of the ones above are just general WordPress widgets which are always available until you construct this homepage. This was the business templates. We're going to make use of these four business sections. Starting with the business top. The middle section is split between the left and right, then we have a bottom section. From the top, open this up, and we can see which type of widgets are suitable for this area. The one I'm going to use is this TG Services. As you can see, this is used to display some pages as a service. Drop this into the top section, and then we're going to link this to free new pages. We don't currently have any pages which displays the website services, so what we're going to do is to go over to our pages, add three new pages. The first one is going to be for web design and development. Then we'll just add some simple text just below. I'm going to say we create stunning responsive designs using WordPress. You can place in any text which you would like inside of here, and you can also see at the bottom, we have a social media section which had been added using the plug-in. This is a premium feature so we're just going to ignore this. If you want to remove this, you can click on these settings at the top, go down to the preferences, and then we can close off the social media panel. Now, back to our page, we're just going to add a featured image for this section, then placing the WordPress icon. That is our featured image, and then publish. This is all we need to do. Now, if we go back to our pages, add a new page, and this second one is going to be for branding. Then some texts in the block just below, I'm going to say let us take care of all your branding needs. The page section has the featured image. This is the pencil icon. Set this and then publish. The third and final page is going to be for the mobile development service. Add a third page with the title of Mobile Development. Then some text I'm going to say, we create stunning custom mobile applications for all devices. Back to the page tab on the featured image, this one is going to be for the Android Icon. Published this. Now, if we go back to our Widgets under Appearance, we can add these three new pages to our TG Services. We have the web design, we have the branding, the mobile development, and then we can save this widget. Before we go any further, let's just refresh the homepage. Click on Logo. We'll now see our three pages in this widget area. Just below this, we're going to next a Call To Action section which is going to prompt the user to get in touch. To do this, we have a call to action widget which is just over here. Drag this below and inside the same section. The Call To Action main text is going to be, "Need to speak to somebody about your ideas?" Then the additional texts of, "Get in touch today." This is going to also have a button which the user can click on and will say, "Get in touch." Then we also want this button to redirect to a certain link. Now, just before we do this, we're going to save this. We'll want this to link to the Contact Us page. To get the link to the Contact Us page, we need to go over to the Pages tab, into Contact. Then we can grab the permalink from the sidebar. This is all of this section just here. If we click on this, we can then grab the URL back over to the widgets in the sidebar, then paste in our permalink. Save this and let's test this out. Refresh. We've got our Call To Action. Click on the button, and this now links us to our Contact Us page. Remember, this will have a contact form later on, but for now, this is all working fine. Next up, we have the middle section which is split into the left and the right sections. To the left, I'm going to add some recent testimonials, and the right is going to feature a single page. Let's start with the left which is TG Testimonial. Drag this in. The title of Recent Testimonials. Then the description at the bottom. Place in any testimonial description inside of here. We can then place in a name just below, and the byline which is CEO. Save this widget. We can also close down these sections and then we'll go to the middle right section. This one is going to be the single featured page. Drop this in. This one is going to feature any one of the pages on our site. For this example, I'm going to put the focus on the mobile development section. The title which will appear next to this are Read More About Our Mobile Development Services. Then we also have the option to remove the featured image if we want to, but I'm going to leave this as it is. Finally, we have the business bottom section which is going to be for a featured widget, and this will allow us to add some case studies. Drag this over. Title of Case Studies. Then we can add a description, I'm going to say, Here, we take a deep dive into some of our most recent projects to show you what goes on behind the scenes. Then below this, we can link to various pages. Now, we could go ahead and create three new pages with some case studies. We could add in some texts to some images and create these pages if you wanted to. However, though, just to save a little bit of time, I'm just going to link to three existing pages which is the Web Design, the Branding, and also the Mobile Development too. You can create these if you want to, but I'm going to save this widget and check this out over in the browser. Refresh. We'll have our top section which you've already seen, we have the middle section, and this is split with the left section for testimonials, and then the featured Mobile Development page on the right. Then finally at the bottom, we can link to some case studies. This one is all complete, and you can have a play around with this if you like and make it more personal. Just before we finish this off, I'm going to remove the additional links which are being added to our menu automatically. I'll go to the menu section on the appearance, we need to select top navigation, we can remove the home link, and also the three additional pages. Save menu. Our homepage is now set up. In the next video, we'll take a look at how we can create our footer. 30. WordPress Blog: Creating The Footer: Let's now scroll down to the bottom of our project and work on this footer area. For the footer area, we are also going to making use of widgets to create up to four different sections. To do this, we go over to the dashboard, into the appearance, and into the widget section. The themes author has provided four different footer locations. Psi bar 1 is over in the bottom left, then two, three, and four. Just like when we've used widgets in the past, we can drag and drop any one of these widgets into our four different widget areas. You don't even need to use the same ones which I'm going to use. Bar sidebar 1, which is over on the bottom left, we want to drag in the pages widget. Pull this over. As we can see here, this is a list of your site's pages, but this is basically like a menu where the user can click on all pages and then be taken to the full page. We can add an optional title if we want to. We can also solve these pages by the title, the pages order which is available when we go to the pages edit screen, or even the page ID. This page ID can also be used just below two if we want to exclude any certain pages that we don't want to appear inside this section. The way to grab a page's ID is if we go into our pages link, click on this. If we click on any one of our pages or even go into the edit screen, we can see the pages ID appear inside the URL. This particular one is 1872. Let's try a different one to contact us. This is 1874, but yours may be a completely different ID to mine, and that's completely fine. The same too if we ever need to access any of the posts ID, we can click on this. This is ID number one. Let's try one more. This is 1788. This is really handy if you ever need know the post or the page ID. I go to the widgets. This is all saved and this is all we need for our sidebar 1 into the sidebar 2. I'm going to drag and drop over a calendar widget. This is a calendar of our site posts. If you have a blog post available on a certain date, this then becomes a link inside the calendar where the user can click on and be taken to any of the posts for that particular day. We'll see what this looks like in just a moment. We can add an optional title, but I'm just going to leave this as defaults since this is pretty self-explanatory. Site buffering, this is one is going to be occupied by some social media buttons. This is the ultimate social media plugin. Drag this over. This one was generated four rows from our social media page. We can go to this page if we want to adjust any of the preferences with this link. We can also change the title, but this is fine. Sidebar 4 which is over in the bottom right of our page. I'm going to drag over some recent comments. Now, the recent comments are just the comments which had been placed on our blog posts. By default, this is the five most recent posts which we can adjust, but five is fine for now. All these are automatically saved, so if we go over to the browser, refresh the page. The first block is our pages and we can click on any of these to be taken it to the full page. We have a calendar section and we can click on any of these days and see any available blog post for that particular day. We can also scroll back and forward through the dates and see the calendar view for each month. The social media section, mostly the Twitter and also the YouTube links which we created earlier. Then finally, the five most recent comments, which you can also click on if we wanted to. Now we have a footer section. We could also remove the footer links down at the bottom, but this is fine for our use. Just one last thing over in the customizer is not many options for this particular theme for customizing the footer. The only options we have if we go to the footer link is to amend the number of widgets areas. We are currently set to the default, which is four, but we could also reduce this down to you three, two, or one if we prefer if we have less content to place inside the footer. 31. WordPress Blog: Adding a Slider: Earlier in the course, we added two different header images displayed just below this logo section. These two images will display randomly, so we may get a different image each time we reload this page. In this video, we're going to show you how we can use these same images, or you can even choose different images if you prefer. But we are going to incorporate them into a slider. Like with many things, WordPress has lots and lots of different slider plugins, which we can integrate into our site or this actual theme comes with its own slider tool, which is really simple to use. First, we need to go into the customizer. This is one of the options inside of the appearance and customizer. Then we'll see we have this slider option just here. Enter here. The first option is we actually need to activate the slider. So we'll click this and then we have the option if you want this slider to appear in our Post page. We don't really need the slider to appear when we see the blog post. So I'm going to uncheck this. Well, this is totally up to you. Then below this, we add our content, which is the images. To display in our slider, we can select an image from the media library or upload a totally different image. I'm going to stick with these same two images which we used already inside the header. You can see straight away that this image has appeared still below the header one, but this time we also have a Read More button. We can also overlay some texts just above this tool by adding a title and also a description. So the title for this one is going to be Mobile Development. We can see these updates over in the preview. On the line below we can also add a description tool. I'm going to say from design to App Store. If you want to, you can also change the Read More button text. First, I'm going to leave this as it is, but this is also going to link to a certain page. Since this particular image in this section is for mobile development, it would make sense to link to our mobile page. To do this, if we go to our site and then if we click on the "Mobile Development", all we need to do is to grab the page link, which is the section just after this first forward slash. Command or control C to copy this and then paste this inside of our link. Slider content 2 is woken at our second image to rotate between. Again, I'm going to use the same one as the header. A title of Web Design & Development. A description, this will be WordPress development from the experts. We also need to link to this page, which is the Web Development page. To go back over to our home page, we can click on the "Web Design and Development", link and then grab the link to this page, paste this in. Oops, wrong one. Paste this into number 2 and as you can see, you can go even further by adding more images just below two. So of course, we don't want the slider and also the header image at the same time. So what we could do is we will go back to the Header Image section, or we can click on this pencil icon to go directly into our section. Hide this image and then we just have the slider taken effect. Publish. Over to the front end and refresh. That's our slider. This switches between our two available images. Let's try if these links will work. This is the Web Design and Development page. This one is fine. Back to the homepage. Our Mobile Development link is working too. So this is all now working and this is how quick and easy it is to add a slider. In the next video, we're going to get to work on our Contact Us page and replace this plain text with a contact form. 32. WordPress Blog: Creating The Contact Form: Hey, welcome back. Early on when we created our pages up at the top, I'm going to hover the About us page. This will then reveal a Contact us page. We did say early on that we just put in some sample address lines just here and then we're going to come back to this page and add a working contact form. Well, this is what we are going to do in this video. This will be made available by adding a plugin called Contact Form 7. This will allow us to add as many different fields as we would like inside here. This will capture the user's input such as the username, the e-mail address, a message, potentially any addresses or telephone numbers, and this can all be submitted with this form. You guessed it, let's go back over to the Dashboard, and from here we'll head into the plugin section. As you can imagine, there's lots and lots of different plugins which can do contact forms, but I'm going to use a popular one called Contact Form 7. We can add this as a new plugin up at the very top, then if you want to maybe available in some of the tabs such as a popular one which you see here. If not, you will need to search for it with the search box up at the top. This is the particular contact form I'm going to be using, so let's install this. As we can see, it's been regularly updated and also compatible with this current version of WordPress. Activate, and this will now give us a dedicated option inside the sidebar. Click on this and this will then reveal all of the contact forms which we currently have available for our site. We just have this one which is being created automatically for us, and we can go ahead and add as many different contact forms as we would like. We can have a different one for different sections of our site, and each one can collect different information. Instead of editing this one, I'm going to add new up at the top and then give this contact form a descriptive name. I'm going to say Contact Us form, then below this, we'll have the layout of our form. Now, if you don't know any coding and this looks a bit crazy, don't worry at the moment. If we take a closer look at each one of these fields, it shouldn't be too difficult to understand. Each one of these is a different form input. For example, if we want to collect the user's name, user's e-mail, and we have a section for the subject of the e-mail, and then we have the message which is going to be sent to the administrator. This one, for example, like the rest of them is surrounded in the label and then the text which is going to appear next to each one of these inputs. This one is also optional unlike the three above, meaning this form can be empty when this is submitted. Then inside the square brackets, we have the type of form input which is currently being used. Don't worry about all this since we can generate each one of these automatically by using these options up at the top. For example, if we wanted to create a new text input, collect an e-mail address, if we want to gather a telephone number, a date, a text area, checkboxes, or radio buttons, these can all be generated by clicking on these buttons just here. Finally, for a form, we also need the ability to actually send this. When all of the data just above has been entered, we then need a button to actually click on, and send this back to the site administrator. This is what this Submit button does here. I'm going to leave pretty much all of the defaults just here. Let's add in one extra field. This field is going to be a checkbox where we can ask the user how they heard about our site. So I'll click on the checkbox and then all of the options which we add inside here will then result in a generated form input like we already have. First, we want to know if this is a required field, so the user must enter a value inside here before the form can be submitted. The name, we can leave this as default. This is just a generated unique name. For this particular field, we can add multiple options where we add one option per line. Each name which we're adding inside here will generate a new checkbox. The first one I'm going to add is for search engine. Remember these options do describe how the user heard about our site. We can also say a recommendation. On the next line, we'll say use previously, and then the fourth and final one is for other. I want to leave all these default settings just below. I'm going to also add an optional ID or class attribute to this input. This is just so we can target this we added some CSS. If you wanted to apply some additional styling, we don't need to do this, all we need to do is to click on "Insert" and then we have generated our new checkbox section. Save this and then once this is done, we then see a shortcode up at the top in between these square brackets. This again is a shortcode just like we used in a previous video, where we looked to adding the social media icons to any one of our pages or blog posts. The same applies to our contact form. We just need to copy this and then we can go all to our pages and insert this into our contact form. Pick on this section, and I'm going to remove this particular block, just below, paste this in as a text block. We can then choose which one of our contact forms we want to display. This is the contact, so this is completely fine. Update our page or to the browser and refresh on the Contact Us page, I will now see our form has appeared. We have a name input, we have an e-mail, we have the subject, and then our custom checkboxes which we added in. So the user can say how they heard about us or have the optional message at the bottom, and then they can submit this back to the administrator. Of course, it's a little bit pointless having a Contact Us form if the message is optional. So we're going to quickly change this back over in the Dashboard. Back into the Contact section, we'll edit our new form. All we need to do is to remove this optional text just here and then save this. This has now been removed, as well as actually creating at the contact form, there is also some options which we can change too. We have various terms up at the top such as mail. These is some of the options to change the layout of our e-mails. If any which is placed inside of these square brackets is effectively some data which can change. So it's a little bit like a variable. These are all the sections which WordPress will inject dynamically. So when we receive an e-mail from the end-user, we see things like the site title, so we know exactly which one of these sites this e-mail is sent from. We will then receive the subjects and this will be pulled in from the subject field along with all of the other sections, we'll also get the user's e-mail, which will be pulled in from the e-mail field and we can then construct the message body down at the bottom or change this around if we wanted to. I'm not going to make any changes to this since it's well laid out. We have the From field with the name and e-mail. We have the subject in the correct field and then the message inside of the body section. On