Wordpress, adding custom scripts, in correct way

Question

I have to convert a theme built in HTML/CSS, into a Wordpress Theme. I'm quite new in Wordpress. The first what came in my mind for adding custom scripts to my theme was like in example bellow:

<!-- Bootstrap Scripts -->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/bootstrap.min.js"></script>

<!-- Superslides Script -->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.superslides.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.easing.1.3.js"></script>

<!-- ScrollBar Script -->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.nicescroll.min.js"></script>

<!-- Masonry Script -->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.masonry.min.js"></script>

<!-- Fancybox Script -->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.fancybox.min.js"></script>

<!-- Settings Script -->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/settings.js"></script>

But I believe this is not the correct way to add them, so I found another solution, but I'm not sure, if I wrote it correct, so next code I wrote is in the functions.php file:

    // Always use wp_enqueue_scripts action hook to both enqueue and register scripts
add_action( 'wp_enqueue_scripts', 'enqueue_and_register_my_scripts' );

function enqueue_and_register_my_scripts(){

    // Use `get_stylesheet_directoy_uri() if your script is inside your theme or child theme.
    wp_register_script( 'my-script', get_template_directory_uri() . '/js/bootstrap.min.js' );
    wp_register_script( 'my-script', get_template_directory_uri() . '/js/jquery.superslides.min.js' );
    wp_register_script( 'my-script', get_template_directory_uri() . '/js/jquery.easing.1.3.js' );
    wp_register_script( 'my-script', get_template_directory_uri() . '/js/jquery.nicescroll.min.js' );
    wp_register_script( 'my-script', get_template_directory_uri() . '/js/jquery.masonry.min.js' );
    wp_register_script( 'my-script', get_template_directory_uri() . '/js/jquery.fancybox.min.js' );
    wp_register_script( 'my-script', get_template_directory_uri() . '/js/settings.js' );

    // Let's enqueue a script only to be used on a specific page of the site
    if ( is_page( 'careers' ) ){

        // Enqueue a script that has both jQuery (automatically registered by WordPress)
        // and my-script (registered earlier) as dependencies.
        wp_enqueue_script( 'my-careers-script', get_template_directory_uri() . '/js/my-careers-script.js', array( 'jquery', 'my-script' ) );
    }
}

If this is the right way to do it, then I have to call:

<?php wp_enqueue_scripts(); ?>

in the header.php file? If this is not the correct way to add multiple scripts to a Wordpress theme, please let me know, what I'm doing wrong, I'll appreciate it a lot...! Thanks!!!!!

Brian North · Accepted Answer · 2014-02-26 08:59:13Z

2

Using wp_register_script is the correct way to register a script for inclusion on a page, but doesn't enqueue it and link it on the page - use wp_enqueue_script for that (it uses similar parameters but registers and adds it to the page at the right time ). If you use wp_register_script first, you must also at some time call wp_enqueue_script for it to actually be added to the page. You do not need to call enqueue_and_register_my_scripts at any time: adding it to the 'wp_enqueue_scripts' action is enough.

Finally, you must give each of those scripts you want to register/enqueue its own unique id: currently you're registering them all as 'my-script' and each is overwriting the previous script.

answered Feb 26, 2014 at 8:59

Brian North

1,3981 gold badge14 silver badges19 bronze badges

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

2 Comments

Valerxx22 Over a year ago

so after every wp_register_script I'll add a line with: wp_enqueue_script( 'my-script' ); ? Right? If no, can u give me one example? How I do that?

Brian North Over a year ago

You can either do that or just use wp_enqueue_script by itself: it's accepted parameters are exactly the same as wp_register_script and will itself register the script if it hasn't been already. And again, you must use unique ids for each script; naming them all my-script will only ultimately enqueue the last one.

Collectives™ on Stack Overflow

Wordpress, adding custom scripts, in correct way

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related