Twenty Seventeen is a classic WordPress theme built around a business-style front page with up to four page sections. To set it up, activate it under Appearance > Themes, configure it in Appearance > Customize, choose a static front page, assign pages to the four front-page sections, and add a featured image to each section page. The same Customizer controls your header media, colors, logo, menus, widgets and page layout. Use Additional CSS for small visual overrides; use a child theme when you need changes that must survive theme updates.
Antihost offers managed WordPress hosting with free migration, one-click staging and a 14-day free trial.
What Twenty Seventeen is designed to do
WordPress.org described Twenty Seventeen as “the new default theme for WordPress in 2017.” It is a classic, business-oriented theme rather than a block theme. Its distinctive feature is a front page assembled from ordinary WordPress pages: a static homepage can display a large header followed by up to four page-based sections. Each section can have its own title, text and full-width background image.
As an Amazon Associate I earn from qualifying purchases.
The theme’s main control surface is the WordPress Customizer. It provides a live preview and a Publish button, so you can inspect changes before visitors see them. The exact entry point is Appearance > Customize. Depending on your WordPress configuration, widget editing in the Customizer may use the block-based interface introduced in WordPress 5.8.
Set up Twenty Seventeen step by step
1. Activate the theme
- Sign in to the WordPress administrator dashboard.
- Go to Appearance > Themes.
- Locate Twenty Seventeen and select Activate. If it is not installed, use Add New, search for the theme, install it, and then activate it.
Activation changes the site’s presentation but does not delete your posts or pages. Review the live preview and your menus after activation because the theme’s available locations and layout differ from those of another theme.
2. Open the Customizer
Go to Appearance > Customize. Work through the panels in the live preview, and select Publish only after checking the desktop and narrow-screen previews. The Customizer is where Twenty Seventeen exposes its theme-specific settings as well as WordPress’s general identity, menu and widget controls.
3. Choose a static front page
In the Customizer, open Static Front Page. Select A static page, then choose a page for Homepage and, if you want a separate news listing, a page for Posts page. Create those pages first under Pages > Add New if they do not yet exist.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →This step is required for Twenty Seventeen’s page-layout option and for its section-based front page. If the site remains set to display the latest posts, the front-page section workflow will not be available in the way the theme documentation describes it.
4. Assign the front-page sections
With a static front page selected, open Theme Options in the Customizer. Assign pages to Front Page Section 1, Front Page Section 2, Front Page Section 3 and Front Page Section 4. The default theme exposes four sections. The official documentation also shows a developer filter for sites that need a different number, but changing that count requires code rather than a normal Customizer setting.
Sections are built from pages, not from separate content fields. The page title and page content supply the section’s text. Keep each page focused on one purpose—such as services, an about statement, a portfolio or contact information—so the scrolling front page has a clear rhythm.
5. Add a featured image to every section page
Edit each page assigned to a section and set a Featured image. Twenty Seventeen uses that image as the section’s large background image. The documented recommended featured-image size is 2000px wide by 1200px high (WordPress.org documentation published in 2018 and updated in 2024).
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Choose images with enough empty space for overlaid text and crop them consistently. A subject positioned at the extreme edge can be hidden when the image is resized for different screens. Compress large files before uploading; the theme’s full-width sections can otherwise make the homepage unnecessarily heavy.
6. Publish and verify the result
- Return to the Customizer preview of the homepage.
- Check the order of the section pages and confirm that each intended section has a featured image.
- Review the header, navigation, footer widgets and social links.
- Select Publish.
- Open the public homepage in a separate browser window and test the menu, links and page content.
Configure the header image or video
Open Header Media in the Customizer. You can upload a header image or supply a video. Twenty Seventeen accepts an uploaded MP4 or a YouTube-hosted video. WordPress.org recommends 2000px by 1200px for header images and header videos (documentation from 2018, updated in 2024).
- Image: Use a high-resolution image that keeps important subjects inside the crop-safe central area.
- Uploaded video: Provide an MP4 encoded at a practical file size. Smaller video files reduce the amount a visitor must download before the header can play.
- YouTube video: Enter the YouTube-hosted video as the header-video source in the panel.
If both a video and an image are supplied, the image is shown while the video loads and acts as the fallback on smaller screens. Treat the image as a complete design, not merely as a temporary placeholder: it is the visual visitors may see when video playback is unavailable.
Set colors, branding and navigation
Colors
Open Colors in the Customizer. Twenty Seventeen provides Light, Dark and Custom color schemes. Select Custom to adjust the hue with the available slider. Check text and link contrast in the live preview, especially when a dark overlay or a section image sits behind type.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchSite identity
Use Site Identity to set the site title, tagline, logo and site icon. The title and tagline remain useful when a logo is present because they provide the site’s text identity in contexts where the image is not displayed.
Menus
Open Menus to create or edit navigation. A menu can contain pages, posts, categories, tags, post formats and custom links. Assign the menu to the theme’s available location, then test every item in the live preview. If you changed themes from another design, confirm that the correct menu is assigned rather than assuming the previous location carried over.
Social links
Twenty Seventeen’s Social Icons Menu displays supported social-service logos in the footer. Add the relevant profile URLs as custom links in a menu, then assign that menu to the Social Links location. The icon is generated from the service URL; use the service’s canonical profile address and verify each link after publishing.
Understand the front-page and page layouts
The static front page is not optional if you want Twenty Seventeen’s page-layout choice and section composition. Once a static homepage is selected, individual pages can use either a one-column or two-column arrangement.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errors| Layout | Title position | Documented main-column width | Best fit |
|---|---|---|---|
| Two-column | The page title sits beside the content. | Up to 525px (WordPress.org, documentation from 2018, updated 2024) | Pages that benefit from a narrower reading column and a sidebar when one is active. |
| One-column | The title sits above wider, centered content. | Up to 740px (WordPress.org, documentation from 2018, updated 2024) | Long-form text, galleries or layouts that need a broader central area. |
The documented sidebar width is up to 326px (WordPress.org, documentation from 2018, updated 2024). The exact visual result also depends on the browser window, the content’s own elements and whether widgets are present.
Place and control widgets
Twenty Seventeen includes a footer widget area on every page. Blog indexes, archives, search results and single-post views can also display a sidebar widget area. Add widgets through the Customizer’s Widgets panel (or the block-based widget editor where your WordPress installation exposes it).
- Footer: Use for secondary navigation, a short contact block, site information or other content that should be available throughout the site.
- Sidebar: Use on post and archive views for supplementary navigation or contextual information.
If the sidebar contains no widgets, content displays in one centered column. When you add widgets, they occupy the other column and the main content becomes the two-column arrangement. This means an empty sidebar is not a missing component; it is the theme’s instruction to use the wider single-column presentation.
Choose between Additional CSS and a child theme
Use Additional CSS for contained visual overrides
For small styling changes, open Additional CSS in the Customizer. This is suitable for adjustments such as a color refinement, spacing change or a targeted typography override. The live preview lets you confirm the selector’s effect before selecting Publish.
Rank #4
Keep overrides narrowly scoped. A broad rule can unintentionally change navigation, widgets and post content at the same time. If a rule appears not to work, inspect whether a more specific theme rule or a later declaration is winning, and check the page in both one-column and two-column contexts.
Use a child theme for maintainable theme-file changes
When you need to modify template files or maintain a substantial set of CSS and PHP changes, create a child theme instead of editing Twenty Seventeen directly. The WordPress Core team states: “It’s considered best practice to create a child theme if you want to modify the CSS of your theme.” A child theme keeps your changes separate from the parent theme, so updating the parent does not overwrite the files you changed.
Use the Customizer for settings and modest CSS. Move to a child theme when the change depends on theme files, custom template markup or code that must remain organized as the parent theme evolves. Keep a record of the files you override and test the site after each parent-theme update.
Content formats and typography
Twenty Seventeen supports the aside, audio, gallery, image, link, quote and video post formats. Select the format that matches the post’s content when the editor offers that option; the theme can then present that post type with its intended styling rather than treating every entry as an identical standard post.
Recommended Free Tools
The default typeface is Libre Franklin. The theme also includes typography adjustments for Arabic, Chinese, Cyrillic, Devanagari, Greek, Gujarati, Hebrew, Japanese, Korean, Thai and other listed alphabets. If your site publishes in one of those scripts, preview representative headings, body text and navigation labels before finalizing font sizes and line lengths.
Pullquotes can use alignleft or alignright classes. Their positioning is affected by the selected column layout, so verify pullquotes on both one-column and two-column pages instead of assuming an alignment will look identical everywhere.
A practical customization decision guide
| Goal | Where to change it | What to check |
|---|---|---|
| Build a scrolling business homepage | Static Front Page, then Theme Options | A static homepage is selected, each section points to the intended page, and every section page has a featured image. |
| Change the hero visual | Header Media | Use the 2000px × 1200px recommendation; supply a fallback image when using video. |
| Change the site’s palette | Colors | Check readability in Light, Dark or Custom mode and across image-backed sections. |
| Change the logo or browser icon | Site Identity | Confirm the title and tagline still communicate the site when the logo is not visible. |
| Change navigation | Menus | Assign the menu to the correct location and test pages, categories, tags and custom links. |
| Add footer or sidebar content | Widgets | The footer is global; the sidebar appears on posts, archives, search and blog indexes when populated. |
| Make a modest visual adjustment | Additional CSS | Scope selectors narrowly and preview both column layouts. |
| Change templates or maintain code | A child theme | Keep parent-theme files untouched and retest after updates. |
Troubleshoot common setup problems
The section controls are missing
Confirm that Static Front Page is set to A static page. The section assignments depend on that choice. If the control is still absent, verify that you are editing Twenty Seventeen’s Customizer panels rather than another active theme’s settings.
A section has no large background image
Edit the page assigned to that section and set its Featured image. The page’s featured image—not an image inserted only inside the page body—drives the section background. Use the documented 2000px × 1200px recommendation and inspect the crop in the live preview.
Free tools Windows power users keep installed
One-click scans. No signup required.
The homepage displays posts instead of sections
Return to Static Front Page and choose a designated homepage. A site configured to show the latest posts is using a different front-page mode, so the page-section composition will not appear as expected.
The sidebar is not visible
Check whether a widget has been added to the sidebar area. Twenty Seventeen displays a centered single column when that area is empty. A populated sidebar appears on blog indexes, archives, search pages and single posts, not necessarily on every page type.
The video does not appear on a small screen
Supply a header image as well as the video. Twenty Seventeen uses the image as the loading placeholder and as the fallback on smaller screens. Also reduce the video file size where possible to improve loading.
Changes disappeared after a theme update
Move direct theme-file edits into a child theme. Use Additional CSS for CSS-only overrides and keep settings in the Customizer. Editing the parent theme itself leaves those edits vulnerable to replacement when the parent is updated.
Maintain the site after launch
- Keep the static homepage and section assignments documented so another administrator can reconstruct the front page.
- Retain the original, uncropped versions of section and header images so you can replace compressed files without losing the intended composition.
- After changing a menu, widget, color scheme or layout, check the public homepage, a single post, an archive and a search page—the theme does not use the same widget and column behavior on all of them.
- After a parent-theme update, test child-theme templates, Additional CSS rules, header media and all four section pages before considering the update complete.
What Twenty Seventeen is best suited to
Twenty Seventeen is a strong fit when the site needs a classic WordPress workflow, a page-based scrolling homepage, large image-led sections, conventional menus and widget areas, and Customizer-driven settings. Its most important design decision is also its main constraint: the front page is assembled from pages, so the quality of the result depends on how deliberately those pages are written and imaged. For code-level changes, the update-safe path is a child theme; for contained visual changes, Additional CSS is the appropriate boundary.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
