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';
}

Nathan Dawson · Accepted Answer · 2020-07-24 14:49:31Z

33

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' );

edited Jul 24, 2020 at 14:49

answered Jan 31, 2015 at 9:05

Nathan Dawson

19.4k3 gold badges59 silver badges60 bronze badges

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

1 Comment

theDrifter Over a year ago

Nice. Thank you Nathan for this code snippet, this was exactly what i was looking for!! But when i included it the css file was not loading. So google told me that i need to replace get_template_directory_uri() with get_stylesheet_directory_uri(). Now its working perfectly!

vimuth · Accepted Answer · 2022-10-13 06:32:36Z

15

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

edited Oct 13, 2022 at 6:32

vimuth

5,87355 gold badges98 silver badges128 bronze badges

answered Apr 23, 2015 at 9:54

tucq88

4184 silver badges8 bronze badges

Comments

Shan404 · Accepted Answer · 2018-01-10 21:01:46Z

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?

answered Jan 10, 2018 at 21:01

Shan404

782 silver badges12 bronze badges

1 Comment

Xantium Over a year ago

You could always ask a separate question.

Collectives™ on Stack Overflow

Add custom css to a page template in wordpress

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related