wordpress header image not showing on all pages wordpress header image not showing on all pages

Post thumbnails are what featured images used to be called in WordPress from its early days. A featured image does not differ from other photos on your website. Thats a sure-fire way to eliminating legal problems. Did we miss anything important? Each file/page calls the header.php and displays it. It also works well with page builders like Gutenberg and Elementor. The only thing to do next is to review and publish the post. THANKS 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. An easy way to see if the Open Graph code is activated on your site is by utilizing an SEO plugin. 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. 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. For instance, all of your featured images could have a black and white filter. WordPress Featured Image Not Showing Properly (Or Not At All), WordPress featured images not showing properly on your site? Click the Edit Image link to proceed with the edit. Its also common to see varying degrees of featured image problems. Its a must-read to speed up your WordPress site. If either is the case, open the page or post in question and look for the Featured Image block towards the pages right side. Another way to see your featured image is to create Recent Post galleries or feeds to your blog, usually elsewhere on your website. I don't understand why the image only works in . 2023 Kinsta Inc. All rights reserved. Whenever you make a change, its good to go back to the Facebook Sharing Debugger Tool to promote Facebook to search for more data on the post. 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. Considering you should be uploading high-resolution images as featured images, it makes sense to automate optimization. Insert any content you want for the blog post. This might be the root of your featured image problems. You may only need a basic photo thats relevant to your website on those pages. It also provides a clean preview of what you can expect to see if you were to paste or share that URL on Facebook. Update: finally used WordPress reset plugin and cleared everything out. The last page presents the bulk edit results, with details about the posts that now have new featured images. 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. There can be up to 3 different headers (and footers) in a document, or each Section of a document. However, the 1200 x 628 pixels suggestion is just a starting off point. Configure WordPress Dashboard Settings 5. Therefore, you have to check each plugin to see if they have this feature enabled on your site. Although there are limited simple solutions to remove suspicious coding, your best bet is to stick with photos you either purchase legally or take your own photos instead of pulling directly from Google (which is technically illegal anyway) or finding images from sketchy websites. The Thumbnail size is the featured image shown in other parts of your website, outside of the post itself. Open the post or page in the editor. In those cases, you may go with the first or third options. Click Upload to upload the image from your computer or click Select Media to choose an . We would assume the first image in a post is relevant to the topic, so theres no need to worry about a default featured image getting pulled from a file and duplicating the same image on several posts. Going with the Media Library reveals whatever images youve already uploaded to WordPress. Its also a good idea to make adjustments to child themes instead of the core WordPress files. These dont control your featured image, but they show up right below the featured image, so its important for displaying the content. Featured images break for various reasons, and its often on a case-by-case basis. The theme doesnt allow for featured images, or you have to turn them on through the theme settings. We recommend experimenting with the content settings, like showing Post Content, Display Author Name, or Display Post Date. First, you have to decide what youre trying to achieve. Note the exact issue, like if the image isnt uploading. Kinsta Hosting already offers Open Graph support, along with the possibility to control this using Yoast SEO. If the problem isnt fixed, proceed to deactivate all plugins. I installed the plugin: "Options for Twenty Seventeen" and made some changes to my site. 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 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. There are several reasons for images to disappear from WordPress. All you have to do is click on the icon to insert it somewhere on the homepage. You can upload an image to be your cover by clicking on the Select Media or Upload buttons. Scroll down the list of settings to locate the Preferences option. 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. WordPress permissions decide who can read, write, or edit website files. 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. Your dashboard settings could have the featured image fields completely turned off. This means you can upload an image that acts as the post or pages cover media, similar to a book or magazine cover. This is due to a wide variety of reasons. It may sound silly to some, but many WordPress beginners dont know how to upload a featured image in the first place. At some point, you may realize that several old posts could use new featured images. For instance, you could type in a 2 x 1 aspect ratio. 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. To start, install and activate the Open Graph and Twitter Card Tags plugin on your WordPress site. 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. By default, this featured should be enabled, but its possible you turned it off at some point. Sometimes, featured images for pages are completely blocked. The function get_header is used for calling a new header file. Scaling a photo up is a big no-no. 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. Another way to use featured images is by listing a feed of your blog posts on your sites homepage (or any other page). The image is showing on pages that use a different header. Once everything is configured, hit the Publish button. Added a featured image and it was finally appearing. If its not there, click the Screen Options tab and mark the Featured Image checkbox to reveal it in the editor. Plugin Conflicts. Make sure the right featured image is selected in the Media Library. Another specific Open Graph module from this plugin is for Twitter. WordPress added the Cover block to its Gutenberg editor only recently. 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. One of the more frustrating problems with WordPress featured images not showing involves the dashboard settings. This means that as you move the crop box, and it sticks to the aspect ratio. This means that youve turned off a setting on your dashboard to reveal the Featured Images column. However, plugin conflicts are a different story. The set dimensions dictate the maximum dimensions youll see on your website for the given image sizes. Check out our guide here to learn more about the Facebook Debug Tool. The featured image is too small or too large. For instance, you could add or remove items like tags, categories, and the author. Each social network has its own display for shared content, but Facebook is a solid starting point considering its the most popular one. Click on the area where you want to place a header image. Finding free images for personal and commercial is hard. However, you still may see a vague error, as the following HTTP error. message. You should avoid stuffing keywords just because you want to. Clicking on that brings you directly to the WordPress Media Library. In this tutorial, we have a page called Homepage. Yours may have a different name depending on what youve named it. 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. Be sure to click the Save Changes button to activate the default featured image on your site. 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. Problematic WordPress themes or plugins. Though, it varies depending on your WordPress sites configuration, theme, and plugins. This way, youre able to present somewhat of a media portfolio for your posts instead of a bunch of links with only text. Thats how it should be if you want the functionality of a featured image with no duplication! The problem prevents images from displaying on both the backend and frontend. We covered this solution already in the previous section, yet it fits well in the best practices, too. We'll get back to you in one business day. 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. Although it may be a temporary fix, this can also prove useful for setting permanent featured images on pages and general blog posts. Your themes coding often structures the featured image location and formatting. Because of this, pasting and Debugging the URL in the Sharing Debugger Tool from Facebook could actually solve your problems altogether. Start your free trial today. Overall, the Default Featured Image plugin has some simple tools for adding a default featured image with a buttons click. 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. It promises to make the featured image upload process a little easier for website owners. Therefore, click on the Choose Images button under the section titled Select the featured images you want to replace by the selected image.. Usually, duplicate featured images arent two featured images, but one featured image and a separate photo in the articles content area. As with most WordPress settings, these also tend to modify the way your featured images appear. Several factors can influence your header image not showing in WordPress, such as: An HTTP error due to the WordPress memory limit exhaustion. Overall, the plugin has a field to paste in a URL from an image and insert that image into the featured image slot. The good news is that all future posts without featured images will automatically add the default photo. has_header_image (): bool. 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. Here, enable the Display featured image option. However, you also want to use photos that actually look good, so you should still shoot for high-resolution photos as much as possible. Whats more, several settings are now available to make the featured images look professional. Now, go to Settings > Open Graph and Twitter Card Tags. Simply select the image by clicking on it, and then click on alignment button from the block toolbar. Next, enter the custom code in the 'Header' section. You may have to switch it from Page to Block. It could be a good thing but it downgrades the development experience. There are many ways to go about it, and well cover them all. Not all themes have the same featured image settings. Its important to test out how the Default Featured Image works on your site. Its settings are located in the WordPress Media Settings, but you have only one field you to fill out. As a test, lets visit a post that already has a featured image included with the article. To add content to your homepage, and to adjust the settings for the blog feed on that page, go to Pages > All Pages in the dashboard. If youre still having problems, go to SEO > Social in the WordPress dashboard. Search for the Cover block and click to add it. But what if the featured images arent showing on the blog page? Theres also an Image Alignment setting to indicate if the images should slide to the right, center, or left. For instance, you might consider including things like the Site Name and Post Title but not having the URL. You can also do this with pages or click on the All Posts option if you're interested in adding a featured image to a previously generated post. This is still common for many pages, or you may have rolled back the Gutenberg editor to use the old editor instead. Theres a field for choosing where the image should come from when sharing a post or page to social media. Giving it a new position within the template will also tell WordPress that it should render somewhere else on the frontend. Three options are available for you to bulk edit the featured images: Choose the right option depending on what youre trying to achieve. Set the selected image as the new featured image. Every hosted image, including featured images, has metadata crawled by the search engines to figure out what your post or page is all about. This code snippet is a reference to your featured image. Allow Featured Image for Viewing 6. Thats the main reason you would take advantage of this plugin. Again, check to see if the featured images are showing up after all plugins are deactivated. It eliminates a significant amount of manual upload work that could be waiting for you. Pay for photos on sites like Shutterstock and iStockPhoto. This could be just above your site's title and menu, for example. If you find that its missing, follow the next few steps to activate it. Many blind people are using the internet through screen readers. I disabled it , proved it worked, then enabled it to test and noticed that when enabling it again, this time it had automatically added in the new websites into the exceptions list and now everything works again!! Find and select the triple-dot icon () in the far right corner of the dashboard. Otherwise, you run the risk of someone deciding not to share the post at all, or your brand looking unprofessional when users do share any of your sites links. 3. When seeking out a featured image, always consider starting with a larger, high-resolution photo. For instance, you may simply want to remove all the old featured images or make sure that all new featured images are set as one specific image. Here, select the Facebook tab. Its possible a theme changed this. Consider any WordPress issues that may be causing the problem with your featured image, like conflicts between plugins or a. 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. The Auto Featured Image plugin provides a unique option for fixing featured image problems. This way, youre not limiting your sites resources with too many large photos. Also, I believe the classic editor should be a matter of choice instead of another plugin to install. Talk with our experts by launching a chat in the MyKinsta dashboard. You have two options for grabbing URLs from your site. 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 only problem is that it doesnt tell you which of your Media Library images have been previously uploaded as featured images. Locate the section titled Actions with a single image. You have the option to choose one and click the Set Featured Image button. Were most interested in the bulk editing tool for this tutorial. You can insert a Cover block anywhere in a post or page, not just at the beginning. Its gone! After that, click on the Save Changes button and test to see if Facebook sharing allows the featured image to appear. Your theme layout does not support featured images. 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. Overall, photos on your website take up a significant amount of server space, potentially slowing down your site loading times. I suggest you to upgrade to pro. Think about installing a plugin that resolves problems for featured images without you having to do much work. An even page header\footer. WordPress makes it easier to align images to the left, right, or center. To move forward and see the featured image in action, click the Publish button. 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. Feel free to go back and choose more images if you missed any. If you see the same photo under the Featured Image tab and in your content, thats causing the problem! 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. Another element of image optimization involves how those images will show up in the search engines. Its more common to see something with specifics, like a message that tells you an image or video Exceeds the Maximum Upload Size For This Site.. You would usually find the featured image right below the title and above the first line. Avoid images that are way too large or small. In this module, you can select multiple images from your Media Library. However, well recommend a few Open Graph plugins to resolve issues if any of your websites are running on another web host. You also have the option to Save the crop, even though its done for you. 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. Here, youll see a button to Set Featured Image. A thumbnail of the image you go with shows up under the Featured Image panel in your Post Settings. Whenever youre done editing an image, you can click Enter to active the edit, and then Save the image. Make sure its on the Block settings tab. Furthermore, theres an option in the Edit Image panel that lets you revert to the original dimensions whenever you want. To adjust the location of a featured image, go to the page or post template being used. Also, you can typically enable the Open Graph markup directly from an SEO plugins settings. 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. 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. 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. Simply having a header.php in your theme's folder will not output your header to the browser. I looked at the Graphene theme and didn't see anything in the theme which would do that so it's probably a plugin. You may discover that your theme does well with slightly wider or shorter featured images. This gets around the idea of uploading an image to your WordPress Media Library and activating that image as a featured image. 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. However, only the front-page.php file shows the image. Again, in this tutorial, we named the page Homepage, but you may have something different. But what if thats not the case? 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. For instance, you could cut down each featured image to 25% of its original size. You dont have to upload a second version of that same image every time you shareits already pulled from the original content. But, several systems (about 25% of known systems) don't show the images, only a blank rectangle with a small image icon in the center. 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.