Wordpress Theme With Bootstrap [8] - Custom Front Page

Key Takeaways

hey guys welcome back in the last video we we looked at post formats and I showed you how we could create a an aside post and a photo gallery post uh with our theme now what I want to do is work on the front page the custom front page now the way it is now we have our blog posts as our front page but we want to change that all right so we're going to go to the back end and go to pages and we're going to create two new pages this one is going to be called home and it's going to be completely blank we'll publish it and then we're going to create another page called blog leave it leave it uh with no content publish it now we're going to go to settings and go to reading and we're going to choose this static page option for the front page for front page we'll choose home for post page we'll choose blog save and then we're going to go to appearance menus and we're just going to add that blog page to our menu save it go back reload and now we have just a static page for our homepage if we click on blog that takes us to the blog post page okay so now we want to work on our homepage now in order to do to have a separate layout we need to go to our theme folder and create a file called front-page.php p and now if we go and reload it's completely blank because it's looking at this page now what I want to do is open up our front. HTML page that we created way back in our um HTML template now we don't want to copy the whole thing because we want um to include our header so first thing we'll do here is say PHP uh I'm sorry get header okay now for the footer I was thinking about this little earli because now the footer we have the sidebar in okay we don't want that so we're just going to have to add a conditional here in a second all right so um let's go and put in PHP get footer all right now if we go back to our front page and reload this is what we get okay we have the header we have our sidebar and footer now let's go into footer PHP and let's see we don't want any of this stuff here all right so what I'm going to do is go to the top and say PHP if let's say if is front page okay but we want we want this if it's not the front page so let's put an exclamation mark here and then we want this to end here all right so let's take a look at that okay so now our sidebar is gone oh actually you know what we need the container div so let's let's actually put this right here all right so in our front page we're going to want a div with the class actually you know what I don't think we even need that no we don't um so now we can go to our front HTML and let's grab this section and the boxes section okay we'll take that and let's go to front page and paste that in see what we get okay so there's no image that's why we can't see the text and we also um we didn't include the font awesome so we can't see the icon now another issue is we have this whole thing in a container so it's cutting it off right here and we don't want that and the reason that it's doing it is because in the header file we have the div the container so we have to figure this out I think what I'm going to do is not use the get header and get footer and then just kind of have our own header for the front page so this ends this is the um this contains the navigation so let's grab from here up and we'll copy that go to the front and not not that page front page.php and then we'll just replace get header with that all right same thing with footer we're not going to use get footer but we will take what we need from it which is this up to here all right we'll copy that and let's paste that in and then save there we go so now it goes across the whole page now for the image and for the text here what I want to do is I want to implement the theme customizer so in the back end we want a place where we can go and we can edit this text and we can also change the image as we as we see fit all right um but we're not going to get to that just yet so what I'm going to do is just give it a background color so that we can actually see the text all right so let's go to style CSS and go to where we have our showcase okay and let's just put um right here we'll go like that and then at least we can see the the text and stuff all right now for the icons to show up we need the font awesome uh CDN so in front HTML we have that right here so let's just copy that and we'll go and put that in our front page.php up in the header okay and we should probably put it in our header.php file as well in case we want to use it later on okay so now if we go back and reload now we have our icons all right and these are going to be widgets by the way these three boxes so I guess we could probably do that now those widgets so let's go to functions.php and go down to where we have our init widgets and I'm going to copy this whole register sidebar and paste it in again and we'll change this to let's say box one change this to box one and let's see we'll go back to front page to where we have our boxes all right and what we want to do is we want the class of box um we want that embedded in the widget so back in functions we're going to uh replace this with box okay and then for the heading let's see what do we have for that H3 so we'll change H4 to H3 all right and then we're going to copy this again and we need two more okay this one's going to be box two and this one will be box three okay save it and if we go back to the back end and go to widgets you should now see box one through three so in our front page let me just let me close these up okay so we want to grab grab everything that's inside of the the Box div so the icon the H3 and the paragraph and I'm going to cut that out and then go and add a text widget to box one okay we'll paste that in and actually you know what we're not going to have the title we're not going to have this as the actual title because we want to keep it here under the icon so we're just going to leave the title blank and click save and then back in here we just want to do PHP if is active sidebar okay remember just because it's a it says active sidebar doesn't mean that's the sidebar position okay we want to pass in the ID of the widget which is box one and then in here we just want to say PHP Dynamic sidebar and then pass in box one okay and then let's do the same for the other ones we're going to grab this cut it out Bring text over to box two paste that in save it and then this is going to have the same thing except it's going to be box two and same thing with the last one okay it'll be box three so let's save that make sure all your widgets are saved if we go back and reload uh now we have the the Box class in the widget so we want to get rid of it here oops and there we go so these are now coming from the widgets so in the next video which will probably be the last video uh I'm going to show you how we can implement the theme customizer so that we can edit this stuff from the back end