Edit Header on individual pages

Is it possible to customize the header image that appears on each page? I know it is possible to change it for all of the pages but can each page display a different image? Also, is there a spot to put text/code in there?

Thanks

Thanks for the reply. I added that to the CSS and didn’t see any change. After a further look, it looks like that code is in reference to the contact widget. We were referencing the image that appears in the header of every page other than the front page. The default/demo image is the guy on a couch holding a drink. Can each page be a different header image?

Sorry for the confusion.

Hello there,

I am sorry for posting incorrect reply. That was aimed to other topic.

To set a different image on your specific page, edit page, in the Page Attributes box, select either “Featured header image” or “Featured header image - Wide” template, and then upload your featured image.

To put a text on your specific page’s header image, try doing these steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

(function($){
      
    "use strict";

    $.fn.textToHeaderImage = function(text){

      var headerText = '<div class="header-text">'+
                       '<div class="header-text-inner">'+
                       '<h2>'+text+'</h2>'+
                       '</div>'+
                       '</div>';

      this.find('.header-image').append(headerText);
      
    };

    $('.page-id-2').textToHeaderImage('My Text 1');
    $('.page-id-3').textToHeaderImage('My Text 2');

})(jQuery);

You’ll need to replace these lines:


$('.page-id-2').textToHeaderImage('My Text 1');
$('.page-id-3').textToHeaderImage('My Text 2');

which add text “My Text 1” on page which the ID is 2, and add “My Text 2” on page which the ID is 3.

To find the page ID, while editing a page, see your web browser’s address bar which usually displays an URL like this:


yoursite.com/wp-admin/post.php?post=2&action=edit

  1. Update

  2. To style the text on header image, add this CSS code to Appearance > Customize > Additional CSS.


.header-text{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 4;
  width: 100%;
  height: 100%;
  display: table;
}

.header-text-inner{
  display: table-cell;
  vertical-align: middle;
}

.header-text-inner h2{
 color: #ff0000; 
}  

Regards,
Kharis

Perfect. Worked Great. Thanks!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hi!
It would be the same to add a sidebar in only one page? (the one with woocommerce on it).

Regards!

Hello Eduardo,

I am sorry, I don’t get your point clearly. Since this topic has been marked as resolved, would you please create your own topic here and add more details to help me understand it better?

Regards,
Kharis

Sure, no problem :slight_smile:

Hi Kharis,
I’m using the Sydney theme, however, I couldn’t find “Featured header image” or “Featured header image – Wide” in the Template selection of Page Attributes box. It only has selection for “Default Template”, “Front Page” or “Full Width”. In the Featured Image box, I set the image, but nothing happens on the webpage. Any advise? Thank you for your support.

Cheers,
Will

Hi Will,

That’s only available in the pro version. You might consider to upgrade?

Regards,
Kharis

Hey, I have the pro version but don’t seem to have these templates as well. What do I do?

Hello there,

Are you running the latest version? If want me to inspect it directly from your site admin area, you can share the working login credentials to my email at kharisblank@gmail.com. Mention the link to this topic in your email body to signal your coming as a followup from the support forum talk.

Regards,
Kharis

Hello @aviv.by,

I’ve replied your email. Let me know if you haven’t yet received it.

Regards,
Kharis

Hello!

I, too, want different header graphics for each page. I followed this post, and your guidance was excellent.

The challenge I have is that I don’t want the page title showing. Prior to changing the template, the page was set at FRONT PAGE, therefore hiding the page title.

Now that I changed the page template to FEATURED IMAGE-WIDE, the page title reappeared.

Is there a way to keep the page template at FEATURED IMAGE-WIDE, and NOT have the page title appear?

Thanks! Bo

Hello there,

You could hide specific page’s title with this simple CSS code:

.page-id-989 .entry-header {  
  display: none;  
}

Replace 989 with the ID number of your page. You can get it with this plugin: https://wordpress.org/plugins/reveal-ids-for-wp-admin-25/

Regards,
Kharis

Thanks, Kharis.

I have tried the Simple CSS code plugin, and it is not working.

I am sure I have the correct page ID (1362).

I went into the plugin FAQ and the FAQ says:

There are several reasons this could be happening:

  • Your CSS is targeting the wrong selector.
  • Your CSS selectors aren’t specific enough.

Please check your CSS at the [W3C CSS Validation Service], which I did and the code is fine.

I have tried this plugin with some other solutions offered in these posts, and could never get it to work.

I also tried putting the code in the Sydney Pro and this didn’t work either.

Do you have any other ways to go about this?

Thanks again, Bo

Do you have a link to that page to share here?

Please check if site caching applies. You should flush it whenever extra code added.

https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

Regards,
Kharis

You/re wonderful. I flushed the cache and it worked.

I will now flush each time.

Thanks much, Kharis.

Bo

Great!

You’re welcome! Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis