Hack: How I Created a Simple One-Page WordPress Site In Two Hours

I’ve heard the term “one-page site” a lot recently, and they make sense for a lot of purposes. But using WordPress for one-page sites seems a little odd. After all, WordPress’ strength is as a content management system.

But then I see a lot of front pages to WordPress sites that look like one-page sites. Sometimes they are, and sometimes the list of posts on the front page is just so informative that the site might as well not even have links to individual posts.

So I started to think about how I would build a one-page site with WordPress. First, I would choose whether the site really had just a single page, and that single page was the home page. Or, I would have the site be a small set of posts, and the front page would show all of the content for all of the posts.

I decided to try the latter. After all, a lot of one-page sites are broken into sections. So each post would be a section. In my example, there will be 6 posts, and all of the content for all of the 6 posts would be on the front page.

So I loaded up a fresh WordPress install on a subdomain. Now to choose a theme. I searched far and wide for good themes for one-page sites. Lots of results came back, but I liked very few of them. And they all seemed to be the standard “free” themes now — they are free, but trying to sell you upgrades or features or plugins, etc.

So I just went back to good old TwentySeventeen. The way it has a big header image that scrolls away as you scroll down already makes it seem like a one-page site theme.

I wrote my 6 posts. Each was a bit of text and an image. I set a header image and the site title and subtitle. Then I customized the theme to remove all of the items from the sidebar widget. This expanded the front page content into a single-column. However, the whole left side had the page header, in this case the word “POSTS.” To get rid of that and to make some other adjustments, I’d need to customize.

So I started a child theme, just like in my previous post. I needed to add some custom styling. To get rid of the POSTS heading on the left and to expand the column of content to fill the whole width, I added this to the child theme’s styles.css.

header.page-header {
    display: none;
}

.blog:not(.has-sidebar) #primary article {
    width: 100%;
}

The first bit hides the heading. The second expands the content.

Next, I wanted to get rid of the date for each post. To do this, I copied the template_parts/post/content.php file to my child theme. I then removed the whole entry_meta section.

That wouldn’t be the only thing I needed to change in that file. I also wanted to remove the A HREF link around the post titles. I don’t want anyone to ever view those posts at their actual pages. All of their content is on the front page and that is the only place anyone should go.

I did make one more change to the styles.css file. I added this line because TwentySeventeen likes to put a little space above text when an image is next to it. Since I’m doing that with my posts, I needed this little adjustment for things to look right.

div.wp-block-image {
	margin: 0;
}

Now there was one last major thing to change. My 6 posts were showing up in the wrong order. One way to solve that would be to change the dates for all of them so they were in the proper order. That would mean the first post would have the most recent date. That would work.

But I opted to change the way WordPress orders the posts using code. So here’s a bit for the child theme’s function.php file that makes WordPress show everything by alphabetical order by title. Since I’m showing 6 steps here, it makes sense.

// show posts by title order, not date
add_action('pre_get_posts', 'wpaction_change_order'); 
function wpaction_change_order($query) {
	$query->set('order', 'ASC');
	$query->set('orderby', 'title');
}

And the result is a pretty decent-looking one-page site. Here it is. There are 6 sections that appear as a single flow of content. The header image is a nice introduction to the site and it scrolls out of view nicely. Since I didn’t mess too much with the theme, it remains very responsive and looks good on desktops, tablets and phones.

I’m using the Block Editor throughout the posts, so I could easily add media, links, images, buttons, etc. So this would work as a marketing page, or for an event, etc. And I haven’t removed the ability to have other pages, so I could link to a few more pages, like an about page or contact form.

Leave a Reply

Your email address will not be published. Required fields are marked *