1

I've seen theme support (add_theme_support) for "custom-header", "custom-background" and "custom-logo", but not for footer (footer colur or image).

Is there no option to let users choose footer color or image via "Appearance" --> "Customize"?

Thank you for your advice!

2

You can use following class put inside your theme's functions.php file. Theme Customization API will render the custom color selector control on the Theme customizer from this.

class MyTheme_Customize {
public static function register ( $wp_customize ) {
$wp_customize->add_section( 'mytheme_options', 
array(
'title'       => __('MyTheme Options RR', 'twentynineteen' ), //Visible title of section
'priority'    => 3, //Determines what order this appears in
'capability'  => 'edit_theme_options', //Capability needed to tweak
'description' => __('Allows you to customize some example settings for MyTheme.', 'twentynineteen'), //Descriptive tooltip
) 
);

//2. Register new settings to the WP database...
$wp_customize->add_setting( 'link_textcolor',
array(
'default'    => '#333333', //Default setting/value to save
'type'       => 'theme_mod', //Is this an 'option' or a 'theme_mod'?
'capability' => 'edit_theme_options', //Optional. Special permissions for accessing this setting.
'transport'  => 'refresh', //What triggers a refresh of the setting? 'refresh' or 'postMessage' (instant)?
'sanitize_callback'  => 'esc_attr', //sanitization (optional?)
) 
);      

//3. Finally, we define the control itself (which links a setting to a section and renders the HTML controls)...
$wp_customize->add_control( new WP_Customize_Color_Control(
$wp_customize, //Pass the $wp_customize object (required)
'mytheme_link_textcolor', //Set a unique ID for the control
array(
'label'      => __( 'Footer Background Color', 'twentynineteen' ), //Admin-visible name of the control
'settings'   => 'link_textcolor', //Which setting to load and manipulate (serialized is okay)
'priority'   => 10, //Determines the order this control appears in for the specified section
'section'    => 'colors', //ID of the section this control should render in (can be one of yours, or a WordPress default section)
) 
) );

//4. We can also change built-in settings by modifying properties. For instance, let's make some stuff use live preview JS...
$wp_customize->get_setting( 'blogname' )->transport = 'refresh';
$wp_customize->get_setting( 'blogdescription' )->transport = 'refresh';
$wp_customize->get_setting( 'header_textcolor' )->transport = 'refresh';
$wp_customize->get_setting( 'background_color' )->transport = 'refresh';

}

public static function header_output() {
?>
<!--Theme Customizer CSS--> 
<style type="text/css"> 
<?php self::generate_css('#footer', 'color', 'link_textcolor'); ?>
</style> 
<!--/Theme Customizer CSS-->
<?php
}

public static function generate_css( $selector, $style, $mod_name, $prefix='', $postfix='', $echo=true ) {
$return = '';
$mod = get_theme_mod($mod_name);
if ( ! empty( $mod ) ) {
$return = sprintf('%s { %s:%s; }',
$selector,
$style,
$prefix.$mod.$postfix
);
if ( $echo ) {
echo $return;
}
}
return $return;
}
}

// Setup the Theme Customizer settings and controls...
add_action( 'customize_register' , array( 'MyTheme_Customize' , 'register' ) );

// Output custom CSS to live site
add_action( 'wp_head' , array( 'MyTheme_Customize' , 'header_output' ) );

Note: You should change theme name (twentynineteen) to your theme's name. just use search and replace

  • Thank you @Vishwa for this! It works perfectly, I couldn't have done this without your help! Thanks heaps!! – Joey Apr 25 at 3:59
  • Glad to be a help @Joey. anyway, if this works for you, you can upvote/accept it so it'll be helpful to someone else – Vishwa Apr 25 at 4:01
  • Thanks @Vishwa, I've just accepted and upvoted (but I don't have enough reputation to change the publicly-displayed score). By the way, upon testing with theme checker, it says "Found a Customizer setting that did not have a sanitization callback function.". Adding 'sanitize_callback' => 'sanitize_hex_color' just under 'transport' => 'refresh' has removed the warning, but did I do it correctly? – Joey Apr 25 at 4:22
  • @Joey yes, it's one way of doing that. I added another way I found. just use whatever works for your situation :) – Vishwa Apr 25 at 4:34
  • Great, thank you @Vishwa for enlightening me! – Joey Apr 25 at 4:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.