Duplicate Custom Header Image Function
-
Hi everyone!
I need to clone/duplicate the ability to personalize an image in a header. I want to use this function to display a selected image in a different location on the page via PHP.

Could someone direct me how to do this?
-
You can use WordPress featured image function: https://codex.wordpress.org/Post_Thumbnails
Or, you could use custom fields: https://codex.wordpress.org/Custom_Fields
Thanks for answer.
I meant to include in the personalization of the theme the same function like “Header Image” (with suggested images and randomization).I want add/edit all files only in theme files (wp-content/themes/themename/).
I found file in folder /wp-admin/ that is responsible for “Header Image” function.
https://github.com/WordPress/WordPress/blob/master/wp-admin/custom-header.phpIf you know how to copy this script and what must be change to work independly from base “Header Image” wordpress function please help me with this.
In your theme’s functions.php, or in a file included by reference there, extend the Custom_Image_Header class. You can override any methods that are not declared final, as well as add your own. You’ll need to alter anything that explicitly relates to the real header image that affects output. It’s OK to call things “custom_header” or whatever internally, you only need to be concerned with external alterations to the real header image.
Any method that affects the real header image can be overridden by copying the original declaration into your class and altering as needed. You don’t need to copy portions you do not need to change, they’ll remain available as parent methods. In some cases it may be best to completely rewrite the entire method.
@bcworkz could you help me with this? I never did that before. I copied custom-header.php file and change all “Custom_Image” to “Second_Custom_Image” and “custom-header” to “custom-second-header”.
Also I added to customizer.php:
add_theme_support(‘custom-second-header’);Unfortunately it doesn’t work. This is very important for me. If you can please help me.
I’ll do what I can, but adding functional customizer objects can get pretty involved.
add_theme_support() only works with specific core features, adding your own will accomplish nothing. Since your image code is not a core feature, there’s no reason to declare support. Your code is on it’s own, it just needs to work.
You likely didn’t need to copy the entire class declaration, but it’s OK to do so. It does make it easier to keep track of what’s going on. Using this class may not be the best idea anyway. More on this in a moment.
You need to add your own customizer section unless you want your image control to appear in an existing section. You also need to add a control and setting for your image. See the Customizer API documentation for specifics. Besides the API documentation, you can refer to how the core header image control and setting is done in these files:
/wp-includes/customize/class-wp-customize-header-image-control.php
/wp-includes/customize/class-wp-customize-header-image-setting.phpA word of warning: Merely going through and changing names of copied code without understanding what you are really doing is very likely going to end in failure. Some people get lucky and are able to do this successfully once in a while, but it’s a very poor way to customize things. You do not need to understand every line of code, but you should at least have a general idea of what each function is doing.
The core customizer header image implementation is fairly complex. It works very nicely, but there is a lot going on. Attempting to replicate it is a huge endeavor. I suggest you start with something much simpler so you can learn the basic mechanics without getting lost in complexity. Maybe at first adding a simple text value to the page somewhere is a better first “project”. Once you get that working and you understand how that works, change the text to an image URL and display the image on the page.
You can then start adding improved UI elements to the customizer object. I do not recommend the copy core code and rename approach at all. Building up from the basics is a much better approach IMO. It’s OK to refer to core code to see how something is done, but you ought to develop your own code. You are more likely to understand what’s going on and are in a better position to make appropriate corrections when things don’t work correctly. I know this is easier said than done for a lot of people. It’s at least something to strive for.
Thanks for respond. That’s what I did in customizer.php:
add_action('customize_register','second_header_image_customizer'); function second_header_image_customizer( $wp_customize ) { /* SETTINGS */ $wp_customize->add_setting( 'second_header_image2', array( 'default' => get_template_directory_uri() . '/img/header-image1.png', ) ); /* CONTROLS */ $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'second_header_image2', array( 'label' => __( 'Current', 'mythemename' ), 'section' => 'second_header_image_section', 'settings' => 'second_header_image2' ) ) ); /* SECTIONS */ $wp_customize->add_section( 'second_header_image_section', array( 'title' => __( 'Second header image' ), 'description' => __( 'Set second header image.' ), 'priority' => 60, ) ); }In header.php i added:
<img src="<?php echo esc_url( get_theme_mod( 'second_header_image2' ) ); ?>" />It works, but the default image only appears when I customize a theme, doesn’t show when browsing the page. When I choose a different image then appears while browsing the site. How to make the default image appear immediately?
I’m not sure I quite follow “How to make the default image appear immediately?”
When using the customizer? In the customizer sidebar or on the example page being shown? Or when browsing to the page in normal use?
The problem is only with the default image? All works when a chosen image is set?
When I browsing the page in normal use, default image doesn’t show. It show only when I using the customizer.
Yes, the problem is only with the default image.
Thanks for clarifying. It sounds like the condition is not addressed where no selection is stored in theme_mods. Try adding the default image URL as the second parameter passed to get_theme_mod() in header.php. For theme URLs, you can pass a sprintf() style argument.
// specifying a default theme mod value get_theme_mod( 'second_header_image2', '%s/img/header-image1.png')I know you provided a default for the setting when it was added. We’d expect that to be returned with get_theme_mod(), but that may not be the case. I’ve not investigated deep enough to be sure. It’s easier to just try using a default when getting a theme mod.
The topic ‘Duplicate Custom Header Image Function’ is closed to new replies.