CODEWITHSUNDEEP
javascriptphpjquerywordpress
Valerxx22
Valerxx22

Reputation: 814

Wordpress, adding custom scripts, in correct way

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!!!!!

Upvotes: 1

Views: 243

Answers (1)

Brian North
Brian North

Reputation: 1398

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.

Upvotes: 2

Related Questions