Twenty Seventeen shipped as the new default theme with WordPress 4.7. This business-oriented theme marks a noteworthy departure from the blog-centric default themes of the past and reflects WordPress’ broader transition from a blogging platform into a platform well-suited to creating all sorts of websites.
If you plan to try out Twenty Seventeen you’ll figure something out quickly: this theme is nothing like its predecessors. Past default themes have required only minimal setup and were designed to be functional blog themes right out of the box. This is not the case with Twenty Seventeen.
Sure, you can use it as a blogging theme, but that really isn’t what it’s designed or intended for. It’s really designed to build business websites using a section-based landing page style homepage — which you can quickly discern by taking a look at the official theme demo site.
The result of this shift in focus is that setting up Twenty Seventeen takes a bit more doing than past default themes. In this post, we’ll explore Twenty Seventeen, see what it has to offer, and I’ll walk you through the theme setup so that you can set up a professional business landing page with Twenty Seventeen with ease. Continue reading, or jump ahead using these links:
- The Twenty Seventeen Theme
- How to Create Homepage Sections in Twenty Seventeen
- Step 1: Create a Page for Each Homepage Section
- Step 2: Add a Featured Image to Each Page
- Step 3: Assign a Static Front Page and a Posts Page
- Step 4: Assign Pages to Each Front Page Section
- Step 5: Create Your Primary Navigation Menu
- Step 6: Add a Video Header
- Extra Credit: Create Dynamic On Page Navigation
The Twenty Seventeen Theme
The use of a landing page to serve as the homepage for business websites has taken the web by force. And Twenty Seventeen makes it easy to build an attractive business landing page with the default WordPress theme.
To get a sense of the possibilities, take a look at the official Twenty Seventeen theme demo.
Right off the bat, you’ll notice the video header. Scroll down a little and the sectional design of the page will become apparent. Each section is separated by a striking parallax background image that occupies the full width and height of the viewport.
Navigation is made simple with a sticky top navigation bar. And a single font, Libre Franklin, is used throughout the theme in a variety of weights, brightness values, and styles.
Once properly set up, Twenty Seventeen presents a modern, professional look, built upon readable font selections and strong use of striking visuals balanced by the generous use of whitespace.
How to Create Homepage Sections in Twenty Seventeen
Provided how much emphasis Matt Mullenweg has placed on the Customizer in recent history, it’ll come as no surprise that much of the Twenty Seventeen setup work happens in the Customizer.
In addition to the standard features such as menu and widget setup, from the Customizer, you can set up a header image or video, switch to a different color scheme, and assign content to your front page sections.
WordPress 4.7 also introduces a new feature called visible edit shortcuts — they appear as blue icons in the image above. Clicking on any of these shortcuts will open up the Customizer menu where that part of the site can be customized.
That makes it pretty easy to edit many of the features in Twenty Seventeen such as the header image, site tagline and title, and the content appearing in each page section. Just find the content you wish to edit, click on the visible edit shortcut, and customize to your heart’s content.
WordPress 4.7 also ships with a new Customizer feature which you’ll find under the Additional CSS Customizer menu option. We’ve written about the new Additional CSS feature before, so we just briefly mention it again here and point out that it is a core feature and not a feature specific to Twenty Seventeen.
To demonstrate how to set up Twenty Seventeen I’m going to setup the theme as if I were going to use it for my personal website. Let’s get right to it.
Step 1: Create a Page for Each Homepage Section
The first thing you need to do is to create a few pages:
- Create a page to serve as your static homepage.
- Create a page to serve as your blog or posts page.
- Create up to four additional pages to contain the content that will be displayed in your homepage sections — make it three additional pages if you plan to use your blog or posts page as one of the homepage sections.
In the case of my example website, I created a home page, blog page, about page, services page, and contact page.
Step 2: Add a Featured Image to Each Page
In order to achieve the parallax image effect, you need to add a large featured image to each page that will be part of your front page sections. You will probably not want to add a featured image to the home page you created in the previous step, but you will want to add a featured image to every other page.
The Twenty Seventeen demo uses images that are 2000 pixels wide by 1200 pixels tall. Images that are close to that size work very well. Don’t use small images or the results will be very poor.
In my case, I sourced free images from StockSnap and resized them all to 2000 pixels wide and approximately 1200 pixels tall, give or take 10 percent.
Step 3: Assign a Static Front Page and a Posts Page
Now it’s time to start customizing. Launch the Customizer — go to Appearance > Customize in the admin area or click Customize on the admin bar while viewing the site front end.
Select the Static Front Page menu item and make the following setting adjustments:
- Beneath Front page displays, select the radio button for A static page.
- From the Front page dropdown menu, select your site home page.
- From the Posts page dropdown menu, select your posts or blog page.
Don’t forget to hit Save & Publish, and then move on to the next step.
Step 4: Assign Pages to Each Front Page Section
To assign the various pages you created previously to the front page sections select the Theme Options menu item from the Customizer. Next, use the drop-down menus to assign each page to the relevant front page section where you want it to appear.
Step 5: Create Your Primary Navigation Menu
You can create your navigation menu either by selecting the Menus option from the Customizer menu or by going to Appearance > Menus in the admin area. In either case, creating WordPress menus hasn’t changed in WordPress 4.7, so create a menu just as you have done in the past and assign it to the Top Menu location.
Step 6: Add a Video Header
Next, let’s replace that ho-hum header image with a video. Go to the relevant section of the Customizer by clicking on the appropriate visible edit shortcut or locate the Header Media menu item in the Customizer.
Upload or select the video you wish to use. Alternatively, you can also provide the URL of a YouTube video to display in the header if you wish. If you do upload a video note that the theme instructions recommend a video with dimensions of 2000 by 1200 pixels.
I selected a free stock video to use for my site. At 1920 by 1080 pixels, it wasn’t quite up to the recommended dimensions but it still looks quite nice.
At this point, your static homepage with front page sections is done!
Extra Credit: Create Dynamic On Page Navigation
One feature that is notably absent from Twenty Seventeen is built-in support for navigation between the front page sections. It sure would be nice if the navigation took you directly to the relevant sections of the homepage. Thankfully, this is an omission we can quickly remedy.
The first thing to do is to create a menu that links to id attributes rather than to different pages of your website. To do this, create custom menu links that look like this:
When crafting IDs, simply use the page titles from each page displayed as a front page section, but convert the title to lower case and replace any spaces in the title with dashes.
If you have installed WordPress in a subdirectory — a fairly common practice for sites developed in a local development environment — you will need to include the subdirectory in your link. For example, for this project, my development site URL is http://localhost/wp4point7. This means that WordPress is installed in a subdirectory: …/wp4point7. In order for the links to work properly, I need to include the subdirectory in the URL like this: /wp4point7/#about.
If you aren’t working with a subdirectory installation you can omit the subdirectory and use the structure shown in the image above.
With your navigation in place, you need to add ids to each front page section. You can do this in one of two ways.
The simplest solution is to add the ids directly to the page titles using the WordPress page editor.
Notice that to add the id I’ve wrapped the title in a span element. The id itself is just the page title in lowercase with any spaces in the title replaced with dashes — this means that the IDs will match the IDs we added to the custom navigation menu links. In addition, I’ve added a style attribute and 96 pixels of top padding. When the links are clicked this padding value pushes the content down so that it can be seen below the sticky navigation bar.
To be honest, this approach is a bit of a hack and I don’t much care for it. What I’d rather do is add the span element, id, and padding using jQuery. That way, I’m not mucking up the page titles in the editor but still accomplish the same end result.
Here’s a bit of code I came up with that produces the desired results:
What that code does is locate the title of each section and then wrap the title in a span with the necessary styling applied. In addition, the code creates an id value by grabbing the section title, converting it to lower case, and then replacing spaces with dashes. So, if you were to have a section with the title My Blog (such as in the image above), this code would add the following id attribute: id='my-blog'.
This id format matches the same syntax I recommended for your custom navigation menu links.
To load that code on your site you could add it in one of two different places: a JavaScript file that is part of an activated Twenty Seventeen child theme or to a plugin that loads custom JavaScript.
Personally, I went the second route and used the custom CSS and JavaScript plugin described in the article How to Turn Any WordPress Theme Modification into a Simple Plugin. However, you could just as easily use a plugin like Simple Custom CSS and JS to add the jQuery.
With the jQuery loaded and the new navigation menu created, here’s how my site’s primary navigation now works.
Now Twenty Seventeen is set up as a landing page and the primary navigation works as on-page navigation between the homepage sections. If you want to take things a few steps further, you could consider implementing the following additional enhancements:
- Add redirects so that anyone who lands directly on one of the pages that are displayed as homepage sections is redirected to the relevant section on the homepage. For example, redirect the page http://example.com/contact to the front page section http://example.com/#contact.
- If you opted to use jQuery to enable navigation between front page sections, use conditional tags to only load the code on the homepage.
- If your site will include additional pages that aren’t home page sections, add those to the navigation menu and nest all of the front page section links in a drop down menu as shown in the image below.
Conclusion
Twenty Seventeen signals a whole new breed of WordPress theme — at least, as far as default themes are concerned. It’s clear that the WordPress developers behind Twenty Seventeen were committed to pushing WordPress further from its blogging roots and into the world of business and eCommerce websites.
Twenty Seventeen offers a beautiful and modern section-based front page design. However, setting it up takes a bit more effort than previous standard themes have required.
As you’ve seen in this post, putting in the effort is well worth it and the result is a far more professional and attractive business website that previous default themes could ever have dreamed of creating.
Editor’s Note: This post has been updated for accuracy and relevancy. [Originally Published: December 2016 / Revised: February 2022]
Tags:
