This setting controls the sizing of all featured images shown in the Latest Posts block. Therefore, we recommend checking your themes support for featured images. My guess is your Head navigation is not called in header.php check you file page.php and see the lines following <?php get_header (); ?> if the lines below introduce header navigation either move them into header or copy them into same location in your single.php file Share Improve this answer Follow answered Nov 16, 2016 at 16:03 Artem Ankudovich No featured image complements the posts when sharing on Facebook. Then well go deeper into other errors. Replace featured images with the selected image. For instance, we added a Recent Posts feed on the homepage of our test site. The only problem is that it doesnt tell you which of your Media Library images have been previously uploaded as featured images. We recommend experimenting with the content settings, like showing Post Content, Display Author Name, or Display Post Date. Consider any WordPress issues that may be causing the problem with your featured image, like conflicts between plugins or a. All you have to do is click on the icon to insert it somewhere on the homepage. Here are some plugins that tend to include lazy loading features: Each WordPress page and post template specifies a featured images location. After all, its difficult to shrink, resize, and crop every image manually you plan to upload. 2023 Kinsta Inc. All rights reserved. First, you can do it from your WordPress site's dashboard via the Kinsta Cache tab in the left sidebar and the Clear cache button: How to clear Kinsta page cache in WordPress Dashboard Second, you can also clear your site's cache via your MyKinsta dashboard. Next up, click on the Facebook Open Graph tab. Sometimes theres a problem with your theme, and other times youll find that a plugin is causing the issue. Even if they tell you that the image is too big, how do you move on from there? Go to the post in question, click on the Share to Facebook link, and see if the featured image appears in the pop-up window. Scroll to the bottom of the page to click on the Next button. Itll avoid causing problems with your own server. You would select those images later and swap every single one of them out in place of the new one. The Large Size often dictates the featured image dimensions when shown at the top of a post or page. To move forward and see the featured image in action, click the Publish button. Though, it varies depending on your WordPress sites configuration, theme, and plugins. Simple, Clean and Lightweight Responsive WordPress Themes . Disable Lazy Loading 4. This should get you closer to the optimal featured image size for your theme. You probably have the Different First Page box checked in the Options section of the Header & Footer Tools>Design tab of the ribbon. Its usually located at the top of the post or page. Unfortunately, we cant walk you through the solutions to these issues as it requires you to either look into the theme settings or contact the theme developer. Fix the Plugins or Themes 3. Going with the Media Library reveals whatever images youve already uploaded to WordPress. This turns on the featured images for all the latest posts being pulled. Three image sizes often get configured on WordPress: Thumbnail, Medium, and Large. The Featured Image from URL, or FIFU, plugin allows you to take an external image and use it as a featured image for a post or page. If you find that its missing, follow the next few steps to activate it. Sometimes other settings override this, but its not a bad idea to mark down the dimensions to ensure you at least know the optimal width for a featured image. Skandha. After youve located the potential culprit, turn off lazy loading, clear your site cache, and check if that resolves any issues you may have with your featured images. We recommend checking boxes for the Title, URL, and Description. If you find a photo that you really love, reach out to the photographer or artist and ask if you can use their work on your website. WordPress makes it easier to align images to the left, right, or center. After that, click on the Save Changes button and test to see if Facebook sharing allows the featured image to appear. We covered this solution already in the previous section, yet it fits well in the best practices, too. Make sure the right featured image is selected in the Media Library. You can troubleshoot a featured image not showing up or edit each featured image manually. The plugin works with posts and pages, including custom posts and WooCommerce products. Therefore, we recommend using tools for cropping, compressing, and resizing before opting to increase your PHP memory limit. Its also a good idea to make adjustments to child themes instead of the core WordPress files. Its also prudent to understand what types of photos work well as featured images, seeing how it may be the original photos causing the issues to begin with. It also provides a clean preview of what you can expect to see if you were to paste or share that URL on Facebook. You may only need a basic photo thats relevant to your website on those pages. Once on the Developers Debug Tool page, find the Sharing Debugger tab, and paste the URL in question. Learn how to fix it once and for all , Featured images matter. Yoast SEO is another SEO plugin that includes social sharing features and options to enable/disable the Open Graph functionality. You can do this by simply asking the theme developer, reading the documentation, or going to the functions.php file. Regardless, all of these errors are frustrating and confusing for users. In the Preferences overlay, click on Panels on the left. The next part is the most important element since it activates the featured images in the Latest Posts block. The thumbnail images arent showing up as the right sizes. This button has disappeared for me on WordPress. Feel free to go back and choose more images if you missed any. Whats more, several settings are now available to make the featured images look professional. has_header_image (): bool. Select the first two checkboxes to grab the Open Graph image, while the other is for using the page or post featured image. Its also possible to generate featured images based on post authors, tags, and post types. This means you can upload several featured images and choose which one of them gets shown on different parts of your website. WordPress added the Cover block to its Gutenberg editor only recently. Choose Preferences from the bottom of the menu that appears. Regardless of whether setting a proper alt text for images helps with SEO, you should do it anyway for accessibility reasons. After that, youre able to insert the new version of that image into a post, page, as a featured image, or wherever you want it to show on your site. There are many ways to go about it, and well cover them all. It also helps when your older posts dont have appropriate featured images. The opportunities are plentiful with the Quick Featured Images plugin, so we suggest testing out the tools and seeing how you can bulk edit some of your older or non-functioning featured images to clean up the overall visual appeal of your website. We recommend you follow these steps to ensure youre doing it the right way. There are several steps you can take to mitigate the problems: Thats a simple three-step process, but theres much more detail behind fixing your featured images. We hope this guide helped you troubleshoot the common problems with featured images not showing on WordPress. Now, go to Settings > Media in your WordPress dashboard. Upon activation, you can go to Code Snippets Header & Footer from your WordPress dashboard. Its possible a theme changed this. The Screen Options section has a long list of fields to check off and sets what you want in your WordPress dashboard. Although automating the process isnt for everyone, there are tricks to ensure that a WordPress featured image is always shown for posts and pages, minimizing the chance that an author forgets to upload one. Every hosted image, including featured images, has metadata crawled by the search engines to figure out what your post or page is all about. The only thing to do next is to review and publish the post. Keep in mind that the initial Select page in the Quick Featured Images plugin offers a wide range of actions to take with your featured images. If the featured image is showing on Facebook, then theres a good chance it also appears on other social sites. As with most WordPress settings, these also tend to modify the way your featured images appear. The following screenshot shows a post working well on Facebook since it includes a summary of the post content, with a link, the title, and the featured image. The block is called Latest Posts. It also works well with page builders like Gutenberg and Elementor. Larger images get compressed and lose quality, while smaller images get stretched out and end up looking terribly blurred. Talk with our experts by launching a chat in the MyKinsta dashboard. Explore our plans or talk to sales to find your best fit. https://wordpress.org/plugins/unique-headers/ I think its work for you Share Improve this answer Follow answered Mar 22, 2019 at 4:32 Harsh Khare 509 1 3 13 I tried this as well and it didn't override the current theme's headers and didn't add anything unfortunately. For instance, you may want to revamp your homepage completely, and its easier to just make an entirely new page instead of editing the current one. The screenshot below tells us that our featured image is showing up just fine. Some other buttons that appear include the Select Image, Replace Image, and Remove Featured Image. An alternative is to install and activate a plugin like Export All URLs. This means you must make a page and assign it as the Homepage in the WordPress Reading settings. You may also want to set a Default Image URL to appear if a post doesnt have a featured image assigned to it. Avoid images that are way too large or small. The true advantage of a plugin like OG is that it doesnt require any configuration after the installation. Alternatively, you may find yourself in the older version of the WordPress editor. Locate the section titled Actions with a single image. Its also common to see varying degrees of featured image problems. Three options are available for you to bulk edit the featured images: Choose the right option depending on what youre trying to achieve. The featured image also appears in the embeds when a post or page is shared on social media sites. However, if you right click this rectangle and choose 'View image', the correct image is shown. It results in an image duplication issue like this: Obviously, you dont want this. Be sure to Save the settings after youre done. Finally, you also have the option to visit theDevelopers Debug Tool on Facebook. The image src is the full file path. For instance, if your article has tips on using Instagram, the featured image better have elements that reference Instagram (legal ones, of course), along with creative items that make the article look appealing. This allows you to paste in up to 50 URLs and run the tool so that Facebook scraps their metadata properly again. Is there a way to do that without using an external plugin? Another Screen Options dilemma comes into play when you do not see the actual field to upload and insert a Featured Image. You can now go to Posts > All Posts in your dashboard to view the posts in a list and make sure the featured images truly got replaced in the posts. Scroll through the list of pages to locate the one you assigned as the Homepage. It is working fine for mobile and tablet. Yeah inside the Editor, when editing a post, clicking the Settings, then scrollow down past Permalink, Categories, Tags, etc. Check out our guide here to learn more about the Facebook Debug Tool. After all, a theme or plugin could be causing the problem. Go to Posts > Add New to create a new blog post. Make your site accessible to them. This might be the root of your featured image problems. Tell us about your website or project. However, if you use any other hosting provider, it may prove useful. But what if those thumbnail images are nowhere to be found? All you have to do is paste the post link into the Facebook status field (you can also do this on personal or business pages) and wait to see if the post content gets rendered, along with the featured image. Some of WordPress built-in image editing features include: The Crop tool is usually the most important, so click on that to activate the edit module. Added a featured image and it was finally appearing. Select the General tab and locate the Description Settings section. Locate the Settings panel towards the right side of the page. However, with the Default Featured Image plugin active, all you have to do is click on the posts Update button. Our last option for turning on the Open Graph protocol to reveal featured images is called the Open Graph and Twitter Card Tags plugin. Yet, even with those websites, youre usually asked to provide attribution for all photos (which is tough as featured images often dont allow captions). Now its time to look at the content within that page to ensure the featured images show up the way they should. WordPress offers several ways to list your blog posts elsewhere on a website, yet sometimes you have to configure the right settings to ensure they show up properly. Scroll down to the section called Document Settings. As a quick reminder, you can turn any WordPress page into the homepage by going to Settings > Reading in the dashboard. If not, reactivate the plugins and move onto a different cause of the problem. You have to be on the Posts or Pages panel for the right Screen Options panel to appear. You never know when a human error may result in a featured image not being uploaded to your website. With your position I solved a problem that lasted for months. You can still maintain the quality of an image after compression, cropping, or resizing. If a featured image isnt assigned to a post, it will show a blank space in its block instead. By default, this featured should be enabled, but its possible you turned it off at some point. As long as youre not making the image too small, you should still be able to offer a beautiful featured image. Simply, the above code is informing WordPress that if someone opens the page, which is 'about' then WordPress will display a file called header-about.php if it is existing. This is important because the bulk edit is permanent, so you want to be sure of your actions at each step. It eliminates a significant amount of manual upload work that could be waiting for you. Note: Youre always able to come in here and change the static homepage. Theres quite a bit of information about how your URL interacts with Facebook, but all you need to look at is the preview. The .header-img is a common css class in WordPress themes. Its gone! Thats because having four columns will require having much more space (and smaller images) than a block with two or three columns. First, the plugin opens up the default limit that WordPress sets of having one featured image per post. It takes every URL on your site and exports them into a simple document. You have the option to choose one and click the Set Featured Image button. Page header meta box says it's using my featured image. Several factors can influence your header image not showing in WordPress, such as: An HTTP error due to the WordPress memory limit exhaustion. Click on the page specified as the Front Page. The Progress Bar indicates exactly where you are in the process of bulk editing the featured images. Select one of your blog posts that dont already have a featured image. Unfortunately, you discover that the featured image doesnt look quite as nice as you had hoped it would. The Multiple Featured Images plugin boasts several features that come in handy when troubleshooting and resolving your featured images problems. Click on Preferences to reveal a new pop-up window. For instance, the last image in a long article doesnt necessarily have to load until the user scrolls down to the bottom of the page and gets to that image. For instance, the Image Size field tells your website how large to make those featured images in the list or gallery. If the featured images now work, one of your plugins was the issue. Select the image you like, then click on the Choose Image button. You can see that two of my posts now have a new featured image, and theyre the same images. Kinsta and WordPress are registered trademarks. You may have noticed how some popular blogs use images with text wrapped around them. Auto Featured Image even has a bulk featured image generation tool. Note: Many website owners use third-party gallery or post listing plugins to make this happen. This brings up the Media Library, from where you can choose an image to serve as your Default Featured Image. These are the general Media settings for your entire WordPress website. If you find yourself in this situation, we recommend returning to the Facebook Sharing Debugger Tool and clicking on the Batch Invalidator option. Where do you go from here? Find the section called Featured image settings. Another way to see your featured image is to create Recent Post galleries or feeds to your blog, usually elsewhere on your website. Or if the featured image fails to show up on social media, but its working fine on your website. Hence, this issue is exclusive to those using it. The featured images for all blog posts in that feed appear as smaller thumbnails, providing a more visual experience for those looking for content. An image optimization plugin does much of the work for you, ensuring that your featured images actually show up and dont slow down your website. If allowed, you can also change the PHP memory limit on your own by editing your sites wp-config.php file. This means you can upload an image that acts as the post or pages cover media, similar to a book or magazine cover. Click the Edit Image link to proceed with the edit. It promises to make the featured image upload process a little easier for website owners. Click on the Preferences menu (the three vertical dots at the top right). Overall, if youre editing an image, like a cover or a standard media item, youre not using a featured image in the WordPress post or page editors. Its a must-read to speed up your WordPress site. I checked several of your other pages and do not see any with narrower header images like on that page, so I've limited this change to only that specific page by using its unique page id CSS class from the opening body html tag. Click the Choose Image button to proceed. Your themes coding often structures the featured image location and formatting. But what if thats not the case? We recommend taking a look at his guide to walk you through those steps in detail. Featured images often carry the weight of your websites visual appeal. In this tutorial, we have a page called Homepage. Yours may have a different name depending on what youve named it. However, keep in mind that an image uploaded to your blog posts content area doesnt have anything to do with the featured image, even if its the first photo you upload to that article. This helps speed up your featured image creation process while also helping your brand. A theme or plugin usually defines it. The Featured Image Settings are towards the bottom. Search for the Cover block and click to add it. Fix the HTTP Error When Uploading a Featured Image 2. Here's the definitive guide to fix WordPress featured image not showing properly on your site , reach out to your current hosting provider, reading our guide on WordPress user roles, cut this piece of code and paste it somewhere else, Kinsta bans the majority of Open Graph plugins, The Ultimate Guide to Fixing and Troubleshooting the Most Common WordPress Errors (70+ Issues), Visual Content Strategy: How to Use Visuals to Get More Traffic, 10 Stunning Places to Find Free Images For WordPress. Another specific Open Graph module from this plugin is for Twitter. Best regards . Incorrect image URLs. However, you still may see a vague error, as the following HTTP error. message. Besides, the featured images for each post should be shown above the post title and link. Its used to show the start of a new section or an article. A Cover block, in contrast, is housed in the Gutenberg Block Library, which is accessible by clicking on an Add Block button in the editor. It helps with cleaning out those posts where you forgot to add a featured image or, at some point, removed it due to the original featured image not holding up to your standards. The good news is that all future posts without featured images will automatically add the default photo. Problem with image name. Go to Appearance Editor. Click on the Select Default Featured Image button. The downside of setting a default featured image is that theres a chance you end up with several featured images that arent relevant to the post. Check to see if you can now upload and see your featured images. The Open Graph protocol is automatically activated for all WordPress posts and pages. Go to its Post Settings panel and open the Featured Image section. This allows you to type in new dimensions, both the width and height, so that the already uploaded featured image shrinks. Just make sure its the right image and that the plugin is recognizing it. Also, make sure the width of the image is set to 1080px. The Ixion theme page provides details of setting up your Header images and also the size specifications at the bottom of the page. The next step is to Add a Filter, which essentially asks you to choose the images you want to replace. You must host the image in a third-party location and ensure that it will be hosted there for the future. 'Posts > Add New' link in WordPress dashboard Insert any content you want for the blog post. If youve uploaded your posts or pages featured image correctly and it still doesnt appear, then there can be several reasons. The Cover block gets placed into the content editor, far away from the area in which we saw the featured image. Under there, youll find a field called Featured Image. Fix Featured Image Not Showing on a Blog Post Gallery Page 7. Click on the Cover block to insert it into your post or page. Here, you can set everything for the Open Graph sharing protocol, yet specific unique traits for Facebook only. You can reach out to your current hosting provider and ask them to expand the PHP limit. Type in the new dimensions and click the Scale button. There are several reasons for images to disappear from WordPress. Upload the image here and click the Save button. Editing inside WordPress is also an option, but that doesnt typically resolve to get the WordPress image to begin with. This field is available on all WordPress posts and pages by going to the Post Settings panel on the right side of the article or page. Here, youll see a Progress Bar at the top of the page. You can go to Post > All Posts to review your list of articles. Take a photo with your own camera. Although it may be a temporary fix, this can also prove useful for setting permanent featured images on pages and general blog posts. Scroll down to find a new field called Default Featured Image. One of the last areas to consider for the Featured Image section (in the Latest Posts block) is the number of items you show in the block and how many columns make up the block. Again, the images from Pexels are free, but you must give a linked credit to the photographer, which is automatically inserted when using Pexels through WordPress. What if the featured image isnt the right one, or you do not see an image at all? You may already have the Latest Posts block activated on your homepage, but if not, you can find it by searching in the Gutenberg block library. Theres a completely different section that handles the featured image. Therefore, you have to check each plugin to see if they have this feature enabled on your site. A WordPress featured image functions as a visual welcome card, a cue to visitors to come on in and enjoy whats behind a link. Click the Remove Block option at the very end of the list. Overall, the best way to activate the Open Graph protocol for properly sharing content and featured images on social media is by installing a plugin like Yoast SEO or OG. As an alternative, its often a better idea to leave the Crop Thumbnail box unchecked, so the Thumbnail dimensions are used as more of a guideline. If youre going with this route, we recommend an image compression plugin that automatically shrinks and optimizes all images uploaded to WordPress, such as Optimole or Imagify.