Question posted in
The full documentation can be found here.

Divi theme – WordPress – load jQuery in head on specific page Template

I have a page template that needs jQuery loaded in the header instead of the footer.

The Theme (Divi Theme) loads jQuery in the footer by default. This causes some errors, when jQuery is loaded twice.

Is there any way I can modify <?php wp_footer(); ?> to exclude jQuery for this template?

Thanks.

Template: 

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
  <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="<?php echo get_site_url(); ?>/cam-forms/styles/cam-forms.min.css" />
    <script type="text/javascript" src="<?php echo get_site_url(); ?>/cam-forms/js/jquery.js"></script>
    <script type="text/javascript" src="<?php echo get_site_url(); ?>/cam-forms/js/jquery-migrate.min.js"></script>        
  </head>
  <body>       
    <?php echo do_shortcode( get_field('form') );  ?>    
    <?php wp_footer(); ?>
  </body>
</html>
Tags:

2

Answers


  1. 0

    You have to add <?php wp_head(); ?> in the following place:

    <!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
  <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="<?php echo get_site_url(); ?>/cam-forms/styles/cam-forms.min.css" />
    <script type="text/javascript" src="<?php echo get_site_url(); ?>/cam-forms/js/jquery.js"></script>
    <script type="text/javascript" src="<?php echo get_site_url(); ?>/cam-forms/js/jquery-migrate.min.js"></script>
  <?php wp_head(): ?>  
  </head>
  <body>       
    <?php echo do_shortcode( get_field('form') );  ?>    
    <?php wp_footer(); ?>
  </body>
</html>

    Then, in you file functions.php add this..

    function theme_scripts(){
  wp_register_script('fileName', get_template_directory_uri() . '/js/file.js', array( ), '1.0.0');
  wp_enqueue_script('fileName');
}
add_action('init', 'theme_scripts');

    Also I always suggest you to work with the minified files for CSS and JS.

    Login or Signup to reply.
  2. 0

    add below function in function.php for add js and css file in header and remove file in footer

    <?php
remove_action('wp_footer', 'wp_enqueue_scripts', 1);
add_action('wp_head', 'wp_enqueue_scripts', 5);
function mycustomscript_enqueue() {
    wp_enqueue_style( 'ca-forms-min', get_template_directory_uri() . '/cam-forms/styles/cam-forms.min.css', array('ca-forms-min'));
    wp_enqueue_script( 'jquery', get_stylesheet_directory_uri() . '/cam-forms/js/jquery.js', array( 'jquery' ));
    wp_enqueue_script( 'jquery-migrate', get_stylesheet_directory_uri() . '/cam-forms/js/jquery-migrate.min.js', array( 'jquery-migrate' ));
}
add_action( 'wp_enqueue_scripts', 'mycustomscript_enqueue' );
?>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search