Transcripts
1. Course Introduction: Hi everyone. My name is Kyle and I'm a web developer based out of Ohio. I've been a full-time web developer for about five years now. And today I'm going to be teaching you how to start building your very own custom WordPress theme from scratch. We'll touch on all elements of a WordPress site starting from the initial local sites setup, which I'll be using lamp on Mac. And solving the core files utilizing a starter template, integrating HTML and CSS frameworks like Bootstrap, as well as a couple of central plug-ins to use throughout the whole process. This course will be geared toward absolute beginners, but I hope everyone taking this class can learn something along the way. Thanks again for taking the course and I hope you're as excited as I am to get started.
2. Local Development Environment Setup - MAMP: Okay, so the first step to get our local WordPress environment setup is to actually install a software called map. So I will be using the MAMP Pro version. There is a free version of man on their website, which will be completely fine for what we have to do here. So MAP is really nice. It makes it really, really easy to actually downloaded, install and set up WordPress websites on your local machine. It takes care of all the server configuration with Apache, MySQL and things like that. It's really just a one-click download in a one-click star and then you have your site up and running basically. So go ahead and head over to MAMP dot info and, and download the free version or if you want to go ahead and purchase the pro version, feel free. There are some settings that you can customize with the pro version that you can't with the free version. I believe the free version only lets you have one site setup. Could be wrong with that. I know the pro version, you can have multiple setup as well as a bunch of other stuff, but okay, so here I am actually downloading the free version of MAMP, taking you guys an example of what that looks like. So you can utilize that throughout the course. So go ahead and click on Free Download once you guys in here. And that's going to take you to this page and just go ahead and download the proper version for your machine. And the install itself is actually pretty straightforward. I'm just gonna go ahead and pause the recording and come back when minus setup. Alright, so my download is ready and I'm gonna go ahead and open that up. It is walk through it really quick. And once this is done, I'll come back. All right, so my download and install it was successful. So now I just opened up MAMP and this is the screen that you guys will see. So like I said, just go ahead and leave everything the same. Go ahead and click Start. All right, and this is the screen that you guys will be presented with this. And as a server starts. And this, it looks very similar to the Pro versions dashboard tools up here has PHP, my admin. This will be important later on in the course. Let's say localhost colon 8888, forward slash, forward slash. Question mark, language equals English. You might, you may or may not have that. If you guys go ahead and actually delete everything after the 8888 and then click Enter. You'll be presented with this screen. And this means that are installed was successful. If you can see this page map has been properly configure and launch and is ready to go. You can see some just general information here, document root. This HT docs is where we're going to store our website files, PHP version, and then there's one file in there currently which is index.php. So great, this was the free version, very similar to the pro version setup. Hope you guys found this helpful.
3. Downloading & Installing WordPress: Okay, So in this section, we will be setting up the actual WordPress environment inside of ma'am. So what I'm actually going to be doing since I have multiple websites already set up and I've worked on in the past. I'm actually going to be creating a new host inside of MAMP Pro. If you are using the free version, just feel free to skip ahead about 30, 45 seconds. If you're using the pro version, stick around. It's a very straightforward process. So you just wanna go down to the plus sign right here. I always leave it as empty. Continue. I'm just going to name this web course and then document root. I'm going to choose and keep it inside of my own folder. I'm going to actually select the web course folder here, open. And then I'm going to leave that unchecked and then create the host. And that's pretty much it. So all you have to do from here, if you're using the pro version is make sure that you have your host selected here. Give it a second to kind of generate what it needs to generate in the backend. Once it's ready, this Open button right here should pop up. For those of you using the free version. You can go ahead and just start the server and that will open up your local host URL inside of your browser. And we can go from there. Okay, so mine is ready to go, so I'm just going to go ahead and click Open. Like I said, the free version will just open automatically when the server started. So I'm going to click Open. And this will show a very similar page to what I showed in the last section. So this is just saying document root is set to the folder that I created PHP version and so on. So the next step here is actually going to get the WordPress files. To do that, you want to go to wordpress.org. Once that page is loaded, there's a blue button in the top right that says Get WordPress. Go ahead and click on that. And then that'll take you to this page here. So in this first paragraph there is a link that says download and install. Go ahead and click on that. And it'll drop it down further to the page. And then you can click on Download WordPress 5.8. At the time of watching this video, that version, it might be different, but go ahead and just click on that and install. And wait for that to download. I'll go ahead and pause and come back when it's ready. Okay, my download was ready. So what that does is actually download the zip file that contains all of the core WordPress files. Go ahead and open up that zip file. And then inside of that folder you will see all these files here, index.php licensed dot TXT. Read me anything that starts with WP dash is a WordPress core file. So those are what actually builds WordPress backend. So what you wanna do is actually have this folder pulled up and then the HT docs folder. What you're gonna do is just delete whatever is inside of that folder, should just be an index.php file. Go ahead and delete that. And then from there, you can actually drag over all of the WordPress files from that download. They'll go and do that. Dragon on over. And then I just clean it up by name. And then that's pretty much it. So you go ahead and close out those two finder windows. Close out this pop-up. And then now if you go back into your browser and refresh, you should get a WordPress page. Basically kind of like a setup page, being kinda walk through that. So once you guys are ready and go ahead and select your language, I'm going to select English, Continue. And then here it says, Welcome to WordPress. Before getting started, we need some information on the database. You will need to know the following items before proceeding. Database name, a database username, their password, the database host, and then the table prefix. So this is where we're actually going to get into PHP, my admin, and actually create the database. So to do that, we're going to jump back over to MAMP and you're going to click on this Web Start button. And then once this has loaded, we're gonna go to the Tools drop-down PHP, my admin. Great. So now inside of PHP my admin, what we need to do is actually create the database. So over in the left sidebar here, go ahead and click on New. Give it a name. I'm just going to name mine web course. Feel free to name it whatever you want. You can leave this alone and go ahead and click Create. So what this did was create a new database called web course. And it has no tables right now. Actually going to create any tables. We're going to let the WordPress installation setup actually do all of that for us. But what we need to do is set up a user for this, this database. So at the top in this bar here, go ahead and click on privileges. Add user. And here I'm going to name mine a web user. Leave the host alone password. I'm just going to do test 123 and then retype it. Test 1, 2, 3. When you're actually doing this for a production site, eventually, or you want to use something more secure right now, definitely find, probably should always use something more secure. This is a local site, so security is not a huge issue. But if you were to put this on a beta site, on a Beta server somewhere or just move it directly into production. That can be an issue. Having a very easy, extremely weak password. Just something to be aware of there. Once that's all set up, username and password, scroll down and click on this Go button. Any of those that come up and then just click go again. And now we're all set. So balance back over to the WordPress setup tab. Now that we have all this information that they want, we can click on, let's go. And now this is the database name. So this is what we created over in PHP, my admin, I named my web course. Make sure that you type in exactly what you made the name. Web course. Using name is web user. And test 1, 2, 3. Leave the database host alone, that's fine. Table prefix as well as find WP underscore standard for WordPress website. So go ahead and click Submit. Says we're all set. It can communicate with the database and we'll go ahead and run the installation. Here. This is some general site information. We can give our site name, the username, and password here, or what we're actually going to be using to login to the WordPress backend. So once the site is actually configured, you'll need to actually remember the username and password you set up here. This was something you are going to be using and referencing back quite often, your email, and you can use your real email. Search engine visibility. I always check that when I'm developing. You can leave it unchecked. Again, it's a local site, nobody can access it. So once this is all set up, go ahead and click Install WordPress. Okay, looks like everything was good. Go ahead and click on Login. And here is where we will type our username and password. And click login. Great. So we are now inside of our WordPress backend. This is where we will actually go to create blog posts, new pages, managed comments. You can manage users, install themes, child themes, controlled permalink, which is the URL structure of the WordPress pages. And a lot of other stuff. You're going to be spending a lot of time in his back-end once we get further along in the course. But this is a great place to be. So, so far we've set up MAMP, we've set up a WordPress site locally. And the next section we'll actually install a code editor. And then we will get into starting, building out an actual theme inside of WordPress.
4. Installing a Code Editor: All right, So in this section we are going to be setting up a code editor. So this is what we're going to actually be using to actually build out pages, page templates, edit any other configuration files that we need to and so on. So I use Visual Studio Code. If you guys are taking this class, you more than likely already have one installed. I do recommend Visual Studio Code. It's really great once you get used to it. I actually used to use one called Atom. I know there's a few other ones out there like brackets and other ones like that. Feel free to use whatever you guys are comfortable with. I use Visual Studio Code. It comes with a lot of extensions that you can download and install that kinda help your code as you type it IntelliSense and things like that. So definitely a lot of benefits to using Visual Studio Code. I believe Adam also has extensions and things like that as well. So go ahead and install whatever you want. I guess I use Visual Studio code, so I'm going to be pulling that up right now. Okay, so when you open up Visual Studio Code for the first time, you'll get a, basically a blank window. So what you can actually do is go to File Open and just open up that 80 docs folder. I have mine inside of documents MAMP sites with course, and open that up. So once this opens up, you can see all of the files here. So starting at the top, WP admin hardly ever touch anything inside of there. Same thing with WP includes. Those are really core files to WordPress. Usually if you mess with anything inside of there, It's going to cause an error somewhere on the site and cause it to not work correctly. Basically, everything that you're going to be editing or adding or doing anything with is going to be inside the WP dash content folder, HT access. You'll probably get into a little bit when you're configuring this for a production site. And then another file down here is WP config. And open that up. So this file basically tells WordPress what database to look for. So you can actually see that here, database name, web course, database user, web user and so on. This is actually the information that we provided during the installation setup of the website. Some off-key, secure key, stuff like that, really don't get much into any of that. Wp debug. This is helpful when trying to debug the WordPress website. We can turn this to true if we get into any issues down the road. This is typically left at false. There are some other things that you can add to this config file. Some caching plugins, add some lines to this. Some overwrites to file uploads can sometimes go in here and things like that. Really the only thing to worry about in this file is the database information. If you're going to be switching servers, are switching database servers or anything like that. You'll just want to make sure that all of that information is updated correctly so that you can continue to work on your website. I'm seeing go ahead and close that. If you go into the WP Content folder, you'll see a couple of folders inside of their plug-ins, themes and uploads. Upload self-explanatory. This is where all of your WordPress files that you upload will be stored. That's anything inside of the media. Wordpress dashboard. So this is where all of your blog images or page images, banners, anything like that, PDF. So you can think of that's where you'll upload those and then they get stored in catalog inside this uploads folder. Plugins, same thing there. Any plug-in that you install will be housed in that folder. Themes. This is actually where we will be working most of the time in this course right now we're press comes standard with three default themes, the 2019, 2020, and 2021 themes. These are great for very basic blog like websites. That's not our goal for this course, our core, this course is going to be all about creating a custom theme to let you build exactly what you want, how you want. We're going to be basically starting from scratch with a bare-bones template and building it out from there. So you can actually delete all these winner. We're not gonna do that right now until we get our other theme installed. But that's what that is. And then you'll also see any child themes that you have inside of this folder as well. So you can see if you expand into one of these, you can see all kinds of files inside of here. Most important ones to really focus on footer.html, functions.php, header dot PHP, index.php, and single dot PHP. Well, they're really all important, but those are going to be the main ones. Header and footer dot PHP. That's pretty standard to keep everything in the header file that belongs there, such as Meta tags, site titles, anything like that. Navigation can sometimes go on their footer, same thing. Typical footer elements can go into the footer dot PHP file and then the functions.php file. This is actually where we will be adding in CSE or CSS files, JavaScript files, anything like that that we need to actually use on the website. We're going to be loading them up inside of the functions.php file. I'll touch on that in a later section. But that's what that file is used for, as well as adding custom functions and things like that. Page. This is a default page template within WordPress. One important thing here to know is the get header function. So I touch on the header dot PHP file. This function right here actually calls that file onto the page. So what's really great about WordPress is utilizing template parts. I consider the header a template part. What that means is you create one file that you can use on multiple different pages simply by calling it in a function. So the header get header is a specific function that calls the header dot PHP file. This function right here on line 17 actually calls a different template part. So you can see the get template part function calling template dash parts content content page. So it's pulling in a file under typical parts content, content page. Anything inside of that file will be loaded onto this page with one line of code, which is really great. And then on line 25, same thing, get footer. That's going to be calling the footer dot PHP file into this file, again with one line of code. So that's what it really great there will touch on more of these files as we get deeper into the course. Search. This is the specific search results page file template. So if you're on a website and view, you want to search for anything related to sports. You would just search sports and then you can actually customize that template that shows the results. Search form is the actual search form single. So by default this is for single post. These things right up here. So anytime you create a new post, that's the default template that's going to be used. And we can adjust that as well. So that is pretty much the overview of the WordPress file structure. In the next section, we're actually going to be installing our starter theme. It's a bare-bones theme, gives you all of the core files that you need to actually create a WordPress theme so we don't have any errors that we run into right away. And from there we kind of branch it out, build it out how a want it, and we go from there. So looking forward to that.
5. Selecting a Starter Theme: In this section, we're going to be installing our starter theme, which will allow us to make a child theme and branch out from there and build it out into our custom theme. So what you wanna do is make sure you are logged in to the WordPress website that we created in the previous sections and head over to appearance and then themes. From here, go ahead and click on Add New. And then over on the right side, we're going to be searching for a theme called blank slate. And it's this very first one here. When I click Install and activate. So at the same is, it's a very, very blank, no pun intended theme. There's no styles, there's no formatting, there's really no structure to it whatsoever. But what's really nice about it is it gives you all of the core files that you're going to need to actually build out the theme. By default, when you create a theme inside of WordPress, it looks for specific files. If we were to just go into this Themes folder over here and just make a new folder and we call it Kyle's theme. With that being blink, blink folder. If we go into WordPress and trying to activate that theme, it's going to throw an error saying we're missing a couple of files. What's nice about blank slate is B, you expand it. You can see it actually comes loaded with all of these files that we're going to need. Footer function's header index and so on. All of those are there ready to go. And then we can actually create a child theme based off of this parent theme, which will allow us to make all of our edits and build out the site exactly how we want to without relying on the blank slate developers and potentially ruining our site down the road. If you guys didn't know the purpose of a child theme inside of WordPress is to kind of separate your edits in your customization of the theme from the parent theme or the main theme. Reason for that, say, we build out our site, we launch it on a production server. Traffic's going to it. Everything is great. Okay, so say at that same time that the developers, a blank slate released an update that fixes the security patch or something like that. If we were to go into our production site and update The Blank Slate theme, it basically would erase everything that we did inside of that theme if we did not do it in a child theme. So say we just went into this footer and we said, Hello, This is a test from the footer. And we save it. And we go back over here and refresh. You can see that's right here. So let's say this was our live site and we went ahead and updated the blank slate theme from the developer. And this line right here, since it was done inside of the parent theme, this would be erased completely. There'd be no way to get it back. So that's why it's really, really important to use as a child theme. Even if you purchased a theme from theme forest or wherever else, you always, always, always want to make sure they use a child theme. You do not want all of your hard work to get washed away from a simple update. So always keep that in mind. And I will be showing you how to create a child theme as well in the next section. But what we did here is a great start. You can kinda click around. I know it's not formatted, but you can see recent posts, Hello World. And this is what a single post would look like here. You can see welcome to WordPress is that your first post, edit or delete it and start writing. There's a test comment. And you can see that our footer line is still here since we put it in the actual footer.html. So that is a theme install. To get started in the next section, we'll go over how to create a child theme. We'll get into the WordPress documentation a little bit and then go from there.
6. Creating a Custom Child Theme: All right, I hope you guys are enjoying the class so far. In this section, we are going to be creating our child theme. So go ahead and jump into your text editor. And what we're going to do now is actually just delete the 2019, 2020, and 2021 themes. We don't actually need those. So by and just delete those. And then on your blank slate folder, what we wanna do is actually run a search and replace for the word blank slate and replace it with whatever you want to name your theme. So what I'm going to do is replace the name blank slate with web course. And I'm going to replace everything in there. Now once that's done, I'm just going to rename the folder as well to web course. And now if we jump back over to the dashboard and go to Appearance Themes, it's going to show an inactive blank slate just because we changed all the names from blank slate to whatever you named it, that theme doesn't actually exist anymore. So all you have to do is just activate your new one. And we're good to go. So you can see current theme, web corps version 2019 0.3. By tidy things, please read tags and stuff like that so we can actually edit all of this information. This is our theme now, so we don't actually need to have any of this in there. We can, of course, keep it for the parent theme, but for our child theme, we can get rid of that, clean it up a little bit. So bounce back over to the Visual Studio code or your text editor. And what we wanna do now is create a new subfolder inside the themes folder. So just go ahead and do that. What you wanna do is name it the exact same thing, dash child. Once you have that folder, the first file that we're going to create inside of this new child theme folder is called style.css. And then the next file we want to create is going to be called functions PHP. And then what we need to do is start editing the style.css, CSS file. So to actually associate this child theme with the parent theme, we just need to add a couple lines of code to get the two to recognize each other. So what we're going to do here is start a comment. And then we're gonna say theme name, web course child. And then we're going to say theme, URI. And I'm actually going to jump over to the web course parent theme and just grab that right here. And then description. We can say web course, child being author. You can say your name, author, your, we can say if you have a portfolio website, you can do that. If you're building this very accompany, you can put that as you can put that there as well. I'm actually going to just get rid of that. It's not needed. Template, this is the most important line here. We need this to match exactly the name of the parent theme, which is my case, a web course version. We can do 1. And text domain can be web course child. And then we're going to close out that comment. So the most important line here is template web course. This will be the name of your theme. This is actually what links this child theme to the parent theme. So make sure that matches correctly. Go ahead and save that. If you want to jump back over to the WordPress themes. By now you should see the word, the child theme that we created. You can see this is the child theme of webcasts, so great. This is exactly what we need so far. Now what we're gonna do is edit the functions.php file to start pulling in style sheets. So our first style sheet and we're going to pull in is actually looking at the blank slate parent theme style sheet. So a renewed switch over to the functions.php file inside of the child beam. And what we're gonna do is just start with a PHP opening tag and then close it. And what we're gonna do is start typing in the function to basically pull in that style sheets. So we're going to do Add Action, WP, enqueue, script, course, enqueue style, semicolon, function, web of course. And this is the name of your theme. Styles. Can be P and Q style child theme, style sheet, BRI over a number. We're gonna say parent handle, WP, theme, Git version. This, it will only work if you have the version set and the style header. And then we're just going to close that and save it. So now we can flip over to WordPress and activate our child theme. And then if we actually view the page, it'll look a little bit different. We're actually pulling in styles from the parent theme, which format things a little bit better for us. So this is a great start. We'll actually be using this function here to include additional resources such as custom stylesheets, any libraries or frameworks that we need to add. This is actually where we're going to be loading those files. We don't actually want to put links to outside resources and the header, the footer, just the way that WordPress loads the resources. This is actually a more efficient way to do so. So from here, we really actually have everything set up that we need to be able to begin building out our custom theme, which is great. So in the next chapter or the next section we will get into that. I will be using Bootstrap to build out the theme so you guys can follow along with that. Or use whatever framework you want.
7. Work on Theme: All right, In this section we're actually going to start building out our theme. So one thing I did forget to mention in the code editor section was extensions that you can actually add into Visual Studio Code. As well as Adam, I think it's just a little bit of a different process in Adam or other ones then Visual Studio Code. But one really important one that I use a lot is called beautify. Your idea what this is doing. When you call it. It actually formats your code file and a much more readable way. So flipping back to the parent theme and I'm going to open up the header file. You can see that the Blank Slate theme that we installed Originally has all of the files that we need. However, they're not formatted nicely or anything like that. But what's nice about this extension is you can beautify the file, say that it's HTML and then it formats everything properly. It's way easier to read and just looks nicer, easier to work with. So that is one thing that I do recommend is installing extensions do help format the code, beautifies what I use for Visual Studio Code. I'm not sure if they have one for atom, but it's worth looking into. So now that, that is out of the way, what we're going to start by doing with our theme is creating a navigation menu across the top. We want a logo over here, maybe a couple of links across the top. And like I said previously, I'm going to be using Bootstrap for this, and I'll be using Bootstrap version five. So the first step for that is to actually connect Bootstrap to the theme. So we're going to jump into the child theme, into the functions.php file. And then we're going to make a new line. And when I say WP enqueue style, and when I say Bootstrap core, and then we're gonna do comma and then open quotes. And we're going to jump over to the Bootstrap website. And what we're gonna do is jump into the docs and getting started. And you can see right here, copy paste the style sheet link into your head before all of this, our sheets to load our CSS. This is great little bird does not actually going to put it in the head section. We're going to put it in the functions.php file. So go ahead and copy that link. Switch over to your code editor and then paste it right in there and save it. And then go back to the Bootstrap website. And then we're gonna do the same thing with this boots or with this JavaScript one. Then copy that and then switch back to the editor. We're going to do a new line, WP enqueue script. And this can be Bootstrap core script. And then paste it in there as well. And safe. So just by doing this, if we go and refresh our website, the formatting should look a little bit different again. This time we're actually including Bootstrap styles. So let's go ahead and switch to that and see what that did. So you can see our links are now blue that font families a little bit different spacings, little different. So this is a good sign. This means that we have Bootstrap styles and scripts connected to our theme correctly. And we can get started on building out the actual navigation. So go ahead and switch back to the code editor. We can close functions.php for now. And what we wanna do is create the header that PHP file inside of our child theme. And what we can do to make things easier for us is open up the parent theme, go to the header dot PHP file, open it up and then just copy it and paste it over in our child theme header and then close that one. Great. So this is our header for our child theme. Kinda helps us along just copy and pasting that way we get all of the required structure of an HTML document. Everything that we're going to be doing here today in this course is actually going to be a lot of HTML, CSS, and JavaScript. That's really all WordPress sites are. It's just a way to kind of build out a site and connect to the database to pull information from using PHP inside of HTML. And then we formatted all its CSS. So you're going to see a lot of familiar structure as we get through this course when we build out pages and things like that. So we have the standard HTML code up here, body, body class. This is a WordPress specific function. Same thing with this. And then this is actually where we get into building out our actual header. So you can see we have the header with the header ID. We can get rid of actually all of this. And then we can start putting in our bootstrap navigation. So I'm going to start with this and say nav class equals navbar. Navbar expand a large nav bar. Light. Bg, like And I'm going to close that. And then inside of this NADH, we're going to open up a container. Fluid. We'll close that up. Okay. And then inside of this container will do the navbar brand class equals navbar brand HRF, or just leave that there for now. And we'll just say Navbar. Alright, go ahead and save that and we can switch back to our site and see what that looks like. Great. So we have navbar and the left, which is the brand. And we can go ahead and inspect it. We can see that we have our navbar, which spans the full width. Inside of that we have a container. Navbar brand, great. And we have the style is pulling from Bootstrap, so perfect. Next we're going to create the button to toggle the menu on mobile screens. So we'll do a line break here and we'll say button class, navbar toddler. Type equals button. Data toggle collapse gated. The target is navbar supported content. Area controls. Navbar supported content area. Expanded, false area label, toggle, navigation. We'll close that. And then inside of this button, we'll add a span with a class navbar tie blur icon. We can go ahead and refresh our page. And then if we shrink this, do it from this side. We should see our menu button pop up there. We don't actually have the content edited the page to actually show a menu, but the button is there and it shows and hides according to screen width. So great. Now all we need to do is just add the actual content that will show and the collapsed when that button is pressed, as well as show. I'm folder wider screens. So right underneath the button will do Hello class navbar collapse. And we'll give it an ID of navbar supported content. Close the div. And then we're gonna just kinda open up a unordered list and a list item. And then this will have a class of nav item. And that inside of this we'll have a new link with the class nav link and active, and then we'll give it area, current page and H ref. We can just leave blank for now and we'll just say, Oh, I forgot to add the class of the list. So we'll say Navbar, Nav and auto and B to be large here, and those are just spacing classes. Those are, these are all Bootstrap, bootstrap specific classes. Let's go ahead and save this, switch back to the site and refresh. Great, So we see home. And then we can collapse it and then we see home there as well. So the toddler is working and the menu works as intended on small and large screens. So great. One last thing in this section, instead of the word navbar for the brand, we actually want to have an image there. So what we can do is get rid of that. And then we can just put an image in here and say the placeholder.com. And we'll just say a 140 by 70. And this is just a place holder image to show what it would look like if there were an actual logo there. Well, that and refresh that and you can see if this was a real brand logo. It will go there and look great. So that's it for this section. And the next section we'll go over the middle of the page, the actual content. We can get some images and rows and things like that in there. And really get this site built out.
8. Creating a Page Template: All right, In this section we're actually going to be going over page templates, how to assign page templates, and actually building out content for that specific page inside of the code editor. So we'll just jump right into it. What we wanna do now is on our homepage, we actually want to do a couple of things. One, we want to create a home page. We're going to then create a page template file. We're going to assign that page template to the homepage. And then we're going to load just some basic hero content from bootstrap just to get something in there so that the page looks a little bit nicer. So let's go ahead and get started. We're going to go back to the dashboard and WordPress. And we're going to navigate over to pages. And then what we wanna do is add a new page. And we're just going to call this one at title and we're going to call it the homepage. And then we're going to publish it. Once that's published, going to click on View page. And then from here, what we wanna do is actually click on customize. And we'll go to homepage settings. And then we're going to toggle this to a static page and then homepage we're going to set to homepage and then publish. So what this does is every time that the webpages or the website is loaded, it's going to load that homepage as the main page. Great, So now what we can do is jump over to the code editor. And inside of our child theme will create a new folder and we're going to call that page templates. And then inside of that folder, we're going to create a new file and we're going to call that homepage at PHP. Inside of here, we're going to start with PHP tags and we're going to say template name homepage. This comment right here basically just tells WordPress in the back-end that this is a page template file and allow it to be selected from the list of page templates to choose from when editing the page. We'll get there in just a second after this line. What we wanna do next is include the header. So we'll do get underscore header parentheses, close that out, and then we'll do the same thing for the footer. And then go ahead and save that. And we can flip back to our webpage and refresh. And there we go. Nothing change, everything is good. What we need to do now is click on edit page. Remember we set the homepage page that we just created as the homepage of the website. So that's why we're seeing it here go and click edit page. Over on the right side. Expand the template accordion, default template, click on that and then change it to homepage. And then we'll go ahead and click Update. And then View Page. Alright, so this page looks different now, we actually don't have anything between the header and the footer like the default template did. So right now all we have is the navigation that we added and then the footer, which is just the copyright with the name. And then some texts that we added earlier in the course. Great. So what we can do now is get back into the homepage file template and start adding some hero content from Bootstrap. So we're gonna say div. We'll give this a class. Px, PY five and y five texts center will go inside of that div and we'll say H1. I want to say this is a title. We're going to give this one a class. Display five, F, W bold. And then below that H1. And we're gonna say div with the class of col, large six and auto. And then we'll say inside of there, we're just gonna say a paragraph with the class of lead and MB. And we'll just put some Lorem Ipsum in there. And then below that paragraph will give one more div. We're going to put some buttons here. So we'll say a div with the class of D grid gap to the flex, justify contents small center. And then inside of this div will say a button. We'll just say primary. And then type equals button, class. Button, button, primary. And again, these are all Bootstrap default classes, say button dash large, AX4, get three. And then to make it easier, we'll just copy this button line, paste it right below, change the text is secondary. Secondary. And then we'll change up. The class is just a little bit instead of button primary will say button outline. Secondary, button large we can keep and then we'll say p of x. And we'll save that. And we can put back to the web page and refresh. And we have this nice looking header section, this hero section here, again with just a placeholder content, but looking much, much better. And definitely in getting to what we want to see in a custom theme. Great. Next we can add a row with some cards, some Bootstrap cards just for some more content on the page. So what we wanna do here is jump back into the text editor. And right below here, we'll say div with the class of row. And we'll start one column, small six. And then inside of there we'll put the card. And then inside of that we'll have another div with card dash body. And then in here we'll say H5 with a class of card title. We'll say this is a card title. And then right below that will put a paragraph with a class of card text. And we'll just say this is some texts goes below. And then right below that we'll just throw in another button. So we'll say a button, button primary. An H ref is just one for now. And we'll say this, we'll just say link. And I'll save that. And then now we can just copy this whole column and paste it that way we have two columns with a card at each one. Go ahead and save that, flip back to the website and refresh. And you can see we have two cards in there. One thing we did forget to do was just put this in a container so we get some spacing on the side. So I'm just going to go up to here container and then just wrap this whole thing inside of a container. Great. So now we're a little bit more contained, have some spacing built-in. Now, everything is looking good. So great. Next section we'll move on to adjusting the footer, cleaning that up a little bit and go from there.
9. Footer & Connecting Custom CSS: So this section, we are going to be working on the footer. Again, what we're going to be using some Bootstrap elements to kind of format this a little bit quicker. But just going to show you guys how to do that. We're going to make our way over to the Bootstrap website, getbootstrap.com. And then we'll go to docs and we'll just search Twitter. I click on this first result here. And all we're going to be looking for here is just an example of something that we want to do. So we can do see this one right here. Looks like in that preview it was a little bit different. Looks like it was four columns. So we'll just go ahead and do that. This looks like it's got scrunch up just a little bit, but we'll go ahead and make it four columns. So we can do that by going back into the code editor. And right now we have the homepage file open. But what we want to open now, actually what we want to create now is the footer.html file. So inside of the web course, or whatever you named your theme, the child theme here we're gonna do new file, footer.html, CPI. And in this file we can just go ahead and start typing whatever we want in the footer. We're just gonna do something simple. We're gonna do a div with a class of container. Inside of that div will do a row. And then we'll do 43 width columns. Enter on that. And then we can say 1, 2, 3, and 4. We'll save that. And we can go ahead and put back to the homepage I PHP file. And yet we do have the footer included. So let's flip back to the browser. Go to our website, refresh the page. And you can see we have our four columns here. The reason that it got rid of what we had before is because what we had before was in the parent theme. So we're gonna go back into that footer PHP. So this is the parent Themes Footer file. Everything in here just gets instantly replaced as soon as we create the footer dot PHP file in our child theme, which we did right here with our four columns. So that's the reason that happened. Great. So now we can go back to that bootstrap example. And it looks like they have a logo and then three menus. So we can go ahead and do something similar to that. So we can do, Let's do a link with an image. And I'll just use the same image that we used in the header right here. Is that in? And then come to, we'll just do an unordered list, simple list item. And we'll do another one in there too. And then we'll just copy this, put it in the other two columns, will refresh. And there we go. So right now it's a little bit close together. We can add some styles here. I can show you how to actually connect your own custom style sheet to the website. So let's go back to the code editor. And then inside of the child theme, go in and create a new folder. We're just gonna call this CSS. Then inside of that, we're going to say styles.css. Great. And then this will be our custom style sheet. And then what we need to do now to actually connect it to the website. If you remember previously, I mentioned that we don't actually add these custom stylesheets directly to the header of the website. But what we wanna do is add them in the functions.php file. Open that up. And to make things a little bit easier, we can just copy this Bootstrap one that we did. And I only want to put this right there, changes up a little bit. We can say Custom CSS. And then what we wanna do instead of this link, we wanna do get stylesheets, directory, URI, period, open quotes, and we'll say CSS styles that CSS when save that. And then if we wanna make sure that our styles are working, we can switch back to our newly made style sheet. And we can say, let's say H ones are red. Save that. And we can go back to the footer. And just to test this out, we'll add one element here. This is a test, save it. And then we will switch back to the browser and refresh. And now you can see there was an H1 already, so this one is red and so is this, so that it's great. That means that our style sheet is connected and working. So what we can do now is actually just adjust some of the spacing here. Let's get rid of this and we'll just say div with nor that we can go ahead and just do. The footer class, has a padding top of 50. Save that, go to the footer and the footer class to the overarching container. And then this should give us a little bit of space. Perfect analysis. I'll get rid of this. A place holder there. All right, looking good. So there's the footer and also how to connect a custom style sheet to the thing.
10. Dynamic Content: So in this section we're actually going to go over how to pull data or content from the backend or the WordPress editor and actually show that content on the front end of the website to the visitor, actually visiting the page. So what we wanna do is go ahead and log back into the Dashboard if you're if you're not already. Okay. All right. So now that I'm back into the Dashboard, we're gonna go ahead and make our way back to the homepage. Some pages on the left homepage. And I'm just going to adjust the screen options here. Don't actually prefer to be in the full-screen mode. I just like the default mode at the sidebar. Right now we're looking at the name of the page and then this tight to two or choose a block. This is the actual page content. So by default this as the WordPress Gutenberg editor. That's completely fine. We can keep it as is. And all I'm gonna do here is say this is test content. This will be shown on the page. And I'm just gonna go ahead and click Update. So just a simple one-sentence, 12 sentences here, for example purposes. So go ahead and view the page. Right now this isn't gonna show anything in our template file. We don't actually have anything set up to pull that data in. So what we wanna do is go back to the code editor and we want to open up our homepage template. And instead of this sentence right here, we're actually going to want this to be our content that we just put in to the page editor. So to do that, we need to use what's called the WordPress a loop. In good example of this is in the parent theme in the page dot PHP file. So go ahead and find that, open that up. And I'm just going to beautify this file so it's little bit easier to read. Okay? So starting on line 3, this is actually what begins the WordPress loop. So it says if have posts, while have posts, get the post content. These are all WordPress default functions. This is nothing custom. This is just what we have to work with. So what we wanna do is actually just grab this line. Copy that and we're going to switch back to our homepage template. And we can actually put that line right here. So we'll say line three paste. And then right below the footer, we can actually just close out those if and while statements. So let's go ahead and end the what. Go ahead and open up the PHP brackets first and then we'll say end while save that. So right now all this is saying is if there's a post and while we have the post, get the post-data, we're viewing a page, so we're going to have a post to show. Right now. It's still going to show everything that we have coded. But just to show you that nothing will break, we'll go ahead and refresh the page. Looks exactly the same. Great. So let's switch back really quick. And then here, instead of this paragraph, we can just say, let's open up our PHP brackets here and we'll say the underscore content. And again, this is a WordPress specific function. This is nothing that we had to do on our own. Let's go ahead and save that. And what this is doing, this is actually pulling whatever content is inside of the editor. This should give us our place holder a sentence. Right there it is, and this is some test contents, content, this will be shown on the page. So that's just a really brief example of how to pull content into the page from the editor. In the next section, we'll actually go over a plug-in that I use on almost all of my WordPress websites that kind of expand this functionality into a ton of different field options, images, anything you can think of. It's actually a really, really great tool to use when you're building on customer websites. It's a lot more efficient than using a Page Builder plugin. So I'm really excited to show you guys that in the next section.
11. Advanced Custom Fields Setup: All right, So in the last section we went over how to pull just a simple sentence or two from the page editor on to our page template to actually show on the front end of our website. In this section, I'm actually going to show you guys a plug-in that I use almost on every single WordPress website that I built for clients. It's a really great tool to kind of take that functionality that we just learned and expand it into a bunch of different elements to pull from. So we have images, we have color codes, we have repeating elements, we have tables. There's a limitless variety of elements to actually pull from using this plugin. So the polygons actually call it advanced custom fields. I'll leave a link to this in the description of the course. This plug-in does have a free version and a pro version. The pro version is way worth it in my opinion. And it gives you a few more elements that are really, really powerful for websites. Without getting too deep into it, you can see all kinds of option pages, galleries, clone a fields, and so on. Just a bunch of stuff that you get with this really, really great plugin. Anyway, the free version is more than enough for what we need to learn here. So what you can do is actually go back into your WordPress dashboard. And we're gonna go to Plugins and then Add New. And we can actually just search for this. So we'll say advanced custom fields. And it's this one right here, 1 million installs. And you can see there's a bunch of other plug-ins and kind of expand on the already massive fields lists that they have built in. So you can see there's a Gravity Forms, add on Font, Awesome, add on Table feel that on extended and so on. So once that's downloaded, go ahead and click Activate. And now we can go over to custom fields and the sidebar. And a quick overview of this, this plugin here. So what we want to do, Let's get back to that. So this dashboard here, the advanced custom fields homepage, if you will. This is where you're going to manage all of your custom fields they use, have set up for whatever it may be. Pages post custom post types, whatever you can think of, category pages and so on. This is we're going to manage all of that. So what I like to do is click on Add New, and break these up into different groups based on the page. So for this group, I'm just going to name it the homepage and the location rules. This is where you're actually going to designate this group of fields to only show the specific post or specific page that you want it to. So what we need to do is say, we can do it a couple of different ways. If we wanted it to just be on any page, we could just change from post a page. And now anytime we create a new page, these fields will show up there, but we want to be a little more specific. So we actually want to target the page template. And if it's equal to the homepage template that we created, we want these fields to show up. Great, So we can go ahead and leave that and we can click Add field. So what I'm gonna do is instead of using that default Gutenberg WordPress editor for our sentence, I'm just going to say Hero sentence. And then Tad, that actually creates the field name by default with an underscore. It replaces spaces with underscores. You can also change this if you want it to be a little bit different. We can leave this set to text. I usually set it to a wysiwyg editor if I'm going to be building out the entire section. So I'm actually going to do that here. I'm going to change this to hero content and hero countertenor. Just be a little more specific. I don't like set anything is required unless it's absolutely necessary. This gets a little tricky if you were to go back once you have your website built out a little bit more. And you want to go back and adjust some settings or make new pages, get rid of pages, stuff like that. If you ever required fields, it gets a little tricky. Just making sure everything matches up. So I like to leave everything as not required. And we can leave the rest as is. Great. So let's go ahead and publish this. And what this does is just actually saves our settings here. We can switch back to our pages homepage. And now since our template is set to the homepage template, we can now see our custom group here, which is just labeled homepage in with the hero content with a wysiwyg editor. So what we can do is actually just copy that sentence and then just paste it here. And I'm going to view the page really quick before we save anything. And I'm actually just going to grab this one. And put it in here as well. Great, So we have an H1, let me have just a paragraph below it. I'm I click Update and then view the page. All right, so we got rid of that sentence, so that's gone and then the title is still there. So this is what we need to do now is switch back to our code editor. And we can get rid of this align here, this H1 element. And we can get rid of this paragraph right here. And all we need to do right now is say, it's opened up our PHP brackets and say the field hero content. So this is the name of the field that we just created. And the field, this is a, this is it an advanced custom fields default function that actually calls this field from the database. So let's go ahead and save that and refresh our page. And now we see our H1 elements here. Our paragraph text is here, and then the buttons were there the whole time. Great. And so you can see we have not no hard-coded text here. It's simply pulling this from the database. And we can change this content. We can just copy this a couple more times just so we get some more text in there. Okay. Perfect. So everything is working exactly how we want it. We can do the same thing here for these cards. We can actually utilize advanced custom fields for that as well. We can even do it for the footer. So I will actually show you guys how to do these two cards in this section. So what we wanna do is, I'm sorry, go back to the dashboard, advanced custom fields dashboards are and add new. We want to jump back into the homepage and add a field. So to make things a little bit simplified here, we're just gonna say left, left card. And then we're actually going to make this one a group. And then inside the group we have sub-fields. So if we go back to our homepage, we can make the title and the subtitle. Actually, let's switch back. So we have an H5 and okay, great, Yeah, we can do this as one wysiwyg editor and we can actually add an element to make this link, will do this both for the left side and the right side. Let's jump back to the field editor here we're going to add a field. We'll just say title and subtitle. And just to clean that up a bit, we'll say title underscore subtitle, change this to wysiwyg editor. And that's all we need to do for that one. And then here we'll say button, button, and then we can change this to see what do we want for this alone. We want a link. And good, so now what we can do here we have the left card. Advanced custom fields makes it really easy. We can just duplicate and then change this up to say or write card, right card. And then we can keep these the same. And then we can update this and jump back to the homepage editor. And now you can see where the left card and the right card. And what I'm gonna do is just copy this content, paste it here, and believe it's the same for that one. It is, I'll save that. And then the button we can select a link. I'm just gonna do a placeholder link. I think. Same thing down here. Okay, we're all set here. It's going to update. Will be the page again, nothing's going to change. But what I do want to show you guys is the advanced custom fields documentation. It's really, really great. It shows a lot of examples on how to use pretty much all the fields with a few different examples for each one. So what you can do is actually just search, which is clicked the wrong layer. Let's go documentation. And then we're just going to say group. Let's scroll down. So you can see template usage. There's display contents, there's the loop example, how to display the same group using the have rows function. And we're just gonna go simple and just copy this display contents example. So what we wanna do here is they haven't set to hero, get underscore field hero. This looks very similar to what we've already used in our template, the field. So the difference here is if we're going to be saving the value of our custom field inside of a variable. We wanted to get underscore field. This actually doesn't display the field and set it, just pulls it and then stores it in the variable. If we were to say the field here, this would actually error out. It would not work. So that's the difference between the two. If you just want to display the field exactly how it is, go ahead and just do it though field and save it in a variable I went to get field. So this is what we will be doing. Here is just a simple check to see if that actually has anything and then you just display it as you normally would. It looks like they added some styles here. And you just close the if statement. Great, so let's go ahead and do that. We can do right here on line 16, we'll just say left card equals and get field left card. And then to PHP if cleft card. And then right after the card will just close that if statement. So we don't forget. And right now, since that value is set in the editor, if we refresh the page and we should still see the same content since we haven't changed anything. Perfect, so it's still there. And then now we can just adjust this as we need to. So instead of the H5 and paragraph being coded, we're just going to say the field. I already forgot what we named it. Just jump back here. We named it title subtitle. Okay, I'm going to copy that and then just paste it there. And now I'll just save it and refresh the page. And it's not there. So let's see what we have wrong here. Well, that's right. Since we're using the group field, we actually need to reference the group fields variable and then say which field you want within it. So let's go ahead and change that up a little bit. But it said the field that we're going to say, all right, go left card, and then we're gonna say title subtitle. Perfect, there it is. And you'll notice that I actually use the square brackets instead of the parentheses. This is just what you use when you're actually referencing a value or a field that's inside of a group. So that's the difference between the getfield parentheses and then the echo field from inside of a group. So we can do the same thing for the link. So instead of just the word link, we're going to say PHP that go left card button. And then since this is a link field, we're going to say title. And then we're going to copy this, the exact same thing here and move it to where the HRF is. And then this instead of title, we'll say URL. Then we'll save that refresh. And you can see our title change the test link, which is what we put in the editor. And if we inspect it, you can see the HRF is also changed to what we have in the editor. Great, So to do the right side, we can just copy and paste, will discover is huge if statement here and just replace it here and change the values. So instead of left card, we just want right, right. And then we have to change it here as well. And if we refresh, you can see that that title change the test link to and then the URL is also changed. Perfect. So this is just a very high-level quick overview of advanced custom fields and how to utilize that to pull content from the editor and actually show it to the visitor of the website. In the next section, I'll be going over post on the page or post on the website. And actually how to make those edit the template and actually display that either in a blog format or just on this homepage in something like a three column layout. So that will be the next section.
12. Blog Post - Creating, Showing, and Styling: I hope you guys are enjoying the class so far. In this section, we're going to be going over blog posts and how to make them edit the template and actually get those to show up on the website. So let's just jump right into that. Make your way over to the WordPress dashboard and click on posts. So by default, WordPress gives you the post, post type. This is typically what you're going to use when you're creating a blog on your website? There are custom post types. I'm not sure if I'm going to get into that in this course or not. It's a little bit more of a high level topic. This is more for just the basics of creating a WordPress theme. But anyway, so to create a post wordpress gives you this default one. I'm just gonna go ahead and trash that and just add a new one. And we'll say test title one and just content here for our test post. And I'm just going to copy that a couple times to fill it in. And I'm going to publish it and then view the post. So this is actually using a unstyled page template, essentially just showed this post. It's very unformatted. There's no styles and still has our old sidebar, but it is using the header and footer that we created. So that's good. So let's get into how to actually adjust this template here. So jump back into the code editor. And you can see in the parent theme, there's a file called single.php. Php. So this is actually the file that WordPress is using to display this blog post. So we're just going to steal a little bit of code from it and make our own. So jump into the child theme and make a new file. And we're going to call that single dot PHP. And we're going to actually copy everything from the parent theme single dot PHP, and just paste it into our child theme file. And we're going to get rid of this. We're going to get rid of the comments. We don't want that at the moment. And then the footer main and we're going to get rid of the sidebar as well. Also this main. Great. So right now we have the header, we have our WordPress loop, and then we have the footer. So let's go ahead and save that and refresh the page right now it should show nothing. All right, Now it should show nothing except the header and the footer, which is exactly what we want. And then now we're just going to switch back to our editor and actually build out this page. So I'm just gonna do a very simple two column layout. So to start, we're just going to say div container with a row, and then we're just going to use them Bootstrap classes here to make the content side. And then we'll just do a sidebar here. And we'll say four. Perfect. So we'll say left side groups. And great, So let's go ahead and refresh that and just make sure we have our formatting and layout setup perfect. And then we can use some WordPress default functions, a little bit of code and actually pull some post content into this template. So we want to do is just say the title. And then we'll say PHP, the content. So right now this will just show the title and the content on the page. Perfect. Obviously, this doesn't look very good right now. So let's change this up a little bit. So say we want the title to be in an H1, so we'll just make a new line. One. We'll move this up here. And then we can say blog title. And then we'll just wrap this in a div for now. And we'll just say blog content. Perfect. And then actually we'll go into our custom style sheet that we made. And we'll just say blog title, font-weight, bold, padding, actually, margin bottom 25, just to give some space. Perfect. And then one more thing when it's actually push this away, this whole, entire container away from the header. So let's go back to the single and we'll just say blog post. We'll just say 50 and then padding bottom 50 as well to push it away from the footer. Refresh this, we'll see that take effect perfect, already looking better. Let's say we have a featured image for this blog post. And actually let's go ahead and add that right now. So we'll just click Edit Post. And then featured image on the right. We're just going to upload this image. You can upload any image you want. An update. Right now it's not going to show anything. So let's jump into our code editor and then our single.php PHP file. And right above the title, Let's do a new line with an image tag. And we'll say inside of the source, It's open up some PHP brackets. And we're going to say, up here, inside of our loop, we're just going to say featured image URL equals get the post thumbnail URL. And then inside we're going to say get the ID. And this is just a default WordPress function to get the ID of the current post that's inside of the loop. And then we're going to set the size of the image that we want. We want the full size and we'll just close that. Great. So right now we have the URL of the full size featured image that we just uploaded saved in this variable. So let's button save that or copy that. And we're going to go back down to our image tag and say echo that variable. And then we can refresh our page. And now you can see our image is there. It looks like it's overlapping a little bit. We can adjust that as well. But this is great. So let's jump into our style sheet and edit this. We'll say blog post. Image max width of 100%, height. Auto should contain inside of our column. Perfect. So looking much more like a blog post now we have some decent spacing setup. We have our image or title and some content on the right side. This is typically where we would show a similar articles related to categories or tags that you might have set up. Right now, I'll just put some placeholders there, but we can actually dive into that right now. So inside the single dot PHP file, this right side, Let's just make a div and call it blog related. And then inside of that rural, so they're going to have a row that has a column large pore coulomb with an image. We're just going to leave that blank for now. And then the next column. This will be the title and a short sentence. Preview of the contents. Let's go and save that and just see what that looks like. Okay, so we don't have an image, but this spacing looks good. There's a title and then preview. Great, So actually to get some content to show up here, Let's go and make a new place holder blog post. Let's come back to the dashboard. We're just going to name this test. I'll use the same images for testing. And then some content here. Content before test 2 is content for test two. And I'm just making this a little bit longer just so I can show you guys how to show a preview instead of the whole content published this post. And oops, we're actually going to go back and view our first post that we made. And what we wanna do is get that second post to show up here. So we can go back into our editor. And what we wanna do here is basically say if there's another post we want to show this block of content, this blog related box that we just created. So what we can do is actually run a, another WordPress loop to get additional posts on this page. We need to basically pull another loop into the page or open ups and PHP brackets. And we're going to say ARDS, which is short for arguments. Array. Open that up and we're gonna say post per page. We'll set this to three. This is just saying we only want three posts inside of this loop. Right now we only have one other place holder. But we wanted to limit this to three. We'll say the post type, we want to look at exclusively post. And then we'll say the post status. And we only want the published posts. Great. And then we can close this out and then we'll do a new line and say the query that we want to run, set that variable, we'll say new WP query with our art that we just set. And then we'll say if that query have post a query. Host. We want to grab the featured image. And again, the featured image is good, the post thumbnail URL. And then now we're going to say get the ID of this post and the full size actually can get the thumb. Now. Close that. And then let's just close out this way actually forgot the while. While. Query groups have posts. And then down here, we just need to close those out. Just like that. Don't worry, get an error here somewhere. Get rid of that bracket there. Great. So right now we have this line here which actually just pulls in the title of these post here that we just grabbed. And then we can also grab the featured image, URL image. And we can save this and refresh our page. And you can see there we have the thumbnail and we actually have both posts because right now we're just looking at any post and then grabbing three of them. So by default that's actually going to grab the current post that we're looking at, our secondary posts that we just created. So we can take one more additional step to actually exclude the current post that we're looking at because we don't actually want to see that in our related or similar articles on our sidebar. And to do that, it's really easy. We're just going to jump back into the code editor. And then right here we're going to add another argument and we're just gonna say post, knock in. And I'm not gonna say array loops. Post ID. Go ahead and save this, refresh our page. And that did not do it. And that would be because I think I have my underscores out of place. So let me switch back here. And yes, this should be one and that shouldn't be too perfect. So that gets rid of the current post from being in the sidebar. I'm actually going to comment that line out just so we can adjust them styles here appropriately. And then I'll add it back in. So comment that three fresh and then now see how these are touching. We just wanted a little bit of separation here. So all we have to do is just grab this class that we gave it blog underscore unrelated, and just add margin bottom. We'll just say 25 pixel. Perfect. So now we have some good spacing setup. Now we just need to change this placeholder sentence to pull the content that we actually put into the post editor. So to do that, we're going to jump to the single dot PHP. And then we're going to say PHP brackets echo, get the underscore x. Just like that. And this is another WordPress default function that just pulls a certain amount of characters of the post content and display that on the page. So let's save that and then refresh that. Now you can see we actually pull the real content into that. If this was paragraphs and paragraphs of content, it would still only show a certain number of characters in this preview. There are some certain things that we can do to actually make this a little bit smaller. We can save the content into a variable and then use a PHP function to trim that. Again, we can make the font smaller. We can do a bunch of others things. They kinda stylus, stylize this a little bit more. But for our purposes, this is a good start here. So the next section, we'll just go over some loose ends here with your custom WordPress theme development. Hope you guys have been following along building out your own test site just to get a feel for how WordPress works, what you can do with it, what plugins you can utilize the kinda expand the functionality in the back-end. This is really great for when you're passing off the website to a client. That way they don't have to actually get into big code to make any major edits. It's really, really helpful for that. I have half of a bunch of other things. I might make it course later on on how you utilize advanced custom fields to the fullest and actually build out a real theme with good-looking elements, functional elements and things like that. So hope you guys are excited. Thank you guys for taking the class. Like I said in the next section, we'll kind of wrap things up.
13. Showing Blog Posts on Homepage: All right, So in this last section here we're going to be adding our blog post to the homepage to showcase them there, as well as a few other things. So what we're going to do is go to the homepage, delicious click the dashboard and we'll visit the site. Great, so we're back on the homepage. And what we wanna do is just right below this card and this card we want to show our two blog posts. So we're going to jump back into our code editor and go to the homepage template. And then right underneath this container here, we're just gonna do a new container. Actually, we can do this outside of the loop. So let's say you did container div row. And I'm just gonna do a simple side-by-side, 5050. And then this will be left and this will be or ite. So whenever refresh, make sure we got that going. Perfect. Alright, so now all we need to do is very similar to what we did for the related or similar blog posts sidebar. We can actually copied most of this code. So I'm just gonna go ahead and uncomment this, copy all this, and move it over to the homepage and paste it. And then we can actually get rid of this, right one since we only need one, because it's going to run twice. So I can show you that in just a second. And then we just need to, again close out these statements. Just like that. Great. So right now it's set to three. We only have to post and we only want to post wherein change that to two. We can get rid of post naught in and keep the rest. And let's go ahead and just change this to the title and refresh. And then you can see test Tidal one test titled two, those are the titles that we gave our placeholder blog. So this is working exactly how we want. So let's just go ahead and style this a little bit nicer. And again, we can steal a little bit in this code. I'm just going to grab this feature that's already there. So we just need this image tag. Titles. They're actually want to wrap in this 84 and the paragraphs. I'm just going to recopy and paste this here. And then down just a little bit and refresh. And then this should give us our thumbnail image, title and content. Want to adjust this just a little bit. We can go ahead and change instead of thumbnail, it's kind of a medium size. Let's go and change these H2. And then I want to wrap everything inside of its own div. And we're going to say blog, page. Perfect. This file just a little bit, and then clean it up. One more. Great. Go and refresh this, see what we get. Perfect, so the image is a little bit bigger. I'm actually just going to switch the full width just so we get them. The real effect here, because that's what we actually want. Perfect. So again, it's kind of overlapping. We're going to fix that with some styles in just a second, but we have a, what we want. So let's grab this class and jump to our custom style sheet. And we're going to say the image should also be max width to 100% auto. Well, we also want to do just this class. We want to give a margin top of 50, margin bottom of 50. And then let's give it a little bit of a border and maybe some padding. See what that looks like. All right, So looking good, matching the card size a little bit, not quite the same. We can adjust that, give it a little bit of a border radius. Just say five pixels. And let's change this to something maybe a little bit lighter, maybe a little bit too light, but you get the point. Looking good. We can continue this on. We could add a button that says read more that links to the article. We could change the image size, add more content and so on. But that's basically how you pull a blog post onto a page template. We can actually link to this so I can show you that it goes back to that template. So every thing, let's just wrap this whole thing here inside of a link. And this link will have the H breadth of echo, get the permalink. And all this does is a WordPress template, our function again, which gets the link to the post that is the current post in the loop and just puts it here. So we'll go ahead and save that and refresh. And now you can see this whole thing changed to a link and we can just click it and it'll take us right to our newly styled Post Template. Real quick. I will just adjust this. These links, texts, color black. And we'll go back cone. And that is not changing what homepage, both homepage link is outside. So we can do here is a blogs. And then just change this to say. All right, Perfect, exactly what we want.
14. Course Conclusion: All right, So that wraps up this course. Thank you guys for taking the course. I hope you guys made it all the way through and found it helpful and your journey to building your first custom WordPress theme. I really enjoy teaching it if you guys have any questions, feel free to ask. Really looking forward to seeing what you guys put together. This has been very exciting, putting together this course, I hope to do more in the future and I hope you guys will continue to come back and learn from me. So thank you again. I hope you enjoyed the course.
Kyle Sampson, Web Designer & Developer
