Bootstrap to WordPress: Build Custom Responsive themes!

1. Introduction: Welcome to this course on building a custom responsive WordPress theme using the Bootstrap free framework. My name is Chris, and I'll be guiding you through the process step by step. We will get started by building a great look and theme template using Bootstrap, one of the most popular front-end frameworks in the world. Once this is built, I will guide you through the process of converting this to a fully functional, great looking custom WordPress theme. In this course, you will learn things such as how to create websites using Bootstrap, adding custom navigation menus, the WordPress loop, how WordPress templates work. You will learn about widgets, custom fields, header images, how to add language translation spots to your theme, and much more. So this would be the great looking website we're going to be building throughout this course. This is the homepage. It's a Spa based WordPress theme. I'm going to guide you through every step of the process. So we're not just going to be building the homepage. We're going to actually be building the full site, including various blog pages, Contact, and About Us pages. As we get to the WordPress section, later on in the course, areas such as the Latest Offers section, we'll be adding custom fields to, to make sure that the website is fully customizable. Scrolling further down, we've got a Shop Online section. Then the Photo section at the bottom with various links, the About Us, the Contact Us page. If you scroll back to the top of the page, we'll also have a fully functional block. We have a working sidebar, which includes a search box, and also ways to filter down the posts by the tags, the categories, or the months of the year, and of course this will fully customizable by the site administrator. We'll also make sure that users of your website can leave comments on the posts. So if you go into the individual posts, you will now get the full version. Links to previous annexed posts and the Comments section below. Also we'll have a Latest News section, which is pretty much based on the blog section. But we apply WordPress filters to filter down the blog posts by posts start with the category of news, and we'll show you how to do that. There'll be no unnecessary content just to fill up the course, just straight to the point videos. Each one teaching you a new skill to use for your own projects or for paying clients, and you will also pick up some PHP along the way. What are you waiting for? Join me now in this course and I look forward to having you on board. 2. Bootstrap set up: Welcome to the Bootstrap section to this course. In this section, we'll be building our website using the Bootstrap framework which later on in the course, we'll use to convert to a fully responsive custom WordPress theme. To get started, head over to getbootstrap.com and hit the Download Bootstrap button. You're then taken to the download section. There's three different versions of Bootstrap you can download. I'm just going to go for the standard version on the left. Hit the Download button. Once that's downloaded, if we go to the downloads and then unzip that. Because our theme is called tranquil spa. This is the Bootstrap template. I'm going to call this tranquil-wp. Then I want to save this onto the desktop. There we go. You should have already downloaded the images folder, which is included in this video. If you haven't, go ahead and do that now, and then drop that into Bootstrap folder. If we open up the Bootstrap folder and take a look at what's included. First of all, we've got a CSS folder which includes all the Bootstrap CSS, both the standard version and minified files. There's also the fonts folder, which includes all the glyph icons. As our own images folder, which we've just put in, there's also a JavaScript folder which includes the Bootstrap JavaScript files. To get started, if we open up the text editor and then I'm going to drag in our project folder. There we go. So the Bootstrap folder we just downloaded includes pretty much everything we need to get started. The only thing I need to add for now is an index page, so I'm going to press Command and N, or Control+N, to create a new page. I'm going to save this as index.html, and place that inside the tranquil-wp folder. Once we've got our index page, we need to now head back over to getbootstrap.com. Still within the Getting Started section, if we just scroll down a little bit further, until we find the basic template. We're going to use this as a starter template. It includes all the basic HTML structure and also the links to the Bootstrap, CSS, and JavaScript. Just hit the copy button, then back into the index page, we can paste that in. For now, I'm just going to change the title of the webpage just to tranquil spa. Then let's hit the live preview button and then see how it's looking in the browser. There we go. It's a pretty basic template. We've just got the Hello, world! heading. But it does say it was a lot of time we'd create an index page. We've mentioned that Bootstrap comes with its own CSS files, which is great for a starting point. But we also want to make our template custom, so we're also going to add a new CSS file. I'm going to create a new page and save that as custom.css and I'll place this in the CSS folder. Now let's link this in the index page. As you can see there's already, the link to the Bootstrap minified version, so if we just copy this and the comment, we can paste this just below and we'll call this the custom CSS, and also change the file name to custom CSS. There's just one or two other things we need to link into our webpage to get started. The next one is the custom fonts. If we head over to Google, and search for fonts. That'll take us to google.com/fonts. Once we're in there, we can search on the top-left. The font I'm going to use for this webpage is called Merriweather. You can choose a different font if you have any preferences, but I'm going to stick with this for now and I'm going to select the standard Merriweather. So what we need to do, we need to look at the boxes on the right-hand side and click on the second box in, which is the quick use tab. Google provides us with different font weights we can use, and every time we select a font weight to download, it shows us the impact on the page load times. So the fonts we're going to use in this project is the 300 weight, the 400, which is the normal size, and also the 700 for the bold text. It's really easy to include into the project. We can just copy the link for the head section and paste it in below our CSS. I'm also going to put a comment in there, just for the custom fonts. We'll save that and head back over to Google fonts, and then the last thing we need to do is integrate our fonts into the CSS. So copy the font family, and then head over to our custom CSS file. The font family will go into the body section, and I'm just going to start by adding a comment just for the Global section. This section will keep all the styles which we are going to be using throughout the site, and we'll start with the body section. Paste in the font family and we will add the font weight, we'll add the standard font weight of 300, and also add the font size to be 16 pixels as standard. That's how we add the fonts to the website. Then the very last thing we need to do for the setup is to go back over to Google and search for Font Awesome, and then go to the GitHub page for Font Awesome. This is going to be the I concept we're going to be using for our website. If you want to check out the icons which are available, just select the icons tab at the top and you can take a look at all the different ones which are available. To download this, we need to go to, Get started. There's a couple of easy ways to include these in our project. We're going to go with the CDN route, which simply involves copying the link and then pasting that into our head section. This links our website to the Font Awesome icons, which are hosted at this address. Lastly, I'm going to copy the comment, paste that in, and name this, Font Awesome, and then save that. There we go. So that's our Bootstrap section, all setup. If you join me in the next video, we'll continue with the project by creating the head section. 3. Header section- HTML: Welcome back. Now, we've got our Bootstrap project all set up. Let's take a look at the final project and take a look at what we are going to be building in this section. So next we're going to be adding the HTML for the header section. The header section contains a navigation bar across the top, which is going to have the logo in the top left. Also on the right-hand side, we're going to have the menu links. We're going to add a large background image and also the featured text in the center, which is going to be both horizontally and vertically aligned. The text and image is going to be static for now. But once we get onto the WordPress section later on in the course, the user will be able to change the background and also the text. So to get started with the header section, let's head over to our text editor and let's get rid of the sidebar for now. So if we scroll down, we can delete the hello world h1 heading, and then let start with a comment for the header section. Okay, so the header section will be between the header tags. We're going to get started with the navigation bar at the top of the page. So that will be in nav tags and it's going to have some Bootstrap classes. The first one will be navbar and then navbar-default. So we'll be using a lot these bootstrap classes as we go through the project. If you are curious to know exactly what each one of these is doing, we can go over to the Bootstrap CSS in the CSS folder. If we'll look for the bootstrap.css, for example, if we look for navbar-default. So heading to Bootstrap CSS, and if you use your text editor's find function and then type in the class you want to look for. So I'm going to look for a navbar-default. This will then take you to the section of the CSS which applies. So we can see that by adding a navbar-default, it includes various borders and background colors. So we can use this if you want to know exactly what's going on in the CSS behind the scenes. But it's also worth bearing in mind that any of these bootstrap classes we have included, we can also add to or override in our own custom CSS file. So next we're going to add a div with the class of container-fluid. Again, container-fluid is a bootstrap class. You can either use container-fluid, which provides a fluid full-width div or you can use the container class by itself, which includes a div with a fixed width. Then within the container fluid, we're going to create a new div with a class of navbar-header. Within this div, this is going to be the section which includes the information for screen readers. Also, we take a look at the finished project. You can see if we shrink the browser down, it's a fully responsive website. So once we get below a certain size, the navigation menu turns into a drop-down menu. So the header is also going to contain the information for the drop-down button. So let's start with that button now. The button is going to have a type of button. We'll add some Bootstrap classes. The first one is navbar-toggle, and then collapsed. It's going to be collapsed by default, so we can add the data-toggle to be equal to collapse and the data-target is equal to.navbar-collapse. So what the data-target is doing, this is linked in the button to a div with a class all navbar-collapse. We'll create that after the button. Nested inside the button, we're going to add the three icon bars, which are on the drop-down button. So the first one, these will all be between span tags. The first span tag will just be a class for screen readers. This will have a class of sr-only and the text for the screen reader will be toggle navigation. Then next, we'll add another span with a class of icon-bar. So this is the first of the three icon bars. So it's going to be exactly the same for two more. So we can just Copy and Paste or Duplicate that and just change the spelling there. There we go. Okay, so let's check that on the preview. There we go. So on the smaller screen, we've got the drop-down button appearing there. That should disappear once we get to a certain size. There we go. Next, we need to add the logo to the top left hand corner and also the three navigation links. So to start, the logo is going to go just below the button, but still within the navbar header div, and it's going to be a link. So we'll put the href of tags and this is going to link back to the index page, which is index.html. The bootstrap class is navbar-brand. Because our logo is simply text, we can just type this in there. So Tranquil Spa. That's the end of the navbar header section. So I'm just going to add some comments. So we'll call this the navbar-header and we'll end that there. So just below the navbar-header div, the next day we will have the three links of home, blog and latest news. So the container div will have the class of collapse. Then next, we'll add the navbar-collapse class, which we used for the data target. Then within this collapse section, we'll add our unordered list and add our bootstrap classes of nav navbar-nav, and also navbar-right, which pushes the navigation links to the right-hand side of the div, then free list items, which are also links. So the href, for the first link is for home, so this will link to the index.html, and the text was home. We need two more list items. The second one is for the blog.html and change the name. The third link is for the latest new section. Now I'm just going to leave the link empty for this one, we'll be creating our template for the blog section using bootstrap. But when it comes to the latest news section, this is going to be dynamically generated in WordPress. We're basically going to be using the blog page, but we're just going to use a filter, just to filter out the blog posts to be the latest news category. Then let's adds some comments. So let's first add a comment to the navbar-collapse closing div, and then the last one is for the container-fluid. I can close that up there. So let's check that out in the browser and see how that's looking. Great. So we've got the logo appearing. We've got the three links on the right-hand side. Shrinking the browser down, that drops to a drop-down button, which expands to show the three links. By the way, because this drop-down button is working, this also shows that our our Bootstrap JavaScript, which is included in the js folder, is all linked correctly and it's all working. Down at the very bottom of the page, you can see that the links are already included in the bootstrap template, both for jQuery and also the Bootstrap JavaScript. So we know that's all working correctly. Now, we've got our navigation bar complete. Next, we're going to start on the background image and also the text. We're going to call this the feature section. So we're going to put this just below the navigation. Let's Copy that header and then Paste this just below the closing and nav tag but still within the header. I'm going to call this the FEATURE SECTION. So because the feature section has a large background image which we want to stretch to the full width of the page, we're going to make use of the bootstrap container-fluid again. Then within the container fluid, we need to add another bootstrap class of row and also our own custom class, which is feature. So we can link to that in the CSS in the next video. Then add the path to the image. So image sauce. We've got Images folder within the project and then the large background image is called lakebg.jpeg and add some alt text in there. I'm just going to add lake backgrounds. So let's check if that's working okay. I head back into our project. So there we go, there is a large image pinned in the background. So let's next add the text which overlays the image. The text will be going in its own div, and we'll add a custom class of feature-text. Then inside this container, we'll add our text in the p tags. So the text was FULLY RESPONSIVE PREMIUM SPA THEME FOR WORDPRESS. Then I'm going to add some break tags after the word responsive and also after the word theme, just to split that up into different lines. So if we go back into the browser and see how that's looking, we won't have the text appearing over the image just yet because we need to add some CSS for that to work. But the text is appearing just below, so we don't need to worry about that just yet. We'll solve that in the next video. So we'll just finish this section off by adding some closing comments. First of all to the fluid-container and then to the div with the class of row, and then the feature text. So there we go. So that's the end of the HTML for the header section. If you join me in the next video, we'll continue with the header section by adding the CSS. I'm going also take a look at the bootstrap rows and grid system. 4. Header section- CSS: Welcome back. In the last video, we created the HTML for the header section. We included the top navigation bar with the menu links, the main background image, and also the feature text. In this video, we're going to make our website look more like the finished project by adding the CSS. We're going to change the link color and background for the navigation. We're also going to style the text and make sure that it's horizontally and vertically aligned to the background image. We'll also take a look at the Bootstrap grid system, and I'll show you how to add a column to our website to make it responsive. Let's get started in our Text Editor. We need to pull up the sidebar and go into our custom CSS. Just blow the body, still within the global section, the first thing I need to add is a max width for the images. We're going to set them to 100 percent, which stops images stretching too big. Let's create a comment for the navbar section. We're going to get started with the navbar section. The main navigation has the class of navbar. This is the part we'll be styling first, so dot and then navbar. We need to up the purple background color. The background is going to have a number of 97689c. Let's check if that's working okay. The background color has changed, but we need to get rid of the margin, which is at the very bottom, pushing the background image down. We simply do that by changing the margin bottom to be zero. The next thing we want to do is remove the default border. It's pretty hard to see the default border around the navigation bar. But we can remove that by just setting the border to be zero. Then now we need to change the text for the logo on the navigation. Bootstrap has a lot of classes and a lot of CSS, which is included as standard. It can be sometimes difficult to find exactly which class we need to amend. One of the easiest ways to do that is to go into the browser developer tools. In Chrome, you need to right-click and select Inspect Element. Then if you select the magnifying glass, and then just hover over the element we need to change, and click. Then we should get a list of the classes which is affecting this particular element. We can see the first element is the color for the navbar default navbar brand, and that's in the Bootstrap minified version. We can change that color. I'm just going to copy the class which affects that color. Then back into our custom CSS, let's paste this in, and change the color to be white. That changes the color of the logo. We need to also do the same for the navigation links, which is a home blog on latest news. Again do the same, select the magnifying glass, and choose one of the links. Again, we can override the standard default gray color by copying the Bootstrap class. Because we also want this to be white, we can add this in the same section. That changes those to white. Then on the smaller mobile view, we also want the free icon bars to be white too. Again, select the magnifying glass. If you can just select one of the icon bars, and make sure we can find the one which controls the background color. Copy the classes. Then let's put those into our CSS. Let's change the default background color, we change it to white. Refresh. Great. There we go. The icon bars are all white now. That's all the styling we need to add to the top navigation bar. Now we can move down to the featured area, and we can start working on position in the image on the text. Let's create a new comment for the feature section. We can add the text over the image. We need to use some relative and absolute positioning. We need to make the container relative. Completion the text within it. The container for the feature section had a class of feature, which is a custom class we added ourselves. Let's start by adding that, and setting the position to be relative. Because we want the background image to stretch, to be the same width as the browser, we need to override the maximum width of 100 percent by adding the feature image class. Instead of max width, we're just going to set the width, this time of 100 percent. This means that the image can stretch slightly larger, or slightly smaller than the original size of the image. Now we've got the container position relative. We now need to change the text to be absolute. We added another custom class, surrounded the text, which was a class of feature text. Next, let's start with that. First position is going to be set to absolute, because we're using absolute positioning. We're going to set both the top and the bottom position to be equal. They're both going to be zero. Now because that's positioned absolute, the text now appears over the image. We can start working with getting it horizontally and vertically aligned. We're going to start by vertically aligning the text now. First of all, I'm going to just type this out, and then I'll explain what this is doing afterwards. The feature text class, and then before. Set the content to be empty. The display type to be inline-block. The height to take up 100 percent of the container. Lastly, vertical-align to be middle. We'll come back to that just in a moment. We'll just, first of all, add the styles for the text. The feature class, and then the p, which surrounds the text. This is going to also have the display type of inline-block, and will all come clear soon. Also vertical aligned to be middle. The text align will be centralized in the div. The width to be 100 percent of the container. If we go back into the browser, and if we take a look at the finished project, there's a background color. It's quite faint, but it surrounds the text, which has rounded edges, and it's also semi-transparent. Let's add that now. To start, we can add the background color, which has a RGBA value. First of all, we need to add the red, green, and blue values. To create the gray color, the first value is 74, 82, 95, and then the last value is the Alpha or the opacity. I I want that to be 0.2, which is the same as 20 percent opacity. The background has got rounded corners, which you get by adding a border-radius of 10 pixels. The text color is white. So there's the background for the text in place. So basically what we're doing here is we're creating some text and we're adding some styles to it, and then we're adding a fake element just before the text so we can use it as a full height reference to align the text in the div. Before the text, we're creating an empty div, which has no content, which are both the fake div and the text to be in-line block. So they'll be side-by-side. Because the fake elements has a height of 100 percent, this will take up the full height of the div, and then because this is the full height of the div, we can then set the vertical align to be middle and this will cause the text to be aligned in the middle of the div. To get this trick to work, we just need to do one more thing because by default, in-line block has a gap between elements. We need to remove this. So we need to add a property which is zero width. If we change the font size to be zero, that will remove the gap between the fake elements and the text. Because we've set the font size to be zero, we then need to add the font size in the p tags. So one has to be 48 pixels. So it saved that and check that on the browser. That's looking good. That's now vertically aligned to the background image, and we can also see the semitransparent background color. So let's just add a little bit upon it, just three percent, and space out the line height to be 80 pixels. Let's save and take a look at that. Great. That's looking a lot better now. The next thing we need to do is align it horizontally in the div. We're going to do that by adding some Bootstrap columns. If we head back to get bootstrap.com and then if we go in the CSS section, and then select the grid system on the right, and then scroll down to the grid options. Bootstrap has a 12-column grid system and to access that we use the class prefix of col and then dash and then we can use the xs for the number of columns why we want in extra small devices, sm for small devices or tablets, md for medium devices or desktops, or lg for the large desktops. So we can create divs, which is displayed differently on smaller or larger devices. There's an example below. If we want to create a div which has two parts and spans the full width of the page, each div needs take up six columns each, and the same, if we want to create three column side-by-side, we'll give each div a class of four columns. Let's put this into practice in our project. Back into the index page. If we look for the div which surrounds the text just after the feature text class, we're going to add the Bootstrap columns. So we want the text to take up all the available space on a mobile view, so we can add col-xs, for extra small devices, 12, so we'll take up the full 12 columns on a small device. If we don't want it to be full width on larger devices, we can add col-md-8, because that will take up eight parts of 12 or two-thirds and then larger still, on large desktops, col-lg-6, because that will take up half the width of the web page. Let's save that and take a look. If we scroll down to the small size, you can see the text takes up the full width. But once we hit the medium devices, this div is only taken up eight parts. Because it's only taken up eight parts, it's leaving four columns on the right side. So to make sure that this div stays in the middle of the page, we can add an offset on the left-hand side. So to centralize this div, we need to add an offset of two, and the way we do that is col, so the first one is md then dash offset, and then to offset it to two columns, we set that to two. Let's save that and see if that's working okay. Great. So the eight column div is in the middle of the page with two columns in the side now. We'll do the same for the large devices because the large devices is taken up six parts. We need to add an offset of three. So col-lg-offset three. There we go. Bootstrap documentations got some more information about the grid system and offsetting. There's also some examples you can take a look at in the offsetting section. So that's this video nearly finished. Just one more thing we need to add before we go, is if we shrink the browser down, the text is pretty large. So we'll get down to the small tablet or mobile sizes. We need to make sure that the text is smaller. So we can do that in our CSS by adding a media query. Let's add a mobile styling comment just at the very bottom of the page. So let's add a media query, so @media screen, and we'll target the devices with a max width of 768 pixels. By using 768 pixels, this keeps in-line with Bootstrap's media queries. If we go back up to the top of the grid system, you can see the media query sizes the Bootstrap uses. So we're going to set in our media query for extra small devices less than 768 pixels. To reduce the font size, we need to add the class of feature text, and then p, and we need to show the space after and, there we go. So we need to reduce the font size. Let's set this to 28 pixels and also the line height, that can be the same, that can also be 28 pixels. Let's save that and head back into the browser. If we go back into the project and then shrink the browser down. You can see that the text now scales down on the smaller devices and fitted in the container. As we get larger and hit the Media query, we'll get the larger text, so that's looking a lot better. While we're in the media query, we can also just make the free links in the mobile view, up here in the center of the page, we can add that in the lia section, because it's our list item hyperlinks, so text-align center. There we go. Great. So that's it for this section. That's all the CSS completed for the header. If you join me in the next video, we'll continue with the website and move down to the welcome section. 5. Home page- welcome section: In the last video, we completed the HTML and the CSS for the header section. Next, if we take a look at the finished website, we're going to start with the welcome section. It's quite a simple section, there is just a level 2 heading at the top, there's also a divide image, and then four links to different parts of the website. Let's get started. Head over to your index page and then copy the comment for the feature section. We're going to start working just below the closing header tag and paste that in. This is going to be the welcome section. The welcome section is going to be in the section tags, and the section tag is going to have an ID of welcome, so we can use that in the CSS. The whole div needs to have a class of container. Unlike the previous sections, we're just going to use a set width container. We don't want to stretch in too wide. Then within the container, we add the usual div with the class of row. Then we'll set the number of bootstrap columns. We want the level 2 heading and also the divider image to be half the width of the web page, so we'll set the number of columns to be six and we'll add an offset of three on the left-hand side. We'll surround the text on the image with a div, with a class of col-sm-6 and also for the offset, col-sm-offset-3. Then the level 2 heading, which is "Welcome to Tranquil Spa," then just below the heading, we'll add the image, so the image source, this image is also in our images folder, images/divider-purple.png. If we look at the finished project, you can see that the divider-purple is on the white background color. But further down, we've got purple background color, we've also got a divide with the silver pots. We'll use the divider-silver on the sections. After the file path, we can add the alt-text of divider, and close that image off, and then let's just copy the closing div comments. The first one is for the columns, the next one is for the rows, and the last one is for the container. Let's see how that's looking, back into the browser and refresh. There we go. The image on the text is centered. We need to do a little bit work with the CSS, but that's okay for now. Then next, we'll create the four images and the four links just below. Back into the text editor, we start just below the last closing row but still within the main container. Let's create a new row. A div class of row and we'll also add a custom class of facilities, we can use that on the CSS. Each of the individual links is going stake of three columns, so we can create four different divs with a class of col-sm-3. The first one, div class of col-sm-3, so both the image and the text is going to be a link, so we'll just leave a blank. Within the link, let's add the image first. The image source of images and the first image is makeup.png with the old text, let's get rid of the sidebar. The old text is, "Hair and Makeup". Then just after the image, you can add the text for the link, so hair, and then to get the and symbol, we use the ampersand, then amp; then Make Up, then let's add some comments to the closing divs. The outside one is for the row and then the inner one is for the three column div. Because we are going to be using these three column div four times, let's copy the section and then paste it in below three more times, save that, and check out on the browser, and refresh. Great, that's working. We've got the four images, all hyperlinks. We can see the underline once you hover over and also the text is there. Let's now change the images on the text. The first div is fine, let's move down to the second image. The second image has a name of candles.png, the alt text is "Spa Facilities" and also the text is Spa Facilities. Then the third section has an image called lake.png and the text is "Lakeside Retreats", and also the same for the alt text. Finally, the last one, the image name is pool.png, the text is "All Our Facilities" and we'll copy that for the alt text too. Let's see that in the browser and refresh. That's fine for now. Next, I'm going to move on and add some CSS for this section. We want to make sure that the level 2 heading is centralized, we need some spacing above and below the images. We're also going to centralize the text and remove the underline when hovered over, and we'll also change the text color. Let's do that in the Custom CSS. We're going to start with the level 2 heading because we'll be using this many times over on the site, we want to put this in the Global section at the top, so just below the image, we can have h2 there. We need to text-align, center. On the font size to be 2em, and also to create a little bit of space on the top and bottom, let's add a little bit of margin. Margin top, 30 pixels, and also some margin on the bottom to be 20 pixels. Let's save that and check that out in the browser. Now, we got the text in the middle, and also a little bit of space above and below. While we are also in the global section, we can remove the underline from the hyperlinks when we hover over. Just below the h2, let's select a:hover. We can remove the underline by setting the text decoration to be none. Let's also set the text color while we're here. When hovered over, it needs to be 97689c. Now, when I hover over, the text changes to purple and the underline being removed. Because we've set the h2 font size to be 2em, that's probably going to be a little bit too big when we get down to the mobile size, so let's head down to the media query. Below the feature text, lets add the h2. We'll just reduce the font size to be 1.6em. Now, we've added the global styles, we can start by adding a Welcome section and add some of the Welcome-specific styles. Let's copy the comment for mobile styling and we'll paste it just above the mobile styling section. Let's call this the Welcome Section. The Welcome section, we give a ID of "welcome". Welcome section has got a white background color. Let's add some padding to the bottom of the section so everything below doesn't get too close. We'll set the padding bottom to 30 pixels. We will also set only text in this section to be in the center. In the global section, we change the color of the links when we hovered over them. But now, we need to set the color to override the default blue. Welcome and then a, because they're links and the color is going to have the value of 494646, which is a darker gray color. Next in the section with the images and the text, we want to make the text a little bit bigger and also the individual images, we're going to make them a little bit smaller and add some margin on the top and bottom, just spacing a little bit more. Surrounding this row, we'll look back in the HTML. The four individual divs were all surrounded with a row and we give that row a custom class of facilities. Let's use our now. Let's increase the font size. Font size, let's set that to 1.5 em, and also the facilities image, let's set the display to be block. To make them a little bit smaller, we can set the maximum width to be 60 percent, so it looks a little bit better. Then to add a space here, we'll set the margin, we want to put 30 pixels on the top and bottom, and set the left and right to be auto. There we go, that's what's finished now with the Welcome section. That's the end of this video and if you join me in the next video, we'll continue with the website and we'll move down to create the latest Office section. See you there. 6. Home page- offers section- HTML: Our website is taking shape now, we've completed the header section and also the featured image and text. We then moved down to creating the welcome section, which has got links to all the sections of the website. If we take a look at the finished website, the next part we're going to be creating is the latest offers section. It's going to consist of a similar level 2 heading and divider to the last section, and then we're going to create a new row with three different special offers. The three different offers are static texts for now, but once we get to the WordPress section later on in the course, we'll make sure that the user can log in and change the values, so they can keep the special offers up-to-date even without any technical knowledge. Let's get started in the index page, so we'll get started with a comment. This section is going to be called the latest offers, and we'll do just below the welcome section like we've done in the last video, so we'll locate the closing section and then paste the comment just below there, so that's the latest offers. The latest offers will have its own section too and this will have an ID of latest-offers, they are within the section. We'll create the usual div with the class of container, and then because the row that we're going to be using is pretty much the same as the last section, we can just copy the div with the class of row and we can reuse that. Paste that within the container, and then we need to change the level 2 heading to latest offers. Because this time we're on a purple background, let's change the divider to be the divider-silver.png and let's take a look at that. There's our section with the level 2 heading on the divider, so we're just going to add one more custom class which is going to be a class to add some margin to the bottom of the divider. If we look at the finished project we need to make sure that the free divs below the divider are slightly pushed down from the image, so let's add the class to the row of margin bottom. We'll add a margin in the next video, in the CSS, let's just add a closing comment to the container. Let's put the free special offers on row, so let's create a new div with the class of row. We're going to create the free special offer divs but we need to put those free special offer divs into a container, so we're going to put a full 12 column width container surrounding those. Div with a class of col-sm-12, and that will create a full 12 column container. Because the free special offer sections are nested, we need to create a new row for those to go inside. Within the row, the first special offer is going to be div class col-sm-4, so it takes up a one third of the page and also so we can add our custom styles, we'll also add a custom class of offer. To start we need put the price, we need to put price in the span tags, and then we'll put the name of the special offer in a level 3 heading, and then two separate paragraph tags just below. For the price, the span, and then in-between there the first one had a price of $60, and then below that in the level 3 heading, the name of the offer. The first one is family offer, I'm just going to put a break tag in there, and then the <p> tags, so the first line of text was family pool and then line two was great day out, so let's see how that's looking. It's all there but there's still a little bit of work to do with the CSS, but let's continue for now adding the rest of the offers. If we locate the div, in fact let's do some comment first, so just copy the container comment and then the first one is for the class of offer. The second one is called sm-4, and then this is the row, in fact this is the nested row, then just below that it's the 12-column wrapper, and then the final row container. Let's copy the full section for the special offer, and then let's paste in twice just below. The second special offer had the price of a $120 and this is a bridal package, so the name of the offer was for the bride. The first line of the text was hair and make-up, and lastly it was the full pamper package, and then the last special offer was the weekend pass which had a price of $90, so the name was weekend pass. The text was modern facilities, and the last one had the text of perfect gift. Back into the browser, that's all appearing fine, that's exactly how we want it. Join me in the next video, and we'll continue with the section by adding the CSS. 7. Home page- offers section- CSS: In this video, we'll continue with the latest offers section. In the last video, we added the HTML for the free separate offers and in this video we're going to be adding the CSS to make it look more like the finished projects. We are going to be adding the purple background color for the full section. We'll also be changing the background and text color for the free individual offers. We'll also be making sure that the pricing circle is positioned horizontally in the middle of the div and also overlapping at the top. We'll do that with some absolute positioning. If we go over to our CSS, we can create a new section. Let's do this at the bottom just before the mobile styling. This is the latest offers. The latest offers section had the ID of latest offers. We'll just use this to create the purple background color. Set the font color to be white, and also make sure that all the text is aligned. First of all, we'll set the text-align to be in the center. Because we're using a purple background color or dark background colors, we want the div to have white text. The purple background color has the ID of 97689c. Let's take a look in the browser. Now we've got the purple background color and the white text, so we can move on to the three individual offer divs. If we look back into the index page, the free offers, we give them a custom class of offer, we used on all three of them. We can select that now. So the class of offer. We're going to set the dark background color first. The background for the free offers has an ID of 4a525f. There we go. Because these will be containers for the price and circles, we're going to set the position to be relative. To make them a little bit taller, we'll add a minimum height of 350 pixels high and a little bit of padding. I'm going to add 40 pixels on the top and bottom, and then 10 pixels on the left and right. Then next we can start at any price and circles. The price and circles were wrapped in a span tag. Select them using the offer class and then span. Let's start by changing the background color. The circles will have the color of 8abbb1 and the display is going to be set to block. We give these a height and width of 100 pixels. Because the price is going to be inside, we'll set the text-align to be center. Let's take look and see how that's looking so far. We've got the free pricing divs appearing, we've got a different background color. Next we need to make them a circle. Then we need to look a position in the circles where we want them. To make those circles, we can just add a border-radius of 100 percent, and that makes him into a circle. Then to make the text vertically aligned, we can also set the line-height to be 100 pixels, which is the same as the full height of the div, and that moves the price into the middle of the circle. Because we've got a relative container to work from, we can set these pricing circles to have a absolute position. We'll start referencing these circles from the left-hand side of the container. We'll add some margin-left of 50 percent to put that into the middle of the container. Now it's not quite in the middle because we need to compensate for half of the width of the circle. Let's do that now. If we set the left, we can set the value to be negative 50 pixels, which is half the width and that should make them horizontally centered. Then next we can reference the circle from the top. Let's set the top. Now if we would set the value of the top to be zero, what would happen is a circle would go to the top of the container, but we need the circle to be overlapping by half of the height. Instead of setting the top to be zero, we can set the top to be negative 50, which is half of the height. There we go. That's the positioning exactly where we want it. Just to finish off the pricing section, we'll just add the font size and the font-weight. The font size which end up to 2ems, and lastly the font-weight is going to be bold. There we go. Then next we'll create some spacing. The author name is in a level 3 heading. Let's add some margin to the bottom just to push the text favored on and we can also increase the font size too. Below the span section, we've got the class of offer and then h3. Margin-bottom is 50 pixels and also let's change the font size to be 1.2ems. That gives us a little bit more space below the heading. I'm also going to add some spacing between the two lines below by adding some extra line-height. The two lines were in P tags. The offer p, we can increase the line-height to 2ems. That gives you a little bit more of vertical spacing. Now let's create some space between the divider and also the free special offer sections. If you remember back in the index page in the first row, which had the level 2 heading on the divide image. We also added a custom class of margin-bottom. We can add that custom CSS, and push the free divs down. Let's set the margin-bottom to be 70 pixels and see how that looks. Great. That's exactly how we want it looking on the desktop view. If we shrink the browser down, down to a mobile size and then scroll down to the free offers, we just need to make a little change on the margin-bottom because the free divs blend into one when they are stacked on top of each other. We can easily fix that if we find the section with the offer class. Then we can add some margin onto the bottom of 60 pixels. Let's see how that looks. That looks better now. We've got space between the three special offers on the mobile view. That's it. That's the end of the latest offer section. Thanks for listening, and I'll see you in the next video. 8. Home page- shop online section: In the last video, we moved down to the Latest Offers section of the website. In this video, we are going to be completing the Shop Online section. Now, the Shop Online section is a relatively straightforward section. We're going to use a similar level to heading on divider, as we have done in the last two sections. We're going to add a button, which is going to be a link to a Shop Here section. There's also going to be a large background image on it via the CSS. Over in the text editor, I'm going to start in the index page and create a new section. I'm going to paste the comment just below the Latest Offers section. This is called the Shop Online section. This has a section tag with an ID of shop-online, and an usual bootstrap container on row. So div with a class of container. Then within the container, we have the row. We'll copy the heading and divide the section from the last section. We'll copy the six-column section and paste that within our own row. The level 2 heading is the Shop Online text. The image, we need to change to be the purple image because it's on a white background. Just below the divider, the a and href is going to be blank for now. The class is going to be the bootstrap button class, so btn btn-default. Then the role is going to be equal to button. Then close the link off and not the Shop Here text, and let's take a look in the browser. This is our heading divider and also the button default. Now, we can easily make the button appear in the center of the page just by adding a bootstrap class. To the container, just after the number of columns, we can add the bootstrap class of text center. Now pushes the button into the middle of the div. That's all HTML we need to add for this section. We'll just close off some of the divs with comments. This one is the closing row in the final container. Okay, so next, we need to go into the custom CSS. I'm going to add the styling for the button defaults and also at the large background image, just like the final website. Over to the custom CSS, so let's get started with the button. So because we are going to be using the button later on in the course, we're going to add it to the Global section at the top. I'm going to just underneath the image. The class was btn-default. Let's override the default bootstrap values which involve row. First of all, the background color of the button will not be the blue color, which is 8393ca, and we'll add a border, a free pixels border, solid. The color is going to be ecf0f1 and a 5-pixel border radius, and then some paddings to make the border a little bit bigger, 15 pixels on the top and button and 30 on the left and right, and the text color is going to be white. Let's take a look. The button is looking good, we just need to add the hover state. If we go back into the CSS btn-default and then hover, we change the background color to be 97689c. When we hover over the button, we've got the same purple color as the background. Now, let's go back and create a Shop Online section. We'll copy the comments, and just above the MOBILE STYLING again, we'll call this the Shop Online section. Let's start with the background image. The section had an ID of shop online. We can change the background by adding background and then url, and then, in brackets, we can add the file path. So dot dot to go back to the home directory, foward slash images, and then the images we want is products.jpg, but will not be in the center. Lastly, no-repeat. As it stands, the image is in place, but it's only taken up the same height as the content that's already in place. We can change that by adding the minimum height. I will set the minimum height to be the same height of the image, which is 852 pixels. Then let's change the text color of the Shop Online heading. The color is going to have the value of 494646. Then finally, just to separate the button from the divider, we'll add some margin to the top, so the shop-online ID and then the btn-default. Let's push the button down by adding some margin on the top of 25 pixels and let's see how that looks in the browser. Okay, there we go, the button is now pushed down from the divider. That's the end of the video. Thanks for watching, and if you join me in the next video, we'll finish off the bootstrap homepage by adding the footer. 9. Footer section- HTML: Welcome back. In this video, we are going to be creating the footer section for our index page. If we go back into our text editor and underneath the shop online section, let's just copy the comments and paste them below, and we'll call this the Footer Section. We don't need to use the section tags like previous sections because there is a footer tag we can use in place. We use the footer tags. Because the level 2 heading on the image for the footer section is pretty similar to the last few sections, we can just copy that section from above. We've copied the container from the shop online section, and paste it in-between the footer tags. We don't need the button. So we can delete that section. The shop online section is going to be "Keep in touch" and just after text-center, we're going to reuse the margin-bottom class, which we used earlier on up in the latest offers section. This is going to push the content away from the divider. Let's save and take a look at that, and refresh. There's our level 2 heading and the divider. Next, we need to create a new row, which is going to have the address on the left and some of the navigation links in the middle, and then some of the social sharing buttons on the right. To put these three sections in, we'll create a new row just underneath the last one. So a new div with the class of row, and then within the row we're going to create three more divs, which are going to be four column divs. Div class, then col-sm-4. We can copy this div, paste it in two times. The first div has the addressing, so we are going to be semantic and use the address tags. The first line is Tranquil Spa, and then add the break tag. Let's add some address lines, so address line 1 then the break tag. Duplicate this two more times to create address line 2 and 3. Then the second div had the unordered list with the navigation. Between the ul tags, we'll create four list items and between the list tags we'll create some links. So a href, and the first link is going to be about us. This will link to about.html and we'll put that link in there for when we create that, and the text is About. Copy and paste or duplicate this three more times. The second link is the Contact Us. Let's change that now and the link is going to be contact.html. The third link is to the blog. The link is blog.html, and the text of Blog. Then lastly it's the Latest News. We can just delete the link there because we are going to be generating that dynamically in WordPress. So let's take a look in the browser. There we go, we've got our first two sections. Now, we just need to create the social media section on the right. For the div, we'll begin with p tags and the text of Follow Us, and then below the Follow Us text, we're going to use the Font Awesome icons for links to social media. We add the Font Awesome icons with the i tag, and then add a class. So the first class is fa. We need that for all the icons. Then the Facebook icon is fa-facebook. Then to make the icon slightly larger than normal, we add the class of fa-lg, and then close up. Then create four more links. The second one is the link to Twitter. We need fa-twitter. Icon 3 is Google Plus, and then Pinterest, and then finally it's YouTube. So let's save that and see how that's looking now. Good, we've got the five social media icons where they should be. Then the last thing we need to do is add the copyright section at the very bottom of the page. Let's add that now. So just below the container but stored in the photo section, we'll add a new div with a class of container-fluid, so it spans the full width of the web page. We'll also add an id of copy for copyright, and then a div with a class of col-sm-12 to make a 12-column container. Then the text between the p tags, we'll add the copyright symbol, which is ampersand, and then copy; 2015 Tranquil Spa. Then let's add some comments. This is the closing div for the row. This is the 12-column container and finally the fluid container. Let's take a look. Great, so that's all the HTML I did for the homepage. If you join me in the next video, we'll finish off our homepage by adding the CSS. 10. Footer section- CSS: Welcome back. In this video, we are going to be finishing off our index page by adding the CSS for the footer section. If we head into our custom CSS and then copy the comments. Just for the mobile styling section, we call this the keep in touch section. The footer section will wrapped in the footer tags. We're going to add a background color of purple. To make the text standout, we'll set the color to be white, and then change the background color to be purple, which is 97689c. Next we need to change the divider to be the silver color. In HTML, we'll change the divider from divider purple to be divider silver.png and then, let's create some space in between the lines for the address and also the list items. Back in the CSS, we can do that by selecting the footer list items, and also the address section, and let's increase the line height to be 2ems, and that gives us a bit more spacing vertically. The social media icons are a little bit punched up, so I'm going to add some margin on the right-hand side just to separate them a little bit. I'll select Font Awesome icons with the i. Let's add some margin, on the right-hand side, 15 pixels. That looks a little better. Then we want to change the background color for the copyright section at the bottom and align the text in the center. For the copyright section, we'll give that an ID of copy. Let's start by setting the text-align to be center, the background color to be white, and we'll set the font color to be 494646, and the heights of the div to be 60 pixels, and also set the line height to be 60 pixels to align the text, and then finally, we'll add some margin to the top of the div, of 30 pixels, refresh up. It seems to be working, so we'll just see what the problem is. I've got the ID of copy. When it's changed the spelling mistake that back to ID and save that and refresh. That's looking better. We've now got to separate its copyright section at the very bottom of the page. So next we need to do some work with the list items. We need to change the color and also remove the bullets from the left-hand side. We'll do this in the Global section at the top. Let's add this at the end of the Global section. First to remove the bullet points, we'll remove the list-style, we can set that to none. Because these are links, we can select the footer list item link, and change the color of the link to be white. Then do the same for the hover state, footer, li a, and then hover. The hover color is going to be the gray color we've used in the text, so that's 494646. Let's take a look. It's all working fine, good. All looks fine for the desktop view, so let's shrink it down to the mobile view and see if any changes need to be made. Yeah, we've got some defaults padding on the left hand side, and we also need to align the text to be in the center. It will move the default padding, open the Global section. Let's do that just above the list items. The UL, let's set the padding to be zero, that looks better, and set the text-align down in the media query. We'll do that in the footer, text-align to be center. To separate the address and the footer unordered list, I want to add a border bottom. So again, we'll do on the media query, so footer, unordered list, and also the address tags. Border-bottom, we'll set at one pixel and the line to be dotted. Let's take a look. That's looking fine. If we expand the browser, everything seems to be working fine. That's the end of our index page for our bootstrap website. We've only got a few more pages to do, such as the blog, the contact and page. Thanks for listening I will see you in the next video. 11. Blog page- HTML: Welcome back. We've now finished our index page, our Bootstrap template. In these next few videos, we're going to be creating the last few pages to finish off our Bootstrap template and then we can start converting to WordPress. In this video, we are going to be starting with the blog page. If we take a look at the finished project, we can get an idea of what we are going to be creating. We'll be reusing the header section and also the background image. But we'll be changing the text to Tranquil Spa Official Blog. Then scrolling down, we're going to have the individual blog posts on the left-hand side. We'll put three of those in our template. We'll have some links to older and newer posts. On the right-hand side, we'll have a sidebar. The sidebar will have a little bit of text about the website. We'll have an archives page where all the blog posts will be stored by months and year. We'll also be separating the blog posts into categories, and then if we go a little bit further down the page, we'll also be re-using the footer section. Most of the sidebar will just be empty links for now. These will be generated dynamically in WordPress. We'll just be adding them in Bootstrap as empty links to get the look and feel of the site. Let's get started. We'll head over to our text editor with our project. Then let's create a new page and save that as blog.html, and make that's saved in the same level as the index page. Then if you go into the index page that we finished earlier and select all and copy. Then we can use this as a starting point for our blog page and paste that in. As I mentioned earlier, we'll be using the same header section. If we scroll down to the end of the closing header tag, which is just there, we can start by deleting the Welcome section and delete [inaudible] section and keep going all the way down to the start of the footer section and then delete that. At this [inaudible] , we've just got the header and footer section. The first thing I'm going to change is the feature text. We're just going to change this to Tranquil Spa Official Blog. There we go. Then we're going to use a Bootstrap template for our blogs. If we head over to getbootstrap.com, and then select the Getting Started section. If we scroll down to the Bootstrap templates, you'll see these default templates that Bootstrap provides. There should be one called Blog. So we select the Blog. We are going to be selecting some of the parts of this website to use as a template. The sidebar is on the right-hand side and also the blog post on the left. This is going to create a good starting point for our blog. To get the code for this we need to Control-click or Right-click. Go to "View Page Source". We're going to copy the code with the blog post on the sidebar. If we just scroll down a little bit further. We need to copy the container which is just below the blog-masthead. Copy the opening container and then down past the posts. We'll need to copy all the way down to the sidebar. It's at end of the sidebar, end the row, and the end of the container. Copy all our section and then go back into the text editor between the header and the footer section, let's paste that in. To make things a little bit more clearer, we can add some comments. Let's add the first comment to the sidebar. If you look for the end of the blog and paste this just below. Change an entity sidebar section and then scroll up. Then up to the opening blog post, which is just above the container. Paste that in. This can be the blog section. Next, we'll take a look at how that's looking so far and we'll see what changes we need to make. We've got our header section, and then we've got the sample blog post on the left, on the sidebar exactly where we wanted. Then we've got the footer section at the bottom. Back into the text editor, we just want to remove the bootstrap blog heading at the top. Let's do that now. We'll just leave the full div with the blog header. Let's take a look at that. That's the heading removed. By default on the Bootstrap template that we just copied. There's three different styles of blog posts. To keep our website consistent, I'm just going to use the third blog post. We've gone back into the blog section, and each individual blog post has a class of blog post. So we know where each block starts and ends. This is the first one. I want to scroll down to the closing tag for the blog post and delete this one. I'm also going to delete the second blog post. Look for the closing div, for the blog post, and select that and delete. Now, we're just left with the third and final blog posts. To put this back in, we want to copy the style and then paste it back in twice below. Let's check in the browser. Now we've got free blog posts back on our page but with a consistent style. Then next we'll change the text in the About to section on the sidebar. Scroll down to the sidebar section and if we locate the About section, we can just delete the sample text between the P tags and let's put our own text in. Welcome to the official Tranquil Spar Blog. Then a second sentence just below, also in P tags. Here you will find all the latest news on what's going on here at the Spa. That's the About us section. Will keep the archives as it is for now and we'll make this work dynamically in WordPress later on in the course. The Elsewhere section, let's change it to Categories. Let's add some categories in there for now. The first one we can be changed into news and then offers and then lastly uncategorize. Then we'll put our social media section in. If we copy the sidebar module div and paste this in just below, we can change the categories to Follow Us. Because we've got all the social media links already in the footer section. We can just go back into our index page. Can locate the social media icons down at the very bottom in the footer. If we copy the five social media links and then paste these back into the blog section. Delete those first and paste them in. Then let's save that and see how it's looking in the browser. That's a [inaudible]. We've got the About us text. We've then got the Archives, the Category section, and the social media section. That's nearly finished with the blog HTML. Just one more little thing I'd like to change is if we go to the container for the blog. One thing I'd like to change for the number of columns on the blog on the sidebar. By default, Bootstrap has the blog section taking up eight parts on the smaller devices. I'd like ours to be 12 columns wide, smaller devices, and then change to eight on medium devices. Then we also need to go down to the sidebar section and do the same for the sidebar wrapper. To make the sidebar go full width on smaller devices, we can change that to 12 columns and then change it to col-md-3. To take the three columns on medium devices. Then because we change that to medium, we'll also change the offset on the medium devices to one. Just as a little bit of distance between the blog post on the sidebar and then save that. That's just finished for the HTML for the blog section. If you join me in the next video, we'll continue with our blog page by adding the CSS. 12. Blog page- CSS: So we've got our blog page all in place now. So now let's make it look a little bit more like the finished project by adding the CSS. So we need to add a divide image below the blog title for each post. We'll also be adding the outline for each of the individual posts on the sidebar. Now, we'll also be adding some margins and paddings to make it look a little bit better. So let's get started with the blog post title. We need to make that look a little bit better and also at the image just below. So the way we do that, if we look at each individual post, the level 2 heading has a class of blog-post-title. So let's head over to our CSS section. So let's start with our blog section just below the Keep In Touch section. So I'll copy the comment and paste that in. We'll call this the Blog section. So we'll start with the blog-post-title. So to get the background image just below the level 2 heading, we can add the background url. Then in brackets, we're going to put the path to our divider purple that we've used in the index page. So we use dot dot. Then in the Images folder, we should have the divider purple.png. Then to set the position, let's add center and with the sidebar, and then set the image to be no-repeat. So let's take a look at that. So we've got an image now, but it's spreading the full width of the level 2 heading. So we need to change the positioning. So first of all, we'll set the height to be 80 pixels and this is the height of the full div. So next, we can set the size of the image and we can do this in background size. So set the background size to be 300 pixels wide and 40 pixels high. Let's take a look. So it's looking a little bit better, but it's still overlapping the text. So let's move the background position. So first of all, we'll set the x position to be center and then the y, we'll set that to 35 pixels. I should push the image down a little bit. There we go. So now, the image is clear of the level 2 heading. So next, I'm just going to add a little bit of margin on the bottom of the div just to push the text away. So we'll set the margin bottom of 30 pixels. Then next, lets add the outline to the post. So if you look at the finished website, each individual blog post has got the one-pixel outline with the rounded corners. So let's do that now. So if we take a look back in the blog.html, you can see that each individual blog post has a class of blog post. So let's copy that and paste that in. So first of all, we'll add the border. That's going to be one pixel solid line and the color is going to be 494646. Let's get the rounded corners, let's add the border-radius of 10 pixels. Then next, we'll add some margin. So to make sure that the blog posts have some spacing on the top and bottom, we can add a margin of 30 pixels on the top and bottom and zero on the left and right. Then a little bit of padding just inside the div of 20 pixels. Let's see how that's looking. So it's looking a lot better now. So next, we'll move on to the sidebar. I will make the sidebar modules look a little bit more like the blog posts. So first of all, let's copy the comment. This can be the blog sidebar. So to style the sidebar, we can use the class of sidebar module because we're going to be using the same style of border that we just used in the blog post. We can just copy that CSS and paste that in there. Let's take a look. There we go. So now the sidebar modules, now match the styling of the blog posts. That's it for this video, thanks for watching and I'll see you in the next video where we'll be creating the About wall page. 13. About us page: Moving on from the blog page that we finished in the last video. In this video we're going to be creating the About Us page which is going to be pretty simple. It's going to reuse the header and the footer section from previous videos. We're going to have a pretty consistent level two heading and divide image. We will place it in some Lorem Ipsum text, which you can change to whatever text you want. Then we'll also have the links which we used on the homepage to various parts of the website. Then the Footer section at the very bottom. So let's go over to our text editor and we'll copy the index page. So Select All and Copy. Then command and N or Control N to make a new page. Paste that in and save this as about.html, again at the same level as the index page and save that. So from the bottom of the page we can keep the Footer section. This is going to be the same as the index page. We can remove the Shop Online section. We don't need that. We can also remove the Latest Offers section. We can keep the Facilities section. This is going to be our four image links. In fact, we can keep all of the Welcome section. We can just reuse the level two heading and the image. So let's start by renaming the Welcome section to About Us section. But make sure we change the id of the section to about. So we can keep the same container row on the same number of columns and change the level two heading to About Us. I can keep the purple image. So let's see how that's looking. That's okay. For now we can solve the alignment issues in CSS soon. So next we want to add a few paragraphs of text. So if we go over to Google and do a search for Lorem Ipsum, I click on the first link and we can use this page, to get some sample text. So I'm just going to generate two paragraphs. Select the first paragraph for now and copy it up. Then after the class and row tag for the level two heading, I'm going to create one more row. So the div with the class of row. In the first paragraph, I'll create some P tags. Then paste in the paragraph. Then just below this we'll create another paragraph. Then head back over to the sample text and copy the second paragraph and paste this in. Let's check that on the browser. There we go. So next we'll head over to our Custom CSS. So to start, we want to add some padding on the very bottom of the page just to separate this section from the footer, the link text is all out of place, so we'll set the text-align to be center. We'll also create a little bit of margin on the top and bottom of the paragraphs. So if we head back over to our custom.css, then create a About Us section. So give this section a id of about. So let's start by adding the padding onto the bottom of the div. I'll fetch pixels and then text-align to be center. Let's take a look. So the text-align has aligned the text into the center of the page. It's also made sure that our divide image is in the middle and also the link text below is now 30 pixels off margin on the bottom of the div. So the last thing I want to do is add some margin to the top and bottom of the text. So let's select the about id and then the p tags. The only thing we want to do in this p is add some margin of 30 pixels on the top and bottom, and zero on the left and right. Then refresh. There we go. So that's the text separated out and the About Us page finished. So thanks for watching. In the next video we'll create the final page for our Bootstrap template, which is going to be the Contact page. 14. Contact us page- HTML: So welcome back. In this video, we're going to be creating the final page for our Bootstrap template, which is going to be the Contact Us page. So this is what it's going to look like. So we've got the Contact Us section which has two-six column containers. So the one on the left hand side will be for the address details and then on the right-hand side, we'll embed a Google iFrame with a lakeside location and then just below that, we'll add a section to Send Us a Message, and this will span the full width of the webpage. When we get to the WordPress section, this will be fully functional. So let's get started in our text editor. Let's start with the About page, I'm going to copy all of that and then use this as a starting point for our new page, and then paste this in. Let's save this as contact.html. This page will be using the same footer, so we keep all the footer section in there. For now, we can keep the About what section, but we can just change this to the Contact Us section and then change the section id to Contact. The level two heading can be changed to Contact and that will keep this whole row consistent with the rest of the website, and the following row with the text. We can delete all the text for now, we don't need that, but we can keep the row and we'll reuse that. So within this row, this is going to be the two-six column sections. The one on the left will have the Address, and the section on the right will have the Google Maps iFrame. So let's start by creating two new divs with a class of col-sm-6. I will do exactly the same for the Google iFrame. So first of all, we'll start on the div on the left, which will have the Address information. First of all, we're going to add some custom CSS. So we can add our own class of Address and also, if we take a look at the finished website, you can see that the address has the darker background image and this is from a Bootstrap well. So let's add the class of well and the address is going to be the same as the footer section. So if we scroll down to the bottom of the page and then copy the Address tags, and paste this into the div on the left and it's also a Font Awesome icon, which is just to the left of the name. So let's add that just after the opening address tag. Let's add the icon. It has i tag with a class of fa fa-map-marker. Then, just below the Address, we're going to add some email and telephone information. So both the email and the telephone section has a Font Awesome icon. So the first one is for the email, and this is a class of fa fa-envelope-o, and then just after the icon, we can add the text of email. I'm just going to put generic email in there, so mail at mail.com and then add a break tag on the second icon. This for the telephone. So this has a class of fa fa-phone and text all telephone. Again, I'll just put a generic number in there. So let's take a look at that, if we go back into the browser and then refresh. So we've got the div on the left-hand side showing nicely. Just something to change in the Email section. We'll go back up. So we just got a few things we need to change there, so we'll change that to a colon and then an at symbol, and there we go. So next, we need to create the iFrame on the right-hand side. So if go over to Google Maps, and if you find a nice lakeside location, and then what you need to do is click on the Menu and then select Share or Embed Map and select the second tab which is Embed Map and then copy the link that Google provides. Then, if we go into our second div, we can paste this in and let's see how that's looking. There we go, so that's working fine. We'll add some CSS in the next video for this, but that's looking okay for now. So that's this row finished, so next we'll move down and we'll add the Send Us a Message section. So back into the text editor, and if we locate the div with the class of row on facilities, we don't need the facilities class anymore, but we'll add our own class of Message Area, and then all the content between this row we can get rid of. So if we look for the class in row container, it's all images and all the divs. Let's get started on the Message section. So let's create a full width section. We'll give the div a class of col-sm-12 and then nested inside, we'll also add a div with a class of well, so that stands out a little bit more. Then inside the well, we're going to create the HTML form. Let's head over to the finished project and take a look. So to style, we'll add the text at the top of Send Us a Message, we'll then add some form-groups with the inputs for the name, email and the message text area and then we'll add a Submit button to the bottom. Let's start with the text at the very top. We'll add some p tags and then the text or Send Us a Message. Then just below, we'll add the first div with the class of form-group and this is a Bootstrap class we'll be using to surround the free inputs. So to start, we'll add an input with a type of text and a class of form-control, which is also a Bootstrap class. Then id of inputs name and then the placeholder text simply of name and close off. So next we're going to add a label and this label is going to be for the screen readers. So let's give it a class of sr-only. To link this label to the input inside the opening tag, we can add fall and then match it with the input id of inputs name. Then between the label tags, we can add the text to appear of name. So let's copy this form-group and we'll use this for the Email section and then paste this in below. So within this form-group, we need to change the input to be input-email and the text to be email and then within the inputs, we'll change the input name to be input-email and the placeholder text to be email, and then paste in the form-group one more time. So this time it's going to be input message and the name of the message. Instead of using the input, we can just delete that and this time because it's going to be a message, we can add a text area. So the text area will have the class of form-control. The id of input-message, which is the same as the label, and the placeholder text is going to be equal to message, and then the last attribute is going to be the number of rows we want to appear as default. So I'm going to set this to be free initially. Then to close up the text area section and then just after the text area, the last thing I want to add is the input for the Submit button. Inputs, so we have a type of submit. This will have the familiar class that we've used earlier on of btn btn-default and this will have the same styles that we've used on the buttons in the index page. Finally, the value, which is the text on the button, will be Submit and then close off and I should add a few closing comments. Then just above the row, this is the closing tag for the 12 column section. Then just above that, this is for the class of well, so let's save that and check this out in the browser. There we go. So there's our form at the bottom of the page. So that's all the HTML we need for the Contact Us page. So join me in the next video and we'll finish off the contact page by adding the CSS. 15. Contact us page- CSS: Welcome to the last video in this Bootstrap template section. We've added the HTML for the Contact Us page, next we'll add the CSS to make it look a little bit more like the final project. So let's head over to our custom CSS. If we copy the comments, and we paste this just below the About Us section, we're going to call this the Contact Us section. We'll give this section a ID of contact. To get started, I'm going to add some padding onto the bottom of the div of 30 pixels, just to give it some space from the footer. We'll also add the text-align of center, and this will make sure that the divide image is in the middle of the page. Then next we'll start in the left-hand div. So let's get started by adding some styling for the address section. If we go back into the contact page, we added a custom class of address. This class was surrounding the whole of the address section. So back into the Custom CSS, we can use that now. First of all, we'll make sure the text is aligned to the left. We'll add a bit of space into the top, so that's a margin top of 30 pixels. To make the font-size a little bit bigger, we just increase the font-size to be 1.2 ems. To space out the lines, let's set the line height to be 2 ems. Let's take a look, and refresh. Okay, so next I want to change the color of the icons to match the rest of the website. Within the address class, we could target the icons with the I. So let's change the color of the icons to be 97689c. Let's take a look at that. Okay, good. That's changed the icon to the pinky purple color. That's all fine for now. So the next thing I want to do is match the 30 pixels margin so the iframe is aligned at the top. For now the iframe's stretching a little bit too big, so we'll add the maximum width of a 100 percent to keep that within the container. Let's select the contact ID and the iframe. Let's match the margin top of the left-hand div to be 30 pixels. So the iframe doesn't get too big, we'll set the maximum width to be 100 percent. Let's save and take a look at that. Great, so it looks a lot better. We've now got the two divs aligned from the top and also the iframe doesn't stretch too wide. So the last thing I want to change is just add a little bit of padding or margin onto the top of the message section, so it keeps that consistent with the rest of the website. We'll set that to be 30 pixels. So we'll give this section a custom class of message area. We just need to add some margin onto the top of 30 pixels and refresh. Great site, looks good on the desktop view. If we just shrink the browser down to the mobile view, there's not a lot we really need to do, there's just one thing that I want to change. We need to add the text line to be center on the mobile view. So we can do that down in the media query. Because we've also got the footer class of the text-align center, we could just add this onto the end. So we can add our class of address, and save and take a look at that. Great. So there we go. So it looks a lot better. Now that's the Bootstrap template finish for our projects, and that's the end of this section. So thanks for listening. If you join me in the next section, we can start by converting our Bootstrap template to WordPress. 16. Localhost setup & WordPress installation: Welcome back to this brand new section when I get into the exciting part of the course where we're going to start converting our Bootstrap template to a WordPress theme. Just before we start, [inaudible] we'll need to download a web server onto our machine. To develop WordPress websites on our machine locally, we need to install a web server. If you head over to MAMP, M-A-M-P,.info, and a build to install the latest version of MAMP. If you just click on the download button, this is available for free on both Mac and Windows. Click the download button to get us started and then download the latest version there. Up to now, we've been building our website in Bootstrap, which includes HTML, CSS, and JavaScript, all of which run in the browser. We don't need any special tools for the website to appear in the browser. But because we're using WordPress and WordPress is built using PHP and uses a MySQL database, we need to install MAMP to create a local server on our machine. This will enable us to build WordPress websites without having them live on the internet. Just pause the video for a minute while that's downloading and we'll see you in a minute. Welcome back. Hopefully, you've now got MAMP downloaded. If we just head over to our downloads and double-click on the installer, this should take you through the installation process. It should be pretty similar on both Mac and Windows. You should get the installation script. If we just continue through and accept the license and agreement. Then we're going to install for all users on this computer. Then click install, and it shouldn't take too long to install, so we just give that a moment to finish installing. We've got a MAMP and MAMP Pro has been installed successfully. We're just going to be using the free MAMP version. That's all you're going to need for this course, we don't need to pay for the pro version. Once that's finished installing, just click on close. Now we've got MAMP installed. If you're using a Mac, if you go over to the applications, it should be saved inside there. If you're using a Windows machine, it should be stored in your usual location such as the C Drive. If we just go over to MAMP and double-click on the MAMP with the elephant icon. Then you should get a window which looks like this. If we go into the preferences and then click the ports tab, the Apache ports, which is the web server is used on port 8888. Then if you click on the web server. By default, the path for the document root should be the htdocs. If it's not, just click on the folder. Then, once you're in the folder, if you just find your way to the drive where MAMP is installed. Then if we go down to find MAMP and then open up. Then if you look for the htdocs folder, then select that. Any website which we are going to be using PHP for, we need to put the project folder into the htdocs, but we'll do that in just a bit. If we start by clicking start servers and hopefully if everything installed okay, you should get the starter page which tells you that MAMP has been successfully installed. Okay, great. Now MAMP is installed. If we head over to Google and if you search for WordPress. Then, once that's searched, we need to go to wordpress.org. If you want to take a look at the WordPress homepage, feel free to do that. But I'm just going to click on download WordPress and then download the latest version, which is currently 4.3. WordPress doesn't take long at all to install. It only takes about 10-15 seconds if you've got good internet connection. Once that's downloaded, we can just get rid of that and then head over to the downloads and then click on the WordPress zip file and unzip that. Now, this is our new project folder for our website. I'm going to rename this tranquil-wp. Just so there is no confusion, the original Bootstrap folder, I'm going to change this to tranquil-bs. Then we need to move this into our htdocs. I'm just going to open up a new window. Then I'm going to find the htdocs. If we go back into the MAMP folder and then into htdocs, and then drag into htdocs the WordPress folder. Now we've got WordPress installed in our document root or the htdocs. If we go back to MAMP and then click on the open start page, this should take us back to the MAMP welcome screen. Then, if click on the tools at the top and click on phpMyAdmin. This should take us to the admin area for creating databases. We need to create a new database for WordPress. The way we do that, if we select the databases tab at the top and then under create database, I'm going to put our database name in there. I'm going to call mine tranquil-spa, and then click on create. Then down the left, we should get the tranquil-spa database appear in the list. Then next we'll create a user for that database. Then if we go to the tabs at the top of the page and click on privileges and then we'll select the new user, or add user, which is at the bottom. Then we can enter the user's information. The username will give us the text field. I'm going to call my user spa-admin. Then for the host, we want to select local. Then you can either type in the password of your choice or you can generate a password. Make sure if you generate a password that you copy it up. We'll use that just in a moment, and then scroll over down the page and hit go. There's our spa-admin user created. Then now we need to go back over to WordPress and tell WordPress the database information and the user information that we've just created. We'll close the browser for now and then open up your text editor. Then if we go back over to the htdocs where we've saved our tranquil-wp folder. If you just drag that into the text editor. It's configured the WordPress database. If we go into the WordPress folder and select wp-config-sample. Then we can enter our database information. Scroll down to the database name. Then you can see we just need to include our database name here. Delete that. We called our database tranquil-spa, so tranquil-spa. Then underneath the database name, we can include the username. Delete the username here. We called our user spa-admin. Put in spa-admin or whatever name you created. The password, which you should have copied to the clipboard. We can paste that in. We use the localhost, so we can just leave the host as it is. Then next, we need to generate the keys on salts for the authentication. Where the website link is, which we just copy this. Then head over to your web browser and paste that in. This should generate the keys which are unique. Select all on the page and copy. Then replace these with the ones we've just copied. Paste those in. Then the last thing we need to do inside this file is to scroll down to the bottom of the page. We can change the database table prefix from the standard WP. I'm going to change mine to tranquildb. This can be anything you like, it doesn't really matter. Save that. Then the last thing we need to do for this file is remove the sample word. We need to rename it wp-config.php. Make sure that's saved. If you remember when we first downloaded MAMP, we went inside the preferences on the ports. If you remember that the port was 8888. We can use this to go into our web browser. If you go into the web browser and then type in localhost, and then a colon, and then 8888 and then enter, this should give you an index of all the website which is stored inside the htdocs. For now, we've only got the tranquil-spa. If we click on that, and hopefully if everything's gone well for you, you can get the WordPress installation script. It's really simple to follow along. First of all, we need to select our language, which mine is English, UK and then select continue. Then we just need a little bit of information about the site. The site title is going to be Tranquil Spa. I've already got my username saved as tranquil_admin and then create a password. Bear in mind, this password is going to be different from your database. This is going to be to log into the WordPress admin. Create a strong password of your choice. Then type in an email and then privacy, we can uncheck this for now. We can change that later on in the settings once we have finished the website and then click install WordPress. There we go, it starts WordPress installed. That's how quick and easy is to get WordPress started on your machine. If you just go to login and we [inaudible] to go to the control panel. Put username and password in, and we've been taken to the WordPress dashboard. If you want to check out how the WordPress website is looking so far using the default theme, we can just click on the Tranquil Spa home icon at the top. This is our website, and this is just the standard theme which comes with WordPress. There we go, that's WordPress now installed. Thanks for watching, and we'll see you in the next video where we will start importing our Bootstrap files into WordPress. 17. WordPress theme folder: Okay. Now we've got our local host and WordPress all installed. We're now going to get to work on importance of the bootstrap folders into our custom theme. If we go back to the MAMP folder and then under the HT docs, we can find our tranquilwp folder. Open this up. These are all the files and folders that's included with WordPress by default. Most of the work that we'll be doing for the custom theme will be inside WP Content and then inside the themes folder. Inside the themes folder, there's the standard default themes that are included with WordPress. 2015 is the most current. That's one that we see when we opened up our website before. Inside the themes folder, let's get started with our custom theme. If you go to new folder, I'm going to call this tranquilwp. If we open up the tranquilwp folder and also our bootstrap folder, we can start putting in some of the folders into our custom theme. I'm just going to select all the files for now and copy, and then paste these into our folder. We don't need about the blog or the contact page just for now. I'm just going to get rid of those. The index page, we need to change this to index.php so that WordPress recognizes it. We use a PHP extension there. We need to keep the images, the JavaScript, the CSS on the fonts folder. But within the CSS folder, we need to move our custom CSS file and we'll need to move it to be at the same level as our index page. If we select the custom CSS, and it moved up back one level, and with the index page on the folders, because that's where WordPress requires the CSS to be. Also, it requires style.css, rather than the custom. We'll change that to style.css. As well as being our custom style sheet in our style.css, we can also include some important WordPress information about our theme. If we go back into our text editor, you may need to refresh because we've changed some of the files and folders. On the tranquilwp, if we go to content, themes, and then tranquilwp, we can then find the style sheet that we just renamed. Right at the very top of the page, if we just make some space, we need to go back into the web browser. So head over to Google. I'm just going to do a search. If you search for codex, codex is basically the WordPress documentation. We're using that quite a lot in this section, to find lots of information such as PHP functions. For now, if you just search for the codex theme style sheets, so it's a top link we need, but if you just click the jump to theme style sheet, and this will jump to the part of the page that we need. Under the theme style sheet heading, WordPress gives us a sample of the comment that it needs to include at the top of the style.css. Let's copy that sample, and then paste it in at the top of our style sheet. Let's get rid of this sidebar and we can start editing the information. Right at the very top, under the theme name, we're going to put our theme name which is tranquil WP. Then the theme website. You can put in anything you want in there for now. You just want to put something generic in there for now. tranquilspatheme.com. On the author, you put your name in or the name of your company. If you've got a website, you can also put that in there. Then you can put in a description for the theme. I'm just going to put in a fully responsive WordPress spa theme, built using Bootstrap 3. There we go. The version, we can leave at 1.0, and the license we can leave. We're going to change some of the tags. Now, bear in mind that the tags that were put in the style sheet, we can't just put in any tag that we choose. They've got to be WordPress approved tags, which you can find in the codex. For now, I'm just going to add the right sidebar. Then these are separated by commas. Responsive layouts, custom header, and custom menu, featured images. Then in the end, translation really. Now, some of these, you may not understand what they are, but as we go through the course, you'll understand more and more of what each one of these is. We'll be adding things such as featured images and we're making the theme ready for people to translate into different languages if they want to. The text domain, we are going to make it the same as our theme name. That's going to be tranquilwp. We'll use that later on in this course when we're making the theme ready for translation. We can delete the information at the bottom. There we go. That's all we need to include in the style sheet for now. Save that. If we go back to our theme folder, which is in the HT docs, then open it up, and then go, again, to WordPress content, themes, and tranquilwp. The last thing we need to do before we activate our theme in WordPress is, if we go to the images folder in our custom theme, if we locate the screenshot.png, we need to move this over up one level into the same directory as we moved our style sheet into before. Then if we go to our web browser, and then back to our WordPress dashboard. If we go to the Tranquil Spa in the corner and hover over, and then click on the dashboard. Basically, the dashboard is really simple to use. Down the left-hand side, we've got a list of all the links where we can add various posts, pages. We can change things such as the themes. If you go down to the appearance and select themes, so as you can see, active is the 2015 theme, but we want to use the Tranquil Spa theme that we just created. If all goes well, you should see your theme appearing on this page, and then click on Activate. There we go. Now if we click on the Home icon in the top left, on the Visit Site, hopefully, that all went well for you, and your theme should now be activated. As you can see, it's all working, but there's still a lot of work that needs to be done to make it look like our Bootstrap template. Let's start by adding some of the folders that we need. Back into our theme folder, in the HT docs, one thing you may want to do is setup a shortcut on your desktop, or if you're using a MAC, you can add one of the color tags so you don't need to go through the process of finding every time. MAMP, and then the HT docs, tranquilwp, content, themes, and then tranquilwp. For this tranquil folder, I'm just going to create the blue tag, so I can just select the blue and find it a lot faster. If you're using a Windows machine, you maybe want to save a shortcut on your desktop. We need to add a few more basic files into our folder. If we go over to brackets and bring up the sidebar, I'm going to press Command and N to create a new page. The first page we need to add is the header.php. Just save that as header.php, and make sure that's included in our custom theme, along with the index page. We'll save that for now, and then another new page. Save this as the footer.php. Then just two more to create. The next one is going to be for the sidebar, and let's save the sidebar.php. I'm going to use a shortcut this time, and save that in with the index page. Then lastly, the last file we're going to save is for the functions, so a new page and save that as functions.php. Again, making sure it's in the right location. That's it for now. I will see you in the next video. 18. Index page: Okay. Welcome back. In this video, we're going to be looking at the index page and we're going to start rearranging the header and the footer, and also adding some content to our functions file. Okay. So a couple of things before we get started. If you make sure that the MAMP, which you downloaded in the last video is up and running. So if you say start servers, make sure that you click on them to get that started. Then in your text editor, if you open up the tranquilwp , which is the theme folder for the project, and then head over to your web browser, and then if you type in the local host, :8888 and then forward slash tranquil-wp, and this will take us to the index page that we need to begin working on. If you need to get back to the WordPress dashboard, we need to just add /admin onto the end of the URL, and that will take us back to the dashboard. Okay. So let's get started. In the text editor, we created our header and the footer files in the last video. So we're going to put both the header and the footer in these files. So we're going to take the header and the footer from the index page. So if you go to the index.php and then scroll to the top of the page, we need to copy or quote all the content from the very top of the web page, all the way down until we get to the closing header tag, which is just there. So copy all that right to the very top and then cut that, and now the header section is going to go into its own file, which is the header.php. So paste that in there and save, and then if we go back into the index page, we'll do exactly the same with the footer section. So scroll down to the bottom of the page and then below the shop online section, if you look for the footer comment, and then cut all the content right to the very end of the index page. So cut that, and then head to the footer.php, and paste that in and save. Okay. So if we go back to the index.php. So what we're left with is just the main content of the web page. We've taken out the header and the footer section. So because now the header and the footer are in their own files, we need to link those back to the index page. Not quite straightforward to do. If we go back to the very top where the header section was, we're going to start using some PHP. So to begin with PHP, first of all we need to have the file name with the PHP extension, and then to use PHP in the page, we use an opening angle bracket and then a question mark, and then PHP. So this is the opening tag and the closing tag is the question mark and then the closing angle bracket. Okay. Then between the opening and closing bracket, we use the WordPress get header function. So get_header. Because it's function, we use the curly brackets and then a semicolon at the end, and then we do exactly the same but use get footer at the very bottom of the page. So again, we'll use the PHP opening and closing tags, and then inside the tags, we use a WordPress get footer function, the brackets, and then the semicolon. So effectively what we've created is a header and a footer template, and every time we want to reuse these in WordPress, rather than retyping over the same code over and over again, we can just simply use the PHP and use the get header or the get footer function. So and save the index page, and then next we need to go over to our functions.php, and because all the functions are going to be in PHP, we need to make sure that all the content on this page is between the opening and closing PHP tags. So let's start by creating a PHP function. If you've not used PHP before, it uses the function keyword. A function is basically just a chunk of code which we give a name to, and we can call it when we need it. So to set this up, use function and then the name afterwards, which is tranquilwp_setup, and then at the end of the function name we use the curly brackets, and then use a set of curly braces, and all the information that we put between the curly braces is going to be the code which is executed when the theme is set up. So we'll add more to this later, but for now we're just going to add some theme support for RSS or automatic filings. So we do that by add_theme_support, and in the quotes, type in automatic-feed-links, and then a semicolon at the end, and make sure that's the feed there. So make sure the RSS information gets to the head section properly. We're going to add theme support also for the title tag, and this enables both themes and plug-ins to access the document title, so we can change it dynamically. So add_theme_support, and don't forget the quotes in there. This one is going to be the title tag. So title-tag. So next we need to tell WordPress to run this function when setting up the theme. So if we go outside the curly braces and then we need to add an action and the bracket, and then the semicolon at the end. This is going to take in two parameters. So the first one in the quotes is after _setup_theme, and then separated by a comma, we need to put the function name, which is tranquilwp setup. So we're going to just copy that and paste that between the quotes. Just one more piece of PHP we need to add into the functions file before we move on, is if we go up to the very top. Okay. So we're going to use a PHP if statement. So if you've not seen one of these before, it's really nothing to worry about. So I'll just get started by typing out and then we'll talk over exactly what's happening. So we're just going to check if a condition is met, and if it is, we run the piece of code between these curly braces. So the piece of code we want to run is we want to add a variable called the content width, and this is going to be set to 660 pixels. This value is going to control the maximum width of any piece of content which is in the WordPress theme, and we use it to make sure that the user can't upload something such as an image which is far too large for the design and causes layout problems, and then we'll put our condition between the brackets at the top. So I'm going to use the exclamation mark and then isset and then between two more curly brackets, we're going to put our variable which is the content width. So this if statement would normally check if this variable exists by using isset, but because we're using the exclamation mark before it, it's checking the opposite. So if the variable content width is not set, then use the variable between these curly braces and make sure that the content is no bigger than 660 pixels wide. Okay. So that's the functions finished for this video. We'll add more to this as we progress through the course, but just one more thing I want to show you before we finish this video is now let's turn to our PHP to our website. We need to make sure that debugging is enabled, and I'll just show you exactly why. If we go over to Chrome, and then we go to visit site, this is how the site is looking now, it doesn't look very pretty, but it is working. So if we go over to our index page and then make a typo mistake, so for example if we go to the PHP at the top of the page, and for example, if we weren't putting the closing tag after the PHP, and then if we refresh the browser, you can see that we get a white screen. So because we've got a white blank screen, we know that we've made a mistake somewhere, but we've got no indication to show us exactly where we've gone wrong. So to give us an indication of exactly which line of code we've gone wrong on, we need to go to our WordPress folder, which is in the htdocs. So we find MAMP, htdocs, tranquilwp, and then we need to go back into the config file, where we see our database information. So just double-click to open that up, and then if you scroll down below all the password and database information, and then the keys and salts. Right at the bottom of the page, if you look for the define WP debug, by default this is set to false. So we're going to set this to true, and then save that, but don't forget to change it back to false if you're to upload this to a web server. So save that and then refresh in Chrome, and then this will give us an error line, and it tells us exactly where we've gone wrong. So in our index page on line three. Let's take a look. So we can see that the issue was on line one, but WordPress didn't discover there was an issue until it found some HTML on line three. So it might not be exactly on the line but it gives a good indication exactly where the problem lies. So then we can just close off the PHP, save and then refresh, and everything should be working again. Okay. So that's the end of this video. I will see you in the next video. We will start working on the header and the footer. 19. Header & footer: Now, we're going to make our head section and the footer more dynamic, WordPress-friendly. Back in a text editor if you go to the header.php file. At the moment, we've only got static HTML. We'll want to make this dynamic by adding some WordPress functions and some PHP. Let's start by making the language dynamic. Rather than having the language at the top, we're going to open up the PHP tags in exactly the same way as we had done before. Then within the PHP, we're going to add language_attributes, and then because it's a function, we use the brackets and the semi-colon, and this allows WordPress to add the language dynamically, and then next we're going to add the character set dynamically. Rather than having the character set equal to UTF-8, we can allow WordPress to do this dynamically. Again, the PHP opening and closing tags. Now, if you want to copy these and paste them in rather than retyping you can do. I'm going to use the bloginfo function, and then inside the brackets, and then we add the charset back in between the quotations, and then a semicolon at the end. Now, be careful when typing the PHP functions out because as you've seen in the last video with the debugging, if we just have one character mistyped or out of place, the chances are that you're going to get a white screen, so be careful of that, and then rather than our static Tranquil Spa title, let's change that to allow WordPress to include that. Again, between the PHP tags, we can add the WordPress title with wp_title, and then inside the brackets, just leave the empty quotation marks, and then the semicolon at the end, and then scroll down just before the closing head just at the end there. If we just find the line just before, and then I'm not going to include the wp_head function, which basically allows WordPress to add scripts to data back into the head section when it needs to. Again, between the PHP tags typing wp_head, then the brackets and the semicolon. Then in the opening body tag, we can add the WordPress body class. Between the PHP, we use the body_class function, and the brackets and the semicolon, and then WordPress will add the body_class into the right section. Let's scroll down to the header section. The next thing we're going to change is the Tranquil Spa. The Tranquil Spa link is the one at the top left of the homepage, which is our logo section and our link back to the homepage. There's two pieces of PHP we need to include here. I'm just going to get rid of the sidebar for now just to give us some more room. First of all, we need to change the name of the website, which is Tranquil Spa. We need to include the PHP to make this name dynamic. Paste in the PHP opening and closing tags, and I'll put it on a separate line just so it's more clear. There we go. Between the PHP. PHP uses the echo name to echo the contents of the browser, and then we use the WordPress function of get_bloginfo. The bloginfo we want is the name of the site. Put in naming there and the semicolon at the end. Now, WordPress is generally in the name of our website, which is Tranquil Spa. That's going to be the text which appears in the top left-hand corner where the logo is. But we need to make this text an active link. Because we don't have an index.html anymore, because we're using PHP. We need to tell WordPress to link this name back to our home_url. Again, we'll do that between the PHP tags, and then echo. There's a couple of different ways that we can do this in WordPress. But I'm going to use the escape URL, which sanitizes the URL and make sure that there's no malicious code in there. Echo esc_url. Then in the brackets afterwards, we're going to put the link to the home_url. Then the opening and closing curly brackets again, and then the semicolon. There's our two pieces of PHP. The first one provides the link to the home_url, and the second one provides the name of the website. Then back up to the head section. We are going to add the CSS links in a slightly different way. If we delete the link for the Custom CSS and also the Bootstrap CSS. We'll add those back in in the functions file in just a moment. Save that and then open up our sidebar and head over to the footer.php. There's not a lot we need to deal with the footer. One of the things we want to change is the year. Because we want this to change dynamically each year, we can add some PHP to the bottom of here. Rather than having 2015 hard-coded, we can echo out to the browser the date. Then between the brackets, we can put the capital Y, which is the way PHP adds the year. Using PHP, you can also add the days and the months in various formats. We'll look into that in more detail when we do the blog posts. Then right at the very bottom of the page, and then just before the closing body tag. In here, we're going to add another PHP function, which is the wp_footer. This allows WordPress to add scripted data to the footer section. Save that. Then we can delete the Bootstrap JavaScript. We'll link this with the CSS in the functions file. Because WordPress already comes with jQuery, we can delete this too. Tie this up a little bit and then hit "Save". Now, we've taken out the CSS of the header section and the scripts of the footer section. We need to allow WordPress to add these back into the website. We're going to do this in the way the WordPress recommends by enqueuing the scripts. The way we do that is if we go to the functions.php. If you go to the bottom section after the add_action, make sure you're still within the PHP tags. Let's create a new PHP function. This one is going to be called tranquil_scripts. Then the brackets, and then afterwards the curly braces. Just add a comment in here so we know exactly what we're doing. This section is going to be adding the styles to the function. To properly add these back into the theme, we need to use the WordPress or wp_enqueue_style. Then within the curly brackets, and also between the quotes, we're going to give the first style sheet a name. This is the bootstrap-core, then separated by a comma. The second parameter we need to include is the file path to the Bootstrap CSS. Let's add this in WordPress. We type in get_template_directory_uri, and then the brackets. Then we add the file path by using the dot. Then within the quotes, we add the link to our bootstrap file, so /CSS/bootstrap.min.css. Then a semicolon at the end. We'll just get rid of a sidebar for now. In here, we're giving the style sheet a name. Then we're adding the template directory. Then adding to the template directory, the file path for the CSS. Because we got a Bootstrap CSS and we have also got the Custom CSS. We can just copy this and then paste it straight in below. We just need to change the name and the file path. This is for our custom file. Then we also include get_template_directory. Then we need to change the file path. Because our custom style sheet is in a document root rather than the CSS folder, we can just change this to style.css. Then we do a very similar thing to add the scripts back in. Add comments of add scripts. It's JavaScript back in, it works in a similar way to the stylesheet. We just copy this link and paste it in. But this time, instead of enqueue style, we enqueue the script. Then we add the name of the start. I'm going to call this the bootstrap-js. We use get_template_directory in the same way. But this time the file path is in our JS folder. Don't forget the forward slash before. Then we need to link this to the bootstrap minified version. Bootstrap.min.js. This replaces the JavaScript from the footer section. After that add a comma. We've included the script name, the script source. Now next we need to include any dependencies. Now, because Bootstrap requires jQuery, we need to make sure that jQuery loads before Bootstrap. We do this by adding an array. Then in brackets we put the name of the dependency, which is jQuery, separated by comma. The last value I'm going to put in is a Boolean of true. This enables the scriptable link to the footer section. In the footer.php, we included the wp_footer function. Because we added this in, WordPress knows exactly where to add the script now. Now, this function is all set up. We need to do a similar thing that we did early on. For the theme setup, we need to add the action. Outside the function, below the last curly brace, we can paste in the add_action and replace after_theme_setup, we have wp_enqueue_scripts. Then the second parameter is the name of our function, which is tranquil_scripts. We can copy that and paste it in and save that. Because you've got debugging to be enabled, if we refresh the browser, hopefully we shouldn't get any problems. You can start to see that some things are changing. We've got some colors appearing, which means that the Custom CSS must be linked properly. Also the Bootstrap CSS must be linked correctly. Because you can see that the grid system, such as the free sections, are set up properly. We're missing the images, but we'll take care of those soon. That's nothing to worry about. Lastly, if we just shrink the browser down to a smaller size, to the mobile or tablet size, we can check that the JavaScript is working by clicking on the drop-down button. If that's all working fine for you, that's great. If you've got a drop-down, that means that the JavaScript is working. Congratulations on getting this far, and I'll see you in the next video, where we'll add the WordPress navigation. 20. WordPress menu using navwalker: Welcome back. In this video, we're going to be concentrating on getting our navigation open and running. Because WordPress and Bootstrap use different custom classes for the menu setup, we need to include a way of converting our Bootstrap classes to WordPress. Now luckily, somebody has already created a useful tool called the Bootstrap nav walker. If you go over to Google and have a search for Bootstrap navwalker, then you should get the first link, which is the GitHub page and you can see that nav walker is a custom WordPress nav walker class to implement Twitter Bootstrap into our WordPress custom themes. We can start by hitting the "Download" button. It should download quite quick, it's just a zip file. Then if you go down to the installation, the installation is pretty simple to follow. We start by copying the function. So we copy that, and then head up to the functions.php. This is going to be included within the tranquilwp_setup function. Just underneath the title-tag function, paste that in. This includes the navwalker file into our project. Back over to the browser. Then for the usage, copy the nav walker array, and then go over to a text editor into the header.php. It will locate the navigation. We need to find the main navigation which is on the homepage, which has the links to the index page, the blog, and also the latest news. We need to replace the full unordered list. So we can delete all of this section. But make sure you leave the surrounding div with the class off collapse. Then paste in the array between these tags. We'll just tie this up a little bit. This array correctly formats our WordPress theme to include a bootstrap drop-down menu. We can leave all the defaults as they are on the right-hand side. The only thing we need to change is the menu class. Our bootstrap menu classes when nav, navbar-nav, and then also navbar-right, because our menu was right aligned. Everything else we can leave as default. Then back over to the browser. Next we need to register the menu. Copy the register_nav_menus and then into functions.php, just below where we've included the navigation walker link. Just below that, we can paste this in there. This registers the navigation with the theme. We just tie this up and then change the THEMENAME to tranquilwp and save that. This sets the menu with the home link and the blog links at the top of the webpage to be our primary menu. We'll come back to this later on in the course and will register the photo menus. The last thing we need to do is hopefully that's downloaded for you now, head to your downloads and then unzip the package that we just downloaded, and open up. Then we need to the drag the PHP file into a custom theme. Then also open up your theme folder and then drag inside the PHP folder and paste it in at the root directory, the same as the index page. I'm going to do that now. Now that should all be working. If we go to the text editor and then save that, and then into Chrome and into WordPress and then refresh WordPress. Then we can create our main menu. In the dashboard on the left-hand side, go to appearance and then menus. Then create a menu and then change the menu name to Main Menu. Then scroll down when it's checked the two boxes at the bottom and this makes sure that the main menu is the primary menu and also that the new pages that we create automatically get added to the menu. Save that. Then let's visit the site and see if the menu is working okay. Our menu is working. We can see it's appeared at the top of the page. We've only got the Home and the Sample Page link for now because we haven't created the blog or the latest new section. But that's fine. That means everything is working correctly. That's it, we'll leave this video for now. I'll see you in the next video. We will fix all the links for the images. 21. Image file paths: Our custom WordPress theme, it's starting to take shape now. One of the main problems that we can see is that the images that we included in the Bootstrap template aren't appearing in the WordPress site. We need to fix that now. To start with, the majority of the images are in the index page. We head over to index.php. To get the images to appear, we need to correctly change the file path. The first one is in the "Welcome" section, and this is the divider-purple. Inside the image source, we're going to start the php tags, the opening and closing tags. Then we use the same function that we used to include the file path for the CSS. So echo esc_url. Then in brackets, we'll get_the_templates_directory_uri and then a pair of brackets. Make sure you put the semicolon at the end again. Just open up the sidebar. We're getting the template directory uri, which is our theme folder. Then we'll include in the "Images" folder, which is in the Root Directory. Make sure that you've got a slash just before there because that isn't added in automatically. Let's just save that and check that's working before we go any further. There we go. There's our purple image. Let's just "Copy" this to save a lot of typing. If we just copy everything from the forward slash before the images folder up to the Opening php tag, and then go down to the Facility section, and then just "Paste" this before each one of the images. The makeup, the candles, the lake image, and the pool. Then we have the silver image in the Latest Offers Section. "Paste" that in and scroll further down to see if there's anymore we need to change. There's one more image in the Shop Online Section. Let's save that and see how that's looking and "Refresh" the browser. We're getting somewhere now. That's looking better. We need to include the main background image, but that's in the header. We'll do that now. In the header.php, scroll down to the Feature Section and "Paste" that in front of the lakeside image, and then save and then refresh that. Good. We're getting somewhere now. Let's scroll down to the footer section. There's just a couple of images we need to include in the Footer Section, which is the divider image and also the "Shop Online" background image. The footer.php then scroll up for the divider. "Paste" that in and "Save" then "Refresh." It says, "A divide image." Then it's just the "Shop Online" section image and we added this as a background image in the CSS. Head over to the "Style.css" and then scroll down to the Shop Online section. For this to work correctly in WordPress, we need to delete the slash and the two dots. Save that and then refresh. That's the image appeared in the background, which we need to make sure the "Shop Online" button is below the divider. I think we're just missing a break tag. Back to the index page, we've got the heading and the divider image, and then the button straight after. I'm just going to add break tag into there and then refresh, and hopefully that should work. That's great. There we go. That's working perfectly now. I think that's all the images covered in the index page. I'll just scroll up and down and see if anything's missing. Great. Our homepage now looks as it should do. We've got all the images now in place and it looks exactly like the Bootstrap template that we created. Thanks for watching and we'll see you in the next video. 22. Create the front-page.php: Welcome back everybody. In this video, we are going to be taking a look at how WordPress deals with templates and hierarchy system for selecting which template to use. We head over to Google and we search for WordPress template hierarchy. The first link that comes up should be the one that you need. If we select that, so we'd be taken over to the WordPress website and if we just scroll down, we can find the list of the templates that WordPress recognizes and I'll give you an idea of how WordPress uses this. There's a visual diagram which we'll take a look at in just a moment. But if we scroll a little bit further down the page, we can find out some more details about how WordPress deals with templates. By default, WordPress uses the front page or the home page to display the latest blog posts and that's really not what we want for this design. In our Bootstrap design, we've got a front page and then we keep our blog post separate in its own blog page. We need to change our WordPress theme, we need to use the front-page.php as our new home page. In this video, we'll be taking the contents of the index page and we'll be creating the front-page.php. We'll then use our index page to be the default page for displaying blog posts or WordPress content. Scrolling down, you'll get an idea to some of the templates that we're building in this course. There's a template for the single post which has the index page as a fallback template if none of these exist, we'll also create a page template which WordPress will use if it can't find a more specific template. Again, if none of these can be found, it will default back to the index page and there's various of a custom templates we can build. We'll look at them later on in the course. If you want to take a look at the visual overview which gives you a nice visual diagram of how WordPress deals with templates, what templates it looks for in a more particular order. Let's get started creating our new front page. If you go back into the WordPress dashboard and then on the dashboard on the left if you go down to pages, I'm just going to delete the sample page, we don't need that. Then we're going to click ''Add New.'' We're simply going to call this page home and then click on "Publish." Then head over to the text editor and we'll create the front-page.php that we looked up before. First of all, go into the index page, select all and copy and then Command N or Control N to create a new page and then paste that in, and then save that straight away as front-page.php. This is now going to be our front page of the website. We can delete all the content in the index page, everything between the get header and get footer tags right to the very bottom. Just select all the content, and then scroll down and delete, leaving just the header and the footer. We'll just save this page for now and we'll come back to this in the next video where we'll start creating the WordPress loop to loop through all the contents of the blog posts, so save. Then if you go back over to the dashboard and then on the settings, select the "Reading tab." If we go to the front page which is at the top, we mentioned at the start of this video that by default, WordPress uses the front page to display the latest blog posts. We're going to change that to be a static page. I'm going to change that to the homepage to be created. I will change that and then click on ''Save changes.'' Hopefully that should be all working again. Click on ''Visit Site'' refresh and now it seems to be working fine. We just got a few menu links at the top, so I'm just going to get rid of those now. Back into appearance on menus, we can delete the sample page. We don't need that in the menu and also the homepage link and then save the menu. Then back to our front page, so it's all working again. Thanks for watching. I will see you in the next video. 23. WordPress loop and page.php: So in this video, we're going to be taking a look at the famous WordPress loop. So if you just head over to Google and then you will search for WordPress loop. We should be taken straight to the codex. So click on the first link, which takes us to the WordPress website. So the loop is PHP code used by WordPress to display posts. Using the loop WordPress processes each post to be displayed on the current page and format according to how it matches specify criteria within the loop tags. Any HTML or PHP code in the loop will be processed on each post. So basically, what that means is, rather than what we're doing in our bootstrap blog template, where we create three separate blog posts. To save repeating this code over and over again, we just create one sample blog post within the loop. WordPress will keep looping through, pulling in all the contents of the blog posts until there's no more posts to display. So scrolling down. So to start using the WordPress loop, we need to copy the opening loop tags. So if we copy where it says the loop starts here, copy the first line of PHP. Then between the get header and get footer, paste this in and then copy the loop ending, which is just below. Then paste this in leaving a little bit of space in between for the content. So if you know a little bit of PHP, this should look quite familiar. If not, basically all that's happening is WordPress is checking if posts are available and while posts aren't available, it's going to loop through the content that we pull in here very soon. Then if there's no more posts, it then ends the loop. Then else if there is no posts equal to the browser. The word sorry, no posts match your criteria. So now the loop is in place, we need to pull in the contents of the column post. We'll do that by open up the PHP tags. Then in between these tags, we pull in the content and the brackets and semicolon. So this will print out the content of the posts while posted available. We don't currently have any posts in the WordPress website but we'll create those in the next video. So let's save that. While we're going to be using this as the backup or the default template for posts, we also need to create a default template for pages if no more specific template exists. So let's create the page. PHP that we looked at at the start of this video. So if we just select all the content and copy and then make a new page and paste there. This page is going to be saved as the page.PHP. So save that, there we go. Because this is the default template for pages rather than posts, we need to change the error message, to sorry, no pages matched your criteria, and save that. So if you join me in the next video, we'll start creating some WordPress blog posts. 24. Blog index page part 1: Now we're going to start by adding some blog posts to our website. We'll also create the blog page for these to be displayed on. To get some content for the blog posts, I'm going to go over to Google and search for some Lorem ipsum, to get some sample text for the posts. Click on "Lorem Ipsum" and then scroll down to the generator. I'm going to generate five paragraphs of text so we've got plenty of content for the post. Click "Generate", then copy the five paragraphs, and then head back into the WordPress dashboard. Once you get to the dashboard, click on the "Posts". We can keep the hello world sample post there for now. I'm going to generate five new posts. Click on "Add a New Post" and then give it a title of your choice. I'm going to call this blog post one, and then in the text box, paste in the Lorem ipsum. I've already created the news on the office category. Just simply select "Add new category" and type in a category of your choice, such as promotions. Then hit "Enter", and then you get the new category period on there. Just below the categories is also the area for tags. You may want to add a few tags as well. Type in and hit "Enter". I'm going to create beauty, hair, makeup, and that will do for now. Click on "Publish" and then add new at the top, and I'm going to make five new blog posts in total. We've got plenty of content to work with. You can either create your own or follow along with me. The next one is going to be August offer. Now I'm pasting in the sample text on the office category. I will add some tags and then click "Publish". On the third one, this can be August news or newsletter. This can be the new section on the tags, can be news and updates, paste in the content, and then hit "Publish". I'm just going to make two more. Add the new and then sample post. Paste that in and this can be uncategorised. Now I'll publish and then one more. Sample post 2 and then publish that. So we've got five posts now in total, so we've got plenty of content to work with. On the homepage, we've only got the link back to the homepage. Next we need to create the blog page. Back into the Dashboard a go to Pages, Add New, call this the blog page, and then hit "Publish". We need to tell WordPress that this is the page for displaying blog posts, so we go to Settings, Reading, and change the posts page to be the blog that we just created, and then save changes. Then check out the site and check if the blog page has been added to the menu. Okay, that's great. Next we need to transfer the blog content from our bootstrap project into WordPress. If we just find our bootstrap folder, mine's on the desktop still. Then open it up, then drag the blog.html into your text editor, and we can start copying some of the content over to WordPress. We don't need the header or the footer section. What we need to do is scroll down to the blog section, and then we need to copy all of the blog section. Copy this and then keep going all the way down until we find the sidebar. There's the sidebar modules. Then copy everything up until the footer section. Copy and then go into the index.php and then paste all this just underneath get_header. I will start working with this now. I'm making it WordPress friendly. We'll start by cutting the sidebar out and putting the sidebar into the sidebar.php file. If we look for the closing blog-sidebar div, then look at the div just before that, and then copy the modules all the way up to the number of columns. Cut out the contents. We should just be left with the 12-column container. Then go to the sidebar.php, paste that in and save, then back into the index page, and hopefully you should be getting an idea of what we're doing here. In the same way that we got the header, and also in the same way that we put the footer back in, we're going to do exactly the same. Between the sidebar div, let's open up the PHP tags and then type in get_sidebar, the brackets and the semicolon, and then save that. Hopefully that makes sense. We've cut the sidebar out, put it in its own file, and then added it back in using PHP. The next thing we need to do is, we need to add our blog post to the WordPress loop that we added earlier. We only need one of the bootstrap blog posts to work with, and we've currently got three, so let's delete two of them. If we locate the end of the blog posts, there's one and there's two, so it leaves us just with one blog post. We don't actually need any of the content or any of the text, so we can delete that to make more space. We'll just tie this up so we know what we're doing. So we got the container, the row, and the number of columns, then the blog post there. As it stands, this is the content of our blog post and we want to make sure that this is within WordPress loop. So every time it loops through a blog post, it'll print out the blog post title, also the date, author, and then the content. We can start surrounding this with the WordPress loop. So if we cut the open end loop and then paste this just above the div with the class of blog post. So we paste that in. If we cut the end of the loop and then paste this at the end of the blog. I paste that in just there. We cut out all the paragraphs of text, so we need to add the content back in. We cut the PHP tags for the content and then paste this back in just above the end of the loop. So that's the content in. Now just to make sure our divs are all in place. We've got the div with the blog post and I think we just need a closing tag after the content. Yes, that much is up with the blog post opening div. I'll just put a comment in there of blog post. I'll make some space between the end of the loop. It's now got the loop and some blog information in there. Let's head over to our website and see how it's looking and give you a visual indication of what the loop is doing. So if you select the blog and then scroll down. So we can see that some blog posts start to appear on the left and our sidebar is being pulled back in. But one of the problems we've got so far is we create five different blog posts. But as we scroll down, we're getting the same blog post over and over again, and that's because in the index page, it's pulling the content, which is the Lorem Ipsum text for all the information such as the heading, the date, and the offer is all Static HTML. So we need to now convert this to PHP. So WordPress can pull in the correct information for the blog posts that we created. So let's start that now. We'll start with the Level 2 heading of new feature. I want to separate this on a different line so it's more clear. So open up the PHP. Again, I'm just going to copy these PHP tags because we'll be reusing them over and over again. To get the title, we type in the_ title. Let's save that and head back over to the blog and refresh. So now we can see we've got different titles. These are the titles of the five blog posts that we've done before. You hover over them, you can see that these titles are links. Usually in the blog, you won't need the link to the full post. So we can do that in WordPress by adding the permalink. So we can surround this PHP in a link tag. So a href is going to be equal to, then we paste in our PHP. To make it a link, we type in the permalink. Don't forget the brackets and the semicolon. We need to tell WordPress where to link this two. So do this by adding a title. The title is going to be equal to, paste in the PHP. Then we type in the_title_attribute. Let's put it on separate lines so it's more clear. So when it's close off the opening a tag, just after the title attribute and then add the closing a tag after the title. So let's take a look at that and refresh in the browser. So that's a good start. Our blog posts are now blue, which indicates it's now a link. So back into the text editor. Then we'll do the same with the date and the author. So starting with the date, paste in the PHP. Echo to the browser get_the_date. Then inside the brackets, we need to tell WordPress what format we'd like the date to appear. So inside the quotations, pass in three parameters. So the first one is a capital F, which in PHP means the month, and then separated by a comma. A small j is for the day of the month. Then as we use in the footer section, we can use the capital Y to get the year. The next we'll do the author. So we'll change the author's name, paste in the PHP. The author is pretty straightforward. It's just the_author. Then bracket and semicolon. Let's save that and take a look. Great. So now it post in the username, which is tranquil_admin. It also gives us the date which the post was created. It should all be the same because they'll all create at the same time. So while we're in the blog post section, I'd like to add a little bit more information to the blog. Just below the author, I'd like to add some information which shows which category and which tag we've used for all the posts. So that's pretty straightforward to do. If we just go below the author section that we just done there. I'm also going to add some Font Awesome Icons to make these look a little bit better. So Font Awesome is added with the i tag and the class is fa. So we'll add the tags first. So the Font Awesome Icon for tags is fa-tag. Then close that. Then we can generate the names of the tags by typing in the_tags. Let's save that and check it's working okay and refresh. So we got a picture of the tag appearance. Then we're going to go down to a blog post where we've got some tags, we've got news and updates, and then here starts all working correctly. Then add a break tag. We'll start out in the categories. So a Font Awesome Icon. So i class fa, and this could be fa-folder-open, and then add some PHP. This time we use the_category and then save. So let's take a look. So we've got the Font Awesome Icon appearing, but we've got the names of the categories appearing below. We want to make sure that they are in line with the folder. We also wanted them to be separated with comma. So this is pretty straightforward to fix if we go inside the brackets and at the quotations. All we need to do is add a comma, which is the separator, and then a space. So there's a space between each of the categories and then refresh. Now, we also have now got them in line with the Font Awesome Icon. To make this look a bit more like the tags one, we'll just add the word categories in front of it. So just before the category, we'll add PHP tags and then we'll echo or we can use a shorthand which is an e with an underscore before it. Then the word we're going to echo out is category. Then a colon, we've got space stuff there as well. So it's a space before the first category name. So save and then refresh. That looks good, looks a lot better than before. So hopefully that made sense to you. Well, add in a Font Awesome Icon. Then straight after, we use in PHP echo to echo out the word category. Then straight after the word, we're using the category function to print out all the categories associated with the blog post. So save that. Some of you guys may have noticed as you being scrolling up and down page, that these blog posts are quite long. Normally on a blog, you just have a short introduction, maybe just a paragraph or so. Then if you click on the blog or the title, you then take into the full blog post on a separate page. We can do this pretty easily in WordPress. It's just a case of changing the content to be the excerpt. So save, and it should now be a shortened version of the blog posts. Just like that. So a little bit later on the course we'll create the template for the full blog post. Want to click on the title. So happy would tell this has come along for now. So we'll end this video there. We're really making good progress. We'll now go WordPress content, which is generated dynamically rather than the static bootstrap posts. So thanks for watching, and we'll see you in the next video. 25. Blog index page part 2: Welcome back. We're making good progress with our WordPress blog. We've now got WordPress pulling in the contents of all our blog posts and displaying them on the blog page. We've used the WordPress excerpt to shorten down the contents of the posts, just be a couple of sentences. Now, we want to add a Read More button at the end of the text. This can also link to the full blog post in the same way as the title. To add the Read More button at the very end, we can add this in our index page straight after the exempt. Just make a little bit of space there. Let's create a link and then inside the quotations, pasting the PHP tags. This time, we're going to echo to the browser, get_permalink(), and semi-colon at the end, then close off the "a" tag and add the closing tag there. Now, we've got the link, we need to add the text. PHP again, and we use a shorthand again, so _e just echo to the browser. Then inside the brackets, the first parameter is going to be the text we'd like to display, which is going to be Read More and then short three dots afterwards. Then save and see if that's working okay. That's at the end of each one of the blog posts, so that's good. One little change you'd like to make is, I don't like the square brackets at the end of the text, so I'm just going to remove them and just make it into the three dots. Let's see how to do that. If we head over to the WordPress codecs, and we'll look for the codecs for WordPress. Then search at the top for the excerpt and click on the function reference to the excerpt. Scroll down a little bit further, and it will give some information about how to use it and some examples. But if you go a little bit further to about halfway and look for the title which says remove the three dots in a square brackets using filters. If we just simply copy the function, then head over to the functions.php. Let's paste this in but outside of the setup function. Scroll down to the bottom of the page and we're going to paste this underneath the add_action for the scripts. At the minute, we'll return in the dots on the square brackets, but we just want to delete those square brackets and save that. Or you can put in anything that you prefer. Let's see if that's working. Back over to the spa page and refresh. Good, that's all working correctly. The square brackets have been removed. We just want to change this title back to be the same color as the bootstrap website, which is the dark gray. If we just click on Inspect Elements and then select it with the magnifying glass, we can see that the cluster Bootstrap uses is blog-post-title. Copy that, I'm going to change this color in the style.CSS. Let's take a look for the blog section and then we'll paste this in just below the title section we've created before. Because it's now a link, we will add the "a" and we'll set the color to be the value of 494646. Save that and refresh. The title is now the same color as the Bootstrap website. You may have already noticed that we're missing the fancy image which separates the blog title and the rest of the content, that's because we still got the dots and the slush. We're going to remove them and then refresh, and this puts the images back into the blog. If we go back down to the bottom of the page, you can see it is the "Previous" and "Next" buttons. We're now going to get these to work in WordPress. Go back into the index page. If you take a look for the Pages section, and we can keep the links [inaudible] as they are. But we don't need these links anymore because we're going to put these in a WordPress way. We can just delete the hyperlinks of Previous and Next. To get the next page of posts, insert the php. Then to get the next posts, we type in next_posts_link and then we want the button to say "Older Posts", so we type that inside the brackets. Then we'll copy this piece of PHP and then we'll paste it just below between the list items. But this time, instead of next_posts, it's changed to previous. Then we'll change "Older Posts" to be "Newer" and save, and hopefully, that should work okay, then refresh. That causes the buttons to disappear and you may be wondering why. Well, the reason is because there isn't a previous page or a next page to go to because we've only got five or six blog posts, and by default, WordPress puts 10 blog posts in a page. Just to test if the pager is working, head back over to the dashboard and then down the Settings, on Reading, then change blog pages to show at most from 10 down to five, and then save changes. Then hopefully, if all is working correctly, when we scroll down to the bottom of the page in the blog, we should now get a page here because we only got five posts. That goes as the "Older Post" button and there is the six post there. Then click "Newer Posts", we will get the first five. Congratulations on getting this far and getting the blog posts all working. Thanks for watching. If you've join me in the next video, we'll create a PHP "if else" statement, which will change the feature text at the top of the page depending on what page we're on. I'll see you there. 26. Dynamic feature text: So if we go onto our website, all of the pages as it stands, say Full Responsive Premium Spa theme for WordPress at the top, and that goes for the homepage, the blog page, and any other pages that we're going to be creating such as the latest news, the Contact Us, and About Us. So I want to make sure that the feature text at the top of the page reflects what page we're on rather than it just being static text. The reason it's the same text on every page is because if we go in the header.php, we've just got static HTML. So I'm going to change that in this video by adding a php function. So if we delete all the text between the P tags, but make sure the tags are still in place, and then open up the php, and then the closing brackets, we're going to add in our own custom function, and I'm going to call this featureText, and then the brackets and semicolon. That's all we need to do in the header section. We're going to create this feature text function in the functions.php. Then if you go down to the bottom of the functions page, just underneath the last function but still within the php tags. Let's make a little bit of room for those cells. So the function keyword, then a function name which was featureText, and then the brackets, and then pair of curly braces. So inside this function is going to be an if else statement. So WordPress will be checking if a certain page is being viewed. If a certain page is being viewed, then we're going to set the correct text display in the featureText. So we'll start off by using an if statement. So if is_front_page. So if we're currently viewing the front page, then want to echo to the browser, the text that we just cut out of the header section, which is Fully Responsive Premium Spa Theme for WordPress. So FULLY RESPONSIVE, and then a break tag, and PREMIUM SPA THEME, followed by the break tag, FOR WORDPRESS, and then save that. Then just after the curly brace there, we're going to use else if rather than else because we can use as many else ifs as we want. So as we go through the website, every time we create a new page, which is the Contact us page, we'll create a new condition for that page, and then we'll print out the appropriate text. So elseif, and the curly braces. So the condition for the blog is we check is_home. So WordPress class is the homepage as the area where the main blog posts are being displayed. So we've got the front page, and then we've got is_home, for the home of the blog posts, this one will echo out the browser, and a semicolon at the end of the first one too. So echo out to the browser. If it's the blog, we want this to say Tranquil Spa Official Blog. So let's save that and take a look if this is working. So refresh the WordPress website. That seems to be working so far, we've got the blog page selected and the text is changed to Tranquil Spa Official Blog. Now, if we go back to the homepage, we'll get the original text that we set so that's all working fine. So we'll leave that for now and we'll keep adding to the functions every time we add a new page to the blog. So thanks for watching. In the next video, we'll create the page template to display the full single blog posts. 27. Single blog post template: So in our blog page, we've got the shortened down posts, and in this video, we want to make sure that if we click on the Read More button or on the title, that this links to a page which is going to show the full length post, and we do that by creating a template called single.php. So head over to your text editor and create a new page, and save this as single.php, with all the rest of the PHP files. WordPress has two different types of page templates we can use. There's the single use template, which we'll be using for the Contact and About Us page, and that's only going to be used on one particular page, or there is also a Global template, which is a bit of a more general template. We need to put a comment at the top of the page. So the single page is going to be loosely based on our blog page. We can reuse a lot of the content. Copy the content from the Index page and then paste this into the single.php, and because this is going to be a global template, we need to add a comment at the top. Still WordPress is the name of the template. Add the comments. It's going to be the name of the template, so it's going to be Single Post Template. This will have some of the same functionality as the blog page, but with just one or two little changes. For example, in the blog page, we have the title linking to the full post, but we don't want that because we're already on the full post. Let's remove the hyperlink surrounding the title, remove the hyperlink, so the closing a tag. We can also remove the title attribute, the permalink, and all the way to the opening a tag. Save that and head over to the blog and click on one of the blog posts. This is the single page that we're now working on, and we still need to add the title to the top of the page. Now you can see when we click on the link at the top, it's no longer a link, it's just the blog title. We need to change the shortened version of the post to be the full length. We do that by changing the excerpts back to the content. Save that and then refresh. Then we've got the full length of the post. Next, I just want to head over to the style sheet and add a little bit of line height in, just to create some space between the tags, the category, and the text below. If we go over to the style.css and copy a comment, I want to paste this just below the blog sidebar, the About Us, the Contact Us. I'll put it just before the mobile styling. Paste that in and we'll call this the Blog Single Post. Let's just take a look at the class we need to target here. If we go into the index page, I want to add styling to the tags and the category. The class which surround those is blog-posts-meta. I just noticed there's a little mistake there. We need to move the closing P tag to actually start before the tags and category, and then end just afterwards. Otherwise, that won't work. Let's just put that in and save that. Back to the style sheet and then paste in the class. Don't forget to put a dot in front of it because it's a class, and then just add some line spacing with the line height property of two M's, and let's refresh the browser and see how that's looking. Okay. That still hasn't changed, so there's still a problem somewhere. If we just take a look. It's because we've changed the closing paragraph tag on the Index page, but we've not done it in the single.php. So head to single.php, and then just move the closing p tag, and put this after the category, and save that. Let's see if that's working now. I think that's working, we're just missing the tags off there just because I don't think that post has got any tags, which it doesn't. If we try the August Newsletter one, we've got the tags, we just need to add a break Tag into there. Just after the author and after the closing a tag, the break tag. Hopefully that should solve it all now. Great. That's looking a lot better. We've now got some line height between the tags and the categories. That's looking good now. Then if we go down the page a little bit more, we can also remove the Read More button, because we don't need that. In fact, we can move the whole of the link and just pull it up a little bit more and save, and then refresh that, and there we go. That's the Read More button removed. One thing we need to be conscious of when building WordPress themes is that sometimes users can upload posts which are really long. That was at only five paragraphs, so it looks quite good on the page, but if somebody uploads a read-along post, they may want to split it up into different pages. We maybe want to add pager with previous and next on at the end of the post, just split it up a little bit. The way we can do that is we could allow users to put a break tag in. If we choose a blog post, we'll just choose one that we're on now, which is the August newsletter, and if we just choose a point in which you want to add a pager, we can add a comment in there, which is the same as a HTML comment, which says Next Page. I'm just going to copy this and paste it in one more time, and then update that post, and back to the site. Let's take a look at that. Now we've got our blog post appearing, and it cut off after two paragraphs, where we'll put the next page break-point, which is great. Next we need to just add a pager onto the bottom of the posts, which will allow us to skip to the next page. We can do that in the single.php and add this just below the content, so open up the PHP, and then the WordPress function that we'll add a wp_link_pages, brackets and semicolon, and then save and refresh the blog page. Now we can see at the bottom, we've got the number of pages, so we've got 1, 2, and 3, and they all appear to be working correctly. The last thing we want to do is add a pager onto the bottom of the post so we can skip to the next or the previous post if you want to. Back in single.php, go down to the pager, and instead of saying next posts, we just take the S of the end and that will link to the previous or the next post, and we don't need the text inside the brackets, because the name of the post is put in with WordPress dynamically. Save that and then refresh the browser. There we go. Now we've got the August newsletter and we can link to the previous or the next post just by clicking on the buttons at the bottom. We're making good progress, and the last thing we need to do is just at the text at the top of the page for the single post. We'll do that in the Functions page again and we'll add another Elseif statement. Elseif, in fact, instead of adding a new statement on there, we can just add it onto the is_home one. Just because we're going to be using the same text of Tranquil Spa Official Blog. So just after is_home, we use the two pipes, which means all, so if we're on the home page or the page is single, then prints out the text Tranquil Spa Official Blog. Save and refresh. Okay. Good. So that's the template finished for the single blog post, and if you join me in the next video, we'll make it possible for users to add comments to the posts. 28. Adding comments to the blog: Welcome back. In this video, we're going to create the facility for users to comment on posts. The way we do that is we're going to create a new page. This is going to be a page template. Save this as comments.php, and save this in the same directory as all your PHP. Then for this we're not going to reinvent the wheel, we're just going to copy the comments page from the 2014 theme, which is included with WordPress download. If you go to your WordPress installation in htdocs and then open up trunquil-wp. Then if you go into the content on themes, I'm going to use the 2014 theme and then open up the comments.php. Select all and copy, and then paste the content into comments.php and save that. We can leave pretty much all of the comments.php as it is. We'll just move the WordPress 2014 references just from there. Some benefits of using the template from one of the included themes, it had some nice features such as checking if a post is password protected. There's only one or two little things we need to change. If we scroll down to the printf line, and we're going to customize this slightly by changing one thought to comment, and then on the next line change thoughts to comments, and then save that. Then to include this back into our theme, we need to go over to the single.php template. Then I'm going to put this underneath the pager. We need style WordPress whereabouts in the blog post, we want the comments to appear and it's usually at the bottom of the post. So let's put this just below the pager. When I add a comment just in here, this comment I'm going to say load up the comments template. Then after that, open up the PHP tags and then use the comments template function. Then save. It will go over to a blog post and refresh. You should see at the bottom of the post we've got the facility now to leave comments. Let's go ahead and add a few sample comments, and check it's all working okay. There's our first comments. We can also reply to the comments. You say hello in there and then post the comments and check it's all working. There's our two comments on there, so that's good. Next I just want to go into the CSS, add some custom styling and make sure that the comments fits in a little bit more with the rest of the website. So head over to our style.css. Then I want to add some style into the bottom of the page. Copy the comments and add this just below the plug single post and change the comment to be the comment section. To get started, I want to make sure that the comments section at the bottom has a similar style into the sidebar modules and also the blog posts. The way I'm going to do that is by copying the same styling as we used in the sidebar module. So just copy this section and then find the selector. So we open up the Chrome developer tools with inspect element. We need to find the ID of the container which surrounds all of the comment section. Click the magnifying glass and then find the surrounding container. It's the div with ID of comments and then the class of comments area. Let's add that in now. The div with an ID of comments, and then the class of comments-area, and then paste in the styling. Let's see how that looks. Good, the styling now matches the rest of the page. Next, I just want to highlight the comments just so they standout a little bit more from the rest of the background. We'll givethis a dark gray background and also add a board round and also a little bit a margin just to separate them out. So the class that we need is comment-body. So first of all, we'll start with the background and the background color is eee. Then the border radius is 10 pixels to match the rest of the site. Then the margin, 30 pixels on the top and bottom, 0 on the left and right. So let's save and refresh. Next I want to add the divide image between the header and the comments. Let's find out the selective [inaudible]. Click on the magnifying glass and the header. That's called a class of h2 comments title. Let's add that in now. So h2 and then the class of comments-title. Then it's cropped the same styling that we used in the blog post title. So we scroll up to the blog section and look for the blog post title. We can copy the exact same CSS, which gives us the image and also the styling. Paste this into the comments title section and save, and let's take a look. So that's looking good. Next I want to add a little bit of margin onto the bottom of the comments and also a dashed line across to separate the reply section. To do that, we need to use the class of comment list. Let's add some margin, margins at the bottom of 60 pixels and then border onto the bottom of 1 pixel and the dashed line. Let's take a look. There we go. Then what we need to do right now, let's do a little bit style into the reply section. I'm going to make the text area to be the full width. Let's get the class for that. The selective for that is text area with the idea of comments. So type in text area, then ID of comments. Set the text area width to be 100 percent and add some margin on to the bottom of 20 pixels. Then refresh. So now that's full width. The last thing and I want to do is style the submit button. We're going to make it the same as the submit button that we used on bootstrap website. It's got the same blue color as the rest of the website. Let's find out what the selective is. The input has an ID of submit. We can just add the submit ID onto the button defaults up in the global section. Just after button default separated by a comma, also add the ID of submit. Then do the same in the hover state. Submit hover, and then back down to the comments section. Under the text area section, also add the submit ID and let's make the button match the text area by giving a width of 100 percent. So let's save that and see how that's looking and refresh. We don't need the developer tools anymore. So that's looking a lot better now, that's looking good. One thing that you may not know is so far when we've been adding the comments and we click on the reply button. As soon as you hit reply, we're taken to the bottom of the screen at reply. This is fine for now when we want to go one or two comments. But on a page, it's got tens or hundreds of comments. We don't want to be taken right down to the bottom of the page. We want the comment box to appear just underneath the post we've commented on. Luckily, WordPress has some JavaScript to do this. The way we can add the JavaScript in is by head note to the functions.php. If we'll look for the enqueue script section in the theme setup just underneath the Bootstrap JavaScript, we're going to add the common reply script. So we'll check first if the post is singular. Now we'll enqueue the script just as above, with wp_enqueue_script. The script name is comment reply, and a semicolon at the end of that. So save that. If you go over to WordPress and refresh, now if you click on the reply button, and it's not work for some reasons. So we'll just check why. This will take you to the bottom of the page. Let's take a look over this. We need to make sure that it's within the curly braces. So cut this section now that we just done and paste it within the curly braces or within the function. Save that and let's see if it's working now. Click on the reply, and there we go. Now rather than being taken to the very bottom of the page, we now have the JavaScript enabled, and this makes you that the box appears just below the comments that will reply in them. So that we go such a fully functional comment section. Thanks for listening, and we'll see you in the next video. 29. Making our sidebar dynamic: Welcome back, guys. In this video, we're going to take a look at the sidebar. We're going to make sure that it's fully functional. We're going to make sure that the archives module and the category section is going to be dynamic, meaning that WordPress will populate the categories and the months of the year by the blog posts that are available. So we'll filter them down to how we would like them displayed. The text that's in the archives are in category section. It's just currently static HTML. It's just what we've pulled in from the Bootstrap site. I'm going to change that now. We'll change this in the sidebar.php. Head over to that now. We'll start with the month of the year. If we just delete all of the list items for now, I'm going to replace this with a WordPress PHP function. Open up the PHP tags. Then inside this, we're going to replace it with wp_get_archives, with the brackets and a semicolon, and then save that, and head back over to the blog and refresh. Now, we'll use all the Bootstrap months of the year, which we put in earlier on. Now we're just left with the WordPress generated months. Currently, I've only got posts in the month of August. Just to give it a little bit more content, I'm just going to add one more post. I'll just copy the sample text. So add one more post. I'm going to call this the September news, and then paste in a little bit of text in there. This can go in the news category, and a tag of news, and then publish that. Then go back to the blog section. Now we've got posts from two separate months. We can see that WordPress adds these in automatically. We're going to do exactly the same with the category section. Back to the sidebar.php and find the category section, which is just below the archives, and then delete the free list items that we've got in there. Open up the PHP, and the PHP function that we use is wp_list_categories and save that, and then refresh the blog. Now the sidebar module under the categories has got the WordPress categories, that we'll inputting in as we create the blogposts. We've got an extra categories title in there which we don't want, so the way to remove that is back in sidebar.php, within the WP Lists Categories function, within the brackets, we can remove the title between the quotations by typing in title_li equals, we can just leave that blank so no title appears. We'll save and refresh. We're just left with our level for heading that we've put in ourselves. Now WordPress has put the months and the categories in. We can actually select these links now. This should fill it down the blog page to show posts only by the category of the month we select. We selected News there and we'll just check it's all working by scrolling down. We've just got two posts there, both for the category of news. So if we select September, we should just get the one post that we made today. Now, let's try one more. Let's try the Offers section. We've just got the one blog post with the Offers category. That all appears to be working fine. If you join me in the next video, we'll create the archive.php, which controls the layout of this view. 30. Archives template: Welcome back. In the last video, we fixed the sidebar modules. When we select the month of the year or the categories, WordPress and [inaudible] is down in the blog posts to what we've selected. In this video, we're going to create the archive.php, which is going to be the template which controls the look of the blog when we select on any of these archives. To get started, head off to brackets or your text editor, and then create a new page and save this page as archive.php. Make sure that's in the project directory. We're going to use the single.php as a starting point. Select all, copy, and then paste this back into our new page, which is the archive, and save that. Then back to the top of the page, we're going to create the comments. The comment we need, we're going to call this The template for displaying archive pages, and save that. The page is going to look pretty much the same when we click on the archives as when we clicked on the blog post. Let's take a look at the full view. We don't need to do anything in the archives template for now, but we do want to go into the functions page and make sure that the text over the featured area is changed back to Tranquil Spa Official Blog. But we're going to do something a little bit different this time. We're going to add a little bit more PHP, which will display just underneath the text. It will show us which category we've selected or which month we're displaying. Back into the text editor, and go over to the functions.php, and then it should be at the end of your Functions page. We should have the feature text function. We're going to continue this section with another elseif statement, just after the last one. Type in elseif, and then the condition and the curly braces. The condition that we want to check is if the page is archive, and if it is, we're going to echo out to the browser to start with the same text of Tranquil Spa Official Blog. We're going to copy and paste that. As we mentioned before, underneath the text, we're going to put a new line. This line is going to show the month or the category that we're displaying, so let's make sure it goes on the next line. I'm just going to echo out a break tag, and make sure this goes to in quotations, just like that. To start with, we're going to echo out the category or the tag name. We'll do that by typing single_term_title, and then the text we want to appear before the title is, browsing, and then a colon and a space. Let's save that and see how that's looking. Refresh the browser. Now, we've got the Tranquil Spa Official Blog text, then the break tag, and straight afterwards we've got the browsing text that we've just put in. The browsing text is then followed by the category, which is, currently, offers. Let's click on news and check that's working. Now we've got the news section. I'm going to just try one more. Promotions. Good. Now, that was pretty straightforward to get that in there, but it's going to be a little bit more difficult to pull in the month of the post, but I'll show you how to do that now. First of all, we need to put in another if statement, which checks if the archive is being filtered by the current month. We put in the brackets, if is month, and then the brackets afterwards, and then create the curly braces. To get started, we need to find out which month of the year it currently is. I'm going to store that into a variable, so the $ sign. I'm going to call this variable the monthNum, and let's set this equal to get_query_var, and then in brackets, and the parenthesis, and the quotations. We're going to put in the month number, and then a semicolon at the end there. Next, we're going to create two variables, one for the month and one for the year. We'll start with the month. We're going to set that equal to the PHP date, and the first parameter we're going to pass it in is the format. The formats that we want to return is a F, which returns the current month in the long form, such as January or February, and then separated by a comma. Then next, we want to return the unit timestamp. We're going to do that by typing in mktime, and then we need to pass in some parameters. The first one is the hour. We don't need to put anything in there. The second one is the minute. Again, that's zero. The third one is the second. That's going to be zero. The fourth one is for the month. Because we've created a variable called monthNum, we can just copy that, and we can paste that in. That should return the current month. Then we create the year variable. Year is going to be equal to, and we'll do the same as the month number, so get_query_var. This time we'll pass in the word, year, and a semicolon at the end. Now we'll create two variables with the month and the year. We need to echo this to the browser. Echo, first of all, the text, which is going to be, post from, with a space straight after, and then periods at the variable. The first one is going to be the month, and then we'll add on a space. Put the single quotes with one space in between, and then we'll add on the last variable, which was the year, with the semicolon, and hit "Save". Then head over to WordPress and refresh. We'll select one of the archives and see if this is working. That looks good. We've got the post from text, and then we've added on the month variable, and then the variable for the year. Let's just check the August ones and see if that's working. All appears to be working correctly. We've got the post shown from the current month. We've also got the categories of the current tag shown. Now, if you join me in the next video, we'll continue with the website by adding the latest news page. 31. Latest news page: Welcome back. In this video, we're going to create the Latest News page. Now, the Latest News page is going to be pretty similar to the Blog page. But we're just going to add a WordPress filter, which we'll fill at the column post to display just the ones that are tagged with the news category. To get started, head over to brackets and create a new page, and save this page as page-news.php. Then because it's going to be pretty similar to the blog page, we can just copy the index page. Select all the content and copy, and paste that in the news page, and save that. Unlike the last few templates we've made, this is going to be a single-use template, so we're only going to link this to the Latest News page. To make sure we can link this to a WordPress page, right at the very top, we'll add a comment which will give it a template name. So add the comments at the top, and then add a template name. This displays in the dashboard, and this is going to be called the Latest News, and save that. Now, we'll give this a template name. If we head over to WordPress and then go over to the dashboard, select the pages on the left, and then go to Add New, and let's create the Latest News. This time, if we go to the Page Attributes on the right-hand side, we can select a template to use. This time we can select the Latest News template because we've added the template name at the top. Select the Latest News and then Publish, and this should be automatically added to the homepage. So we've got the home, the blog, and now the latest news. I think we've got a spelling mistake there. We'll just edit that title there. Add the "t" on to the end and update. Great, so now we've got the homepage, the blog, and the latest news. Now we've used the index page as the template for the latest news. We need to now filter these down to only show the posts which have the category of news. Head back over to the page-news.php. To add the category filter, open up the PHP, and then we use the WordPress function, which is query_posts, and then within the brackets, we'll tell WordPress which posts to query; the ones with the category name. So category_name equal to news and a semicolon at the end, and save. If we go back over to the website and refresh, so now when we click on the "Latest News" section, we should just be displayed with the posts which have the category of news. That's working fine, so that's good. You may have noticed we need to add the text or the feature text at the top. We'll do this dynamically in the functions.php. This time we'll do it a little bit differently. We'll get WordPress to pull in the name of the website, which will be Tranquil Spa, and then we'll add a break tag. Then underneath, we'll add the title of the page, which should be Latest News. Go over to the functions file. We'll add another else-if statement. Make sure that you don't add else-if onto the closing curly brace for the if statements. Go to the next one down. Else-if, in brackets is page template. The page template is going to be the page-news.php. This time the else-if statement is checking the name of the actual template, then the curly braces. If it's a page template of page news, we'll add the site name by grabbing the blog info. In the brackets, simply type in a name, and that will pull in the name of the site, and then we'll echo to the browser a break tag, let's put this on a separate line, and then we'll get the page title of Latest News. Just type in the_title and save and refresh. There we go. Now we've pulled in the title of the website and then the title of the page. If we're ever to change any of this information, it would now be displayed automatically. There we go. So that's the Latest News section finished. Thanks for watching, and we'll see you in the next video. 32. Adding feature images to our posts: Welcome back. In this video we're going to add theme support for post thumbnails and this will allow users when creating a new post to also upload a featured image to make the post look a little bit nicer so it's not just plain text. The way to do that is we need to go to our functions.php, and then we need to add theme support for post thumbnails. Go over to functions.php, and then back up to the top within the setup. We do this in a similar way to the feeds and the title tag that we added at the start. So in the setup add theme support. Then inside the brackets, we're going to put in the post-thumbnails and the semicolon and save that. Now we've included theme support. If we go over to the WordPress dashboard, and then if we go into the blog section. Choose one of the blog posts, and then select "Edit Post". Then scroll down to the bottom. You should see that there's now a featured image box appeared. We can use this to set an image to attach to the post. Just select that, we can have an Upload Files or we can use the Media Library. For now I'm just going to go to the Select Files in the upload section, and then on the desktop in the bootstrap folder, and the images, I've included an image called the thumbnail.jpg. We can use that if you want, or you can choose one of your own. Then I'm just going to put some alt texts of lake image and then set the featured image and then update the post. Then we'll go back into the blog and just do one more. This time I'm going to select the second post then add the featured image in the same way. This time we are just going to go to the Media Library and use the same one if you want, and then set that and update. If you go into the blog at the minute, don't worry that you can't see the image just yet. There's a couple of little steps we need to take first. Go over to the index.php and then we need to look for the excerpt, which is the text. Scroll down to the PHP tags with the excerpt. To show the image just above the excerpt, open up the PHP tags and then we set the post thumbnail, the brackets and the semicolon, and save that. If you refresh the browser now you should get the images appearing. There we go. That's the first two images that we set before. This just makes the post look a lot better. We can add a little bit more color to the post. That's added to the index page, but we've also got blog posts appearing in the news page and also the single.php. Go over to the index page and copy the post's thumbnail. Then if you go into the single.php, and this time rather than the excerpt, this will go just above the content. Don't forget to save. Also in the page news, this will go just above the excerpt. Paste that in and safe. That should now be our images displaying on the post in the news, the index, and also the single page. If you want to change the default size of the image that displays, we can do that on the dashboard. So head over to the dashboard, settings and then media. You can set the default images for the thumbnail, medium or large. If you want to set, for example, the thumbnail as the default image in the blog, head over to the blog and then in the index page would then put inside the brackets the thumbnail and then save that. Then if you refresh the blog we should now get the small thumbnail image by default. You can do the same for medium or large. But I'm just going to delete that for now and just leave the standard image sizing. This page is nearly done. Just a little bit of CSS to add. I just want to add some margin to the bottom of the image and also make the image 100 percent of the container. If we go into the style.css, and then we'll add this in the blog section. Let's take a look for the blog section. Then at the bottom of this section, we can reuse the blog post class but then select the image. I will add some margin onto the bottom of the image. Just of 20 pixels and set the width of the image to be 100 percent. Save and then refresh the blog. There we go. That's to looking a lot better and let us now finished with the blog section. I'll see you in the next video where we'll add the WordPress menu to the footer. 33. WordPress footer menu: Welcome back. In this video, we are going to be creating the WordPress menu for the footer section. Currently, if we scroll down to the footer which has got the unordered list that we put in in the Bootstrap template, we want to make the footer menu more dynamic like the menu up the navigation bar. So let's go into the Dashboard and create a new menu. Head over to Appearance and then Menus, and then select Create New Menu. I'm going to call this menu the Footer Menu, and then create the menu. On the left, under the Pages tab, we can select which links we want to add to this menu. We've not created the About Us page or the Contact Us page yet, but we can add the Blog and the Latest News. Select those two and then select Add to Menu, and the blog just goes above the Latest News. Save that, and then if we head over to the functions.php, we can register the menu. So back into functions.php, and then look for the register_nav_menus section that we done early on in the course. Then underneath this, we need to add the footer menu. We just copy the primary menu and then paste this in just below. The nickname is the footer, and then the menu name is the Footer Menu. Save that back over to the dashboard, and then refresh the menu's page. Now the page is refreshed, make sure you're still in the Footer Menu, and then select the Footer Menu tab under the Theme Locations and save that. Then we'll add the navigation walker to the footer file in the same way as we've done in the head section. So go over to the header.php, and then if we look for the navigation bar, which is everything from wp_nav_menu all the way down to the closing brackets, which is just there. So copy that section, and then go over to the footer.php, and then look for the navigation which is just above the social media icons. If we locate the unordered list, and then we can delete all of the unordered list section with the About, the Contact, the Blog, and the Latest News Section. So delete them, but make sure to leave the outside container then add the PHP tags. Then within the tags, paste in the navwalker. This one doesn't need as much information as the header one. For the menu name, this is going to be the footer. We can delete the theme location and also the depth because it's only one level. I'll just bring that up. The container is the unordered list that were deleted before. So change from div to UL. We don't need to up the menu class, the container ID or the container class for this one, so we can remove them, and everything else we can leave as it is, and then save that. Just to finish off the Footer Menu, we'll add the last two pages, so Go to pages and then Add New. Then we're going to add in the About Us page, so About Us and then hit "Publish", and then "Add New". The last page that goes into the Footer Menu is the Contact Us page, so Contact Us and then "Publish". Then add these last two pages to the footer, so Appearance and Menus, and select the Footer Menu, then select the Contact Us page and the About Us page we just created here, "Add to Menu", and then rearrange these into the correct order. So the top page was About Us, then it was Contact Us, then the Blog, and the Latest News, then hit "Save Menu", and then go over to the site. So It looks as though we've managed to add these pages, the top menu too, so we'll remove those in just a moment. But if we go down to the bottom, we can check if it's all working correctly. So select the Blog, there's our blog section and the Latest News. That looks fine. We've not created the About Us page or Contact yet. We'll just remove these menu links from the top. So back into the Dashboard, Appearance and Menus. Then select the Main Menu from the top, and we can easily remove these from the menu by selecting them. Then select and remove. Do the same for the Contact Us page, and then save that menu. So that's looking how it should now. Now, I've got all the menus working correctly on the website. Thanks for watching. Take care. 34. Adding the sidebar Widgets: Welcome back. In this video, I'm going to show you how to make our sidebar more modular by adding WordPress widgets. A sidebar widget is essentially just one of the blocks that we've already created, but we're going to put it into WordPress. That gives the site administrator the chance to reorganize and change things about in sidebar if they want. The way to get started, is if we go over to the Codecs and if we look for the section on Wigdetizing Themes. It's pretty easy to get the widgets working in our theme. At the minute, if we go over to the Dashboard, and then if we go into the Appearance, there's currently no option for the widgets. We going to change that by adding it to our functions file. If we look for the section on how to register a widget area, and then copy the sample code, and then go over to the functions.php. I'm going to paste this in just before the feature text function. Paste that in there. We don't need the php tags because they are already at star on the end of the functions file. We can remove them. Then it's just a case of changing some of the values, so the name of our sidebar is going to be sidebar. Then the ID, we can change it to anything we want because we used the sidebar in the block section on this side, I'm going to call it the sidebar. I'm going to call this a blog. Then when it's a WordPress what goes before and after the widget. If you go into the sidebar.php, and what we're basically doing is replacing these sidebar modules. We need to tell WordPress all the content within these modules is surrounded by the div with a class of sidebar module. Let's change the div before the widget to have the class equal to sidebar module, and this is the closing div. Now that's fine. Then before and after the title, we go back into the sidebar. The title as a h4 or level 4 heading. Change before title to be h4, and then h4 after the title and then save that. If you go back over to the WordPress codecs, and then scroll down to the how to display new widget areas, we need to copy the sample code and paste it into our sidebar. Copy this section. In fact, I'm just going to copy all without the php tags. Copy and go to the sidebar.php, and then scroll to the very top and paste this in just before all the rest of the code. We give our sidebar the ID of sidebar_blog. Change it to areas where the home right is. We'll change this to sidebar_blog, and the same at the bottom, we'll change it to sidebar_blog too. Then save that. Now if we go back into the Dashboard and hit "Refresh," you should see that when we go to the Appearance, we've now got a widgets option. Select that. Now we can see a list of all the available widgets, and we can also make custom ones. All we need to do is just drag these over to the sidebar, and most of the widgets we add they're going to be the custom ones, so that they're the same as our bootstrap site. But the first we want to add is a search box. We haven't got a search box in the site yet, so why not use a pre-made widget? Simply drag the search box on to the sidebar, and I'm going to create the About Us widget. We'll do that with the text box. Drag the text over to the sidebar. The title for this was About. For the content, we can copy the text from the sidebar.php. Copy all the tags, then paste them in there. We don't need the p tag so we can remove those. I want to close in p tag there. Save those, and select "Automatically Add Paragraphs." We can close that one down now, and also the Search box. Before we go any further, let's just check out the site, and see if it's all working okay. Head over to the blog. It looks as though we've got error in the sidebar.php. Head over to the sidebar.php and it's on line 5. That looks we're just missing some php opening, closing tags. At the top, open up the php, and then that much is the closed inside there. With starting the tag, closing and starting tag there. We just need to close that off and save, and that should be okay now, so refresh. Good. Now we've got the Search box in the sidebar. We've got the About Us section showing twice. Go into the sidebar and delete the sidebar module for the About Us section and save. Now we're just left with the About Us widget. Next we'll do the archives and the categories. Back into WordPress, into the Dashboard, Appearance and Widgets. WordPress makes it really easy for us at the archives and categories. You can see on the left the archives and categories has already been created for us. Drag in the archives and give it title. Then save, and do the same with the categories. Drop the end just below. Give it a title of categories, and save. Then we can delete these now from our footer. The sidebar module for archives, I can go and also for the categories, we're going to do that too. Lastly, we will do the Followers section, this is going to be a text widget like the About Us section. While we are in the sidebar, let's copy the content. We need to copy the font of some icons for Facebook, Google, Pinterest, and YouTube. Cut them out. I can actually just delete the module now, and save that. Back into the widgets, drag one more text box into the sidebar. The title is Followers. Paste in the content and hit "Save." Then back into the blog and check, it's all working. Good with the Search, the About, the Archives, Categories and the social media section. Great. A lot of these sidebar looks pretty much the same as before, it's now a lot more modular and it allows the logged in user or the site administrator to be able to change the about or add new widgets. That's pretty much everything done do this bit. I just want to add a little bit of CSS, particularly for the Search box just because the Search button needs a little bit of room. I will also make the Search box look more like the input buttons that we used in the Bootstrap website. Let's go over to the style.css, and then copy a comments. Then we'll make a sidebar section. Just above the mobile styling, change the comment to be sidebar. Each one of the sidebar modules has a class of sidebar module. We'll start with that. The class of sidebar module, and then we'll start with the input. To space out, we are going to have some margin of 10 pixels. I'll set the maximum width to be 100 percent. Save and take a look. Now there's a little bit of spacing around the inputs. Next we need to get the ID of the class for the input button. Go into the developer tools and then select the magnifying glass, and click there. We can see that we've got the ID of searchsubmit, and then back over to the style sheet. Create the ID. In fact, instead of putting the styles or duplicating the styles in the sidebar, we'll just add these, open the global section. If we look for the styles for the button, Default, we're going to be using the exact same styles for this. We can also add this onto the end. The ID was searchsubmit, and then save that. We'll also add the hover. ID of searchsubmit, and then hover. Save that, then refresh. Now that's working, so we've got the same styling for the button, and hover works too. That goes, that's all working and that's how you add custom widgets to WordPress themes. 35. About us page: In this video, we're going to create the About Us page. We've already got the template for that in the bootstrap design, so it's going to be pretty straightforward to make. Go into your text editor, create a new page, and save this page as a page-about.php, and to get started, we're going to copy the page news template. So copy the contents and paste this into the about template. We don't need the sidebar or the blog section, so we can pretty much delete everything off this page. We'll delete that and change the comments at the top for the template name to be About Us. Then go over to the WordPress Dashboard, and then next, we're going to add this template to the page that we created. So go to the pages and then look for the About Us page and hit Edit. Then we can change the template to the About us template, and then update that page. Now we can go over to the Bootstrap site. If we open up the folder and then open up the About Us page in the text editor. I'll shrink that down, and then drag about.html into the text editor, and then we can copy all of the section and copy all of the About Us section. We don't need the header. We've already got that. We don't need feature section. That's done in WordPress. Copy the About Us section, all the way down to the closing section tag. Copy that, and then go back into the About Us page and paste that between the header and footer. Next we just need to correct the image file path, so I'm just going to copy the PHP from the index page. Just look for a image. In fact, we need the front page for that. So copy the PHP file path and then go into the About Us page. We'll start from the top. We'll go with the divider image to start with, so paste that in, and make sure you've got the forward slash before the images folder. Then scroll on down. Add this to all of the rest of the images. Then hit Save, and then head over to the About Us page and see if that's working. So down to the bottom in the footer menu, the About Us section. That all appears to be working. We only need change the text on the featured image and we do the in the functions, the same way as all the rest. So find the feature text function. We're going to allow WordPress to pull in the page title in the same way as we've done with the news template. So we'll have the site name of Tranquil Spa, and then the next line is going to be the page title. If we add this to the same elseif statement, so copy the page template. Copy each page template, and then the brackets, and put in the all symbol, which is the two pipes, and then paste this in. But this time, the page template is for the page-about. Save that and refresh the page. That's all working. We've got the site title, and then the page title below. That's all finished now with the About Us page. 36. Contact us page: This is the Contact Us page that we created in the Bootstrap template. Now we're going to convert this over to WordPress in a similar kind of way to the bow page we created in the last video. So it's going to be pretty straightforward to convert now to most of the hard work in Bootstrap. So as usual, we're going to create a new page and services page-contacts.php. Then we're going to use the page news template to get started with. So copy all the contents and then paste it in. Then back up to the comments. We'll do the same as before, but this time with changes to Contact Us. Then save that. If you go over to WordPress and then into the dashboard, and then look for the page that we created. So the Contact Us and edit. Then change the template that we're going to use to be Contact Us and then obtain that page. Then backup to the text editor. So we are going delete all the block section and also the sidebar, all the way down to the footer. So leaving the header and the footer in. Then next we need to find the Contact Us page we create in Bootstrap. So go back into the traquil-bs folder. Then dragging the contact or HTML into your text editor. Then we'll copy this section which is the contact bar. So look for the Contact Us section comments. Then copy all the way down to the close and section tag, which is just before the footer. So copy that. Then paste this in between the header and the footer. Then back to the top of the page. So a couple of small changes to make on this page. First of all, we got the level two heading, which is just static text. So we'll change this to be WordPress php. So php, the underscore title. Then close it off. Now use php, it's pull in the page title. We need to fix the image file paths. So I'm going to go back into the front page and also copy the same part that we did last time, which is the php. Again, don't forget the forward slash. So back into the contact page and paste this before the divide image. I don't see these anymore. No, I think that's okay. So let's see that's working. So go back to the site. Then in the footer menu select Contact page. Okay, good. So the only thing to do is the feature tech section. So we should know how to do this by now, if you go to Functions.php, and we'll use the same blog info name and also the page title. So it's pretty simple to add. We can add this to the same function. So copy this page template and then paste-up below. We need to put the awesome link and change page about the page contacts. Okay. So save and then refresh. So that's the Contact Us page now finished, and join me in the next video when we create the falloff page. 37. Custom 404 page: This video is all about creating a custom 404 page. A 404 page is where you go when the page isn't found. So essentially when you are a little bit lost on the website. If we go to the URL at the top bar and we type in unrecognized page, such as a lot of A's, and then hit "Enter", so this is the page that you're taken to. We've got the WordPress loop and some of the sidebar information, which is one of the backup templates. But we want something a little bit nicer and also maybe some options and some links to get the user back on truck. If we go over to the Text Editor and as usual, create a new page and save this page as 404.php, and copy the page About. We use this as a base for our 404 page. Paste that in and save. Change the template name at the top. We're going to call this 404 page. Refresh that. Now we've got the About Us template being used when we've found the 404 page. First of all, I'm going to start in the feature text area. Just add a little bit of text just so the user knows that they're lost and they need to get back on track. Go to the function.php, and then in the closing curly brace after the title, we'll add another elseif statement. But this time it's going to be if the page is 404 and then the braces. So if the page is the 404 page, we're just going to equal out some text. You can put in whatever text you want but I'm going to put "Whoops, we're a little lost." Then see if that's working okay. We've got a little problem, let's check that out and see what it is. I think it's just missing a semicolon at the end. Now we've got the text appearing on there. What I'm going to create is I'm going to delete the sample text, and then we're going to create four separate divs, which you're going to share with some links. The links are going to be to Archives, Categories, Recent Posts, all by the tags. We're going to put these links in with the widgets in a similar way to how we used them on the sidebar. Go over to the 404 template. Instead of About Us as the level 2 heading, we're just going to put some text in to say, 'Let's get back on track'. Open up the PHP_echo and close off the PHP. The text is going to be, "Let's get back on track' with a colon at the end. There's a problem there. Let's take a look. Because we've used a single quotation, we need to change the surrounding quotations to be double, and then don't forget the semicolon at the end. It looks now we've got the, Let's get back on track level 2 heading. We can delete the sample text after the Lorem ipsum. Delete the first paragraph and also the second paragraph, but keep the surrounding row we'll reuse up. We're going to create four separate divs for the widgets. So add a div with a class, the bootstrap class of col-sm-6. Then just copy this div and paste three more times. So we've got four sections. We touched on widgets earlier on in the course in the sidebar section. We can also use widgets in various offer parts of the sign. Let's add them in here. Open up the PHP and then it's pulling the widget. We use the_widgets, and then in brackets we use the name of the widget that we want to pull in. First of all, to get the archives, we use WP_Widgets_Archives, and then a semicolon at the end of there. The categories is exactly the same. But instead of archives it's categories, and then we'll provide a link for recent posts. So paste that in. But this time in brackets, it's WP_Widgets, then Recent Posts or Recent_Posts. Then to get a list of the available tags, instead of archives, it's Tag_Cloud. So Tag_Cloud and save that, then refresh the browser. It looks as though there's a problem with the recent posts. That needs to be recent, so remove the s at the end there. There we go. Now the user can now get back to a working page by selecting some of the links below. By the way, if you want to use any different widgets or different links, you can find these in the codecs under the widget section. You don't need to use the four that I've shown there. Now that's all working, I just want to add a little bit of styling, just to make it fit in with the rest of the website. We're going to put the same one pixel border with the rounded corners around each of the four sections. Go to the style.css and it will create a 404 section. Copy any of the comments, then head right down to the bottom. I'm going to make the comments be the 404 page. So the widgets, you got a class of widgets. To keep the styling consistent, we're going to use the same styles as we used for the sidebar or the sidebar modules. If you go up to the sidebar section, look for the sidebar modules class, and then copy all these. Then paste these back into the widget section. Save that, then take a look. So we needed that now, that looks a lot better, and it just looks a little bit old with the boxes being on even heights. So just to make that look a little bit better, I'm going to add a minimum height of 300 pixels and then refresh that. Now make sure that the sections with not much content take up a little bit more height. Thanks for watching, and that's the end of our 404 page. 38. Organise our code using get template part: When building websites or doing any kind of coding in general, one thing we want to try and avoid is retyping the same code over and over again. If we go into our homepage, we've got the facility section. We've used is a couple of times on the website now. So we've reused the same code. So we've got to in the front page. If we also go down to the about us page, we reuse the same section at the bottom. It's also in the 404 page that we created in the last video. One way we can reduce the amount of lines of code in our website, and make our website a little bit more organized, is to use the get template part. This is basically just a section of our website, which you put on its own file. We can then call it into our page just the same way as we did with the header and the footer. To get the code for this section, we're going to create a new page. I'm going to call this the content-facilities.php. Let's start by going to the front page of our website. If we look for the facility section, which is this part here. It's the div with the class of row on facilities. Look for the close and row tag. So cut this content out. So cut that making sure that you still leave the container in place. Then in the file we just created, we can paste this in and then save that. Then go back into the front page, and in the same section that we've just remove this content, open up the PHP tags. Then we use gets_templates_part. Then in the brackets we use the name of the template that we just created. Its content-facilities. Let's save that and head over to the front page and see if it's working okay. Yes, so that's all there. Just to show that it's pulling it from the template. If we just make a spelling mistake there and then refresh. You'll now see that that's being removed. Let's correct that and save. Copy this section of PHP, and we'll do the same in 404 page on the bowers page. So we'll start with the page about, then look for the div with the class of facilities. Find in the close and row tags, and delete this section, and then paste it into PHP. The same with the 404 page, so as the row facilities closing tag. Lay down paste in the get template part and hit "Save". Let's go over to the website and see if it's working. We know all from page is working well. Let's go to the About Us page and it just there. Let's type in a address which we will recognize and we check to the 404 page. There's the facility section again at the bottom. We can use this with any section of the website that you want or if you create in your own custom theme. If you find you create in the same HTML over and over again, just put it in its own template and pull inward you get template part. It really makes your website a lot more organized. So that's it, and I will see you in the next video where we'll create the custom template for the search page. 39. Custom search template: Welcome back guys. This video is all about creating the search template. A few videos ago when we created the sidebar widget, we also added a search box. If you search for something in the search box, such as news, you can see that it should work pretty much straight outside the box. There's nothing we really need to do to make that work. But one thing we can do is give our theme a custom search template because at the moment, it's just default back to the index page. Which is why we've got the pretty similar layout to the blog. Which is fine for now because we want the search page to look like the blog. But we'll create a custom template so we can add the feature text at the top and we'll also show the term in the feature section that the user researched for and also print out a statement in case there has been no search results found. over to the Text Editor, new page, save as a search.php. It looks pretty similar to the blog page. Copy the contents of the index page to get started, and paste that in. Just to check that the search template is actually working and it's overriding the index page just type in some random text in there and save and then refresh. There we go. we can just see that the text that we created is at the top there and this means that the template is taking effect. We're going to move that now. Pretty much all the work we need to do now for this template is in the functions page, because we are going to be working in the header section to create the feature text. Go over to the functions.php and then below the 404, we'll add another elseif statements just on the curly brace there. So elseif is_search. At the very top of the text, we'll just do a Tranquil Spa Official Blog. Copy that and then paste that in and let's see if that's working. Below that we'll add a break tag and a semicolon at the end there. Then underneath this we're going to print out the search results or the search term that the user has searched for and instead of echoing this to the browser, we're going to use printf and then in the brackets we're going to start by typing some plain text. search results for and then the colon. Then to show in the results of the search query use the percent and the s and then put a comma after this section, and then use the get_search_query function, so get_search_query and this whole thing needs to be surrounded by brackets. So one before, one at the very end with a semicolon. The reason why we're using printf instead of the echo is because we use it in formatting in the search results and printf allows us to do that. Save that and check if it's working by hitting "Refresh". You can try this a few more times to check it's working. we've got the news as the current search term, so let's change this to hair and that seems to be working fine. I'll do one more. I'm not going to post that, so we'll just check Lorem the Lorem Ipsum and we should get lots of post for this. That's all working fine. If you notice when we search for something before such as hair, we got the error message of sorry no posts matched your criteria. We want to make this a little bit more specific to the search rather than the posts. Go over to the search.php and then scroll down to the bottom, and so we find the error message there, so just delete that and instead we'll add our own custom message of sorry, no matches for and then it's pulling the word that the user searched for. We'll just add onto the end there the function of get_search_query and then the dot to concatenate, small text onto that so start by opening up the quotes again and a comma of please search again. Let's save that and take a look. There's an error message there so let's take a look at that. It was a spelling mistake there, that should be get_search_query. Now that's working we've got the error message. Sorry, no matches for, I'll just need to the space after the word for and then refresh. For hair, please search again. Thanks for watching, and that's how we create a custom search page in WordPress. 40. Advanced custom fields part 1: Welcome to this video on advanced custom fields. So far all of the changes that we've made so far to the theme, we've done encode in the text editor, though if the end user of your theme want to change some information, some text or some images, we need to provide a way for them to change content quickly and easily without knowing how to code and a great way of doing this is by adding advanced custom fields. If you go over to the website, which is advancedcustomfields.com, this is the website for a really easy to use plugin, which we're going to implement into our theme in this video. Because this is a plugin, we can add this easily in the dashboard. Go on to the dashboard, and then select plugins, then add new. In case you've not used a WordPress plugin before, it's just a way of adding extra functionality to the WordPress call, and there's thousands of different WordPress plugins available, and it's really worth a quick search to find some great features to add. I'm going to search for advanced custom fields, and then Enter. The version I'm going to use is the first one which comes up, which is the advanced custom fields, and then select "Install Now". Once you've got the success message at the bottom there, then click on "Activate Plugin". Now that's activated, we get a new option in the dashboard, so go down to custom fields and click on that. I'm going to show you how to do this by going through the front page, changing some of the areas on there, such as the text on the office sections. I'm going to enter a field group, which is a group of fields which you want to change. Select the "Add New" button, and keep this organized. I'm going to call this section the front page, then publish that, and then I'm going to add a field, and a field is one of the areas which you want to change. If we go into our front page, so back into the local host and the Tranquil site. I'm going to start by changing the feature text on the front there, and this is going to be a field. Back over into the dashboard, the field label is the name, so we'll call this the feature text, and if you just press Tab, WordPress will automatically generate field name, and this is the name that we'll add to the code later on. The field type is okay as text, and then we can add some instructions which shows up in the dashboard for the user. I'm going to change this to use this field to change the main feature text, and required, yes, you will not be always there. You can create a default value if you want, but because it's required it's not really needed for now. Add this field there. Now we've got our feature text field included, and we've got the field name of feature_text. I'm just going to copy that name, and then in the function section, if we look for the featureText function, and in the front page section, we can delete this fully responsive premium spa message. Delete that, and then we put in the function, the_field, and then in brackets, we put in the name of the field that we just created. We'd copied that before, so paste in feature_text and save. If you go back over to the homepage and refresh. There's nothing there for now because we need to add this into the dashboard. Because we only want these custom fields to show up on the front page, we need to change the location to be the page type equal to front page, and then update that, so back to the top and hit "Update". Now if we go to the front page and then edit page, and then scroll down, we should see the feature text section that we just created. Now we've got this as part of the dashboard. The user can add or change different parts of the website without knowing any code. You can put the heading back in, so FULLY RESPONSIVE, and the break tag, PREMIUM SPA THEME, and the break tag, FOR WORDPRESS, and update, and then view the page. There we go, so that's our text back in place. If we go back to edit page, one thing I just want to remove is the content editor because our page is generated via the template. To remove that, just go to the advanced custom fields, and then in the hide on screen section, just check the content editor, then update, and then refresh the edit page section, and now that's gone now. There you go, so that's how you add a custom field in WordPress. We'll continue the front page in the next video. We'll start in custom fields to the latest Office section. 41. Advanced custom fields part 2: Now we understand a little bit more about how to use advanced custom fields by changing the featured text area. We're going to continue with the front page and I'm going to show you how to do it for the latest offers section. Go back into the Dashboard, and then the Custom Fields tab, and then click on the "Front Page". Because we are going to be creating the free special offer actions, what you're going to be pretty similar, I'm going to add a tab to section is off. Add a new field and the label for this can be Offer 1 and the field type is going to be a Tab, and then add that. Then a second tab for the Offer 2, and change the text field to be a Tab, and the same for the offer number 3. Again, change that to be a Tab, and then close up. Now, let's get started with the Offer 1. This time we'll add a field. This field will be the offer price. We'll choose the generated field name. Because this is the price, we need change it from text to be number, required? Yes. I will just close the field. So now we've got the offer price. This is going to be for the first offer. So we can just drag and put this under the Offer 1 tab. So then we'll create now the offer name. This can be okay as text, required? Yes, and then close up. Then put is offer name just underneath the offer price. Then because each one of these special offers has two lines of text, we'll do two separate fields. So Offer Line 1, we'll put that as required too. Then, also add Offer Line 2, it's okay. Is text required? Yes. I'm going to close our fields and also close that one. Then drag these up in the first tab. Now, because we're going to use the same fields for the offer 2 and offer 3. If we just go into the offer 1 fields, we could just click on "Duplicate". I'm going to keep the offer price text as the same. But we need to change the field name, which I need to offer_price_2, then close up. The one that we just created, which is the offer_price_2, then drag this down underneath the Offer 2 tab, which is just there. Underneath the offer price, we'll duplicate the offer name. I just remove the copy and change this to offer_name_2 for the unique field name. Then close this. Offer_name_2, drag this down to the Offer 2 tab underneath the price. So I'm going to need to duplicate the Offer Line 1 and Offer Line 2. So duplicate that one. Offer Line 1, keep it at that. This I'm going to change the unique name to offer_2_line_1, and then close up. So offer_2_line_1, drag this down into the second section again, just below the name, and we can duplicate this. This time, its Offer Line 2. This time, its offer_2_line_2, and close up. So I hope that makes sense so far. So we've got the tab for offer line 1 and the first offer has a price, a name, and then the two lines, and then a second tab for the offer 2 and again, we've got the price, name, and the two lines, making sure that each one has a unique field name. Now, we just need to do a third time for the offer 3. So duplicate the price, keep the name the same below offer_price_3. Then close that field, and drag the offer_price_3 down to the offer 3. After offer price, we need offer name again. So we duplicate offer_name_3. Then close that and drag offer name 3 down below the price. Then, we're nearly finished now, we just need to copy the line 1 and line 2. So offer line 1 and then the field name is offer_3_line_1, and then close, and drag that into its right place and duplicate line 2, this time the unique name is offer_3_line_1, and then drag that down to the very bottom. Now, we did not hit the "Uptake" button. I'll show you why we'll put it in tabs now. If you go over to the homepage and then select "Edit Page", now we've got the Offer 1, Offer 2, and Offer 3 in individual tabs whereas if we didn't put the tabs in, we'd have a long list of fields and it may get confusing for the user. So then if we go into the front-page.php and then we can add the PHP to link to the custom fields. So go down to the latest offers section which is going to really decide but to give you a small room. First of all, if we delete the price of the first offer and then open up the PHP, and then we use the same as the last video, the_field, and then in brackets, type in the field name. The first one, if we go back into the Dashboard on the Custom Fields, the offer price had the field name of offer on this call price. We'll link that in there, and then copy this and then paste this in place of the level 3 heading. This is called the offer name. So change offer_price to offer_name. The Family Pool, paste the PHP in, and that is the offer_line_1. Great Day Out is changed to offer_line_2. That's it for the first field, so if we save that and then go over to the homepage and scroll down. You should now see that we've got an empty latest offers section because we've not put in the text in place on the Edit page. Offer 1, because this is all blank, we've got nothing showing up, but we'll fix that soon. Keep going down to the second offer. This is offer_price_2, then offer_name_2. The first line text. We need to change that to offer_2_line_1, then offer_2_line_2, then down to the third one. Lastly, the price. So offer_price_3. Then underneath it, offer_name_3. Then the text. So its offer_3_line_1. Then lastly, it's offer_3_line_2. So save that. Now, our homepage should be blank or at least the offer should be blank anyway. All that's left now is put the content back in in the Edit Page section. So if you want to go off and do that yourself, feel free to do that. If not, follow along with me. First of all, the offer price was $60, the offer name was FAMILY OFFER, line 1 was Family Pool, then Great Day Out, then go to offer 2. This was $120, the offer name was FOR THE BRIDE, offer line 1 was Hair & Make Up, line 2 was the Full Pamper Package, and then onto offer 3. The price was $90, and this was WEEKEND PASS, line 1 was Modern Facilities, then line 2 was Perfect Gift. Then Update that and go to the homepage. Let's take a look at that. We're just missing one of the fields there. Let's see what the problem is. Offer_3_line_2, that looks okay. Let's go into the dashboard into Custom Fields. Let's take a look at that and see what the problem is. I think we've got two underscores there. Let's just update that and head back to the front page, refresh. Still nothing in, no minutes added back in, I'll change the field name. Offer number 3, which needs to add the perfect gift into that and Update that. There we go. That's all working now. I just want to add a white horizontal rule just to separate the two lines there. Just add this between the offer_line_1 and offer_line_2. Offer_line_1, just after the closing p tag, add a hr in there. Then copy. Then the same after offer_line_2, do the same in the second offer. After line 1 and 2, the same in the third offer 2. Save and then refresh the browser. There you go. So that's how you use advanced Custom Fields in WordPress themes. Feel free to carry on and add as many fields as you want to the website. But I'm going to leave that there for now. Thanks for listening and will see you in the next video. 42. Custom header images: In the last couple of videos, we've looked at advanced custom fields and we've allowed the administrator to change certain things such as the text on the website. In this video, we are going to make our website even more customizable by allowing the admin or a certain user to change the background featured image without knowing how to code. WordPress allows us to do this in what we call custom headers. If you go over to Google, and search for the codex custom headers, it should be the first result. So going to the custom header section and then if we scroll down the page, and if we look for the example, so copy this example and then go into the functions.php. This can go right to the very bottom, but still within the PHP tags. We're not going to have the fixed width, so we can remove that or the fixed height. I'm just going to comment these two lines out, and then we've got the default image path in case the user doesn't upload an image. So the default image is going to be the lakebg, and that's been our images folder, so that's okay. Save that and shown out one more thing into the array, which is uploads. This allows the user to upload an image, so uploads equal to or greater than and that's going to be a Boolean of true. Then if we go into the header.php, we can change the image location. So find that file and then scroll down to the feature section at the bottom and then we can delete the image source, so everything between the double quotations. Rather than having this image, which is being pulled in from our theme folder, we can use the custom header. So between the php tags, we use the WordPress function of header underscore image and save that and then go over to the WordPress Dashboard, down to Appearance and then Customize and then select the "Header Image" and we can add a new image. So this is the posts thumbnail, so we'll upload a new image. So in your images folder, there's a second background and now which is lakebg2. Select that and Open and then put in the old textile lake backgrounds, then select that and skip cropping, and then Save and Publish. So once I've saved, just tick the X in the corner and then go to Visit Site and there's our new image as the background. So now that makes it really easy for the site owners to change the background image. They're just need to go into the Dashboard and customize like we just did them, and that's the end of this video. So thanks for watching. 43. Adding the post class: Welcome back. Our WordPress theme is beginning to take really good shape. This video is all about making the blog posts even more customizable by adding the post class function. If you want to find out some more information about the post class, just head over to the WordPress Codex and search for the function of post class. Well, basically, adding a post class for our theme allows the WordPress theme authors to have better CSS control over the posts. So for example, we can set CSS values for the posts by their ID or by the category name. So we can maybe have the blog with different background colors depending on the category name or the tag. So as an example, I'm going to put this into our theme, and allow styling by the ID. So currently if we go into our blog, and if we go into the blog section. Then if we go into the Chrome Developer tools, right click Inspect Elements, and then if we use the magnifying glass, and if we search for one of the blogs which has the class of blog post, and then take look, you can see that the div has a class of blog post, but there's no individual ID. So if we wanted to style individual posts, we couldn't do that because all the posts have the same class. So let's add an individual ID to each one of these blog posts. So I'll just close that down for now, and then if you go back over to the Codex, and underneath the usage heading, copy the PHP. Then go to the index page, and then find the div with the class of blog post, and then just delete this line, and then paste in the PHP. So this will now add a custom ID to each one of the blog posts. We just deleted the class of blog post. So let's add that back in now, and then save that. Then if we refresh the blog, and it'll go back into the developer tools, as we've done before, and then hit the magnifying glass and select the blog post. Now if you look on the right-hand side, you can see that the postal has the class of blog post, but straight after it, there's now a generated ID. So if we wanted to style this individual post, we've now got a reference for the CSS, and you can use this in a similar way, if you wanted to use the category name or any of the other values on there. We'll just head over to the CSS and check this is working okay. So we've got a blog post ID of 50 there, and then we shove a unique one below. So this is the post all 40, and you can see this is 38, 36, 34. So we'll just head over to the style.css. Then if you go to the blog section, we're just going to add one style into here. So the id of post-50, which is the top one, and to check it's working, we'll just give it a background color. Now I'm going to set this to bbb, and save that, and 50 was the top one. So I'll hit Refresh. So there we go. So the background colors changed to gray, and that's because this has a unique ID. So therefore the styling will only take place for this blog post. So hopefully that's give you some ideas of how you can customize and style your theme. So thanks for watching and I'll see you in the next video. 44. Making our contact form functional: Welcome back. Earlier on in the course, we created the Contact Us page, and the link is down at the bottom in the footer. If we go into the Contact Us page, we've still got the bootstrap design at the very bottom for the Send us message section. But it doesn't actually work at the minute because it's just HTML and CSS. In this video, we are going to make sure that this works by using a popular plugin called Contact Form 7. So we'll go over to the "Dashboard" and select the "Plugins", and then in the search box, so we go to "Add New" first, then in the search box, search for contact form 7. Contact Form 7 is one of the most popular WordPress plugins for creating contact forms. Hit "Install Now", and just got a few moments to install, then go to"Activate Plugin". Once you've got that installed, you should now see that there's a new option in the dashboard called Contact. Click on that, and by default there's already one contact form there as an example. Click on "Edit", and when we take a look out how it's constructed. So this section here is going to be our contact form. In just a moment, we're going to head over to the contact us template and then we're going to cut out the contact section and paste it in. We need to replace some of the values in the form using the same formatting the contact form requires. When working with this form, each one of the sections is a particular input. We need to put the input type and also the rest of the information between the square brackets. To start with, let's take a look at the first example. This will create a input with the type of text, and then followed by the star. The star means that this is required, so the user must enter the name before they can submit that, and then your name, which is the name of the input, and then pretty similar examples below. We've got the type of the input type of email, which is a required field, and the name is your email. We can also add values over inputs such as text areas and submit buttons. I'm just going to delete this for now, and then we're going to go over to our Contact page. We need to go to the page-contact.php, and then we're going to copy the full section for the contact form, and then look for the div with the class of well, which is right at the bottom, so look for that, and then find the closing div or the closing tag. Copy all this section. In fact, I'm going to cut that out because you don't need it anymore, and save that, then we can paste this into the contact form. The first thing we want to do is delete the form tags because these added back in automatically. Delete the opening and the closing tag. Then we need to replace our input types, so just delete the full input section, first of all for the name. Then we'll put these back in in the same format as we looked up before in the example. So between these square brackets, the first one has a type of text and this is for the name, so we want this to be required, so put the star in there, the name of your hyphen name, then we need to put our classes back in, so the class and then a colon. Then the first one is going to be form-control, and we also had an id in there, so id with the colon of inputs-name, and we can also add the placeholder text, so placeholder, we don't need a colon after that, so just a space. Then between the quotes, put the name of name. That's all we need to do for the name input. I'm just going to copy this and then go down to the next input, which is the email. So delete that and then replace that with the code in the square brackets. This time, instead of text, this has got the type of email, and we'll also leave this as required. The name this time is going to be your-email, and we still need the class of form control. But this time the id is going to be inputs-email. On the placeholder text is simply email. Next, we'll replace the text area so delete that section, and then paste in the new code. This time, the input type is going to be textarea, we'll leave this field as required, but this time change your name to your-message. The class of form control, we can keep that there, but we need to change the input, it's from input name to input-message. Then after that, we need to tell the form how many lines for the text area to display as default. So we're going to set mine to three, so we do that with an x and then 3. Then the placeholder text changed from name to Message. Then the last part of the fall is the input, so delete the submit button from the bottom of the form, then open up the square brackets. Inside, we give the type of submit, the class is going to be the bootstrap class of btn, and then the second class of btn-default. So there are the same as we've used in the bootstrap site, and then the text in brackets of Submit, so "Save" that. Because we've taken the contact form out of the contact template, we need to put this back in. If you copy the short code, so copy that part, then head back over to the page-contact.php, and in the same section that we'll just cut the code of, open up the php, and then we echo to the browser, do_shortcode, then in the brackets and the quotations, paste in the short code and say that. Now, if we go back into the WordPress sites and hopefully, if we go down to the Contact page, we should see the contact form all working correctly, which is, so that's good. So that's all displaying fine is one or two little things we need to change in the "Dashboard", so go to the "Contact" section again. It's actually get this form to send to the website administrator. We need to put in the email address to send to. That can be done in the Contact form under the Mail tab. We can change the default values and instead the email address you'd like the messages to come through to. You can also go in the Messages section, and you can change the messages that the user gets once he send emails, and as default values already set in there, but these are all available to change. Once you've changed up, hit "Save", and that's it. Now, we shall have a fully functional Contact to section. Thanks for watching and we'll see you in the next video. 45. Adding WordPress core CSS: Okay, welcome. So far, we've added all our Bootstrap CSS and we've also added some custom CSS. But this is just going to be a quick video, just to add in some WordPress core CSS, which is required for the theme. So we head over to Google and search for WordPress core CSS. The first result should be the codex with the CSS section, so select that. Then, if you scroll down, you should find there's Core WordPress section, which we're going to copy and place in our theme. Now, the majority of this is for captions and aligning images, and a little bit for accessibility. These are required WordPress core styles. So I want to copy the section, all the way down to the very bottom. So also screen readers there. So copy that, and then, over to our theme folder into the style.css, I'm just going to paste this just above the Global section and then save that. So we've got the CSS for screen readers. We got some custom styling for captions and the caption text on images. There's also a margin added to the captions and also some styling for the align, for the right, left, center or none. So I'm just going to save that, and that's it. That's all I wanted to show you in this video. We just wanted to make sure that the core styles weren't missed out of our theme. So that's it and will see you in the next video. 46. Preparing our theme text strings for translation: When building WordPress themes it is really important we consider non-English speakers who may be using our themes. This section is all about preparing our theme, and providing the ability for people to translate the theme into different languages. Now most of us don't have the ability to fully translate the theme ourselves. However, what we can do is develop whole theme so it can be easily translated by others or in other words, make our theme translation ready. This process is known as internationalization, and there's also another term that you may come across called localization. We'll look at this more in the next video. This is the process of actually translating the words in the theme, but in this video we're just going to look at the actual preparation or the internationalization. Actually making our theme translation ready. It's not as difficult as it may sound. There's a few steps to need take such as adding a function to our functions file, creating the languages folder, to store all the translations in. We also need to look through our theme templates, to let WordPress know which words we'd like to make available for translation. To get started, over to the text editor or actually you can go over to the themes folder. We're going to the tranquilwp folder. Then we're going to add one new folder, and call this languages. Then we need to go into the functions file and link this in the theme setup. So over to the functions.php. I'm going to add this within the tranquilwp setup function. Right at the top, we need to use a function, load_theme_textdomain, and then the brackets. If you remember the text domain, we set that in the style.css, in the comment at the very top. We need to make this the same as the text domain, which we put in there. We can copy that. Then back into the functions. The first parameter within the quotations is the text domain. Then we need to put inside the file path to our languages folder that we just created. We separate it by a comma, get_template_directory, then the brackets. Then we need to concatenate onto the end, the languages folder. I spelled that right. Within the template directory, we then have the languages folder. Use the forward slash, and then languages, and then end that with a semicolon. Now the next step is to locate any texts or strings which we want to make translatable. In this video we'll just be concentrating on the text strings, but in the next video we'll take a look how to translate function calls. For now, let's start by going into the 404 page. I want to start from the top. So we'll start with the 404. We need to identify any text strings. In the 404 page, at the top we echo into the browser, some text there. We want to make this available for translation. The way to do that, is just after the text, add a comma. Then simply between quotations, paste in the text domain of tranquilwp, and then save that. Then down to the archives page, we need to locate any text strings. So scroll on down. There's an echo function there, so we need to translate this text. Again, we'll just separate the text with a comma. Then in the quotations put in the text domain. So WordPress can identify it, and that should be off. Now we'll look at the functions in the next video. Save that. Then moving down to the comments, because this is the comments file for the twentyfourteen theme, I'm just going to use a search and replace. We can see that some of the functions, it's already there include the twentyfourteen text domain. So we need to replace all of these. I will go through and do those individually or do a search and replace. In brackets, you just go to Find, Replace, and look for the word twentyfourteen, and replace that with tranquilwp or your text domain, and hit "Batch" There's eight matches isn't there. Hit "Replace" and then save that. The next one is the content-facilities. We need to do the links for this page. At the minute, we just got plain text for the four links. We want to change that to be a php echo function. Start with the php tags, and then we use the shorthand, which is the underscore, and then e. Then surround the text in the brackets and a quotation, with the semicolon at the end [inaudible] and. Now we've got the text ring. Use the comma to separate that, and then put in the text domain. Just to speed this process up, I'm just going to copy this, and then move down to spa facilities, and replace the hair and make up with the spa facilities text. Paste that in, and don't forget to close the php tags off there, and just there too. Copy that. Then next we've got the lakeside retreat. Again, copy the text, and replace spa facilities with the lakeside retreat text. Then we do the same for the very last link. Cut that text, and paste the last one into there. That's the last one there. Again, because we've got the text domain immediately following the string, WordPress knows that we want to translate this. We'll show you how to do that in the next video. Save that file, and we'll move on to the footer.php. Let's start with the level 2 heading at the top of keep in touch. We need to transform this to an echo, so php, I will see shorthand underscore e, and then the text in brackets. Also put this in single quotes. Then straight after the string, put in the text domain. So tranquilwp, and then after the brackets, semicolon and then close off the PHP. So it's just a couple more to do on this page. The first one is the Follow Us text. So we should be getting the hang on this now. So PHP and then echo, then surround the string in the brackets. Don't forget the quotes. Then separated by a comma, paste in the text domain, tranquilwp, and then the semicolon and close it off. Then in the footer section, there's the Tranquil Spa name at the very bottom. So we'll just copy this php, just to speed that up. Then in the place of the Tranquil Spa text, paste that in. Then change back the text to Tranquil Spa. Save that, that's all the text for the footer area. So after the footer, it's the front page. So from the top, we need to change the level two heading. So I'm just going to paste in the php. I'll just tidy this up a little bit and indent, and then copy or cut out the title and replace the Follow Us section. Save that. So let's copy this again. Then scrolling down the page for more strings, we need to do the same with latest-offers. So I'll do exactly the same as before, I'll just cut out this level two heading and paste this in. Then keep going down the page, so scroll down further down. The next one is the level two heading again of Shop Online. So I'll cut this out and add this to the string. Then just going on down a little bit further, we've got the Shop Here text, which is part of the button. Again, pasting the php and change the text to be Shop here There we go. So hit Save and we'll keep moving down the page. We don't need to do anything in functions. So next it's the header.php, and I don't think there's anything we actually need to change in the header. We've got the title which is dynamic, we've got the navigation menu at the top, but all the page names are pulled in dynamically. So they'll be set to whatever language the user preferred anyway. So keep going down. Notice there's nothing to change in the header. So next is the index page. So scroll down and take a look for any echo functions. We've got the category there, so straight after the category name, put in the text domain of tranquilwp. Then keep going further down the page. There's also the Read more text. So exactly the same in there, tranquilwp. Then that's it for the index page. Next we've got the page-about. So we've got the about us level two heading. In fact instead of making this translatable, we'll actually make it dynamic, so we'll change up to the_title as we've done with some of the other sections. So that's fine to leave as it is. We've got the main paragraph of the About Us text. So I'm just going to leave this section because this will probably be better as a custom field to allow the user to type in their information. So we'll just save this one for now and take look at the page-contact. We've got the title already in there and I think that's actually okay to leave. There's nothing to change on there. So down to the news page. Let's take a look for any strings to translate. So we've got the category. So change that to have the text domain in, the tranquilwp. Again, the same as the index page, we'll do the same for the read more text. So tranquilwp. The pager, the older and newer post will actually need translated too. But we'll do that in the next video in a slightly different way, so we can just leave the news page for now. So down to the page.php, so our basic page template. We've got the echo function there, so we're going to add the text domain straight after there. So tranquilwp, and don't forget to save that. Then next after the page is the search template. So take a scroll down. Again we've got the category. So we change that. We've got the Read more. Okay, so now we'll move on to the sidebar. So there's no strings to translate in there, so we move down to the single.php and take a look at that. So we've got the dynamic title. I think again, we need to do the category. Scroll down further down, we've got the error message. So add the text domain into there. So that's as pretty much finished. I just want to actually go over to the functions page because we did add some strings into there with our featured_text function. So just one or two strings we need to change in there. So I'll do exactly the same. Add the text domain, and if I'll just copy this one. So paste that one in just below. We could do the same for the browsing text, so paste that in. Then just one or two more at the bottom. Because this one's got formatting, we're going to actually leave that and do that in the next video. We're going to do that in a slightly different way. I think that's it for all the text strings. So we'll save that page. So when we download the software to make this translatable later on, we should get all these text strings available to translate. So that's it for all of the text strings, but if the text is part of a function, we need to do this in a slightly different way. If you join me in the next video, I'll show you how to do that. 47. Preparing our function text for translation: Okay, welcome back. Now we've got all of the strings available for translation. We're going to move on and do the same for functions. We mentioned in the last video, the functions such as the pager for the next and the previous posts. They also have text inside the brackets, so we need to do this in a slightly different way than we did before. It's still very easy to do. We start with a similar way to before. We use the comma and then put in the text domain of tranquilwp, but this time, before and after, we're going to surround these in some extra brackets and then use two underscores and then close up bracket off at the end and then do the same in newer posts. The comma, the text domain, tranquilwp, and in the opening brackets, add the two underscores, and then close our second bracket off there. We've also got a pager in the news template. Head over to the page-news and then down at the bottom, we'll do exactly the same. For the older posts, add in the text domain of tranquilwp, and then the extra surrounding brackets with the two underscores, close off, and the same for the newer posts, there we go. Then I just wanted to change in the functions file. So head over to the functions.php. Now we need to change the browsing text, but it looks as though we jumped the gun in the last video and added the text domain in there, but this is actually a function. We need to do the same interval with the brackets, the two underscores, and then close the second bracket off, and then let's look for the printf statement, so scroll down to the bottom. The way to do this with a variable in there is by adding the two underscores in there and then after the string, add in the text domain of tranquilwp, and then save that. That's it, that's just a slightly different way of preparing the text if it's part of a function. Set our theme now translation ready. We've now told WordPress which words we want to make available for translation. So that's it. We'll leave that video there. If you join me in the next video, we'll download some software which will pull out these words which you've made translatable. It'll put them all into a template and allow us to actually translate the words. We'll see you there. 48. Creating translation files using Poedit: So now our theme is all ready to be translated. I'm going to show you next how to do a process called localization. This mainly consists of creating a template file called a POT file, and it stands for portable object template. This will basically be a directory or a catalog of all the translatable words in the theme. Then, we'll use the contents of this POT file to create a PO file, which will actually hold the translated strings in in a language of your choice. So we're going to get started with some software called Poedit. So I'm going to go to Google and search for Poedit. Then select "poedit.net", which should be the top one. Poedit will be the software we use to actually do the language conversion. It's free to download for Mac, Windows, or Linux. There is a pro version which makes it a little bit easier, but we don't need that for now. So simply click on the "Free Download" for your operating system and give it a few moments just to download. So once that's downloaded, unzip the file and download it in the usual way. So I'm going to put mine in the Applications folder. So once you get started, you should see a, welcome window, similar to this. Now we're going to create our POT or template file in Poedit. Go to File and then New and then select the language of your theme. So mine is English and then press "Enter". So then if you go up to the Catalog at the top and then go to Properties. So start with some project information. So I'm going to call mine Tranquil-new. Then, we need to tell Poedit the sources of the translatable words. So go to the sources keywords tab and then to add some keywords, select the second button, which is for the new item. So I'm going to get started with the two underscores. The two underscores was the prefix that we use for the functions. So add that and hit "Enter". Then, I'm going to add one more, which was the _e, which was the echo function. So enter. I'm going to also add one more for escaped strings. So escape esc_attr_e. So we'll also add that one in. If there are any keywords that you use in your themes, make sure you add these in too, and then go to "OK". Then go to, "Extract from sources". Actually need to save this file first before we do that. So go to File and then Save As. Then, this is going to be our POT file. So we're going to save this into our theme, open up the theme folder, and make sure that the languages folder that we created is open. So the theme name we added was tranquil_new. Then, we need to save this as a POT file. But by default, it shouldn't let us do that. It will automatically save as a PO file. So we can just use PO and then we can just manually change the extension if we go into the languages folder. So just click on the file what was created and change the file extension to POT and then use that. So then go back into Poedits and we're going to extract the text to be translated. So select, "Extract from sources" at the bottom. So next, we'll add the path to our theme? So underneath the paths, click on the "Plus" icon and go to "Add folders" and then select the theme folder and then select the tranquilwp theme and then open. Then, click on "OK". So now our POT file has extracted all the text strings from our theme. This is now our catalog that we can use as a template. So save that. Next, we can use this template to create a PO file, which will hold the translated strings. So go to "Create New Translation". Then, we need to select the language of the translation that we want. So we can just select a language that you'd like to translate to. So I'm just going to pick a random one. So it will for Greek and then, "OK". So now if you look at the top of the page, we've got a PO file called EL, which is a Greek prefix. So I'm going to save that. Again, make sure this is in the languages folder and then hit, "Save". So now when we go through the strings, we can see that some translation suggestions appeared on the right or we can manually type them in at the bottom. So it's just a case of selecting the text that we want to translate and then add it in there. I can go for these mainly admin or click on the suggestions and then you get the Greek translation appearing on the right. So once you finish it up, just hit the "Save" button. So now when you go back into the theme and the languages folder, we should now have the POT file which is the template and then we should have two files with the file name of the country you've selected. One should end in PO, which is the translation and then we've also got a MO file, which if you go back into the documentation, you can see this is the actual compiled machine-readable version of the PO file. So we also need that too. So that's it. That's how you translate your theme into different languages. You may not necessarily have to add the PO files into your theme, but as long as you've got the template file or the POT file, we can allow end users to translate into their own particular language. So thanks for watching and that's the end of the translation section. 49. Starter themes: Welcome back. In this video, I'm going to show you a couple of starter themes which are really useful to give you a good head start when building WordPress themes. Throughout this course we've built everything from scratch and that's really a great way to get started until you understand what goes on when building a WordPress theme. However, if we build in lots of themes, we just want to get a jump start on development. It's a good idea to start with a WordPress starter theme and a couple of popular ones are underscores and bones. So a start theme is pretty much what it sounds like. It's not the finished end products which you can download off places like ThemeForest or the WordPress homepage. It's just the theme in its most basic, such as all the necessary files and folders and a lot of the required WordPress functions such as the loop and all the templates and really easy to get started with. For the underscores theme, we can click on the "Advanced Options". Then to simply generate the theme folder, all we need to do is add the information such as our theme name and also some of the information like the slug and author, which will be put into the common section in the CSS template. Then we'll just hit "Generate" and we can download that and there is also an option to add SAS instead of the standard CSS. Another popular theme as well as underscores is the bone starter theme. Just like underscores, it's free to download and it's a really popular starter theme for WordPress theme developers. It is really worth taking a look at if you are planning to build more themes or build themes for living. But one thing to take into consideration when using bones is that it uses SAS by default. So if you're not too comfortable with SAS, you may need to brush up on that or use a different starter theme. So just to give you a better idea of what's included, I'm just going to download this theme and then we'll take a look at the contents and see what's inside. It should be a zip file, so just unzip that. Then if we open that up, we've got the likes of the 404 page. We've got the archive's page, things such as the comments, the functions, the pre-built index page on the header and footer, as well as many other pages that we've been creating, such as the search page, the sidebar, the single dot php and the style sheets. The whole thing is designed to be customized so we'll encourage just use this as the basic starter and then build from there. So if you take a look at the index page and open it up in your text editor. A lot of this is quite familiar. So we've got the get header, php at the top and right at the very bottom, should be the get_footer and the get_sidebar. There's also the WordPress loop, which we scroll past that. So it goes as the open loop. If we have posts and then the loop contents, and it should be plenty of familiar functions in there such as the_permalink, the_title_attribute, and the_title of the_page, and then the_contents. So while building a theme from scratch is a great way to learn and a great way to get started, it's also worth considering using one of the started themes to save you a lot of work. That's it. I just wanted to show you a couple of these themes to get started with. There's plenty more out there if these two don't suit your needs. Just do a quick Google search for WordPress starter themes. I hope that gives you something to think about it. Thanks for watching. I'll see you soon. 50. Thank you: Congratulations on finishing this course. I just want to say a big thank you for taking this course and especially well done if you've made it to the very end. I hope you've enjoyed taking this course as much as I enjoyed putting it all together. I really hope building this project has give you the skills and confidence you need to continue building custom themes for yourself, the paying clients, or even making WordPress themes to sell. We've covered a great deal in this course. Hopefully, you should be now comfortable using Bootstrap. We then installed a localhost on WordPress to begin the conversion. We then set up our WordPress theme folder on index page, and then the header and footer templates. We then continued the conversion to WordPress by adding the nav walker, and also amending the image file paths to work with WordPress. We then moved on to the famous WordPress loop and began constructing the blog index page. We then made sure we could add comments to the blog and went through all the various page templates, and then linked these templates to our code. We then organized our code using Get Template part, and then moved on to more advanced features, such as advanced custom fields, adding a post class, and custom header images to make sure that our theme is fully customizable. Then lastly, we finished off by making sure our contact form was fully functional and also prepared our theme for translation. Once again, a big thank you from me for taking this course. Congratulations for finishing it and good luck in the future. 51. 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.