Join Morten Rand-Hendriksen for an in-depth discussion in this video Rationale and preview of the final project, part of WordPress: Building a One-Page Style Site.
Before we get started, I want to show you the final product of this course. That way, you understand the decision making process that went into designing this front page, and you also know what you are aiming to as we're walking through each individual component. So here we have the one page style front page I've created for this company. When you scroll up and down, you'll see that the main menu sticks to the top of the page. And when you click on any of these menu buttons, you automatically navigate to different sections of the page.
What makes this front page different from the traditional one page style site that you usually see on the web though, is that each of these sections are not actually living on this page. They're pulled in from individual pages throughout the WordPress installation. So, this call to action that you see on the front page is actually a separate page called Book an Appointment. The testimonials are individual polls that are pulled in, in random order. And you'll see when I reload this page, we get different testimonials displaying every time.
The services are actually a set of pages. We have a parent page called Services that has all the information on it. And then we have individual pages for each service, that are displayed in an unordered list, so they're easy to get to. From here, you can navigate directly to the individual services pages, and get more information about each service. Scrolling further down, we have a page about the doctor that this site is for, and then we have a section for address and contact information. And each of these sections is an individual page on the site that you can visit on its own, or you can get access to them through the front page like this.
To see the true value of this, I'm going to click on the News button. Now, the News button takes me out of this custom front page, and into the regular WordPress site. So, here you see that the menu is slightly different, because now we can go to the individual pages, see here we have a drop-down for all the services, we have a standard side bar. And we can jump to any of the individual pages in turn to get all the information about that individual's service or get the contact information, or something else. And we also have a blog where we can just place regular blog content or news updates or whatever we want.
And this is the point of this entire course. What I want to do is show you how you can create a custom, one page style front page for an existing WordPress site, so that you borrow styles from the existing theme. And use them on the front page, but to create a custom experience just for the front page, while still operating a regular WordPress site on the back-end. That makes it easier to manage. You want to change some content in one of the sections, you simply go to that page. And it also means that you can display excerpts of content on the front page, like, for instance, in this services.
And then display more extensive information on individual pages inside the real site. This makes the entire process more dynamic, easier to manage, and you're able to provide far more information from your entire site than you would if you just had a single scrolling one page style site. So now that you know what we're aiming for, we're going to jump in and start this process from the beginning. If at any point you're confused about what I'm doing or the design decisions I'm making through the course, you can refer back to this movie and look at what the individual sections look like, and then you'll get an idea of what we're aiming towards.
- Creating a foundation for the front page with a child theme, styles, and dummy content
- Using custom queries to display content from different pages
- Adding testimonials
- Adding a custom menu
- Creating a scrolling effect