Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
by
Lessons:2Length:9 minutes
Wordpressbasics400
  • Overview
  • Transcript

1.2 WordPress Basics: Customize Your Front Page With a Template

In this lesson, I'll teach you how to create a front-page template file in your theme. Then I'll show you how to edit it to include the contents of a static page, as well as a list of your latest blog posts.

Related Links

1.WordPress Basics: Customize Your Front Page With a Template
2 lessons, 08:57

Free Lesson
1.1
Introduction
00:34

1.2
WordPress Basics: Customize Your Front Page With a Template
08:23


1.2 WordPress Basics: Customize Your Front Page With a Template

[SOUND] Hello and welcome to this Tuts+ Coffee Break Course on customizing your home page with a theme template file. In this course I'm gonna show you how to create a template file called front-page.php that will be used by your site to display content in your Home page. And I'll do that using a Child Theme of 2016 with a new file. So let's start by taking a look at the code. Here are the themes that were installed in my site. So I got 2016 and then I've also got this thing that I've created called tutsplus-front-page-template-file. And this theme just has one file at the moment which is the style sheet and that is set up using the style sheet to be a child of the 2016 theme. And if you want to know more about setting up child themes, I've given you a link to a Coffee Break course on that subject. So, what we need to do is create a new file in our theme and that will be called front-page.php. So I'll create a new file and I'll call it front-page.php and the template hierarchy, we'll use that to display the contents of the front page of our site. But at the moment, this file is blank, so I need to populate it with some content. Now, rather than starting from scratch, because this is a child of 2016, I'm gonna start by copying the contents of the page.php file from 2016. And the reason I'm doing that, is because I've set up my front page to show a static page. As you can see here from looking at the demo site. So I'll go back into my files, I'll go to 2016 and open the page.php file. I'm gonna select all of its contents, copy those, close the file down so I know that I'm not editing that, and then paste them into my new front-page file. And I'll now do the company that text just clarity let's save that and see what happens in all site. It looks exactly the same there's nothing different because it's using that same template file that it would have used from 2016. So now we need to add something extra to it to add some custom content. So let's go back into our file and what I'm gonna do is add a new loop using WP_Query. WP_Query is a class that you can use to create custom loops in addition to the main loop in a page on your site. And if you want to understand exactly how WP_Query works I recommend the series of tutorials from tuts plus on mastering W P Query. So let's go back into our code. Now what I'm going to do is add my query inside this main element but after the main loop. So I'll start by opening php text. I'll add a comment so I know what's going on. Make sure I correct any typos. So the first thing I need to do for WP query is set up some arguments. So I'm fetching the post post type, and I'm gonna display five of them. So that's the arguments for my query. Now I want to set up the actual query. So if my query has posts, it will then run a loop. If it doesn't have any posts, nothing will happen. So I'm gonna close my php tags cuz I'm gonna be adding HTML now. And I've got a section and a heading in there. And let's just close off that section for neatness. Now inside my section element, I've got my h2, and I also want to wrap the loop. So I do this using while ( $query->have_posts() ). And then at the end, I add an end while and a rewind_posts. Because that rewinds the query and takes us back to the main query. So that's my loop setup, now, I need some content for it. So I'm opening an article for each post, and again, I'm going to close that as well for neatness, and that will have an ID and post classes as well. And then inside that article, I'll add two things, I'll add the title of the post, inside a link to it, and I'll add the exit. And then once I've done this, I need to scroll down here and tidy up my code here. So this closing brace should be inside PHP text because that is this conditional statement here if the query has posts. So I'll save that and I'll go back to my site and take a look at my home page. I refresh the screen and there's an error. So let's take a look at the code and see what the problem is. So I wrote my WP comfy PHP file for my site and I'm gonna change WP debug to true. So I can see what the problem is and what you've done your checking you need to turn this back to false. So let's go back to the site, refresh the screen and there we are we've got a syntax error on the line. This is really easy to do in PHP, it's quite an unforgiving language. So you'll find that you get syntax errors occasionally, and WPD, but we'll help you spot those. So lets go to line 34, so here's our front page template at line 34 you can see. That's a simple typo there, which you may have spotted while you were watching me type that. Save that go back to the site and refresh and there we go. So we now have the contents of our static page and we also have a loop underneath with all the latest posts. Now this site only has two posts added to it but once I start adding more up to five of them will be displayed here. So that's how you create a custom home page template file in your theme to display whatever content you want. And you could add whatever you wanted, you could add extra widget areas, a slide show, static content or content that could be updated via customizer. I hope you found this course useful. Thanks for watching.

Back to the top