0

I am trying to implement an equivalent control to the default custom background that wordpress provides. If an image is inserted, it activates a couple of other control (eg. repeat, position etc.).

So, I have an image above the header and through a select control called 'above-header' the user may select if he/she needs the element. If not, the other related controls shouldn't show up.

I've managed to deactivate the rest of the controls if selected 'no' and activate them if selected anything else. The problem is that when the page is refreshed the controls show up again even if the value is saved as 'no'. What am I doing wrong? Thanks in advance, here is the code:

wp.customize( 'above-header', function( value ) {
    value.bind( function( to ) {            
        if ( to == 'no' ) {
            //If selected 'no' deactivate related controls
            parent.wp.customize.control('img-above-header').deactivate();
            parent.wp.customize.control('parallax-above-header').deactivate();
            parent.wp.customize.control('text-inside-img-above-header').deactivate();
            parent.wp.customize.control('inside-img-above-header').deactivate();
            //Hide the element
            $( '.parallax' ).css( 'display', 'none' );                 
        }
        else {
            //Activate the controls
            parent.wp.customize.control('img-above-header').activate();
            parent.wp.customize.control('parallax-above-header').activate();
            parent.wp.customize.control('text-inside-img-above-header').activate();
            parent.wp.customize.control('inside-img-above-header').activate();
            //Show the element
            $( '.parallax' ).css( 'display', 'inherit' );                
        } 
    } );
} );

1 Answer 1

1

Found a solution. Turns out the activate, deactivate functions are not persistent, meaning the controls' state are reset if the page is refreshed!

Therefore I used 'active_callback' => 'fname' in my customizer.php in order to make changes persistent where fname is the function name as seen below.

function fname() {
    if ( !strcmp ( get_theme_mod('above-header'), 'no') == 0  ) {
        return true;
    }
    else {
        return false;
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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