WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] function to add custom header to div id or class, Its driving me crazy! (7 posts)

  1. jamesg40
    Member
    Posted 1 year ago #

    I have been up all night trying to do one simple thing and its making me crazy, lol. I am simply trying to work my custom header into my header div using a function that injects the css like so.

    function header_style() {
    if(!get_header_image() ) return;
    ?>
    <style type="text/css">
    #featured{
    	background: url(<?php header_image(); ?>) no-repeat !important;
    	height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
    	width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
    }
    
    </style>
    <?php
    }

    I have tried a few variations of this and I either get php screams or I get a blank background. The custom header function i am using is from the codex and Im not entirely sure if I need to edit something here or not. Im using it like this

    // add support for custom header
    	add_theme_support( 'custom-header' );
    
    	$defaults = array(
    	'default-image'          => get_template_directory_uri() . '/images/featured-backing.png',
    	'random-default'         => false,
    	'width'                  => 2550,
    	'height'                 =>350,
    	'max-width'           =>2550,
    	'flex-height'            => true,
    	'flex-width'             => true,
    	'default-text-color'     => '',
    	'header-text'            => false,
    	'uploads'                => true,
    	'wp-head-callback'       => '',
    	'admin-head-callback'    => '',
    	'admin-preview-callback' => '',
    );
    
    add_theme_support( 'custom-header', $defaults );

    I am hoping that someone can see where I am going wrong and give me a bit of guidance before these key board marks get too deep in my forehead.

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

    can you post a link to your site where the result can be seen?

    are there any other formattings for #featured?

    how and where do you call the function?

    a more up-to-date output for the width and height might be:

    height: <?php echo get_theme_support( 'custom-header', 'height' ); ?>px;
    	width: <?php echo get_theme_support( 'custom-header', 'width' ); ?>px;

    - I called the function in the <head> section of a child theme of Twenty Twelve, and your code seems to be ok; it produces a valid output and the expected background image in a properly dimensioned <div id="featured"></div>.

  3. jamesg40
    Member
    Posted 1 year ago #

    I am building this theme on my localhost at the moment, I can load it up to one of my demo servers and post the link shortly.

    until then. Um, everything you see above is located in my functions.php for the moment. As far as calling it to my header location I do not have anything inside the div calling it at the moment as I am trying to avoid that. I was using this <img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" /> to add the custom header to my theme but i did not like the way that it played with the slider that I am adding to my theme that actually lays over the container for my custom header, so I wanted to remove the img src inside my div and just set the css to the div class or id itself. Hope this makes sense. The biggest reason is because I don't really like using z-index and negative margins and padding's to get the look I want, I simply want the css to be applied to the div container (excuse me, the custom img applied to the css for the div container) Anyways, I hope this makes sense. I can load the theme up to a demo if you like.

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

    I do not have anything inside the div calling it at the moment as I am trying to avoid that.

    that is ok, no need to have anything there.

    you will need to call the function header_style() anywhere within the <head> section of header.php, somewhere before the </head>.

  5. jamesg40
    Member
    Posted 1 year ago #

    Ok, I see that I have not called that in my head. Please excuse this question if its pointless but (I am an html css expert that just got into wordpress themes about 4 months ago and have little php experience with the exception of what I have learned from the codex so far) so with that in my head will I simply write it like <?php header_style(); ?> or will I need to define something like this <?php header_style( 'custom-header' ); ?> ? Sorry for my ignorance....

  6. jamesg40
    Member
    Posted 1 year ago #

    lol, cool, I just added
    <?php header_style(); ?>
    inside my head and my header image now shows but pushes everything in it to the left, So now a I think I just need to work out my css.

  7. jamesg40
    Member
    Posted 1 year ago #

    Got It! Thank you alchymyth for your help with this. I knew it was something simple, lol. Have a great day!

Topic Closed

This topic has been closed to new replies.

About this Topic