Change the header image for my blog

[Patti]

One more thing: I have my left sidebar widget set up to post my latest recipes. Do either of you know a way for it to *not* show my latest blog posts?

[scrambler]

@patti,

If you want all your single post pages to have the same header image as your blog page, I have a simple solution for you.

Copy Paste as is the CSS Rules below in the theme Global Custom CSS Rule box located in

Customizing ▸ Custom CSS > Global Custom CSS > Global Custom CSS Box

.single .wvrx-header-image {opacity:0;}
.single #header-image {
background-image:url(https://lowcarbandketomeals.com/wp-content/uploads/2021/01/Low-Carb-Keto-Lifestyle-Blog.png);
background-size:contain;}

This will render the existing image transparent and add the good one as a background of the header on all single post pages.

Post back with the rule in place if there is an issue

 

[Patti]

Thanks @scrambler! It worked for the Blog articles. But it also changed the header for the recipes. Which is not what I wanted to happen. How can I manipulate the CSS so that it only changes out the header for my blog posts and not my recipes?

[scrambler]

OK, forget that then, remove the CSS as there is no way to differentiate post category but I may have something else.

Do you have the Xtreme PLUS plugin?

 

[scrambler]

If you have the plus plugin, In your POST editing page, do the following
In Weaver Xtreme Options for this POST
In the Xtreme Plus TAB
In the Header replacement HTML(*Plus) BOX copy paste the HTML below

<img width="1024" height="175" src="https://lowcarbandketomeals.com/wp-content/uploads/2021/01/Low-Carb-Keto-Lifestyle-Blog.png" class="wvrx-header-image wp-post-image" alt="Low Carb and Keto Meals" loading="lazy" srcset="https://lowcarbandketomeals.com/wp-content/uploads/2021/01/Low-Carb-Keto-Lifestyle-Blog.png 1024w, https://lowcarbandketomeals.com/wp-content/uploads/2021/01/Low-Carb-Keto-Lifestyle-Blog-300x51.png 300w, https://lowcarbandketomeals.com/wp-content/uploads/2021/01/Low-Carb-Keto-Lifestyle-Blog-768x131.png 768w" sizes="(max-width: 1024px) 100vw, 1024px">

If there is a problem leave it in place and post back with a link to the POST page you added that to

[Patti]

@scrambler That worked great! Thanks! Here’s the blog post I added the Xtreme Plus HTML to: https://lowcarbandketomeals.com/what-is-the-keto-diet/

Am I going to have to do that with each and every blog post that I write?

[scrambler]

Adding something to each post is inevitable unfortunately.

But there is an alternate solution that would make the piece to add smaller, by using the Box called Per page Body Class located in the POST editing page > Weaver Xtreme Options for this POST>  Xtreme Plus TAB.

You could add a class in there like for example

myblog

Then you could use a modified version of the rules I gave you in my post #67306 below

.myblog .wvrx-header-image {opacity:0;}
.myblog #header-image {
background-image:url(https://lowcarbandketomeals.com/wp-content/uploads/2021/01/Low-Carb-Keto-Lifestyle-Blog.png);
background-size:contain;}

If you use that method, obviously remove the HTML.

But the result is less efficient than the solution I gave you last, as the two header images are being loaded on the page while one is made transparent.

And typing the class on each post, or copy pasting the HTML is not much of a time difference…

Regarding the HTML I gave you, I forgot to include the Link to the Home page, so If you stay with the HTML solution (the best), Change it to the following so the image links to the home page.

<a href="https://lowcarbandketomeals.com/" rel="home"><img width="1024" height="175" src="https://lowcarbandketomeals.com/wp-content/uploads/2021/01/Low-Carb-Keto-Lifestyle-Blog.png" class="wvrx-header-image wp-post-image" alt="Low Carb and Keto Meals" loading="lazy" srcset="https://lowcarbandketomeals.com/wp-content/uploads/2021/01/Low-Carb-Keto-Lifestyle-Blog.png 1024w, https://lowcarbandketomeals.com/wp-content/uploads/2021/01/Low-Carb-Keto-Lifestyle-Blog-300x51.png 300w, https://lowcarbandketomeals.com/wp-content/uploads/2021/01/Low-Carb-Keto-Lifestyle-Blog-768x131.png 768w" sizes="(max-width: 1024px) 100vw, 1024px"> </a>

 

 

[Patti]

@scrambler I think I’ll stick with the HTML insertion for Xtreme Plus with each & every blog post. At least until I get tired of inserting it! 🙂

Neither one of you have answered my other question, though. On the left sidebar is a widget that is supposed to show the five most recent recipes. But it is also showing my “Blog” posts when I do not want it to.

If you look at my site at https://lowcarbandketomeals.com/ you will see the second widget on the left-hand sidebar. The last line under “Newest Posts” is a blog post. That is what I do not want on that list. Plus any additional blog posts that I post. Is there something I can do to have it *not* show my blog posts there?

[scrambler]

What widget are you using to show posts in there?

If you are using the WordPress Recent posts widget, it cannot differentiate anything, it just shows the latest posts.

You can install Weaver Show posts Plugin. that will allow you to define more elaborate filters to select just the posts you want, then you can use the show posts widget to display the posts as selected by the filter you create.

Install the plugin, read the help, and experiment with it. In the filter, you will be able to exclude the posts from your blog category so they do not show up.

[Patti]

Thanks @scrambler! I installed that plugin but do not have enough time to mess around with it tonight. Will see if I can make it work tomorrow morning.

[Patti]

@scrambler Once I messed around with the Weaver Show Posts plugin I was able to make it work out perfectly! It now shows my most “Recent Recipes” as well as my most “Recent Blog Posts” on my left-hand sidebar! Thanks bunches! I think I should be good to go now! I will stop bugging ya’ll so both of you can get back to helping others. 🙂

[Author]

Posts