Thematic Header Image The Right Way!

NULL

I have been working with the Thematic theme for wordpress for about a week and love it. After reading many ways to add a header image i found most methods lacking. Some replaced the entire header with a single image, others just removed the blog title and description, ie. also removing the <h1>  tags from the homepage.

This method is by far the best method. It keeps all the SEO optimized Thematic code and it simply adds an empty span to the header and styles it.

Add this to your Child Themes Functions.php

// Add Header Image // Add Header Image
function thematic_logo_image() {
 echo '<a href="'.get_bloginfo('url').'" title="'.get_bloginfo('name').'" ><span id="header-image"></span></a>';
}
add_action('thematic_header','thematic_logo_image',6);

Add this to your Child Themes style.css and make any changes necessary.

#branding {
 height: 187px; /* Change this to your images height */
 padding: 0;
 position:relative;
}
#header-image {
 background:url("images/header.jpg") no-repeat transparent; /* Change This to Your Image */
 height:100%;
 width:100%;
 position:absolute;
 cursor: pointer;
 top:0;
}

23 Comments

  1. Justin Madigan on November 7, 2010 at 7:58 am

    Can you tell me where exactly in the functions.php file you are placing the first bit of code and where in the style.css you are placing this second bit? When I use this method I get an error message (can be viewed at: http://www.digitallydesignedsolutions.com/wptest/ . I am working with the Thematic Power Blog child theme but have had the same results with the standard thematic child theme. Thank you for any help you are able to provide and thank you for this tutorial.

    – Justin

    • danieliser on November 7, 2010 at 1:16 pm

      @Justin – When i go to that link im getting a 404 error (page not found) I havent tested it yet with the PowerBlog but have with Thematic and Thematic Feature Theme. The code should work anywhere in your child themes Funcitons.php and styles.css. If you are getting the 404s when adding this then there is something majorly wrong, more than likely with your wp installation or a plugin. If you need additional help you can email me at danieliser at wizardinternetsolutions dot com

  2. Elizabeth on December 14, 2010 at 4:18 am

    Hi there,

    Thanks for this info. I also love Thematic theme. It is very clean and just perfect for any blog, website.

    However, I tried to put the logo on the right hand side of my website next to the title (I want to keep the name of the blog). Do you know what is the code for it? I only managed to put it on the left hand side above the title, but it does not look good….:(

    I also tried to widen the page as I removed the sidebar. On the Internet I found only the code to widen the home page. I would appreciate if you could tell me what is the code to widen all the pages of the blog.

    Thank you in advance.

    • danieliser on December 14, 2010 at 4:08 pm

      If you are trying to make the logo take up only a portion of the header try this

      #header-image {
      background:url("images/header.jpg") no-repeat transparent; /* Change This to Your Image */
      height:100%;
      width:50%; /* This can be fixed width such as 100px or fluid with a %age */
      position:absolute;
      cursor: pointer;
      top:0;
      right:0;
      }

      as for the page width you are looking for the #container and #content css. If you want all pages full width make the width of #content the same as #container. Try using firefox browser with the firebug addon you will be able to figure out which css you need to change visually.

  3. Robert Wagner on January 5, 2011 at 11:28 am

    Hello Danieliser,

    Tried this technique that you posted, but it does not do anything save move the blog title/description up to the very top of the web browser with no padding space above it.

    Could it be that the web server (Apache) is caching the CSS or something?

    Just getting started with theme customisation… thanks for being patient !

    Cheers,

    Robert in Vermont

    • danieliser on January 5, 2011 at 11:46 am

      Do you have it in a test environment that i can see in a browser? Did you make the changes to both your functions.php and styles.css?

      • Robert Wagner on January 5, 2011 at 4:04 pm

        Yes sir… http://2ltmorrisseau.com

        Made the changes to both functions.php and styles.css. If you’d like me to create you an account on the site, no prob.

        Changed both style.css and functions.php. Funny that, I also uncommented the sample function which is supposed to add the ‘home’ link to the menu… that did not take effect either. So it looks like either add_action & add_filter did not take effect, or functions.php were cached on the server side (I cleared out my browser cache.)

        I do not have ftp or shell access to the server to investigate this… am trying to help out an old friend. But if needed I can find out how to get in touch with the hosting company.

        Thematic is pretty cool, I’m planning to switch to it on my own site, which uses the default twenty-ten.

        Cheers,
        Robert

        • danieliser on January 5, 2011 at 4:19 pm

          Yea email me a user account at danieliser at wizardinternetsolutions.com. After looking at the pages source im not seeing the code that the first block of code above is supposed to create.

          • Robert Wagner on January 5, 2011 at 5:04 pm

            Done!

            Please let me know if you did not get the eMail that WP generated to you, I’ll eMail you the pw directly.



    • danieliser on January 5, 2011 at 3:47 pm

      If it is a cacheing issue you can use firefox and the firebug plugin to check the cache and/or force it to refresh.

  4. Rachel on February 18, 2011 at 10:30 am

    Maybe I am missing something (and I am definitely a newbie) but is there a way to make the header image an active link through the functions.php or style.css? I am using the child theme in buddymatic.

    • danieliser on February 18, 2011 at 12:20 pm

      you could try something like

      <code>// Add Header Image // Add Header Image
      function thematic_logo_image() {
      echo '<a href=”'.get_bloginfo('url').'” rel=”nofollow”><span id="header-image '. (is_home() ? 'header-image-active' : '') .'"></span>';
      }
      add_action('thematic_header','thematic_logo_image',6);</code>

      i added (is_home() ? 'header-image-active' : '') to the middle to add an extra class if the page is the home page which is what the header links to. Then you simply need to style it in style.css

  5. Callista on March 9, 2011 at 11:53 pm

    The image is there, it’s clickable, it works great, thanks! However, my blog-title text is still visible. It’s just been moved up to the top left corner underneath my image. The span is there, under the #blog-title div. I don’t think it’s doing what it’s supposed to do for some reason. I’m using firefox, and running on my local computer using MAMP. I am doing this on a fresh install of the latest versions of WP and Thematic, in a child theme, and copied and pasted just as you said above. If I use #blog-title {display:none;} will the title be hidden from search engines as well? I’m just really stumped, since I don’t know php very well. Thanks!! (Since it’s not hosted on a server you would have access to, I can send you a screenshot of what it looks like and the firebug code if you’d like.)

    • danieliser on March 10, 2011 at 12:42 am

      If i understand you correctly the span is there which it should be. Question is can you see it through your image, above your image or is it just hidden behind it? If you are trying to use pngs with transparency you will have this issue but you can simply build a multi layer replacement similar to my sand box here. Check the code on this. sandbox . wizardinternetsolutions . com. You can create a div inside a div. outer div has a background/color you want behind your png. inner contains your png. You can essentialy make anything you want inside that outer box. You can see in my sandbox that i added another div on the right with the image slider. If that isnt the answer your looking for send me the screens and code 2 danieliser @ wizardinternetsolutions . com

  6. Callista on March 10, 2011 at 10:26 pm

    Well, I managed to create a div but when I made the background white, it got ignored. However, I did find a solution that didn’t involve creating a div at all: I modified the CSS above slightly as follows:

    #header-image {
    background:url(“images/my-image.png”) no-repeat #ffffff; /* Change This to Your Image */
    height:100%;
    width:100%;
    position:absolute;
    cursor: pointer;
    top:0;
    }

    Instead of “transparent” I added #ffffff – presto, everything as I want it. Thanks sooo much!!
    Callista

    • Callista on March 10, 2011 at 6:40 pm

      Hmm, I guess that doesn't really work either. My tagline is now hidden under the white. Ok, I guess I'm back to trying to figure out how to make that div work. Btw, my other posts are not showing up here…

    • danieliser on March 10, 2011 at 8:21 pm

      Are you using a transparent image? The Blog title and tagline should still be displayed with this method. That is the point.. If the browsers doesnt load the image for whatever reason the text can still be seen to tell what the blog is and is also read by search engines. As for display:none, its frowned upon. This method is a true image replacement for text. If your stuck I can take a look at it if you want to zip the theme and send it.

  7. Jeff on January 4, 2012 at 7:48 pm

    Hi Dan, Thanks very much for this post. I used it to put a header up on the following website –

    carriagebeforemarriage.com

    The header shows up in every browser I’ve tested it on, except IE8. Any thoughts/guidance would be much appreciated…

    Thanks!

    • danieliser on January 19, 2012 at 11:40 am

      might want to add !important before the ; for your #header-image background css. IE8 seems to not be getting all the styles.

  8. bucur on April 30, 2012 at 3:36 pm

    in funtions.php :))

    Salvat

    Child Theme Options
    <form name="theform" method="post" enctype="multipart/form-data" action="”>

    Use logo image instead of blog title and description:
    <input type="checkbox" name="enabled" value="1" />

    Current image:
    <img src="” />

    Logo image to use (gif/ jpeg/ png):
    (you must have writing permissions for your uploads directory)

    <?php
    }

    // ———- "Child Theme Options" menu ENDS HERE

    // ———- Adding the logo image to the header STARTS HERE

    if(get_option('child_theme_logo_enabled')){
    function remove_thematic_blogtitle() {
    remove_action('thematic_header','thematic_blogtitle',3);
    }
    add_action('init','remove_thematic_blogtitle');

    function remove_thematic_blogdescription() {
    remove_action('thematic_header','thematic_blogdescription',5);
    }
    add_action('init','remove_thematic_blogdescription');

    function thematic_logo_image() {
    echo '‘;
    }
    add_action(‘thematic_header’,’thematic_logo_image’,4);
    }
    //
    ?>

    • danieliser on May 1, 2012 at 4:43 pm

      Is this to add upload field in the admin panel? VN.

  9. parasmani on August 30, 2012 at 2:35 am

    I implemented as written and it is working fine for me. Thanks for the article.

  10. Luke on December 19, 2012 at 2:51 pm

    This little hook works like a charm!

    but I must be looking past something…

    can anyone advise on how I now remove the <div id= "blog-title"…
    in order to populate the bloginfo I have to enter something in that box on the admin side. When I do this it automatically populates the blog-title div tag and that content still renders.
    does this makes sense?

Leave a Reply