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!

      1:48
    • 2. Why WordPress?

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

      3:01
    • 4. Where To Find WordPress Themes

      5:42
    • 5. The WordPress Web Server

      3:04
    • 6. Option1: Installing With Local (recommended)

      6:16
    • 7. Option 2: Installing With MAMP

      6:19
    • 8. The WordPress Dashboard

      4:02
    • 9. WordPress Files & Folders

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

      1:51
    • 11. Music Festival Project: Installing Themes

      3:37
    • 12. Music Festival Project: Creating Our First Page

      4:47
    • 13. Music Festival Project: The Media Library

      4:39
    • 14. Music Festival Project: The Gutenberg Editor

      10:38
    • 15. Music Festival Project: Widgets

      5:00
    • 16. What we will be building

      2:42
    • 17. WordPress Blog: Project Setup

      3:40
    • 18. WordPress Blog: Importing Sample Data

      3:58
    • 19. WordPress Blog: Adding And Updating Posts

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

      5:48
    • 21. WordPress Blog: Including Media

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

      9:21
    • 23. WordPress Blog: Adding Pages

      7:47
    • 24. WordPress Blog: Adding Our Navigation Menu

      5:24
    • 25. WordPress Blog: The Customizer In More Detail

      7:21
    • 26. WordPress Blog: Adding Header Images

      3:24
    • 27. WordPress Blog: Adding a Background Image

      2:17
    • 28. WordPress Blog: Plugins & Social Media Integration

      7:39
    • 29. WordPress Blog: Home Page Setup & Widgets

      10:47
    • 30. WordPress Blog: Creating The Footer

      4:34
    • 31. WordPress Blog: Adding a Slider

      4:21
    • 32. WordPress Blog: Creating The Contact Form

      8:33
    • 33. WordPress Blog: Improving SEO

      9:34
    • 34. WordPress Blog: Backing Up Your Site

      7:03
    • 35. WordPress eCommerce: Project Setup

      1:45
    • 36. WordPress eCommerce: Getting Started With WooCommerce

      9:47
    • 37. WordPress eCommerce: Why Use Child Themes?

      2:55
    • 38. WordPress eCommerce: Child Theme Setup

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

      6:54
    • 40. WordPress eCommerce: Adding Products

      8:39
    • 41. WordPress eCommerce: Variable Products

      4:11
    • 42. WordPress eCommerce: Home Page Layout & Slider

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

      8:06
    • 44. WordPress eCommerce: Flexible Layouts Using Page Builder

      6:02
    • 45. WordPress eCommerce: Rearranging Menus

      3:54
    • 46. WordPress eCommerce: The Footer Area

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

      6:20
    • 48. PHP Basics: Introduction

      3:12
    • 49. PHP Basics: Hello world

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

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

      5:56
    • 52. PHP Basics: Arrays

      6:59
    • 53. PHP Basics: Functions

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

      12:25
    • 55. PHP Basics: Switch statements

      4:31
    • 56. PHP Basics: Loops

      11:12
    • 57. PHP Basics: The Codex

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

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

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

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

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

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

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

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

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

      10:26
    • 67. Theme Development: Sidebar

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

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

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

      12:15
    • 71. WordPress Multisite: Intro

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

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

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

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

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

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

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

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

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

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

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

      1:40
    • 83. Thank you

      2:43
    • 84. Follow me on Skillshare!

      0:23
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

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.

27,607

Students

10

Projects

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 from the UK. I am an experienced trainer leading web development bootcamps and also teaching online courses.

My main areas of interest are Vue.js, WordPress, Shopify, Javascript, eCommerce, and business. I am passionate about what I do and about teaching others. 

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 wh... See full profile

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
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.

Transcripts

1. Welcome To The Class!: WordPress powers a huge percentage of websites available today. You've almost certainly visited a website which runs on WordPress. Some of the biggest names and brands of trusted WordPress including Disney, PlayStation, MTV, Microsoft, Sony, and so many more. The good news is, it's easy for beginners to get started with and you don't need to know any coding to build amazing websites. During this course, I will guide you through the process of building multiple WordPress websites. Including a music festival landing page, a blog, and also an e-commerce site too. Once you are familiar with WordPress from these projects, we then step things up even further and introduce some code by converting a regular website into a fully custom WordPress theme. Before rounding things off by taking a look at how we can setup a WordPress multi-site installation. Who am I? My name is Chris and I'm a web developer from the UK. For me WordPress has allowed me to create lots of amazing sites for clients or businesses or personal use from a single landing page right through to a complex e-commerce site. It does this by providing a flexible core and then pose as a user and extend it with a huge selection of plug-ins, it extended the functionality. Let's jump into learning WordPress together by building some fun and educational project. I'll see you in the first lesson. 2. 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