WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve
[resolved] Setting default header image in child theme (32 posts)

  1. Ruud Evers
    Member
    Posted 1 year ago #

    Twenty Twelve by default doesn't have a header image specified. For a child theme, I need to set a default header image. I've tried overriding the custom header functionality, but wasn't able to find a durable solution.

    I tried copying the /inc/custom-header.php to the child theme's folder, and customize it there, but the child theme just kept using the parent theme's custom-header file.

    My current solution is to replace line 83 of the parents functions.php
    require( get_template_directory() . '/inc/custom-header.php' );
    with
    require( get_stylesheet_directory() . '/inc/custom-header.php' );
    This does the trick, however, I will need to make the change everytime Twenty Twelve gets updated.

    Anyone has a solution that can withstand an update to the parent theme?

  2. fernandopolania
    Member
    Posted 1 year ago #

    I have the same exact problem. I hope someone can help you out.

  3. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Double the chance of resolving the problem by creating your own thread.

  4. fernandopolania
    Member
    Posted 1 year ago #

    Thanks Andrew.

  5. paulwpxp
    Font hero
    Posted 1 year ago #

    add this in your child theme's function.php

    remove_action( 'after_setup_theme', 'twentytwelve_custom_header_setup' );

    go to here
    http://core.trac.wordpress.org/browser/tags/3.5/wp-content/themes/twentytwelve/inc/custom-header.php

    and copy from #L21 to #L47 (including line #21 and including line #47)

    then in your child's function.php paste the code into it right below that first line you just added.

    then change the name of the function twentytwelve_custom_header_setup ( there are 2 instances ) to your own, like mytheme_custom_header_setup

    then look inside that function you will notice the 'default-image' in $args is currently empty, just specify one you want.

    Done.

    It looks complicated but it's not, and it could be easier if there were a filter hook to change the $args

  6. fernandopolania
    Member
    Posted 1 year ago #

    /**code to allow custom image in child theme*/
    
    remove_action( 'after_setup_theme', 'crossfitcrossfire_custom_header_setup' );
    
    function crossfitcrossfire_custom_header_setup() {
    22	        $args = array(
    23	                // Text color and image (empty to use none).
    24	                'default-text-color'     => '444',
    25	                'default-image'          => '',
    26
    27	                // Set height and width, with a maximum value for the width.
    28	                'height'                 => 250,
    29	                'width'                  => 960,
    30	                'max-width'              => 2000,
    31
    32	                // Support flexible height and width.
    33	                'flex-height'            => true,
    34	                'flex-width'             => true,
    35
    36	                // Random image rotation off by default.
    37	                'random-default'         => false,
    38
    39	                // Callbacks for styling the header and the admin preview.
    40	                'wp-head-callback'       => 'twentytwelve_header_style',
    41	                'admin-head-callback'    => 'twentytwelve_admin_header_style',
    42	                'admin-preview-callback' => 'twentytwelve_admin_header_image',
    43	        );
    44
    45	        add_theme_support( 'custom-header', $args );
    46	}
    47	add_action( 'after_setup_theme', 'twentytwelve_custom_header_setup' );
    /*end custom header image code-----------------------*/

    This is what I added. How do I specify and different image? ($args)

    Thanks and sorry.I'm not a coder.

  7. paulwpxp
    Font hero
    Posted 1 year ago #

    Copy and paste this to your child theme's function.php

    /**
     * add this to TwentyTwelve's Child theme's function.php
     * to define default header image which TwentyTwelve doesn't have
     */
    
    // remove default action from Twenty Twelve
    remove_action( 'after_setup_theme', 'twentytwelve_custom_header_setup' );
    
    // define new $args ,basically it's the same function copied over but with added default-image
    function mytheme_custom_header_setup() {
    	$args = array(
    		// Text color and image (empty to use none).
    		'default-text-color'     => '444',
    		'default-image'          => get_stylesheet_directory_uri() . '/images/mythemeheader.jpg',
    
    		// Set height and width, with a maximum value for the width.
    		'height'                 => 250,
    		'width'                  => 960,
    		'max-width'              => 2000,
    
    		// Support flexible height and width.
    		'flex-height'            => true,
    		'flex-width'             => true,
    
    		// Random image rotation off by default.
    		'random-default'         => false,
    
    		// Callbacks for styling the header and the admin preview.
    		'wp-head-callback'       => 'twentytwelve_header_style',
    		'admin-head-callback'    => 'twentytwelve_admin_header_style',
    		'admin-preview-callback' => 'twentytwelve_admin_header_image',
    	);
    
    	add_theme_support( 'custom-header', $args );
    }
    
    // add it the same way Twenty Twelve does
    add_action( 'after_setup_theme', 'mytheme_custom_header_setup' );

    This code is tested, it works.

    If not, under Appearance > Header click 'Restore Original Header Image'

    and also, make sure in your child theme there is a folder images with mythemeheader.jpg in it, or whatever you name it just make sure it matches the file name in the code.

  8. fernandopolania
    Member
    Posted 1 year ago #

    Thanks.I'll try it and get back to you.

  9. leejosepho
    Member
    Posted 1 year ago #

    make sure in your child theme there is a folder images with mythemeheader.jpg

    That can also be .png, correct?

  10. paulwpxp
    Font hero
    Posted 1 year ago #

    Correct, as long as the actual file's name matches in this line of code from above.

    'default-image' => get_stylesheet_directory_uri() . '/images/mythemeheader.jpg',

    The mythemeheader.jpg is just a placeholder name, could be whatever. Also, the folder images is not really necessary, it just a way to organize files.

  11. leejosepho
    Member
    Posted 1 year ago #

    We do have some more to do here, but you are "da man", paulwp!

    http://www.nonameyet.org/

    Many thanks!

    What I hope to eventually do there is to use that as a background and to place my other items already there and a smaller header image over it.

    How are you coming along there, fernandopolania?

  12. Ruud Evers
    Member
    Posted 1 year ago #

    Thanks a lot Paul, that did exactly what I needed.

  13. leejosepho
    Member
    Posted 1 year ago #

    To anyone interested: I have made a plugin that does what paulwp has shared here and I will gladly pass it along to anyone who needs it.

  14. paulwpxp
    Font hero
    Posted 1 year ago #

    Hi everyone,

    It turned out that the code above works because of there's something exclusive about how this particular function add_theme_support() works in WordPress, if interersted see #L1291-#L1294 in http://core.trac.wordpress.org/browser/tags/3.5/wp-includes/theme.php

    So to make a default header image in Twenty Twelve's Child, it's just a matter of defining only $arg we want. Here is the code, just copy and paste into child's function.php, this code is tested.

    /**
     * add this to TwentyTwelve's Child theme's function.php
     * to define default header image which TwentyTwelve doesn't have
     */
    function mytheme_custom_header_setup() {
    	// $args in add_theme_support() in child theme will auto override what defined in parent's
    	// see http://core.trac.wordpress.org/browser/tags/3.5/wp-includes/theme.php#L1292
    	$args = array(
    		'default-image' => get_stylesheet_directory_uri() . '/images/mythemeheader.jpg',
    	);
    	add_theme_support( 'custom-header', $args );
    }
    // add it the same way Twenty Twelve does
    add_action( 'after_setup_theme', 'mytheme_custom_header_setup' );
  15. leejosepho
    Member
    Posted 1 year ago #

    @paulwp: As I had mentioned, I have made a plugin of the code you have posted here, and I did that because (and as a rookie) I had read something somewhere about a plugin occasionally being preferable over an accumulation of things in functions.php. Either way, however, someone had suggested I submit the new plugin to the repository...and it has been accepted. But since I would/will be showing your username as the contributor of its code, I have come here again to first ask your permission for that mention of you.

    Many thanks.

    edit: Also, a link to this thread will be the one (and only) listed or shown anywhere in relation to the new plugin.

  16. paulwpxp
    Font hero
    Posted 1 year ago #

    @leejosepho

    Please go ahead, feel free to do whatever, credit to me is totally unnecessary, it's just a piece of code anyway. It's good that you make it useful for more people, and folks with higher coding skill can improve upon too.

    In the end we all benefit. :)

  17. leejosepho
    Member
    Posted 1 year ago #

    Here we go, paulwp...

    http://wordpress.org/extend/plugins/custom2012header/

    I only built its box, so any questions folks might have will come to you!

    Many thanks.

  18. dan77
    Member
    Posted 1 year ago #

    I trying to remove the custom header completely but for some reason

    'remove_action( 'after_setup_theme', 'twentytwelve_custom_header_setup' );'

    doesn't work!?

    can someone help :)

  19. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    @dan77 - if you need help, please start your own thread.

  20. taoshenh
    Member
    Posted 1 year ago #

    @leejosepho, I tried to load the plugin mentioned here by following the link supplied, unfortunately the directory has no record of your plug in.

  21. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    @taoshenh
    If you need further support than that provided in this thread, you can create your own thread.

  22. leejosepho
    Member
    Posted 1 year ago #

  23. c.devlin
    Member
    Posted 1 year ago #

    Hi there,

    Will preface this by saying I am not a coder - however, I am trying to create a child theme - (it is after the fact though). I have gone through the process outlined above and still cannot be a header image in my twenty twelve child theme. Can anyone help?

  24. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    @c.devlin, you can discuss that in your own thread.

  25. agwatrsy
    Member
    Posted 1 year ago #

    @paulwpxp

    I should have looked here much earlier - it would have saved me an awful lot of time...

    Many thanks for your simplified function for the child theme - it works beautifully!

    Cheers! :-)

  26. Amalux
    Member
    Posted 7 months ago #

    I'm not a very experienced coder but I seem to have found a simpler solution.

    First, I uploaded the desired banner image into an image directory within the child theme as instructed a little further up.

    Then, in the child header in this group of coding:

    <?php $header_image = get_header_image();
    		if ( ! empty( $header_image ) ) : ?>
    			<a>"><strong><img src="<?php echo esc_url( $header_image ); ?>" </strong>class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
    		<?php endif; ?>
    
    . . .  change the bolded code (also show below)
    <strong><img src="<?php echo esc_url( $header_image ); ?>"</strong>

    . . . and change it to resemble something like this

    <img src="<?php echo esc_url( get_stylesheet_directory_uri() . '/images/desiredbanner2013.jpg' ); ?>"

    This seems to have changed the header image in the specific template where I wanted it and preserved the full functionality of the header.

    So far!!

  27. Amalux
    Member
    Posted 7 months ago #

    Sorry for the misplaced bolding.

  28. Ruud Evers
    Member
    Posted 7 months ago #

    @Amalux: your solution is fine when you only need one header image for the whole site. But when using this, the custom header functionality of the theme won't work anymore.

  29. Amalux
    Member
    Posted 7 months ago #

    I think you wold be right if this is done to the default header.php file. I did this to a custom header file placed in child theme attached to as specific template.

    So far, both header files seem to be working fine on either header without disturbing the functionality of either.

    If I am wrong please show me as I would not want it to compromise my own site.

  30. Ruud Evers
    Member
    Posted 7 months ago #

    If you do it like that, than yes, it won't hurt the functionality. It is, however, a solution for a different problem than the one that was discussed here.

    The only disadvantage of your solution that I can think of is that, if you need to make a change to header.php file, you need to make it to the custom header file as well. (Also, any update to the WordPress theme that changes the header.php file, you will have to add manually to your custom header file, but this counts for every child theme version of header.php).

    To use different custom headers on different pages, you could also use a plugin like WP Display Header.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic