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

This is the only section of the dashboard that gets changed by the Default Featured Image plugin. When seeking out a featured image, always consider starting with a larger, high-resolution photo. Scroll to the bottom of the page to click on the Next button. By default, WordPress offers a featured image for all posts and pages. You can search for specific keywords and set them as your featured images. Incorrect permalink setup. Here, youll see a button to Set Featured Image. We recommend reading our guide on WordPress user roles to ensure everyone on your team can access and view featured images at all times. A column called Featured Image is supposed to appear after the Post Date. Three options are available for you to bulk edit the featured images: Choose the right option depending on what youre trying to achieve. If you find yourself in this situation, we recommend returning to the Facebook Sharing Debugger Tool and clicking on the Batch Invalidator option. Yeah inside the Editor, when editing a post, clicking the Settings, then scrollow down past Permalink, Categories, Tags, etc. Lazy loading is preventing your featured image from showing. Thats a problem, so follow the steps below to ensure your featured image is always ready to go for social sharing. That means only those images will get replaced by the new image. 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. 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. The following page explains which current featured images will be replaced by the future featured image you specified from before. 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. 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. To find and upload a featured image, move your attention to the post Settings panel on the right-hand side. Theres a completely different section that handles the 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. Finding free images for personal and commercial is hard. Wrong file permission or ownership. Below well cover every problem we know of when it comes to featured images and outline the steps you can take to fix them. Theres a field for choosing where the image should come from when sharing a post or page to social media. To remove the header, check the top box called disable primary header and update the page. At some point, you may realize that several old posts could use new featured images. 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. 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. Again, check to see if the featured images are showing up after all plugins are deactivated. 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. When I exported post and media and imported on my new site everything was fine eventually. To edit featured images in WordPress, open a post and scroll to the Featured Images section in the Post Settings panel. Scaling a photo up is a big no-no. You may have to switch it from Page to Block. Our last option for turning on the Open Graph protocol to reveal featured images is called the Open Graph and Twitter Card Tags plugin. 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. The theme doesnt allow for featured images, or you have to turn them on through the theme settings. Click on the page specified as the Front Page. 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. WordPress added the Cover block to its Gutenberg editor only recently. 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. One way to ensure your featured image field is never empty is to set a default featured image for all posts. Get all your applications, databases and WordPress sites online and under one roof. Each social network has its own display for shared content, but Facebook is a solid starting point considering its the most popular one. It also works well with page builders like Gutenberg and Elementor. 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. One of the more frustrating problems with WordPress featured images not showing involves the dashboard settings. The true advantage of a plugin like OG is that it doesnt require any configuration after the installation. Note: Sometimes newer websites have trouble with Facebook and other social sites because Facebook hasnt crawled the site already. The featured image also appears in the embeds when a post or page is shared on social media sites. Going with the Media Library reveals whatever images youve already uploaded to WordPress. 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. Some WordPress users complete all the right steps to upload a featured image but realize that a duplicate of the featured image appears. Sometimes theres a problem with your theme, and other times youll find that a plugin is causing the issue. such as page.php, single.php, archive.php and so on. Think about using the built-in image editing tools in WordPress for featured images that are already uploaded but could use some changes. Both cover and featured images function in similar ways, providing large photos at the top of posts and pages, yet they have some differences. There are many ways to go about it, and well cover them all. Several images are pulled from the post, but you must choose which one you want to use. If not, reactivate the plugins and move onto a different cause of the problem. All files/pages are in the root folder. 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. An odd page header\footer. Click on Preferences to reveal a new pop-up window. 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!! 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. This should get you closer to the optimal featured image size for your theme. Plugin Conflicts. Get premium content from an award-winning cloud hosting platform. 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. Still, its far easier to know the core approaches to featured images to minimize problems in the first place. 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. But what if those thumbnail images are nowhere to be found? Another way to see your featured image is to create Recent Post galleries or feeds to your blog, usually elsewhere on your website. The featured images for all blog posts in that feed appear as smaller thumbnails, providing a more visual experience for those looking for content. Its also possible to generate featured images based on post authors, tags, and post types. A lazy loading plugin may be preventing the featured image from showing up or loading quickly. There are two solutions to this. 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. 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. Youve figured out how to upload a featured image and completed your post content. Talk with our experts by launching a chat in the MyKinsta dashboard. Yoast SEO is another SEO plugin that includes social sharing features and options to enable/disable the Open Graph functionality. This button has disappeared for me on WordPress. 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. Or they simply arent updated, leading to all sorts of conflicts. The first is OG, which comes in handy for adding the Open Graph protocol to turn any webpage into rich objects for social media. 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. So after a serious research, I realized that, I need to export both post and media as well. Here, we want to make sure the checkbox for the Featured Image is checked. This way, the thumbnails remain proportional, and you dont see any unexpected cropping effects. The most important option right now is the Include Image field. 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. Stick with landscape sizes over portrait photos. This means that youve turned off a setting on your dashboard to reveal the Featured Images column. Maybe you encounter one of the following: Luckily, WordPress already includes a wide range of photo editing tools for you to ensure the featured image looks professional. For more details, you can see our guide on how to add header and footer code in WordPress. Participant. It also helps when your older posts dont have appropriate featured images. Also, make sure the width of the image is set to 1080px. WordPress permissions decide who can read, write, or edit website files. However, only the front-page.php file shows the image. You should now see a thumbnail of that image for all posts that dont have featured images already uploaded. Again, in this tutorial, we named the page Homepage, but you may have something different. Your dashboard settings could have the featured image fields completely turned off. Three image sizes often get configured on WordPress: Thumbnail, Medium, and Large. The featured image should quickly appear whenever someone wants to share one of your posts or pages on a social network. Fill in the title, write paragraphs, and upload images to the article. Reactivate each plugin one-by-one. In those cases, you may go with the first or third options. Or maybe they include colorful animations while still representing whats in the posts. That way, you can scale it down for a digital interface while still maintaining much of its resolution. Theres quite a bit of information about how your URL interacts with Facebook, but all you need to look at is the preview. Make sure its on the Block settings tab. I don't understand why the image only works in . Just make sure to test your featured images are uploaded and set properly before embarking on more advanced solutions. 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. It is working fine for mobile and tablet. After that, click on the Save Changes button and test to see if Facebook sharing allows the featured image to appear. By default, this featured should be enabled, but its possible you turned it off at some point. Its gone! Disable Lazy Loading 4. We covered the Open Graph essentials in the section above. You have the option to choose one and click the Set Featured Image button. Instead, it detects the posts that lack featured images and sets a default featured image for them. Its separate from the main content. The Featured Image column should now appear in your list of posts or pages. Also, I believe the classic editor should be a matter of choice instead of another plugin to install. Here, youll see a Progress Bar at the top of the page. The only problem is that it doesnt tell you which of your Media Library images have been previously uploaded as featured images. You have to call the header too. There should be no image at the beginning of the post nowjust an image thumbnail preview in the Featured Image module. 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. 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. The opportunities are plentiful with the Quick Featured Images plugin, so we suggest testing out the tools and seeing how you can bulk edit some of your older or non-functioning featured images to clean up the overall visual appeal of your website. But what if the featured images arent showing on the blog page? Therefore, it serves as a backup to the real featured image field, just in case you forget to upload the featured image but still want something to show up. Overall, the best way to activate the Open Graph protocol for properly sharing content and featured images on social media is by installing a plugin like Yoast SEO or OG. Its easy to grab a quick image that relates to the article just to save time. 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 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. 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. Lets start with the simplest of solutions, making sure youre uploading your featured images properly. This way, youre able to copy and paste them easily into the Facebook Sharing Debugger Tool. The Ixion theme supports featured images on single Posts and Pages. Its a good practice to know which photos look good on WordPress. 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. Many blind people are using the internet through screen readers. 2023 Kinsta Inc. All rights reserved. Learn how to fix it once and for all Click to Tweet. To begin the process of bulk editing featured images, scroll down on the page. You may find that the theme coding doesnt support a featured image. These dont control your featured image, but they show up right below the featured image, so its important for displaying the content. I installed the plugin: "Options for Twenty Seventeen" and made some changes to my site. The featured image is too small or too large. Another concern is that a certain page or post in your WordPress files isnt accessible because of user permissions. I looked at the Graphene theme and didn't see anything in the theme which would do that so it's probably a plugin. The Cover block gets placed into the content editor, far away from the area in which we saw the featured image. Youve noticed something wrong with one, or all, of your featured images. Because of this, a cover image is part of the post or page itself, and not separated like a featured image. Be sure to click the Save Changes button to activate the default featured image on your site. 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. Open the Media Library in your WordPress dashboard Select the desired image Uncheck the box Protect this file in the attachment details Fix Images not Showing in Media Library You might suffer a nightmare when there are no images available in the WordPress Media Library. Select one of your blog posts that dont already have a featured image. Sometimes, featured images for pages are completely blocked. An easy way to see if the Open Graph code is activated on your site is by utilizing an SEO plugin. You may also want to set a Default Image URL to appear if a post doesnt have a featured image assigned to it. 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. Many image optimization plugins offer lazy loading functionality as an add-on. Overall, photos on your website take up a significant amount of server space, potentially slowing down your site loading times. It tells WordPress to display the featured image in the templates exact location. 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. Make sure the area that says Your homepage displays is set to A Static page. Thats because having four columns will require having much more space (and smaller images) than a block with two or three columns. Simple, Clean and Lightweight Responsive WordPress Themes . Make sure thats checked off to reveal the Featured Image option in your posts and pages. 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. Here, you can set everything for the Open Graph sharing protocol, yet specific unique traits for Facebook only. For instance, you could type in a 2 x 1 aspect ratio. We'll get back to you in one business day. 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. For instance, you may want to pull the first image in your content and make it your featured image for a post. Visuals can be decisive in your content marketing plan. Not all themes have the same featured image settings. The featured image field is missing when youre trying to edit or create a page or post. Its possible a theme changed this. Usually, duplicate featured images arent two featured images, but one featured image and a separate photo in the articles content area. 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. Legal information. Sometimes the best solution is to install a plugin and hope that it provides the features needed to fix everything. 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 Open Graph protocol is automatically activated for all WordPress posts and pages. A thumbnail of the image you go with shows up under the Featured Image panel in your Post Settings. Choose the Facebook option and scroll down to locate the field to Enable Open Graph Markup. Regardless, all of these errors are frustrating and confusing for users. This is still common for many pages, or you may have rolled back the Gutenberg editor to use the old editor instead. Page header meta box says it's using my featured image. Simply having a header.php in your theme's folder will not output your header to the browser. For more such image optimization tips and tricks, read our in-depth image optimization guide. 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. These are the general Media settings for your entire WordPress website. However, if you right click this rectangle and choose 'View image', the correct image is shown. Incorrect image URLs. The Progress Bar indicates exactly where you are in the process of bulk editing the featured images. Search for the Cover block and click to add it. A Cover block, in contrast, is housed in the Gutenberg Block Library, which is accessible by clicking on an Add Block button in the editor. It also provides a clean preview of what you can expect to see if you were to paste or share that URL on Facebook. 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. The Screen Options section has a long list of fields to check off and sets what you want in your WordPress dashboard. Twitter Cards are a little different than Facebook sharing modules, so you can go through these settings to make sure everything looks good. We also recommend looking at the Image Dimensions. You may be having trouble uploading the featured image the right way. You also agree to receive information from Kinsta related to our services, events, and promotions. Next, enter the custom code in the 'Header' section. 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. A theme or plugin usually defines it. It results in an image duplication issue like this: Obviously, you dont want this. Go to its Post Settings panel and open the Featured Image section. Begin by installing and activating the Default Featured Image plugin. Avoid images that are way too large or small. It could be a good thing but it downgrades the development experience. One way to get in serious trouble with your images is by using photos and graphics you randomly find online. Fix Featured Image Not Showing on a Blog Post Gallery Page 7. Deleted all plugins. Then scroll down through the settings. Make sure the Featured image toggle is switched on. You may discover that your theme does well with slightly wider or shorter featured images.