[Resolved] Adding a customizer option in child theme

Home Forums Support [Resolved] Adding a customizer option in child theme

Home Forums Support Adding a customizer option in child theme

  • This topic has 8 replies, 2 voices, and was last updated 10 years ago by Tom.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #1823
    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.

    Lead Developer
    Lead Developer

    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 πŸ™‚

    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:

    function evp_customize_register( $wp_customize )
       	$wp_customize->add_setting( 'generate_headerbgimage' );
    		new WP_Customize_Image_Control(
    				'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!

    Lead Developer
    Lead Developer

    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.


    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).

    Lead Developer
    Lead Developer

    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 πŸ™‚


    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 )
    			'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.

    Lead Developer
    Lead Developer

    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.


Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.