Different Header Photos for Site Pages

  • Unknown's avatar
    aprilcutterback · Member ·

    I would like to put a different header photo on each of the pages on my site, how can this be done?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    timethief · Member ·

    Here is the link to the detailed theme description page http://theme.wordpress.com/themes/twentytwelve/

    Featured Header Images
    Note: This feature only works with themes that allow custom header images and have featured header images enabled.
    http://theme.wordpress.com/themes/features/featured-image-header/

    Featured Images

  • Unknown's avatar
    designsimply · Member ·

    Different themes handle header images in different ways.

    The Twenty Ten and Twenty Eleven themes both have a feature (which timethief mentioned) that let’s you set a custom header image on pages using the featured image option. However, the Twenty Twelve theme (your current theme doesn’t have that option).

    In a theme like Twenty Twelve that doesn’t have the custom featured header image option built in, you can set a different header image for different pages using custom CSS. Doing it that way is a bit manual, but it can work. I will show you an example.

    Let’s look at your About Us page as an example:
    http://unlimited-thought.com/about-us-2/

    On that page, you could use the following CSS to add a custom header image on a page as long as the theme was set to Twenty Twelve:

    .page-id-34 #masthead > a img {
	display: none;
}

.page-id-34 #masthead > a  {
	display: block;
	background: url(http://s.wordpress.org/about/images/wordpress-logo-notext-bg.png) center repeat-x;
	width: 100%;
	height: 145px;
}

    I used the WordPress logo as the image in this example, but you can use your own image if you upload your image to the media library in your blog dashboard, then replace the url() value in the example above with your image link, then update the width and height to match the width and height of your uploaded image (or you can keep the width 100% if the image is small and you want to repeat it across the page).

    The “.page-id-34” part of the CSS example is the unique class name that was given to the About Us page when you created it. To find the unique class name for other pages, you would need to look at the body tag in the page source using your browser tools.

    As you can see, setting different page images can get a bit complicated depending on which theme you are using. If you used a theme that has featured image headers built in as an option already, then you wouldn’t have to mess with so much CSS for each page you want to change that on. If the CSS looks daunting to you, you might want to consider switching to the Twenty Ten or Twenty Eleven theme. Or if you’re feeling adventurous and want to give the CSS a shot in Twenty Twelve, try adding the example above to your Appearance > Customize > CSS editor, and reply back here with any questions you have if you run into any trouble.

  • The topic ‘Different Header Photos for Site Pages’ is closed to new replies.