0

Am currently using get_theme_mod to offer theme customisations in CSS which works great. Would now like to offer theme customisations where it would alter JavaScript. Am currently achieving this through the use of wp_print_footer_scripts however it causes initial problems with many optimisation plugins. For instance Autoptimize requires the altering of an advanced option to

Also aggregate inline JS

which would suggest something's wrong and there has to be a way to achieve the same result but by using script enqueuing in a manner which is compatible with optimisation plugins.

Here are the two relevant excerpts of the code:

Function for adding inline JavaScript

function theme_customize_js() {
  ?>
    <script type="text/javascript">
      (function($){
        'use strict';

        $('.owl-carousel').owlCarousel({
          animateIn: '<?= get_theme_mod( 'carousel_animatein', 'fadeIn' ); ?>',
          animateOut: '<?= get_theme_mod( 'carousel_animateout', 'fadeOut' ); ?>',
          autoHeight: <?= get_theme_mod( 'carousel_autoplay', False ) ? 'true' : 'false'; ?>,
          autoplay: <?= get_theme_mod( 'carousel_autoplay', True ) ? 'true' : 'false'; ?>,
          autoplaySpeed: <?= get_theme_mod( 'carousel_autoplayspeed', 'false' ); ?>,
          center: <?= get_theme_mod( 'carousel_center', True ) ? 'true' : 'false'; ?>,
          dots: <?= get_theme_mod( 'carousel_dots', True ) ? 'true' : 'false'; ?>,
          dotsSpeed: <?= get_theme_mod( 'carousel_dotsspeed', 'false' ); ?>,
          dragEndSpeed: <?= get_theme_mod( 'carousel_dragendspeed', 'false' ); ?>,
          fluidSpeed: <?= get_theme_mod( 'carousel_fluidspeed', False ) ? 'true' : 'false'; ?>,
          items: <?= get_theme_mod( 'carousel_items', 1 ); ?>,
          loop: <?= get_theme_mod( 'carousel_loop', True ) ? 'true' : 'false'; ?>,
          nav: <?= get_theme_mod( 'carousel_nav', True ) ? 'true' : 'false'; ?>,
          navSpeed: <?= get_theme_mod( 'carousel_navspeed', 'false' ); ?>,
          navText : [
            '<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>',
            '<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>'
          ],
          smartSpeed: <?= get_theme_mod( 'carousel_smartspeed', 250 ); ?>
        });
      })(jQuery);
    </script>
  <?php
}

Action for adding inline JavaScript

add_action( 'wp_print_footer_scripts', 'theme_customize_js');
  • You can move this code in js file and use developer.wordpress.org/reference/functions/wp_localize_script function to pass PHP values to javascript. – Vinod Dalvi Apr 23 '17 at 9:40
  • Thanks, but that seems more like a hack than the correct way to achieve this (misuse of the localisation system). Think I'll keep to informing people to tweak their optimisation plugin settings unless there's a solution which looks right. – Metalshark Apr 23 '17 at 10:27
  • Appreciate it's functionality that is built into Wordpress, however it is far more cumbersome to implement, requires using functions in a manner for which they are not designed and requires non-semanticly named functions. Thanks, but I'll think we'll have to agree to disagree here. – Metalshark Apr 23 '17 at 12:07
  • WordPress core uses the wp_localize_script function to do this on admin screens. It's the "official" means by which to do it. – Milo Apr 23 '17 at 18:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.