Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Short version: I am using the theme customizer in my theme and javascript for the live preview. I am not sure how to implement the javascript for php(as seen in code excerpt).

I am creating a theme and using the theme customizer API. I have been using a separate javascript file to update the theme customizer page live so that when a user changes a setting it will reflect without the page being refreshed.

In the theme customizer I have a checkbox for the purpose of hiding a section on my theme. When the user selects this checkbox it hides the section, and if it is not checked the section stays. My issue is I don't know how to get this to work live in the theme customizer. As it stands I have to save the setting after checking the box and then refresh the page to test it out.

I am using a theme_mod to store the value of the checkbox. Then in the code for my homepage(the page this sections on) it checks for that value and if it is checked it will ignore the section. Here is the code I am talking about.

<?php if( appify_theme_mod( 'hide_above_footer' ) == '') { ?>

           <div class="section5" id="mobile">

              <div class="sections container">

                <div class="iphone"></div>

                <div class="iphone-bg"></div>

                <div class="section5-text">

                  <h3>Some sample text</h3>

                  <p>Lorem ipsum dolor sit amet, ne eirmod labitur percipitur mei. Primis labitur vituperata mel no, at vim vidit eruditi. Deserunt posidonium nec eu. Eu sed liber molestiae comprehensam, eam civibus eligendi referrentur at.</strong></p>

              </div>
                <div class="clear"></div>
            </div>
          </div>
    <?php } ?>

This is an example of what I would use for html:

/** Header Text */
wp.customize( 'theme_header_text', function( value ) {
    value.bind( function( to ) {
        $( '.header-text' ).html( to );
    } );
} );

So my issue is I don't know how to write the javascript for live preview to hide the section. Do I need to call the php in the javascript and if so how would that look.

I really appreciate any help.

share|improve this question
add comment

Know someone who can answer? Share a link to this question via email, Google+, Twitter, or Facebook.

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.