Add custom css to a page template in wordpress
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?
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' );
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/.