Adding JavaScript files to a WordPress Theme

Question

It is my first time in creating a WordPress Theme using Bootstrap 3.0, when the files where just plain HTML, everything was functioning correctly that is until I converted it into a WordPress theme.

The JavaScript is not loading properly, I am unsure if I should just plainly call through either header.php or footer.php

Below are the code I used.

header.php

<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
    <?php wp_enqueue_script("jquery"); ?>
    <?php wp_head(); ?>
</head>

index.php

<?php get_header(); ?>
        <!--carousel-->
        <div class="container full-width">
            <div id="myCarousel" class="carousel slide">
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="img/1.jpg" alt="Slide-0">
                        <div class="cap-right slide-cap">
                            <img src="img/slide1cap.png">
                            <a href="#">View Lookbook</a>
                        </div>
                    </div>
                    <div class="item">
                        <img src="img/2.jpg" alt="Slide-1"> 
                        <div class="cap-right slide-cap">
                            <img src="img/slide2cap.png" alt="SlideCap">
                            <a href="#">View More</a>
                        </div>
                    </div>
                    <div class="item">
                        <img src="img/3.jpg" alt="Slide-2">
                        <div class="cap-left slide-cap">
                            <img src="img/slide3cap.png" alt="SlideCap">
                            <a href="#">Watch Video</a>
                        </div>
                    </div>
                    <div class="item">
                        <img src="img/4.jpg" alt="Slide-3">
                        <div class="cap-left slide-cap">
                            <img src="img/slide4Cap.png" alt="SlideCap">
                            <a href="#">Shop Shirts Now</a>
                        </div>
                    </div>
                </div>
                <!--arrows-->
                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>
        </div>
        <!--end of carousel-->
<?php get_footer(); ?>

functions.php

<?php 

function wpbootstrap_scripts_with_jquery()
{
    // Register the script like this for a theme:
    wp_register_script( 'custom-script', get_template_directory_uri() . 'js/bootstrap.min.js', array( 'jquery' ) );
    // For either a plugin or a theme, you can then enqueue the script:
    wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );

?>

Dylan Hildenbrand · Accepted Answer · 2013-12-02 19:31:47Z

1

This is how I normally would register the scripts on my WordPress installs.

<?php 
    function wpbootstrap_scripts_with_jquery()
    {
        wp_deregister_script( 'bootstrap-min-js' );
        wp_register_script( 'bootstrap-min-js', get_bloginfo('template_directory') . '/js/bootstrap.min.js', array( 'jquery' ) );
        wp_enqueue_script( 'bootstrap-min-js' );
    }
    add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );

    ?>

answered Dec 2, 2013 at 19:31

Dylan Hildenbrand

4498 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

lozadaOmr Over a year ago

I tried adding your code to the functions.php still to no avail. I even checked the source code in Chrome Inspector the script was not even included in either <head> or near the <footer> , Also looking at the Resources at Chrome Inspector I can't even find the scripts that I am trying to include.

Dylan Hildenbrand Over a year ago

Once you've registered the scripts with WordPress, how are you calling them?

lozadaOmr Over a year ago

I did try calling the function, in this case the add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );

Dylan Hildenbrand Over a year ago

The add_action() function doesn't actually execute the javascript though. By calling wp_head() in your header file, this will guarantee that your javascript is being registered within WordPress so that you can call it in in a $(document).ready() or something similar.

lozadaOmr Over a year ago

looking again at the code, I believe to have called wp_head() at the header.php , although I am not familiar as to how I will use $(document).ready() So as temporary measure, I just included the script by using <script src="javscript.js"></script> tag. I know it's not best way, but I was stuck for quite sometime and need to move forward.

stry-kai · Accepted Answer · 2014-06-19 08:12:33Z

0

All you need do is change

js/bootstrap.min.js

to

/js/bootstrap.min.js

Note: you need to view page source (from your browser) to confirm if the path to the bootstrap.min.js is correct, else it wont work.

answered Jun 19, 2014 at 8:12

stry-kai

4934 silver badges7 bronze badges

Comments

Ondrej Janacek · Accepted Answer · 2014-02-01 14:01:39Z

0

write this wp_enqueue_script("jquery"); after the wp_head();

then it should work.

edited Feb 1, 2014 at 14:01

Ondrej Janacek

12.6k14 gold badges62 silver badges96 bronze badges

answered Dec 2, 2013 at 14:38

Sumit

7084 silver badges12 bronze badges

1 Comment

lozadaOmr Over a year ago

I changed the code to this but I don't think the javascript/jquery is still not working.

Collectives™ on Stack Overflow

Adding JavaScript files to a WordPress Theme

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related