kristarella.blog

Happiness Engineer at Automattic, lover of knitting, crochet, sci-fi and more

You are here: Home / Design / Graphics / Page specific headers in Thesis

Page specific headers in Thesis

by

I’ve done several posts about Thesis headers before: Thesis full-width headers, Full-width headers in Thesis 1.5 and CSS Custom Headers.

All of those lead you in the same general direction: a single custom header for your blog. I recently got asked for step-by-step instructions on how to specify different headers on specific pages. So, I’m going to show you two ways to achieve that: CSS image replacement and inline header images.

CSS image replacement

The simplest way to customise your header (in my opinion) is to use a background image. There are several permutations of the CSS [ref]If you want more info on basic CSS elements and syntax, have a look at the Tizag CSS tutorial[/ref] that will achieve such a thing, but the bare minimum would be something like the following.

.custom #header {background:url(images/header.jpg) center top no-repeat; height:150px; padding:0 1.1em;}
	.custom #header #logo a {display:block; height:150px; text-indent:-9999px;}

If header.jpg is in your custom/images folder and you’ve unchecked the option to display the tagline on the Thesis Options page, the above CSS will give you a clickable header that looks like…

Header image using CSS replacement
Header image using CSS replacement

This will be the header for every page that we don’t specifically change.

Page specific body class

Thesis provides body classes for all the pages in your WordPress site. You can also provide your own body class to any page or post by filling in the relevant field when writing a post. On top of all that you can filter the body class via a custom function to add a body class to any page accessible via conditional tags.

Source code showing page specific body class in Thesis
Source code showing page specific body class in Thesis
Add your own body class to a Thesis page or post
Add your own body class to a Thesis page or post
Page specific header

Using the page specific body classes, we can give individual pages their own CSS header. All you need to do is use .page-name instead of .custom.

Assuming the new image is the same height as the default one, the CSS to give your About page a unique header is…

.about #header {background:url(images/header_about.jpg) center top no-repeat;}
Unique header on the About page in Thesis
Unique header on the About page in Thesis
Adding body classes

You can keep adding unique headers across your site to your heart’s content… If the page you want to target doesn’t already have a unique body class you can give it one with the following function.

function custom_body_classes($classes) {
if (is_home())
	$classes[] = "home";
if (is_category())
	$classes[] = "category";

	return $classes;
}
add_filter('thesis_body_classes','custom_body_classes');

This function (placed in custom_functions.php) specifies the pages to target using conditional tags, and then adds the desired classes to an array called $classes, which is filtered back through the Thesis function that outputs the body classes [ref]For more about PHP syntax and operations check out the Tizag PHP tutorial[/ref]. Using this we could give the same header to all the category archive pages (with is_category()), or all the posts in a specific category (with in_category('Fancy Headers') and so on.

CSS summary

All of the CSS put together might look like the following.

.custom #header {background:url(images/header.jpg) center top no-repeat; height:150px; padding:0 1.1em;}
.about #header {background:url(images/header_about.jpg) center top no-repeat;}
.archives #header {background:url(images/header_archives.jpg) center top no-repeat;}
.category #header {background:url(images/header_category.jpg) center top no-repeat;}

	.custom #header #logo a {display:block; height:150px; text-indent:-9999px;}

Inline header images

Alternatively, we can use PHP and HTML instead of CSS to replace the contents of the header.

The whole function that goes in custom_functions.php is,

function custom_header() {
	// header for About page
	if ( is_page('About') )
		echo '<p id="logo"><a href="' . get_bloginfo('url') . '"><img src="' . THESIS_CUSTOM_FOLDER . '"/images/header_about.jpg" alt="' . get_bloginfo('name') . '" /></a></p>';

	// header for Photos category pages
	elseif ( is_category('Photos') )
		echo '<p id="logo"><a href="' . get_bloginfo('url') . '"><img src="' . THESIS_CUSTOM_FOLDER . '"/images/header_purple.jpg" alt="' . get_bloginfo('name') . '" /></a></p>';

	// header for posts in Tutorials Category
	elseif ( in_category('Tutorials') )
		echo '<p id="logo"><a href="' . get_bloginfo('url') . '"><img src="' . THESIS_CUSTOM_FOLDER . '"/images/header_tutorials.jpg" alt="' . get_bloginfo('name') . '" /></a></p>';

	// header for all other pages
	else
		echo '<p id="logo"><a href="' . get_bloginfo('url') . '"><img src="' . THESIS_CUSTOM_FOLDER . '"/images/header.jpg" alt="' . get_bloginfo('name') . '" /></a></p>';
}
remove_action('thesis_hook_header', 'thesis_default_header');
add_action('thesis_hook_header', 'custom_header');

Understanding the function

  • The only parts that need changing are the conditional tags and the image names.
  • There is a list of conditional tags in the WordPress Codex that can be used in this function.
  • In the HTML markup for the header I’ve included <p id="logo"> to match the default Thesis markup.
  • get_bloginfo('url') is PHP and fetches the URL of your blog.
  • get_bloginfo('name') is PHP and gets the name of your blog. This is important as the alternative text for the image; if the image doesn’t load for any reason the alternative text will be shown and since we wrapped the image with <p id="logo"> it will be formatted correctly as the blog title.
  • remove_action('thesis_hook_header', 'thesis_default_header'); removes the default markup of the Thesis header so that we can add our own content into the header.

If you want to insert this code using the Thesis OpenHook plugin, make sure that you convert the function properly and don’t forget <?php ?> tags around the conditional tags.

Best of luck and feel free to ask questions in the comments below!

Reader Interactions

Comments

  1. This is WONDERFUL. Thank you!
    Could you maybe share a note about how to size/create your own header to begin?

    Thank you again for your sharing.
    T

  3. Thank you for yet another wonderful tutorial. One of the things I really like about visiting here each day, is I not only find out something new I can do to my site, but how to do it. Very well done!

  4. Kris – You always do such a good job with your tutorials. I still go back and re-read some of your earlier one’s here and on the Thesis forums whenever I need a refresher. Another job well done!

    Chris

  5. Kris – another useful post. Thanks for sharing.

    I have problems in making my Thesis header image clickable (URL will be my blog url). Can you help me out? You can visit my blog – I am providing it in the website link.

    Thanks

  6. Ashwin — you need the CSS .custom #header #logo a {display:block;} (because by using a negative text indent there is no text to fill out the inline anchor element in the header).

  7. Kris – that worked well. Thanks for the tip.

    I follow a lot of your tutorials. Would be great if you can give me some feedback about my blog design using Thesis. Thanks for your time.

    Regards,
    Ashwin

  8. Hey Kristarella – Over the past week, I’ve read your blog posts on custom header so many times, I feel like we know each other.

    I’m waiting for the penny to drop via experimentation. Backing Tom up – creating the headers in Photoshop – is there any particular size I should be sticking to? I’m thinking a similar size and layout to surgarae’s header with the background all the way to the top.

    I’m using Firebug to see whats going on there but I’m stumbling around in the dark still. It will come.

    Thanks again so much for the time you have taken to write these posts.

    Mark

  9. Tom & Mark — Since users can make their Thesis site absolutely any size they want it’s impossible to say what size your image should be, except that Mark has the right idea with using Firebug.

    I have a video about using Firebug and you can also use Webkit Inspector if you’re in Safari or Chrome. By clicking on “Layout” in Firebug or “Computed Styles” in the Webkit Inspector you can determine how wide in pixels your header is. I think in a default install of Thesis the header is 927px wide plus 11px of padding on each side, so your header should be 949px wide.

    You can use whatever height you want. I used 150px, Sugarrae’s is 215px including the red line below it (although the image is slightly wider than the header actually is).

  10. Thanks for the prompt reply Kristarella,

    That video tutorial was off the ricta!

    I get it now – sorta. In firebug – I checked the layout tab, inspected my header (and sugarae’s – firebug is borderline creepy) and the layout told me exact sizes. No more use for the Measurit addon.

    My header area is 1664 x 189. Should I just create my photoshop logo that size. Or can I easily adjust the dimensions of my header area?

    Last question – is Sugarrea using a full width header? I notice her background appears on both sides of her logo. I like it.

    Promise I won’t hassle you any more. 🙂

    Mark

  13. Mark — glad the full-width video helped, but I’m not really sure about your first question. #header_area will be however big your browser is, so I would recommend a solid colour or a repeating image or texture for that. The main content part of your header with title etc needs to be the width of #header or smaller, otherwise people using smaller monitors won’t be able to see all of it.
    Hope that helps!

  14. When building a custom header for a thesis theme is the best size 900 by 150? Or is there another size that works better.

    Thanks

    Terry

  16. Kristarella,
    You are a genius. I have been struggling with this for 2 days. What a simple solution!

  17. Hi Kristella,

    Thaks for this. I have been pulling my hair out all day trying to customise my headers. Just a quick question. I have made my home page a static page and put my posts on my blog page. when i use your css route above and use .blog #header … it picks up the .customer #header. Do you have a suggestion on how i can fix this??

    Thanks
    Michael

  18. Michael — Every page will always have the “custom” class assigned to the body and certain pages will have additional classes assigned. .custom and .home always have the same importance because they are both only classes, so the only way to override a style on the same element is to put it after the other style in the style sheet. So you should put all your default custom styles first and then specialised page styles later in custom.css.

  20. Hi Kristella,

    First of all, your website is fantastic. I learned a lot from it.

    However, I had a question, which I’m sure is very simple for you to answer.

    Is there a way I can have my content container be white whereas my entire site background be the same color as my footer (#444444)? I have been struggling to figure this out for several hours now, but haven’t been able to find a solution.

    I hope you will be able to help me.

    Thanks in advance. – Anshoo

  21. I forgot to mention that, I have been successful in doing so with both Firefox and Chrome, but I haven’t been able to figure out how I can implement this with IE 6. Most of my user-base uses IE6.. 🙁

  23. Hi Kristarella, I played around nearly the entire day today and all of last night.. and was able to figure out the reason. I’m 99% done 🙂

    Just one question though, if you see the website, the border above the copyright stretches all the way across the screen (in FF). Is there a fix for that? IE is nearly done, too. GodHammer and DiyThemes helped me out a lot 🙂

    Thank you 🙂

  27. Hello Kristarella,
    I’m trying to add a page specific header within my site.
    I used the code for page specific header in my custom.css
    .test #header {background:url(images/VS1CROPR.jpg) center top no-repeat;}

    the image gets pulled, but it sits behind the default flash header for the rest of the site. Therefore you don’t see it because the flash header still runs on the page.
    If you reload the page you will see the page specific header for a split second. So it is there, but behind the default header.
    Do you know how I can fix this?
    Thank you!!!

  30. In ‘Inline header images’ section where you have ” . THESIS_CUSTOM_FOLDER . ” in the code, is that to be replaced with a path?

    I want to use this in Openhook since I already have it displaying rotating random images on pages, but I want to use a specific image on a few special pages. Trying this, I get the alt text – the site title and not the image, so I’m not getting the path to the image right.

    Thanks

  31. Joel — It does not need to be replaced as long as you are echoing with PHP because THESIS_CUSTOM_FOLDER is a defined path in PHP for Thesis. If you’re using OpenHook and no longer echoing the URLs, but using plain HTML then you do need to edit the path so that it goes from src="' . THESIS_CUSTOM_FOLDER . '"/images/header_purple.jpg" to src="http://www.example.com/wp-content/themes/thesis/custom/images/header_purple.jpg".

  32. I feel like an idiot! But I cannot get a header image to show on http://earthadvertising.com/blog.

    I’ve put the EAheader.jpg in both the images file and the thesis/custom/images file; but it can’t seem to find it. You can see my css on this blog page. Here’s what I put in the Custom File Editor:
    .custom #header {border-bottom:none; height:112px; background:url(images/EAheader.jpg) center left no-repeat; padding-top:0; padding-bottom:0; }
    /* .custom #header #logo {display:none;} */
    .custom #header #tagline {display:none;}

    (I temporarily hid the .custom #header #logo info, because I had to have SOMEthing up there!)

    Please help! I’m new to Thesis, and it seems rather awkward so far.

    Many thanks!

    — Nancy

  33. Thanx for the great Thesis article. Came here through search and just couldn’t stop reading. Very good blog 🙂

  35. Hi Kristarella,

    I used your CSS code for a custom header and also the one so I can have different headers on individual pages. On Internet explorer it works perfect, but on google chrome and firefox my headers do not show at all. Do you maybe know of a reason for this, and maybe a possible solution? Did I pherhaps do something wrong?
    thank you so much

  36. Claudia — It’s not a good idea to have file names with spaces in them. Try changing your image file names to have hyphens or underscores instead of hyphens. I don’t know if it makes any difference, but Thesis doesn’t need to be in an extra folder, you seem to have themes/thesis_16/thesis_16 All the theme files can just be in the first thesis_16 folder, it doesn’t need to be two-tiered, but it might not make a difference, I’m not sure.

  37. Hi,

    I removed all spaces from my file name and that did the trick. Thank you so much. I realy appriciate your advise and help. Your posts are a great support. thank you!!!!

  38. The articles you have provided above is really helpful and really useful for the Thesis Theme lovers. I would like to decorate my blogs header by the way you said. Good works kristarella.

  41. I studied the css tutorial and I really learned a lot. I think my next homepage will be a lot better than my first one.

  42. Thanks very much for this tutorial. I am doing a lot of customisation on a clients site and they wanted a page with no navigation in the header which freaked me out initially. I used the inline header method and can specifiy exactly which pages will have the different header now – yay : )

  44. Can you please let me know how can I put the menu bar at the header height. For example I have my logo at the header to the left side of the page but I want to put the menu to the right side of the logo but at the same height as the header. What would the be to acquire that? Thanks in advance

  45. Tony — Take a look at the menu CSS for my mini skin, which has the menu in line with the header. I may have to write a tutorial for it because I get a lot of questions about how to do it.

  46. I have followed your tutorial, which all of them are great by the way, and I have run into a little tiny problem. I used the CSS way, giving each page a unique class and adding the different header via CSS, it seems that this works, going to about shows the about image, and going to contact shows contact, but it makes my menu disappear when I have the code (remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’);
    add_action(‘thesis_hook_after_header’, ‘thesis_nav_menu’); ) in my functions.php from a different tutorial on your site to make the navigation below the header. I would like my navigation to essentially float on top of this background header that I am trying to use. I thought using the function edits I pasted here would allow both things I want to work, but when adding this unique header, it causes the menu to disappear, but without it, my nav is on top of my header and will not overlap the image. Any suggestions? Thanks in advance!

  47. Bhorton — CSS header images shouldn’t affect the navigation in anyway, unless there’s an error in your custom_functions.php file before the nav code that’s preventing it to execute. Perhaps If you paste your file at Pastebin and give the link, I might be able to see if that’s the case.

    Or, you might just need to use thesis_hook_after_title instead of thesis_hook_after_header because the latter doesn’t put the nav inside the header element and would therefore be below any image you have in #header.

  48. Using the thesis_hook_after_title rather than header worked and allowed me to put the navigation on top of the header, and it is still there on the other pages now! Thank you. – You do great work!

  49. Hi Kristarella,

    I want to to overlay about 20px of my header image onto Content. Cuz there is a little image that should present on the content which originally is a part of Header. Is there anyway to do that?

    Thank you,
    Josh

  50. Joshua — It depends a bit on which framework you’re using etc, but you can probably achieve something like that with positioning. E.g., position:relative; top:-20px; to move something up on the page by 20px. You might also need to add z-index to some elements to get them to overlap in the right order.

    I’ve got a bit more info about CSS position in my position nav tutorial.

  51. I’m building a Thesis site with a lot of static pages, most with at least one level of subpage. I would like to have a separate header for each of these “sections,” or top level pages and the pages below it, and have the header appear automatically for each section – without the subpage creator having to do anything special. Is this possible?

    Thanks for all your great tutorials.

  54. Hello Kristarella,

    like other post, I came to your site for a specific topic and have been reading and reading, not a programmer by far but your tuts have been v.ery detailed. I am trying to accomplish a header similar to http://www.vogue.com not sure if this is a even a header/a flash slideshow. I have uploaded my header and have the tag line and text off. Though I read the tutorials on headers I’m frankly not sure if any of these apply and or which I should do to accomplish this. I would really appreciate your help, I have posted it on the forum with no response.

    my site is in maintenance mode but I have taken it off for viewing. Just trying to get some of the basics done before adding any content.
    http://www.beautyheirmag.com

    Also I followed your tutorial for a wide full length footer and I have the footer links for pages and would like to take the underline off and add twitter without a plugin like your example but I got so many errors when I added the code you have listed somehow it conflicts with the code I have for the links.
    Also just realized my page text is much lighter in IE than FF – what can I do to fix that?

    Please help! – Hope this is not too many questions

  55. Hi Kritarella. Amazing content! Thank you for all your help!! I’m trying to work out how to put an optin-box in to the header area for a thesis blog, but having no luck at find this info. Hope that you may be able to help.

  56. BHM — I can’t seem to look at the Vogue site because it is mercilessly redirecting me to vogue.com.au. I looked at it last week when I was responding to a post in the forum and I believe they’re using javascript, but even if they were using flash, I would use javascript for a similar thing. What’s the link to your forum thread about this, because I did reply to almost the same question there.

    Try a twitter profile widget.

    I doubt there’s anything you can do regarding the difference between IE and Firefox, unless you had an IE only stylesheet and made the text darker just for IE.

  58. Kristarella,

    That was my post on the forum, and I took care of everything except the header part as this is all new to me, using Thesis open hook and jcarousel with thesis_hook_before_html do I paste all that code in there…this is a bit fuzzy for me. The header will have individual images not linked to anything at all. if you go to vogue.co.uk at the bottom there is a drop down box click us and it will take you there. (if this helps)

    The header will have individual images linked to a post. I want to be able to have 5-6 images a month in my header full width about 1000wx800h, viewing 1 image at a time, clickable to go to the post or just scrolling thru the image slideshow.

    thanks so much

  61. Hi Kristarella,

    Is the custom_header function you’ve detailed in your article OK to use ‘as is’ in Thesis 1.8 or is there some changes you’d recommend?

  62. Bart — The only things to note about that function are: you need to change the function name if you already have another function in custom_functions.php called “custom_header”, you need to change the page and category names to suit the pages and categories on your own blog, and you need to change the file names of the images to the names of the images you have in your custom/images folder to use as headers.

  63. Hi again!

    Thank you so much for your tutorial on changing images on the headers….

    I have one more question for you, how do I include flash animation (swf) just on my home page header?

    I look forward for your answer…

    Kumanga.

  65. Hello:

    I’ve been trying (unsuccessfully, so far) to master using the CSS class name in the post editor to create a second distinct header/nav structure that will create a kind of “featured page” within our site.

    I’d like to be able to feature certain posts by dropping the main header and nav menu, replacing these with a different header/nav structure.

    If that sounds confusing, an example of what I mean is here:

    http://www.losangeles.com/restaurants/

    If you click a featured restaurant, the main header/nav structure drops away, and is replaced with a different standardized header, that includes the post title, and a link back to the main site.

    That’s what I’m trying to accomplish, but with little luck so far.

    Make sense?

    Any ideas?

    Thanks in advance.

  66. Barry — I think you’ll need some functions as well as CSS for this. For example, in my landing pages post, there are functions for filtering out the header on certain pages. Or, you could filter out the header on all pages and then replace it selectively using conditional tags to provide different headers on different pages, which is similar to the inline header images section above.

    In short, I think you need PHP as well, not just CSS. Let me know if you need further help with it.

  67. Hi Kristen,

    I would like to create a more noticable border/separator between blog articles. I noticed that you are using a very nice one with a diamond pattern. Would you mind sharing how I could do something like this on my blog or even replicate what you’re using?

    Thanks very much,
    Sandy

  68. Sandy — I made the image in Inkscape and then added it as a background image of the posts with some extra padding at the bottom: .custom .post_box {background:url(images/hr.png) center bottom no-repeat; padding-bottom:20px;}

  69. i have created a page class and used the css, added my header image url, clicked save and the header just disappears on that particular page, there is just white space where the header should be. however if i use .contact #header {background: #000} this gives me a header in black :s but if i try the image path i just get the above problem. i have tried different variations it full http:// path, different places in CSS file. do you know how to solve this? (using thesis 1.8, wp 3.0.1, page width framework (also tried full width – no luck)

  71. i lost patience with trying to do it via css so i downloaded a dynamic headers plugin! basically i added a class for the page, used the code: .(class) #header {background:url(images/header_about.jpg) center top no-repeat;} but this just created a white space instead of showing an image. if i replaced it with .(class) #header {background: #000;} the white space turns black.. whilst im here can i pick your brains about something else… i have set up wp property plugin on my site but when i click on a property the page layout turns horrible and text is smaller and things arent in the right places. ( it looks like what happens with buddypress ) do you have any knowledge on this?

  72. JB — Essentially that plugin is using its own page templates that are designed more to work with the old default theme Kubrick, rather than theme frameworks. Ideally plugins like that would ask you to create pages for which it replaces the content, rather than using a whole new page template. The templates in the plugin would need to be modified to suit Thesis.

  73. I have looked everywhere and can not find the code to change the text color of the h1 title of specific pages. For example I have named a category Marketing. When I go to that category page the h1 is Marketing but it defaults to the display options in thesis. Any help is very appreciated!

  74. Hi Kristarella,

    How to make the first 1/3 of the header (the 1/3 on the left-side) clickable as part of the tab for the home page (default page) ?

    Appreciate your help!

    Filipe

  75. Hi Kristarella, How can I make the image fit the heather? At the moment it’s far too big. Thanks & Regards

  76. HI Kristarella, how can my image adjust according to the scale I see the site ? At 100% it ok, but if I reduce the scale, the header image gets offline. Looking forward to hearing from you! Filipe

  77. Filipe — I’m not sure I understand what you mean. The header on your site looks good and stays looking good when I zoom in and out of the site.

  79. Filipe — Oh, I see. Personally I wouldn’t worry about it. People usually zoom in to view larger text, but if it worries you then you probably need to add the header as an inline image, rather than a background image and give it a value of width="100%" in the HTML. There’s a section on inline images above.

  80. HI Krista,
    You have great tutorials that are easy to follow for us new to both Thesis and CSS.

    I saw another poster asked if you could add the separate header to the sub pages of a specific page and you answered him:

    “Adam — Yes, you can use either method in this post to add the headers. Use the conditional tag is_page() to target the pages and a custom function to target the subpages. Details for that functions are on the conditional tags Codex page.”

    My question is , all of my drop down subpages are not actual “pages” but “categories” pages.

    I looked through the conditional tags and couldn’t figure out if any of these tags applied to the category pages or how to use them.

    If you see my site (which is my playground crash test site) and click on the “kitchen” page. You’ll see your code worked great for the different header but if you click on one of the sub pages like “desserts” it refers back to the main page header; currently purple.

    I have several customizations I’ve learned from the Thesis Gurus like you that have worked but only work on the main or static pages. I can’t figure out how to get them to work on the category pages associate with each.

    Any help you can offer would be GREAT.

    Thanks again Krista for the help.
    Tara

  81. Tara — The conditional code for category archive pages is is_category('Category Name'); and for a single post in a particular category in_category('Category Name');.

  84. HI Krista,
    Thanks so much for the advice. I used it and double-backed over the conditional tags page you provided and found this link

    http://codex.wordpress.org/Tem.....n_category

    Based on the information here, which sounded like what I’m trying to accomplish I built this:

    function custom_header() {
       // header for KITCHEN page
       if ( is_page('kitchen') ) || if ( in_category( 'recipes' ) || post_is_in_descendant_category( get_term_by( 'name', 'recipes', 'category' ) )
               echo '<a href="' . get_bloginfo('url') . '" rel="nofollow"></a>';

       // header for DIVERSIONS category pages
       elseif ( is_page('diversions') ) /* || if ( in_category( 'fruit' ) || post_is_in_descendant_category( get_term_by( 'name', 'fruit', 'category' ) ) */
               echo '<a href="' . get_bloginfo('url') . '" rel="nofollow"></a>';

       // header for posts in HOME &amp; ABROAD Category
       elseif ( is_page('home_abroad') )
               echo '<a href="' . get_bloginfo('url') . '" rel="nofollow"></a>';

       // header for all other pages
       else
               echo '<a href="' . get_bloginfo('url') . '" rel="nofollow"></a>';
}
remove_action('thesis_hook_header', 'thesis_default_header');
add_action('thesis_hook_header', 'custom_header');

    I didn’t get any errors or crash my page uploading it so at least it’s formatted right (yay for Krista’s help)

    Problem is it didn’t work. On the “kitchen” and “diversion” page SOMETHING registered but it left me with no header at all and no changes on “home & abroad”.

    None of the subcategories changes.

    Can you identify what’s wrong with the code?

    Much thanks!

  86. Tara — I think you need to change your conditional code to:

    function custom_header() {
       // header for KITCHEN page
       if ( is_page('kitchen') || in_category( 'recipes' ) || post_is_in_descendant_category( get_term_by( 'name', 'recipes', 'category' ) ) )
               echo '';

       // header for DIVERSIONS category pages
       elseif ( is_page('diversions')  ||  in_category( 'fruit' ) || post_is_in_descendant_category( get_term_by( 'name', 'fruit', 'category' ) ) )
               echo '';

       // header for posts in HOME &amp; ABROAD Category
       elseif ( is_page('home_abroad') )
               echo '';

       // header for all other pages
       else
               echo '';
}
remove_action('thesis_hook_header', 'thesis_default_header');
add_action('thesis_hook_header', 'custom_header');

    I removed the contents of the the echos because I wasn’t sure if they’re correct, but the conditionals were closed a bit early and had an extra “if” in them.

  87. Hello again!

    From this tutorial I was trying to extract some info for my huge problem which brought my project to a halt.

    I have a couple of pages (static) as I am making a mostly static website with Thesis. I am using dynamic conent gallery as an image overlapping between my #header_area, #nav_area and the #content_stuff. I managed to make the dyn.cont.gallery to show up perfectly on the home_page.

    now, what I actually want to do is to create several page specific multimedia boxes, that is, that each box has an image overlapping the header to content areas in the same way the dynamic content gallery is doing, so that consistency is preserved over the pages.

    I am trying to make page specific multimedia box images fit into that feature box area which I created and put dynamic.cont.gallery on home_page.

    the images for the rest of the pages do not need to rotate, it just has to be one fixed image, spanning in the same way over header, nav, and content, like the dynamic. content gallery!

    I hope I made that clear .

    Could you help?

    my question could be resolved if I could simply move the page specific multimedia box up to thesis_hook_feature_box, but i somehow cant find the name of that function!!!

  88. The information I’ve received from your site is amazing. You do great work.

    My problem is that when I put this code in my custom.css it causes the header on my main site to disappear.

    .landing-page #header a { display: block; height: 124px; width:952 px; background: url(http://www.thedigitalhealthclu.....Header.png) center no-repeat; outline: none;}

    Any suggestions appreciated?

    Thanks

  91. Hi,
    On one site, using CSS image replacement, I succeeded in programming a different header on every page. Thanks!
    But on my next site I need to to do this, and also have the home page header be a swf file. I’ve bungled several different attempted approaches.
    Here is the code I’ve used to successfully display the swf file in the content area of a page. But when I try combining it with conditional tags in a custom-function script or the CSS image replace script itself, I’m goofing it up. Any detailed help you can give me is greatly appreciated. I’m sure other people are tryng to do this. Thanks!
    <object id="test1" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="1000" height="282" codebase="http://download.macromedia.com.....;<param name="src" value="http://creativeinquiry.org/HomeBnr4a.swf&quot; /><param name="pluginspage" value="http://www.adobe.com/go/getflashplayer&quot; /><param name="halign" value="center" /><embed id="test1" type="application/x-shockwave-flash" width="1000" height="282" src="http://creativeinquiry.org/HomeBnr4a.swf&quot; halign="center" pluginspage="http://www.adobe.com/go/getfla.....ct&gt;

  92. Kyle — You need to use the inline method in custom_functions.php. Something like:

    function custom_header() {
	// header for About page
	if ( is_page('About') )
		echo '<p id="logo"><a href="' . get_bloginfo('url') . '"><img src="' . THESIS_CUSTOM_FOLDER . '"/images/header_about.jpg" alt="' . get_bloginfo('name') . '" /></a></p>';

	// header for all other pages
	else
		echo '<object id="test1" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="1000" height="282" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://creativeinquiry.org/HomeBnr4a.swf&quot; /><param name="pluginspage" value="http://www.adobe.com/go/getflashplayer" /><param name="halign" value="center" /><embed id="test1" type="application/x-shockwave-flash" width="1000" height="282" src="http://creativeinquiry.org/HomeBnr4a.swf" halign="center" pluginspage="http://www.adobe.com/go/getflashplayer"></embed></object>';
}
remove_action('thesis_hook_header', 'thesis_default_header');
add_action('thesis_hook_header', 'custom_header');

  93. Thanks so much Kristarella!
    That did the trick…almost. The swf file is mysteriously offset to the right approx 12px. It can be seen at: http://creativeinquiry.org/develop/ (still in development so all is not tidy and complete, but you can use menu links to go to other pages with static headers)
    The still jpgs on the other pages are all correctly positioned. Once again i tried to school myself, and learn to write the code to shift the swf file to left, (using custom css. and directly in the custom-function script ) but I can’t get the swf to move to the left.
    I should explain that previously I didn’t explain myself clearly enough; it’s actually the one page (Home) that needs to be a swf and all the other pages that need to various jpgs that are controlled by a css script. – but that was not a problem. I was able to make the appropriate changes to your script. It’s all working fine now, except the swf is mispositioned.
    Here’s how the part of the custom-function script looks that controls the swf file looks now.
    function custom_header() {
    // header for Home page
    if ( is_page(‘home’) )
    echo ‘<object id="test1" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="1080" height="282" margin="0" padding="0" img-indent:-12px; codebase="http://download.macromedia.com.....;<param name="src" value="http://creativeinquiry.org/HomeBnr4a.swf&quot;; /><param name="pluginspage" value="http://www.adobe.com/go/getflashplayer&quot;; /><param name="halign" value="left" /><embed id="test1" type="application/x-shockwave-flash" width="1080" height="282" margin="0" padding="0"src="http://creativeinquiry.org/HomeBnr4a.swf&quot;; halign="left" pluginspage="http://www.adobe.com/go/getfla.....ct&gt;’;

  95. Hi,
    I did have that line in my custom css script at one point.
    Your comment got me to recheck, and I discovered I’d removed it and replaced it with
    #header_area .page { padding: 0; }
    Thanks for pointing the way!

    Kyle

  96. I’m building a WP site, first time on Thesis (because of the flexibility)..
    However, what I don’t find is how I can have a separate header for the homepage ONLY… So the first page should contain code xyz, but all other (pages+posts) should have their own.
    How can I identify I’m on the homepage (which is not a custom page)?
    Thanks for your help!

  98. I put the .blog #header after all of the .custom css and it still will not show up for that page. But, when I take it and apply to another page it works.

    • Latrisha — I suspect that whatever page you’re trying to target doesn’t actually have the class “blog”. Have you used the function under the subheading Adding Body Classes in the post? Only an individual page named Blog will have the custom class “blog” unless it is specified as the blog page when there’s a static home page, and then it takes on a different page type— that of the blog articles home page and won’t have a special custom class unless you give it one with the function mentioned above.

  101. Okay so I went to the blog page which does have my “articles” and a static home page. I put the call blog, then I tried .blog, and then I tried #blog and it still won’t work. Any suggestions?

    • Latrisha — making a page the blog page changes its type in WordPress so it now is the “home page”, as in the blog posts’ home page and the static home page is now the “front page”. So you need to use the adding custom body class function in the post and change the class under “is_home()” to “blog”, then your CSS should work.

  102. Okay you totally lost me. Where do I go exactly to change this…the body class function? Because I changed it on the actual page and it is not working.

    Thanks for your help!

  103. Latrisha — I was trying to say the page behaves differently when you make it the articles page: changing the class when editing the page doesn’t work the same way. You need to paste this in custom_functions.php and then your CSS should work:

    function custom_body_classes($classes) {
if (is_home())
	$classes[] = "blog";

	return $classes;
}
add_filter('thesis_body_classes','custom_body_classes');

  105. Kristen

    CSS Image replacement worked well. Thanks a lot. A next great step forward.
    Would you know how to do two things:
    1. On a website that I am designing I would like to extend the header to infinity. The header exists only for the home page, and is downloaded from an image in custom folder. How can I do it?
    2. Would you have any suggestions how to move the text ( icons like “home”,”contact” etc) in the nav menu, to the left border of the window, and the “zapisz sie” to the right one, instead of the place they start from now ? the web address is http://www.ksiazkionlinetanio.pl.
    I followed your suggestions about the full width nav menus, and created one for that blog, but the text is a different story.
    best, Martyna

  106. Martyna — Sounds like you need the full-width headers post, and perhaps the position nav one too. Regarding the nav positioning you will probably need to give the nav position:absolute; width:100%; or something along those lines if you really want to stretch it across the whole browser.

  108. Kisten, I know them, and they were helpful.
    Will give them another look.
    have a Great New Year, and thank you for your help.

    all the best
    Martyna

  110. Great info! Worked great. I’m glad you posted the code for getting the blog page to behave like the rest–I was having trouble with that as well.

  111. hi! i’d like an image not to show up on specific pages on my blog —i used openhook to allow me to add the image on all my pages but now i find i need to have that image not show up on certain pages…can i do this is openhook? or do i need to do it in custom_functions.php? here’s a screenshot http://prntscr.com/ae0xd
    i want to remove the aipp 2012 logo on the upper right. here’s the code i used in openhook http://prntscr.com/ae0xd . please help me if you can. thanks 🙂

  112. Ann — You can restrict the image with conditional tags like in the post, but presumably you are just using HTML in OpenHook at the moment. Your new code would look like something like:

    <?php if (!is_page('Page Name')) { ?>
YOUR HTML
<?php } ?>

    The ! acts as a negative, so it is saying “if NOT on this page show the HTML”. To not display on multiple pages use if (!(is_page('Page Name') || is_page('Other Page Name')) {
    The || means “or”.

  113. you’re a star kristarella! thanks so much!!! last question: if i wanted to use the post/page id instead of the page name, how should i code it?

  116. Hi Kristarella,
    Will you please help me? I want to remove the header image on a single page on my blog. I found this code:

    function custom_remove_defaults($content) {
    return false;
    }
    function my_sales_page() {
    if (is_page(’28’)) {
    add_filter(‘thesis_show_header’, ‘custom_remove_defaults’);
    }
    }
    add_action(‘template_redirect’,’my_sales_page’);

    But it removes the nav bar as well.

    Is there a way to remove the header banner image and keep the navbar on a single page? I’m stuck and would really appreciate some help.