Click the Edit Image link to proceed with the edit. You may want to move the featured image to another location, like below the first bit of content or above the byline with the authors name. With the OG plugin activated, you should now see the post information and the featured image in the preview. Luckily, as WordPress has evolved, the errors have become a little less ambiguous, making it somewhat easier to determine their cause. Get premium content from an award-winning cloud hosting platform. Follow these rules to ensure your featured images are legal: Its one thing to ensure all featured images are relevant to the posts theyre attached to. Image optimization tools like ShortPixel and, Direct lazy loading plugins such as Lazy Load by, Database and site optimization tools such as. Click on the Featured Image panel to open its settings. Think about installing a plugin that resolves problems for featured images without you having to do much work. It's only on select pages though (front page and blog page). Pay for photos on sites like Shutterstock and iStockPhoto. Note: Many website owners use third-party gallery or post listing plugins to make this happen. The Thumbnail size is the featured image shown in other parts of your website, outside of the post itself. A theme or plugin usually defines it. If thats the case for you, youll have to consult with the plugins developer. After entering the code, click the 'Save Changes' button. Regardless, all of these errors are frustrating and confusing for users. We also recommend you host your site with a company that takes malware seriously and provides a malware security pledge. Another specific Open Graph module from this plugin is for Twitter. Regardless, the best course of action is to follow these steps: An interesting thing about featured images is that some WordPress themes may not support them. Youll typically see this happens on post lists or at the top of a page or post, resulting in two of the same photos stacked on top of each other. Our feature-packed, high-performance cloud platform includes: Get started with a free trial of our Application Hosting or Database Hosting. @chrissel: Hello there, I am afraid the option to display Header Images on all pages is only available in the pro version of the theme. Select one of your blog posts that dont already have a featured image. Also, I believe the classic editor should be a matter of choice instead of another plugin to install. The following block of code is what you can insert (or look for) in the functions.php file: Lazy Loading serves as one of the many methods used for optimizing images to improve site performance. Go to its Post Settings panel and open the Featured Image section. That means you cant simply take any photo and expect it to look great as a featured image. Many blind people are using the internet through screen readers. Fix Featured Image Not Showing on a Blog Post Gallery Page 7. You have two options for grabbing URLs from your site. It tells WordPress to display the featured image in the templates exact location. Featured images often carry the weight of your websites visual appeal. Rather, quickly explain whats in the picture and potentially add the keyword to boost your rankings. 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. What if the featured image isnt the right one, or you do not see an image at all? Your latest posts should appear wherever you placed the block on your homepage. We recommend checking boxes for the Title, URL, and Description. there is no Featured Image section in there at all. Figuring out the optimal dimensions before uploading the images allows you to minimize instances where the featured image gets stretched out or cropped strangely. Be sure to click the Save Changes button to activate the default featured image on your site. It is working fine for mobile and tablet. Now, go to your Facebook page (personal or business) and paste a link with a featured image into the Status field. The following page explains which current featured images will be replaced by the future featured image you specified from before. Check out our post on the 10 best places to find free images for WordPress, no strings att, Get started, migrations, and feature guides. 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. Finally, the featured image shows up automatically when you create a feed or gallery of your blog posts or other webpages. Upload the image here and click the Save button. Considering you should be uploading high-resolution images as featured images, it makes sense to automate optimization. However, plugin conflicts are a different story. Its easy to grab a quick image that relates to the article just to save time. If allowed, you can also change the PHP memory limit on your own by editing your sites wp-config.php file. The max height shouldnt matter as much since your featured images shouldnt be that tall. Furthermore, an engaging story isnt complete without the introduction, and thats exactly the purpose of a featured image. If you switch it to the Thumbnail option, those images shrink slightly and usually become perfect squares. Now that you have the featured images ready, get sharing! An even page header\footer. The first is going about it manually, clicking on each post and page on your site and collecting the URLs into a document. All you have to do is click on the icon to insert it somewhere on the homepage. In terms of featured images on Facebook, we often see the following problems: All the concerns listed above stem from similar problems. Click the Homepage dropdown field to reveal the list of pages you currently have active on your website. 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. The new dimensions are also listed on the right side of the pop-up window. Hi Tre, we guess that the Featured Image block has been turned off in your view. Again, check to see if the featured images are showing up after all plugins are deactivated. Below well cover every problem we know of when it comes to featured images and outline the steps you can take to fix them. The next step is to Add a Filter, which essentially asks you to choose the images you want to replace. I have created several files/pages, such as; index.php, front-page.php, page-about.php and single.php for example. To begin the process of bulk editing featured images, scroll down on the page. This brings up the Media Library, from where you can choose an image to serve as your Default Featured Image. You never know when a human error may result in a featured image not being uploaded to your website. Set the selected image as the new featured image. We usually recommend editing an image before uploading it as a featured image (third-party editing tools have more advanced features). Each file/page calls the header.php and displays it. You have to call the header too. Make sure the right featured image is selected in the Media Library. Then scroll down through the settings. I don't understand why the image only works in . Here, select the Facebook tab. To adjust the location of a featured image, go to the page or post template being used. Another Screen Options dilemma comes into play when you do not see the actual field to upload and insert a Featured Image. 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. Open your site in MyKinsta. This should get you closer to the optimal featured image size for your theme. If not, reactivate the plugins and move onto a different cause of the problem. The .header-img is a common css class in WordPress themes. Make sure to get this agreement in writing (email works too). If you see the same photo under the Featured Image tab and in your content, thats causing the problem! You may see a simple list of links, along with descriptions from those posts. Header Image is Not Showing Up in Posts Because It's Not Placed in the Correct Location If your header image is not showing up in posts, it's likely because it's not located in the correct location. Showing a gallery or list of your recent blog posts is done by adding a Gutenberg block element to the page designated as the WordPress Homepage. As you can see, the two posts shown from before had their featured images swapped out by the one I had wanted. This plugin seeks out all empty featured image fields and fills them in with the default option. Scaling a photo up is a big no-no. But what if those thumbnail images are nowhere to be found? Its also a good idea to make adjustments to child themes instead of the core WordPress files. It seems there is a conflict with your theme because I have tried to add an image header but it doesn't show at all. For instance, you may notice that the featured image appears nicely on your own website, but it has trouble rendering when a post is shared to a social site like Facebook. Therefore, you have to check each plugin to see if they have this feature enabled on your site. You can fix it by following these instructions: A first page header\footer. That way, you can scale it down for a digital interface while still maintaining much of its resolution. Youve figured out how to upload a featured image and completed your post content. We hope this guide helped you troubleshoot the common problems with featured images not showing on WordPress. Click the featured image thumbnail to access its various settings. Talk with our experts by launching a chat in the MyKinsta dashboard. Featured images are wonderful, but you may find that youre unable to see a featured image for a post or page for one reason or another. Search for the Cover block and click to add it. Locate the section titled Actions with a single image. You can include your header image in your posts by placing it in the tag of your WordPress site's root document. Not only that, but its essential to realize that featured images display differently when compared to a regular photo uploaded to a post or page. 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. You may discover that your theme does well with slightly wider or shorter featured images. Scroll down to the section called Document Settings. There is a plug in or other theme option set which is changing the margin-left styling for .header-img. The problem prevents images from displaying on both the backend and frontend. We covered the Open Graph essentials in the section above. Click the Save & Activate button. It often presents useful information in the form of a photograph or graphic image, granting the user a sneak peek into the information behind that link. If a featured image isnt assigned to a post, it will show a blank space in its block instead. For simplicity, well stick to uploading featured images to regular WordPress posts and pages but if youre interested in learning more, heres a complete WooCommerce SEO guide that covers this & everything else, including Schema Markup up for your products and more. Scroll down the list of settings to locate the Preferences option. In this situation, you would randomly set multiple featured images for your posts based on photos you choose from the Media Library. Type in the new dimensions and click the Scale button. Other times, you may notice that a theme presents a featured image in a different spot than whats expected. 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 Skandha. To call the header.php file, you should use get_header (); at the top of almost every template (Almost!) Some websites already have hundreds or even thousands of featured images, so a bulk editing tool is required. The plugin works with posts and pages, including custom posts and WooCommerce products. As a good rule of thumb: If you didnt take the photo yourself or pay for rights, you might not be able to use it. Finally, you also have the option to visit theDevelopers Debug Tool on Facebook. By submitting this form: You agree to the processing of the submitted personal data in accordance with Kinsta's Privacy Policy, including the transfer of data to the United States. Hit the Enter key to activate the crop and see the result in the preview. However, only the front-page.php file shows the image. Each social network has its own display for shared content, but Facebook is a solid starting point considering its the most popular one. Is there a way to do that without using an external plugin? Problematic WordPress themes or plugins. These best practices cover everything from design recommendations to uploading tactics, enabling you to feel confident about all featured images while also cutting down on the amount of time you spend with featured images. If not, then WordPress will render the default header file. Think about using a default featured image plugin to fill in the blanks and list temporary or permanent featured images when you forget to do so. To start, install and activate the Open Graph and Twitter Card Tags plugin on your WordPress site. Checks whether a header image is set or not. Therefore, click on the Choose Images button under the section titled Select the featured images you want to replace by the selected image.. Another simple yet common mistake made by WordPress users is to implement a cover image for a post or page and assume it works like a featured image. Regardless, you must bulk edit these featured images so that youre not spending hours editing each and every one of them. You may only need a basic photo thats relevant to your website on those pages. You can go to Post > All Posts to review your list of articles. 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. But what if thats not the case? The only problem is that it doesnt tell you which of your Media Library images have been previously uploaded as featured images. Please leave a comment below if you have any questions about featured images or problems with WordPress featured images. On the other hand, user roles dictate which areas of the WordPress dashboard and the frontend website are accessible to certain people. This is particularly important if youre highlighting your recent posts on the homepage. Theyre all telling you that Facebook is either having trouble accessing the Open Graph data from your website, or theres no Open Graph data, to begin with. After each reinstallation, you should check to see if the featured images are still functioning and showing up properly. All selected images appear as thumbnail previews in the plugins dashboard. An odd page header\footer. The Quick Featured Images plugin handles bulk editing for featured images along with a myriad of other functionalities, like adding a default featured image for all posts or setting presets for default featured images. Your dashboard settings could have the featured image fields completely turned off. You can check out the additional-features available in the theme. Replace featured images with the selected image. This should be empty, asking you to upload a featured image. It eliminates a significant amount of manual upload work that could be waiting for you. You can type in custom width and height, or decide on a percentage, so that the tool automatically changes the size of all featured images based on the percentage given. Test out the fields for the Number of Items and Columns to ensure your featured images are both presentable and appealing when they get published on the homepage. If either is the case, open the page or post in question and look for the Featured Image block towards the pages right side. For instance, we added a Recent Posts feed on the homepage of our test site. 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. Click on the Cover block to insert it into your post or page. This lists various settings for the entire post and can also reveal Block-specific settings if you have a WordPress Gutenberg block currently selected. However, we usually recommend clicking the Select Image button, as that provides a few extra choices for deciding on a source for the featured image. Now, go to Settings > Media in your WordPress dashboard. Your theme, or a plugin, has an error or is causing a conflict with your featured images working. Because of this, pasting and Debugging the URL in the Sharing Debugger Tool from Facebook could actually solve your problems altogether. However, with the Default Featured Image plugin active, all you have to do is click on the posts Update button. has_header_image (): bool. But thats fine, as we all start learning somewhere. It results in an image duplication issue like this: Obviously, you dont want this. By default, this featured should be enabled, but its possible you turned it off at some point. The big question is whether or not the featured image for a post gets rendered properly when you share a link on Facebook. If the featured image is showing on Facebook, then theres a good chance it also appears on other social sites. Three options are available for you to bulk edit the featured images: Choose the right option depending on what youre trying to achieve. Once everything looks good and youve decided that those old featured images are ready to be replaced, click the Apply button to finish the bulk edit. Several images are pulled from the post, but you must choose which one you want to use. Some other buttons that appear include the Select Image, Replace Image, and Remove Featured Image. 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. This might be the root of your featured image problems. To find and upload a featured image, move your attention to the post Settings panel on the right-hand side. The Screen Options section has a long list of fields to check off and sets what you want in your WordPress dashboard. WordPress permissions decide who can read, write, or edit website files. Upon activation, you can go to Code Snippets Header & Footer from your WordPress dashboard. The plugin is lightweight and doesnt offer any other features, making it ideal for those not interested in anything besides fixing the Open Graph issue. If the goal is to have no featured image, you can remove it altogether. Getting back to the featured images, its not set by default to show featured images from blog posts when you put the Latest Posts block into a page. For example, you might complete an action with multiple pages. It could be a good thing but it downgrades the development experience. You may unsubscribe at any time by following the instructions in the communications received. Yet, even with those websites, youre usually asked to provide attribution for all photos (which is tough as featured images often dont allow captions). This way, youre not limiting your sites resources with too many large photos. Your themes coding often structures the featured image location and formatting. Next, enter the custom code in the 'Header' section. Many of them provide tools for seeing previews of what shows up on Facebook and other social networks. However, if you use any other hosting provider, it may prove useful. It looks like only two of the images selected are actually stored as featured images in our posts. Thats because theres no need to activate an Open Graph plugin with Kinsta. You can find the Featured Image in the right-side Settings panel for all posts and pages. Also, you can typically enable the Open Graph markup directly from an SEO plugins settings. You have to be on the Posts or Pages panel for the right Screen Options panel to appear. Theres no reason to go into troubleshooting mode if your featured images and post content all come up fine on Facebook when the post gets shared. The wrong featured image is showing up on Facebook. Here, we want to make sure the checkbox for the Featured Image is checked. Go to Posts > Add New to create a new blog post. 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. The plugin generates a featured image from the first image in a post, but only if the featured image is not already configured. You may have to switch it from Page to Block. Easy setup and management in the MyKinsta dashboard, The best Google Cloud Platform hardware and network, powered by Kubernetes for maximum scalability, An enterprise-level Cloudflare integration for speed and security, Global audience reach with up to 35 data centers and 275 PoPs worldwide. Here are some general rules to follow before uploading your featured image: Another tactic for finding and setting the perfect featured image size is to visit the Media section of your WordPress dashboard. The reason it shows on that page is because the header image has white areas on the left and right. These are the general Media settings for your entire WordPress website. Note: You can upload WordPress featured images to posts and pages, but that basic rule expands once you start adding things like WooCommerce product pages and custom post types. You should now see a thumbnail of that image for all posts that dont have featured images already uploaded. In those cases, you may go with the first or third options. Scroll down to find a new field called Default Featured Image. Theres quite a bit of information about how your URL interacts with Facebook, but all you need to look at is the preview. Therefore, we recommend checking your themes support for featured images. 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. No matter the reason, you may find that your WordPress theme doesnt offer support for standard featured images.
10. March 2023