WordPress Featured Image Not Showing: How to Fix it?

wordpress featured image not showing error (how to fix)

Featured images play a vital role in enhancing the visual appeal and engagement of WordPress pages and posts. A well-chosen featured image can grab attention, improve click-through rates, and enhance overall user experience. However, when featured images fail to display, it can disrupt the aesthetic of your site.

This issue can arise due to various reasons, like incorrect image dimensions, plugin conflicts, or theme-related problems. Identifying and resolving these issues is essential to maintain the WordPress website. So we’ll see how the professional WordPress developers do it. Let’s begin.

There are several reasons why your featured image might not be appearing in WordPress. Here are the most common culprits:

  • Image Not Set: Sometimes, the featured image might not be set correctly. Go to the post or page, find the “Featured Image” section, and ensure an image is selected and set.
  • Theme Support: Not all themes support featured images. Ensure your theme is configured to display featured images by checking your theme’s settings. If it doesn’t support featured images, switch to a different theme that supports them.
  • Plugin Conflicts: Certain WordPress plugins can interfere with the display of featured images. Temporarily deactivate your plugins to see if the issue is resolved. If it does, reactivate them one by one to identify the problematic plugin.
  • Image Size and Dimensions: If your featured image is not properly sized, it might not display correctly. Use the WordPress built-in image editor to customize the image size and cropping of your featured images.
  • Incorrect Image URL: Make sure the image URL is correct and accessible. A broken link will prevent the image from loading.
  • Incorrect File Permissions: Your WordPress installation might have incorrect file permissions that prevent images from being displayed. Ensure that your uploads directory has the correct permissions, typically 755 for directories and 644 for files.
  • Caching Issues: Sometimes, browser or server caching issues can prevent changes from appearing. Clear your web browser cache and WordPress cache to see if it resolves the problem.
  • Lazy Loading: Implementing lazy loading may delay featured image display. Check your lazy loading plugin’s setting to ensure that the necessary elements of the site load quickly.
  • Incorrect Image Placement: Ensure you’re using the correct PHP function or shortcode to display the featured image in your theme or template.

These were some common reasons why featured images are not showing up in WordPress. Now that we know why, let’s check how WordPress development experts fix this error.

Want an error-free WordPress website?

There can be several reasons why your featured image isn’t showing up in WordPress. Here are some common reasons of this error and their fixes:

Method 1: Fix the HTTP Error When Uploading a Featured Image

This error occurs when there’s an issue with transferring the image file to your WordPress server. It might be due to file size limitations, incorrect file format, configuration problems, or network connectivity issues.

Here’s how you fix this issue:

Step 1: Check File Size

Most WordPress installations have a default upload limit (usually around 2MB). Check your server’s PHP configuration for the upload_max_filesize and post_max_size settings.

To increase the file size limits, edit your wp-config.php file and add the following lines:

define('UPLOAD_MAX_SIZE', '64MB'); 

define('POST_MAX_SIZE', '64MB');

Step 2: Verify Image Format

Ensure the image is in a supported format (JPEG, PNG, or GIF). Check your WordPress installation and theme for any specific format restrictions.

Step 3: Increase WordPress Memory Limit

If you’re dealing with large images, increasing the WordPress memory limit might be necessary. Add the following line to your wp-config.php file:

define('MEMORY_LIMIT', '256M');

Fixing this issue will allow you to upload images without an HTTP error.

Method 2: Fix the Plugins or Themes

Incompatible plugins or themes can cause conflicts that prevent featured images from displaying.

Here’s how you fix this issue:

Step 1: Deactivate All Plugins

Temporarily deactivate all plugins to isolate the issue. To do that, navigate to Plugins > Installed Plugins. Check if the featured image displays correctly.

Step 2: Reactivate Plugins Gradually

If the error is resolved by disabling all plugins, enable plugins one by one to identify the culprit plugin. Then, test the featured image display after activating each plugin.

Step 3: Switch to a Default Theme

Temporarily activate a default WordPress theme (like Twenty Twenty-Four) to check if the issue is theme-related.

Step 4: Update Plugins and Theme

Ensure all plugins and your theme are up-to-date. Outdated versions might contain bugs or plugin compatibility issues.

Identifying and deactivating the conflicting plugins and keeping them updated will help you display featured images correctly.

Method 3: Disable Lazy Loading

Lazy loading optimizes page load times by deferring image loading until they’re about to be displayed. However, it can sometimes interfere with the featured image display.

Here’s how you fix this issue:

Step 1: Identify Lazy Loading Plugin

Check your installed plugins for any lazy loading-related options. Common plugins include LazyLoad and a3 Lazy Load.

Step 2: Disable Lazy Loading

Temporarily deactivate the lazy loading plugin to see if it resolves the issue. Add the following code to your theme’s functions.php file:

add_filter('wp_lazy_loading_enabled', '__return_false');

Step 3: Configure Plugin Settings

If you prefer to keep the lazy loading plugin, check its settings for options to exclude featured images or specific image sizes.

Disabling lazy loading ensures that featured images load promptly and display correctly.

Method 4: Configure WordPress Settings

From the WordPress settings, you can control which elements are displayed in the post/page editor. Ensure the “Featured Image” option is enabled.

Here’s how you fix this issue:

Step 1: Access Screen Options

Click the “Screen Options” tab at the top right corner of your post/page editor.

Step 2: Enable Featured Image

Make sure the “Featured Image” checkbox is checked.

This is one of the configurations that could have restricted you from adding featured images on your post or page.

Method 5: Allow Featured Image for Viewing

Some user roles might not have permission to view featured images.

Here’s how you fix this issue:

Step 1: Check User Roles

To check users’ roles, navigate to Users > All Users and ensure that appropriate roles have permission to view media.

Step 2: Adjust Permissions

If the permission was incorrectly set, adjust them using a plugin like User Role Editor.

Correct permissions will allow all intended user roles to view featured images.

Method 6: Featured Image Not Showing on Blog Post Gallery Pages

Featured images might not show on gallery pages due to incorrect theme template settings.

Here’s how you fix this issue:

Step 1: Regenerate Thumbnails

Use a plugin like reGenerate Thumbnails to create new image sizes that match your theme’s requirements.

Step 2: Check Theme Templates

Inspect the theme’s template files (e.g., content-gallery.php) for the correct featured image code. Ensure it includes the featured image display code:

if (has_post_thumbnail())

{

 the_post_thumbnail();

}

By adding the above code, you can ensure the featured image shows correctly on blog post gallery pages.

Method 7: Edit the functions.php File of Your Theme

Customizing the functions.php file can address issues with featured image support.

Step 1: Add Featured Image Support

To add the featured image support, add the following code to your theme’s functions.php file:

add_theme_support('post-thumbnails');

Step 2: Set Image Size

Just displaying the image is not enough; defining the image sizes for your theme is important:

add_image_size('custom-size', 800, 600, true);

Ensuring featured image support in your theme’s functions file allows featured images to display properly.

Following these steps systematically should resolve most issues with featured images not showing in WordPress. Ensuring theme support, proper settings, and resolving conflicts with plugins or themes are key to fixing the problem. If you are still unable to fix the error, consider hiring WordPress developers.

Featured images are the first impression for the user visiting your site. You may ensure to follow the best practices that enhance the user experience and the images always show up. Here are some best practices you can follow:

Image Selection and Optimization

  • Relevance: Choose an image that accurately represents the post or page’s content.
  • Quality: Select high-quality images with good resolution.
  • Size: Optimize image dimensions to match your theme’s requirements.
  • Format: Use appropriate image formats (JPEG, PNG, or WebP) based on image content and desired quality.
  • Compression: Compress images to reduce file size without degrading the quality.

WordPress Configuration

  • Featured Image Option: Ensure the “Featured Image” option is enabled in post/page editing screens.
  • Theme Compatibility: Verify that your theme supports featured images.   
  • Plugin Conflicts: Temporarily deactivate plugins to check if any are interfering with the featured image display.
  • Dashboard Settings: Review WordPress dashboard settings for any restrictions on featured images.

Technical Considerations

  • Image Permissions: Check file permissions for images (usually 755 for directories and 644 for files).
  • Server Configuration: Ensure sufficient server resources (CPU, memory, disk space) for image handling.
  • PHP Settings: Verify PHP settings (memory limit, upload size) are adequate.
  • Caching: Clear browser and WordPress cache to resolve potential display issues.
  • CDN: Use a Content Delivery Network (CDN) to improve image loading speed.

Additional Tips

  • Default Featured Image: Set a default image to prevent empty spaces when featured images are missing.
  • Image Optimization Plugins: Use plugins like Smush or EWWW Image Optimizer for image optimization.
  • Responsive Design: Ensure featured images are displayed correctly on different screen sizes.
  • Alt Text: Add descriptive alt text to images for adding WordPress SEO benefits.

By following these best practices, you can ensure the feature image is displayed correctly on your site. It lets professional WordPress development services improve the consistency of featured image display on your site.

How do I set a featured image in WordPress?
To set a featured image, navigate to the post or page editor. In the right sidebar, look for the "Featured Image" section. Click "Set featured image" and select or upload your desired image.
Why are featured images not showing up on specific pages or posts?
This could be due to theme-specific settings or conditional logic in your theme. Check your theme's options or inspect the template files for relevant code.
What are some mistakes people make with featured images?
Common mistakes include:
  • Using low-quality images
  • Ignoring image optimization
  • Not checking theme support
  • Overlooking plugin conflicts
Ensure you don’t make these mistakes when using featured images.

Conclusion

Addressing the “featured image not showing error” in WordPress can enhance the visual of your site. By identifying and systematically fixing the common causes can help you ensure consistency of images on your site.

Fixing the error includes configuring theme settings, checking plugin conflicts, etc. Plus, following the best practices with technical considerations increases the effectiveness of images. To ensure a robust, well-designed, and error-free site, hire WordPress developers.

Want help with your WordPress project?

author
Mehul Patel is a seasoned IT Engineer with expertise as a WordPress Developer. With a strong background in Core PHP and WordPress, he has excelled in website development, theme customization, and plugin development.

Leave a comment