• Resolved Tim Griffin

    (@tgriff)


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

    How to enable this?
    See: https://codex.www.ads-software.com/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;
    }
Viewing 15 replies - 16 through 30 (of 32 total)
  • Plugin Author Ryan Hellyer

    (@ryanhellyer)

    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.

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

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

    Thread Starter Tim Griffin

    (@tgriff)

    odouglas – you’re quite welcome – glad for your success!

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

    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?

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

    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!

    Thanks for your help.

    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!

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

    Thank you!

    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

    Thank you very much, I will try it now!

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

    There is no such thing as float:center. You could try putting it in a div with a class set to text-align.

    EG
    <div id="center">HEADER GOES HERE</div>

    and in your css

    .center {text-align:center;}

    Not easy to say definitely without seeing all your code.

    ??

Viewing 15 replies - 16 through 30 (of 32 total)
  • The topic ‘[Plugin: Unique Headers] WordPress Custom Headers’ is closed to new replies.