Join Morten Rand-Hendriksen for an in-depth discussion in this video Creating a static front page, part of WordPress DIY: Restaurant Website.
- If we look at the front page of the site right now, off the top it looks fine, but as we scroll down, not so much. Here we have the blog index, which currently only contains the 'Hello World' post, and the reality is, I'm actually not going to have a blog on this site, it's just going to have a bunch of pages. So displaying the blog on the front page really makes no sense. Instead, I want to have all the information that someone might be looking for when they come to the restaurant site. That would be location information, a welcome text, some information about the restaurant and of course the menu.
All of this can be done with this theme, but to make that work we first need to swap out this blog index for a static page. And here's something really interesting about this particular theme. Now, remember in the previous movie I talked about the front page widgets? Well, in this theme, the front page widgets actually appear here at the top of the page, directly under this featured image. And we can use these front page widgets to display both the address information and contact information for the restaurant and the front page text in a text widget.
So that means, we don't actually need to create a custom front page. Instead, I'll use the 'About' page as the front page. To do all this, I'll go back to the customizer, scroll down to static front page, here it's currently set to display your latest post, so I'm going to change that a static page. Then I got to set what page will display the front page, so I'll select 'About Us', and I get to choose what page I want the post to appear on. So this will be the blog index. But like I said, personally I don't want the blog to this site.
So, I'm going to leave this empty. If you want to blog on the site, all you need to do is go to the back end and create a page that you can call whatever you want, maybe 'News', or 'Blog', or something else. Put no content in it, and then assign that as the post page here on the customizer, and that will become the blog page. But, like I said, in this site there's no blog page, so I'm going to leave this empty. Save and publish, close the customizer, and when I scroll down now, you'll see we have the 'About' content on the front page, but this doesn't look right because we have the side bar, and I don't want the side bar.
And this featured image here is totally messed up, so we need to get rid of that as well. So I'll click on 'Edit Page', to edit the page. Then I'll go to the 'Page Attributes', on the right hand side here and change the templates to the 'Fullwidth page'. And then while I'm at it, I'm going to go and remove the featured image, click 'Set featured image', and then upload a new interior shot, so that WordPress will recrop the image and make it fit for the current theme.
Once the image is uploaded, I'll set it as the featured image, update the page and go back to 'View the page'. Now I'm back on the front page, and here we have the featured image, followed by the 'About Us' title, the 'About Us' text and the image of the proprietor of the restaurant. That's a good start, and in the next couple of movies, we'll further steps to customize this front page to display the information we want.
Find more courses in this series in our WordPress DIY playlist.
- Making a basic content inventory
- Finding a suitable theme
- Adding a food menu page
- Customizing fonts, colors, and navigation
- Adding a contact form and reservations widget with Jetpack
- Testing the site