WordPress.org

Forums

Unique Headers
[resolved] WordPress Custom Headers (33 posts)

  1. Tim Griffin
    Member
    Posted 2 years ago #

    It should be noted that in order to use this plugin the custom headers option must be enabled.

    How to enable this?
    See: http://codex.wordpress.org/Custom_Headers

    For example, I am using a child theme built on Canvas by WooThemes.
    To enable use of this plugin here's what was needed:

    1. Add the following to your functions.php (you can adjust the height and width depending on your theme)

    // Add support for flexible headers
     $header_args = array(
     'flex-height' => true,
     'height' => 183,
     'flex-width' => true,
     'width' => 680,
     'default-image' => get_template_directory_uri() . '/images/header.jpg',
    // 'admin-head-callback' => 'mytheme_admin_header_style',
     );
    
     add_theme_support( 'custom-header', $header_args );

    2. Now setup the default background under the Appearance / Header menu item

    3. Add the image call to your header.php file:
    <img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="image description" class="custom_header" />

    In my case it was better to insert the image call using the WooThemes hook and the code was added to our functions.php file like this:

    add_action( 'woo_header_inside', 'woo_custom_header_image' );
    
    function woo_custom_header_image () {
    ?>
    
    <img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="image description" class="custom_header" />
    
    <?php
    
    } // End woo_custom_header_image()

    And finally add a bit of styling in the style.css file of your site to control how the image aligns itself. In my case, the image needed to float to the right of the logo image.

    #header img.custom_header{
    	float: right;
    }
  2. sabadil
    Member
    Posted 2 years ago #

    Tim, Thank you so much for posting these instructions for Canvas! Worked perfectly :-)

  3. Ryan Hellyer
    Member
    Plugin Author

    Posted 2 years ago #

    Thanks for posting this! I'll add better instructions in the next release.

    I might link directly to this forum topic too so that people can learn from your tutorial here.

  4. Guenni007
    Member
    Posted 2 years ago #

    this ist what i'm looking for so long and the version 1.01 works perfekt for me. Thanks
    Since 1.02 the category custum header didn't work now.
    Installing the old one 1.01 everything works again
    Thanks in advance
    G√ľnter

  5. Ryan Hellyer
    Member
    Plugin Author

    Posted 2 years ago #

    Thank you very much!

    I've been trying to figure out why on earth things were behaving oddly on a site I'm working on at the moment, and didn't realise it was because of the update I pushed out.

    A new version is uploading right now which will correct that bug so you can upload to the latest release.

  6. Ryan Hellyer
    Member
    Plugin Author

    Posted 2 years ago #

    Whew, bug is now fixed. I was also suffering from a bizarre caching issue which was preventing me from seeing this bug occurring, but which was causing a whole lot of related issues. Sorry for the inconvenience and thanks for inadvertently helping me out this morning :)

  7. Tim Griffin
    Member
    Posted 2 years ago #

    Cool,
    Glad the post above helped out.

    I'm loving this plugin and how easy/elegant it is to use on the website :-)

  8. RonStrilaeff
    Member
    Posted 2 years ago #

    Hi Tim,

    I am trying to integrate this with canvas also. Does the last step about the "WooThemes Hook" take care of everything? Or are steps 1,2, and 3 all necessary?

    Also, when I remove my Custom Logo from the Canvas theme options, the title and tag line for the site also show up in addition to the dynamic header images. How did you make that invisible without modifying the header.php file?

    Thanks,
    Ron

  9. RonStrilaeff
    Member
    Posted 2 years ago #

    I see it a bit clearer now. There are two steps to get set up.

    1. add-theme-support for custom-header, using some default args
    2. tell my theme where to show the header_image() WooThemes does this with the add_action.

    The problem with this working with a woo theme is the header_image call is added above the normal logo logic and does not replace it.

    Even if I decided to edit my header.php file which breaks the easy upgrade, how do images get known to the header_image function? And how does each get associated with the particular page I'd like them to be shown on? There must be more wp documentation about actually using custom headers.

    I'm surprised that Woothemes does not have this capability build into one of their themes?

  10. Tim Griffin
    Member
    Posted 2 years ago #

    Ron, which theme are you using?
    If you are using the Canvas theme like you mentioned, then you'll need to adjust the position of the image with css.

    That's the last part of the outline where I have the float:right.

    This allowed me to position logo and image side by side - check it out here:
    http://meta.tj/

    Does that help move things in the right direction?

  11. RonStrilaeff
    Member
    Posted 2 years ago #

    I'm using canvas. The custom header is above either the normal woo header image or the title and tagline text because the

    add_action( 'woo_header_inside', 'woo_custom_header_image' );

    Is above the <div id="logo">

    Did you manually modify your woo header.php, or did you just blank out the title and tagline and leave out the normal woo header image?

    Either way I can never see an image... there has to be a simpler way to do this.. I seems like pretty basic functionality for any website.

  12. Tim Griffin
    Member
    Posted 2 years ago #

    Ahh I see where you're at,

    a) inserted custom logo through the WooThemes settings
    b) inserted the title and tagline with standard WordPress settings
    c) hid the title and description using display:none in the child theme css

    #logo .site-title, #logo .site-description {display:none}

    I'm sure there's a more elegant way but this is how things lined up with the custom header ;-)

  13. RonStrilaeff
    Member
    Posted 2 years ago #

    What I ended up doing was in my canvas child theme, since I did not need support for the flexibility woo provided inside their header.php file

    <div id="logo"> here, </div>

    I copied it to my child theme's folder and replaced everything inside that div with my own code which loads a $logo_url image file that matches (by name) the slug of the top level parent of the page being displayed. Then if that file does not exist, I simply defaulted to a specific "home" image. My images are all full width banners, so I'll have to tweak my css or code or something if/when I want their woo_ad_top to overlay the right side of my header image

    This way all I have to do down the road to make a special header image appear on a page is to make one of the correct size and copy it to my /child-theme/images/headers folder.

    I still have to work out what and how to show something relevant on multi-post and single-post style "pages".

    Thanks all for the inspiration.

  14. ingvijonasson
    Member
    Posted 2 years ago #

    Tim, thanks for clearing this out. Works great on my theme.

    I am developing a theme/site with over 50 pages. 8 pages are parent pages and each one has three to five child pages. I was wondering if you or someone has a solution to make child pages inherited a custom header image from the parent page?

  15. Ryan Hellyer
    Member
    Plugin Author

    Posted 2 years ago #

    That's a very interesting idea. I'll consider that for the next release. It might require a checkbox beside the thumbnail or perhaps a constant in wp-config.php to turn it on or off since this could potentially break pages for existing users who never intend this to occur by default. If you have any opinions on how best to implement this, please let me know :)

  16. ingvijonasson
    Member
    Posted 2 years ago #

    Hi Ryan, I think it would be great to have this as a default behaviour. It would also be ideal to have a check box:

    Use default image / parent image for child pages: Yes/No

    Since there is not a settings page I do not know how it would be best to implement such a thing from the administration area. But since the implementation that has to be done in the header.php and the functions.php I was hoping that there would be a solution that could be done there.

  17. Ryan Hellyer
    Member
    Plugin Author

    Posted 2 years ago #

    I'd rather avoid any settings if possible. It could be done via the wp-config.php file, but I'm thinking that might be best implemented as an extra setting on the media page. I definitely wouldn't want to make a whole settings page for the plugin since there would only be one setting on it.

  18. ingvijonasson
    Member
    Posted 2 years ago #

    I totally agree on that. The plugin does not need and should not have a setting page.

  19. odouglas
    Member
    Posted 2 years ago #

    Thanks, Tim, for the elegant solution. Unique Headers now works flawlessly with Canvas.

  20. Tim Griffin
    Member
    Posted 2 years ago #

    odouglas - you're quite welcome - glad for your success!

  21. Rand HOPPE
    Member
    Posted 2 years ago #

    I would also like to be able to have the header be inherited by child pages.

  22. bridieamelia
    Member
    Posted 2 years ago #

    Fantastic solution: however as I am still currently studying PHP, have no diea how to set default header image using the woo hook? Can anyone alleviate my pain?

  23. bridieamelia
    Member
    Posted 2 years ago #

    Or better still, ignore the custom header image call if there is not one defined...

  24. oksanaar
    Member
    Posted 2 years ago #

    Hi there!

    Thanks for all the detailed explanation above. I tried however to follow what you said but it did not work properly for me. Notes: I'm using Artificer theme from WooThemes, very-very basic knowledge of PHP.

    What I did and what worked:

    1 - copied the code to the functions.php file
    2 - copied the woo hook code to the functions.php file

    nothing happened

    3 - copied the <img src... > code to the header.php before the hgroup and it worked! Image appeared.

    Now the problem is that the logo does not overlay the image. Despite the fact that the image is float:right and logo is float:left they still don't show side by side, but on top of each other. Even, if they do show side by side, I don't need that - I need the logo to be on top of the image.

    I did not really understand the explanation you wrote about this issue above. Can you please direct me what I might be doing wrong?

    Thank you so so so much!

  25. Graucho Marx
    Member
    Posted 2 years ago #

    Thanks for your help.

  26. kerrytcrane
    Member
    Posted 2 years ago #

    Good day,

    Novice here, sorry!

    I'm using Twenty Eleven

    Can anyone please tell me where I place the code in the functions.php and header.php?

    Thank you kindly!

    p.s., my apology for burdening you with my inexperience and thanks again for any assistance!

  27. kerrytcrane
    Member
    Posted 2 years ago #

    I followed the above instructions and I have 2 stacked header images on each page. Any help?

    Thank you!

  28. bridieamelia
    Member
    Posted 2 years ago #

    Hi Kerry,

    I am not an expert, but have done this before so....

    The functions code can just be pasted in at the end of the functions.php file - include the comment (//......) for reference's sake. The header code needs to be placed in relation to where you'd like it to appear in the header, eg if after logo, then after the logo call. You might need to do a little custom css to get it to sit right also.

    Bridie

  29. kerrytcrane
    Member
    Posted 2 years ago #

    Thank you very much, I will try it now!

  30. kerrytcrane
    Member
    Posted 2 years ago #

    I adjusted the css to float: center; and it's still justified left. Any suggestions? Thank you!

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Unique Headers
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic