Register or enqueue scripts?

• 

  moymadethis · Member · Mar 21, 2017 at 4:23 pm

  • Copy link
  • Add topic to favorites

  I’ve registered/enqueued my files in the following script:

  add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 100 );
  function my_theme_enqueue_styles() {
  
      // Dequeue files
      wp_dequeue_style( 'normalize');
      wp_dequeue_style( 'html5blank');
  
      // Equeue files
      wp_enqueue_style( 'main-css', get_stylesheet_directory_uri() . '/css/main.css' );
  
      wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:300,300i,400,400i,600,600i,700,700i');
  }
  
  add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts', 100 );
  function my_theme_enqueue_scripts() {
  
      // Dequeue files
      wp_deregister_script( 'conditionizr');
      wp_deregister_script( 'modernizr');
      wp_deregister_script( 'html5blankscripts');
  
      // Register/equeue files
      wp_register_script('responsive-nav', get_stylesheet_directory_uri() . '/js/responsive-nav.js', array('jquery'));
      wp_enqueue_script('responsive-nav'); // Enqueue it!
  
      wp_register_script('uniform-js', get_stylesheet_directory_uri() . '/js/jquery.uniform.min.js', array('jquery'));
      wp_enqueue_script('uniform-js');
  
      wp_register_script('main-js', get_stylesheet_directory_uri() . '/js/main.js', array('jquery'));
      wp_enqueue_script('main-js');
  }

  But I’ve been told I don’t need to use both register and enqueue it that correct? Likewise what I’m doing in the above script could be achieved with this:

  wp_enqueue_script( 'my-script', get_stylesheet_directory_uri() . /js/script.js', array( 'jquery', 'responsive-nav', 'uniform-js', '', true);

  I guess that won’t work through as I previously deregistered html5blankscripts. I’m not sure what that does, I guess it’s the parent theme equivalent of my main.js?

  As a bit of an aside, I notice my scripts don’t run in WordPress but they work in my static templates. Is that because anything that uses jQuery needs to be wrapped in jQuery(function($){ [SCRIPT HERE] });?

  So…

  $(function(){
  
      var navigation = responsiveNav(".site-nav__list", {
          customToggle: "#site-nav__toggle",
          open: function(){
              $("#site-nav__toggle").addClass('open');
          },
          close: function(){
              $("#site-nav__toggle").removeClass('open');
          }
      });
  });
  
  $("select, input[type='file'], input[type='checkbox'], input[type='radio']").uniform({selectAutoWidth: false, fileButtonClass: 'btn'});

  Would become:

  jQuery(function($){
  
      var navigation = responsiveNav(".site-nav__list", {
          customToggle: "#site-nav__toggle",
          open: function(){
              $("#site-nav__toggle").addClass('open');
          },
          close: function(){
              $("#site-nav__toggle").removeClass('open');
          }
      });
  });
  
  jQuery(function($){
  	$("select, input[type='file'], input[type='checkbox'], input[type='radio']").uniform({selectAutoWidth: false, fileButtonClass: 'btn'});
  });

  Hope that makes sense and I can get some clarity on this :)

• 

  kathrynwp · Staff · Mar 21, 2017 at 8:49 pm

  • Copy link

  These forums are for sites hosted on WordPress.com, but you’re running the WordPress software on your own hosting. If you need further help with your custom theme, feel free to post over at WordPress.org:

  https://wordpress.org/support/

  You’ll need a free WordPress.org account to post – if you don’t already have one, you can register here:

  https://wordpress.org/support/register.php