BugWP logo BugWP
Back to Community
Home / Community / Theme → Twenty seventeen

How to Hide or Customize the Header and Page Titles in Twenty Seventeen

19 threads Sep 7, 2025 Theme → Twenty seventeen

Content

Customizing the header area is one of the most common tasks for WordPress users. For those using the Twenty Seventeen theme, this often involves hiding the page title on the homepage, removing the header image from specific pages, or replacing an image with a solid color. Based on community discussions, here are the most effective solutions.

Common Problems and Solutions

1. Hiding the Page Title on the Homepage

Many users want to hide the page title (e.g., "Home") on their static front page without affecting other pages. The correct CSS selector for this is more specific than a standard h1 tag.

Solution: Add the following CSS in the Appearance > Customize > Additional CSS panel.

.home .panel-content .entry-header {
    display: none;
}

This targets the title area within the panel content on the homepage specifically, ensuring other page titles remain visible.

2. Removing the Header Image from Specific Pages

A frequent goal is to remove the large header image from all pages except the homepage, or from specific pages like WooCommerce shops or custom templates. Using .site-branding can also hide the site title, which is often not desired.

Solution: To target only the header image, use the .custom-header-media or .wp-custom-header class.

/* Remove header image everywhere except homepage */
body:not(.home) .custom-header-media {
    display: none;
}

/* Remove header image from a specific page by its ID */
.page-id-1934 .custom-header-media {
    display: none;
}

/* Remove header image from WooCommerce pages */
.woocommerce-page .custom-header-media {
    display: none;
}

3. Replacing a Header Image with a Solid Color

Some users prefer a colored background instead of an image for their header on certain pages.

Solution: The following CSS hides the image and applies a background color to the header area on all non-homepage pages.

body:not(.home) .wp-custom-header img {
    display: none;
}
body:not(.home) .custom-header {
    background-color: #ff9900; /* Replace with your hex color code */
}

4. Hiding the Site Title and Tagline on Specific Pages

For users who want to hide the site title and tagline on an unknown number of future pages, a more dynamic solution is needed.

Solution: This requires identifying the unique CSS class for each page. You can find this by:

  1. Right-clicking on the page element in your browser and selecting Inspect.
  2. Looking at the <body> tag's classes in the HTML, which often includes a class like .page-id-123.
  3. Using that class to target the title and tagline.
/* Example for a page with ID 123 */
.page-id-123 .site-title,
.page-id-123 .site-description {
    display: none;
}

Important Notes

  • Use a Child Theme: Always add custom CSS to a child theme or the Additional CSS section to prevent your changes from being overwritten by theme updates.
  • Specificity is Key: CSS rules can affect multiple elements. Use your browser's inspector tool to find the most specific selectors for your goal.
  • Clear Your Cache: After making changes, clear your browser and WordPress caching plugins to see the results immediately.

By using these targeted CSS solutions, you can gain precise control over the Twenty Seventeen theme's header and title display to create the exact look you want for your site.

Related Support Threads Support