Add custom css to a page template in wordpress

Question

---

Hi i need some help with the creation of a custom css file for my page template. There are many topics out there regarding this issue but with each thread i read i get more information and more confused.

I created a child theme for the twentyfourteen theme and added a page template. How can i add custom css to this template. I discovered that this code added to the child-theme's functions.php selects the appropriate class with my css. But how and where do i put this class? I read that i have to add the class to the body tag in the header.php but i am not sure. Is this the correct way?

if (is_page_template( 'mytemplate.php' )){
$classes[] = 'myclass';
}

Answer 1

How about this solution ?

<?php 
function mypage_head() {
    echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('stylesheet_directory').'/includes/mypage.css">'."\n"
}
add_action('wp_head', 'mypage_head');
?>
<?php get_header(); ?>

You can use wp_head hook to add you custom stuff (Javascript, CSS..) into your custom template. I think this way is better because all changes will contain in your template file, so you don't have to check in another place.

I get this solution from : http://scratch99.com/wordpress/development/custom-page-template-external-css-file/.

Answer 2

How about this one?

 function my_custom_styles() {

    wp_register_style( 'custom-styles', get_template_directory_uri().'/lib/styles/custom-styles.css' ) );

    if ( is_home ) {

    wp_enqueue_style( 'custom-styles' );
    }
 }

 add_action( 'wp_enqueue_scripts', 'my_custom_styles' );

I have tested all three answers from here; and all of them works great. Does anybody know which one is faster & better?

Answer 3

Use the is_page_template() conditional to selectively load CSS.

In the function below we're hooking into wp_enqueue_scripts and checking if we're on the custom page template to determine whether to load additional CSS.

If the result is true we'll load a CSS file titled page-template.css from a css/ folder inside your theme. Update the path to load the correct file.

function wpse_enqueue_page_template_styles() {
    if ( is_page_template( 'mytemplate.php' ) ) {
        wp_enqueue_style( 'page-template', get_template_directory_uri() . '/css/page-template.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'wpse_enqueue_page_template_styles' );