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

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_stylesheet_directory_uri() . '/css/page-template.css' );     } } add_action( 'wp_enqueue_scripts', 'wpse_enqueue_page_template_styles' ); 

Answer 2

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/.