Adding customisable colours to child theme

Resolved inbetweening
(@inbetweening)

9 years, 5 months ago

Hi all, hope you can help.

I’m building my first child theme and slowly getting my head around how it all works, but php and WordPress are still quite foreign languages to me and this one really has me stumped.

All I want to do is add an option to change the colour of the header in the customisation options. I could change it in the CSS of course, but I think it would make finding the right colours easier if I could do it in the customiser with everything else. So how do I add a customisation option to change the colour of an element of the page?

Thanks for your time/patience

Viewing 8 replies - 1 through 8 (of 8 total)

1wdtv
(@1wdtv)

9 years, 5 months ago

Hi there!
To add a new option to the customizer would require the same amount of CSS knowledge as making a quick snippet for your child theme…PLUS… knowledge of PHP and hooks in order to connect it all together.

See: http://wordpress.stackexchange.com/questions/214512/how-to-add-css-option-to-header-image-customizer

My suggestion is to just add a basic style sheet in the child theme that has a list of default rules (or commented-out rules).

Since the child theme css will take priority over the parent by default, this give you and your user the ability to just pick the hex color from a free online resource: https://www.google.com/search?q=online+color+picker

and then paste in that value.

This is how we do it with our free Responsive Child theme for all our students, and it’s quite easy and natural for anyone (like the kid’s game “Mad Libs”…just fill in the blank)

Cheers!
spence

Moderator bcworkz
(@bcworkz)

9 years, 5 months ago

If your goal is primarily to learn about coding the customizer, maybe this reference will help you:
https://developer.ww.wp.xz.cn/themes/customize-api/

Thread Starter inbetweening
(@inbetweening)

9 years, 5 months ago

Thanks both, I was doing it using CSS but I thought it would be easier to experiment with colours in the customizer so I could see a live example. I’ll have a look through that Stackexchange post and the Customize API and see if I can get my head around it!

Thanks,
Steve
Thread Starter inbetweening
(@inbetweening)

9 years, 5 months ago
Made a bit of progress but something’s not quite right. I managed to locate the functions in the original theme’s functions file. I also found that it linked to a customize.php file in the ‘inc’ folder. I added some details in and it worked, but I thought it better to move these into the child theme functions.php file. So I basically copied out those functions from functions.php and customize.php into my own functions.php, added ‘child’ to the function names (and anywhere else I saw the name). Now it shows as an option in the customize panel, but changing the colour does nothing.

I’ll be honest, I have pretty much no idea what any of these things mean below…but it seems I’ve missed something between copying it from the parent functions to the child functions… Any ideas?
```
function ruffie_child_curtomize_register( $wp_customize ){
  // Header background color
  $wp_customize->add_setting( 'header_background_color', array(
    'default'	=> '#fffff',
    'sanitize_callback' => 'sanitize_hex_color'
  ) );

  $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_background_color', array(
    'label'        => __( 'Header Background Color', 'ruffie' ),
    'section'    => 'colors',
    'settings'   => 'header_background_color',
  ) ) );
}
add_action('customize_register', 'ruffie_child_curtomize_register');

function ruffie_child_sanitize_checkbox( $input ) {
  // Boolean check
  return ( ( isset( $input ) && true == $input ) ? true : false );
}

function ruffie_child_customize_styles(){
	$options = [
		esc_attr( get_theme_mod('header_background_color', '#ffffff') )
	];

	$css = '
		*,
			.site-header-wrapper{
			background-color: %1$s;
		}
	';

	wp_add_inline_style( 'ruffie-child-style', vsprintf($css, $options) );
}
add_action( 'wp_enqueue_scripts', 'ruffie_child_customize_styles' );
```
Moderator bcworkz
(@bcworkz)

9 years, 5 months ago

When you say changing the colour does nothing, is this even when the options are saved and the page reloaded? Or the changes are not reflected in the preview? If it’s just the preview, you need to utilize selective refresh.
Thread Starter inbetweening
(@inbetweening)

9 years, 5 months ago
It’s not changing in preview or on the page. When I go back to edit the colour is saved on the option, but nothing has actually changed on the page/preview itself.
- This reply was modified 9 years, 5 months ago by inbetweening.
Moderator bcworkz
(@bcworkz)

9 years, 5 months ago
Are you enqueuing an external stylesheet with wp_enqueue_style() where the assigned tag is “ruffie-child-style”? If not, then wp_add_inline_style() will not output the necessary style declaration.

Be sure to add the inline style after the stylesheet is enqueued. Use a larger priority number if you need to.
- This reply was modified 9 years, 5 months ago by bcworkz. Reason: another thought
Thread Starter inbetweening
(@inbetweening)

9 years, 5 months ago

I hadn’t, that’s fixed it!

Thanks a lot.