How to replace stylesheets and javascripts only for one page template in wordpress

Question

I'm about an four hours browsing an internet in order to find an answer.

I have an javascript/php/html application with rich functionality. It includes 3 css files and 5 javascript files.

I want to build it in wordpress page.

I have already made custom page template: checkout.php

Now i need to replace all the stylesheets and javascripts with my own.

I know how to check the template:

<?php if(is_page_template('checkout.php')) :?>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/stylesheets/main.css"/>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/stylesheets/jquery.Jcrop.css" />
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/stylesheets/styles.css" />
  <script src="<?php echo get_template_directory_uri(); ?>/javascripts/js_checkout/jquery.min.js"></script>
        <script src="<?php echo get_template_directory_uri(); ?>/javascripts/js_checkout/jquery-ui.js"></script>
        <script src="<?php echo get_template_directory_uri(); ?>/javascripts/js_checkout/jquery.Jcrop.js"></script>
        <script src="<?php echo get_template_directory_uri(); ?>/javascripts/js_checkout/script.js"></script>

I also guess that this functions will add all stylesheets and javascripts to my new template:

function theme_name_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_uri() );
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

But do wp_enqueue_style and wp_enqueue_script replaces the default styles and scripts or just add another????

Can some one just tell me how to do this and what file to edit?? header.php or general-template.php??

Thanks in advance alot

Answer 1

Its really going to depend on the theme you are using. Are you using a child theme? Where are the existing stylesheets located? How are those stylesheets and javascript files inserted / injected into the page?

In looking at your existing code, you are correct in assuming that all you are doing at this point, is adding to what already exists on the page.

Do you want to remove all other stylesheets? What about the existing javascript? From what you're adding -- it appears to me - you are looking to only add to... as jquery-ui requires jquery

ps don't forget your

<?php endif; ?>

For one time use --- as a programmer I opt for the "simpler the better" method. The code above would best be added to functions.php within your child theme.

Unless you could benefit from adding additional .js and .css files to other pages... in that case, it would be better to construct a partial. But thats discussion for another time.

Let me know if you need further assistance with this

Answer 2

If you are editing the templates directly, then use your if(is_page_template/////// to insert the stylesheets, and close it with }else{ // place default stylesheets here}

If you want to remove ALL the .js files you could use wp_dequeue_script http://codex.wordpress.org/Function_Reference/wp_dequeue_script
or you could wrap the .js and css inside the same if statement.

Although there are certainly better practices..... ONE would be the stylesheet -- Why not utilize your if is_template statement to add a new body class and change only the necessary items.

EX: body.cart p{background: red;} would make paragraphs have a red background BUT ONLY on the cart page.