Back to Community
Home / Community / Theme → Twenty nineteen

How to Control and Customize Featured Images in the Twenty Nineteen Theme

21 threads Sep 16, 2025 Theme → Twenty nineteen

Content

The Twenty Nineteen theme uses featured images in a unique and visually striking way, often displaying them as large header backgrounds on posts and pages. While this creates a modern aesthetic, many users find they need more control over how these images are presented. Based on common community questions, this guide covers the most frequent requests for modifying featured image behavior.

Common Featured Image Customizations

Users often want to:

  • Remove the automatic darkening filter applied to header images.
  • Prevent the theme from using a post's featured image as a large header.
  • Display the featured image within the post content instead of, or in addition to, the header.
  • Adjust the size and dimensions of featured images.

Removing the Darkening Filter on Featured Images

The dark overlay is a design feature intended to improve text readability when the site title and menu are overlaid on the image. To remove it, add the following CSS code to your site. You can place this in the Additional CSS section found in Appearance > Customize, or in your child theme's style.css file.

.site-header.featured-image:after {
    background: none !important;
}

If this doesn't work immediately, check if other CSS rules are overriding it. Using !important can help ensure the rule is applied.

Disabling the Featured Image Header on Single Posts

If you want to keep using featured images for post thumbnails in blog feeds but prevent them from appearing as large headers on the individual post pages, you have two options.

Option 1: CSS Method (Quick Fix)
Hiding the image with CSS is a simple solution. However, note that this may leave empty space where the header was and might not change the text color, which is white by default to contrast with the dark image.

.site-featured-image .post-thumbnail {
    display: none;
}

You may also need to add CSS to change the header text color to something visible on a lighter background.

Option 2: Template Modification (More Robust)
A more permanent solution is to modify your theme's template files. Since you should never edit the parent theme directly, create a child theme first. Then, copy the relevant template file from the parent theme into your child theme folder. The file that controls the single post header is often template-parts/content/content-single.php. You would need to locate and remove or comment out the code that calls the featured image function, such as twentynineteen_post_thumbnail().

Displaying the Featured Image Within Post Content

To display the featured image directly above the post content, you can add the following code to your child theme's functions.php file. This will automatically insert the image at the beginning of your post content.

function add_featured_image_to_content( $content ) {
    if ( is_single() && has_post_thumbnail() ) {
        $thumbnail = get_the_post_thumbnail( null, 'large', array( 'class' => 'aligncenter' ) );
        $content = $thumbnail . $content;
    }
    return $content;
}
add_filter( 'the_content', 'add_featured_image_to_content' );

The aligncenter class should center the image. You can adjust the image size (e.g., 'medium', 'large', 'full') and add additional CSS to style it further.

Important Considerations

  • Child Theme: Always use a child theme for any code modifications. This prevents your changes from being overwritten when the Twenty Nineteen theme is updated.
  • Caching: After making CSS or code changes, clear your site's cache and your browser cache to see the results immediately.
  • Specificity: Some changes, like resizing the featured image, may require modifying WordPress image settings or using a plugin to regenerate thumbnails after new dimensions are set.

These solutions address the most common community issues regarding featured images in Twenty Nineteen. For more complex modifications, such as adding secondary featured images or deeply integrating with plugins like WooCommerce, searching for dedicated plugins or more advanced tutorials is recommended.

Related Support Threads Support