Select the image you like, then click on the Choose Image button. Feel free to go back and choose more images if you missed any. Other times, you may notice that a theme presents a featured image in a different spot than whats expected. The function get_header is used for calling a new header file. This means you can upload an image that acts as the post or pages cover media, similar to a book or magazine cover. Alternatively, you may find yourself in the older version of the WordPress editor. Fill in the title, write paragraphs, and upload images to the article. Sometimes theres a problem with your theme, and other times youll find that a plugin is causing the issue. Many of them provide tools for seeing previews of what shows up on Facebook and other social networks. Select the Twitter Cards tab to show the settings to configure your Twitter Card Tags. Locate the Settings panel towards the right side of the page. After all, a theme or plugin could be causing the problem. Then, select the Post (or Page if editing a page) tab to reveal the posts settings. We have an excellent guide on optimizing your WordPress images. Check out our post on the 10 best places to find free images for WordPress, no strings att, Get started, migrations, and feature guides. 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. In that case, you should keep the photo under the Featured Image area and delete the one in the articles content editor. Click the featured image thumbnail to access its various settings. Figuring out the optimal dimensions before uploading the images allows you to minimize instances where the featured image gets stretched out or cropped strangely. This means that as you move the crop box, and it sticks to the aspect ratio. If youre still having problems, go to SEO > Social in the WordPress dashboard. Click the Preview Filtering button to see which bulk replacements will occur. In general, a cover image is far more customizable directly from the WordPress dashboard than a featured image. The reason it shows on that page is because the header image has white areas on the left and right. Regardless of whether setting a proper alt text for images helps with SEO, you should do it anyway for accessibility reasons. One of the last areas to consider for the Featured Image section (in the Latest Posts block) is the number of items you show in the block and how many columns make up the block. 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. Below well cover every problem we know of when it comes to featured images and outline the steps you can take to fix them. It promises to make the featured image upload process a little easier for website owners. It also works well with page builders like Gutenberg and Elementor. Its a must-read to speed up your WordPress site. Again, in this tutorial, we named the page Homepage, but you may have something different. Just make sure its the right image and that the plugin is recognizing it. Besides, any image you use on your site, including featured images, shouldnt be that large, to begin with. Scroll to the bottom of the page to click on the Next button. Although not all featured image correction plugins complete the same tasks, there are a few that we recommend looking into before trying any drastic changes with your website. Image optimization tools like ShortPixel and, Direct lazy loading plugins such as Lazy Load by, Database and site optimization tools such as. In this tutorial, we have a page called Homepage. Yours may have a different name depending on what youve named it. That means only those images will get replaced by the new image. It allows you to swap out several previously listed uploaded featured images, making all of them the same image. All of these come into play when highlighting your recent posts and ensuring they look presentable while also displaying your featured images. Clicking on that brings you directly to the WordPress Media Library. The wrong featured image is showing up on Facebook. All of them allow you to adjust or get rid of the current featured image. Thats what we were trying to accomplish. Not only that, but its essential to realize that featured images display differently when compared to a regular photo uploaded to a post or page. 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. Hit the Enter key to activate the crop and see the result in the preview. It greatly benefits the website by turning what could very well be a dull website into something beautiful. Because of this, pasting and Debugging the URL in the Sharing Debugger Tool from Facebook could actually solve your problems altogether. Is there a way to do that without using an external plugin? In terms of featured images on Facebook, we often see the following problems: All the concerns listed above stem from similar problems. Go to Posts > Add New to create a new blog post. Scroll down to find a new field called Default 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. I checked several of your other pages and do not see any with narrower header images like on that page, so I've limited this change to only that specific page by using its unique page id CSS class from the opening body html tag. You can upload an image to be your cover by clicking on the Select Media or Upload buttons. You have to call the header too. such as page.php, single.php, archive.php and so on. 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! But what if the featured images arent showing on the blog page? Its also possible to generate featured images based on post authors, tags, and post types. Be sure to Save the settings after youre done. WordPress offers several ways to list your blog posts elsewhere on a website, yet sometimes you have to configure the right settings to ensure they show up properly. The true advantage of a plugin like OG is that it doesnt require any configuration after the installation. Another way to use featured images is by listing a feed of your blog posts on your sites homepage (or any other page). In the Astra theme, launch the edit screen of your desired page and expand the Astra settings tab from the bottom right corner. 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. The Auto Featured Image plugin provides a unique option for fixing featured image problems. Remove the selected image as the featured image. Insert any content you want for the blog post. To call the header.php file, you should use get_header (); at the top of almost every template (Almost!) Getting back to the featured images, its not set by default to show featured images from blog posts when you put the Latest Posts block into a page. Considering you should be uploading high-resolution images as featured images, it makes sense to automate optimization. A column called Featured Image is supposed to appear after the Post Date. Theres a field for choosing where the image should come from when sharing a post or page to social media. Three image sizes often get configured on WordPress: Thumbnail, Medium, and Large. Post thumbnails are what featured images used to be called in WordPress from its early days. Fix the Plugins or Themes 3. 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. If a featured image isnt assigned to a post, it will show a blank space in its block instead. Here, you need to fill in fields like the Description Length, Homepage Description, and Default Description. has_header_image (): bool. The image is showing on pages that use a different header. If the problem isnt fixed, proceed to deactivate all plugins. It looks like only two of the images selected are actually stored as featured images in our posts. 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. Here, select the Facebook tab. Check to see if you can now upload and see your featured images. However, if you right click this rectangle and choose 'View image', the correct image is shown. The next step is to Add a Filter, which essentially asks you to choose the images you want to replace. Plugins, although rather useful for building a WordPress website, occasionally have questionable coding. A lot! The max height shouldnt matter as much since your featured images shouldnt be that tall. Once on the Developers Debug Tool page, find the Sharing Debugger tab, and paste the URL in question. Uploading massive files to your WordPress site causes performance issues and could put too much of a load on your hosting servers. This allows you to paste in up to 50 URLs and run the tool so that Facebook scraps their metadata properly again. To begin the process of bulk editing featured images, scroll down on the page. Do you have to have a certain plugin to have it 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. For example, you may rather have one featured image appear in the sidebar, but a different one shows up when the post is in a list on your homepage. It's only on select pages though (front page and blog page). Some non-WordPress image editing tools you can use are GIMP, Photoshop Express, and Paint.NET. However, only the front-page.php file shows the image. It tells WordPress to display the featured image in the templates exact location. As long as youre not making the image too small, you should still be able to offer a beautiful featured image. Therefore, I am trying to use the custom field name "header_image with the value using the the correct url. Again, Kinsta bans many Open Graph plugins, including this one. At some point, you may realize that several old posts could use new featured images. The only time youll find that its okay to share an image on your website for free is when you pull from a website like Pexels or Unsplash. Itll avoid causing problems with your own server. Therefore, we recommend checking your themes support for featured images. 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. The theme doesnt allow for featured images, or you have to turn them on through the theme settings. After each reinstallation, you should check to see if the featured images are still functioning and showing up properly. It also helps break up the monotony of text and adds life to your content. Best regards . The big question is whether or not the featured image for a post gets rendered properly when you share a link on Facebook. The Ixion theme supports featured images on single Posts and Pages. You can go to Post > All Posts to review your list of articles. The great part about this plugin is that it doesnt replace the featured images you already have on your posts. But thats fine, as we all start learning somewhere. 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. The Quick Featured Images plugin handles bulk editing for featured images along with a myriad of other functionalities, like adding a default featured image for all posts or setting presets for default featured images. Check out our guide here to learn more about the Facebook Debug Tool. 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. For instance, all of your featured images could have a black and white filter. Note: Youre always able to come in here and change the static homepage. 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. 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. Go to its Post Settings panel and open the Featured Image section. 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. You can search for the Cover block or scroll through the library to find it. Your theme layout does not support featured images. Explore our plans or talk to sales to find your best fit. Or if the featured image fails to show up on social media, but its working fine on your website. The first is going about it manually, clicking on each post and page on your site and collecting the URLs into a document. 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. You can see that two of my posts now have a new featured image, and theyre the same images. 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. This is a frustrating one because its a simple setting in the dashboard that tells WordPress to either show the Featured Image section or not. Thats because having four columns will require having much more space (and smaller images) than a block with two or three columns. All you have to do is paste the post link into the Facebook status field (you can also do this on personal or business pages) and wait to see if the post content gets rendered, along with the featured image. After youve located the potential culprit, turn off lazy loading, clear your site cache, and check if that resolves any issues you may have with your featured images. Kinsta and WordPress are registered trademarks. Therefore, you may have to use custom code to customize the featured images appearance. You also have the option to Save the crop, even though its done for you. Unfortunately, you discover that the featured image doesnt look quite as nice as you had hoped it would. For instance, you might consider including things like the Site Name and Post Title but not having the URL. For more details, you can see our guide on how to add header and footer code in WordPress. After that, feel free to drag it up or down on the homepage so that its located in the proper position. What if the featured image isnt the right one, or you do not see an image at all? You can still maintain the quality of an image after compression, cropping, or resizing. 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. You can upload a featured image to every post and page. 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. Scroll down to the area called Image Settings. It is then presented as the primary image for that website item whenever the article gets shared on social media and other sites. This should get you closer to the optimal featured image size for your theme. 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.