How to move style from template file to <head> section?

1 Views

Imagine the following situation: 

//header.php contains:
<header id="header">logo and navigation</header>

//my-template.php contains:
<?php get_header(); ?>
     <style type="text/css">#header { display: none; }</style>
     <div class="main-container-of-my-template"></div>
<?php get_footer(); ?>

This will disable <header> for my-template.php in the most modern browsers (except IE9) but it’s not valid solution. Is there a way to use something like wp_enqueue_style(); directly in my-template.php to make it load that style in <head> in header.php? Just to make it valid.

Read More

I want to keep this modular, so I don’t want to put if statement like this in header.php (it will not be stand-alone modular page template anymore): 

<?php if(is_page_template( 'my-template.php' )){ ?>
<style type="text/css">#header { display: none; }</style>
<?php } ?>
Post Views: 1

Related posts

Leave a Reply

2 comments

  1. What about putting styles before the function get_header();

    <style type="text/css">#header { display: none; }</style>
<?php get_header();?>
<div class="main-container-of-my-template"></div>
<?php get_footer(); ?>

    However this is not recommended as it loads the styles even before the <html> not within the <head> section of your website, but as per your requirement this could be the only way to add styles by editing your my-template.php file.

    Note-

    Second way (recommended) to load scripts in <head> section without modifying header.php is to use themes functions.php to enqueue styles in <head>. Here’s the code that does the trick –

    Make sure you make a new new-style.css file in template directory with necessary stylings.

    <?php   
    function wpse_60052_load_style() { 
        if(is_page_template( 'my-template.php' )) { 
            wp_enqueue_style('mystyle', get_bloginfo('template_directory').'/new-style.css');
        }
} 
add_action( 'wp_enqueue_scripts', 'wpse_60052_load_style' );
?>

  2. Option one is to use the same is_page_template and use wp_enqueue_style which would add some stylesheet only if this page template is available.

    Option two is to just embed this code to the page template header (this won’t be visible in other templates obviously).