WordPress 5 Theme Development Academy with Bootstrap v4

1. Introduction: Welcome to the WordPress Theme Development Academy using Bootstrap. This is a fully updated WordPress theme development course using WordPress version 5 and the bootstrap 4 framework. If you want take your WordPress skills to the next level, learning theme development is perfect for this. It will allow you to build custom WordPress websites that look and feel exactly how you want them to. It will also give you an advantage over other WordPress developers using the prebuilt themes and trying to customize them based exactly what they are trying to build. This is what you'll be able to build by the end of this course. By the end of this, you'll be able to build almost any type of new website which you want using WordPress or take any existing website and convert it to a WordPress theme. What exactly is a WordPress theme? To see what WordPress can do, let's take a look at some examples. This is the blog page for the theme we're going to build together. We have the header at the top; linking to the home and blog pages, a subtitle, a header image, and a text overlay. Then below us we have the blog post listed on the left and then the sidebar on the right. Next, using the exact same version of Wordpress and the exact same content, all I have done here is switch to a different theme at the click of a button. This has the same blog post and we can also see the page links are the same, but a completely different look and feel. Again switching the theme once more, this is how we'll look using another prebuilt theme. This completely changes our blog page and all the other pages on our site. Also the same for this example two, completely changing the field of our Wordpress sites. In this course, we won't just be doing the bare minimum WordPress theme, we will begin by creating a static HTML and CSS version of this theme using Bootstrap 4. Learning Bootstrap is also a valuable skill in itself, but then we move on to setting up WordPress and looking at exactly what is needed to convert this site to a theme. We cover all the steps including some of the more advanced and challenging concepts such as custom fields, theme translation, custom search forms, using hooks, and also some custom functions to get the exact functionality which we want. If you want to get serious about WordPress theme development, enroll in this course and I will see you in class. 2. What is a WordPress theme?: We know for this course we're going to build in a WordPress theme. But what exactly is a WordPress theme? Well, only official WordPress documentation. In the what is a theme section, we can see that a Word Press theme and changes a design of the websites, and often changing the layout, which will then change how the end user sees our sights on the front end, i.e, what a visit disease. Basically a theme can have different layouts, it can use static or responsive layout. Will be using Bootstrap to create a responsive layouts with various column widths. That generally takes all of other content from WordPress, well, if that is the page is we've created, we'll if that any blog post, any media such as images of videos and displays them in any way which we create in our theme. Going on further down, themes are made up of some required files, such as the index.php, and also the style.css, and we'll add these into our theme soon. We'll also be adding a lot more PHP template files, we'll also be creating files for Localization, which is what translating our theme. Will be used in multiple CSS files and JavaScript to include Bootstrap and generally all all the rest of the contents which we'll need to construct our theme. If we take a look at the finished side over here, this is the skin of the theme which we are going to be building for all this course. It will include lots of Bootstrap columns, rows, images and text to create the final version, which you see here. If we go to the blog section, it is going to be all of the blog posts which we'll create in WordPress, and it's going to loop through them and display them all on this page, along with our sidebar on the right hand side, which will allow us to search through these posts. And also filter by the archives, the categories, or any tags which will be added. If we go over to the dashboard, and then in the theme section, this is the Tranquil spa theme which we have activated. When installing WordPress we also have default themes which come with it. I'm going to activate a different theme called 2019. Then if we go back to our site and refresh, we see these same two pages of home and blog. Since it's using the same information, which is currently in WordPress, we'll just create in a different layout. We also have our same blog posts. Although a different style and the layout has been applied, this is the exact same content, but presented in the different way. We also have our sidebar down at the very bottom. These are the same blocks of content which we've created in our theme, but just laid out in a different way. Back over to the theme section, let's take a look at one more. This is the 2017 theme. Let's take a look at this, starting with the home. This again looks completely different. Although we do still have our same pages, it has a completely different feel to our original site, and this is what a theme will do, clicking on the blog. We still see all of the same content, such as the blog posts which are all listed. You see these same featured images which were added, and also this sidebar on the right has all of the same blocks of content just rearranged in a different way. This is the power we have as a theme developer. We can create any type of website we want using WordPress, and this will allow us to create our Tranquil spa website as we go through the course, along with giving you these skills and knowledge to build any type of WordPress website which you would like, whether that's for yourself, or a project, for the business or for the clients. 3. Setting up Bootstrap 4: Welcome to the Bootstrap section of this course. This is where we kick things off with creating our custom theme. This section is all about creating a static HTML and CSS websites. Hamel created exactly how we want our Wordpress theme to look. However, don't worry about WordPress at the moment, which is billed this as we would do with any normal HTML websites. Then we handle the conversion to WordPress in a later section. The first thing we need to do is to grab the Bootstrap core, CSS and JavaScript files. To do this, we need head over to get bootstrap.com. This will take us to the version four of Bootstrap. I'm using version 4.3, and I would recommend you use the same if possible. To get started with Bootstrap, I'm going to go over to the documentation in the introduction section. On here we have some Quickstart links, we have a CDN link for the CSS, and also the JavaScript. Then below this we have a starter template for our index page, and we'll come back and grab this soon. Although I'm going to click on the download button from the menu, and then click on the compiled CSS and JavaScript link, and then starts off the download with this button here. Obvious in this compiled CSS and JavaScript download, which we'll get started really quickly. Once this is done, we can click on the package and unzip. Once this is unzipped, I'm going to move this over to the desktop. Let's drag this over, and then I'm going to rename this. The name I'm going to call this is tranquil-bs. This is for the tranquil boost up version of our project. Later will create a tranquil-wp, which is for our Wordpress conversion. The next thing we want to do is to grab the images. The images are included with this course. Go ahead and grab those if you haven't done that yet, and then drag this over into our folder. I would have Visual Studio Code open here, and you can use any text editor which you like for this course. To get started in VS Code we just need to drag over our project folder, and then this will open up with the contents in cyber. It's compiled version uses various CSS and JavaScript files. I'm just going to be using the bootstrap.min.css for this course. Which is a minified version of the main CSS, which includes the available Bootstrap layouts and components we need. There is also different versions too, if you want to make use of the CSS grid or Bootstrap's reboots, and you can find out more about what's included in these files in the Bootstrap documentation, if you would like. Next up we have the JavaScript folder, which is right at the buttom here. The same goes for the JavaScript, I'm only going to be using the main bootstrap.min.js file. Then of course we have the images which is supplied for this course. You will also know that is no index.html file. This is not provided, so we need to go and create one ourselves, in the roots of this project. In the main route, let's click on new file and let's create our index.html. If we go back to the browser and then back into the introduction section. We can now copy the starter templates that we looked up before, you can however select all and copy, or you can just click on the copy button in the top corner. Copy this and then over to our index.html. We can now paste this in. First of all, we have the Bootstrap CSS, which is up in the head section. This basic starter kit points to the CSS and JavaScript files we need from bootstrap and these hosted on CDN. You can see by these links here. Let's change this to point to our local files which we added into our project, starting with the Bootstrap CSS. In the href, we can remove this and then we can point this to our CSS folder, css/bootstrap.min.css. Down below, we can then look at our JavaScripts, scroll down to the very bottom in the script sections, we have three different scripts here. First of all, we have jQuery, which we can leave it for now since we don't have this installed in our project. We can also remove the Popper.js, which is the middle script just here. This is not needed for our projects, and this is only required for certain Bootstrap components, such as when using tooltips and dropped down links. However, if you do intend to customize the template, recreates, make use of these, you can of course, leave this in, then we need to change the core Bootstrap JS file to point to our local file. If we remove the source here on this CDN link, then changes to our JavaScript folder and the file we want is bootstrap.min.js. Along with the core bootstrap CSS we've been provided, we also want to add our own custom styling. To override any of the default Bootstrap styles, which we can deal with a custom CSS file. Back in the sidebar, in the CSS folder and create a new file, and it's called Custom.css. Would lead to then link this in the index.html to points to this new file. Open at the top, we're going to add this just after the core Bootstrap CSS. Let's add a comment of Custom CSS. We can then add our link. This style sheet is a style sheets and href points to our CSS folder, and the name was custom.css. As with any over website project, we should include our own custom stylesheets last. They will then be loaded last and override any of the stylesheets above if required. In our case, the custom Bootstrap CSS. The last thing to do is to change this page title to be tranquil spa. We can give this file a save, I'm going go to the index.html, copy the path, and then paste this into a new browser tab, to open this up. You can also go into your project folder and double-click on the index page to be taken to this, and now we see the Hello World text, which is from our sample code, which is h1 just here. That's it now for our project setup. I will see you now in the next video where we'll begin customizing our theme by adding Google Fonts. 4. Adding custom Google fonts: Since we are creating our own custom theme, we are free to make use of any type of font which we would like. I'm going to make a news of a Google font in his theme, and you can of course choose any of those which you prefer. You can have a search for Google fonts, or you can head over to fonts dot google.com. Take a look through these and select any which you prefer for the theme, or you can follow along with the same one as me, which is going to be called merriweather, so let's do a search for merriweather and this is one we want just here. From the drop down here we can select which version we want. I'm going to be using a light version, which is light 300, so select this, and then to add this, we can click on the plus symbol just here. This then add it at the down at the bottom and then we can expand this to get some of the information we need to include it into our projects. That's all we can include in this style sheets in our project by copying the link just here, and then go over to our index page. Close these down, so the index.html, and then we include this just above our custom CSS, so custom fonts. Then it just after this, we can paste this in. We can now go back over to the Google Fonts websites, and you can see how to set this as a CSS rule in our custom style sheets. Down at the bottom, we can copy this line here, which is for the font family, and then over in our custom CSS, that's at this end. Let's first grab the body selector and then paste in the font family, which is going to search for a merriweather if it can be found, if not, it will default back to a standard serif. Give this a save, and then back over to the browser, reload our index page, then factors needs to save. The index.html gives that a save, and then reload. Now see the custom fonts has taken effect in the browser, and this is all we need to do to include custom Google fonts in our project. Next we'll move on to creating a header section. 5. Header navigation: Currently we just have a basic Hello World example from the bootstrap starter templates. When organs change this by adding the top navigation, it will go to the finished version here. This is going to be the top navigation bar, which is here. Over on the left-hand side, we'll have a home link with a site title. And then on the right we'll have our links. If we shrink the browser down, this will be fully responsive, and this will also dropped down to a button, which when clicked on it to get our menu links on smaller devices. Let's start over in the index.html. The first thing I'm going to do so don't have any problems in the Bootstrap CSS,I want to know if these two attributes of integrity and also the last one of cross-origin, then bring this back up on the same line. Also the same for the JavaScript at the bottom. The one way we linked our minified version, we can remove the cross origin on the integrity and then give this a save. The next step is to remove our HelloWorld. The sample code. I will no longer need this. Instead we're going to get started with a header. Open up the header and then nested inside we have the nav elements. In nav element is going to contain two things. First of all, on the left-hand side, we're going to have the site title, which you seem for, and then the menu links over on the right. These menu links will collapse in to the drop-down button on smaller devices. Let's get started by adding these in now. Let's begin with our link, which is going to be for the site title of tranquil spa. This is going to have some Bootstrap classes, if we save this, and then check this out. We can see it's just pretty standard texts at the moment. Let's start in the nav elements by adding some Bootstrap classes. The first one is the simple navbar. If we give this a save and then reload, we can see this is now moved in from the top edge. We can see what styles have been applied by going into the developer tools with right-click and inspect. If we then click on the selector and then have over our navbar. Make sure this navline is highlighted and then on the right we can see what styles have been applied by bootstrap from this navbar class. We can see that it uses the CSS flex box as the display type. We're also using some padding which moved in from the top corner, which we've seen before. We can add additional classes to this too so just after the navbar, but add navbar, expand-md, give this a save and these styles will apply over the medium sized devices. If we reload this, we can see in the media query, these styles will apply when the minimum screen width is 768 pixels. If we do shrink this down below 768. Just a little bit further, we load. We can see we just now have the navbar applying from before. We no longer have the second-class applying. This navbar expand class will set the CSS flexed with the row with no rap, as we can see here, and justify the content be flexed start, which is over on the left-hand side. Then let's add some background colors for this to stand out a bit more. Just after this, we can add the navbar light and also bg-light. We can use any combination of these colors here. I'm using the navbar light, which used to be used with light background colors, and then bg-light to specify the actual light background color of the nav. If we reload, we can now see this all difference in the background. Now let's get to work with our link of tranquil spa. This is going to have a class, a bootstrap class of Navbar-brand and then we can just add a empty [inaudible] , the link to our homepage. If we now save this and reload the browser, we now see this applies a style, color and spacing properties to our link. Next up I'm going to create the button, which is for our drop down menu. Just a normal HTML button. So inside here, we can add some Bootstrap classes. The first one is going to be navbar-toggle, and then the type attributes of button. We're not going to add any text inside here because soon we'll be adding a icon and this icon is the free lines which you see on the finished version of in the corner. So the next two attributes which we add the button will be related to the small screen and the drop-down content which it controls. First of all, let's add the data-toggle to be equal to collapse, and then we can also add the data target, and we're going to set this to be equal to aid. So let's add the hash in and call this the navbar nav. Here we see a nice data-toggle and we declared we want the content to collapse when this button has been clicked on. But which content do we want to collapse? Well, if we look at the finished version, this is going to collapse and expand this navigation menu. We haven't created this yet, but once we do, we'll give this AID of navbar-nav. This data-target can be any CSS selector we want. So we'll just use it like regular JavaScript. If you want to target class, we can use the dot or use the hash for an ID. Just before we create the div we want to control by the button. I'm going to add a span, which is going to add in the icons that we just seen before. The span is going to have the class to add these icons in of nav bar toggle icon. Let's check this out over in the browser, and below, down to the smallest screen and we now have the button with the free icons from our spun. If we expand the browser, we should also see that this button disappears because we've added this expand on medium devices. Now let's create our div follow links. This is going to be the container for our home and our blog navigation link and it's going to be the container, which is button toggles open and close. Let's get to work just below our button. Let's add our div which is our container. The first class is going to be equal to collapse. This is used to hide the content when we need to. Next up we have navbar collapse. The second bootstrap class will group all the contents together, and it will also be used in conjunction with the navbar expand md. It knows to hide this container underneath these breakpoints and the third one is for the CSS flex box, this is justify contents end and this will push our links over to the right-hand side of the navigation. Inside of this table, we can go ahead and create our links, which is going to be an unordered list. Unordered list also takes in some classes are the styling and layout and the first one is going to be navbar-nav. We then add our list items. The list items classes are going to be nav item, and then nested inside we have a link by using a elements with the texts of home. This link is going to have a class of nav link and then we can set the hate draft to point to our index dot HTML. Good, let's copy this and add in one more time for our blog. This first list item, paste this in. This is going to be for the blog and you can also change the href to be our blog dot HTML. Of course, we've not created this, but we'll get to this in a later video. So give that file a save and then over to the browser. Let's reload and expand this. We see on the larger screens we have our home and blog links, and then finds to the button is hides the content on these small devices. But if we click on this button in the top corner, we don't see the links dropping down. This is because if we go to our button, we set the data target of navbar-nav. Both not added this to our container. Inside this div, let's add the ID of navbar-nav. Give this a save, reload the browser and now we get a work in drop-down menu. Expand this and this now goes back in to the full-screen view. Good, so this is it now for the menu, and we'll continue with the header next when we add the featured background image. 6. Featured image section: The next stage of our Header is to add this featured image, which is the background which we see here. Later in the course, will also allow us to be changed in the WordPress dashboard over a control by the user. First, we're going to go ahead and add a new section and still within this header element. Let's locate the closing header tag. Then we can create a new section. The section is going to have a Bootstrap class of container fluid. To lay out a page in Bootstrap, we use a series of containers, rows and columns, which uses the CSS flex box under the hood. There is a container class which groups the content into a responsive pixel width container, which leaves a gap on the right and left-hand side of the page. We will look at this alternative soon. There is this container fluid as we've just used here, which provides a fluid container which will stretch to 100 percent of the available screen width. With if type it can be used as a reference to center and part our content inside. Nested inside this container, we add a class of row. Rows allow us to NES content inside and sighs the content by using columns, and we'll look at this very soon. But for now we're going to go and add our row. This is going to be a class on a div wrapper. Inside here we can add our image, which is going to be the background image which we've seen before. The image source is going to be from the images folder which were provided with this course. Inside there, there's a image called Lake.JPEG. We can also add the old text of lake backgrounds then a class which is a custom class, we'll get to soon of header_IMG. Just after this image, we're also going to add a div. This div is going to be for the text which is laid over the image. Then inside we can add the p elements to add some text. I'm going to add fully responsive premiums path theme for WordPress. You can add any text you like inside here, and then let's add some break tags, just to split this up on two different lines. This after responsive and also after theme. We can control these texts in the CSS. We also need to add a class. This again is a custom class of feature text. Feature text is one of our own custom classes and nothing to do with Bootstrap. We simply going to take advantage of our own classes too so we can control these texts in the CSS, or to the browser. Then reload, there's our image and also our text. Our text is now seating below the image. This is not the result we want for our final project. We're going to go ahead and add some custom CSS classes and also some Bootstrap classes too, to make this text overlay the image. First let's set up the Bootstrap classes. We can set the surrounding row to be a position of relative. Let's go to our surrounding row which is just here, we can add the bootstrap position relative, and this is exactly the same as going into our CSS and set in a relative position, but this way it's just a bootstrap class, and then bootstrap takes care of adding all the CSS which we need. If we save this and then reload, open up the developer tools, you see the position relative class has added the CSS position value of relative,and then bootstrap is also added importance on the end. Just make sure that nothing overrides this. Next, we need to set the text to be a position absolute. In the div which surrounds our p elements, a class, our position absolute. They should now move the text. If we reload the browser over the top of the image, setting the text to be a position of absolute, we'll take the text out the normal flow of the webpage. It then position itself to the closest relative container, which is our row, the next stage, is to center this text in the middle of the image. Let's do this by going over to our row, which is just here. We can set the display type to be flexbox with the dash flux. We can also set the flexbox value of justify content center, which will align the content in the center of the main axis. Save and reload. This leaves us halfway there, we've now got the content in the center horizontally. Now we just need the vertical alignment too. I'm looking to do this by adding one more class to our row. This class is align items, center of the browser and there we go. Positioning like this used to be a lot more difficult before flexbox. Both the align items center property, will align our content now on the cross or opposite axis, which gives us perfect horizontal and vertical alignment. One little tweak we can make is to set the text to be centered too. At the moment it's all aligned to the left of the container. Again, we can apply this to our row just after the align items center. We can add text center and there we go. We can now finish off this section with a little custom CSS. We already have a custom class of header image which will use now. Now let's add one to our surrounding text div two. Here's our text and in the surrounding container, after position absolute. Let's add feature dash BG, this will be used to add the surrounding box. If we go to the finished version which surrounds the texts, so we can write a little bit more easily over the image. This background would also be 60 percent of the container on larger screens, and then jump up to be the full-width on smaller screens. Let's get to work over in the Custom CSS. First step is to set the image to be a max width of 100 percent. We can then use the feature BG class to begin to create our background. The background is going to be created using a RGBA color. So we give it this nice transparency we can see here. The four values is going to be 255, 255, 255, and then the forth is for the opacity. I'm going to set this to be 30 percent, which is a value of 0.3. Make sure this is a dash. Now onto the width, the width is going to be 100 vw for the larger screens, which will span the full width of the browser or the view port. The border-radius of 10 pixels, gives us a save. Open up the tab and reload. Not much has changed there, I think we just need to save the index for the custom class. Give this a try. Now let's make this a little bit bigger. We have a surrounding div of feature text. Let's grab this. The font size is going to be two REMS. Also the line height that increase to be four REMS, reload. The next step is to add a minimum height to our header image. Let's scroll down to the header underscore IMG, All we're going to do here is set the minimum height of the image speed 25 VH. Meaning the image will always be a minimum of 25 percent of the view bar height. The last thing to do in our CSS is to create a media query. If we take look at the finished version, make the width of this background 60 percent on the largest screens. As media, let's target the screens. We can also match up our breakpoints with the Bootstrap breakpoints. The minimum width of 768 pixels. Going to grab the feature BG and set the width to be 60 vw. On larger screens, the background will be 60 percent, then on smaller screens, the background will be a 100 percent. Save this file, over to the browser. If we shrink it down and close the dev tools to get more space, the background and texts for our small screen is the full width. If we increase the screen space available, this now drops down to be 60 percent, which is exactly what we wanted. This is it for our header now. Just quickly before we go, I want to show you the difference between the container and the container fluid. Currently we've set the section to be container fluid. If we just set this to the container and then reload, this makes the container a fixed pixel based width, meaning there is a white space on the left and right-hand side. Where as container fluid which we had before, will stretch to the full width of the browser, and we'll make more use of these containers as we go through the rest of the course. 7. Welcome section: In the last video, we finished off the header section. If you take a look at the finished version, we're now going to move down to this 'Welcome section,' we see here. This will give us a chance to work with columns for laying out content into equal parts or three parts in our case. If we shrink down the browser, we see this section, along with all the little sections, is full responsive. Then we'll stock in a smallest screen view. In the index dot HTML. This content will go just below the header which we finished. Let's go and do this now. We locate the closing header tag. The first thing to do is to create a div. This is going to have a class of container fluids, just like the header section, did too. Then also a class of Tech Center, to add our text positioning. Then we're going to add some padding. We're going to use this with py-5. Now this may look a little bit confusing. Let's go to the Bootstrap documentation in the sidebar. If we go to utilities and then down to spacing. This explains how we can use margin and padding as our class names. We need to build these up with a P for padding or an M for margin. In our case, we've used py-5. P for padding and then we can use, the top, bottom, left and right values. Or we can set the x and y to apply them to the top and bottom or left and right, followed by a size of zero through to five. In our case, the py is certainly padding value on the top and bottom. It can also have a play around with these different values too to see to your project. The next thing I want to do is to create a row which is going to be wrapper for our texts and also this icon in the middle. Inside of our container, let's add a second div with the class of row. Then nest it inside here we can add our columns, Bootstrap uses a 12-column grid. If we set a div to be six columns wide, it will take up half the width of the screen. At the moment, each one of these have four columns, so four, four, and four. We can also set our Welcome to tranquil spa text to be the size of six columns. Then offset it by a value of three, which will push this into the middle. Giving three columns on the left and then three columns on the right. Inside of our row, lets add the div. The class to set our columns is going to be called -md, -six, meaning this will be the width of six columns on medium devices and above, all the full width on smaller devices. As we mentioned before, we can also offset this on medium devices by three columns. If I now save and then reload, you don't see anything because we have not yet added any content. If we add our level three heading inside here with a text of, 'Welcome to Tranquil Spa.' We should now be able to save and then see something on the screen. The level three heading takes up six columns or half of the 12-column grid. The remaining six columns has been split on either side because we offset this by a value of three. Next up we need to add our icon or our image just below. The source, this is in the Images folder. The image which has been provided for this is divider purple, the old text of divider two. Then a class of W25. Again, if we go back over to the Bootstrap utilities, we can take a look at the sizing. W25 will set the width to be 25 percent. W50 will set the width to be 50 percent and so on. Save this and then we can check this out in our project reload. Okay, good. The next stage is to go down and add these images. These images are also going to have a wrapper which is going to be a div. This is going to be a separate row too because we're on a new line. Then inside of this row we're going to create three new divs. Each one with a width of four columns. Just after this row here, but still within our container. That's just a spelling mistake there. Okay, just after this div here, we're going to make some space and then add a new row. The div with the class of row, also going to add some additional classes to this div. We're also going to add some margin to the top. Add some spacing which is a value of four. Going to set the display type to be flex using d flex and then add some Flexbox spacing with justify content around. Inside here we can take a better look at how columns work. We can then add a class of col sm four. Meaning that's on small screens and above this table, half the width of four columns. If we paste this in two more times, let's say a, b, and c. Check this out on the browser. Each of these three divs will take up an equal space. Instead of a, b, and c, we want to add an image and then some textures below. Let's just remove these two divs for now. Instead of a, we can add a image. The image source is going to be the images folder. Then the makeup.jpeg, make up image as the alt. Then we can add some Bootstrap classes into here. I'm going to construct this as a Bootstrap card. Will go over to the documentation. We see what card will look like. If we go to the components, then down to a card. There's lots of different variations we can use. I want to use a very simple one to get a layout very similar to this. We are going to use the card on the image of card, image top. Card body for the bomb section. Then cards text for the actual contents, which will give us some nice layout and styling. First of all, in image, we can add the class of cards img top. Then a div for the actual content just below. This div will have a class of card body. Then nested inside our text. Here a makeup. Instead of the ampersand, I'm going to use a HTML entity of AMP. This text needs a class of card text. Okay, so save this and see how this is looking. We only have one div at the minute so this is centered in the middle, but this will get pushed to the side once we add our second, and third div. If we take a look at the finished version, we can see on the image it has this rounded corners. This is a novel Bootstrap utility class which is being provided. We can add this as a class on image of the card image top. This is rounded circle. This is all we need to add to now transform our image. Rather than typing out all these classes again, I'm going to copy this div and then paste this in two more times. The middle one, if we look at the final project, this one is going to be the candles image and then need texts of spa facilities, this probably makeup, this one is candles.jpeg, the old text of candles image then spa facilities. All the rest of the classes will stay the same. The third one is going to be for the retreat, retreat.jpeg. The makeup image is now retreat image. Then the text at the end, I'll take a tour. Okay, let's see how this is looking back in the browser. Refresh there's all three images. All good. Okay, so there's now just one or two more things we need to do just to finish this off. If we take a look at the finished version, we can see that the images are a little bit smaller and the text is a bit bigger. This is because if we look at our version, we've used up all of the available 12 columns. So four, four, and four. I'm going to make this a little bit smaller by changing all three of these to be a value of three. Save, refresh. Now I've got a little bit more spacing around the images. These all still centered because we've justified the content around, then we've got equal space on all sides. Next up, we can make the text at the bottom a little bit bigger by overriding the Bootstrap styles. The Bootstrap class of card text has been applied to the text. Let's go to our custom CSS, just above the media query. We can add the text of, 'Welcome section.' The one and only style we need to add is card text. I'm going to need this to be a font size of 1.2 rems. Open up Chrome, reload. Now that looks a lot better and more like the final version. Let's just now finished with the welcome section and take a look at how we can use columns along with using different Bootstrap utilities. Thank you and I'll see you next time. 8. Latest offers section- HTML: We're making good progress with our bootstrap theme and now is the time to move on to the latest of the section. The section will be just below this welcome section we created in the last video and if you go to the final version here, this is a section we are going to be creating now. It will give us more practice using cards and also columns for layout, along with looking at small bootstrap classes which are available. In this video, we're going to be adding all HTML for the section along with the necessary bootstrap classes. However, little things such as the price over the top here will be custom CSS, and we'll move on to styling in the next video. On wards with the HTML in our index page. Let's go down to the bottom below the closing divs. Just above the JavaScript, we can create a new div. This new div is going to have a class of container fluid. We want the text to be aligned in the center, so we can have bootstrap classes. We're going to have a dark background which you can see just on here. We can do this with a bootstrap class of bg-dark and then finally some padding on the top and bottom, which we can add with PY for the y-axis and the value of five to keep it consistent. Inside here we add our familiar row. So add a new div with the class of row. That's all we need for this one. Then inside we're going to create the title, which is the "Latest Spa Offers". We'll do this in a similar way to this one up at the top. We're going to create a div or a section with a span or width of six columns and then we'll offset it three columns to place this in the center. So open up the div, the class, col-md, so this is six columns on medium devices and both, meaning anything below the medium sized devices will be default width. We can also provide the offsets on medium devices to be three columns, pushing into the center of the page. Our title in the h3, this is going to have the class of text slides. Since we're using nice dark background colors and the text of "Latest Spa Offers". Okay, good. Below this we need our image. This image is going to be a similar one to the one above, which is just this one here. It's going to have a slightly different color since we've got a different background which are the same with the image. So imj, the source, this is in the images folder, and this one is the divider-silver.png The alt text, simply divider and then a bootstrap class. So we're just going to add some padding on the bottom of this, starts in spacing, so below we're padding bottom or pb and the value of four. Also, we can set the width to be custom width w-25, which has already looked at, is a width of 25 percent. Then we can take a look, reload, and go below our welcome section and there's our title. Now we need to create a new row just below for these three cards on here. Each card is going to be in a width of four columns in its own separate div. So let's begin by creating the first section. We need to create new div just below this row. Div with the class of row. Close this off and make sure this is still inside of the surrounding container. We can now construct our div with the class of col-sm-4. This is a third of the page width on smaller devices under both. Each one of these is going to be a card, add a div with the class of cards, and this will give us a chance to do a similar thing that we've done in the last video, where we can add a card header, a card body, and this will add all the nice bootstrap styling photos. First of all, let's add a card header. Let's add this in a level four heading. We need to give this a class of card header. Since it's a header up at the top, we're going to add some padding to give it a little bit spacing from the top. We can do that with py-5, and this will apply to the top and bottom of the header. Inside here we're going to add the text of family swim package. Of course, type in any text which you prefer inside here, followed by a span with the price. I'm going to add 60 for this, and this is going to be the price which sits on the top here and we'll position this using CSS in the next video. But now that we just adding the HTML, so I'm going to add a class to this span. The cost is going to be equal to fond-weight-bold. This will just make it a little bit bolder so it stands out more. Underneath our h4 we can then add the card body. We've already used this class before, this is card-body. Before we go any further, let's check this out over in the browser. Refresh, and there's our card header and our card's body just below. This card body is going to get the text, which is just on here, and then another list with three list items. Okay, let's get work inside our card body. The first thing we're going to do in here is add a blockquote text. This blockquote also means a bootstrap class of blockquotes. So a class of blockquotes, and that's at the margin on the bottom to a value of zero. We can add our text inside the P elements. This text is going to be our most popular swim package, great value for families or groups of 12 people. Now we need to go below the blockquote and below this div for the card body. Then inside here we're going to add an another list, which is going to have a class of list group. This is going to be our free list items. So the first one is going to have a class. This one is going to be list-group-item, followed by font-italic. The text is up to 12 people. You can type the next one out, so I'm going to copy and paste in two more times since it's got the same classes. The text on this one is private sessions, and then the third one is going to be swim lessons also available. There we go up to the browser. Now let's go to the first tab, reload, and it's not looking good. We need to now replicate this two more times for our second and third section. So to do this, I'm going to copy this to avoid a lot of repetition. If you want small practice, you can go ahead and type this out yourself. I'm going to go ahead and locate the closing div. In fact we just need the col-sm-4, so we'll copy this div here and the col-sm-4 section. Make sure you're still two closing div tags at the end, which is for the row and the outside container. Paste this in just below. This one is going to be for the bride, and then the price on this one is going to be 40. The text, this one is going to be "Our wedding packages are perfect for your big day". Then we can cater for groups, large or small. Then all we're left to do is the free list items. The first one is going to be her make-up and this is going to be using the HTML entity of amp, add the makeup. The next one is going to be for groups of any size. This one is going to be champagne and cocktails available. We just have one more now. So down at the bottom, again make sure to use these two div tags spread at the end and then paste this in and for the third and final time and it's going to be weekend pass for $60. I want to grab the text for this one just here, and add the same between the P elements. This one is going to be pool and sauna. Then full use of our gym and the semicolon at the end there. The third one is going to be includes two treatments per person. Okay, good. I think that is it now, down if we go to the bottom and just add a quick comment, just say this is a closing container and the same for the row. Good. So over to Chrome, we can check this out and can select the tab for the project, reload and that's our three sections now. If we shrink this down as well, we can see this will be fully responsive by default because of the bootstrap classes which we've added. We will play around with this a little in the next video when we add some custom CSS. but for now though the majority is in place. So we'll see you next. 9. Latest offers section- CSS: To round off this 'latest offer' section, we just need to apply some custom CSS. This is going to be many for the 'pricing' section, which is up at the top here. I'm going to make it look just like the final version on here, what is positioned at the top of the card. The code we're going to be writing, which is going to be standard CSS, which is not going to be provided by Bootstrap. This is not a problem though, as a WordPress theme can be made up of any HTML and CSS. Regardless if it is using Bootstrap, regular HTML, or any other framework for that matter, our price we created in the last video is surrounded in a span element. Let's go up, and this is the one we can see just here. We can tag this over in our CSS. We're going to be doing this in our custom CSS file, and we'll begin down in the media query. So this applies to the larger screens, that our feature background. Let's tag the span elements, and first of all, we can take out the normal flow of the documents by adding a position of absolute, and I am going to create the background, which is going to be for the circle which surrounds it. We can add some transparency, this will be an rgba value of 175, 169, 169 and the alpha value of 0.6, which is 60 percent, we are also going to make this into a circle. We can begin by adding a height of 80 pixels and also a fixed width of 80 pixels too. So our price is positioned in the center. We are also going to add the line height, and this is also going to match, this is going to be 80 pixels. Then to create our circle, we're going to add the border radius, and we can do this by adding this as a value of a 100 percent. Before we go any further, let's see where we're at with this, so our project and reload. There's our circle with the background with a 100 percent border radius to make it round and a fixed width and height of 80 pixels. The next stage is to position this in the center and over the top of the card. Now, to push this into the center, because this is absolute references from the closest relative container, which is this div just here. So we're going to set this to a value of negative 40 on the top left, therefore positioning this in the center of the Cordova. Lets add a top value of negative 40 pixels, and the same for the left, negative 40 pixels, and let's see how this leaves us. Now this pushes this into the top corner. Since this is a width of 80, we've offset the value by 40 pixels. We've got the vertical alignment will need, and now we just need to push it across by 50 percent and we can achieve this with some margin left of 50 percent, and there we go.The final step is just to increase the font size to be 1.8 rems, and then we're good to go, 1.8 rems, both the browser and there we go. If we shrink down the browser, we can see how these sections look on the smaller devices. Let's go down to the mobile size, these sections look a bit close together on the top and bottom, so we can add some margin to the bottom of each card outside of the media query. Let's scroll up. Let's do this just about the 'Welcome section'. So it applies to all the cards, including these ones, dot card, add some margin on the bottom of 20 pixels, reload. We can now see the spacing in between each one. The last thing we need to do is to reset the margin back to 0 for this larger view, we need to do this back inside the media query below our span, again, tag the cards. All we need to do for this is to set the margin on the bottom to be a value of 0. Good work. The Bootstrap template is beginning to take shape, so keep going. Next we'll get to work with the, 'about us section'. 10. About us section: In this finished version here, we can see, if we scroll down from the latest part of the section, we have a small About Us section just below. This About Us section is pretty basic and probably something you could complete on your own, if you feel confident doing so. It simply contains our header of About Us, an image which we've used previously, along with a row of Lorem Ipsum text. This is placed in our Index page, just below the latest offer section we just created. Let's go over to our index.html. Let's create commands. This is the About Us section. We'll also do same, just above as well, in the last section. This is for the latest offers. This will just help us later when scrolling up and down. Onto the About Us section, this will become fairly familiar now. We have a surrounding div with the class. I want to again use the container fluid so it spans the full width of the page. I'm also going to add a value of padding on the top and bottom of five, positioning texts to be in the center, and also add a background color of light. This will offset the value from the dark, which is just above. Inside this div, we're going to add a familiar row. To keep things consistent, we're going to structure the title in the same way as the last two sections. We do this with a div. This is going to have a value of col-sm-6, so it's half the width of the page, and then offset this with a value of 3 to push this into the middle. A level 3 title, which is going to be About Us, the image, so the source is going to be in the Images folder. And remember these two different [inaudible] here, since we're using the lighter background color, we're going to use the divider of purple, alt text of divider is fine, and then the same class that we used before to give it a weight of 25 percent. Let's check this out. Give that a save, and there's our title and the image. Next up, we just need to create a new row just below for the sample text. So back over, we have the closing row, so the closing columns, and the closing row. Let's add some space, again, making sure this is inside of the surrounding container, div with the class of row, place this onto a new line. We'll also add some margin on the top. Separate this from the title with mt and the value of two. Each row needs to have a div nested inside. I'm going do something a little bit different this time and just set this to be col. If we just set this to be col rather than a value, each time we add a new col, it will take up an equal amount of space. So if we want to have this one div, it'll be the full 12 columns. If we had three divs side by side, all the same class of col, each one will take up an equal third of the page. Let's add our sample text inside with the P elements and the class of text center. So there's a couple of different ways of doing this. If you're using Visual Studio Code, you can type in the lorem shortcodes, hit Tab, and then we get some sample text placed in photos. If not, you can go over to the browser, and go over to lipsum.com, and this will give us some sample text which we can generate down at the bottom, and then copy and paste this into the project. Once this is done, and give that a save, and we can check this out in the browser, and we'll see our text. In fact I'm going to generate some more. Instead of doing that, we can add more by typing in lorem and then a star, generate five paragraphs, hit Tab, and that's all we need to do. This is the About Us section now completed. It was pretty straightforward, but it gives us a little extra practice using Bootstrap. 11. Price list section: All done with the About To section, which we made in the last video, if you scroll down on the final project, this price-list section is going to be a little bit more detailed than the one we just created. We have some different sized columns for layout which have the images on one side and also the prices for each type of treatment available on the other. This is the section which we are going to be creating now over in the index.html. We'll begin by creating a familiar title and image, and we'll do this in sideshow container and first row. Just after the About To section will be created, let's scroll down to the very bottom and add comments. This is going to be for our price-list section. Just below this, we can add our div, which will follow the same structure as before, this will have a class for the wrapper of container fluid. Some padding on the Y axis the value of five. I will set this time the background to be dark. Inside here we need a row, so this is going to half the class of row inside here, and this row then needs to have some nested columns. First of all, we can add our title, like the rest of the side this going to have a column width of six. So col md -six, we can add the offset, which is the value of free. It's pushes into the center and also the class of text center too. Next in here we can add our level three heading. Level three heading is for our price-list text, and this also needs a class, since we're using a dark background, we can add the class of texts light. There's our title, the next step is for our image. Image source is in the Images folder, and this time it's the divider, silver.png the image classes. First of all, we need some padding on the bottom value before, and also said this to be a width of 25 percent with W 25. The same lets check this out. Inside the right tab below the above this text, we should now have our price lists, and we're just missing the image of that, and check the images folder. To divide a silver is there? Maybe just needs save that. We just want to save it after the image and that's fine. The next stage is to create a new row. This is going to be for our massages treatments section, which is this first row here. This will have right image and then a unordered list on the right hand side. Just below this row but we'll add a comment, just so it's clear what we're doing here, this is the closing container. Just above, we need our div, class or row and then next inside our columns. The image is going to be larger than the unordered list, so I'm going to set this to be a columns wide with call sm-8, and in fact, for the row we'll also add some margin on the top and bottom, add some spacing. Then inside of our columns we can add our image. The image provided for this one is called the massage. JPEG, and the old text. After the wrapper for the images, let's go down and create a second div inside of this row, and this table is going to be for the unordered list. We've used to eight columns or rows, so we can go ahead and use up the remaining four. We call sm-4. This is going to take in a unordered list, but first of all, we need a title in a level four heading, which is this massages text is here. Add our h-4 massages as the heading. Now we can add our Bootstrap classes. The first one is going to be title, title is not a bootstrap class, this is a custom class which I've added in, and we'll use this in the CSS soon. Followed by a bootstrap class of tech center pushes into the middle. After this, we can add an unordered list, which also takes in some classes for styling. The first one is list group, and after this, this group flush, and we'll take a look at what this does in just a moment, and then finally, text-light. I'm just going to add in some sample list items. The first one is just going to be massage, warn. The Bootstrap classes for the list item is List Group Item. Then after this we can add the span tags just after the name, and we can add a pricing. We want to add these in-between the M tags, so it's emphasized or Italic and a dash, and then add a price inside here. Inside model these albums you can paste in and before and go down here and just change the names. It could be more imaginative if you want, so I'm just going to go 1, 2, 3, 4, 5, and then take a look at this in the browser. Over to our project, and then refresh. We got our image on the left hand side, it's taken up eight parts, and then taken up four parts, on the right-hand side is our unordered list. The text is a little bit difficult to see, but if we highlight this, we can see is there, and we'll do this in CSS in just a while. Let's move down and create the next two sections, which is this facial section here, and then the hair and makeup. These next two sections, we'll follow a similar pattern to this. Let's go just above our container here, and we'll create a similar section to this. Let's go and create our div with the class of row. This is also going to have a margin on the Y axis of four. Then we're going to do the opposite of what we did here, rather than having eight columns on the left of the image and then four columns on the right. We're going to do the four comes first, so we can add the unordered list. So div class of core sm-4, and then below this inside the row, we're going to add a second div. This one is going to be for the eight columns, so call sm-8, and then close this off. For the first section which has four columns, is going to have an unordered list, just like we had here, and also a level four heading, lets cut and paste these in. This one is facials, now we can change these text below. Let's copy this and paste this into each one. Just like that, you can change the prices if you like, but I want to keep it as this. Then inside of our 8-column section, this takes in our image. This image is going to be in the Images folder, and this one is called facial.jpeg. Say this, and then over to the browser, reload the projects. Go down and there we go. Again, the images is there, but the text is a little bit difficult to see, and we'll fix this with a little CSS later. The third one down is going to follow the similar structure to our first row with the image on the left and the links on the right, let's go up to our Massage section, and I'm going to copy this full row and then paste this in just above our container. First of all, the 8-column section at the top, the image for this one is cosmetics.jpeg. We can change the old text. The text for the heading is Hair and Makeup, and then at any text you like into these links, just paste these in, and that should be it gives a fail-safe, and up to the browser reload. There we go, there's our three sections, and now we can go over to the CSS and do some styling for this. Let's go to a custom.css needs go outside of the media query. That's added comments, this is the price-list section inside here. When we had the custom class of title, I'm going to set its title to be a color of golden load, and then after this, we can add the list-group-item. This group item, if we go over to the index page, this is the class which had been added to each list item, and what we're going to do here is remove this white background image so we can see the text. To do this, we need to do is set the background to be known, and we could also change the font size to be 1.1mz. Save that, and let's see how this looks. That's the background now removed for each list item., so we can see our text. We didn't mention before about this extra class. If we go up which is list-group-flush. So if we remove this from the cosmetics and then reload down at the bottom, we'll see the difference. This has the full border all around, whereas the rest just have the lines in between. Lets add this back end and then reinstate our project. This it now for the section we'll finish up the homepage in the next video by completing the footer and also adding in our Font Awesome icons. 12. The footer and adding Fontawesome 5: The final part of this homepage is to create the foot area. If you go down to the finished version, this is the area right at the bottom here, which is going to be split into three sections. We'll have a formal left-hand side to sign up via e-mail, we'll have the Setting center about the location, and we'll also have some navigation links over on rights. You may also noticed that we have some icons too down to the bottom for social media links. These are all going to be provided with a library called Font Awesome. Let's begin by installing this into our projects. I head over to fontawesome.com. This has a free version. So let's click on this button just here. This is a free underpaid pro-version. We just need this free version for our needs, which we can download from this button just here. It is different ways to use it. We can just click on the "Download" and start that off. There's different ways to install for libraries such as View, React, and you can also download it using tools such as sketch. Next up make sure that we are on the web section here and click on the "Download", which will kick off the installer. Websites like this do often have a habit of changing designs and layouts. So if it looks a little different from this, just take a look for the download. There is also a CDN link available too, but I want to download these and add these directly into our project. You can also feel free to check out the icons with this link here, and you can see all the available icons which will just downloaded. We'll use some of these throughout the project. Let's begin by opening up the folder. The name of the folder includes the version number and I'm just going to shorten this down to Font Awesome so it's easy to work with. Then move this over to our projects. If we open up, the trunk will be as folder into the CSS. You can then drag over the full font-awesome folder and place it into there. Now, if you open up the sidebar and then into the CSS, just make sure this folder has been included. Inside of the Font Awesome folder, I'm going to link to the minified version of all fonts. This is in CSS, and then this is all.min.css. We can add the file path in the index page. If we go up to our CSS links in the header, I'm going to add the link just above our custom CSS. Let's add a comment of Font Awesome, the link. This one again is in our CSS folder. It's in the Font Awesome folder after this, then css/all.min.css. This is all we need to do now to link Font Awesome to our project. We'll test this is all working soon, when we get to adding them in the footer. For now though, let's get to work with adding the footer, which you can see here. We can add a container down at the bottom to hold this. So down at the bottom it just above our JavaScript. Let's add a comment or footer section. I'm going to use the HTML footer element for this. You can still add the same classes of container fluid and also py-5. Inside here this takes in a div with the class of row, so we can then nest inside our columns. The first one is going to be for the social media section of stay connected on the side, which is going to be a title, a sign-up form, and then we'll add our social media icons later on. Since there's three different sections, we can split this up into four columns each with a class of col-sm-4. The text in a level 5 heading of stay connected. After this, let's place in our form, we don't need an action since you're just creating HTML structure for now. Inside here we're going to add a div which is going to surround or grouped together our form elements. It's going to take in some Bootstrap classes. The first one is going to be form row to make an inline form, then the second one of form group to group together our inputs. This form is only going to contain the email address inputs and then the button. The input on the left is going to be eight columns wide, and then we can use the remaining four for the sign up button. Let's create our sections for these. The first one is for the input. So this will be called sm-8. Then the one for our button and just below, for the remaining four sections. Let's start with the form input. This is going to be an input with the type of email, the bootstrap classes of form control, and some placeholder text of email address, then down to the bottom section. So the button is going to have the text of sign-up. It also needs a type. The type of submits inside here and then the Bootstrap class. The first one of btn, btn-primary, to give it the blue color. We'll also be adding a little Font Awesome icon to the right hand side of the text. We'll come back to this in just a bit. Let us save and let's see how this is looking, reload, and there is our form at the bottom and we'll add the social media icons very soon, which you see here. For now just after the form we'll add a comment. So social media icons, and we'll come back to these very soon. After this closing div, we have two more sections which four columns each. The next one is going to be for the text and then the navigation on the right. So div with the class of col-sm-4. This one will have a level 5 heading and this time the text is our setting, and a comma. Afterwards, all we're going to do is add the p element with some sample text. Again, if you using Visual Studio Code, you can type in Lorem and then hit "Tab". This is all we need to do for our middle section. So now after our col-sm-4, we can add one more, which is for our list items on the right class col-sm-4. This one will also have a level 5 heading of navigation, followed by a unordered list, which will contain our navigation links. The bootstrap class for the unordered list is a list group and list items, which takes in the class of list-group-item. These are going to be links, so let's add the a element inside here, the href, the link. This one is going to be for the blog to HTML. We haven't created this page just yet, but we'll ask the text of blog, copy and paste. This one is for the contact page. This will be contact for HTML, then the text of contactors and UML link for the privacy policy. Actually we have href gives us go to browser. That's all the contents which we now need. We're going to now apply a little bit CSS just to finish off this page. Starting with these blue links just here, let's go over to our style.CSS, or Custom.CSS, and outside of the media query, let's target the footer, beginning with the links, so these are the a elements. We can reset the color to be a value of 212529. See how this is looking much better. Now if we go back over infarct we can shrink the browser now first, we see things need a little bit more spacing, things such as if we scroll down the golden title which is here, is a little bit spacing on the top and bottom, down to the footer. Also these inputs and button needs some spacing too. To fix this over in the Custom.CSS, I'm going to create a new media query targeting a maximum width of 768 pixels. The styles will only work on the small screens. After this media query, you can add more new one at media wants target these screens, and also the maximum width of 768 pixels. Add the calli braces. Let's start by adding the margin top or the title, this is the golden title that we've seen before. One em is fine for this. We can add some spacing onto our Button by typing footer button. This will only take effect on any buttons inside the footer. Margins are also to be a value of 1em, save and then reload. We'll have some more space. Around that, we have our spacing above the titles too. Finally finish off, I want to add some padding and also a border bottom to each one of these sections. The sections also from the footer, can grab each div with the class of col-sm - 4 for a border bottom to start aligned, to separate each one of one pixel. A solid line, and a color of ddd. Then some padding inside of 20 pixels on the top and bottom, and then 10 pixels on the left and right. Open this up, refresh. Looks as though we've got an extra line inside here so let's take a look. Down to the footer, this is just next to the button, to have one just below there. This is the actual 1.5 here, and these is supposed to be for medium devices. Let's change this to be MD. These are on the own lines on these mobile devices. We are going to break onto the road next to each of that on medium devices and above, save and refresh. This now looks much better on the smaller and also for the larger screens. All that's left to do now for this footer is to add the social media icons. Back over to the footer. We created a comment, and we'll also add these to the Sign Up button. The free version allows us to access two different styles of icon, which is called brands and solid. Solid icons as they sound or a solid black icon, and is uses for things such as a company or credit card icon. We use the CSS class FAB for brands, and FAAS for solid. The irregular and light versions too, but these are only available on the pro version. Let's begin in the Sign Up button. We can add a Font Awesome icon by using the I elements. I'm going to add these on two separate lines so it's more clear. Open up the I elements, and then it needs a class. Inside here, we first specify which type of button we want. If we want the solids or the brown version, I'm going to go for the solid version. So we'll type in FAS which is Formed Awesome Solids, and then we type in the name of the icon. We follow him around the Font Awesome website. You can get the name of each icon just underneath. We'll add these in by adding a class name of FFA. Then the name of angle double right. Give that a save and then reload the projects down in the footer area. We now have the double angle rights icon which we started in. I'm going to go back over to our projects icons just below this for our social media section so just under social the media icons, we're going to do exactly the same by adding the I elements. The class this time is going to start with FAB, so its the brand icons, the name of FA, which is going to be for our Facebook icon. So Facebook-square, and then a third class which is optional. This to make the fonts twice the size. We can do this with FA, and then 2X. I'm going to copy and paste this in three more times. The second one will replace Facebook with Twitter. The third one this is going to be for Instagram. The last one is Pinterest. All the rest will stay the same. Check this out on the browser. We miss an Instagram, and this doesn't need squared on the end, sorry about that. Then over to Chrome, reload, and now we have our four icons. That's it now for our homepage, for our Bootstrap templates. I hope you enjoyed this section and learned a lot about using a Bootstrap. Coming up in the next section, we will finish off this project by adding the additional pages, such as the blog and the Contact Us page. Thank you and I will see you there. 13. Blog posts and pagination: We're making good progress with our Bootstrap templates, and now we've taken care of the homepage. Now we're now going to move on to the additional pages starting with the blog. In the last section, we created a link to a blog page, we have not created any content just yet. If we take a look at the finished site which was just here, and if we go to one of the blog links, this is what the blog is going to look like. We'll have a header section which is going to be the same as the index page. Also the footer, which will also be the same to keep the theme more consistent. Then the blog is going to consist of our posts on the left in a called container. We'll also have some links to the previous and next page, and also a four column sidebar on the right hand side. The only content which we'll add at the moment on this page, is just to show, it's basically a template that we could hook up to WordPress with later on. Over in Visual Studio Code, we can create the blog to a HTML page. Let's close this down, and we could do this in the root of the project alongside the index. This is going to be called the blog to a HTML. Pull this out into the root of the project, there we go. Make sure this is alongside the index and the first thing I'm going to do is copy all of the content from the homepage. Select all, copy and then paste it into the blog. This will allow us to keep the same footer and header sections and we can just delete all content from inside. I'm going to delete just above the footer, I'd select this container and I've to go all the way up to the closing header tag. It's quite a bit of content to remove here. There's the header, enough, and everything just below this header tag here, we can remove this, give that a save, and then we can see if this is okay in the browser, and go to our blog and make sure we just have the header and the footer area looking like this. If it always looks like this, we are good to go and we can start customizing our blog page. Let's start with the title, which is going to be tranquil spot blog. Then after this, we can also change the feature text. Instead of a full responsive premium spa theme, we change it to need to Tranquil Spa official blog. Just after the break tag, we can add official blog. Save this and with the CSS which we've already provided, there should still be in the center on here, so we don't need to do any additional work with this. The next thing to do is to go down and create a blog container. Let's do this, just after the header, we can add a comment. This is going to be the blog section. Then this blog section is going to be a fluid container, which will be a class on the main element, is just going to be the main content. Let's construct our Bootstrap classes of container, dash fluid and also some padding y, which is the top and bottom. As ever, we also have a div nested inside with the class of row. Now this row is going to have two sections. As we mentioned before, when we looked at the final version, the left-hand side is going to be a eight column section. Then later on we'll also create a sidebar to fill up the remaining four columns. Our div with the class of col sm-8 inside here, we can construct a pretty simple blog template. Remember this is just some basic HTML which we can adapt to WordPress later on in the course. A surrounding div for the blog post, a level two heading. Let's add some sample data, so new feature, then open up the p elements and we're going to add a date the blog post was created. We can add any date into here. We'll also got to add the offer, so we can say this is by and we can add an author's name inside of a link. I'm going to add my name inside here, and the link can just have an empty h-ref at the moment. Again, we'll fix this in WordPress later on. Then we can add another p elements just below. Just with some sample date in here, I'm just typing Lauren and date of the sample text from VS code. Let's check this out over in the browser reload and we have our first blog post. Again, the content doesn't matter at the moment. We'll be adding all these in using the WordPress dashboard. The next thing to do just after this date is I'm going to add a small section, to display any tags associated with the blog post, and make sure that the a element is closed off. There we go. Let's create a section just below this. This is going to be a div. We can add some padding on the bottom, and add a class of pb and the value of two. This will just give this some spacing from the text. Inside here we can use Font Awesome with the i elements. This would ride a tag icon. This should be the solid type with FAS, and then FA, an icon is called tags. Just after this we can add a p elements and it's going to have the text of tagged. W\ e'll just add some sample tags inside here. This again will be generated by WordPress later on. This little icon in the middle is the tilde. You may need to look around on your keyboard for this one, but you can add any icon inside here. Let's say this. First of all, we can add a class. The inline makes the p elements in line rather than the default or block level. This will keep the tags that we add in here on the same line as our icon just above. Check this out reload the browser. There's a little Font Awesome icon, and then we can have our tags just afterwards in line. This is looking very good. To add some more content, I'm going to copy and paste in this blog post. If we go to our div, which is surrounding all the content here, copy this in, make sure we're still between the col sm-8 element, and then paste this in two more times. To round things off for this video, some buttons at the bottom of the posts. You just infer the older and newer pages, just like we have in the finished version here. Over to our blog, to our HTML, and just after our last blog post that we added, the previous and next page is going to be inside of a nav elements. This nav element is going to be an unordered list with the bootstrap class of nav. The unordered list will have our two-list items. The first one is going to be for next page, and copy and paste this in, and this one is going to be for our previous. Then over to the browser reload. There's our links now, we can just add a space in between with HTML entity. Ampersand, non-breaking space, and there we go. Our blog is now starting to take shape. Notice how we've contained the blog post to eight columns wide. This will give us four columns to work with for the sidebar, in the next video. 14. Blog page sidebar: We'll leave this four column space off on the right-hand side. This is where we're going to add a sidebar for our blog. Just like the finished version which you see here, it will have some sections with some information about this bar. Also we can filter down by categories or by the month it was created. Let a little social media section at the bottom too of any blog, to HTML. We can create some space just above this closing row. If it helps, you can add a comment inside here. Say this is the closing row. Also we can say this is the container, just so it's more clear we are right. Then we create our div. In fact, we add this as an aside. Since it's a sidebar. This sidebar is going to have a class, make it four columns wide on smaller devices and above, so called sm-4. The sidebar will contain the four blocks as we just looked at. The first is just a little bit about this bar. A surrounding div for this block still will have a class of py-3. Just to add some spacing on the top and bottom. A title for this block "font-italic", and the title of about. Then the text in the p elements. The p elements will have a class, to add margin and bottom of zero. Then we want to paste in the text for this one. We're just going to grab this off the finished side. Paste the same, followed by a horizontal rule with the hr elements just below this. Let's check this out over into Chrome. Reload our blog page. Next up we have the archive section. On the finished version, this is going to be a ordered list, which is going to have each list item as a date. We can start with a surrounding div as a container still within the col-sm-4. My new surround in div. Just like above this is going to add a class of py-3, so add our spacing. We then go to add a level four heading. This is also going to be italic, would be font italic class. Then the title of archives. Our items are going to be inside a ordered list. This ordered list is going to have some Bootstrap classes. The first one is going to be list-unstyled. List-unstyled removes the default list style and the left margin on our list items. Then we'll set the margin bottom to be zero. These list items will have a link nested inside. We can add some dates into here. Then a href for the a elements. We can just leave this empty. All you need to do now is copy and paste this in a few more times. Add some random dates into here. This would be generated by WordPress later on, save and then refresh inside of Chrome. That's all we need to do now for the archives. Next we go to do a similar section, and this will be for the categories. A new div just before our side section. Following the same pattern. The class of py-3, a title which is going to be level four, class of font italic, and the text of categories. This will also take in a ordered list with the same classes as above. This one will be list-unstyled to remove any list styling and also set the margin bottom to be zero. The list items also nested with a link inside, a empty href. We can add in the news. We can also add in the offers too. The final section is for our followers section which is going to be some social media links using the font awesome icons. We'll create our div, class of py-3. Inside here, I will have a four heading once more, which is again going to be italic, with the text of followers. This is going to have some i elements for our icons. First class of fab and then fa-Facebook.It's going to be square and then fa times 2 x to make them twice the size. Let's add another three into here. This next one wants to be Twitter and then in surround which doesn't need the square. Then finally Pinterest. Save this and reload. This is our sidebar now complete. In fact, this is our blog page also complete. We've now got a blog template which we can convert WordPress in a later section. Next up we'll finish off our Bootstrap templates by adding a contact us page. 15. Contact us page: With our blog, now finished, we're going to go ahead and create our final page, which is going to be the Contact Us. If we scroll down, we'll have a link to the Contact Us page here. We also have a privacy policy link. But we're not going to be creating this page as this would be something specific to your business or needs. You can go ahead, and create this if you would like. I'm now going to create this Contact Us inside the roots of our project, alongside of a blog and index page. Let's create this file, which can be contact.html. Again, we're going to reuse the same header and footer to keep the layout consistent, and then create a new section in the middle. To speed things up we can go to the blog, copy all the content, and then paste this in. Just like we did before above the footer section, let's select from the main container all the way up. We want to select this just above the block section then remove all these. You can replace the header section and also the footer. We can say this and check if it's working okay by reloading the contact page, which is fine, so we can go and change the title up at the top. We can change the page title to be Contact Us. Then the feature text, let's go down to this section here. We can again use the index.html text which was FULL RESPONSIVE PREMIUM SPA THEME. Copy this and replace our blog section. Next we're going to work between the header and footer section by creating our Contact Us to section. Let's start with a Comment, Help us when scrolling up and down. This is going to have a div, and this div will be the fluid container for all page. Then also some padding on the top and bottom a value of five is fine. Inside here, div with the class of row. This is going to be the first row inside of our container. On the finished version, if you go to our contact page, this is just going to be a row which will have the Contact Us title and then the image. After this, we'll create a form in a second row just below. This first form, we'll do the same as we did in the index page. This will be a six column container with a free column offsets, so col-sm-6, and then provide the offsets about to make this a medium devices called Md. Then the offset value of three, level three heading, which going to be Contact Us. The image for our divider which is the images folder and we want to choose the divider purple, the old text, and then a class of w-25 so it's 25 percent of the width. Again, if it helps, you can add a comment and this is going to be for the closing row. Then over to our project in the browser, and something's not quite right there. We have our image contacts, we just need to add a new class of tech center. That should do the trick, reload, and that's it. Just blow this we're going to add a new row for our form. Just have this comment here. This would be a class of row, and then nested inside here, we can make our row a 12 column container to make our form a full width for the page. Open up our div, it's going to be col-sm-12, which would be the wrapper for our form elements. We don't need actions since WordPress will be handling this, but we do need a class. I'm going to add a class of text left, and as it sounds, this will align all the texts to the left-hand side of the form. Each input is going to take in a form group wrapper so bootstrap can control the positioning and layout. A surrounding div for each input, a class of form-group. Each input is going to have a label too. This is going to be a text label. The first one is going to be Your Name. We then add the for attribute which is going to be name, and this will link it to this input which we're now going to create. The input is going to be a type of text, since it's a name field, a bootstrap class of form control, the ID and this ID must match this for attribute here so the browser knows that this label is linked to this input. Another benefit of having these linked is the user can also click on this label or the text, and it will also highlight the input so the user can begin typing in. A placeholder for the texts of Enter your name. Before we go any further, let's see how this is looking. As we said before if we click on this label, it will also bring the input into focus so we can type in straight away. Let's do a couple more. Since the next one is going to be very similar, we can copy the form group, paste this in since we are using the same classes. This one is going to be a label for email. The text of your email inputs, email and the ID too. We also need to change the place holder to enter your email, and let's take a look at this in the browser. That's looking fine. Over in the final version, we're also going to add a text area at the bottom, and then a button to send this off. The message input is going to be a text area. Let's add our form group in once more. The label is going to be message, the text of your message. We can remove the input type of text, and in place we can add our text area. I'm going to remove the name, set the ID to the message to match I will label. Columns, I'm going to remove but I'm going to set the rows to be free followed by a bootstrap class of form control. The last thing to do just for the closing form tag is to add a button so user can send this off with the text of Send message.... Some attributes, the opening tag, this is a type of submit. Also some bootstrap classes of btn, then btn-primary to give it the blue color and also the sizing. Lets take a look at this. This is all we need to know to follow Contact Us section. The final thing I going to do is just check all the links are working okay. The homepage goes back to the index. We have the blog page. At the bottom of the index page, we can check the blog works and it does, Contact Us, I like this here too, so that's all working fine. This leaves us now with a great looking bootstrap for template to work with for our theme. I hope you're now excited to move on to converting this template to WordPress. 16. Installing WordPress using Flywheel: In this video and also the next, we'll be looking at two ways to get open running with WordPress on our computer. We can begin to create themes and test them out. Alternatively, if you have a live hosting provider and would rather use this, feel free to go ahead and do that. This video is going to cover getting setup with a service called Local by flywheel, which is our local by flywheel.com. In the next video, which is optional, we will cover installing and setting up MUMP as an alternative. I would recommend following along with this video rather than the next especially if you are a beginner, since MUMP can cause problems for a lot of people, put this is up to you. Let's get started over by going over to the homepage, the unpaved versions for teams and agencies. But we just need the free community edition, which is available for Mac and Windows. Flywheel allows us to quickly set up WordPress projects on our computer really easily, and also takes care of setting of the server and database photos. It has not too great features. We can view our site, and also the admin section at the click of a button. We can also generate a live link to view our project anywhere online, and also to share with others. Along with lots of more advanced features, such as the ability to set up WordPress multi-site and so much more. To get started, we click on the download link, which you just here up at the top here. Then choose which platform you would like, enter your details and then click on, Get it now. This download may take a few minutes, so I'll return back once this is completed. Once local has finished downloading and you come through the installation for your machine, should be taking it to a similar looking startup screen that we have here. This is just with a sample test site, which comes with the download. But when it's go down to this plus icon down at the bottom, we create our new sites. First step is to create a name and it's going to be called the Tranquil Spa, go on Continue. After this, we get a environment which you want to choose. I'm going to stick with the preferred versions of PHP and MySQL, but it is also custom versions too. If you feel the need to change any of these versions, continue. Next we need to add a username and password to login. I'm going to call my username Tranquil underscore admin, the password is up to you and want to add mine in here. Then the e-mail, which is an e-mail of your choice. Then add our site to local by clicking this button, give us a few moments to generate our site. Once your site has been setup, you'll be taken to this page and you've seen the green light next to the sign name, you're good to go. The two main things to note here on the screen is the buttons in the top corner. The first one is view sites, this opens up a new word press tab in the browser, so we click on this. This is our actual WordPress installation we are viewing with the default theme. This is how easy it is to get setup with WordPress on Local. If we now go back over to the Admin, is also a admin button just here. This will then take us to the login page for the WordPress dashboard and this is the username and password which we supplied when setting up our sites. My details were tranquil admin, and to the password. I'm going to click Remember me, and then Login. This is the WordPress dashboard which we'll get much more familiar with as we go through the course. It has links where we can select our posts, different media assets we want to add. We can create new pages, we can create or view our comments, along with changing any appearance and settings of our WordPress sites. But we'll cover all of this as we go throughout the course. You can also click on this link up here, which will also take us to the same site that see here. Another great feature about using flywheel is it also provides a live link. If we click on Enable down at the bottom, enabling this will generate a link which would go to in the browser on any device. If you click on this, you can then open it up on your mobile device in different browser or you can also share this link with family and friends to show your progress. If you're at this stage, we now good to go with creating our WordPress site, beginning our theme conversion from Bootstrap. I'll see you now in the next section where we'll begin this process. 17. OPTIONAL: Installing WordPress using MAMP: This is an optional video if you prefer to use a service called MAMP. Set up Wordpress on your own computer. If you followed along successfully in the last video and setup WordPress using Flywheel, then you can go ahead and skip this video and move on to the next section. If you prefer to use MAMP and you don't already have it installed, you'll need to go over to mamp.info, and then click on the "Free Download. " MAMP is a local development environment which can be used on Mac and Windows and it provides us with a environment which will run PHP and also MySQL Database which is a requirement for using WordPress. The next step is to actually download WordPress from wordpress.org. Click on "Get WordPress" and then we can download the latest version, which is currently at 5.2. Downloading this is their a requirement if we are self hosting WordPress on our computer using MAMP. The next step, once MAMP has been downloaded is to go over to the MAMP folder and also open up the downloads. MAMP inside here will have an elephant icon. We can double click on this and open up the MAMP's start page. This is going to allow us to start the servers, and you see the two green lights at the top for the server and the database, then everything is running okay. Next up inside the MAMP directory, we have this htdocs folder, and it's inside here where we add all of our projects. I'm going to add our WordPress project into here in the downloads. I'm going to unzip the WordPress folder and then rename this, tranquilwp, hit "Enter" and now I can drag this over to the htdocs. If you're using a Mac, you may need to add a password in at this stage and then we can close both these windows down. The next step is to create a database for our WordPress projects. We can do this using MAMP from the web start page. If we click on this icon, go to Tools and then phpMyAdmin. From here we can create a new database from the database's tab. I'm going to call my database tranquil-spa with a hyphen. Click on "Create" and that's all done. The next step is to go to MAMP, double check which part where you're running on by clicking on "Preferences". I'm running on port 8888. All we need to do now is go to localhost 8888. It "Enter" and then we're taken to the contents of the htdocs. This will give us a link for the one and only project I have, which tranquilwp. If we select this, we're then taken to the WordPress installation scripts. Where we can begin by choosing our language. Click on "Continue." This stage tells us which requirements we will need such as a database username and password. We already have this all setup. We can click on "Let's Go." The database name exactly as we did in phpMyAdmin was tranquil-spa, with the hyphen. We didn't set up add additional user. If we did, you'll need to add a username and password to your database. Otherwise we can just type in root and root for the password two. We're using a local host, and we can also optionally change the Table Prefix and let's change mine to tranquil_db. Then submit this. If you see this message, that means that everything has been now connected to our database, and we're ready to run the WordPress installation. This doesn't take too long to do. The WordPress installation needs to know the Site Title. I want to call this the Tranquil Spa. This is the username and password which we're going to use to log in to the WordPress back-end or the WordPress dashboard. I want to call mine, tranquil_admin. The password you can keep it as the generated one, or you can add a password of your choice. The email address, and then complete the installation by clicking this button. Good, we're now ready to login using the username and password which we just created. Click on "Login" and we can enter these details into WordPress. So tranquil_admin, the password Remember me and then Login. Once we're logged will be taken to the WordPress dashboard, which is the admin area for our site. It will allow us to control things such as the pages, the posts. We can upload any media. We can control comments and the settings and appearance of our site. We will go through these in more detail as we progress through the course. We can also view our site by hovering over Tranquil Spa and clicking 'Visit Site." This will then take us to the default theme. You'll see something which looks like this once you reach this stage. If you need to get back to the dashboard, all you need to do is click on this site title or go down to the Dashboard link and this will take us back to the Dashboard. If you now reach this stage, this is WordPress all now setup on your computer and you can now progress to the next section where we will begin to build our WordPress site. 18. Our WordPress theme folder: Welcome back. Now we have a version of WordPress running on our computer. We're now going to begin the process of transferring our Bootstrap template over to a WordPress theme. Inside of local by flywheel, we can provide the new theme folder by navigating to our directory. In this little icon just here, we can click on this and then we're taken to where our project is stored, inside the project name, we can go to up, then down to "WP content" and then to "Themes" and then inside here we can see the free default themes, which are installed with WordPress by default. If you've chosen to follow along with this course, use MAMP, needs navigate to the MAMP directory, open this up, then go to the HT docs, open up the project, then go to content and then themes and then you can continue along exactly as we are going to do. So inside here is where we are going to place our new theme. To do this, I'm going to duplicate our bootstrap template and then once this is done, I'm going to rename this, tranquil WP. Once we've done it, we can drag this over into our themes, so WordPress has access to our theme folder. The next step is to drag this over in to your text editor. This opens up in place of the bootstrap version. Now since WordPress uses PHP, the first step is to rename the index page from index.html. We're going to change the extension at the end to be index.php. This is one of the required files in a WordPress theme and then inside here we need to add a comment at the top of the file. This comment is going to be inside of the PHP tags, then tuned into PHP code, then we can close this off with another question mark and the closing arrow. Then we can add our PHP comment inside. A PHP command is a forward/ and then a star and then ends with a star and then forward/. Then we can type in any contents which you want inside here. I'm just going to add the text of the main template file and then save this. The other required file in our theme is the style.css. We have a custom CSS file inside of the CSS folder, so I'm going to grab the custom CSS and drag this in to the root of the project. Make sure this is along side the rest of the pages which we'll have in here. This file for WordPress needs be renamed the style.css. So it's recognized by WordPress. The style.css also needs a comment at the top of the file. However, this comment is a little bit different to the one we add in the index page. If we go over to the browser, then open up a search engine, if we search for the codex theme style sheets, the first link we get should be for the WordPress codex. We've refer to the codex many times throughout this course to see the information about the WordPress functions, which we can use. We can also click on this link to jump to the theme style sheets and this is the exact section which we need. This is the comment which we need to add to the top of our style sheet and this comment provides different information about our theme, such as the author, the theme name, we can add a description, any licensing information along with any tags which are relative to our theme, types such as the color theme, the number of columns, whether this is responsive and will reach translation ready. We can just add any tags in here which we like, we do need to refer to the available WordPress tags in the theme review handbook and you can check this out if you like. At [inaudible] , I'm going to copy this comment as a starter and then above the body section, we can paste this in and it's just a case of editing the contents to suit our theme. This is going to be tranquil WP. We don't have a link in here, so I'm just going to make one up, tranquilspantheme.com, the author, you can add your name into here. You can add your website if you like, also a description. I'm just going to add tranquilspantheme for our WordPress. I'm going to leave the version, the licensing and for the tags, I'm going to remove the colors, just give me any colors of your choosing, so I'll leave this out and then edit the rest. I was going to be translation ready. We'll add this in a later section. We can add right sidebar. We will also include custom headers, we'll have featured images and also a custom menu. You can of course, after this later on, once we add more features but just to finish off, I'm going to add the text domain, which will match our themes folder name of tranquil WP and then we can delete the text right at the bottom and then save this file. The next stage is to move the screenshots, which you have been provided in the images folder. If you grab the screenshots.png and then we can drag this to the root of our project alongside our style sheets and also all pages. This will be the image which will appear next to our theme inside the dashboard. If we save this file, this is exactly what we're going to do now. We need to go over to the local host in the browser or if you're using flywheel, we can select the admin button, login if required and the next step is to go down to appearance and then to themes. This theme section will have a list of all themes which we've seen before inside of the themes folder, such as the default ones provided by WordPress and now we should also have the theme which we've provided of tranquil WP. This is also the screenshot in the background, which you can see here. We can check our live preview, which I'm just going to simply activate this theme. We can check this is working by clicking on visit site. This is all the HTML content for our site. You can see the site needs some work, that is the basic HTML content but this is not under the control of WordPress just yet, we simply are putting some basic HTML. To begin the conversion process, I'm going to create four new files, so we can begin to work on this. In the roots of the project, the first one is going to be called the header.php. The second one is going to be called the footer.php. The third one will be for the sidebar with a.php extension and the forth one will be for our functions.php and the purpose of these four files is to breakdown the sections of our HTML, then place them into their own custom PHP file and then we can import them into our theme as required and we'll begin with this process in the next video. 19. Getting started & our index page: One of the first stages of creating a WordPress theme is to break up our sections of our websites into their own WordPress folders. At moments, we created the file folders in the last video, which is going to hold the header, the footer, the sidebar. We also create one for the functions, but we also have the index.php too which at the moment it just contains our content from Bootstrap template. Let's get to work with taking our content into their own separate files. We'll begin with the header, so if we scroll down to the closing header tag, which is this one here, select all the way up to the DOCTYPE. Going to put this out, then paste its contents into the header.php breaking up our code into small files like this is a really convenient way of doing things rather than having this header hard-coded into every single page. WordPress will just have it in one single file and then inject it to each page as required. We can also go back to our index and do the same for the footer, down at the bottom. Scroll down to our footer section, put the section out all the way down to the bottom including the HTML. Paste this into our footer.php, if we save this and reload the browser on our index, we see we just have the content which is placed in between. We no longer have the header and footer. To put these back into our theme, we need to go into the index page where once these in. Hop at the very top, in place of the header content, we can open up the PHP tags, which is the left angle bracket, question mark, PHP. Then we can use a WordPress function, pulling this header. It's WordPress function is called "get_header" with the brackets stuffed afterwards. Since we are now coming back out to PHP and then into regular HTML, we need to close off our PHP tags with a question mark and the angle brackets, just like this. Then we do a very similar thing at the bottom in place of our footer, where our footer was when inside the PHP. We use a WordPress function this time called get_footer, and then close off our PHP, save this, and reload the browser. Still doesn't look like much our content is back in place, we have the header section, down at the bottom, we have our footer, and this is all fine for now. Of any function from PHP, we can begin to work with this by adding a comment at the top. This is going to be a PHP commands, so let's open and close the PHP brackets. We start a comment with forward slash and star, then we close this off with the reverse with a star, and a forward slash, and then a star for each new line. This is going to be a description of the file and I'm just going to add function definitions for Tranquil Spa theme since this file is going to contain all functions which are required for our theme. This file is used to change the default behavior. It can be used to add functionality and also new features. These functions can either be native WordPress functions provided tubers, or we can also add our own custom functions too. We'll look at both types during this course. The first thing to do is to create a setup function. This will run as soon as our theme loads. Then inside of this function we can add any necessary functionality which we need to be loaded straight away, such as our nav menus. Underneath the comments, I'm going to open up the PHP, then create a PHP function, this name of the function is going to be Tranquil wp_setup, the brackets just afterwards. Then our function body, the first thing we want to do is add theme support. This will register our theme support for a given feature. The first one is going to be automatic-feed-links, separated by the dashes. Automatic-feed-links enables posts and comments RSS feeds by default. These feeds will be displayed in the head section automatically. I'm going to duplicate this and also add theme support for the title tag, title-tag and the semicolons at the end. This lets WordPress manage our document title, in place of the title tag. This is basically saying we won't WordPress to control the title of the page. Rather than using our hard coded one. Outside of our function, we then add an action. This is going to take in two arguments, the first one is after_setup_theme, and then the second one is the name of our function, which is tranquilwp_setup, a semicolon at the end, and I can close off the PHP. After_setup_theme, which we passed in as the first argument, is a WordPress hook, which will be called queuing page load, once the theme is initialized, it's generally used to form a basic setup, registration, and also any need actions for our theme. We then go ahead and pass in our own custom set of function. Also run and provide our own custom startup functionality, which you've added in here. Next, can add the content width. First, need to check if the content width has already been set. This feature allows us to set the maximum allowed width or any content added 12 theme, such as an image in a post. Our design doesn't look out of place. If we use a was to go ahead and upload a larger than expected image. The first thing we need to do is to create a PHP if statement. To check if the content which is already been set, we can access the content with with the variable of content_width. Remember, PHP uses a $ symbol to declare a variable. We, however, want to do the opposite, and check if the content width has not been set. We do this with a exclamation mark. If the content width has not been set, we want to go ahead and set it ourselves. We can grab this variable of content width and set it to a pixel value of 660. Content width can also be accessed by plug-ins to allow our themes integrate with any of the plug-ins which are installed. If we go ahead and save this file, we shouldn't see anything different inside the browser once reload, since we haven't done anything other than a break of this content into separate files. However, this is an important first step into creating our WordPress theme. Now we'll move forward onto working with the header and footer files. 20. Making the header & footer dynamic: Now, onto the header and footer. At the moment, we have our HTML code from the bootstrap templates. This is fine for static websites but we want to hand over control to WordPress. I'm going to begin by going over to our HTML and then passing over control to WordPress by adding in some PHP tags to make use of the built-in WordPress functions, starting with the header.php. Let's open this file and then go up to the very top. We can add a PHP comment. Open up the PHP, close this off, which is just like this. Your comment will simply be the header for our theme. Since WordPress is built in the PHP programming language, we need to add any of our built-in WordPress functions. Also between these PHP tags, we can open and close these tags anywhere in our HTML. For example, we're going to replace the language attribute. Let's delete this from the opening HTML tag, open up the PHP, close this off, and then we can add a WordPress function called the language attributes, followed by the brackets and then the semicolon. These PHP brackets when used inside of the HTML, will signal the start of HTML code. Then we close this off, and then the file will return to regular HTML. Language attributes is a WordPress function used to set the language of the page. But how does WordPress know which language you want to use? Let's go over to the browser and take a look. Let's reload this, right-click, and then "View page source". If we look up at the top for the opening HTML elements, we see we have the language attribute set to English, US. Yours may be different for your install, but we can see that this is not what we set over in our file. We don't see any of this PHP code which were added in. Instead, we see the actual language which we are using. This is because PHP is rendered on the server. When we get this page back and open the browser, we don't actually see the PHP code. We in fact see the HTML which regenerates in its place. This language is set in the WordPress dashboard. If we open up Flywheel, click on "Admin", then go down to "Settings" and "General", we have the site language, which we have set just here. If you want to know more about any of the WordPress functions which we'll cover, you can visit the codex.wordpress.org, and search for the function name to find out some more information. Next, we're going to set the character sets. Back in our header. For the meta character set, we can remove our hard-coded version of UTF8, then inside of these quotations, we can open up the PHP tags, close these off, and then inside add a WordPress function called blog info. The blog info we want to set is the character set, which is set just like this. The default encoding in WordPress is UTF8. This is what will be displayed. We can also reload the browser source just to double-check this. There we go. This is set to the default UTF8. Next up we have the site title, which I'm going to remove. So scroll down, we have the title used on here. We can completely remove or comment this out. This is because in the functions.php, which we added recently, which sets the theme support for the title tag. In doing this, this theme support allows WordPress to safely manage the page title photos and also declares we're not using a hard-coded title for our theme. Back over to our header.php. We can use a PHP function called WP_head. This will tell WordPress exactly where we want to add the auto-generated info. The location of this is important as this is used to inject all pulling things such as our CSS files, any scripts and they're going to be inserted here exactly where we've added this. We will also take a look at how WordPress handles our CSS and our scripts in just a moment but first, we're going to move down to the body class. Let's add this inside the opening body tag, which means PHP. Close this off. then add other WordPress function called body_class; On this one too. Still making sure to close off the HTML tag right at the very end. By adding this body class to the body section, this allows WordPress to add any CSS classes, which is required, just in the same way as we would in regular HTML by adding the class attributes. But now instead, this is under the control of WordPress. If we save this and then reload our page source, and if we locate the opening body elements, which is just here, we now see all of these classes which WordPress has added. These classes do change depending on the page we are viewing, our logged-in states, if there are any errors, and so on, but this is all handled by WordPress behind the scenes. We can even add our own classes to each page too, simply by adding them as a string inside the body class. Let's go for custom. Give this a save, reload, and we should also see our custom class added on the end. This is added as a string. If we had multiple classes, we could add this as an array. I'll type in array. Inside the brackets, we can add our first value separated by a comma. We can add a second value, let's say custom 2, "Save" and "Reload." This adds multiple classes to our body. We don't need these for this project, so I'm going to remove these and just leave the empty body class. When viewing the page source, you may have also noticed that we now have some extra content in the head section. If we scroll up, we have all of this code which is on here and also all the links down below. These all being added in automatically by WordPress. These are all styles and scripts which WordPress has added since we included the WP_head function. This is just below our custom CSS. If we look for our custom CSS here, this is all of the WP_head content added just below. We also have our site title, which is automatically being added even though we removed the hard-coded page title. The final change to the header I want to make in this video is the site title at the very top. If we go over to our project, this is the site title which we have in the link. Currently, this is hard-coded and WordPress has no control over this. Let's go ahead and change it now. Handle over control to WordPress, we use get_bloginfo passing in the name. If we scroll down to our nav, we have the site title inside the A element. We can remove this. Let's open up the PHP elements and then close it off. Inside here we can echo the blog name by get_bloginfo. Inside here we're going to pass in the information we want to receive back. This is the name of the site. If we save this, and once again, if we view the page source and then scroll down to our header section, mine is on line 62, and here we see the site title of Tranquil Spa. Back to our site and reload. We also see it just here. To see where this is set, we can once again go to the general settings and then go to site title. If we add anything just after here, hit "Save", "Reload the site"; we see the changes are reflected in the browser. Let's change it back to Tranquil Spa and then save. The last thing I want to do now in the header is to have the site title link back to the homepage when we click it. Currently, if we click it now, we're just using a empty href, which is set here. This works for now, but we want to make sure WordPress is also fully in control of this by adding the PHP element. Close these off and then we're going to echo escape URL, passing in the home_url as a function. So the home_url retrieves the homepage from WordPress, and we pass it into escape URL to remove or clean up any unnecessary characters such as any ampersands, percent symbols, or generally any character which is not needed. Save this and now just double-check everything is still working by clicking on Tranquil Spa and go back to the homepage. There is a small change to make to the footer too. If we open up the footer.php, scroll down to the bottom of the file. Just above the closing body tag, we need to add a WordPress function called wp_footer. We'll put the brackets, the semicolon. This is a little bit like the wp_head, which we did in the header section just here. It'll be used by WordPress to inject any scripts which you may add. Add in the wp_footer, therefore tells WordPress where to put these scripts. We also need a PHP comment up the top of the file. Just follow the footer, open and close the PHP. This is going to be the template for displaying our footer. Give this file a save. We will come back to the footer at a later stage when we look at adding things such as custom menus. But for now, this is the header and footer now changed to be more dynamic and also to be linked more deeply into WordPress. 21. How to enqueue stylesheets & scripts: At moment, we have our scripts and our styles directly added to our header and footer area. This is from earlier when we created the Bootstrap template. We have the CSS in the header. Then in the footer down at the bottom, we have our JavaScript. If we visit the word precise, we don't see any styling and also things such as the images and icons. What we're going to do now is to remove these hard-coded links, and then move them over to the functions.php. We can then include them into WordPress by using functions called wp_enqueue_style, row style sheets, and for our script to obey wp_enqueue_script. But why do we need to do this at all? Well, there are a few reasons. But imagine, our WordPress theme required a jQuery for it to work, and then imagine if we had two plugins and both those plugins also require a jQuerry. If jQuery was hardcoded in civil theme and also into the plugins. This would mean WordPress would need to download jQuery three separate times. This would slow down our sites. After this, they could also be different versions of the same script, which may cause version conflicts. Also, a particular script may also be bundled with WordPress, so we may not need to download it at all. Using these functions, this will allow WordPress to takeover and only load exactly what is required. It can also take care of any additional scripts which are dependencies to. Let's begin over in the header.php by removing the style sheets from here. We have all four of these, and then we can also remove all these scripts from the bottom of the footer. We have two here, we can also remove these commands, save the file, and I can go over to the functions.php. We can add these back-in by creating a PHP function. Down at the bottom, still within our PHP section, we're going to add a PHP function called tranquil_scripts as the brackets just afterwards. First of all, I'm going to add the styles without a comments about the top, so add the styles. Then inside here, we can start with the WordPress function called wp_enqueue_style, semicolon at the end. Wp_enqueue_style can take up to five parameters. The first one is the name of the style sheets, which we're going to add in as a string of Bootstrap call. This name must also be unique. The second parameter we need is the source. Here, we can use a WordPress function called get_template_directory_uri, which appoints the roots or the home directory of our project. Let's add this in now. So [inaudible] , and it's your point to our home directory, which is all our files and folders on the left here. We then use a dot, and then we can add in a file path to our CSS. This is going to be our minified Bootstrap version, which is in the CSS folder. As a string, we can add /CSS, and then the file is the bootstrap.min.css. If we give this to save now, close the sidebar, over to the browser, and then hit "Reload". We don't see any changes to our project at the moment. To actually run the function, we need to add an action, and this action is going to be responsible for starting off our function. Just below, we can add_action. This is just like we added above for our setup. This time now, this is going to be our scripts. The first argument is to wp_enqueue_scripts, and then the second one is our custom function name of tranquil_scripts. This action will run our custom function of tranquil_scripts, which is this section here. Each time the WordPress is wp_enqueue_scripts function is called. Now, we can save this, and then it refresh the browser. Now, how Bootstrap styles have been applied? The are also small style sheets we need to add to this function such as Font Awesome, our Google Fonts, and also our Custom CSS. Let's do exactly the same as before. I'm going to copy and paste this style. This time, I'm going to call this fontawesome as the name. The link this time needs to be adjusted to point to the Font Awesome file. So this is /cssfontawesome/css, and then we need the all.min.css. Let's check if these icons are working, hit "Save", "Reload", and that's our icons down in the footer. It is also our Custom CSS file 2. Remember, as a requirements of WordPress, we needed to move this to a style.css file, and this is in the root of our project. Underneath here, let's copy and paste in a new line. This becomes B for our custom file. We also need to grab the home directory, which is get_template_directory_uri. This time, we don't need to add a file path since this is in the root. All we need to do is add the filename of style.css, save and reload. We can see some custom styles have now been applied. We don't have the images introduced yet, but we'll come back to this very soon. The final thing to add are our scripts for jQuery and Bootstrap. We can add our bootstrap-js file in a similar way to the styles. But this time, instead of wp_enqueue_style, we run wp_enqueue_script, so that are the same, just after our third style. The function name wp_enqueue, and this time this is script inside. Here, we first add our name, so this is going to be bootstrap-js. Again, this is the name of our choice, and it must be unique. Second of all, we're going to copy the file path from here. At the same, we also need to use this to point to the home directory, and then the file path which we're going to use is supposed to be /js, and then forward slash the name of our file, which is bootstrap.min.js. We can also add stuff to this, an array of dependencies. I'm going to add a dependency of jQuery. We can add multiple scripts into here, and jQuery is bundled with WordPress by default, so we don't need to add this as a script separated by a comma. Just after this, we can also add a fourth argument, which is if you want to use a specific version number, so I'm going to add this as a null, the fifth and final value is going to be true. Setting this value to true will declare that we want WordPress to add this script to the footer, You just need wp_footer tag, which we added earlier, and this is this one here. Finally, if we save this and then reload our theme. I also got a syntax errors, let's check this out, and we could just missing a semicolon. You got to save. We can check the JavaScript is being loaded. If we scroll down the browser, and we know the JavaScript is working because our dropdown is fully functional. If we now expand the browser a little bit bigger, and then we go to reload resource. First of all, let's go to the top of the file. If we look closely, we can see our Custom CSS. We can see our fontawesome, and also what we call bootstrap-css has been loaded. Then right down to the very bottom, we also have a script here, which is one of our bootstrap.min.js. You've now learned how to add stylesheets and scripts to WordPress the correct way. This allows WordPress to control what is loaded, and avoid any potential problems. 22. Header navigation menu: In our header section, our menu links up at the top. If we click on the Home, this links to our HTML versions of our index page, and also if we click on the Blog, this also goes to our blog to HTML. This is not what we want however for a WordPress theme, since we want WordPress to control the pages and also the navigation. Let's kick things off by creating a new WordPress menu in the dashboard. So let's head over to the main dashboard and then go to Appearance and then Customize. From here we can go over to the customizer and add a new menu. As you guessed, we can do this in the Menus tab and then create a new menu. This is our first look at what is called the customizer. This allows us to visually make changes to certain parts of our theme, and we can also see a preview over on the right-hand side of our changes. So we can play around with these settings and see how it looks in our theme before committing. We'll be using the customizer to add this new menu to our theme. Then add a menu name of main menu, click on "Next", add items to other pages which we want to add to our menu. The first one is going to be for home, and then we don't have a blog page just yet. So we can add the just below. Click on "Add", and make sure we have the home and blog links on the left-hand side. If we wanted to we could also add custom links. We could also add links to various posts and the categories or tags associated with those posts too, but for now these two pages are all we need to reflect our bootstrap templates. We can also add pages automatically to our menu as they are created by clicking this button here. But we just want the two for now. So click on "Publish", close this down, and we can go and refresh our page. So the menu is created but we don't have it appearing in our theme just yet. This is the links from our HTML. Just forward do this we're going to go over to the WordPress codex, which is available at developer.wordpress.org. So head over to this page. Then we can do a search for wp_nav_menu, separated by underscores. So wp_nav_menu. Search for this, then go over to the function reference. We see at the top wp_nav_menu is used to display a navigation menu and this is exactly what we need. Below this we have some parameters which we can add into our menu. These parameters will allow us to customize the menu by adding things such as containers along with various customer classes and IDs. Using all these parameters will allow us to tell WordPress exactly which classes we want to add it to our menu, to keep our styling and layout exactly how he is using Bootstrap. I'm going to do this by using what is called a Bootstrap navwalker. Let's go over to the tab and in search for the Bootstrap for navwalker, which would take us to the GitHub page. This navwalker will allow us to link all the Bootstrap classes and IDs and the basic structure to our WordPress menu. So we don't have any differences in the styling. The first thing we need to do is download the zip file. Let's click on "Clone or download". Download the zip file. I want it to download we need to add this to the root of our project. So open this up, then inside here you have a class which is called class-wp-bootstrapnavwalker.php. So let's copy this or in fact I'm going to drag this over into the sidebar. This will place this inside of our theme folder in the root of the project. If we go back over to the GitHub page for the navwalker, scroll down to the installation. We have already completed the first step, which is to place our PHP file into our folder. The next thing we need to do is to go off to the functions.php and add the following code. So I'm going to copy this over to the functions file and then scroll up and I'm going to add this just after our theme support for the title tag, paste this in, and we're good to go. So require once which is on the start of this line is a PHP function, which will include the file we specify. In our case, we're pointing it to the main home directory, and then into the PHP file which we added. Require once is similar to the PHP require function. We will first check if this file has already been included in the past before requiring it once more. With this now registered let's go back over to the documentation and the next step is to use a WordPress function called register_nav_menus. So we can copy this function just here. This also needs to go over to our functions file, and I want to add this just on the line below. Paste this in. There is also a function to create a single menu called register_nav_menu rather than menus. But we'll also be adding a footer menu at a later date. So we can stick with menus. This contains an array of menus. If no just have the one at the moments. Here we are adding in our menu as primary and we'll take a look at this in just a moment. After this, we'll have a menu description. Once we come to description, the main header menu. After this we have the theme name. I'll just tranquilwp. This name must match the comments at the top of the style.css. It must much this text domain, which we declared earlier. Back in the functions, this text domain will also be used later on to when we look at translating our text in the theme. Now let's go back over to the documentation and continue with this menu. If we scroll down to the usage, the next piece of code is wp_nav_menu. This is what we looked at in the WordPress codex just before. This will be used in wp_nav_menu to register our menu, which we can then go ahead and map our WordPress classes with the bootstrap equivalence. Let's copy this function just here over to our header, which is where our menu is stored. Our menu to navigate to the unordered list. We can have a delete this or comment this section out. Since we're not using this hard-coded version anymore. In place it is we're going to add some PHP tags, since we're now jumping into PHP code, and then paste in our menu. Notice the list of parameters on the left-hand side of this array. These are the parameters we seen before when we looked at wp_nav_menu inside the WordPress website. These are all the ones just on here. We then have the option over on the right-hand side to map any of these to our Bootstrap equivalence. So the Bootstrap classes will take effect rather than the WordPress defaults. If we begin by saving this and then reloading our homepage, we see our menu has now disappeared since we commented it out. We'll go over to add a menu, but I need taken to our main menu which we created before. We now need to set this main menu to our theme location of main header menu. So select this, save our changes and notice under the appearance we now have a menus menu. We can go back to our site by clicking this link just here. You can see now we have our Home and our Blog links from our menu. This is now over on the left-hand side, but this is something which we can easily fix now. Back over to the menu in your header.php file surrounding our menu and in fact I'm just going to remove this unordered list. We still have this surrounding div with the Bootstrap classes. We are going to remove this in just a moment. But for now we can use this as a reference, since we are basically replacing this with the parameters below. The theme location is set to primary. This is fine since this links up with the name in our functions of primary just here. Next up we have the depth of the menu. We're going to set this to be a value of one. Since this menu is not a drop down. Our container also has the class of justify-content-end. So I'm going to copy this and add this at the end of the container class. This will move our menu back over to the right-hand side. The ID of navbar-nav, we can take this and add this as the container ID. We can also remove the margin right value of auto, since we don't use this in our theme. This is our container now replicated, and down at the bottom we created a new navwalker instance to use now theme. All that's left to now do is to remove the surrounding div, the opening, and also the closing tags of the browser and then we can reload. Okay, good our menu is now pushed over to the right. If we go to the developer tools by right-click and inspect, Click on the "Inspector", and go to the menu. When it's find the div with the ID of navbar-nav, which now contains all of our div and classes which will reset in the navwalker, and then nested inside we have our unordered list and then our list items. If we now close this down, we can click on the links. WordPress now has full control over where we're taken to. We no longer see any of the HTML links at the top. So our menu is now working as expected and this is how we can add a custom menu to our theme. Next we're going to work on fixing our images. 23. Image file paths: Our images inside of our WordPress Theme have not been working since we began the conversion. This is something which we're going to fix in this video. If you go to right-click and then go to the developer tools with inspects, we can check out the console by clicking on this tab. We have a list of four or four messages of NOT_FOUND. These all four of our images as you can see here. This is something which we can fix pretty easily. It really is just a case of changing the file paths for the image source. Let's begin at the top with the main background image, which the in header.php. If you want to relocate the image elements, which is a neat feature section, scroll down. This is what we need to just hear. I going to replaces image source. Before our file path for going to enter the PHP, open and close this off. Inside here we're going to echo a PHP string. Then we can use the escape URL function, which will check and also clean the provided URL, removing any characters which are not allowed, then just as with we did when we added the CSS in JavaScript files in the functions, we can make use of gets template URI. It's point to the root directory of our theme. Are brackets on the ends? Are semicolons at the end? We also need to add a forward slash before the images folder. Since this is not added by default of the project and reload. Now, we now have our first image back on screen. Now is just a case of going through the rest of the theme's images and then [inaudible]. You can have a copy and paste this or you can type this out manually if you prefer to speed things up. I'm going to copy everything. An opening PHP tag right through to the forward slash, copied this. We can find the rest of the images in our index.PHP. Let's do a search with command or control F, search for the image tags. Now copy and paste our PHP. The first one, the second one, the candles, the retreat image. The divide is needed to keep going down we've got another image here for a divider. We've got the massage image, we've got the facial cosmetics, and that looks like them all. Let's save this and check the all linked now the browser, I'll scroll up and down and check only images are where they should be and everything looks fine. If you do have any problems with any images, make sure you all have the PHP code inserted in the right place. That's our images, on our work again. Next up we'll take a look at the template hierarchy, unused from page. 24. Template hierarchy and the Front Page: We now move on to create in at the front page of our theme. You may be thinking, have we not already got our homepage displaying? Yes, you are correct. When we visit the theme, we see the contents of the index dot PHP. This is basically because, since we've now created a suitable home page templates, WordPress will default back to our index dot PHP. To better understand how this works, let's go to Google, and search for the WordPress templates hierarchy. This is the link we need right over the top. Templates with WordPress uses can be reusable files to display our web pages. We've already used the header and footer templates, which we've reused across our theme. However, not all templates needs to be used across the whole of our theme. We can create page templates to only display some pages, or even use conditional rendering control when we use them. Let's scroll down to the template hierarchy in detail section, and this is the section just here. We're about find out that at its most basic, WordPress uses a hierarchy system to decide which template controls which page. But the moment this is pretty easy since we've only really got the index dot PHP puts us our theme grows, which you will soon. We need to be aware of the order of selection, which is used as we have more available page templates. We're going to be using the index dot PHP file to display our blog posts, which is pretty common in WordPress, and then create a new from page templates. If you go to Home page display, which you see here, by default, WordPress will set the sides homepage to display the latest blog posts. Obviously, we don't have any blog posts just yet, and we'll look at change the theme. It will first look for a home dot PHP templates. If this is not found, it will default back to the index dot PHP. The key thing to remember here is our blog posts will default back index page if no more suitable page is found. Is then any note just below which says the front page dot PHP will override both of these, and this is a file which will be creating next for our Homepage. If we scroll down, we can now see the front page dot PHP. This front page dot PHP is used to render the sides from page, and this is exactly what we are going to be using it for. If the front page dot PHP cannot be found, we will then look for a secondary home dot PHP. After this, if this page cannot be found, we will then look for the page dot PHP, and then finally the index dot PHP. If we scroll down even further, the templates we can use for the single post, a single page, different categories, and lots more. We'll make use of many of these throughout the course, but this page is always a good reference if you need to understand how things work. Now let's get to work on creating the front page templates. If we go over to the dashboard, by clicking the top corner here, we can create a new page by going to our pages link and then add new. This is where we create any pages for our theme, would start by creating the homepage, and then click on publish at the top. We can now get to work on moving the contents of our index dot PHP onto the from page file. Let's duplicates or copy and paste the index dot PHP, and then we can rename this the front page dot PHP. Since our index page is no longer going to be used for our from page, we can remove all the content from in between the header and the footer. Delete all the sections, leaving just the header and footer. We can check if this is working okay by visiting the sites, and we still see all the sections of our homepage. Why do we still see all the contents of our homepage? Well, this is because we now have a more specific templates or front page, and it now has all the contents that we need. We will come back to this index page in the next section, where we'll use this to render out our blog posts. The next thing to do is to go over to the dashboard, and here down in the settings. Then in reading, we can set which page you want to display it for the homepage and also for all blog posts. Our homepage will display a static page. This is going to be the homepage which we created before. Save changes, and now we're good to go. We can double-check if everything is clean from our front page templates by just adding anything into here. I changed welcome strangles bar. That's of enough to hear, also front page, and that's our text here coming from the front page. Good, so that's our front page now setup and our first we'll look at custom page templates. Next will move back over to the index dot PHP. We will create the WordPress loop, and display our blog posts. 25. Cresting the loop: We're now going to move on to taking a look at the famous WordPress loop, and how we can use it to loop through all of our blog posts and display them on the screen. I've just hand it over to the WordPress developer sites and then in the loop section, which can give us a bit more information about what the loop is and what it can do. But I've highlighted probably one of the most important and simple sections here, which basically says the loop will loop through each post retrieved for the current page one at a time, and then we can perform an action for each post that will retrieve. So basically what we're going to do is loop through every post which has been created in WordPress, and then we can structure our blog post in any way which we like using HTML and also some WordPress functions. If we scroll down, we can see how the loop looks in PHP. So this may look a little bit strange if you've not used to PHP. First, if you take out the PHP tags, which is quite a lot of them as we go in and out to the code and then take a step back and saw Redis as it was English. We're basically saying if posted available by having posts, we're then going to use a loop, which is called a while loop and then we're going to loop through all these posts and then grab the contents of each post. This means the inner side of this while loop section. We then have access to all the available post content, such as the title, the body section, any tags or categories or anything else which we create. Then after this, all we're doing is just closing of the loop and then closing off the if section from above. Let's go ahead and create this now. At the moment in our blog to HTML. This is all just static content and this is fine for a normal HTML websites. If we want WordPress to have control over how these blog posts will display on the page. So we're going to create the loop and then we'll create the structure for our WordPress passing things such as the title, the date, and the description. As I mentioned earlier, we are going to be creating our blog posts in the index.php. We can write the loop between the header and the footer. Let's begin by opening up the PHP tags. Then we're going to create our if statement to check if any posts exists. Have underscore posts. This is a WordPress function, then a colon just afterwards. This colon is a shorthand or an alternative syntax for PHP, which means we can add our content just afterwards if this condition is true. Then I'm going to close this off with an endif and a semicolon, close off the PHP at the end. So if you do have post available, what do you want to do? We want to create our while loop to loop through posts while they are available. So we can use the same function where we have posts. But I'm going to loop through each one. Again use a colon, and then we declare after this what we want to do while posted available. When posted available, we want to use the WordPress function, the underscore post, which we'll call the data from the next post in line, which we are looping over and a semicolon at the end, and then we can close off our while loop with endwhile. This will break out of the loop once we finish looping over all of the posts, semicolon at the end. So now inside of this while section, we have the post information. We can go ahead and create our HTML to create our blog posts. If we go ahead and add a HTML element such as a dif, just like this, we can see that the text editor has highlighted this white since this is not valid syntax. This is because we are creating a PHP section with the opening and closing tags and therefore the text editor expects all content to be PHP. But since we now transfer it over to HTML, we need to now close off our PHP. To make this more readable, we can put this all on its same line. Then after this HTML, we're jumping back into PHP. So we need to once again open this up. We can also put this on to the same line so it's more readable. Now the PHP all has the opening and closing tags, we are free now to add the HTML where we need to. Now we have our section where we can create our blog post structure. I'm not going to use a PHP function called the content. Open up the PHP tags, close this off and the WordPress function called the underscore content. This is used to filter the content of the blog post from the database and then it render it to the screen. We'll come back to this very soon and add more content to our blog post. But for now I'm going to add else section. We're saying here, if we have posts and we're going to construct our blog post inside. If not, we can add else section, the colon. So if no posted available, let's create some HTML, the p elements, and then a text of sorry, no post match our criteria. We can see straight away that this is highlighted white since we need close off our PHP just above. We can then started off once more after this. Then we're going to wrap our text in a echo function. So PHP underscore e to display this to the browser. Then as a string, we can paste in our text ones more, add a semicolon, close off the PHP, and now everything is, as it should be. Using this underscore e function allows our text to be translated later on in a theme, which is a pretty essential parts of any theme, unless you plan to own uses theme for yourself in one particular language. So this can look pretty confusing if you're new to all this. But just to recap, we are checking if post are available. If they are, we're looping through with a PHP while loop and each poster defines inside of WordPress, we're going to display the content of the post with enclosing off the loop. Then no more code underneath for the run is this post are available. However, if these posts are not available, the section just after else will run and then we'll get a message saying, "Sorry, no post match your criteria. We will come back to this later on where we construct the rest of our blog post. So they should look a little bit more clear in a future video. This index is now our default blog page. If no more specific template can be found. We also need to do the same now for the page template too, which is going to be a default page if no other page can be found. Let's select all, copy this, and we can use this as our base. Inside of our sidebar, we create the page dot PHP templates, paste this in. Since this is the default page templates, no for blog posts, we can say no pages match your criteria. Finally, the template comments at the top. This is going to be the template for displaying all single post. So this is it now for our loop basics, but we will continue with this in the upcoming videos to construct the rest of our blog posts. 26. Dynamic blog posts: With all basic loop now, all setup. Now will be a good time to add some blog posts to actually leave room. We can do this if we go to website and then head over to the dashboard. Down in the post section, we can go to All posts or Add New. From here I'm going to add the new post, so simply Blog post 1. Some simple sample text a paragraph is fine, paste it in. We can add some tags. Let's go for news, updates. Then we publish. Lets add two more. Click on "Add New", imaginative with titles if you want, Blog post 2. Add in some sample contacts, then some tags go for make-up and beauty treatments. These types will also display on the screen. Once you add these to a loop, we can add in some categories. When this is fine, you publish. Then we'll add a third and final one. Goes free. Just below, we can choose a new block, paste in the content. You can of course, click on the plus icon here and choose different styles of blocks if you prefer. Sub-categories. Let's go for hair and then click on publish. Next we need somewhere, it's actually display these blog posts. Remember, we've created a blog link in our menu. If we go down to pages and click on this, we have all pages on here which we created from our menu earlier. Also if we go to website by clicking on this link, then click on the blog link at the top. Always see in the block section is this header and the footer with no content in between. Well to display our post in between, we need to set this up in the dashboard. We need to go to the dashboard, down to settings, and then read in from here, just like we set our homepage earlier be the homepage. We can also display the posts on the blog page. Save these changes. Visit our site and then go back over to our blog link.You see these posts displaying on here, because we are using the index page. If you remember earlier when we looked at the template hierarchy, the index page will always be the default page below blog posts. If no more specific page can be found. Back over to our index PHP. We can now begin to construct this to reflect our bootstrap templates. If we go to our blog page, which is the blog to HTML. Want to copy all the content from the main section. From this block section here, probably open it in main tag. Then all the way down to the closing main container. Copy this, back to the index page. Let's paste this just below the header. Back up to the top where we have our blog post. I'm going to delete the first few, leaving just one blog post in place. Just blow this "coll-sm-8". Let's grab this first one and remove and do the same with the second one, leaving just one blog post in place. This section is going to be pretty important. This is going to be the one which we need to loop over inside the WordPress loop. Then we can use this as a structure for each blog post. Rather than having the hard-coded text such as new feature, we're going to add a php function or WordPress function inside here, which will grab each title from the database and then place it in here. With this in mind, we now need to add this as the contents of our WordPress loop. We've created the loop below. Let's go ahead and grab the opening section, which is this top line here. We can call this our place. Scroll backup. Above all blog post. Let's paste this in with a need closes off. Back down to our loop. We can cut the end while section. Take this out and then paste is just after the end of our blog post. The next stage is to go through each piece of static content we have in the blog post. Then replace them at with WordPress functions. Fast write the title and h2 tags. This can be replaced with a function called the title. This is PHP code. We need to open up the PHP tags, close them off. Then the function name of the title, followed by the brackets semicolon. This as expected, will retrieve the blog post title, for each post. If we save this and then go over to the browser, we can see what effect this has, reload. We have the dynamic title of blog posts 3, 2, 1. All the rest of the content has just been replaced with the static HTML and this is the same for all three posts. We need to go ahead and make this more dynamic. We can do this again with WordPress functions starting with the date, thus remove the hard-coded date into the PHP. Inside here we're going to echo to display this, the browser and a function called get the date. Get the date is going to take in free arguments inside the quotations. Is going to be a capital F, a lowercase j, then a comma to separate this from a capital Y. If you're new to PHP, these letters F, j, and Y may look strange. All we're doing here is setting the formats which we want the day, month and year to be displayed. For example, do you want a blog post created in January to be displayed as the word January or just Jan, or even a month number of one. If you want to find out more about this function, you can head over to WordPress and search for formatting dates and time. Inside here, if we scroll down, we can see what each one of these letters represents. For example, we've used the capital Y, which is going to be a four-digit year, just like we see here. We can do the same for the month and the days too, to get the exact format which we want. Now if we give this a save, we can check this out in the browser, reload our blog page and we see that date each post has been created. Next, we want to create the author just afterwards. On the same line, we have a link to the blog post offer. Rather than the hard-coded version. We're going to replace this with a WordPress function called the author. This is simple enough, it doesn't take in any arguments, it will just crop the author of the posts, we can reload. The author in our case is the logged in user, which is tranquil admin. I'm just going to add the word by just before. Just follow a link here you can add by, say this. In fact it needs a space just afterwards. Reload. Now onto these text below. We can make these more dynamic too, by using a WordPress function called the tags. Instead of this hard-coded version, we're going to remove this. Add a PHP function, which is the underscore tags. This function can take in upto three arguments inside the brackets. The first one is the text which you want to add before the tags are displayed. I'm going to add in the word tagged, followed by a colon, a space and a comma just afterwards. The next one is going to be the separator. This is what is going to appear in-between each tag. By default, the tags will be separated by a comma. In our theme, we use the tilda icon. Let's add this in with the space either sides. We can also add in a optional third argument, which is any text you want to display after the tag. But just going to leave this as it is, over to the browser. Reload. Our blog post feed doesn't have any tags. For the second one has the before text of tags. We have each individual tag with the tilda separating each one, also known as two. If we hover over each one of these tags. These also links too and if we click on these it also take us to a page which will display all posts with this particular tag. We had multiple posts with the same tag. It would all appear on a list. This is as almost now finished with the blog post. The final part of the bottom is the content. We already know how to grab this. We already have the function down at the bottom, which is the content. That's could deserve a place. Then move this back up to our blog. At this in place of our lorem ipsum text at this end and let's reload. Now on a blog post listing. Just like this, the amount of content we have doesn't look too bad. But if this was a lot longer such as five, six, seven paragraphs, each page would get really long in place of this content. What we often want to do on a page like this, is to shorten the text which displays. We can do this with a WordPress function called the Excerpt. Rather than the content, we're going to place this to the Excerpt. This should now display in the browser a shorter version. This page doesn't get too long. Then if the user wants to read the full version, they can then click on this blog post and they will be taken to a full single page.This is what we will get to work with in the next video. 27. The permalink: We'll have a shortened version of the blog post in the last video using a PHP or WordPress function called the excerpts. In a typical blog, we also want this post to link to the full version on a new page when you click on it. To do this, I'm going to make this blog post title clickable, which will all link to this single page shown at the full content and also create a read more link underneath this excerpt to link to the full version. To do this, we want to go over to where all blogs are produced, and this is in the index dot PHP. Inside the loop we have this blog post title. I want to surround this in a HTML A tag which is before the title and just afterwards we can close this off. Inside this link, we need to provide the HREF attributes. Then this is going to link to our permalink. Open up the PHP. Close this off. Then inside here we can link to the permalink add the brackets just afterwards and the semicolon. Permalink is what WordPress calls the current URL. In our case, it will be the URL for each blog post. If we save this and then go over to the browser, we can now refresh. Now see when you hover over each blog post title, this is now a link. We can then click on and then we're taking it to a page with just this blog post. We can also see in the title, this is got its own unique URL, which is the same as the title. This is blog post 3. Click on number 1, and the URL is exactly the same. We'll come back to this page later in the course to display the full blog post content rather than just the excerpt that we see here. Now let's move on to the Read More text just underneath this excerpt. Go back. Then in our index of PHP, we can make some space under the excerpt and then create a new div, which is going to be the wrapper for our text. I'm going to add a Bootstrap class, which is going to be some margin bottom with MB and a value of three. The content is also going to be a link too, so we can add this in the A tags. Close this off. We can simply output any plain text you want in here. But instead I'm going to add some PHP, which is going to be the underscore E function, which will echo or display some text to the browser. This also means that this is translatable later on in the course. We can add the text of read more. Then just as we did above with the title, we can also add the permalink to link to the URL for this current blog post. The HREF is going to be equal to the permalink. Save this and we can test it out in the browser. Go back to our blog. Click on any of these. See the Read More text. This will now also link to our full blog post. Again with the URL set as the title. We don't have a template set just yet for the single blog post page. It's going to default back to our index dot PHP. This is why we just see the shortened version of our blog post. Just here. Well, this is something which we'll fix in a little while. 28. Pagination: We're going to be concentrating on adding an important feature called pagination to our blog page. At the moment, we only have three individual blog posts, which is four with the sample one. But if we had hundreds of blog posts, this page would get really long. Pagination allows us to split the posts up into separate pages. We can then click on some previous and next buttons to cycle through all of our posts over in the index.php from our bootstrap templates, we already have our links for next page and previous page, so we're going to do two things in this video. We're first going to replace our previous and next page text with some WordPress functions to provide the functionality for this to work. We're also going to remove this outside of the loop so in the L section, we only have the text down at the bottom. Therefore, let's begin by cutting out our nav section, with our unordered list, and also the closing div at the bottom, so put this out of place. Then this is going to go just after the endif section, which is the end of our loop. Down here, we can paste this in and just indent this back. Okay, let's start with the next page. We're going to replace this text with a PHP function. Open up PHP and then we're going to use the WordPress function called next_posts with an s and then link, semicolon at the end. Then we're going to replace the previous page with a very similar WordPress function. This will be previous posts link, separated by the underscores, semicolon at the end, and then close off the PHP. Save this file, and then over to the browser. Let's reload the page. Now if we scroll down to the bottom, we still see our blog posts, but we don't see our buttons for the previous and next page. This is because we don't have enough blog posts to actually create the pagination. We can go over to the Dashboard, then go down to Settings. In the reading section we need to look out for the blog pages, show at most. We have this set to be 10 posts, so we won't create a new page until we have 10 or more posts. To see this in action, let's reduce this down to five, save the changes. Now we can go ahead and create some new blog posts. I have 1, 2, 3. Let's create number four. Copy the sample text, paste this in. We can add some tags into here. Publish this one. Blog post five, some sample texts. Let's go for one more, we'll do number six, blog post 6 paste this in and publish. Now we can check out our sites by visiting the blog page. We have number 6, 5, 4, 3 and 2, so that's five blog posts on there. Now we have the next page link. If we click on this, we have the blog post 1 and also our hello world example. We can also click on previous to go back. This will stop our blog page from getting really long when we have lots of individual posts. This is how we can add a pagination to our theme. Next we'll take a look at using filter hooks. 29. Filter hooks: The next task is to remove the square brackets, which is at the end of our blog post. I'm going to remove the brackets and then just leave the three dots just afterwards. This is completely optional, but I prefer the way this looks. These are automatically added in place when using the excerpt function to display the shortened version. It also gives us a chance to look at how we can use a filter hook too. If you don't know what a hook is, hook allows us to hook into the rest of WordPress, allowing us to provide a action or a filter. In the case of this video, I'll be using a filter hook called 'excerpt_more'. To find out more about these hooks and any other WordPress functions, we can go to developer.wordpress.org/reference. This page does change over time. Don't be too surprised if this looks a little different. You see, here, we can browse through the available functions, hooks, classes, and methods which WordPress provides. If we click on the hooks link, we're taken to all of the available hooks which we have access to. There's a lot of these available. I'm going to click on this magnifying glass and do a search for 'excerpt_more' and we see this popping up. I'm going to search for this. Then we have the code reference for the 'excerpt_more' filter hook and we can see this is a filter which is going to filter the string in the ''more link" displayed after a trimmed excerpt. This is perfect for what we need. Let's go over to the 'functions.php' up to the top. Inside here we've already used some action hooks earlier. We've already used the 'after_setup_theme', which is this one just here. We will run our 'tranquilwp' setup just after this hook, hard run. We've also used 'wp_enqueue_scripts, which will run our own 'tranquilscripts' just afterwards. I'm going to add our own filter just after this line. But still we needed the PHP. I'm going to create a PHP function. I'm going to call this anything of your choosing. I want call mine 'new_excerpt_text' separated by the underscores. Open up the curly braces. All of these function that needs to do is to return a string. We've all we want to display in place of the square brackets. We can use the return statement to return a string. In place I'm just going to add the three dots with a semicolon at the end and the string can be any text which you prefer. You can see we've got an error just here. I think we need to add a semicolon at the end and that will fix this. Then after our function, we can add in our filter with 'add_filter'. This takes in two arguments. The first one is the filter name, which is 'excerpt_more', which we just looked at in the documentation, separated by a comma. The second document is the name we gave to our function just above. This is new and add this as a string, new excerpt and then text, semicolon at the end and then over to our theme in the browser, it reloads. Now, it's just three dots at the end without the square brackets. I think this gives a much cleaner look to our blog. For the key takeaway for this is to remember that each time we want to do something in WordPress, there is often a hook available for this to use, and it just takes a search of the documentation to find them. Also, remember to never be tempted to change the WordPress core files directly for using these hooks in our custom themes or our plugins is perfectly fine. 30. Re-introducing the sidebar: In our blog page, you may have noticed that we don't have the sidebar on the right hand side, which we had in our bootstrap templates. This is because we still have this located inside of our Wordpress loop in the else section. This won't render to the screen while we currently have any blog posts. To fix this, we can go to our index.php and then if we go to our else section, just afterwards, we have this aside section, which is the wrapper for our sidebar. If we select all of the aside section, then also they close and roll on container. Since everything that needs to be contained inside of that. That's just bring this up. Then I'm going to add this just after the next and previous postlink just above the footer section, we can paste this in. Leaving in place the assigned section, I'm going take away all of the divs inside here. So encodes all the blocks from our sidebar and we can now use this content to go inside of our sidebar.php. Just tidy simple little bits. Take the contents and then open up the sidebar and go to our sidebar.php. We can paste this content inside here. In a similar way that we did with the header and the footer, inside of our index.php , we can reintroduce the contents of a sidebar using a WordPress function. Here at the bottom, we used get footer for the sidebar as you probably guessed, we need to use get sidebar. Open and close the PHP. Then Wordpress function which gets underscore sidebar, the brackets and the semicolon. By default, get sidebar, we'll look for a file called sidebar.php. If you ever have the need to introduce more than one sidebar into your theme, such as a sidebar-dark.php. If we had this file, we will, would then remove the sidebar section and then just add the name of dark inside here. Then this would look for the sidebar dark.php file, and then add this in place of the default. We don't need this, so I'm just going to delete this and until its empty. This is now exactly what we had before in our bootstrap templates. The only difference is the sidebar contents of now being outsourced into a separate file, just like with the header and footer. Now we can try this out in the browser and the sidebar is now re-introduced to our page. We will return back to the sidebar next, where we will replace all of this HTML with dynamic content, telling to WordPress. 31. Making the sidebar dynamic: Displaying this sidebar on the page is now a step in the right direction. At the moment we just have the dummy data which were added into our theme. This is what we're going to focus on in this video. First of all, the above block at the top, is just some basic plain text. We can leave this as it is. After this, we have our dynamic sections of archives and categories, and we can work with these over in the sidebar.php. This is the top block with the text. The second one is the archives. What we need to do, we need to remove our free list items which we have inside the ordered lists, and then in place of this we can add a WordPress function called wp_get_archives. Brackets, and then semicolon at the end. Let's check this work in the browser. Reload. Good, I've only created these blog posts in one month. We only see the one month appear in the archives. We can click on this, we see the date is being populated in the URL, and also the plug posts which we created in this month. Now let's move on to the categories just below. We can do a very similar thing by removing our two list items and then replacing this with a WordPress function. This WordPress function this time is called wp. These categories, check this out. You have multiple categories, so Refresh. We have the news, offers and also a section for any uncategorized blog-posts. By default, we also have a category's title at the top. However, we already have this as a heading. We can remove this, if we go back to the WordPress function of list categories. Inside here as a string, we can set the title. So title_li. I'm going to could just set this to be equal to nothing. Save this, Reload and the title has been unset. If you also want to check out the WordPress function reference, you will find many other arguments too if required. Such as the ability to sort of categories, add any additional styling and also add a separator between each category. I'm just going to leave this for now since we've already added the styling using Bootstrap. We can now click on "Category", let's go for News. We'll see how a free blog post here, offers. We only have two which is tagged with offers, and then any which don't fall into a category. The final thing we have in our sidebar is our social media icons. According to your own social media pages here. I'm just going to add one as an example, so let's go for Twitter. You can add the link with HTML elements. We can find the link location with the href: https://twitter.com/chrisdixon161. Close this off. Then just after our i elements, we can close up our link, and then indent this. I'm going to now leave the rest to you if you want to go ahead and add any more social media links. Once you're done with this, I will then see you in the next video. 32. WordPress conditional tags: If we look at our original Bootstrap templates which I have opened here, we have the text of full responsive premium spa theme for WordPress in the header. Then, if we click on the Blog Section, the text changes to tranquil spa official blog. Hover back over in our WordPress version, we just have the same text if we click on both pages. Since both of these files use our header.php , meaning the text is going to be the same. To fix this, we're going to look at how we can add some custom PHP code into our theme. This code will detect which page we are currently on, and then we can conditionally render the text based on the page. These text is stored in the header.php. Let's get to work over there. If we locate the feature text area, I'm going to remove the text from here, so cut this out, and then in place we're going to add some custom PHP. This is going to be our own custom PHP function and nothing to do with WordPress. Let's call this the feature text capital T. We can now set this up over in our functions dot PHP, let's head over to here. Then just after our filter, still within the PHP tags, we can create this function, which is called the feature text. Inside the body of this function, the job is to check if we are on the front page or on the blog page and then display the corresponding text. We can do this with an if statement to first check using the WordPress function, if the page is the front page. If it is, we then add some curly braces afterwards. It's front page, is a WordPress conditional tag, which will allow us to set the text we want for the front page. Just like this, we can add a underscore, e, the echo our text. This is going to be a string, to add in the quotations. I quote the texts out of the header before, so we can now paste this back in place. Let's check this all works over in the browser. Make sure in the WordPress version, oops, and we have a error. Line 43, semicolon again, save that, reload and there is text on our homepage. However, if we go over to our blog, we see that no text is being generated. This is because we only set the text if the page is the front page. If it's not the front page, we can add a never conditional tag called is home. The is home function will refer to the blog post page. Looking at this in a else-if section, inside the brackets, we use our conditional tag of is home. Open up the curly braces and wants to do a similar thing to before. We're going to echo to the browser and it's acts of tranquil spa, official blog with a semicolon at the end. Let's save this and reload. Our text of tranquil spa official blog is now showing on the blog page. If you are new to, if else statements they will run the code inside of the curly braces. For example, if is from page returns true, then the text inside of these curly braces will run. If we're not on the front page, you will then fall back to the next section, which is elseif. Check in if the page is home and then it will run the code inside of the set of curly braces instead. We can also add multiple elseif sections and we'll do this later on in the course. Finding out at the very end, if none of these conditions met, we can add a final L section. This will act as a fallback if none of the above two conditions are met. If not, we're just going to echo to the screen the standard text that we have on the homepage. Paste this in and this will work for things such as a follow four-page or any of the pages which we don't set the custom text. We will keep adding to this function as we create more page templates, both analysis, all we need. Next we'll move on to our single page templates. 33. The Single.php template: In the last section when we created this blog page, we also added a permanent function to allow this to link to the full blog post page. When I click on the Title, we're taken to a single post view, to see more details about the post. At the moment though, we still see the shortened version of the blog post, all the excerpt as it's called, and we can also see the read more text at the bottom, which we also need to remove. This is because the theme will default back to the index.php file, if the most specific file cannot be found. In this video, I now want to create a new page template Tranquil called the single.php, and this is a file which is recognized by WordPress as the template to display a single blog post. Let's go over to our text editor in the root of the project. Click "New File". This is the single.php. We can begin as ever with our comments at the top. Open or close the php tags, and then we add a comment with the forward slash, and then the stars close off. It's actually going to be the template for displaying all blog posts. Since this file will share a lot of similarities with the index.php, I'm going to go over there and copy the content to begin with. Down at the bottom from the footer, we copy everything up to the header. Take this over, and add this just under our commands in a single.php. Let's begin up at the top of this file. The title, we just want to display the title at the top of the blog post. We don't need this to link to the full post since we already there. We can remove the link surrounding this. Remove this, we should leave now on our single.php. If we reload, we should now see that we can't click on this page title, meaning the single file which we created is now taking effect. The next thing to do is to make these texts on here, the full content rather than the excerpt. If we scroll down to the excerpt, which is this function just here, all we need to do is simply change it back to be the content, and this is now the full version of our blog post contents. We only have the one paragraph for the moment. We can see this is the full content that we have. The next step is to remove this read more text. Since we already have the full blog post, over to single.php, if we take look for this read more text here, I'm going to remove the full link or the full div surrounding this. We don't need any of this anymore. Say this and the text is now disappeared. Let's just confirm this is all working okay, if we go back to our blog, we still see the shortened version. We still see the link for the title and the read more text. Back to our single.php. To wrap up this video, if you notice, up at the top, we have the default VG text. This is because over in the functions.php , we created the else section as a fullback, if no more specific page is found in the both. So the default back to the text which we see here. However, we want the text of Tranquil Spa Official Blog since we are still within the blog section. We can add a operator inside of this else if section to check if the page is home, or we can use the two pipes to check if this is if home or is on single, which will point to the single.php templates. Now, over to the single file and our text is now displaying as the official blog. We will return to this single post in the next video and we'll show you how to include pagination. 34. Pagination: Welcome back. In this video we're going to introduce pagination. This will allow us to organize our blog post in two ways. First of all, we can break up really long posts into smaller, more manageable pages, which then have page numbers at the bottom, which you can click on to skip between them. Second of all, when we are on the single post view, we can then add a link at the bottom of the post. This give forward and backwards to the next or previous post. Let's begin with adding a pager when we have a really long blog post. This is a really simple thing to do. We need to go over to the edit post. Go into any blog post and then click on edit, will then take into the edit section of the dashboard and here we see we have a paragraph of text. If we then click on the plus symbol up at the top, we can insert a new block for all post. I'm going to do a search for page break. Then click on the Page break just here. Then we can continue on with our contents which I'm just going to copy this paragraph and then add a new block, which is going to be a paragraph of text. Paste this in. Let's do one more. Just below this, we can add a new block, add a new page break, copy small text. Click on the plus symbol to get a new paragraph. Paste this in. Click on Update to save our changes and then view our post. We immediately see our first paragraph of text and this is up to our first page break. But we don't see any page numbers at the bottom to skip through to the next page of the content. But this we need to tell WordPress where want these links to appear in our theme. We want this to appear in the single.php file and we're going to use a function called WP link pages, which I'm going to add just below the content. For the content function underneath here, open up the PHP. Then inside, use the WP link pages function, brackets just afterwards and a semicolon. If we now say this and refresh. So good, we now see the page numbers down at the bottom, which links both from a current page this CSS is a little messed up. Before we fix this, let's just check the rest of the page is working. We can click on page 2, which also shows the current page in the URL. Let's try number 3 and it's all working too. Before we progress any further, let's change the CSS. This is applying because if we go into the developer tools with right-click and inspect, let's hover over this current page and this is founded in a span element. The span elements already has some custom styling from our homepage, which is for the price section for each one of the office. Let's edit this. If we go into the sidebar and then down from page inside here we have these span elements. I'm going to add a custom class. Let's just name this the price. That's the first one. We can do this for the second span and also the third one down near the bottom, give that save and then over to our style.css. Never need to look for our span, which is just here. Provenance, we can call this the price with a dot, since this is a class. Close these files down, reload. These are still working okay, let's check out our blog. Click on any of these individual blogs, and go to our free pages and now down at the bottom. Next pick on a link down at the bottom here, which is going to be a link to the previous or the next blog post. Back over to the single.php. We have some links down at the bottom which we copied over from our index.php. These links, if we go to our blog, these links will cycle through our previous and our next page or blog posts. We want to do a similar thing for all pages. All we need to do is to rename this function to be post rather than have the S on the end. Do that for the previous or next, it's safe. Then go into any one of our blog posts and as our two links. We are on blog posts 1, so the previous one will be our hello world. We can then skip forward to blog post 1, number 2, number 3, and this all works fine. This is how we can use pagination on WordPress. Next we'll continue with the single post view by looking at how we can enable comments. 35. The comment form: A common feature when working with a blog is to have a comment section below each post. This allows our readers to comment or ask questions about the post and also others can reply and comment too. The comments functionality will be added over the next couple of videos. This video will concentrate on adding the actual form input and then the next one will be the code to display the comments under the blog post. For the comments, I'm going to add a new file which is called the comments.php. This is going to be in the roots of the project, alongside the rest of the page templates. Create the comments.php, add PHP tags at the top for our comments, close this off with the text of the template for displaying comments. WordPress has a built-in function which will display a standard comment form, this is called the comment on the skull form. Since this is a PHP function, you need to open up the PHP tags. Then this is called the comment on the skull form. We'll give this file a Save and then open up our single.php file, reload any blog post. We don't see any new content added to this page. Under this cause, we need to setup where we want the form to appear in this template. We can add this over in our single.php. Lets go just above the nav section for all pages, the PHP tags. Inside here we're going to create a PHP if statement. Inside here, this is going to check two things: First, we're going to check if the comments are actually open. Then we use the operator, which is the two pipes. The second condition is to check if we have at least one comment available to display. We do this with the WordPress function called get_comments_number. Then need colon at the end where we add the content, which you want to display is this condition is true, the content we want to display is the comments template. This comments template will default to our comment.php file, which we've already created. Let's check this out over in the browser. Has syntax error on line 52 of the single, we just need to add if at the end to close off our if statement. Displayed is the standard WordPress command form. We leave this in the default state or we can also add arguments to this comments form the customize, including some bootstrap classes to make it fit in better with the rest of our theme. In the comments.php file, we can set up an array of values to customize each field in the form. Let's add these just above the comment form. We can create a variable with the $ symbol, which I'm going to call args. Set is to a PHP array. We can then pass in our arguments into our command form. This will take effect and add a semicolon at the end. Before we add in our arguments, let's take a quick look at our form. I'm going to begin with customizing this form at the very top, which is the leave a reply text. All of these modifications are done by making changes to the default parameters in our array. If we go over to the WordPress website and take a look for the common form section. This will show us all of the available parameters which we can change. If we scroll down to the parameters section. At the moment we're working with the title. We need to target a field called title underscore reply. If we search for this, which is this field just here, this is a field we need to customize the title of the comment form. Making this the first argument we need to add in title, underscore, reply. Then a arrow operator, which is the equal symbol, and then the right arrow. We can then set the new title to be reply or comments or you can customize this to any text you prefer. This arrow operator when used in PHP with an array, is basically used to set the value on the right hand side to the key on the left. Then go to our project and refresh. We've now changed the title of the form. We can also add some Bootstrap classes to add some space in on the top and bottom of this title. We can do this by adding a div inside of our string. A Bootstrap class or title reply a value of three, then close off our div,just afterwards, it reloads and there's our space it in at the top and bottom. Next we can move down to our common section, which is this text area. For this, we use a field if we go to our reference called comment on the skull field, which is this one just here. This is to set the text area and the label of the comments body. In our arguments makes you add a comma just after our title reply. We can then target these common fields, setup our arrow and then our string. To make this more clear, I'm going to add this on multiple lines, starting off with a div section. We can add Bootstrap classes just like we did above, this is going to be the form group class. Then we can define a label if four attributes, this is going to be for comments, the text of comments, then close off our label. Then a break tag to add this onto a new line. Next up, we have our text area, the opening and closing tags. Inside the opening tag, we can add our attributes. The ID is going to be equal to comments. Tomato put the label, the name of comment two the Bootstrap class is going to be formed control. Then finally on the last line, this is going to be to close off our div, so the file was well project and reload. Good. This text area now fits in better with our theme. Next, we also have this submit button at the bottom. Very soon I'm also going to come back and create a name and email field. Who will do this later since this is a little bit different. This one is target, the submit button. Just after our string we can add a comma. This is for the Submit button, so Submit on the skull button. Setup our arrow, then as a string, we can add our Bootstrap button with the type of submits. The bootstrap classes of btn, btn-primary. The text to display on a button of submit and then close off our button writes at the end. Still within a string add a comma, hit "Save" then reload, now as our Bootstrap classes now taken effect. Next I'm going to add a name and email field. If we head back over to the documentation for the common form, then what we want next is this field value. This is going to be for the input fields of offer, e-mail, URL and cookies. To work with this, we need to setup the field array nested inside of our arguments is field array also makes use of the comment form. Default fields hook to apply filtering, so back over to the comments of PHP we can now see this inaction. Your stuff that our button, make sure there's a comma at the end. We can ask our fields. Set this up just like before, but this time we're going to apply on the skull filters at the brackets. The first parameter inside of our filter is the name of the filter hook, which we've seen before as common form default fields. Add this as a string, comment form, default fields. Then the second parameter is our array of fields which you want to filter. Inside of this array, we can add the offer e-mail, URI or cookies, which we've seen before. In our case so we only want to target the offer and the e-mail. Let's begin with the offer as a string. This is an setup just as we did with any other field just above. Let's add this as a string and make some space. Need a surrounding div with the Bootstrap classes or form group. Next I label, close label of two. We can add our attributes inside. The first one is going to be four, this is for the offer with the text of your name. Then I'll form inputs, this will have the ID, which is going to be author, after the link we have label, the name of offer, this is a type of text. Then finally the Bootstrap class of form control closes off. Then we also need to close off our surrounding div. Next stop is the e-mail, which is going to be another item on our array. So I'm going to copy the off section, add a comma, and then paste this in just below, this one is going to be for the e-mail, let's copy this email section. We have these round and div is going to be the label for email, text of your email, input Id, changes, the name and also the type. Save this file and then over to the browser into our projects. We see just underneath our comments and submit that we don't have this name and email section showing. This is because these fields don't need to be displayed when we currently logged in. We currently logged in as tranquil admin, so we'll click on log out. This is how the form looks for non logged in users. So we're going to add in the name and e-mail too. The next stage is to add the start to the required fields. I'm going to add this to the comments, offer and e-mail. First of all, up to our text area for the comments in the label, which means add a star, then the offer, so just after your name. Then the e-mail at the bottom, that's your checklist is working with a reload, this is now for part one of the comments. In the next video, we will look at how we can actually display the comments on the screen. 36. Displaying comments: Part 2 of this comment section will be to actually display any comments which had been left underneath the blog post. This again will be in the comments/PHP file. Let's begin inside of there. We start at the top by first checking if they couldn't post is password protected? If no password has been entered by the current visitor, we can exit by returning before we load up any of the comments. Let's do this up at the top, just above our array. Let's add a PHP if statements. We are going to check if the post is password protected with a WordPress function called post_password _ required. If the post is password protected, we're simply going to return without loading up any of the comments. With this check in place, we can go below. Just after this, we're going to create a section for our comments, which is just regular HTML. Therefore, we need to close off the PHP just above, and then restart it just afterwards. Inside here we're going to check if any comments exist, so PHP will do this in a if statements. We can check if any comments exist first with a WordPress function called have _comments, a colon at the end then closes off. We also need to make some space, and then add a endif section at the end. If comments do exists, the code inside the here will run. I'm going to add a level two heading with some padding, so h2, a bootstrap class, which is going to be to equal to py-3, close off our heading. Rather than add coding in a static title as a heading, we're going to make this dynamic using PHP, so let's open up and close the PHP inside. This heading is going to be dynamic and change for the number of Blog posts. For example, it may say something such as free comments on a Blog post 1, and then the number will increase for each comments. If we do have comments we want to know how many, we can access this information using the WordPress function called get_comments_number. Then we're going to store this inside of a variable, which we do with a dollar symbol prefix, and then I'm going to call this variable the number_of_comments, separated by underscores, and set this equal to get_comments_number. We can now use this variable to alter the text this heading will display. If we only have one comment, we want the text to display as one comment as a singular. If there are multiple comments, however, we need to display the plural version, such as six comments with the s at the end, this can be achieved using a conditional if else statements. Just below our variable, let's add if section, and we'll say number_of_comments, which is the variable we created above, is going to be equal to the value of one. We'll run this code inside, else we'll run the code inside of this next section. This if and the else block will both be used to add a title but using the singular or plural version, which you mentioned before. These texts can be displayed using printf, which will output a formatted string and I want to add this to both blocks. We'll use printf because it allows us to insert variables into our text string, which we'll look at in just a moment. Inside of these printf brackets, I'm going to add a WordPress function as the first parameter, which is for the format, or in other words, the text which you want to use. Later on in this course, we'll look at how we can add the ability to translate the text in our field, so some of these may make a little bit more sense later on, but for now I'm going to surround the if statement section with the _x function, and this will take in three parameters. Let's begin by adding in the first two required parameters, then I will explain what these mean. The first one as a string is the text of one comment and then on. After this we're going to add some HTML entities so “ and then the ”, separated by a comma. The second one is going to be the text of comments title, so let's start with the first parameter, which is this line just here. This is the string of texts which will display in our theme. It will also be a string which we can translate later in the course. We end this string with the left double quotation mark and also the right double quotation mark here. These HTML entities which are the safer way of adding in symbols into our websites. In fact, this is how it will display on the websites, such as one comments on then the quotes, line two, which is this one just here. This is the context information for translators. Then later on in the course, we'll add a third optional parameter when translating our theme. Between these double quotations, we also want to display the post title, so this would say something like one comment on a blog post 4. Remember before we said by using printf, it allows us to output a formatted string. Well, this allows us to add variables into our text. We can add a variable by adding a percent symbol followed by a value, so just the letter s, which means we are expecting a string value. Between the quotes, add a percentage symbol, and then a s, and this is going to be where we all put our variable. But where do we get the value from to insert? We get this by adding a second parameter to our printf function, so just after these x add a comma, and then we can add a WordPress function called get_the_title. This function will grab the post title and add it into the string in the place of our percent symbol and then s. If I could just add a semicolon just after the printf down to the else section, this section will also display similar text or both, but this can also support text which is a singular or plural form. To support this, rather than using the _x function, we use the function called _nx as the first parameter. Again, let's first write this all out and then I will explain just afterwards. The first one is going to be a string, so the %1$s comment on, and then we can add just afterwards our left and right quotations, so these are the HTML entity codes of &ldquo with a semicolon at the end, and then the right quotation, which is the &rdquo and a semicolon. In between these two, we also need to add our variables, so %2$s. I know this looks a little strange, but just bear with me for now. I'm going to add a comma then copy and paste this line, and then all we need to do is add a s on the end of comments. Starting with the first line, let's explain what's going on here. This first line or this first parameter of our nx function is the singular string of text. The second line is the plural version of the same text, ie, with the S on the end of comments. These strings also have the left and the right double quotations on the outside of here with our variables placed inside. After this we can add a third parameter, and this will be the number to compare to decide if we're using the singular or the plural version of our text. We already have a variable of number of comments, so we can add this in with dollar symbol, number of comments. If this variable is equal to one, so we only have one comment, it will run the singular version with the word of comments. If it's more than one, it will not the second line which will say the word of comments in place. If both parameter, which we can also add into this nx function, is the context information for translators unless it's going to be a string of comments title, and this will appear in the translation software we'll use later. You will have noticed we have to placeholders this time in our strings. As we all know from before, this begin with the percent symbol, and then we have a value of one and also two. These values are inserted by adding a second and third parameter or printf, so just after nx function, we can add a comma. These variables are inserted in order so the first one we'll add here will go into the place holder number 1, which is the number_of_comments. Again, we already have this stored in the variable of number_of_comments to enable this number to be localized or translated later. We'll wrap it in a function called number_format _i18n. Let's type this out, number_format_ i18n, open up the brackets, and then at the end we can close off the bracket to surround our variable. If you've not seen i18n before, this is a shorthand version for internationalization, so rather than tying out the full 20 character word, sometimes you use the shortened prefix, so it's i, 18 characters, and then n separated by a comma. We can add in the second value for the second variable, this is going to be the page title. We can do this through WordPress function called get_the _title, close this off. Now, if we give this a save, and then reload the browser, so we have an unexpected closing curly brace on line 38, so we just needs to add a semicolon at the end of printf. Reload and now this removes any errors from our comment form. The next stage is to add a WordPress function to display our comments. I'm going to do this in the comments form just underneath the level two heading. We're going to create a ordered list to display these, then close off ordered list below. This will be generated by WordPress, so we needs to add this in as a PHP tag. The WordPress function which we're going to add is called wp_list_comments. List comments takes in an array where we can pass in some settings we want to add. The default style which we can add in here is the unordered list, but I want change his to be ol, separated by a comma. We can also set the size of the avatar, which you want to display, with avatar_size. This is then equal to a pixel value, which I'm going to set to be 70. WordPress along with many other websites, will grab your avatar image from a site called gravatar.com. So if you've uploaded an image to this website in the past, this will then display on WordPress. Now, if we save this and then go over to the site, I'm going to go to the admin section, the first login, add the username and password, and let's check this box to login. Go to the sites, the blog section, and choose any blog post, that's either a random string of text as a comment and hit "Submit". Good, let's try one more. So comment 2, hit "Submit". Great. So now all our comments are working. In the next couple of videos, we'll make some more improvements to our comment system. So I will see you there. 37. Comment reply Javascript: At the moment, there is a small issue which may not seem like a problem at the moment but this issue will grow as we get a lot more comments. At the moment, if you take a look at a blog post, and I've added three different comments under here, it will go ahead and click on "Reply" to this first command. The reply box is right at the bottom of all of the comments. This is fine with the number of comments which we have, but imagine if we clicked on the first comment when it was 50 comments, then we'll be taking it right down to the bottom, resulting in a bad user experience. This is something which WordPress has discovered for by allowing us to load up some JavaScript, place the comment box just under the comments we are applying on. This is as simple as enqueuing a new script, just like we did earlier with our bootstrap. The only difference this time is we're going to load this up inside of an if statement. We don't want this WordPress script called comment reply to always be loaded. We only want it to be loaded on the single post page if the comments are open, and also if nested comments are enabled too. Let's go over to our functions.php. This will be added up just after our Bootstrap JavaScript so we do know [inaudible] scripts function. Let's make some space, and then inside here I'm going to begin with a php if statement. Let's type this out to begin with, and then we'll talk about what each function does. First of all, we want to check if is_singular, and I'm going to add this on a new line so it's more clear. Then once I had the double ampersands, I'll also check if the comments are open. Next line, also check if the get option of thread comments is enabled. If all these conditions is true, we then want to load our script with WP enqueue script. The script we want to load is the JavaScript called comment reply. Comment reply is bundled with WordPress, so we don't need to add this into our theme, so the first thing we're doing is checking if is_singular. Is_singular is a WordPress conditional tag, check if this is the single post page. We then want to check if the comments are open, which is another conditional tag. Check if comments are enabled for this post. This is done inside of the dashboard. Get option, we'll retrieve an option from the WordPress database. Options are basically pieces of data which it uses to store configuration settings. Here we include in the thread comments, and this is a option value to check if nested comments are enabled. This is important since this JavaScript we're loading is used to bring the comment box under the nested replies. The option of enabling and disabling comments can be found in the dashboard. Let's head over there now, go down to settings, and then in discussion you will find all the options we have relating to our comments, such as enabling our nested comments, which you see here, or making sure users must be registered and logged in to comment. All that we have to do now is make sure that this file is saved, go over to our blog section into a comments. Choose any blog post with some comments, let's go for the first one, click on "Reply," and now this box to reply is directly underneath the comment which we clicked on, and this now leaves our reply box directly underneath the comment we're replying on, resulting in a much better user experience. 38. Closing comments: As a theme author, we also need to handle what to do when comments are not allowed on a post. If we go over to the dashboard and then go down to a post, click on "All," we can select any post which has comments, we can see the number of comments inside of the speech bubble just here, so let's click on "Blog post six" and then "Edit." In the menu on the side bar down here we see a discussion section, if we click on this, this has the option to allow or disable comments. If we uncheck "Allow Comments," click on "Update," and then go to "View Post," we see that the existing comments are still showing. I will show you how to delete these in the next video but for now, a user may be confused since there is nothing telling them that comments are closed. We can now put some text in this case in the comments.php file, so let's head over there now in our text editor. Then if we locate this closing section tag, which is for the comments, we want to add a php if-statements, so open up the php tags. You can add a if-statements and then close this off just afterwards. We want to check if the comments are not open. We can do this by doing the reverse with a exclamation mark, this will do the opposite of comments open, so this will only be true if the comments are closed, add comma just afterwards, which will run the code on the next line. If the condition is true, the code will output is a simple paragraph or text, we can add a p-elements inside here, which is just standard HTML, nested inside, we can open up the php, close this off and then we want to run a function called escape html_e. This is a function which will display the translated text that's being escaped for safe use in HTML output, and the text that we want to add is simply "Comments are closed for this post," add a semicolon just afterwards. Now, let's head over to the browser and then reload, we've close a syntax error and we just want to close off our if-section. So php and our if-section, then close this off, hit "Save" and then refresh, and there we go. It says [inaudible] text at the bottom of "Comments are closed for this post," and we can confirm that we don't see this text if you go to a different blog post. Let's go back to five, we don't see the text, four, number three, and we have all comments open, so we don't see the text at the bottom. So this is only a small change, but this is a nice touch which can help the user experience and stop them getting confused why they don't see a comment form showing on the post. 39. Comments pagination: Just like we looked at earlier when adding pagination for our list of blog posts, we can also add this feature for comments too. To this, I'm going to add five comments on any blog post. Let's go for the tests. Test one, "Submit", Test two, "Submit". Test three. Leaving these five comments on this particular post. Now if we go over to the "Dashboard" then to "Settings" and then "Discussion", just for demonstration purposes, I'm going to reduce the number of comments per page to be two. If you look for the option to break comments into pages, we can change this to be two, save our changes. Then if we go back to our sites, my Amazon blog post free. Let's head over to there, click on this. We still see there is a single comment showing on this blog. We did set this be a maximum of two, but this is the last page of comments so we see the comment number 5 on its own. Comment one, two is on a page, three and four is on a page, even this number 5 on its own as the pages. We can skip between these. This is as simple as adding a WordPress function called the comments navigation. We can add this over again in our comments, dot php file. We're going to add this just above our if statement that we added in the last video. Check if the comments are open. We already have the PHP tags so I'm gonna add this nested inside as the WordPress function called the comments navigation, semicolon at the end, hit "Save" and then over to the browser and reload. We now have a title of comments navigation. We can click on the older comments, to go back, and now when we have a page, back and forward, we also have the older and newer comments link. This default text of comments navigation is added for screen readers. This text along with the text used for older and newer comments can also be changed by adding in parameters into the comments navigation function. If you would like to do this, check out the WordPress function reference in the documentation, and you'll see some examples of how you can do this. I'm going to leave this as the default text for now as it is pretty clear. This is it now for our comments so now see you in the next section. 40. The archives: Early in the course, we added in a sidebar with the archive section. These dates which are displayed are dynamic, meaning WordPress automatically adds in these dates, when a blog post is available in a particular month and year. If we go ahead and click on a particular date, we see that the post available are for the given month. We can see this open URL. We see the year followed by the month the blog post was created. This all works pretty fine at the moment, so there's not a lot of work left to do. The only thing I am going to change is to make this page a custom archive templates, which will also show the month we are viewing rather than this default index of PHP. A file called archive.php will be recognized by WordPress, and we're going to use this for this archives view. Like all of the other templates, we're going to add a new file in the root of our project. This one is the archive with the.php extension. We've just seen with all the functionality of this view is very similar to our normal blog. I'm going to copy and paste in the contents of the index.php. Let's select all, copy this, paste this in to the archives templates, and then we can change the comments up at the top. Rather than this being the main template file, we're going to change this to the template, for displaying archive pages. All we need to do is to add a WordPress function called The archive title, and I'm going to add mine inside of the block section, just underneath the col, md, eight section just here. Let's do this. Immediately underneath this, this is a php function, with the name of the archive title, and the brackets, and then the semicolon at the end. Inside here we're going to add two parameters separated by a comma. This is going to be surrounded in a level 3 heading. It can add to the HTML of h3, the opening tag. Then afterwards, we can close off our h3. I'm also going to add a horizontal line. Let's add a hr, just before the closing tag, and this will add a line just underneath the title. We can go with the browser, and check this out. Go to the archives, click on any date. This function will now show the month of the blog posts which we are currently viewing. The user knows exactly where they are on the site. This is just a small change, but a really useful one for the user experience, so they know exactly which page they are viewing. 41. The contact us page: We now move on to the Contact Us page, which is located in the footer navigation just down at the bottom here. To begin to create this, we first need to create a new page inside the Dashboard. Where is the dashboard? Then go to Pages, Add New. We don't need to add any content, just a page title of Contact Us, then we can publish this. Now a corresponding file inside of our theme. Open up the sidebar, click on add a new page, and it's going to be called page.contactsus.php. The naming for this file is important here too, there is a custom use template for one specific page, and WordPress recognizes this because of this page dash prefix in the file name, followed by the slug of contact us. The slug is the WordPress term for the URL after your domain. For example, if you had your domain.com or slash contact, WordPress will consider contact to be the slug. You can find out the slug name for any page on the site by visiting it in the browser. Let's go to our sites. Let's click on the blog. This slug, this page is the blog, off we go back to our new Contact Us page which we just created, click on the permalink, and we can see the URL slug, for this new page is Contact Us. This new Contact Us page. If you go to Visit Site, and then scroll down to the footer menu, we've not yet created this footer menu in WordPress just yet. These links that we select, is still pointing it to our HTML files that were created in bootstrap. We will create this footer menu my in a later video, so for now if we want to visit this new Contact Us page, all you need to do is to type in the slug of Contact Us which we've seen before, or click on view page from the edit screen. We don't have any content yet, so let's go over to our template and let's get to work starting with our comments, so this is php, close this off, and we add our command in the usual way using stars and the forward slashes, the template name. It's going to be Contact Us. We're going to use the same header as the rest of the site, so we can use the get underscore header function. All is in. Then after this we can add our footer down at the bottom,so php get the footer, then close this off. When creating a customer templates like this one, i.e not a recognized template name such as the header, the footer, and the single dot php, we should also add a template name, just like we have done at the top here. When we add a template name, it becomes available in the edit page section, so we can assign this custom page template to any page which you want. If you go back and then go to our Contact Us page. In the Contact Us page, we go down to the page attributes. This is also available on any of the page. We can see we can select any templates which is available in our theme. We don't however, need to select Contact Us in this instance, because the page template name of Contact Us will match the slug for this page. We can prove this by adding some random text into the template, so at the moment we still got the default selected. Let's go into here and just add some random texts. View our page; make sure this is saved. Here is the page. There's our header footer, and also our random text. Before we move on to editing this page, I just want to take a moment to talk a little bit more about page templates. As we discussed before, this is a custom page template intended to be used on one specific page. WordPress recognizes this because of the page dash prefix which you mentioned before, followed by the pages slug of Contact Us, so we have this one covered. We can also create templates for global use, i.e to be used on as many pages as we want. It's important when creating global templates, we do not use this page dash prefix as WordPress will think this is a specialized templates for one particular page. These global templates are for common things such as a two or three column page layout, and it's also common to see a naming convention, so just page, underscore two columns like this, or we can do the same and have a second templates, which is global. It can be for three columns as long as we don't have the page dash prefix will cover it on this. If we want to create anything like this, all we need to do is to create our files, and then give them a name comments so that available in the WordPress Dashboard deselect, just like this one. Good, so now we understand the different types of templates. Let's get back on to editing this Contact Us page. We have mostly discovered in our bootstrap templates. Let's head over to our bootstrap projects. The contact on the HTML extension, which is from our bootstrap sides. We're going to copy the Contact Us section, so scroll down below the header. We already have this included, copy the Contact Us section, all this up to our footer section, then in our page contact us, we can paste this just below get header, and test if this is working. If I go Into to WordPress and reloading our contact us page. Good, we now have the contact us page display in the actual contact form functionality to be able to send a message. We will come back to in a later video. But there are still a few small modifications we need to make before we finish. First, we can grab the title of Contact Us dynamically, and then second of all is to fix his image we have below. This is done in the same way as we did earlier on the course, all the rest of the images. First we can do the title, so the page contact us. Let's look for the hard coded version, which is just here. Let's cut Contact Us over here. We can then generate this using php using the underscore title, which is a WordPress function which we looked at earlier. Then we can modify the image URL using get template's directory uri, so in the image source, just before this, we can add some php. The opening tags, we're going to echo escape url to remove any characters which shouldn't be there. Then inside here the WordPress function of get templates directory uri, to point to the home location of our directory, the brackets, and then we can close this off add a semicolon, then close off the php. Just after this, we also have our images file path, which is Images divider purple, so we also need to add the forward slash just before this file path. We can save this and then it reload in the browser. We now have a dynamic Contact Us title, and our work in image, our contact template is now in place. We will return back to this later on in the course to make this fully functional within WordPress. 42. Sidebar widgets: Welcome back. In this video, we're going to look at how we can widgetise our theme. This is the process of implementing widgets and also widget areas. These widgets are simply a self-contained area that performs a specific function. For example, we are going to create widgets for our sidebar in the blog section. We're going to create these blocks, such as the archives and our categories. This makes it more customisable for the administrator, since widgets can be moved around, added or even removed. If we go over to our dashboard and then down to the appearance, if you hover over this, this is normally where we can find the widgets option but it's not there. To see this option, first we need to setup our widget areas. In our case, the sidebar. If we go over to the codex on the WordPress website and search for widgeitising themes, the first thing we see is how to actually register a new widget area. We do this with a function called Register sidebar. This function is customisable, so we can use the same elements and classes we already have in our sidebar, to preserve the bootstrap appearance and layout. We do this by changing any IDs and classes or the title and also the widget area to match our current sidebar. Let's begin by copying this section, everything except the PHP tags. This is going into the function's.PHP, so we don't need to add these since we already have them included. Let's open up the functions and then right down at the very bottom, paste this in. Still within the PHP tags, if we open up the sidebar.PHP, we see that each section is surrounded with a div with the class or padding on the y-axis or the value of free. Let's go and add this in the functions. We can do this with div before and after widget section. We already have a div in place, so all we need to do is to add a class. This is our PY-free class. We already have the closing div, so that's fine. Next we can work with the title. Again in the side bar, this is a level four heading in with a class of font itallic. So first of all, we can change the h_2 to be h_4 and also the class to be font itallic. Then down at the bottom we have an action just like we've seen before, which will run our function after the widgets in it's hook. Now, if we go back over to the codex and scroll down to the next area, this is how to actually display our new widgets area. We do this with a WordPress function called dynamic sidebar, which will create these sidebar photos by calling all of the active widgets. Let's copy this example. Then in the sidebar.PHP, we can add this at the very top of the file. Here we're targeting our home right one section and in the functions, this has the same ID were added into this array. Now if we go over to our dashboard and then reload this, over our appearance, we now have a widgets option, which we can click on. This now has our new widgets area of home right sidebar, which is the one we just registered inside of functions. Then we can go ahead and drag over any of these available WordPress widgets into our sidebar. Wordpress provides us this with lots of different widgets. We already have the archives which we are going to use. We can drag in calendars, we can drag an image galleries, also creating custom HTML, which we're going to do. We can construct menus, pages, comments and pretty much anything that we can think of. We're going to begin at the top of our sidebar. Lets go to our sidebar.PHP. We're going to create this section as a widget. It is going to be the about section, with the text inside here. So let's go to the dashboard. We can do this with a custom HTML widget. The title was about. Now we can add our custom HTML by copying over this P element from our sidebar, paste this into the contents, "Save" and now I'm going to open up our site in a new tab. Go to the blog section and we have two of our sections, one now generated from our sidebar.PHP and over generated as a widget. We'll keep both of these in place for now just to compare these styling but next we're going to move on to the archive section. The archive section also has its own widgets, so this is pretty straightforward. We can drag this over below our about section. We don't need to add a title since the widget name of archives will appear as the title by default. So all we need to do is to reload and now have an archive section. The CSS looks a little bit different but we'll come back to this in just a moment. Next, we can drag over the categories, which is also a widget provided by WordPress, drag this over below the archives and our categories now appear. The last section is the following section down at the bottom. Again, this needs to be some custom HTML. If we go down to our sidebars.PHP to the follow a section, we can copy all of the i elements from font-awesome and then we can create a new widgets area, which is custom HTML, drop this in at the bottom. The title was follow us based in the HTML and then save this file. There we go. The next step which I'm going to add is a search box. This search facility isn't currently part of our bootstrap templates but since WordPress provides this as an easy to use widget, it makes sense to add one of these in, I want to drag this over just below our about section. Add this in and refresh the browser and we have a search box now as a widget. If we do a search, let's search for Lorem, you'll find all of our blog posts with word Lorem inside. Let's try number five for blog posts five. This works because we have our blog posts and the 1500s in there. Let's try offers. We got no post matching our criteria. We will come back to this very soon when we create our own custom search box, so for now I'm going to move on to the style in for the archives and the category section, just to make this look like our existing sidebar, let's open up our customers style.css. We need to go down to the bottom of our regular styles, outside of our media query, we can target the widget area, which is a class added in by WordPress. We're then going to target any unordered lists inside of a div. We can remove the bullet points with list style and set this to be a value of none. After this, we can also reset the padding to be a value of zero. Save this file, which leaves our new widgets area looking just like the existing bootstrap sidebar. So if we go over to our sidebar, we don't need any of these sections anymore, so we're going to move all of the divs, in fact, all of the code outside of the PHP section and now we should have one sidebar on its own. Next, we're going to customize our search form, which we added as a widget, so we fit in with the rest of our theme. 43. Custom search forms: In the last video, we added a custom widget for a search box. We discovered by default that the WordPress search form is not currently the best looking, and could benefit from a little styling. We can create a custom search by adding a file in 12 theme, called the searchform.php. We do this in the root of our project, the searchform.php. Then open up this file. This search form will override the default WordPress form. Creating our own will allow us to add the form in by using Bootstrap classes to match the rest of our theme. Let's begin just as we would with any of a regular form. We create the opening and the closing tag. We're then going to add a action attribute to our form. The action attribute is where we send the form data to be processed. In our case, since we are using WordPress, we're going to open up the PHP tags. Close them off. Then inside here we're going to send this to our Home URL. We're going to send this to our home URL, which is our blog. We'll do this by echoing and then escaping any unwanted characters with escape URL. We can then pass in the Home URL, passing in a forward slash as a string. This is a GET request, so we can add this in as a method. Next up we can construct our Bootstrap form by surrounding the inputs with a class of form group. This form group is going to have a label. This label is for our search, and then I'll bootstrap classes of h4. Then font italic. This is because we are using a level four heading for the rest of the widgets and also, the italic text. We can add this label as the value of search. After this label, we then create our text inputs, which is going to be for our search. We can give this input a name, and this needs to be equal to the value of S. It's name attributes of S is a required field by WordPress, so it knows where to grab the input value from. We then also need to add an ID of search which will match our label. Then we're going to add a value which is going to be PHP. Lets open up and close the PHP section. For this value, we are going to use a WordPress function called the search query. Open up the brackets and the semicolon at the end. By adding the search query as a value, this will allow the text box to contain the value of the previous search inputs. We then need to add a class just after the PHP. This class is a Bootstrap class of form control. Then let's close the sidebar down. Give this file a save, and then go over to the browser. Reload. We can just test this is working. Let's search for 'is'. That all seems to work. We can see up at the top, we have the value of S, which is the name of our input. This is set equal to the word that we just typed in of 'is'. Now search form matches in with the rest of our Bootstrap styling. These results are displayed using a fallbackindex.php template. Next up we'll create a custom template to display these results. 44. Search.php: Currently if we create a search, just like we've done in the previous video, if no search.php file is found, WordPress will default back to this index.php. Since our search results will display in a similar way to this index page, we can use this as a good starting point to create our search file to show this contents. Let's go over to our projects and create a new file in the root of the project, call this search.php. Then we can grab the contents of the index page by selecting all, copy this, and then paste this in our search.php. We can start from the top by changing the comment to be the template for displaying search results pages and then test this is working. If we make a small change, such as if you go to the title, let's just add hello up at the top here, and if we go to our regular blog, we don't see the text of hello but, let's do a search and now we see the text of hello appearing after each search results. So now our template is working and taking effect. We can begin to customize this file. We're going to give the user some feedback to what search term they have entered in the form. To do this, I'm going to add to our custom feature text function to add this into the header. So let's go over to the functions.php file. Then if we look for our feature text section, which is just here, just after this else-if section, locate the curly brace. Make a little space, we can add a new else-if block and the condition we want to check if the page is the search. If it is, we'll add the curly braces and then run the code inside here. First of all, I'm going to add the official blog section since this is still displaying blog posts and then on a new line we're going to output a break tag. This is just regular HTML break tags. Then after this text on the line break, we can also display the search term that has been entered by the user. We can do this by using a print f function. We used print f earlier to display text with any formatting, in our case to enter the search term using a placeholder. So add the print f function. Then we can output our text with the double underscores as a string. We can add the texts of search results for, followed by a colon and then we can add our variable inside with the percent symbol than the s. After this, we add a comma and add a second value to our print f function. This is going to be the input which is being entered into the search. We can grab this value with a WordPress function called, 'Get search query,' then add a semicolon at the end and I think we also need one just after our break tag and let's see this in action inside of our search. Let's do a search for lorem and now we see the text of, "search results for, " and then we've pulled in the value of lorem as our second value and placed it into this variable here, which we grabbed from the search query. To finish things off, if we enter a search and nothing is found, to search for anything inside here, we see the text of, "Sorry, no post matched your criteria." This message is more specific to our blog rather than our search page. Let's go through our search templates, I'm making changes just after our end while section. So delete this text here. So we'll say, "Sorry, no matches for." After this string of text we can also add onto the end with the dot, the value which the user searched for with the WordPress function called, 'Get search query.' After this, we can also add a string onto the end saying, "Please search again." So a comma, and then please search again. The next step is to emphasize our search query. So we can do this with the HTML emphasis tags which is em. So this is in the opening string. In the string just afterwards we can close this off and see how this is looking over in the browser. So now we'll search for an unrecognized string. We get the text of, "Sorry, no matches for." We then pull in our search query using this WordPress function and then afterwards, please search again. This is how we can add a custom search form and also how we can add a custom search template to display the results. So I'll see you now in the next video where we'll add a 404 page and widgets. 45. Adding a 404 page and widgets: Another important page template which WordPress will recognize is the 404.php file. This is the template which is used when it doesn't recognize a URL. For example about the top here, if we add in something which doesn't recognize, such a random string of text, we're taken to a page which is not very useful to the user. In fact this page template is the index.php. Since as we already know this is the default fallback template, we can go ahead and create our own custom 404 file, which will be used in place of this index.php. We can add some useful information to the user and also some links to get them back on track. As ever, inside of the sidebar, we can create this in the root of the project. This is called the 404.php. As a starter, I'm going to copy the code which is in the archive.php. Select all and copy, then add this into our 404. Beginning with the command at the top, this is the command for display in 404 pages. Now we can go ahead and clean up this page. But we still need the header, we still need the main container, the row, and this eighth column section. So now I'm going to move everything inside here. We can also remove the sidebar. We can remove the nerve for the pagination. Let's remove all of the content inside here and tie this up. This is the closing element for a column section, then we have our closing row and container, followed by the footer at the bottom. Since we now have no sidebar, we can change this to be the full 12th column grid. But before we go ahead and modify this page, let's go over to the functions.php file, and we can add our header text for this file. I'm going to do this as a new elseif section. Just before our else section at else-if, the condition which we want to test is if this is the photo 404 template. If it is we're going to run the code inside of these braces. Let's use a underscore echo function, then the text inside of here, where it is the last. We can then output a break tag after this at the html elements. Opening this up while this off. Then enclosed inside a here, we can add to the text of "Let's get back on track", semicolon at the end of this. We can save this file and then go to the browser, it reloads, there's custom function text now displaying. We now have feedback to the user and let them know we are on a recognized page. But what can we do to get them back on track? To do this, I'm going to add some widget area to allow the user to find out where they want to be. Early in this section, we added widgets to our sidebar. Now I'm going to add some reusable widgets to our content area just below. First, we need to create some of div elements to add these widgets too. I'm going to add one row with four equal sections inside. Back to our 404 template, inside here we can add a div, close div. This is going to have a class of row. This row is going to be the wrapper 404 sections. The div, we're going to close this one off and this is going to be followed columns. This one will have the class which is going to be called MD-3. In fact we'll changes to be MD-12. We can duplicate this to create four sections, and each one of these divs is going to be a wrapper for our widgets. We can use a function called the underscore widget. If you go over to Google, now we do is search for codex, the widgets. We have a function reference which you can click on it just here. We'll see in a description here, this template tag is used to display a widget outside of a sidebar. This is perfect for our use. Then if you scroll down to the parameters to see a list of widgets and how we can use them. In our template we have access to your widgets, such as the archives, the calendar, any different pages or comments. We can add a search form, tags or menus, and these are similar to the ones we've seen in the sidebar section before. I've selected four which I am going to use in this project, but of course you can choose four different ones if you prefer. Let's start by adding these into our div. Inside here, this is php code, so we open this up, the function as we have seen is called the underscore widgets. Then we pass inside the name of the widget which you want to add. The first one I want to add is WP, Widget Pages. Add this in as a string, then we can add in the remaining three. Let's just tie this up a little bit. So the next one, I'm going to copy this line of php at this end, and the second one I'm going to add is WP, widget categories. The third one, this time is going to be recent posts. Then finally the last one, I'm going to add the tag cloud. Let's try this out over in the browser. Back to our projects. Good. We have our pages in the first section. Let's try the contractors. That's working okay. We can try four categories. Let's take this to the office templates. The reason blog posts, find number 6 and that's working fine. We can also do a search for a tag and that is working fine too. You may also notice a title or two when we click on the categories. For example if we go to news, get the category of new selected, and also the same if we go to the tags. This is up at the top here, this is because this page is using the archive templates. If we go over to the archive.php, we added in a function called the archive title. This all nicely fitting in together. This is it now for our 404 page, feel free to go a little bit further if you would like, but this is a good starting point for getting the user back on track. 46. Template parts: As our WordPress theme grows, it makes sense to organize our code into a more organized and maintainable way. Using a template part will allow us to do this by taking parts of our templates or our code and then placing them into their own file. Just like we did with the header and footer areas, we can then reuse these template parts in multiple parts of our theme. This is a really useful way to avoid any code repetition. A good use of this would be our comments.php file. We can move the comments form into its own file to keep things more organized and also the file size down. To also help with this organization, I'm going to create a new folder to keep these in called template-parts. So in the roots of the project are the new folder this time. This is called template-parts. Then inside of this folder we can create a new file and this is called the custom comment form. This also needs the dot php extension. Let's add a php comments at the top of this file. Close this off. Then inside here we're going to add a comment of template part for displaying our customer comment form. So now over in the comments.php, we're going to cut out the comment form at the bottom of the file. Let's head over there now, comments.php and scroll down to our custom comments form. So this has its own arguments, which we're also going to add. Let's cut the PHP tag right at the very bottom. Then up to the PHP tags just above our array cut this out, save our comments.php and then we can place this inside of our new template part. So save this file and the next step is to add this back into our comments file. We can do this with a function called get template part. So let's start this off with the php tags. Close this off. Then inside here we can use the WordPress function called get template part. Inside here this takes in a string and the string is the file part to the template part which was created. So from the root of our projects, we added a new folder called template parts. Then the filename is custom comment form. We don't need to add the dot php extension. So now save this and we can check this out. Let's go to our blog. Now we can click on any of these blog posts and we can try to create a comment. Let's click on "Reply here" so new comments submit this and everything appears to be working as normal. So this is a technique you can use for any part of your code, particularly if the code is to be reused, or if you want to break up any larger files into small pieces. 47. Featured images using post thumbnails: Next up we're going to look at how we can add featured images to our theme. You might also hear these referred to as post thumbnails too. These images are used to represent things such as a page or a blog post. Now we have control of where these images will display. We can place an image inside this blog post preview, rather than just having a plain text for the content and the title. To enable this feature, we go over to the functions. php, and then we can use the add theme support function to do this. If we go up to the top, we've already added theme support for the automatic feed links and also for the title tag. So now we're also going to add support for posts, thumbnails. So add theme support, and then as the string inside the brackets, we add post hyphen thumbnails with the semicolon at the end. We can say this is now working in the edit page or the edit post screen. Let's go to any blog posts, click on edit post. Over in the side bar on the right we have this featured image section. We can click on set featured image and then upload any image of our children. Have provided free different images to use for this. So let's go over to our projects, and then I'm going to go inside of all theme folder. So tranquilwp , and then down to the images section. I'm going to drag over the featured images, candles like smoothing. So let's select all three of these. We can then drag these over and then drop them into the media library. If we now select one of the images and then click this button here to update our blog post, let's go all to view post, and then to our blog. We see for a blog post six and no images are displaying. This is because we need to tell the WordPress exactly where we want this one to show in our theme. We do this with a function called the posts thumbnail, and since index.php file displays this list of blog posts, we need to update inside of there. So the side bar and then the index.php, and then this image will be displayed for each blog post. So we need to add this inside the WordPress loop. This can be placed anywhere which you choose, and I want to add mine just above the excerpt. Let's locate the excerpt which was just here. I'm going to add this inside of a div. So it can add a bootstrap class to give you some margin on the y-axis of free. Throws off the div. Then inside here we can add the WordPress function. So php close this off, and then the function is called the posts thumbnail. So now we specified where this is to show in our WordPress loop, let's reload, and now we can see our image just above the excerpt. This now looks better with our images. But remember there is also a vat templates too which show our blog post. We have the single. php. If we click on one of these posts, and we'll see that this doesn't show our featured image. So we can also add this into the single template. So let's add this above the contents in the single. php and also this file,then the contents. I'm going to add the same div with the class of my-3, php and the same function, which is the posts thumbnail. Now let's go to the browser on the single-view, reload, and now our image is displayed above the contents. We also see blog posts in side of the archives, if we select any date from the side bar, we also need to add this into the archives template too. So I'm going to copy this div from the single. Go to the archives and then add this above the excerpt, paste this in, and there we go. We also need to do this in the search. Let's do a search or anything inside here. So just blog post three. We can also add this inside here, which is the search. php. To keep things consistent, I'm going to add this above the excerpt. Let's locate the excerpt function and also paste in the post thumbnail. If we now refresh, we don't see a post image for blog post three. This is because we've only set this on bulk post six. Let's do a search for number six, and there we go. This all looks fine in this test environment because all of the supplied images are the same size. In reality, this would not always be the case, and there is a few different ways we can approach this. First is by using the default sciences where press provides the series in action. We can add any of a random image to a post. Let's go to blog posts five. Go to edit post, and then let's go to our images again inside of our theme folder. Then we can add a different image which is not been resized for this purpose. So we can use cosmetics. jpg, let's go to set the featured image, drag this over, and we select this to use, update our blog post, and go on to our blog. So now we have two different size images, this doesn't look quite right. The default image sizes of WordPress are thumbnail, medium, large, and full. Full being the size of the image which we uploaded. These image sizes can be configured in the admin section under the media panel, go down to the dashboard, and then go down to settings and media. Here we have full control of the thumbnail size, the medium size, and also the large size. But how do we know which one is the plain. If we go to our index. php for example, where we've added the post thumbnail. Inside here we can specify which size we want to use for this template, inside here as a string. Let's go for a medium, save this file, and then go to our blog. Which either these two images are now resized to be the medium setting which we just looked at in the dashboard. A second way of approaching this is via CSS, targeting a class WordPress ads to this image called WP post image. To say this in a fact, we can remove the medium setting from the post thumbnail, never go over to our style sheets in the side bar. Then outside the media query, we can target WP post image, and then we can set a width value, I want to go for 75 percent, and let's see how this looks. Leaving each image to be 75 percent of the container width. Of course, we can go even further using CSS by sending widths, heights, and using any of the power of CSS, have full control. However, doing too much with CSS, can need the images looking a little bit stretched or out proportion. So it's often best to keep image sizes consistent when uploading to avoid any problems. 48. Footer menu and custom class filters: We already know how to register new navigation menus from early in the course when we added the primary menu in the header. There should be no surprises during this video where we're going to register the footer menu down at the bottom. The footer menu is still linking it to the HTML files when we created the boost of version. Let's go over to the Dashboards and then go down to Appearance. Inside here we have the menus option where we create a new menu. Let's create this from the create a new menu link and give this menu a name of a Footer Menu and then hit "enter." This is an alternative approach to building a menu. Early on we created the primary header menu using the customizer. This footer menu has three different links one for the blog, the contact us page, and the page we don't have yet called the privacy policy. Remember this was a page we never created since it's personal to each business. Therefore, we're not going to be creating it in this course. But we can create a page for it, for the user to edit themselves. Let's quickly save this menu and then go to pages, add new. You can create this privacy policy. Then publish this page. Then back over to our menu inside of appearance and menus. Make sure the Footer Menu is selected and then over on the left under the Pages, let's add The Blog. We also want the Contact Us and Privacy, add all three of these to our menu and let's just rearrange these. The Blog is at the top, followed by the Contact Us with Privacy Policy at the end. Give this a save. Next, we need to register the Footer Menu in our functions file, just like we did earlier with register Nav Menus added to the functions and then we need to look for our Register Nav Menus function. We already have the primary menu linked on here. Let's now add the footer, making sure this comma is at the end of the primary section. We do this in exactly the same way, just as above. We first give this a name. This is Footer Menu. Then our theme name as a string, which is Tranquil WP. Now if we head back over to the Footer Menu in the Dashboard, there is a term called Manage Locations. We can select this,Theme Location that we just added of Footer Menu. We can select our Footer Menu to go in this location and then save the changes. This new menu is now ready to add to our Themes Footer File. Using the WP Nav Menu function, I want to copy the Nav Menu along with enough walker codes we added in the header. Let's go to the header. We need to copy the Nav walker which is all of this PHP code here. We can take this over to our footer.php and this will allow us to take advantage of all the usual bootstrap classes. In our footer, just under our navigation header, I'm going to comment out this on order list for our free links, then paste in our Nav walker. We can edit this now. This is the footer rather than primary. We still have the depth of one's instrument using a drop down. The container this time is an on order list. The container class is list group. Let's edit this section here, paste this in. We don't have a container ID, so we can remove this line, the menu class, we can also remove this line. We then have our Nav walker which is all the same so we can save this file. These changes were made all apply to the container, i.e, the on order list rapper with the class of list group. But what about the individual list items? The WP Nav Menu function will automatically create our links as LI elements. It will also automatically add word press classes too. But we also need to add our bootstrap class of List-Group-Item. There is no way we can do this inside of this array. There are options such as before and after, which we can use in the array, where we can add a string to output a list item elements with our own classes. Since an LI element is automatically added, we will end up with the LI nested inside of an ally. First, if we refresh the browser, we can see how our Footer Menu looks. Reload this on any page. We'll see our navigation doesn't quite look right. One way we can fix this is if we go to the Dashboard, Appearance and then Menus. Inside here, if we click on the screen options at the top, we can add some CSS classes by checking this box and this now allows us to add our CSS classes to each page. If we click on the blog, for example, we can add the List-Group-Item. Let's copy this. This is the cross which matches up with our list items from here. We can also do the same for Contact Us and also for All Privacy Policy. Then save this. Then we can reload our blog and our menu links now look like they did before. Although this is working, we don't want to rely on the end-user, remembering to add this class each time the add new page, the footer. We can create a more permanent way of doing this using a filter called Nav Menu CSS class. We can do this over in the functions file and we'll add this down at the very bottom. Just before the closing PHP tag, we create a function. This is going to be called a Footer Menu class. Inside here. This is going to take in three arguments. This first one is going to be called Classes, which is an array. This is an array of CSS classes which is applied to the menus list item elements. The second one is going to be for the item. The item is the current menu item. Although we don't need to use this in our particular function and the third one is for the args, this is an object of WP Nav Menu arguments. This will give us access to the Theme Location along with over current Menu information if needed. Inside here we're going to use a PHP if statements. Inside here we want to check the Themes Location and see if it's equal to the Footer. We can grab the Themes Location from the args, then the arrow and then the theme underscore location. We want to check if this Location is equal to the Footer. If it is, this code inside the curly braces will run. What we wants to do, we want to add our bootstrap class to the array. $ symbol, classes, which is this argument just here. We want to set an array item to be equal to List-Group-Item, semicolon at the end. Then after this we're going to return our Classes array, with a semicolon at the end. Just to recap, we are creating a function which is going to check if the Theme Location is equal to the Footer. If it is, we're going to push to the classes array a string of List-Group-Item and this will apply to each item in our Footer Menu. Just after this, we'll then go to run our familiar add filter. This first argument is the filter name. The filter name we're going to be using is Nav Menu, CSS class. Then after this we add a callback which is named of our custom function, which is add footer menu class. Add this in, semicolon at the end. Then we're going to add two more arguments. The first one is a value of ten, and then the value of three. The ten is the priority which the function is run. Any lower numbers are higher priority. I will leave this as the default of ten. The number three is the number of arguments the function will accept, which changes from the default value of one since we now passing in three arguments. Let's save this and now go over to our Theme. Refresh. We can test this is working by removing the menu classes from our free links. Lets remove this one from the Contact Us, the Privacy Policy, save this and reload and we'll see our classes are still applying to the Footer Menu, leaving us with a more permanent solution for this Menu. Next we're going to move on to advanced custom fields, which will really allow our theme to be fully customizable by the user. 49. Advanced custom fields: As a theme developer, when creating our theme, just like we have done, we have full control over everything we see in front of us. Since we created it, we can control the text, any images, the layout, and all of the content. This is great news for us, but what about if you're creating a theme for somebody else to use, especially somebody not technical? As a theme's end-user, you would want to be able to change any of the text on the screen, the images, the titles, and so on, to suit the business or project you're working on. You would also want to do this from the WordPress Dashboard, rather than having to change any code. This is where Advanced Custom Fields comes into play, and you can find this at advancedcustomfields.com. Check out this website if you want to find out more information, but we'll find out exactly what this is and how to use it as we implement this in to our theme. It's basically a WordPress Plugin, which will give our users the full control over the content from the WordPress Dashboard, without needing to touch any of the themes code. This plugin links a path of our theme, such as a block of text with a new field in the dashboard so the user can alter this as they need to. We are not just restricted to text fields either. We have a large choice of fields, such as Images, Tabs, on Datepickers. Let's go ahead and install this so we can see it in action. If we go over to the Dashboard, we could find this in the plugins and then add new link. I'm going to use search for Advanced Custom Fields, and this is the link we need here by Elliot Condon. I want to click install now. Also as with any of a WordPress plugin, do check that this plugin is compatible with your version before installing. We can then activate this plugin and then we get a new custom fields option on the left, which I'm going to click on. The first thing to do is to set a name for the field group by adding new. This is a way to group together the fields in our project. The first thing we are prompted is to create a new field group. This, as it sounds, is a group of related fields. How you organize these fields is completely up to you. You can have a group for each page on your theme, or a group for a particular feature or section. This group is not just for organization, no, we can also set certain rules for this group for when it should be available on the edit screen. I'm now going to create a group called the front page, and then we can add fields to our front page, which we want to control. We'll add this in a minute, but for now I'm going to go down to the location rules and only show this edit screen, if the page type is equal to the front page. This means all of the edit boxes which we're going to create will only be visible when editing the front page and not when editing the blog, for example. If things don't fully make sense yet, they will become more clear as we add some of the fields. If we go to our front page of our site, from the top, the user can already change the site title and also the menu from the dashboard. This background image will also come back in a later video when we deal with enabling custom headers. Let's begin by allowing the user to change the header text, which is this text just here by adding a field. I'm going to call this the header text. We then need a field name which we'll add into our code. We may have multiple header text areas on different pages. I'm going to be changing this to front page. The field type, this is multi-line, so this needs to be text area. We can add some instructions to the theme's user to let them know where these texts will be appearing on the theme, so I'm going to add a message, so the text positioned over the header image on the front page. This is required. The default value, I'm going to set this to be the same as the text. We already have, paste this in. If the user doesn't change this field, this is what we will see. Next up, I'm going to add some formatting, so that we can automatically add a break tag after each line, and then publish this field. The next thing to do is to add in our theme exactly where we want this text to appear. Now let's add this into our theme. The feature texts is output in the functions.php inside the front page section. Rather than echoing out this text which we do here, we can use the advanced custom fields function which is provided, called the fields. Then as a string, we can pass in the name of the field which we just created. We just created the header text from page, so we can add this into place. This now means that any text which is added in the edit screen will display in this location. Save this file, make sure this is published. If we go to our site and then edit the homepage, we now have a new option down at the bottom. We now have our front page group, which only consists of the header text, and then we have a text box which we can edit. Let's just make a small change. Click on updates, then view the page. This is changed on the homepage. Then just click on the blog and check this is okay. We see this doesn't affect the blog page. Let's go back to the edit screen and reinstate this. We can do the same with some more fields, which we want to make editable. Down in the welcome section, if we visit our site, we have the section title of "Welcome to Tranquil Spa." We have images and our three sections. Let's begin with this site title. To do this, we can add a new field. The field label, let's call this the welcome section title. We can leave this field name as it is. This is text. The instructions is going to be, the title for the welcome section on the front page. This is also a required field. We can add our placeholder text, we can keep this the same as it is, so the default value, you place all the texts which will appear on the edit screen in the form input. That's all we need to do, we update this. We can then add this field name of, welcome section title into the field function of our front page, so go over to our front-page.php. Rather than our level three heading of, "Welcome to tranquil spa" we need to generate the php function, which is the underscore field, passing in as a string, our field name. Next, the image which sits just below the title, which is our divider image, this one here. Back to advanced custom fields, let's add our third field. I'm going to call it the, section title image. The field name is fine. We also have a field type of image. Instructions, this is simply, the image which separates the section title from the content. This is also required field. The format is going to be an image URL. We can also set the preview size if we want. I'm going to set this to be a thumbnail size of 150. You can also fine tune the maximum and minimum sizes, but this is fine for now so I'm going to click on update, then back to our front page template. This is added just below the title, so in the image source, let's delete the path to our current image. Then we can replace this with some php. This time the field is going to contain a string value of section titled image. Next up we can move on to our first section, which is the hair and makeup, beginning with the image, let's add a new field. Let's call this the, welcome section 1 and then the image. The field name is fine. Just like before the content type means the image. Instructions, this is the image to display in section 1 of the welcome section. This is a required field. Again, we're going to have an image URL. Preview size I'm going to set of 150. Let's update. I know what to do now if we go back to our front page, let's go to our first section. Our first image inside the col-sm-3 section, let's remove our image source that we already have. Then I'm going to copy the field from just above, add this into the source, and the image is called the, welcome section 1 image. Make sure this matches up with the field which we set, then the same with the hair and makeup text. The field label, I want to keep this consistent, welcome section 1 text." This is a text field with the instructions of, the text to display in section 1 of the welcome section. Again, this is a required field, and we can update this and add this image to our front page, just below our image that we added in before we can replace our text of hair & makeup, with the file name of, welcome section 1 text. Save this and now before we go any further, let's check this is working okay, if we go to the edit page. We see we've lost our text and images. We can add these back in in the dashboard. Now how some more fields to edit. We have the welcome section title. We can upload our divider image, so let's go over to our files inside the local sites. I'm going to add both of our divider images into the media library. Select the purple one, the section 1 image, which is the brushes, again we need to drag this over. This is a makeup.jpg, drag it into the media library and select and then the text, which is going to be, hair & make up. You can also add this as a default 2. Update our page and let's visit this. Now everything is reinstated back to how it was. But this time the end user has full control over how it looks. I'm going to leave this front page as it is for now, since the rest is just a case of repetition, and it would make for some really long, boring videos. But the main thing is you understand now how this works. Feel free to continue with the rest of the page or any other pages on the site. Next, we'll continue by making our theme more customizable by enabling custom headers. 50. Custom headers: Sticking with the theme of allowing the end user to make customizations, without needing to dive into our Bootstrap code. Custom headers is also something we can set up to help this. You can find this page by searching for WordPress custom headers. Custom headers is an image when an ad at the top of the header section of our theme, basically where we already have our lake image, which is this background here. Well, this time the user can select their own image from the dashboard. Doing this is pretty straight forward. We enable this feature by using the add theme support function, which we used earlier for the title tag. Passing in some arguments. These arguments are going to be an array, just like you see on here. He will have arguments such as the width, the height, the default image, location, the default color, and also if this is to be a flexible image. We can add this over in the functions.php. Let's head over to that now, and then down at the bottom of our file. Just after this nav menu filter, we're going to add in an array of arguments which we can pass in. Let's create an array, with the variable name of args service be a PHP array. Then inside here as a string, we're going to begin by setting the width. Then just like we looked at earlier with the arrow, we can then set this to a value of 2,600 pixels separated by comma. The next one I'm going to add is for the height. This is setup in exactly the same way with value of 650. Next we are going to add a default image. If no over is selected, this needs to be a file path. To get our directory, we can use get template directory URI, which we used early on for our style sheets, and I was gripped this is a function. We can then add onto the end of this the rest of the file path, which is the images folder. Then we can grab the.jpeg, which is the default image you have at the minute. The final one I'm going to add is for the uploads. Set to true will allow the end user to upload your own images in the dashboard semicolon at the end here. Then we need to register our custom headers functionality with the themes power function. Just like when we use this function earlier, this takes in a string which will pass in the name of the functionality we want to enable. In our case it's custom header. Then as a second argument, we can also pass in the arguments array, which we just created above. Semicolon at the end gives a file save. Then next we can set where we want this header image to display which is currently inside of our header.php file. Let's open up this file, and then we need to replace the image source for the Lake. Let's take a look for this, which is the image source just here. We can remove this, and then inside here we can replace the image source with a WordPress function called header image, with the underscore in between the brackets and then the semicolon. We're now ready to test this out over in the dashboard. Let's head over to there and then if we go into the customizer will appearance and then customize. We should now have a option called header image. Click on Next and we now see the default image which we set, notices the recommended size, which we also set in the functions. This is now output in the customizer. Here we can go ahead and change the header image, even uploading new ones. Since we said the upload to be true, let's just quickly grab a different image and you want to raise is fine. You know it's not the right size, will just select this one for now. Therefore, we can see the new image in the background. Before we move on though, I want to show you one more thing. This is how we can set up an array of default headers. Signing this app will allow the user inside this customizer to just click on any of the images which we provide them, and change it at the click of a button. We do this, just after our custom header which will be setup. Back over to our functions. Just below add theme support. We can use a function called register default headers. This also passes in an array. This array is going to contain all the different values of the images which you want to make available in the customizer. The first one is going to be like one. This is the name which will give the image. This will be an array of values where we'll pass in the URL, which is the location of the image, a thumbnail we want to display, and also a description. First of all, let's pass in the URL. This is a similar setup to just above. We can add the get template directory URI, which is going to point to our image. This is in the Images folder, and this is Lake.jpeg. This is our first header image which we could using. This is the original like image, and they also have provided a second image to select two. Before we do this, let's also set the thumbnail URL. You can create a thumbnail version is if you like. Both use the same location and passes in. The third one is going to be for the description. We'll wrap this inside of a function so it's translatable later on. Lake one is fine. I've also provided a Lake two image. So I'm going to copy this first array item. Basis just below. Now needs to do is change, each one needs to be Lake two, and also the description. This Lake two is also in the Images folder, and this is this image is here. Now save the functions file. Let's add a semicolon at the very end over to the customizer, and let's reload this into the header image. Now we'll see our two suggested images down at the bottom. The user can now click on any of these images. All upload a new one of their choosing. That's it now for our custom headers, and I will see you in the next video. 51. The post class: This video is going to look at using the post class function, which we can find on Google by searching for the WordPress post class. This is the reference we need from the codex.wordpress.org, let's select this. These post class function is typically added to the WordPress loop when displaying blog posts, but not completely limited to this use. It gives us the option to set styling for a specific post or a certain group of posts. If we scroll down to the usage section, we can set up our blog posts to have additional classes based on various things such as the post type, a category, all the tags. For example, we can set this up for our blog posts with the tag of news, then each one of these posts will get a CSS class of tag-news. We can then add style into this class as usual in our CSS file. If we had OSU or index.php file, inside of our loop where we have the post section, we have area surrounding div for each blog post. This is where we're going to add the post class function. We do this in the opening tag inside of a PHP tag and this function is going to be called the post class. Notice we currently have no over classes added to this div. If we save this file however and then go over to the developer tools, so click on the blog, right-click and then inspect. That's like the first blog post. Just inside of our container, which is called sm-8, we have eight surrounding div for all posts. Inside of our code, we don't have any classes inside the here and now this post classes, I did all this extra information such as the blog post number of 18, the type of post, the published status and also that the category is uncategorized. Let's scroll down and select a different one which is blog post five. We can see this now has the class of category news and also the tag of offers and each one of our blog post is different depending on the post ID and also any tags and categories we've included. Inside of the brackets for the post class, we can also add in a custom class with any name of our choosing. We just add custom class inside here, say this. Now, if we go back over to the developer tools, our custom class is now added. This can also be used to pass in an array of values so we can include multiple classes too. Having all of these custom classes, now allows us to go over to the style.css and add any custom styling we want to add for example, if we had a tag of offers, if it's like tag offers and add some custom CSS which is only going to apply to this group. For example, to see this in action, we could add a hover states and that's setup a transform to scale is to a value of 1.01 and also change the background to RGB value 241, the green is 245 and then 241. Now, back over to the browser and reload, we can see this one has a tag of offers and if now hover over this, we are different background color and also the transform. Let's go down on blog posts four doesn't have this class nor does three or two or one. This is only applying to our one specific blog post. We have fine control over the CSS. This is targeting a specific post or setup posts using the post class function, which gives us fine control over the styling of our blog posts. 52. Setting up Contact Form 7: Early in the course, we created a Contact Us page and added this HTML form at the bottom. Currently, this form does not do anything since we've not set it up yet to work with WordPress. To make this work, I want to take advantage of a really popular WordPress plugin called Contact Form 7. If we go over to the Dashboard and then go down to Plugins and Add New, this will most likely be in the Popular section, if not, we can do a search for Contact Form 7 over here. This is the one we need here. Click on Install Now, then click on Activate. Just like when we added the advanced customer fields, this will also give us a option in the Dashboard. We can click on Contact and this gives us a sample contact form which we can edit. Hover over the name and click on Edit, and then we are taken to the form settings. This sample form is not too far away from what we need by default. If we explore the syntax, we have a label at the top. We also have if the input is required inside of the brackets and then below this we have a input inside of the square brackets. If we want to add additional fields, we can easily modify this form down at the bottom. Let's say if we wanted a number field, let's add the same by simply clicking on the number box just here. This one gives us the options such as if the field is required, the field name, any classes and IDs you want to add, basically the usual attributes to have in a regular HTML input. We don't need this in our project, so I'm just going to click on the X rather than inserting this. Our form inside of our Contact Us page has your name, e-mail and message. We already have your name and your e-mail and also the message at the bottom, so we can remove the subjects, and then we can save this form. With this now setup, we need to add it to our theme exactly where we want it to display in the page contactus.php file. Open the sidebar and let's head over to this file, page-contact-us, which was our custom form. The first step is to comment out our original form. Let's look for the form elements and select everything up to the opening form tag. I'm going to comment this out and then in place we can add in a custom shellcode. I'm going to do this by opening up the PHP tags. Those ease off. Within an echo, a function called do_short code. Inside the brackets, we need to paste in a short code which is provided by Contact Form 7. We can grab this all from the Dashboard. Inside of our contact form, we can copy this and then paste this in between the quotations and now we are good to go. Now we've placed in this Contact Form 7 version in the place of our original HTML form. Save this and if you head over to our Contact Us page, inside the browser, give that a reload. I will now see our form is on the page. Our form is now displaying, however, it is missing our bootstrap styling. We will fix this in the next video, where we discover how to add our custom markup and styling it to this form. 53. Styling our contact form: We have our form now showing in our Contact Us page, but we still need to re-introduce our Bootstrap CSS. We can add this directly into contact form seven, and we'll do this in just a moment. First though, we need to deal with these slightly trickier surrounding form elements over in the page Contact Us.PHP. Inside here with our original form, had a class all text left. If we now go and take a look at our contact form seven version inside of the developer tools. Right-click and inspect. Use a selector to grab our form. This is the form just here. Let's take a look at this. This form has a auto-generated form wrapper, so we need to add our class to this. As you can see, we just have a auto-generated class and no reference to our text left. In this situation, we need to add the class to our short code directly using the attribute called HTML_class. Inside of our square brackets for the short code HTML_class. I'm going to add this to a string which is our class name of text-left. Now let's save this and go back over to the browser and reload. You can see straight away that the form is over on the left, and inside of our class section, we have the class of text left. If we also needed to add a custom ID, we could do this with a HTML_ID attributes. Again add this to the short code. The rest of the styling is added directly into our form over in the dashboard. Beginning with our form group wrapper, which we had over in HTML, which is this surrounding div, is called round each one of our form inputs. We need to add this in three times. Let's make some space and add our div, the opening tag with the class of form-group. I'm just going to copy this line here. Close the div off, then we can add our second surrounding form group around the email and then our third one is for the message. Goes off just below and that's now all free wrapped. Well, the need to add our attributes back in it to these inputs using the colon syntax, just like this. Inside of the square brackets, we can add a class to our name. This is going to be a class of form control. These are the classes again inside of our inputs to the class of form control, the id of name, and we could also add a placeholder inside here too. We don't need any separating commas, so we can just go ahead and double id, which is going to be the name. The next one is the placeholder. This is going to be a string. In fact, we don't need a colon for this one. It says enter your name and these three dots afterwards. Next up we have the email. You can do exactly the same inside the square brackets. This has the same class of form control, the id of email, and also the placeholder as a string, so enter your email. Finally, the text area, this also has a class of form control. The id this time is message. We can also add the number of rows, which is going to be three. Next we have the submit button, and this has two classes in our code. If we look at the bottom, this has the class of btn and btn-primary with the submit button using contact form seven now. We need to add in the class attribute twice for this, since it is not like the wide-spaces in-between. Just have to submit. We can add our first class, which is btn. Second class of btn-primary and then the text of send message, dot-dot-dot. Now if we hit save. The save button in the corner. Head over to our project and refresh this. The form styling is getting pretty close, but it's still not the full width which we had before. This is because of a difference between our HTML underway is output by contact form seven. We had our labels followed by the inputs. Both elements alongside each other in the code. For this plugin we will nest the inputs inside of the label. All we need to do to fix this, is to make the label a 100 percent wide inside of our styles.css. We can do this outside of the media query. We can remove this tag offer section. We can add the customer contact form seven class, which is wpcf7-form inside the label. Then some simple CSS to set this to a width of a 100 percent. It gives us a save. There we go, that's our contact. Now back to being full width. Just before we wrap this video up, let's go over to our contact form inside the dashboard. Then we have some more tabs just next to our form. Here we can select the email address where we want our messages to go to. By default, this is the one which is provided with our site when we set this up. We can also pass in lots of different information, such as the subjects and also how the message is laid out. Inside the message section. We also have lots of messages we can add it. Such as the pop-up when the message was sent successfully, if it has failed, and also if any validation errors occur too. Also is an additional settings section here. If you want to go into any more advanced features, if the default functionality doesn't cover anything you need. This is it now for the contact form styling. I'll see you in the next video where we'll add Google Forms. 54. Including Google fonts: When it comes to adding custom fonts to our WordPress themes, we do have various ways we can approach this. We could add code in links to the font provider in the header section. Another option is to add these in the functions using WP enqueue style, just like we did earlier with different style sheets. These all work perfectly fine, but this is a permanent solution which will require the end user to have technical knowledge to change the font. Another option is to use a plugin which will allow the end user to control the font from the dashboard. This is what we are going to be adding in now. If I go to a dashboard section, then going on to Plugins and Add New. I'm going to use a plugin called Easy Google Fonts. Let's give this a search. This is the one we need, we can install now, and then activate. Using Easy Google Fonts will allow us to go into the customizer and then select a Google Font, which we can also see in the live preview. We know how to go to the customizer. This is in appearance, and then customize. This will now give us a typography option which we can select, and then click on default. This plugin will give us finer control over how our text is displayed, even allowing it different fonts and font-weights to be used for paragraphs or different headings. I'm going to click on the first which is paragraphs, and select the font family. Currently, this is set at the theme defaults. We can select any different web font we want from here. Let's select the Fanwood text. Now, we can see the instant change in the browser. I want to do a search for the Merriweather Font we currently have. Select this. This font will also be used for all of the rest of the text on the site too. But we can't go into each one of these and select them if you would like to use a different font. For example, let's go for H three. Let's change this. Let's go for Georgia. As we can see our level three headings are changing and the rest is all staying the same. We want to also change this to be Merriweather, just so it falls in line with the rest of the site. We also have tabs for margin, padding, border, border radius and also the display type too, which will allow the end user to have more control over spacing, colors, and sizing giving them a lot of flexibility. I'm just going to hit "Publish" and not change anything else since we already have created the look we want in the bootstrap templates. All these options are useful for the end user, and this would all of our videos in this section have really allowed the end user to add their own customizations to this theme. Next up we're going to move on to the next section where we can take a look at how we can prepare our code for translation. 55. Preparing our code for translation: When building WordPress themes, it is really important we consider that not everybody who used our themes may speak the same language as us. Now most of us don't have the ability to fully translate our themes word for word into many other languages. However, as a theme developer, we don't need to. What we can do though is develop our theme in a way so we can easily be translated by others, or in other words, make our theme translation ready, and this process is called internationalization. It is also another term you may also hear called localization. This is the process of somebody actually translating the words in our theme, and I we'll take a look at this in the next video. To actually make our theme translation ready, it's not really as difficult as it may sound. WordPress provides us with some localization functions which we use to wrap any text we want to be available for translation, and we've used these multiple times in our theme already. Just before we begin now in our theme, we no longer need the HTML files from earlier when we use Bootstrap. So we can remove the blogs of HTML. Delete this file from our project, and the same for the contact. Since have already removed the contents of these into our PHP files, I'm going to go through some various methods beginning with the most simple, which is a basic tech string, and there are plenty of these in the front-page.php. Let's open this up and if we look for some texts such as spa facilities here, we will have a simple piece of text and all we need to do to make this translatable is to wrap it inside of a function like this. Let's first cut this out, create our PHP wrapper, use the double underscores, and then we can paste in our text as a string. The second argument is the text domain. This is tranquilwp, and this text domain must match the text domain we added in the style.css up at the top here. As in this text domain will effectively grouped together all of our translations for our theme, and distinguish them from translatable text from other themes or plug-ins. I'm not going to go through each string on this page since the process is exactly the same, and this is something you can go ahead and do yourself if you would like as more practice. Instead though, I'm going to show you how to handle some other types of string output in, such as when we use the echo. Let's go over to the functions, and inside here we've used the underscore e function, let's go down a castaway search for underscore e. I've used them here inside of our feature text function. This is good because this WordPress function is already translatable by default, all we need to do is add the text domain as the second argument. So add in tranquilwp, and of course we can do the same for all of the underscore e functions in our theme, or you can go on better with this too by escaping our strings at the same time. WordPress also provides us with some functions which both escapable strings, all would make them translation ready. Escape in a string is the process of removing any amount of characters so it's safe to output as HTML, such as the esc_html_e function, which we add just like this. So before our e, we can add escape, HTML, underscore e, and this can also be good practice to add to all of the strings too. Below this we also have the printf function. Both the printf and sprintf functions, will display a string of text with a variable inside, just as we've used here with the symbol. This function is also translatable, so all we need to do for WordPress to recognize this is to again add our second arguments of our texts domain of tranquilwp. Next up we have the comment stop PHP templates. So let's go over to here. The comments.php file also has some examples of translatable functions. This is also using printf, just as we used before, but also nested inside. If we take a look for this, is the underscore x function and underscore nx. Although these are a little more complex to understand, translation could be easier. Both of these functions are translation ready by default, and both take in the same text domain as the last parameters. So first of all, the underscore x just above the closing bracket, we can add a comma, then also pass in our text domain of tranquilwp. We'll also do the same below for our underscore nx function, just after the comments title, the last parameter of tranquilwp. The last thing I want to show you is how to deal with WordPress functions, which will take in a string as a parameter. We have an example of this over in the index.php. Head over to there, and then if we look for the tags which is inside of the loop, in the tagged function, we've added the string we want to use as an optional parameter, and we can also make these texts translatable. All we need to do is wrap the text inside of a translatable function, so let's cut out all of the contents, and then just like we looked at before, we can use the double underscores, open up the brackets, and then paste in the text inside. Then we add in our final arguments, which is our text domain of tranquilwp, and this is all we need to do to wrap our text from a function argument to make it translation ready. This is how we can prepare our theme for translation, and it's not too difficult to accomplish. If you would like to carry on with the rest of the theme, go ahead and do things in the same way as we've just seen, but next up we will look at the process of actually translating this text into other languages. 56. Translating our theme: Now, we've set up our strings in WordPress to be translatable. We now need some software to scan our code, extract, detect from a translatable, and then it lists these words. We can actually translate to our desired language. This process is often referred to as localization. To allow us to do this, I'm going to use a piece of software called Poedit, which is really popular and one I've used for many years. If you go to Google and search for Poedits, or you can go directly to Poedit.net. This is available for Mac, Windows, and Linux. Click on the Free Download for your operating system. While it is downloading, remove any additional HTML files which you have in the sidebar, such as the contact on the blog, or HTML, since these HTML files are no longer needed in our project, once this is done, the next step is to create a new folder inside of the roots of the projects, and just call this folder languages. This is going to be the location where we're going to store our translated files. The next step is to go over to the functions.php, and we can tell WordPress where these languages folder is located. We do this with a function called load theme textdomain. Inside here we pass in two arguments. The third one is tranquil wp as our text domain. The second one is the location of this languages folder. We already know how to point to the roots of our directory, we can do this with a function called get template directory. After this, we can then add onto the end with the dots, the string of /languages, semicolon at the end. Make sure that this file is saved and then we go back over to Poedit. Let's open up this as the ZIP, extract the contents, and then we can open up Poedits by double-clicking on this app. Once this is all installed, we then taken it to this welcome screen, and you may think we just click on the Translate WordPress theme plug-in link. But unfortunately, this is a paid option, but don't worry, we can still do things manually using this free version. If you go to the options at the top of the screen and click on the "File", and then New, we then asked for the language we want to translate to. If you are not ready or unable to translate, don't worry, you can still select any language here for practice purposes. I want to use Spanish and then click "OK". The next step is to save this file. Click on "File" and then "Save", will then into save this in the location of our languages folder, mine is stored in the roots of my system as a user, then in local sites. Tranquilspa into the app section, and we need to go to wp content, themes, gravel theme folder, and then the languages folder, just here, click on "Save". If you're using MAMP, you will need to go into the HT docs, and then go through the wp content themes and so on. If you unsure where your theme is located, you can go to local by flywheel and check out the file path at the top here. If we go back over to our text editor and then open sidebar, our languages folder we created now has two files. The name of ES, since this is a Spanish translation, and then we have a.mo file, which stands for machine object, and then a.po file, which stands for portable object. These direct translation files which contain both the original text and also the translations, the only difference being the file format.po is a text file, and.mo is a binary file for computers. Don't worry about these too much since WordPress knows how to use both of them. Then back over to Poedit, back to the start screen. We can now extract the text strings from our theme. I would do this by clicking on "Extract from Sources", inside you will need to add the path to our theme folder. Click on this, Add Folders. I'm going to need to go to our location where our theme is stored, mine is in local sites, find this bar up, public, wp content, themes, tranquil wp, open this. Then we need to go over to the sources keywords tab, and here we need to tell Poedit how to find the text strings in our theme. The way it's going to find the translation text in our theme, it just scan through all of the code, and then it looks for the translation functions, which we are going to list here. The full list of these translation functions. We going to need developer.wordpress.org, and then take a look for the internationalization section. In the sidebar, we'll have a list of localization functions, which you can click on. We're basically going to be adding in all of these functions, which will tell Poedit to scan for all of this code and then find the strings inside. Let's go back over Poedits and we can go ahead and list all of these. The first one is the double underscores, we don't need to add the brackets. The next one is _e, _x, _ex, and _n, _nx, _n, _n_noop. After this, we have _nx_noop, translate_nooped_plural, escape html, esc_html. The next one is escape_html_e. Once this is done we then click "OK", to extract all of the translation ready functions from our WordPress theme. Give us a few moments to go through and pull in all the contents which it needs. Once this is done, we get back a list of all the translates, both strings which we set, we can click on any of these such as "Spa facilities", then we get a recommendation off on the right-hand side. These are just recommendations. Be sure to double check these before using in production, we can click on this. This end populates the translation section at the bottom. We can of course edit this ourselves and type in the translation directly, and all we need to do is go through each one of these and then translate. Once we're done with it, translates in all the words in our theme, we can then save this file, and this is then saved in its wild translation section, and it's available to load up into our theme. We can go through this multiple times too and save this for different languages. Once we are done with all these, we can save this file, and then we're left with our own theme translation. 57. Thank you: Congratulations for reaching the end of this course. I hope you've enjoyed learning all about WordPress theme development. By now you should have all the skills which you need, to build almost any type of website using WordPress. You've covered a lot of ground and gained a lot of skills along the way. Starting at the beginning, where we built a HTML and CSS version of our theme using Bootstrap 4. We learned about the grid system, rating responsive layouts, signing, utilities, and so much more. Once we had the theme exactly how we wanted it to look, we then set up WordPress and began the conversion to WordPress by breaking up our site into templates. We also looked how WordPress handles loading of style sheets and scripts. We created menus, used the WordPress loop, added a lot to our blog, the chars pagination, built the hooks, a dynamic sidebar, and conditional rendering. We added comments to our blog and all of the page templates, make this exactly how we wanted. Later, on in the course, we also looked at some of the more advanced features, such as custom fields, Bing translation, widgets, and contact forms, along with taken steps to allow the end user to customize many parts of our theme without needing to go. Leaving you with the skills you need to build almost any type of WordPress website. Whether that's for a personal site, a friend or family, a business, or a paying client, you now have the skills to offer a truly custom service. So thank you so much for taking this course and hopefully see you again in the future in the class. 58. Follow me on Skillshare: A huge congratulations from me for reaching the end of this class. I hope you really enjoyed it and gain some knowledge from it. If you've enjoyed this class, make sure you check out the rest of my classes here on Skillshare, and also follow me for any updates, and also to be informed of any new classes as they become available. Thank you once again, good luck, and hopefully I'll see you again in a future class.