WordPress Academy: Learn WordPress step by step

1. Welcome To The Class!: WordPress powers a huge percentage of websites available today. You've almost certainly visited a website which runs on WordPress. Some of the biggest names and brands of trusted WordPress including Disney, PlayStation, MTV, Microsoft, Sony, and so many more. The good news is, it's easy for beginners to get started with and you don't need to know any coding to build amazing websites. During this course, I will guide you through the process of building multiple WordPress websites. Including a music festival landing page, a blog, and also an e-commerce site too. Once you are familiar with WordPress from these projects, we then step things up even further and introduce some code by converting a regular website into a fully custom WordPress theme. Before rounding things off by taking a look at how we can setup a WordPress multi-site installation. Who am I? My name is Chris and I'm a web developer from the UK. For me WordPress has allowed me to create lots of amazing sites for clients or businesses or personal use from a single landing page right through to a complex e-commerce site. It does this by providing a flexible core and then pose as a user and extend it with a huge selection of plug-ins, it extended the functionality. Let's jump into learning WordPress together by building some fun and educational project. I'll see you in the first lesson. 2. Share Your Work On Skillshare!: When taking any course, it's really important to not get in the habit of following along just for the sake of ticking off another lecture. Take the time to process each lesson. Review the code which you write, and think about how you might approach these solutions yourself. With this in mind, this class is project-based and this gives you the opportunity to really make something personal and unique. You don't need to get too lost and divert away from the class, and you can even take a step back after you've finished the class, and come back and make some project changes afterwards. This will really give you a good chance to practice what you've learned away from the class. Also remember to share your project too here on Skillshare. Not only will I check it out, but it will also inspire fellow students too. For more information on the class project, head into the Project and Resources tab, where you can not only upload your project, but you can also see other class projects too. With this in mind, I look forward to seeing what you create and upload here on Skillshare. 3. Why WordPress?: WordPress originally began life as a blogging platform and it's now grown into the most popular content management system available today, which also powers some of the world's most popular websites. WordPress is completely free to use, free to download, and it's also built by hundreds of community volunteers along with all of the great features which WordPress provides. We'll find out about these during the course. One of the things I really love about WordPress is that it has something for everybody. If you are a non-technical person or a beginner, you can buy some simple web hosting, use a one click installation, select your theme and you have your very own website or blog in under half an hour. For web designers or developers or general people who want to jump in a bit deeper, there is also many great things you can do technically to make a really powerful website. You can call your own themes and also plugins to make WordPress look and function exactly how you want it to be. WordPress is also under constant development too, its always improving, whether that's a security fix or a new feature to keep WordPress from becoming outdated. Also the creators of WordPress have made these updates really easy to apply too. You don't need to worry about complicated updates and installations. These updates are generally performed from the WordPress dashboard and often just involve the click of a button. As you can also see from the WordPress homepage which is wordpress.org, there is also many different themes you can choose. If we go into the theme section we can see there is over 7,000 different themes are present. These will allow us to build almost any type of website which we want to create. When we actually create a WordPress website, all of the content stays exactly the same, and we can then switch between different themes to give our content or our site a completely different look and feel. On the first set of WordPress some of the themes will be pre-installed, or we can search through any of these themes from wordpress.org. These are free themes to set up our projects. Along with these free themes there is also premium themes available too, which you can also buy on websites such as ThemeForest, but we'll look at this in more detail as we progress through the course. The WordPress core which we are going to download is really simple yet very powerful, and also packed with lots of features. However, if there is some functionality missing which your app or website needs, then this functionality is more than likely going to be available as a plugin. Plugins are pretty much what they sound like. They are something you can download to plugin and extend the WordPress core. They add functionality and features which are usually simple to install as clicking on a few buttons, but again we will take a look at plugins in more detail later in the course. Some of the other WordPress benefits are that it's really search engine friendly. By using WordPress, many SEO best practices are already taken care of for us behind the scenes. If you want to take it even further there is also some great plugins too, which well take a look at it in the plugins video. Lastly, WordPress has a really useful mobile app for iOS and Android which is free to download. The app allows you to write WordPress contents and also update your website on the move. It can even upload photos, manage blog posts, manage all comments, and also edit pages as you go. These are some great reasons for choosing WordPress. Of course, there are many more and I'm sure you'll find your own reasons for using WordPress as you progress through this course. 4. WordPress.org or WordPress.com?: Let's begin with WordPress.org, which is the homepage for the popular open source WordPress software. Open source means anybody can use this or contribute to it free of charge. This is the site for the official WordPress software, which we are going to be using to create our project through out this course. We download it, we can customize it and uploaded to a live server when complete. It basically gives us the total flexibility since it's completely self hosted, and also hosting costs for WordPress a relatively cheap when it first started out. At the top navigation of this page, you can see here that we have the available plugins and themes which we can then use. We'll make use of both of these throughout this course. There is also a support section where we can have full access to the WordPress documentation, which we're going to refer to quite often, and of course, everything we need from installing themes, right through to security topics. The actual software is available from clicking on this get WordPress button, and this is one of the setup options which we're going to take a look at very soon. Download this software as mentioned will give us the total flexibility and control over everything we're going to do with our WordPress site, or there is an alternative which is available from Wordpress.com. Wordpress.com is more of a service which will allow us to have a WordPress site, posted photos. It uses the same WordPress software which we just looked at, it takes away this setup and provides hosting for this software. This site was created by one of the WordPress founders. For the ease of setup does come at a cost. We don't have the flexibility we have when self-hosting. Under also by restrictions on which themes plugins we can use, depending on exactly which paid plan which you use. With this in mind, if we click on a Plans and Pricing from the navigation, there is various different price levels along with a free option, which we can see at the top, is 3ca coming option when starting out. But it does also place advertising banners on your site, which you probably don't want. We then have options from a personal side right through to an e-commerce store. We can see these options in more detail, if we scroll down to this table. As far as I mentioned, there is some restrictions, as you can see here when using Wordpress.com, and these restrictions are lifted as we go through higher pricing options. WordPress.org is the one to go for if we want full control over our site, and we are happy to do a little set up work. We're going to be choosing this path through out this course, or this site which is WordPress.com is a good option if you want everything taken care of for you. But remember there are restrictions unless you go for the more expensive plans. 5. Where To Find WordPress Themes: This course doesn't require any purchases for a theme or any additional software. Though at some point in the future, you may be using WordPress to build lots and lots of sites, whether that's for a job, or paying clients, or for businesses. For this use case, you may also want to look at some premium theme options. One of the options for this is themeforest.net. This is a marketplace for not only WordPress themes, but also money of a code, snippets, photos, and also videos too. We're going to be focusing on the WordPress themes which we can go to from this tab. From here, we can check out all of the different categories, we can also search using the search bar up at the very top and there is generally themes available for pretty much any type of WordPress site which you want to create. For example, if we want to create a wedding website, we can do a search, and the wedding search returns over a thousand different themes to choose from. As I mentioned, it's mostly paid content on this site, but this price also does often include support too. It is also many people and companies making a full-time living, creating themes and selling them on marketplaces just like this. If we go back to the popular items, we can see some of the popular themes such as the Avada theme, this is currently one of the most popular themes and it has hundreds of thousands of sales. We can take a look at the live preview and see exactly how this theme will look with various layouts, we can scroll through any of these themes and check out all the features which comes with it and generally, many of these themes have lots of different options for layouts or changing the color and they're also very flexible too so we can use it for product pages such as e-commerce sites, we can use it for blogs and also personal sites too. Along with seeing how our website will look and feel with a particular theme, it's also very important too to check out all of the information which is listed below. We want to make sure our theme is regularly updated, we want to make sure that it got good reviews and also it's compossible with our version of WordPress. When choosing a theme, it's not just about how it looks, it's also about the features and the things we can do with it too. One of the good indications of the features is the tags which is down at the bottom. These tags will often reflect exactly what features is included with a theme, such as the number of layout options, if it's going to have a two column layout, if it's going have a three column layout, if it's compatible with WooCommerce for e-commerce stores, if it's translation ready and also what customizations are available for this particular theme. We can also see exactly what browsers this is compatible with and also which versions of WordPress plug-ins are also compatible with this theme too. This particular one is also widget ready too, which means we can enable widgets which are self-contained pieces of content which we can place on our site, as well as all of the paid themes which are available on the site. As we looked at earlier, the official wordpress.org website also has a themes option at the top. There also is paid themes from this commercial section but we are only going to be focusing on the three themes which we have listed here. We can download any of these themes from the WordPress dashboard and we're going to do this when we setup our first project. Just like the themes which we just looked at, we're going to be able to click into any of these themes, we can check out a preview and this will give us an idea of how our theme will look with some blog content. Again, it's also worth checking out all the additional information such as the last time it was updated, the reviews and ratings, and also the tags too. We can see this one is accessibility ready, it's got various customizations such as the background, the colors, the logo, the header, and also the menu. It's e-commerce compatible, its translation ready, and also has various layout such as a one column and also a two column layout. These are really important things to consider for your site but don't worry just yet about selecting themes with all of these tag options because we going to discover exactly what most of these are as we progress through the course. Having all of these themes available for WordPress allows us to decouple the content which we have on our sites with the look and feel. Even if we have a blog which we call hundreds and thousands of blog posts, down the line we can also completely change the look and feel by simply switching the theme. This theme will not affect the original content and we still have all of this information still available and most of these themes are generally customizable from the WordPress dashboard as well as downloading themes like this. We can also create our own custom themes, we can either use these themes for personal use, for a paying client, or we could also upload them back to the theme store. As with everything, if you do a search online, there will be hundreds or even thousands of options which you can choose from but for now though, we're going to come back to our themes and take a look at how we can add these to our sites. First of all, we need to take a look at how to install WordPress. 6. The WordPress Web Server: If you built a website in the past using HTML and CSS, you will be used to just writing this in a HTML file, opening up this file in the browser, and everything just works. Well, this is a bit different when using WordPress because WordPress needs a web server to run. Why is this? Well, this is because WordPress is wrote in a programming language called PHP. PHP will only run on the server, it doesn't work inside the browser. For WordPress, you don't need to understand any PHP course. Good understanding of PHP is running on the server, is key to understanding how WordPress works. If you consider a sites such as Facebook or Twitter, or generally any blog sites, chat application, or even social network, they all look the same for every user, but the details on the page are different. Such as the username which will change your personal friends or connections, your blog posts, and so on. We can think of things like Facebook and Twitter as a template and any details are injected in when needed, and these all based on the logged-in user. This is an example of what PHP does, it can generate a web page which change the particular details for each user or each page. This is an example of what is called a dynamic web page. It's on a web server, where these pages are generated. On the server, it will have the template or the basic setup. Then it will place in all of the details which you pulls into the database, such as a user, or the blog posts which we just mentioned before. You don't need to fully understand all of this at the moment, but just be aware that this is the reason why we need a web server to run WordPress, rather than just open it up inside the browser like we can do with a regular HTML page. Unfortunately, we can set up a web server on our own computer to run this. Also, WordPress needs a database too, which is used to store all of the pages, the blog posts, the images, and all the information which it needs. It's this web server which we'll also talk about the database and grab all this information for us. This now leaves us with some options. If you already have purchased some web hosting in the past, which can run WordPress, you can, of course, use that for this course. Are we going to run through some of what is called local options, which is the ability to set up a web server locally on our own computer? There will be a couple of different options, so make sure you just use one, and I would recommend the next video if you will ensure. With this as a background, we now going to run through how to set a WordPress in this next video. 7. Option1: Installing With Local (recommended): Now we understand that WordPress needs a web server to actually run. In this video and also the next, we're going to look at some options to get started with creating a web server on our own computer. This video is going to focus on a service called Local by Flywheel which will allow us to create a web server on our own computer, and then we can create our WordPress websites. You only need to either follow this video or the next video, and the next video will focus on a alternative solution called MAMP. I would recommend that you follow along with this video rather than and the next one. To get started, we're going to head over to localwp.com. From here we're going to click on the download button, where we can download for both Mac, Windows and Linux. There's also a paid version for teams and agencies, but we just need the free community edition. Flywheel is going to allow us to quickly assess WordPress projects on our own computer, which is going to be really straightforward and take care of all the setup, the server, and also the database for us. Local has lots of great features. We can view our site and admin section at click of a button. We can generate a live link to view our project anywhere and also share with others too, along with a lot more advanced features such as the ability to set up WordPress multi-site and so much more. Choose your particular platform, download and then go through the installation steps. Once Local is fully installed and setup, you're taken to a screen which looks just like this. This is where we can add and also manage our Wordpress sites. I already have some sites setup just here if this is your first time, you won't see any in the sidebar. To add on new project we need to click on this green button in the left corner and then give our site a name. I'm going to give this title of Festival, and we don't need any of these advanced options for now. Continue, I going to stick with the preferred default environment. Then we need to add a username, a password, and an email. The username, let's go for the festival_admin, and this is going to be the details we need to log into the back-end of our WordPress site. We'll take a look at this in just a moment. The password, make sure you change your email if needed to. Click on Add Sites. If you're going to using a Mac you may also need to add the administrator password too. Good, once this is done our site is automatically started up. We can see this because we have the option to stop our site in the corner. If yours is green and it say start site, you will need to click on this to start up the server. We can see all the version numbers for our servers, for PHP and also the database which we're using too. We don't need to change any of this information, but it's all there if we need this in the future. One of the great things about using Local is this live link down at the bottom. We can click on Enable, and this will give us a live URL which we can share with others too. This means we could share our work with colleagues, with friends or family, and it's also useful for getting feedback on our site to run other people. We'll spend most of the time during this project in these two sections up at the top. We have a admin section which will link us to the back-end of our site. To login we need add in details which we added into Local just before. My username was the festival admin and the password. Click on Login and this will then redirect us to the WordPress dashboard. The WordPress dashboard is like the control center of our sites where we can add new features, we can update it, we can change themes, and we'll take a look at this in just a second. The other button is to open our site, and this is our actual WordPress website. If yours looks a little bit different to this don't worry, the default theme does change from time to time. This will now give us our back-end or front-end using these two terms. If we want to switch between these manually, if we are on the site just like this, we can hover over the site title and then go over to the dashboard. When inside the dashboard we can do the opposite and then head back over to visit our site. To the dashboard we'll take a closer look at all these options in the next video. For it's from here where we can update our sites if we have any themes and plug-ins or even the WordPress call. If any updates become available, we will be notified from this view. We can manage and update our posts. We can upload different assets and media such as images, videos and audio. We can work with our pages. We can edit them, we can add new, we can manage any comments on our blog posts. There is an appearance section where we can customize the look and feel of our site. We can upload different themes. We can change menus, background images, and lots more. We briefly talked about plug-ins early on and it's from this section where we can either manage our plug-ins or add new ones too. For example, if we wanted to add email to our site, this is the plugin section where we could add this. We can manage our users, such as seeing who is signed up. We can change the preferences. We can update profiles and permissions and lots more. We have a tool section where we can do things like importing and exporting data. We also have a setting section where you can fine-tune all of the options for our site. For all of these projects in this course, we will spend a lot more time in this back-end. Starting in the next video we'll take a deeper look for all of these options. 8. Option 2: Installing With MAMP: This is an option video to setup WordPress using a service called MAMP. If you successfully installed WordPress in the last video using local, you can skip this video. However, if you use month before or you just want to try something different you can follow along with this video and setup using MAMP. Let's get started by heading over to mamp.info. This is also going to create a free local development server and also take care of the database for this two, we can download a free version by clicking on the link here and then download for your operating system. I'm going to go for the mac version and give it a few minutes to download. Once this has downloaded, will need to go through the installation steps to your computer hit Continue through each one of these. May also need to add a password to to install this. MAMP also comes with a paid version called MAMP PRO. This also downloads at the same time, but you don't need to use this. We just need to stick with the free version of MAMP as we don't need any of the prophages. Once MAMP has finished installing to your machine you will be taken to a star screen which should look just like this. You may also be asked to upgrade the MySQL database. I'll go ahead and do that too. Inside here the key thing to note is the two green lights up at the top. This means that our web server and also a database is open and running. We can now download the WordPress core and add this to our MAMP folder. For me, MAMP is stored inside my applications, then we have this MAMP folder inside here. The key folder which we'll be working with is these htdocs. This is going to be the location where we add all of our WordPress projects throughout this course. To do this we need to go to WordPress.org and from the homepage will have a get WordPress button just down here. This then takes us to this download section where you can download the WordPress core. This is a zip file it shouldn't take too long to download. Once this is done, we can click on this package and open this up. This is now our WordPress project folder. We can go ahead and rename this, I'm going to call this wpfestival Then we can drag this project over to our htdocs. Let's grab this, places this inside of the htdocs, open this up and we can check this is that. The next thing we need to do is to create a database for our project. Inside of the MAMP start screen we open up the webstar page. From here we can go to PHPMYADMIN. If we click on tools, click on PHPMYADMIN where we can add a new database. You can see on the left I already have many databases already setup but I'm going to click on New and then create a new database. This can be any name of our choice. I'm what's called this, the wp-festival. Click on Create, then we don't need to create any tables or any data. Since WordPress is going to handle this photos. With this now sets up, we can go back over to MAMP, add to the start screen. Now the older versions of MAMP used to have the preferences on here, but now it's available in the main options. If you're using a Mac, you can head to the MAMP icon in the top corner and then click on the preferences link. This will end that linkage to the section where you can check out which port we using. If we click on ports we can see the default web server port is 8888. We're now going to use this to access our project in the browser. All we need to do is to click on localhost. Then 8888 hit Enter. Then we take it to the index of our htdocs. This will contain all the project which we are inside a MAMP. We want the wpfestival. Clicking on this will then start to up the WordPress installation scripts. The first step is to choose the language. I want to go for English and then continue. This page is just let us know we need to set up our database first only to have access to all of this information. Click on Let's go to the database name, which was wp-festival. The database username, which is roots and also roof for the password, working on the localhost, and then click on submit. Once connected to our database, we can then run the installation scripts. We need to first of all add the subtitle. I'm going to go for wp-festival. This can be changed later on in the WordPress dashboard. Don't worry too much about this. We then need to add a username and password to login to a WordPress back end. I want to go for festival admin, a password and then also an e-mail. I'm going to uncheck this for now since society is not live. Then click on install WordPress. We can then login using our details, which we just provided. My username was festival admin, then paste in the password. This then takes us to the WordPress dashboard where we can control our site. We'll take a look at this in more detail very soon. We can also click on this home icon just above the top. This will then switches to our WordPress site. If you've go to the stage, congratulations, WordPress is now open running using MAMP. 9. The WordPress Dashboard: We had a quick preview of the WordPress dashboard, just before when setting up our projects. This is the control center for our website where we can add new content, we can update, and also delete our content too. We can also use it to install new features such as plugins or themes. But currently I'm not going to go too deep into the WordPress dashboard because we are going to be jumping into all of these options in more depth throughout this course. To begin, we have this homepage which gives us a status update where we can see our site is in good health. This is also a section where we can customize and we can also see recent activity such as recent comments. We'll also get notified of any updates which is required for WordPress and also any plugins or themes too. The first option over on the left is our blog post. When we first set a WordPress, we see we have a hello world sample blog post. We can hover over this and we can edit this, we can remove this. We can also see how many comments are being provided for this blog post. We can add new and we can also create different categories and tags too, so we can organize our blog post into different sections. Over this we have the media library which is a collection of all of the assets which we need for our website. The media library can hold assets such as images, audio clips, video, and these are all organized into one easy-to-use library. We also have access to all of these assets when we create a new blog post and new pages, so these are easy to select. After this, we have the pages section which is laid out in a similar way to the blog post. From here we can access all of the pages on our site, we can edit them, we can remove them, and also add new with this button too. The comments section is related to our blog post. From here we can have full control over the way a user interacts with our blog. For example, we can moderate them. If anybody has offensive comments, we can review them first. Then we can also remove them or allow them to be displayed on the website. The appearance section is where we are going to be controlling the look and feel of our site. We can upload different themes, we can customize our current theme, we can organize widgets which are sections of content to display in different parts of our theme. We can create and edit different menus for different parts of our sites, and also play around with different layouts and color schemes too. The plugins section is where we are going to manage all of the extensions for our sites. This is where we add the different functionality which is not included with the WordPress core. For example, we're going to be using plugins, which are going to add e-commerce functionality, we're going to add e-mail functionality, and as a plugin for pretty much any type of feature which you want to add to your site. After this we have the user section where we can manage all of our users for our site. Currently, we just have ourself because we've only just set up this site. Each one of these users is assigned a different role. We have full access to this dashboard and we can upgrade all the content which we want to use. We have the administrator role. But there is also other roles too which are for regular users, so they can't just log in to the dashboard and change our site. But more on this later. The tool section is going to allow us to do things such as importing content and also exporting our data too. Finally, we also have lots of different settings or options for our site, and we're also going to get lot more familiar with all these options as we go through the course. So this is just a quick overview of what is included with the WordPress dashboard and exactly what we can control too. Next, we'll have a look at the files and folders which are included when we set up WordPress. 10. WordPress Files & Folders: On the first setup a WordPress project. We download the WordPress core. The WordPress core contains all of our files and folders, which's what a person needs to function correctly. Now, we don't need to know the exact roles of each one of these files and folders, since there is a lot of code inside of these. But understanding the basics will really help us. To find all of the files and folders, this will depend on whether you're using local or MAMP to set up your project. If you were using the local, you need to go to the Start screen and click on this arrow. This will then open up a window with the location of our projects. If we go into here and then inside of our app then public, this is all of the core files and folders which is needed for WordPress to function. If we use a MAMP, just like we've seen before we need go to the htdocs and then into our project folder, and then we are presented with the same files and folders, which is what is called the WordPress core. The WordPress core is not intended to be edited, so we generally leave these as they are. One of the main files which we have is the wp-config, which is a PHP file. This file is where we tell WordPress all of the database settings which we'll have for our projects. This file can be created manually, but in our case, this file was set for us when we created our site using local. Or if you chose to use MAMP for this project, this file was created when running the installation script earlier. Just below this we have the wp-content. This is probably the location where we'll spend most of our time. This is an important folder since it contains everything which we'll use for our site, and any images or videos which will be stored in the uploads folder. You may also often see a upgrade folded too, which is a temporary folder used by WordPress when updating our site. You may also see a languages folder too, if making use of other languages for your theme. If we open up the themes folder, by default, WordPress provides some default themes for us to get started with. Over on the left here, we can see the default theme, which is currently 2020, and we can change this inside the dashboard. We can also download new themes and drag them into this folder and then activate them that way too. We also have the plugins just above, and this is going to be the location where we store our plugins, either via the dashboard or by downloading them and adding them to this folder. If we want to make some modifications to our themes, we can drag our theme folder. For example, 2020. We can drag this over to a text editor and we'll do this in one of our projects later in the course, including creating our own page templates. This is a quick overview of some of the main files, and we'll jump into this folder as we need to during the course. Now, we understand a bit more about WordPress, let's move on to creating our first project. 11. Music Festival Project: What we will be building: We're going to begin with a simple project to get us used to how WordPress works including setting up pages, including themes and adding general content. Let's take a look at what we're going to build during this section. This is going to be my version of the project, which is going to be a landing page for a music festival. You can follow along and create this exact version or you can make it your own too by using a different theme or design. If you were just starting out and are brand new to WordPress, you may want to follow along with the same steps in design which I've created then possibly customize at the end when you feel more comfortable doing so. This is the project we're going to build in this section. It includes a navigation bar at the top. We're only going to create a landing page so we only have one menu link. We're also going to create our site title at the very top. We'll have some social media links on the left-hand side, which you can use to link to your profiles. We'll have a full size background image in the header section. Then scrolling down, we're going to make use of WordPress's new editor to create all of the layout and content for our homepage. We're going to create different rows and blocks of content using this editor. Learning how to add different types of content such as images, galleries, and lists. We'll also find out how to lay things out in different columns so we can structure our content exactly how we would like. We'll also discover how to use things such as the Media Library, how to include widgets for blocks of content, and also how to set a bow theme. We're going to kick things off by adding this theme in the next video. 12. Music Festival Project: Installing Themes: To begin, we're going to install a new theme for our project. I'm going to choose a free theme from wordpress.org, but this is completely up to you. I would recommend if you are a beginner, to stick with the same theme which I'm using, since if you do choose a different theme, it may come with some different options or may have a different look or feel, or it may also have some extra options too. If you are a beginner, I would recommend you stick with this same theme, or if you want to play around with things afterwards, you can take a look around and choose a different theme too. Let's jump into installing our WordPress theme. At the moment, we just have the basic default themes which we included when we set up a WordPress originally. We can see these if we go to the visit site button or I still have mine already available inside the browser. This is the default theme which is included and we can see this if we go to the dashboard, and then into the appearance and theme section. From here we currently have three different themes installed, and we're using the 2020 theme at the moment. We can also hover over any of these different themes, and also activate these too. This is how the 2020 theme currently looks, and by default, we'll first set up WordPress, all of the blogposts are displayed on the homepage. At the moment, we would just have this simple Hello World blogpost and also this sample comment just below. We also have a Sample Page too, and we can also rearrange the contents for any of these pages from the WordPress dashboard. For example, we can move all of the blogposts which are currently on our homepage to be on a dedicated blog page. To start off with this project, we're going to install our new theme. From wordpress.org, we can go into the theme section and we can include any of these available themes to make our site look as different or personal as we want. The options which you have to install a theme is we can either select any of these and click on the Download button. This file which we downloaded, we drop this into the theme section from all files or folders that we looked at previously. Alternatively, and probably a more simple way is to go back over to the dashboard, and we can click on "Add new". This project I'm going to be using a theme which is called Asura. We can do a search and the Asura theme is going to be this one which we see just here. To install, we simply click on the Install button and then once this has been downloaded, we just need to activate this as our current theme. Once it is activated, we then have the option to customize our theme. The customizer gives us the options which are on the left and we can see a live preview of any of the changes over on the right. For example, if you go into the site identity, we can change our site title and also the tagline too. We can include a logo and a site icon and we have lots of different options to change the look and feel of our theme. Just because we're using a pre-built theme, it doesn't mean we just stick with the exact look which is provided. We'll make use of many of these options as we progress through the course, and we can also now see our active theme if we reload the front end. It does currently look a little different how it looked in the pictures, but this is just because we don't have the same content set up as the demo. The job of a theme is just to provide a skin or color scheme for our content. 13. Music Festival Project: Creating Our First Page: As we discovered in the last video, WordPress by default will display our blog posts on our home page. We can change this to display these posts on any other page, but first we need to create a new page to display these on. Over to the dashboard. From here, we have the pages option over on the left. If we click on this, we can add and manage all of the pages which are on our site. I'm going to leave a place the privacy policy which is already setup, but we can remove the sample page. Let's remove this, and then we can add a new page, which is going to be our home page. The first thing we need to do when creating a new page is to add the page title. Then we can add all of our content below. We're going to cover adding our page content on the content editor in more detail in the next video. We also have some options to either publish this page immediately, or we can schedule a list for a later time. We have a permalink section where we can set the link to this page. For example, this would be our URL, and then forward slash home. If you had a blog section this will be forward slash blog and so on. We have a featured image which is the main image, which we can use when at least in this page. We can link this by clicking on this button, and this will be uploaded to our media library. Have the discussion section where we can allow comments for this page, and also any attributes which you want to add, such as the order which this page will appear. Also included with this theme, is some options where we can lay out the sidebar. We can have the sidebar on either the left or the right or no sidebar at all. These sidebar layout options have been coded by the creator of this theme. Yours may be a little different if you chose a different theme. Now with our site title in place what we need to do is to click on "Publish" and then "Confirm" and this home page is now live. Back to our front end of our site and refresh. I want us to have access to our home page, click on this. This is the permalink which we've seen before which is forward slash home, and then our page title. We don't have any page content just yet, but there is a couple of things to note. First of all, this homepage title is displaying, and it's pretty bold, so you may want to keep this in place depending on your project. But I'm going to remove this from the dashboard. Back over to your page. Then down at the bottom where our layout section is, we can go to the disable elements section. From here we can check the content title, close the section down. We now have access to an update button. Then refresh the page to confirm this has been removed. The second thing is we actually want this home page to be the home page for our site, rather than the blog post which we currently see. To change this we can go over to the dashboard, and if we click on the WordPress icon, will then take it back to the main dashboard section. In the settings section, we can go into reading. From here we can change what the home page will display. Currently, this is set to display the latest blog posts, but we're going to change this to be a static page, where we can select our new home page. Click on "Save". Now if we reload the project, we now see our empty home page. If we had a dedicated blog page, we could also set this too but we're going to look at this in a future video. Just before we move on to adding more content, we can also set up the site title, and also the tagline for this project. As to this back over in the customizer, which is available under the appearance section. We've already looked at how we can change the site title and also the tagline using this site identity section. The tagline doesn't matter at the moment because we've already got this hidden, but if we wanted to we could also add a logo to the header. But I'm going to leave this and add this directly to our page. We can also set a site icon which will appear in the browser tab. We want to do both of these in the next video. Back to the main menu. We'll use a lot more of these options throughout the course. But next, we can also make use of the social media links, which have been provided with this theme. From this section, we can add the links to all of our social media profiles. Just as an example, I'm going to add my Twitter URL. If we now publish this, as tests are, we can close down the customizer and refresh the browser. Click on the Twitter icon, and this will only take us directly to our social media link. With this first page now setup, let's move on into the media library where we can add some images to our project. 14. Music Festival Project: The Media Library: Sooner or later you will have the need to upload different types of media, such as images, your project. WordPress provides us with a really simple and easy to use solution, which is the Media Library. The Media Library is a central location where we can place all of our assets, such as images, video clips, and audio, or even files too. It then gives us access to this media library when we create things such as new blog posts or new pages. Let's take a look at how we can use this now. From the dashboard, we have this media library option from the sidebar. If we click on this, we can see any of the existing assets which we have inside of our project. This media library is not just the images, but also other types of media such as videos, documents, and audio. You can use these same images as me for this project which are available as a download, or you can also select your own if you prefer. From this view, we can either click on the Add New button where we can drag and drop any [inaudible] files, or we can select files from our machine. Over on the left, I have a folder which has all the images for this project. We can either drag over each one of these individually or instead, we can simply drag over the full folder. Once these have been imported, we can click on any of these individually. It's also recommended if you are pushing this site to production to also fill in the additional details, especially the alt text. We can also edit the title, the caption, the description, alongside the file URL, which we can link to in any web blog posts or pages. Since this is a demo project, I'm going to leave all of the additional image information empty, but do be sure to fill in this additional information if you are using a live site, which will help with search engines and accessibility. Now, these images are included in our media library, we can now access them in our pages or blog posts or our pages if we go into our home section, click on "Edit". We can directly add images into our page by adding a image block, and we'll take a look at how to do this in the next video. Now, although we're just going to go into the document section and then sets our featured image. I'm going to select this one and then set this as our featured image. A featured image is an image which represents our blog post or our page. The page is featured image can be displayed in a number of locations. In our case, the themes author, you set this to be inside the header. Now if we update this and refresh our site, we now see that this has been placed in the header. We can see here we have some white space over on the right-hand side. This is because for this course project, we keep the image file sizes down. I've not included any huge images. We'll have a few different ways we can fix this. We can either upload a larger image or if we wanted to, we could also adjust the CSS. We can add our own custom CSS by going over to the Dashboard, down to the customizer, then we have a Additional CSS section. We can target our HTML image, which is "img" Then inside of the curly braces, we can set the width of the image to be 100 percent. Refresh our site, and now our image has been stretched to the full width of the browser. This is the featured image for our page, but if we were to add a featured image to a blog post, these often displayed alongside each blog post on the blog page listing. Also as a side note, these featured images used to be called post thumbnails. These were in early versions of WordPress, so you may still see some references to this in the documentation or also some guides. Back over to the customizer, I'm also going to set the site icon. Back into the main menu and from the Site Identity, we can select the site icon. We want to go for the same image, select this, then we can also crop this to be a smaller size. I'm going to go for the image, the hands, crop this, publish our changes. We can now see the site icon inside the browser tab has been updated with our new cropped image. 15. Music Festival Project: The Gutenberg Editor: In WordPress version 5, they released a whole new revamped editor for editing our blog posts and pages. This was called Gutenberg. This allows us to move away from a sort editor approach and replace our content using blocks. We're now going to take a look at the Gutenberg website and take a quick overview of how these blocks work. I'm currently on wordpress.org, which has this Gutenberg section. This is going to give us an overview of some of the blocks which are available to create our blog posts and our pages. Now we don't need to head over to this page, but this is going to give you an idea of exactly what is available. We have some basic text blocks, we have images, we have buttons, and also ones to help out with layout such as columns. We can edit them, we can rearrange them, and in some cases we can also nest them inside of each other too. If we go back over to the Dashboard, we can make use of these inside of our pages. Currently our homepage is empty, so we're going to go over to this, and we'll go into the edit section, where we can make use of some of these blocks. To add a block we can simply start to type inside here. This will give us a simple text block or we can click on the plus icon in the top left. We can scroll through all the different types of blocks and sections which are available. We've got pretty much any type of content which is going to be required for building the page. We have tables, we have images, we have galleries, we have video sections, we have this design section where we can lit up our page into different sections and columns. We can break up our pages. We edit separators, we have all of these pre-built widgets which will allow us to add calendars and links to our latest blog post. We've social media links, and also different plugins can add different blocks in here too, such as WooCommerce, which will allow us to add some e-commerce functionality into our pages. To begin, I'm going to add a heading into our page, which is going to be a level 2 heading. We click on this, make sure the H2 is selected. Then we can simply add the text which we want as our page heading. Since this is a festival, I'm going to say a full weekend of live music and entertainment. All we need to do is click off this and now our heading is in place. Since this is a festival and it's based over the weekend, the next block I'm going to create is going to be a two column layout. The left column is going to be for the Saturday, and the right column is going to be for the events which is happening on the Sunday. Go back to our plus icon, and inside here, if we scroll down to the design section, we can click on "Columns" We're going to go for a 50/50 two column layout. First of all, the left column is going to be for the Saturday. I'm going to nest a new block inside which is going to be a heading. This time we'll make this our level 3 heading so it's a little bit smaller, and this is for our Saturday. We can also format this section too. I'm going to align the text into the center. I'm going to also go to the color settings and adjust this too. I'm going to go for the green color for this section. Then with this selected, we can click on the plus icon or just below. This will add a new block directly below our level 3 heading. This is going to be a list which is going to list out all of the events or all of the information about this Saturday. We're going to say eight live bands. Then if we hit "Enter" we can keep going with our list. We'll say 20 singers, two DJ's, eight food and drink stalls, four stages and three arenas. Then finally, free overnight camping with tickets. Once we're done, we can just come out of this, and let's remove the last bullet point. Then this is the Saturday section all complete. Now over on the right, we can create the Sunday section, beginning again with a level 3 heading, which is going to have the text of Sunday over this, and we're going to then align this into the center. Then match the color from the left. Then if we click on the plus icon, we can then add our list just below. This Sunday is going to have 10 live bands, 18 singers, three DJs, eight food and drinks stalls, same four stages, and three arenas. Finally the closing party. At any point we can click on "Update" and we can checkout how this is looking. We go and visit our front page. Go down. We see our heading and also the two lists on the left and right. You maybe also want to center this level 2 heading, so let's go up to this. If we hover over, we can align this text into the center.