iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Antihost offers managed WordPress hosting with free migration, one-click staging and a 14-day free trial.
Twenty Seventeen is a classic, business-oriented WordPress theme built around a long-form front page made from page sections. To set it up, activate the theme, open Appearance > Customize, choose a static front page, assign up to four pages to the front-page sections, and give those pages featured images. The same Customizer controls the header image or video, colors, logo, menus, widgets, and layout choices.
This guide covers the complete setup workflow, the documented image and column dimensions, customization that survives updates, and the practical fixes for common layout problems.
What Twenty Seventeen is and when it fits
WordPress.org introduced Twenty Seventeen as “the new default theme for WordPress in 2017.” It remains a classic theme rather than a block theme, so its main design controls live in the WordPress Customizer and its page content is edited with the normal WordPress editor. The design suits a small business, organization, portfolio, or service site that wants a prominent hero area followed by several visual content sections.
Its defining feature is the front page: each section is powered by a regular WordPress page. The page supplies the section heading and content, while that page’s featured image becomes the section’s full-screen background image. You can also use a conventional blog index, standard pages, post formats, widgets, a social menu, a logo, and header media.
Activate Twenty Seventeen and open its controls
Activate the theme
- Sign in to WordPress with an account that can manage themes.
- Open Appearance > Themes.
- Find Twenty Seventeen and select Activate. If it is not installed, choose Add New, search for the theme, install it, and then activate it.
Activation does not publish a new design until you save Customizer settings. Your existing posts, pages, media, menus, and widgets remain in the site database.
Use the live Customizer
Open Appearance > Customize. The left panel contains the controls and the right side shows a live preview. Changes remain unpublished until you select Publish; use the preview to check desktop and mobile views before committing them. The exact panel list can vary with WordPress version, installed plugins, and site configuration, but the central workflow is the same.
Free tools Windows power users keep installed
One-click scans. No signup required.
Build a static front page with four sections
Twenty Seventeen’s sectioned layout is available only when the site uses a static front page. A site that displays the latest posts as its home page will not expose the section assignment controls in the expected way.
Create the pages first
- Open Pages > Add New and create the page that will serve as the home page, for example “Home.” Add the introductory content you want visitors to see.
- Create up to four additional pages for the visual sections, such as “About,” “Services,” “Work,” or “Contact.” Keep each page focused on one subject so the scrolling front page has a clear rhythm.
- For every section page, set a Featured image in the editor’s page settings. Twenty Seventeen uses that image as the section’s full-screen background.
- Publish or update the pages before assigning them in the Customizer.
Assign the static front page
- Return to Appearance > Customize.
- Open Static Front Page.
- Select A static page.
- Choose your Home page in the Homepage field.
- Choose a separate page in the Posts page field if you want a blog index. Do not use the same page for both fields.
Assign the front-page sections
- In the Customizer, open Theme Options.
- Assign pages to Front Page Section 1, Front Page Section 2, Front Page Section 3, and Front Page Section 4.
- Review the preview after each assignment. The section order follows the numbered controls.
- Select Publish when the order and content are correct.
The standard theme exposes four sections. Developers can alter that count with the theme’s documented filter, but doing so is a code customization rather than a Customizer setting. A child theme is the safer place for that change so a parent-theme update does not overwrite it.
Prepare images that work as backgrounds
Background images are cropped to fill the section, so keep the important subject near the center and avoid placing small text or logos close to the edges. Use a large, well-compressed image rather than a tiny file that will be enlarged on wide screens. The documented recommended featured-image size for these sections is 2000px wide by 1200px high (WordPress.org documentation published in 2018 and updated in 2024). The recommendation is a target, not a requirement; WordPress can display other dimensions, but unusual ratios may crop more aggressively.
Choose a header image or video
Set header media
- Open Appearance > Customize > Header Media.
- Upload or select a header image, or choose a video file.
- Check the crop and focal point in the preview.
- Select Publish.
Twenty Seventeen accepts an uploaded MP4 or a YouTube-hosted video. The documented recommended dimensions for both header images and header videos are 2000px wide by 1200px high (WordPress.org, 2018; page updated 2024). A video file should be kept as small as practical because it is downloaded before visitors can see the moving header. If both a video and an image are supplied, the image appears while the video loads and acts as the fallback on smaller screens.
Make the header readable
- Choose an image with enough contrast behind the site title and navigation.
- Keep faces, products, and other essential details away from the edges, where responsive cropping is most likely.
- Use a short, compressed MP4 and test on a phone using a normal cellular connection.
- Always provide the fallback image; visitors on smaller screens or with video disabled will see it instead.
Set the site identity, colors, menus, and social links
Site identity
Open Appearance > Customize > Site Identity to edit the site title and tagline, upload a logo, and set the site icon. The site icon is the small browser and bookmark graphic; it is separate from the larger logo displayed in the header. Keep the title and tagline concise so they do not collide with the navigation at narrow widths.
Color schemes
Open Appearance > Customize > Colors. Twenty Seventeen provides Light, Dark, and Custom schemes. Select Custom to adjust the hue with the available slider. Check body text, links, buttons, and text over background images in the preview; a color that looks attractive in a swatch can fail contrast when placed over a photograph.
Primary navigation
- Open Appearance > Menus, or use the menu panel inside the Customizer.
- Create a menu and add the pages, posts, categories, tags, formats, or custom links you need.
- Drag items to establish the order and hierarchy.
- Assign the menu to the theme’s primary navigation location and save it.
Menu items can point to a page, a post, a category archive, a tag archive, a post-format archive, or an external custom link. Remove unused items on mobile-sized previews so the navigation remains easy to scan.
Social Icons Menu
Create a separate menu containing links to supported social services, then assign it to the Social Links Menu location. Twenty Seventeen converts recognized service URLs into their corresponding icons in the footer. Use the complete profile URL and verify each link in the preview; unsupported services may appear as ordinary text links instead of an icon.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Choose one-column or two-column page layouts
The page layout control becomes available after a static front page is configured. Edit an individual page, locate its page-layout setting in the editor or page attributes area, and choose the layout that matches the content.
Two-column layout
In a two-column page, the title sits beside the main content and the sidebar occupies the other column when widgets are assigned. The documented maximum main-column width is 525px, and the documented maximum sidebar width is 326px (WordPress.org, 2018; page updated 2024). This arrangement works well for an article that benefits from related links, a search box, or other supplementary widgets.
One-column layout
The one-column option places the title above wider, centered content. Its documented maximum main-column width is 740px (WordPress.org, 2018; page updated 2024). Use it for landing pages, image-heavy layouts, forms, or long instructions where a narrow sidebar would distract from the main reading path.
These are maximum theme dimensions, not guarantees that every image or embedded item will render at exactly that width. A plugin, custom CSS, or a very narrow viewport can reduce the available space.
Recommended Free Tools
Place and manage widgets
Footer widget area
Twenty Seventeen provides a footer widget area on every page. Open Appearance > Widgets, add a widget to the footer area, configure it, and save. Typical choices include a short text block, contact details, a navigation menu, or a compact list of recent posts. Keep the footer concise because it appears throughout the site.
Rank #4
Sidebar widget area
Blog indexes, archives, search results, and single posts can expose a sidebar. When sidebar widgets are present, they occupy the second column; when the sidebar is empty, the content expands into one centered column. This behavior means an accidental widget can change the apparent width of every post, while removing all sidebar widgets can make the same posts wider.
WordPress 5.8 and later may show block-based widget editing in the Customizer, depending on the site configuration. The controls look different from the older widget screen, but the placement principle is the same: add blocks to the footer or sidebar area, save them, and inspect the resulting page types.
Keep widgets consistent
- Use the sidebar for functions that help readers navigate or act, not for every available widget.
- Check a single post, an archive, a search result, and a page because widget visibility differs by template.
- After changing widgets, clear any page cache and test a logged-out browser if visitors still see the old arrangement.
Customize CSS without losing changes
Use Additional CSS for visual overrides
For a small visual change, open Appearance > Customize > Additional CSS. Add the CSS, watch the live preview, and select Publish. This panel is appropriate for typography adjustments, spacing, colors, borders, and other presentation overrides that do not require editing PHP templates.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsUse specific selectors only where needed. A broad rule such as changing every h1 can unintentionally alter archive titles, widget headings, and the site title. After publishing, inspect the front page, a page, a post, an archive, and a narrow viewport.
Use a child theme for persistent code changes
Do not edit Twenty Seventeen’s parent-theme files directly. A parent-theme update can replace those edits. 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 is also the right location for PHP changes such as changing the number of front-page sections, adding template hooks, or enqueueing a stylesheet.
A typical child-theme workflow is:
- Create a child-theme directory with its own stylesheet and theme metadata.
- Declare the parent theme as the template and enqueue the child stylesheet according to WordPress’s child-theme conventions.
- Activate the child theme from Appearance > Themes.
- Move custom CSS or template overrides into the child theme, then test every affected template.
- Keep a backup of the child theme and document each override so future WordPress or theme updates can be tested deliberately.
Use Additional CSS when the change is purely visual and local. Choose a child theme when the change must live in files, alter PHP behavior, or remain maintainable as the parent theme evolves.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Use post formats and language-aware typography
Supported post formats
Twenty Seventeen supports the aside, audio, gallery, image, link, quote, and video post formats. Select the appropriate format in the post editor when the format panel is available. The format changes how the theme presents the post; it does not convert the post into a separate content type.
Typography and international text
The theme uses Libre Franklin by default and includes typography adjustments for Arabic, Chinese, Cyrillic, Devanagari, Greek, Gujarati, Hebrew, Japanese, Korean, Thai, and other listed alphabets. Test the actual language and punctuation used by your site rather than judging only the English preview. Long translated headings can wrap differently and alter the height of a front-page section.
Pullquotes and column layouts
Pullquotes can use the alignleft or alignright classes. Their position is affected by the selected column layout, so a pullquote that fits comfortably in a one-column page may crowd the narrower main column beside a sidebar. Review both layouts if the same content is reused.
Diagnose common setup problems
The front-page sections are missing
- Confirm that Static Front Page is set to A static page, not Your latest posts.
- Make sure the section pages exist and are published.
- Return to Theme Options after saving the static-page choice; the assignment fields should then appear.
A section has no background image
- Edit the page assigned to that section and set a featured image.
- Use an image large enough for the intended display and check that it is not blocked by a media or optimization plugin.
- Save the page, reload the Customizer preview, and publish the Customizer changes.
The sidebar appears unexpectedly
Open Appearance > Widgets and inspect the sidebar area. Any widget placed there can trigger the two-column presentation on posts, archives, search pages, or other templates that support a sidebar. Remove unnecessary widgets if you want a centered single column.
A video header is blank or slow
- Confirm that the file is an MP4 or that the YouTube URL is valid.
- Supply a header image as the loading and small-screen fallback.
- Compress the video and test it while logged out on a mobile connection.
- Check that a caching, security, or content-delivery setting is not blocking the video request.
CSS changes disappeared after an update
Changes made directly inside the parent theme are not update-safe. Reapply visual rules through Additional CSS or move code and template edits into a child theme. If a child-theme override no longer matches the updated parent markup, compare the selectors and templates before changing the rule.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →A practical launch checklist
- Twenty Seventeen is activated under Appearance > Themes.
- The static homepage and, if needed, a separate posts page are selected.
- Each assigned front-page section has focused copy and a featured image.
- Section images and header media are prepared near the documented 2000px by 1200px recommendation and compressed appropriately.
- The site title, tagline, logo, site icon, color scheme, primary menu, and social menu are checked at narrow and wide widths.
- Each page uses the one-column or two-column layout that fits its content.
- Footer and sidebar widgets are intentional and have been checked on every template that displays them.
- CSS-only changes are in Additional CSS; PHP or structural changes are in a child theme.
- Post formats, translated text, pullquotes, and embedded media have been reviewed on the actual content types visitors will use.
- The complete site has been viewed while logged out after caching is cleared.
How to decide whether to keep the classic approach
Twenty Seventeen is a good fit when you want a Customizer-driven workflow, a page-based scrolling front page, header image or video support, flexible one- and two-column pages, footer and sidebar widgets, a social-icons menu, and built-in post-format and multilingual typography support. It is less suitable if your priority is editing every template area as blocks inside the Site Editor, because its documented controls are centered on the classic Customizer and widget areas.
For a straightforward organization or service site, the safest pattern is to keep content in pages and posts, use the Customizer for supported settings, put modest visual changes in Additional CSS, and reserve a child theme for code or structural changes. That separation keeps future updates manageable while preserving the visual system that makes Twenty Seventeen recognizable.
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.
