Image suddenly not appearing in header | WordPress.org A first page header\footer. Deleted all plugins. You can upload as many images as youd like while also choosing which featured image should display in certain areas and how big those images should be. Depending on your theme settings and various other factors, like certain plugins that change image settings, the featured image should appear first in your published blog post. Here, youll see a button to Set Featured Image. Finally, you also have the option to visit theDevelopers Debug Tool on Facebook. 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 great part about this plugin is that it doesnt replace the featured images you already have on your posts. Go to Posts > Add New to create a new blog post. All other image editing tools are located above the featured image preview. 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. Now, go to Settings > Media in your WordPress dashboard. Think about using the built-in image editing tools in WordPress for featured images that are already uploaded but could use some changes. You should now see a thumbnail of that image for all posts that dont have featured images already uploaded. The featured image is prone to human error, considering the page or post author must manually upload a featured image whenever creating a new webpage. 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. Returning back to the original page, the image suddenly shows up. Overall, its best to opt for a plugin that optimizes your images on a third-party server. I always prefer the classic editor. This is still common for many pages, or you may have rolled back the Gutenberg editor to use the old editor instead. Learn how to fix it once and for all Click to Tweet. Click the Edit Image link to proceed with the edit. 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. The function get_header is used for calling a new header file. A thumbnail of the image you go with shows up under the Featured Image panel in your Post Settings. For instance, you could cut down each featured image to 25% of its original size. No featured image complements the posts when sharing on Facebook. If not, how do you go about fixing that problem? In that case, you should keep the photo under the Featured Image area and delete the one in the articles content editor. Reactivate each plugin one-by-one. You may be having trouble uploading the featured image the right way. Test a deployment on our modern App Hosting. Why does an image in "header.php" only display in one page? 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. This allows you to type in new dimensions, both the width and height, so that the already uploaded featured image shrinks. Run your Node.js, Python, Go, PHP, Ruby, Java, and Scala apps, (or almost anything else if you use your own custom Dockerfiles), in three, easy steps! WordPress makes it easier to align images to the left, right, or center. Click on the Preferences menu (the three vertical dots at the top right). You would select those images later and swap every single one of them out in place of the new one. Note: Sometimes newer websites have trouble with Facebook and other social sites because Facebook hasnt crawled the site already. Another way to use featured images is by listing a feed of your blog posts on your sites homepage (or any other page). To remove the header, check the top box called disable primary header and update the page. 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. Again, in this tutorial, we named the page Homepage, but you may have something different. Note: Youre always able to come in here and change the static homepage. Be sure to Save the settings after youre done. After each reinstallation, you should check to see if the featured images are still functioning and showing up properly. If youre still not having success with that, consider going to the Facebook Sharing Debugger to ensure Facebook knows how to crawl your website, as thats usually the problem if you already have the Open Graph protocol activated. 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. Many blind people are using the internet through screen readers. You can also set featured images from more unique sources, like a book API or an ISBN, or even from a post title or search engine. If the problem isnt fixed, proceed to deactivate all plugins. The longest list of the most common WordPress errors and how to quickly fix/troubleshoot them (continuously updated). It eliminates a significant amount of manual upload work that could be waiting for you. All selected images appear as thumbnail previews in the plugins dashboard. You can fix it by following these instructions: 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. 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. Going with the Media Library reveals whatever images youve already uploaded to WordPress. There, below the disable section title, you can check all the boxes of the sections that you would like to remove. Some websites already have hundreds or even thousands of featured images, so a bulk editing tool is required. Or if the featured image fails to show up on social media, but its working fine on your website. Many image optimization plugins offer lazy loading functionality as an add-on. Sometimes, featured images for pages are completely blocked. Its a good practice to know which photos look good on WordPress. What if the featured image isnt the right one, or you do not see an image at all? Thats a tremendous problem. Header not showing on following pages in Word 2016 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. Header image not showing on homepage | WordPress.org Featured images break for various reasons, and its often on a case-by-case basis. 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. 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. Here are some plugins that tend to include lazy loading features: Each WordPress page and post template specifies a featured images location. This turns on the featured images for all the latest posts being pulled. Editing inside WordPress is also an option, but that doesnt typically resolve to get the WordPress image to begin with. Select one of your blog posts that dont already have a featured image. The screenshot below tells us that our featured image is showing up just fine. You may discover that your theme does well with slightly wider or shorter featured images. Take a photo with your own camera. As long as youre not making the image too small, you should still be able to offer a beautiful featured image. 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. You dont have to upload a second version of that same image every time you shareits already pulled from the original content. Now, go to Settings > Open Graph and Twitter Card Tags. However, the 1200 x 628 pixels suggestion is just a starting off point. You may find that the theme coding doesnt support a featured image. Your theme layout does not support featured images. Created new Home page. You can upload an image to be your cover by clicking on the Select Media or Upload buttons. Its settings are located in the WordPress Media Settings, but you have only one field you to fill out. For the AIOSEO plugin, navigate to the All in One SEO menu and click on the Social Networks tab. This brings you to the settings required to activate the Open Graph protocol and calibrate which content elements youd like to see when your posts and pages get shared to social media sites. These are the general settings for all social media sharing, making sure Facebook and Twitter dont randomly select photos from your article or other places on your website. You have to be on the Posts or Pages panel for the right Screen Options panel to appear. We covered the Open Graph essentials in the section above. If youre having problems with the SEO plugins discussed above, or you simply dont plan on using an SEO plugin (and therefore, dont have access to a quick Open Graph activation button), there are a few other options to activate Open Graph. You may only need a basic photo thats relevant to your website on those pages. However, if you use any other hosting provider, it may prove useful. This means that as long as you click Save Draft or Publish, the image remains active on that post until you remove it. Avoid images that are way too large or small. This section is outputting a style with a .site-header background image with a relative url; and is overwriting whatever it outputed before with the conditional is_page() codes. Also, make sure the width of the image is set to 1080px. I later deactivated the plugin, but that hasn't made a difference. Wordpress - How to show header on every page? - Stack Overflow For example, you might complete an action with multiple pages. Both can be accessed and implemented by going to the Posts or Pages menus and creating a new item or visiting an old page or post. You may also want to set a Default Image URL to appear if a post doesnt have a featured image assigned to it. This is done by using the align feature. Make sure the area that says Your homepage displays is set to A Static page. The featured image has its own section for uploading, away from the content editor. This means that youve turned off a setting on your dashboard to reveal the Featured Images column. A featured image does not differ from other photos on your website. This isnt a rule, but its also common to see issues with featured images when some plugins have access to your media library or alter all images functionality. In the Astra theme, launch the edit screen of your desired page and expand the Astra settings tab from the bottom right corner. 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. There are several reasons for images to disappear from WordPress. Do you have to have a certain plugin to have it show up? Its possible a theme changed this. Just make sure to test your featured images are uploaded and set properly before embarking on more advanced solutions. It does this by halting the loading of images on a page until they come into view on the screen. Remove the selected image as the featured image. The last page presents the bulk edit results, with details about the posts that now have new featured images. The reason it shows on that page is because the header image has white areas on the left and right. To add the featured images, click on the Latest Posts block. 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. Another way to see your featured image is to create Recent Post galleries or feeds to your blog, usually elsewhere on your website. Is there a way to do that without using an external plugin? 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. Scroll down in the Block settings tab to view the options available. As a test, lets visit a post that already has a featured image included with the article. WordPress Featured Image Not Showing: Causes and 7 Solutions If its not there, click the Screen Options tab and mark the Featured Image checkbox to reveal it in the editor. The first is going about it manually, clicking on each post and page on your site and collecting the URLs into a document. Be sure to click the Save Changes button to activate the default featured image on your site. WordPress permissions decide who can read, write, or edit website files. We recommend only using a media hosting platform, or maybe another website host that you own yourself. However, only the front-page.php file shows the image. Go to Appearance Editor. However, you may find that the theme has removed featured images in the coding, and it doesnt have any additional tools to override the lack of featured images. Instead, it detects the posts that lack featured images and sets a default featured image for them. Its also possible to generate featured images based on post authors, tags, and post types. It's only on select pages though (front page and blog page). If not, then WordPress will render the default header file. 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. Its easy to grab a quick image that relates to the article just to save time. Now, go to your Facebook page (personal or business) and paste a link with a featured image into the Status field. 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. To begin, go to your WordPress dashboard. It results in an image duplication issue like this: Obviously, you dont want this. You can search for specific keywords and set them as your featured images. The good news is that all future posts without featured images will automatically add the default photo. 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. Regardless, all of these errors are frustrating and confusing for users. 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. The Preferences module includes a wide range of options for a document. 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 featured image also appears in the embeds when a post or page is shared on social media sites. Go to Posts > Add New to create a new blog post. For instance, you could add or remove items like tags, categories, and the author. It can also prevent people from sharing your work, considering its not all that appealing to share a blog post on Facebook that doesnt have a featured image. Or maybe they include colorful animations while still representing whats in the posts. The Preview button also does the trick for testing a featured image, but the public cant see it until you hit Publish. Note: Featured images get pulled from WordPress and populated on social media sites with the use of something called Open Graph. has_header_image (): bool. The .header-img is a common css class in WordPress themes. For more such image optimization tips and tricks, read our in-depth image optimization guide. You have the option to choose one and click the Set Featured Image button. The Screen Options section has a long list of fields to check off and sets what you want in your WordPress dashboard. At some point, you may realize that several old posts could use new featured images. However, plugin conflicts are a different story. Locate the Settings panel towards the right side of the page. Select the first two checkboxes to grab the Open Graph image, while the other is for using the page or post featured image. If allowed, you can also change the PHP memory limit on your own by editing your sites wp-config.php file. Another concern is that a certain page or post in your WordPress files isnt accessible because of user permissions. Make sure its on the Block settings tab. It allows you to swap out several previously listed uploaded featured images, making all of them the same image. Therefore, you have to check each plugin to see if they have this feature enabled on your site. Well only cover how to fix your featured images with built-in WordPress tools for this tutorial. Another way to see if this works is if you have any social sharing buttons on your website. One way to ensure your featured image field is never empty is to set a default featured image for all posts. Hence, many hosts, and WordPress itself, define a maximum upload file size. If the featured image is showing on Facebook, then theres a good chance it also appears on other social sites. 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. Then well go deeper into other errors. Some WordPress users complete all the right steps to upload a featured image but realize that a duplicate of the featured image appears. has_header_image (): bool. Switching it to Large or Medium adjusts the sizing of all featured images in the block and adds more of a landscape view depending on your featured images dimensions. You can search for the Cover block or scroll through the library to find it. This means that as you move the crop box, and it sticks to the aspect ratio. But what if thats not the case? There is a plug in or other theme option set which is changing the margin-left styling for .header-img. 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. If either is the case, open the page or post in question and look for the Featured Image block towards the pages right side. Still, its far easier to know the core approaches to featured images to minimize problems in the first place. Still, WordPress provides simple editing features which may prove easier for some users, or for those who want to edit featured images that have already been uploaded to WordPress. Figuring out the optimal dimensions before uploading the images allows you to minimize instances where the featured image gets stretched out or cropped strangely. The Ixion theme page provides details of setting up your Header images and also the size specifications at the bottom of the page. Although it may be a temporary fix, this can also prove useful for setting permanent featured images on pages and general blog posts. Then, select the Post (or Page if editing a page) tab to reveal the posts settings. Post thumbnails are what featured images used to be called in WordPress from its early days. First, the plugin opens up the default limit that WordPress sets of having one featured image per post. We dont recommend trying to enlarge an image as itll only make it blurry. 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 is configured, hit the Publish button. Furthermore, an engaging story isnt complete without the introduction, and thats exactly the purpose of a featured image. Other times, you may notice that a theme presents a featured image in a different spot than whats expected. By default, this featured should be enabled, but its possible you turned it off at some point. 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 is particularly important if youre highlighting your recent posts on the homepage. 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. Its possible that your current user role doesnt allow you to upload or view featured images. Your theme, or a plugin, has an error or is causing a conflict with your featured images working. You can still maintain the quality of an image after compression, cropping, or resizing. After that, every time you drag the crop box, it will always keep to the 2 x 1 ratio, giving you less freedom to crop and ensuring your ratio remains consistent when creating featured images. This is the only section of the dashboard that gets changed by the Default Featured Image plugin. body a.novashare-ctt{display:block;background:#00abf0;margin:30px auto;padding:20px 20px 20px 15px;color:#fff;text-decoration:none!important;box-shadow:none!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;border:none;border-left:5px solid #00abf0}body a.novashare-ctt:hover{color:#fff;border-left:5px solid #008cc4}body a.novashare-ctt:visited{color:#fff}body a.novashare-ctt *{pointer-events:none}body a.novashare-ctt .novashare-ctt-tweet{display:block;font-size:18px;line-height:27px;margin-bottom:10px}body a.novashare-ctt .novashare-ctt-cta-container{display:block;overflow:hidden}body a.novashare-ctt .novashare-ctt-cta{float:right}body a.novashare-ctt.novashare-ctt-cta-left .novashare-ctt-cta{float:left}body a.novashare-ctt .novashare-ctt-cta-text{font-size:16px;line-height:16px;vertical-align:middle}body a.novashare-ctt .novashare-ctt-cta-icon{margin-left:10px;display:inline-block;vertical-align:middle}body a.novashare-ctt .novashare-ctt-cta-icon svg{vertical-align:middle;height:18px}body a.novashare-ctt.novashare-ctt-simple{background:0 0;padding:10px 0 10px 20px;color:inherit}body a.novashare-ctt.novashare-ctt-simple-alt{background:#f9f9f9;padding:20px;color:#404040}body a.novashare-ctt.novashare-ctt-simple-alt:hover,body a.novashare-ctt.novashare-ctt-simple:hover{border-left:5px solid #008cc4}body a.novashare-ctt.novashare-ctt-simple .novashare-ctt-cta,body a.novashare-ctt.novashare-ctt-simple-alt .novashare-ctt-cta{color:#00abf0}body a.novashare-ctt.novashare-ctt-simple-alt:hover .novashare-ctt-cta,body a.novashare-ctt.novashare-ctt-simple:hover .novashare-ctt-cta{color:#008cc4}WordPress featured images not showing properly on your site? This selects the entire block and reveals settings for that block in the right-side panel. Incorrect permalink setup. With the OG plugin activated, you should now see the post information and the featured image in the preview. Youre better off using a plugin that can override the conflict than swapping out your entire theme and redesigning your website just to fix featured images. Therefore, we recommend checking your themes support for featured images. Its gone! This could lead to a photo owner reaching out and asking you to remove many of your featured images, or worse, threatening legal action. After the plugin is installed and activated, go to Featured Images > Bulk Edit. Click on the Featured Image panel to open its settings. Scroll down to the area called Image Settings. Again, Kinsta bans many Open Graph plugins, including this one. Get premium content from an award-winning cloud hosting platform. My Header media is not showing on my homepage on desktop view. Scroll to the bottom of the page to click on the Next button. You can see that two of my posts now have a new featured image, and theyre the same images. Regardless, a WordPress featured image not showing up is both frustrating and concerning. You can click on the Scrape Again button or simply refresh the page and paste your post URL in the field once more. Kinsta Hosting already offers Open Graph support, along with the possibility to control this using Yoast SEO. 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. The theme is not coded well, or the developer has removed the default featured image functionality on purposemainly because they have other settings to control the featured image. Three image sizes often get configured on WordPress: Thumbnail, Medium, and Large. You have to call the header too. You can check out the additional-features available in the theme. Make sure thats checked off to reveal the Featured Image option in your posts and pages. We recommend checking boxes for the Title, URL, and Description. Here, enable the Display featured image option. This means you must make a page and assign it as the Homepage in the WordPress Reading settings. 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. The most common ones are: Incorrect home and site URL. After all, a post shared on Facebook with no image wont gain much traction. Along with activating the Open Graph for all social networking sites, this plugin has the added advantage of including Twitter tags to improve your Twitter sharing results. Here, you can set everything for the Open Graph sharing protocol, yet specific unique traits for Facebook only. Though, it varies depending on your WordPress sites configuration, theme, and plugins. Its important to test out how the Default Featured Image works on your site. Twitter Cards are a little different than Facebook sharing modules, so you can go through these settings to make sure everything looks good. I have spent MONTHS trying to figure out why my images were not working it was the Hotlink thing ALL along!!!