Custom header, one per page

  • Author
  • #1666174

    I have used Skylark to build a blog with the view to making it look like a website. I have 6 pages: landing page, our approach, our events, our team, case studies & contact. I have a custom randomised header randomising 6 images. What I would prefer to do, is to assign one image per page, i.e., a specific image for the landing page, a specific one for the “our approach” page etc. I do not want to use featured images below the header.
    I have got the CSS upgrade.
    Does anyone know what the code would be needed in order to achieve the above? If you do, please give very specific instructions – I am very new to this.
    Thank you!!

    The blog I need help with is


    You can do this with CSS. The following is an example for your “Our Approach” page. I looked at the source code for that page (view source) and looked in the opening body selector and found that the page ID body class for that page was page-id-42. The following is then the CSS to hide the existing header image and show a different one on that page. You can use this as a guide for creating the other code for the other pages. You will upload your images to your media library, get the URLs of those images and the put them into the code where it says, URL_OF_IMAGE between the quote marks.

    .page-id-42 .header-image img {
        visibility: hidden;
    .page-id-42 .header-image {
        background: url("URL_OF_IMAGE") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
        background-size: contain;

    Thanks for this – that’s great for the “our approach” page, and I have added that code and it works. But how do I identify “the opening body selector” for the other pages? Assuming that all the numbers down the side of the page when I right click to “view page source” are page id numbers that you refer to above? I opened the “view source page” and blindly looked – sorry, I really don’t know where to start!!


    You have to go to that page in your browser and either do a “view source code” from the view menu on your browser, or use the web inspector built into your browser. The opening body selector will start something like this:

    <body class="page page-id-39 page-template...

    The specific page body class would be page-id-39 in this case, and since it is a CSS “class” it would be proceeded by a period ( . ) in the CSS, as I did in the example above. You should be able to use the code I have above for each different page and simply replace the number (42) with the one you find in the opening body tag and then put in the URL for that spacific page, as you did for your Approach page.


    That’s great, thanks so much!
    BTW, is there a way of making the random header change every couple of seconds on the same page, rather than changing every time you click on a different page?


    No, sorry. There are some themes that will show featured images from posts at the top of the page, or nearly at the top of the page though. You might want to look at some of those:

The topic ‘Custom header, one per page’ is closed to new replies.