[Resolved] Adding a customizer option in child theme

[Christian Zumbrunnen]

Hi Tom and everybody
First of all: I’m stunned of your work. It’s a very powerful theme and I want to use it as base for a child theme as I have some special requirements concerning the header.

For example I need a background-image for the header.
Firstly I thought I can hardcode it in the child themes header.php file but obviousliy that’s not the way to go. So I thought to try to add a customizer function.

I found the code in inc/customizer.php and was able to copy/customize what I need – juhui!

But of course I don’t want to mess around with the masterwork/parent theme.

Is it possible to add such changes to the child theme?

Would I need to have a child theme function.php and in that call my own inc/customizer.php? Any hints that help me start in the right direction would be greatly appreciated.

[Tom]

Hi Christian,

Easiest way would be just to use CSS to add the background image in your child theme.

I’m currently working on an addon that will allow you to add background images to all of the elements.

Of course, you can add new sections yourself via the child theme – you just need to follow the directions on how to add customizer controls and settings and add your own section.

1. Add the section
2. Add the control, and set the section above
3. Add the setting

You can do this in plugin form, or in your child theme.

Hope this helps 🙂
Tom

[Christian Zumbrunnen]

Hi Tom
Thanks for your immediate answer!
Your answer only helps a little.

I tried this:
added a functions.php file to my child theme with

require get_stylesheet_directory() . ‘/inc/customizer-extension.php’;

in this customizer-extension.php I addes an action with a function with $wp_customize->add_control…

obviously that’s somehow wrong as it leeds to a white screen of dead 😉

So where exactly do I need to add the section, control and setting.

Propably I can do it directly in the functions.php but if I want to have it in a similar structure as in the parent theme can I extend/replace the inc/customizer.php?

[Christian Zumbrunnen]

ok got it thanks to the codex:
http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
http://codex.wordpress.org/Plugin_API/Action_Reference/customize_register

function evp_customize_register( $wp_customize )
{
   	$wp_customize->add_setting( 'generate_headerbgimage' );
 
	$wp_customize->add_control(
		new WP_Customize_Image_Control(
			$wp_customize,
			'generate_headerbgimage',
			array(
				'label' => __('Hintergrundbild','generate'),
				'section' => 'title_tagline',
				'settings' => 'generate_headerbgimage',
                'priority'   => 15
			)
		)
	);
}
add_action( 'customize_register', 'evp_customize_register' );

works with either this code directly in functions.php of child theme or in a separate file which will be called in the child themes function.php like this:

require get_stylesheet_directory() . ‘/inc/evp_customizer.php’;

I’m really exited that your theme is so well organized and structured.
Makes it possible to (partly) understand and customize even for me. Thanks a lot!

[Tom]

Looks perfect to me – the codex is awesome!

You can always look in the theme’s customizer.php file in the inc/ folder for more examples as well.

Thanks!
Tom

[Christian Zumbrunnen]

Thanks. It’s incredible, how much time I invest in simple customizations.

Now, of course I need to add a style either directly to the header (which seems to be the simpler method) or wp_enqueue_style.

It didn’t workout yet.

I see, that you enqueue quit a lot of styles.
Is there a good way to concatenate and minify the styles?

I saw that you use a version parameter in the file calls.
Probably it should be possible to use the hook to also concatenate and minify the styles.

Just an idea. Right now I’m struggling enough with the simple task of outputting the style depending on the contents of the option field. I tried to have it somewhat similar to how you do it with the logo but wasn’t successful yet 😉

But I keep on learning and I really like your theme.

It’s not as bloated/complicated as some but I think more advanced than _s (which I first wanted to use as base).

[Tom]

You can use your child theme’s CSS file which is enqueued for you – no need to add your own.

To combine all of the css files and javascript, you can use a plugin like W3 Total Cache: https://wordpress.org/plugins/w3-total-cache/

There’s definitely a lot to learn when it comes to adding customizer options and then outputting them on the page, but there’s lots of resources out there to get you started 🙂

Tom

[Christian Zumbrunnen]

Hi Tom
May I ask you something more?

As I can’t use variables/php in the css (I think) I’d need to read the value of the option directly in the header.php (of my child theme).

You seem to use a function “generate_settings” to prepare the settings. Could I kind of extend on your function in the child theme?

How is the value of “$wp_customize->add_setting( ‘generate_headerbgimage'” stored and especially retrievable?

I tried different ways but get errors like “Undefined variable” “Undefined index” depending on the way I try (eg “get_option ( $headerbgimage )” or “get_option ( $generate_headerbgimage )”
I also tried to use something like:

function evp_customize_register( $wp_customize )
{
   	$wp_customize->add_setting(
   	     'generate_headerbgimage[headerbgimg]',
   	     array(
			'default' => '',//$defaults['headerbgimg'],
			'type' => 'option'
         )
   	 );

in the customizer the bgimage is stored, I just don’t get how to retrieve it.

I’d appreciate any hints that lead me in the right direction also I’m aware that I can’t take this extra effort of you for granted.

[Tom]

Hi there,

There’s many ways to do this, but I find this the best: https://gist.github.com/proframework/70fbf836b4254175429e

This is how GeneratePress generates all of the CSS.

It may be a bit complicated if you don’t know PHP, but it’s a good block of code to sift through.

You don’t have to touch anything except the area inside the $your_css array.

Tom

[Author]

Posts