how can I make my javascript work with wp_enqueue_script?
Question
I have downloaded a free HTML5 theme, that I am trying to adapt it to Wordpress. The CSS is working fine, but not the javascript.
I have basically tried everything, but none of it works. The javascript seems to be loading, as I can log every js file in the console, but none of the expected behaviours happen (scrolling, for example). Problem is that the javascript is not mine, so I don't really understand how it works. But on the original HTML5 theme, everything works fine, so it also should work with Wordpress.
I am loading 6 script files in functions.php, all of them in the footer. They load in the right order (I log them in the console):
function paradigm_scripts(){
wp_enqueue_script('jquery.min', get_template_directory_uri() . '/js/jquery.min.js',$in_footer = true);
wp_enqueue_script('scrolly', get_template_directory_uri() . '/js/jquery.scrolly.min.js', $in_footer = true);
wp_enqueue_script('browser', get_template_directory_uri() . '/js/browser.min.js', $in_footer = true);
wp_enqueue_script('breakpoints', get_template_directory_uri() . '/js/breakpoints.min.js', $in_footer = true);
wp_enqueue_script('util', get_template_directory_uri() . '/js/util.js', $in_footer = true);
wp_enqueue_script('main', get_template_directory_uri() . '/js/main.js',$in_footer = true);
}
add_action('wp_enqueue_scripts', 'paradigm_scripts');
This is my front-page.php file:
<ul class="actions">
<li>
<a href="#first" class="arrow scrolly"><span class="label">Next</span></a>
</li>
</ul>
When clicking on Next, it's meant to scroll, but it doesn't, it just goes to the anchor, without scrolling.
3 answers
solution1
0 2019-10-09 10:04:20
You could do like this:
I have worked on your question and i have make page home in admin panel then i have create page-home.php in theme folder then i have make header.php and footer.php and just include those files in page-home.php
1) header.php
<!DOCTYPE HTML>
<!--
Paradigm Shift by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Paradigm Shift by HTML5 UP</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/assets/css/main.css" />
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
second change i have applied in footer.php
2) footer.php
<footer>
<ul class="items">
<li>
<h3>Email</h3>
<a href="#">information@untitled.ext</a>
</li>
<li>
<h3>Phone</h3>
<a href="#">(000) 000-0000</a>
</li>
<li>
<h3>Address</h3>
<span>1234 Somewhere Road, Nashville, TN 00000</span>
</li>
<li>
<h3>Elsewhere</h3>
<ul class="icons">
<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon brands fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
<li><a href="#" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
<li><a href="#" class="icon brands fa-codepen"><span class="label">Codepen</span></a></li>
</ul>
</li>
</ul>
</footer>
</section>
<!-- Copyright -->
<div class="copyright">© Untitled. All rights reserved. Design: <a href="<?php echo get_template_directory_uri(); ?>/https://html5up.net">HTML5 UP</a>.</div>
</div>
<!-- Scripts -->
<script src="<?php echo get_template_directory_uri(); ?>/assets/js/jquery.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/assets/js/jquery.scrolly.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/assets/js/browser.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/assets/js/breakpoints.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/assets/js/util.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/assets/js/main.js"></script>
</body>
</html>
third change I have applied in Page-home.php
3) Page-home.php
<?php get_header(); ?>
<!-- Intro -->
<section class="intro">
<header>
<h1>Paradigm Shift</h1>
<p>A free responsive site template designed by <a href="https://twitter.com/ajlkn">@ajlkn</a> / <a href="<?php echo get_template_directory_uri(); ?>/https://html5up.net">HTML5 UP</a></p>
<ul class="actions">
<li><a href="#first" class="arrow scrolly"><span class="label">Next</span></a></li>
</ul>
</header>
<div class="content">
<span class="image fill" data-position="center"><img src="images/pic01.jpg" alt="" /></span>
</div>
</section>
<!-- Section -->
<section id="first">
<header>
<h2>Magna sed nullam nisl adipiscing</h2>
</header>
<div class="content">
<p><strong>Lorem ipsum dolor</strong> sit amet consectetur adipiscing elit. Duis dapibus rutrum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tristique libero eu nibh porttitor amet fermentum. Nullam venenatis erat id vehicula ultrices sed ultricies condimentum. Magna sed etiam consequat, et lorem adipiscing sed nulla. Volutpat nisl et tempus et dolor libero, feugiat magna tempus, sed et lorem adipiscing.</p>
<span class="image main"><img src="images/pic02.jpg" alt="" /></span>
</div>
</section>
<!-- Section -->
<section>
<header>
<h2>Feugiat consequat tempus ultrices</h2>
</header>
<div class="content">
<p><strong>Etiam tristique libero</strong> eu nibh porttitor amet fermentum. Nullam venenatis erat id vehicula ultrices sed ultricies condimentum.</p>
<ul class="feature-icons">
<li class="icon solid fa-laptop">Consequat tempus</li>
<li class="icon solid fa-bolt">Etiam adipiscing</li>
<li class="icon solid fa-signal">Libero nullam</li>
<li class="icon solid fa-cog">Blandit condimentum</li>
<li class="icon solid fa-map-marker-alt">Lorem ipsum dolor</li>
<li class="icon solid fa-code">Nibh amet venenatis</li>
</ul>
<p>Vehicula ultrices sed ultricies condimentum. Magna sed etiam consequat, et lorem adipiscing sed nulla. Volutpat nisl et tempus et dolor libero, feugiat magna tempus, sed et lorem adipiscing.</p>
</div>
</section>
<!-- Section -->
<section>
<header>
<h2>Ultrices erat magna sed condimentum</h2>
</header>
<div class="content">
<p><strong>Integer mollis egestas</strong> nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>
<!-- Section -->
<section>
<header>
<h3>Erat aliquam</h3>
<p>Vehicula ultrices dolor amet ultricies et condimentum. Magna sed etiam consequat, et lorem adipiscing sed dolor sit amet, consectetur amet do eiusmod tempor incididunt ipsum suspendisse ultrices gravida.</p>
</header>
<div class="content">
<div class="gallery">
<a href="<?php echo get_template_directory_uri(); ?>/images/gallery/fulls/01.jpg" class="landscape"><img src="images/gallery/thumbs/01.jpg" alt="" /></a>
<a href="<?php echo get_template_directory_uri(); ?>/images/gallery/fulls/02.jpg"><img src="images/gallery/thumbs/02.jpg" alt="" /></a>
<a href="<?php echo get_template_directory_uri(); ?>/images/gallery/fulls/03.jpg"><img src="images/gallery/thumbs/03.jpg" alt="" /></a>
<a href="<?php echo get_template_directory_uri(); ?>/images/gallery/fulls/04.jpg" class="landscape"><img src="images/gallery/thumbs/04.jpg" alt="" /></a>
</div>
</div>
</section>
<!-- Section -->
<section>
<header>
<h3>Nisl consequat</h3>
<p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam sed facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet mauris. Ut magna finibus nisi nec lacinia ipsum maximus.</p>
</header>
<div class="content">
<div class="gallery">
<a href="<?php echo get_template_directory_uri(); ?>/images/gallery/fulls/05.jpg" class="landscape"><img src="images/gallery/thumbs/05.jpg" alt="" /></a>
<a href="<?php echo get_template_directory_uri(); ?>/images/gallery/fulls/06.jpg"><img src="images/gallery/thumbs/06.jpg" alt="" /></a>
<a href="<?php echo get_template_directory_uri(); ?>/images/gallery/fulls/07.jpg"><img src="images/gallery/thumbs/07.jpg" alt="" /></a>
</div>
</div>
</section>
<!-- Section -->
<section>
<header>
<h3>Lorem gravida</h3>
<p>Proin aliquam facilisis ante interdum. Sed nulla amet lorem feugiat tempus aenean ornare velit lacus, ac varius sed enim lorem ullamcorper dolore. ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis.</p>
</header>
<div class="content">
<div class="gallery">
<a href="<?php echo get_template_directory_uri(); ?>/images/gallery/fulls/08.jpg" class="portrait"><img src="images/gallery/thumbs/08.jpg" alt="" /></a>
<a href="<?php echo get_template_directory_uri(); ?>/images/gallery/fulls/09.jpg" class="portrait"><img src="images/gallery/thumbs/09.jpg" alt="" /></a>
<a href="<?php echo get_template_directory_uri(); ?>/images/gallery/fulls/10.jpg" class="landscape"><img src="images/gallery/thumbs/10.jpg" alt="" /></a>
</div>
</div>
</section>
</div>
</section>
<!-- Section -->
<section>
<header>
<h2>Duis sed adpiscing veroeros amet</h2>
</header>
<div class="content">
<p><strong>Proin tempus feugiat</strong> sed varius enim lorem ullamcorper dolore aliquam aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore.</p>
<ul class="actions">
<li><a href="#" class="button primary large">Get Started</a></li>
<li><a href="#" class="button large">Learn More</a></li>
</ul>
</div>
</section>
<!-- Elements -->
<!--
<section>
<header>
<h2>Elements</h2>
</header>
<div class="content">
<section>
<header>
<h3>Text</h3>
</header>
<div class="content">
<p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>. Finally, <a href="<?php echo get_template_directory_uri(); ?>/#">this is a link</a>.</p>
<hr />
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<hr />
<h5>Blockquote</h5>
<blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.</blockquote>
<h5>Preformatted</h5>
<pre><code>i = 0;
while (!deck.isInOrder()) {
print 'Iteration ' + i;
deck.shuffle();
i++;
}
print 'Sorted in ' + i + ' iterations.';</code></pre>
</div>
</section>
<section>
<header>
<h3>Lists</h3>
</header>
<div class="content">
<h4>Unordered</h4>
<ul>
<li>Dolor pulvinar etiam.</li>
<li>Sagittis adipiscing.</li>
<li>Felis enim feugiat.</li>
</ul>
<h4>Alternate</h4>
<ul class="alt">
<li>Dolor pulvinar etiam.</li>
<li>Sagittis adipiscing.</li>
<li>Felis enim feugiat.</li>
</ul>
<h4>Ordered</h4>
<ol>
<li>Dolor pulvinar etiam.</li>
<li>Etiam vel felis viverra.</li>
<li>Felis enim feugiat.</li>
<li>Dolor pulvinar etiam.</li>
<li>Etiam vel felis lorem.</li>
<li>Felis enim et feugiat.</li>
</ol>
<h4>Icons</h4>
<ul class="icons">
<li><a href=#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href=#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
<li><a href=#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href=#" class="icon brands fa-github"><span class="label">Github</span></a></li>
</ul>
<h4>Actions</h4>
<ul class="actions">
<li><a href=#" class="button primary">Default</a></li>
<li><a href=#" class="button">Default</a></li>
</ul>
<ul class="actions stacked">
<li><a href=#" class="button primary">Default</a></li>
<li><a href=#" class="button">Default</a></li>
</ul>
</div>
</section>
<section>
<header>
<h3>Table</h3>
</header>
<div class="content">
<h4>Default</h4>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item One</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item Two</td>
<td>Vis ac commodo adipiscing arcu aliquet.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item Three</td>
<td> Morbi faucibus arcu accumsan lorem.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item Four</td>
<td>Vitae integer tempus condimentum.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item Five</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td>100.00</td>
</tr>
</tfoot>
</table>
</div>
<h4>Alternate</h4>
<div class="table-wrapper">
<table class="alt">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item One</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item Two</td>
<td>Vis ac commodo adipiscing arcu aliquet.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item Three</td>
<td> Morbi faucibus arcu accumsan lorem.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item Four</td>
<td>Vitae integer tempus condimentum.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item Five</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td>100.00</td>
</tr>
</tfoot>
</table>
</div>
</div>
</section>
<section>
<header>
<h3>Buttons</h3>
</header>
<div class="content">
<ul class="actions">
<li><a href="#" class="button primary">Primary</a></li>
<li><a href="#" class="button">Default</a></li>
</ul>
<ul class="actions">
<li><a href="#" class="button large">Large</a></li>
<li><a href="#" class="button">Default</a></li>
<li><a href="#" class="button small">Small</a></li>
</ul>
<ul class="actions">
<li><a href="#" class="button primary icon solid fa-download">Icon</a></li>
<li><a href="#" class="button icon solid fa-download">Icon</a></li>
</ul>
<ul class="actions">
<li><span class="button primary disabled">Disabled</span></li>
<li><span class="button disabled">Disabled</span></li>
</ul>
</div>
</section>
<section>
<header>
<h3>Form</h3>
</header>
<div class="content">
<form method="post" action="#">
<div class="fields">
<div class="field half">
<label for="demo-name">Name</label>
<input type="text" name="demo-name" id="demo-name" value="" placeholder="Jane Doe" />
</div>
<div class="field half">
<label for="demo-email">Email</label>
<input type="email" name="demo-email" id="demo-email" value="" placeholder="jane@untitled.tld" />
</div>
<div class="field">
<label for="demo-category">Category</label>
<select name="demo-category" id="demo-category">
<option value="">-</option>
<option value="1">Manufacturing</option>
<option value="1">Shipping</option>
<option value="1">Administration</option>
<option value="1">Human Resources</option>
</select>
</div>
<div class="field half">
<input type="radio" id="demo-priority-low" name="demo-priority" checked>
<label for="demo-priority-low">Low</label>
</div>
<div class="field half">
<input type="radio" id="demo-priority-high" name="demo-priority">
<label for="demo-priority-high">High</label>
</div>
<div class="field half">
<input type="checkbox" id="demo-copy" name="demo-copy">
<label for="demo-copy">Email me a copy</label>
</div>
<div class="field half">
<input type="checkbox" id="demo-human" name="demo-human" checked>
<label for="demo-human">Not a robot</label>
</div>
<div class="field">
<label for="demo-message">Message</label>
<textarea name="demo-message" id="demo-message" placeholder="Enter your message" rows="6"></textarea>
</div>
</div>
<ul class="actions">
<li><input type="submit" value="Send Message" class="primary" /></li>
<li><input type="reset" value="Reset" /></li>
</ul>
</form>
</div>
</section>
</div>
</section>
-->
<!-- Section -->
<section>
<header>
<h2>Get in touch</h2>
</header>
<div class="content">
<p><strong>Auctor commodo</strong> interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis.</p>
<form>
<div class="fields">
<div class="field half">
<input type="text" name="name" id="name" placeholder="Name" />
</div>
<div class="field half">
<input type="email" name="email" id="email" placeholder="Email" />
</div>
<div class="field">
<textarea name="message" id="message" placeholder="Message" rows="7"></textarea>
</div>
</div>
<ul class="actions">
<li><input type="submit" value="Send Message" class="button primary" /></li>
</ul>
</form>
</div>
<?php
get_footer();
?>
This is Working for me.I have tried the code and gave you the code
solution2
0 2019-10-09 10:22:23
Try following code:
function paradigm_scripts(){
wp_enqueue_script('scrolly', get_template_directory_uri() . '/js/jquery.scrolly.min.js',array( 'jquery' ), '1.0.0' true);
wp_enqueue_script('browser', get_template_directory_uri() . '/js/browser.min.js',array( 'jquery' ), '1.0.0' true);
wp_enqueue_script('breakpoints', get_template_directory_uri() . '/js/breakpoints.min.js',array( 'jquery' ), '1.0.0' true);
wp_enqueue_script('util', get_template_directory_uri() . '/js/util.js',array( 'jquery' ), '1.0.0' true);
wp_enqueue_script('main', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0.0' true);
}
array('jquery') is the dependancy that you can set upto your need. '1.0.0' is the version that you can either leave blank or you can write your own version
Also double check if your footer has wp_footer(); before you close </body> tag
I've removed jquery.min.js first line which is already included by WP. If not included you just need to mention dependency while you enqueue script.
solution3
0 2019-10-09 10:24:25
You are actually adding two JQuery files. First file is added by enqueue function as shown below.
wp_enqueue_script('jquery.min', get_template_directory_uri() . '/js/jquery.min.js',$in_footer = true);
Second wordpress builtin JQuery file is added because you have given dependency as 'jquery' in third parameter (array('jquery')) of enqueue function.
Solution
Only add file file, by mentioning dependency or by adding your js file manually.
In addition, call enqueue function as shown below.
wp_enqueue_script('scrolly', get_template_directory_uri() . '/js/jquery.scrolly.min.js',array('jquery'),'',true);
First parameter is handle of js file, 2nd is path, 3rd id dependency, 4th is version and 5th is weather you want to add scripts in footer. Last parameter only accepts true/false value.
Make sure that you have already placed all your scripts files inside your root/wp-content/themes/theme_name/js/ directory.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to load Javascript via wp_enqueue_script in Wordpress?
why is my wp_enqueue_script not working?
how do i use wp_enqueue_script?
How to use jquery and wp_enqueue_script
Wordpress wp_enqueue_script function not working, javascript file not loading
Add Javascript in Wordpress - functions.php with wp_enqueue_script()
Fixing a JavaScript conflict in Wordpress, help using wp_enqueue_script
Wordpress wp_enqueue_script my function is not executed
How to add script as a module using wp_enqueue_script WordPress
wp_enqueue_script or wp_head
Related Tags