It tells WordPress to display the featured image in the templates exact location. Its also rather common to adjust the cover to fill the pages full width, making it even more effective to introduce an article or a separator between sections. That means only those images will get replaced by the new image. This selects the entire block and reveals settings for that block in the right-side panel. On the way, you also learned tips to improve your image editing skills and workflows. All files/pages are in the root folder. The default featured image then populates inside the posts Featured Image module. 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. As you can see, the two posts shown from before had their featured images swapped out by the one I had wanted. Finding free images for personal and commercial is hard. You can also do this with pages or click on the All Posts option if youre interested in adding a featured image to a previously generated post. Replace featured images with the selected image. Another option is to take action with no selected image, like removing a featured image that repeats several times on multiple posts, or if you need to remove all featured images without existing image files. There can be up to 3 different headers (and footers) in a document, or each Section of a document. Though, it varies depending on your WordPress sites configuration, theme, and plugins. The longest list of the most common WordPress errors and how to quickly fix/troubleshoot them (continuously updated). Your theme, or a plugin, has an error or is causing a conflict with your featured images working. The true advantage of a plugin like OG is that it doesnt require any configuration after the installation. You can also configure settings to have a default Post Image Source, like pulling the first image from a post or going with the Featured Image. Overall, the plugin has a field to paste in a URL from an image and insert that image into the featured image slot. 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. Editing a featured image in WordPress is often the easiest and quickest way to resolve an issue with a featured image thats too large or needs some cropping done. Just make sure to test your featured images are uploaded and set properly before embarking on more advanced solutions. After all, a theme or plugin could be causing the problem. You may have a lot of old posts that dont generate featured images when shared on Facebook. Twitter Cards are a little different than Facebook sharing modules, so you can go through these settings to make sure everything looks good. Locate the section titled Actions with a single image. 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. You can find the Featured Image in the right-side Settings panel for all posts and pages. Get premium content from an award-winning cloud hosting platform. As promised, three choices appear when uploading an image through a Kinsta-hosted website: Choose one based on whether or not you have your own photos and where theyre stored. However, Lazy Loading often causes problems with featured images since some Lazy Loading plugins treat featured images as regular images. Click on the area where you want to place a header image. When seeking out a featured image, always consider starting with a larger, high-resolution photo. Fix the HTTP Error When Uploading a Featured Image 2. You also have the option to Save the crop, even though its done for you. Unfortunately, an image with malware or a virus is already compromised. The last page presents the bulk edit results, with details about the posts that now have new featured images. Make sure the right featured image is selected in the Media Library. Think about installing a plugin that resolves problems for featured images without you having to do much work. We have an excellent guide on optimizing your WordPress images. Its separate from the main content. Skandha. Going with the Media Library reveals whatever images youve already uploaded to WordPress. After the plugin is installed and activated, go to Featured Images > Bulk Edit. An odd page header\footer. Start your free trial today. The solution often involves going to the theme settings and locating the featured images custom area. After all, a post shared on Facebook with no image wont gain much traction. The image src is the full file path. We hope this guide helped you troubleshoot the common problems with featured images not showing on WordPress. Plugin Conflicts. Hence, this issue is exclusive to those using it. Images in my header seem to be spontaneously not showing in my headers. Begin by installing and activating the Default Featured Image plugin. Rather, quickly explain whats in the picture and potentially add the keyword to boost your rankings. In terms of featured images on Facebook, we often see the following problems: All the concerns listed above stem from similar problems. 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. The Thumbnail size is the featured image shown in other parts of your website, outside of the post itself. Whether youre overriding existing featured images or trying to fix ones that werent existent in the first place, the Quick Featured Images plugin does the trick for all of that. there is no Featured Image section in there at all. The first is OG, which comes in handy for adding the Open Graph protocol to turn any webpage into rich objects for social media. By default, WordPress offers a featured image for all posts and pages. In the WordPress Customizer, click the Change button for the Active Theme Select the Twenty Fifteen theme or another theme you want to use that supports and displays a background image. Also, you may have to configure a specific theme setting so that featured images are populating for all posts. Tell us about your website or project. Upload the image here and click the Save button. 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 youre still having problems, go to SEO > Social in the WordPress dashboard. Overall, its best to opt for a plugin that optimizes your images on a third-party server. The Add Block button looks like a + sign. One way to complete this task is by opening up your Facebook account and pretending youre about to share a status update. We recommend you follow these steps to ensure youre doing it the right way. To fix the situation, find and click on the Screen Options tab in the dashboards upper right-hand corner. The most important option right now is the Include Image field. You are not familiar with PHP so you can use this plugin for the header image. You can search for specific keywords and set them as your featured images. Search for the Cover block and click to add it. Its most likely because youve uploaded a featured image while also including the same image in your content as a cover or regular image. We also recommend looking at the Image Dimensions. Or maybe they include colorful animations while still representing whats in the posts. Is there a way to do that without using an external plugin? Theres also an Image Alignment setting to indicate if the images should slide to the right, center, or left. The next best method is using a managed host like Kinsta, which already has Open Graph configured for you. WordPress Featured Image Not Showing Properly (Or Not At All), WordPress featured images not showing properly on your site? Upon activation, you can go to Code Snippets Header & Footer from your WordPress dashboard. 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. Its important to test out how the Default Featured Image works on your site. Its also a good idea to make adjustments to child themes instead of the core WordPress files. Note the exact issue, like if the image isnt uploading. The next step is to Add a Filter, which essentially asks you to choose the images you want to replace. Disable Lazy Loading 4. However, if you use any other hosting provider, it may prove useful. The good news is that WordPress blocking an image because of this reason means that WordPress has done its job! Some non-WordPress image editing tools you can use are GIMP, Photoshop Express, and Paint.NET. However, with the Default Featured Image plugin active, all you have to do is click on the posts Update button. It's only on select pages though (front page and blog page). It also works well with page builders like Gutenberg and Elementor. To call the header.php file, you should use get_header (); at the top of almost every template (Almost!) Besides, any image you use on your site, including featured images, shouldnt be that large, to begin with. Many of them provide tools for seeing previews of what shows up on Facebook and other social networks. Insert any content you want for the blog post. 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. Essentially, this plugin suits those struggling to decide which featured image to use, or when one featured image makes sense at the beginning of the article, but another one looks better in a sidebar. WordPress added the Cover block to its Gutenberg editor only recently. Select the image you like, then click on the Choose Image button. Kinsta and WordPress are registered trademarks. You never know when a human error may result in a featured image not being uploaded to your website. This article shows you how you can fix WordPress featured images not showing properly on your website. This way, youre able to present somewhat of a media portfolio for your posts instead of a bunch of links with only text. As an alternative, the Media Library also has a tab to Upload Files, where you select from the files on your computer and upload them to your WordPress Media Library. Find the Add Open Graph Meta Data switch and make sure its set to Enabled. You can still maintain the quality of an image after compression, cropping, or resizing. Go to Posts > Add New to create a new blog post. As always, we recommend backing up your WordPress site before making edits to the code. 2023 Kinsta Inc. All rights reserved. This gets around the idea of uploading an image to your WordPress Media Library and activating that image as a featured image. The great part about this plugin is that it doesnt replace the featured images you already have on your posts. such as page.php, single.php, archive.php and so on. Make sure thats checked off to reveal the Featured Image option in your posts and pages. It takes every URL on your site and exports them into a simple document. The new cover shows up in the editor preview, and you can also edit the blocks settings on the right-hand panel. Now, go to Settings > Open Graph and Twitter Card Tags. In that case, you should keep the photo under the Featured Image area and delete the one in the articles content editor. Several factors can influence your header image not showing in WordPress, such as: An HTTP error due to the WordPress memory limit exhaustion. Added a featured image and it was finally appearing. To start, install and activate the Open Graph and Twitter Card Tags plugin on your WordPress site. Unfortunately, you discover that the featured image doesnt look quite as nice as you had hoped it would. Open your site in MyKinsta. If the problem isnt fixed, proceed to deactivate all plugins. Yet, we should all take our time when deciding on a featured image, seeing as how its the book cover of the post thatll get people to pick it up and read. Incorrect permalink setup. Another concern is that a certain page or post in your WordPress files isnt accessible because of user permissions. The Crop tool reveals a square within the preview thumbnail, asking you to click and drag the crop box so that it gets to the exact dimensions you desire. Locate the Settings panel towards the right side of the page. We recommend taking a look at his guide to walk you through those steps in detail. One of the more frustrating problems with WordPress featured images not showing involves the dashboard settings. Whats great about Yoast SEO is that simply installing the plugin may do the trick for activating the Open Graph protocol for social sharing. 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. The following page explains which current featured images will be replaced by the future featured image you specified from before. I have experienced similar issues, I exported my post from another website to another new site I am building when I tried importing, it didnt come with the featured images. This is still common for many pages, or you may have rolled back the Gutenberg editor to use the old editor instead. 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. It also helps break up the monotony of text and adds life to your content. Upload multiple photo sizes on a test post and mark down the dimensions of each one. 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 Participant. Our last option for turning on the Open Graph protocol to reveal featured images is called the Open Graph and Twitter Card Tags plugin. But this is a reminder to ensure that your hosting provider either provides the tools needed to render featured images or find a plugin that activates the Open Graph protocol. The only thing to do next is to review and publish the post. it's not working. Your latest posts should appear wherever you placed the block on your homepage. 2 Answers. But didn't notice the header image was missing from the desktop view until today. We suggest running a test to see if the featured images actually show on Facebook or not. Once thats all said and done, click on the Debug button to process all URLs in the list and make it so that the featured images, and all other relevant post data, appear when shared on Facebook. This helps speed up your featured image creation process while also helping your brand. 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.. 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. Its also common to see varying degrees of featured image problems. The Default Featured Image plugin offers a simple way to override all instances where a featured image is not set for a page or post. 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. Feel free to go back and choose more images if you missed any. For this section, well show you how to activate the Open Graph markup with two of the most popular SEO plugins: AIO (All In One) SEO and Yoast SEO. Therefore, Kinsta bans the majority of Open Graph plugins as they can cause conflicts. The first is going about it manually, clicking on each post and page on your site and collecting the URLs into a document. Select the General tab and locate the Description Settings section. A featured image does not differ from other photos on your website. Where do you go from here? Several images are pulled from the post, but you must choose which one you want to use. As a test, lets visit a post that already has a featured image included with the article. My Header media is not showing on my homepage on desktop view. Larger images get compressed and lose quality, while smaller images get stretched out and end up looking terribly blurred. Theres a field for choosing where the image should come from when sharing a post or page to social media. You have two options for grabbing URLs from your site. Reactivate each plugin one-by-one. After that, feel free to drag it up or down on the homepage so that its located in the proper position. This should get you closer to the optimal featured image size for your theme. Finally, you should check the box to Include Image, as this is the only way Twitter grabs your featured image from a post or page. Theyre vital to help your post or page move up the rankings. The Pexels collection isnt much different from your Media Library, except you have the luxury of finding beautiful photos without having to take them yourself. Click on the Select Default Featured Image button. Also, I believe the classic editor should be a matter of choice instead of another plugin to install. An even page header\footer. Do you have to have a certain plugin to have it show up? Scroll down to the section called Document Settings. That way, you can scale it down for a digital interface while still maintaining much of its resolution. Click the Edit Image link to proceed with the edit. It allows you to swap out several previously listed uploaded featured images, making all of them the same image. Plugins, although rather useful for building a WordPress website, occasionally have questionable coding. WordPress makes it easier to align images to the left, right, or center. It promises to make the featured image upload process a little easier for website owners. Visuals can be decisive in your content marketing plan. Or they simply arent updated, leading to all sorts of conflicts. 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, we recommend using tools for cropping, compressing, and resizing before opting to increase your PHP memory limit. I don't understand why the image only works in . The theme doesnt allow for featured images, or you have to turn them on through the theme settings. Thats because having four columns will require having much more space (and smaller images) than a block with two or three columns. If thats the case for you, youll have to consult with the plugins developer. Page header meta box says it's using my featured image. 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. We recommend reading our guide on WordPress user roles to ensure everyone on your team can access and view featured images at all times. Youve noticed something wrong with one, or all, of your featured images. If its not there, click the Screen Options tab and mark the Featured Image checkbox to reveal it in the editor. To change the featured images location, cut this piece of code and paste it somewhere else in the page/post template. Scroll through the list of pages to locate the one you assigned as the Homepage. Its possible that your current user role doesnt allow you to upload or view featured images. You can go to Post > All Posts to review your list of articles. The plugin also has a wonderful native search engine that pulls from places like Google, Pixabay, and Unsplash. To adjust the location of a featured image, go to the page or post template being used. Did we miss anything important? Finally, a cover image allows for its own unique customization options, like the ability to place overlaying text on top of the image or including a filter. In general, the following solutions tend to help with error codes telling you that an image is either too large or not currently supported for uploading: Your hosting provider often sets the WordPress memory limitations. Simple, Clean and Lightweight Responsive WordPress Themes . This means that as you move the crop box, and it sticks to the aspect ratio. Created new Home page. You would usually find the featured image right below the title and above the first line. Giving it a new position within the template will also tell WordPress that it should render somewhere else on the frontend. The most common ones are: Incorrect home and site URL. By default, this featured should be enabled, but its possible you turned it off at some point. This allows you to type in new dimensions, both the width and height, so that the already uploaded featured image shrinks. If not, reactivate the plugins and move onto a different cause of the problem. Configure WordPress Dashboard Settings 5. Each social network has its own display for shared content, but Facebook is a solid starting point considering its the most popular one.