WordPress.org

Ready to get started?Download WordPress

Forums

[closed] Twenty Twelve - Using a Custom Header Image (10 posts)

  1. crawfocw
    Member
    Posted 1 year ago #

    Hi,

    I am using Twenty Twelve theme, and am trying to use a different custom header image on each page. I've seen some tutorials online indicating if you set a featured image that will act as a custom header, but it doesn't seem to work this way in twenty twelve.

    Any tips?

  2. Jose Castaneda
    Member
    Posted 1 year ago #

    Are you wanting to use specific images for specific pages or are you wanting to do almost a random setup deal?

  3. Hristo SiteGround
    Member
    Posted 1 year ago #

    I have done this for one of my sites. I am not sure it's the easiest way to do that but it's working for sure :)

    You can use a custom field to do that. Just add a custom field named "customheader" for example. Then add the full URL to your image as its value.

    Now, you need to modify your theme a bit. Open the header.php file and find this line:

    <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>

    Right below add:

    <?php if (get_post_meta($post->ID, 'customheader', true)): ?>
    <img src="<?php echo get_post_meta($post->ID, 'customheader', true); ?>" alt=""/>
    <?php endif; ?>

    This piece of code will check if there is a customheader custom field set for this post and render it under your site description. If there is no such field set, nothing will be added.

    Hope that works for you :)

  4. RossB
    Member
    Posted 1 year ago #

    Hi Hristo SiteGround

    I have to say, your method for adding a custom header to a specific page is ingenious. I've struggled to find a way to do this for weeks, and nothing comes close to your simple solution. THANK YOU!

    Just one question, pls. How do you apply CSS styling to a header created your way? I'm trying to center the header and can't find a way that works. Any clues, please?

    BTW, Support Admin, I know I should create my own thread to ask this question, but this is the only place I've come across Hristo SiteGround's custom header placement method, so thought in this case it might be best to post here. But of course, I'll re-post if this is considered a breach of etiquette.

    Cheers!
    Ross

  5. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    I know I should create my own thread to ask this question, but this is the only place I've come across Hristo SiteGround's custom header placement method, so thought in this case it might be best to post here.

    a backlink to the post (which you can get from the # sign at the end of the line with the posts age, in the post info on the left) would do the same.

    more important - this topic is marked as resolved and does not attract that much attention as a new topic;
    also without a link to your site, formatting help is quite difficult to provide.

    let's hope, that @Hristo SiteGround will find your question :-)

  6. Hristo SiteGround
    Member
    Posted 1 year ago #

    Since I didn' find your new thread I will answer here. You need to add a div that surrounds the image so you can have control over it. Something like that:

    <?php if (get_post_meta($post->ID, 'customheader', true)): ?>
    <div class="headerimg"><img src="<?php echo get_post_meta($post->ID, 'customheader', true); ?>" alt=""/></div>
    <?php endif; ?>

    Then, simply style that div and the image in it the way you want. For example, if you want to center a 960px wide header, you can do it like that:

    .headerimg {width:960px; margin:0 auto;}

    If you want to have headers with differnt widths, you need to add IDs. The best way to do that is to add the post ID to make them unique:

    <?php if (get_post_meta($post->ID, 'customheader', true)): ?>
    <div class="headerimg" id="header-<?php get_the_ID() ?>"><img src="<?php echo get_post_meta($post->ID, 'customheader', true); ?>" alt=""/></div>
    <?php endif; ?>

    Then you'll be able to add css rules like this for example:

    #header-3213 {width:200px}

  7. RossB
    Member
    Posted 1 year ago #

    Thanks a lot, Hristo SiteGround! So glad you saw my post and your advice is much appreciated.

    I didn't know about the # backlinks, alchymyth. Will certainly use them in future to start a new post in a situation like this. Thanks for pointing this out.

    Cheers!
    Ross

  8. strasse
    Member
    Posted 9 months ago #

    Greats solution, Hristo SiteGround

    I still have a small problem, when I use this code, the page where my blogs are on does not show a header (even when customheader is defined)

    any solutions?

  9. Andrew
    Forum Moderator
    Posted 9 months ago #

    The conversion is long over, can you create a thread to discuss that?
    http://wordpress.org/support/theme/twentytwelve#postform

  10. leejosepho
    Member
    Posted 9 months ago #

    I didn't know about the # backlinks, alchymyth. Will certainly use them in future to start a new post in a situation like this. Thanks for pointing this out.

    Same here. Many thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.