How to correctly enqueue stylesheets to WordPress page templates using ‘wp_style_add_data’?

1 Views

I have learned how to use wp_style_add_data to add stylesheets for early versions of internet explorer – which is ideal as it only overwrites the necessary CSS rules and takes the rest from my style.css.

In addition to my page.php I have a second page template that I’ve named full-page.php which is nearly identical, apart from a few changes to the header and a few other small differences.

Read More

Because my templates are nearly the same, it seems like overkill to write two long stylesheets when I could do something similar to the wp_style_add_data function to only rewrite the ones I need to change.

I had a go at using wp_style_add_data to enqueue the stylesheet for my page template. This actually works and takes any styles I add to style.css providing they are not already different ones in full-page.css.

Here is the code I used: 

if (is_page_template('page-templates/full-page.php'))  

    { wp_enqueue_style( 'theme_style', get_stylesheet_uri() );
      wp_enqueue_style( 'theme-full-page', get_stylesheet_directory_uri() . '/css/full-page.css', array( 'theme_style' ) ); 
      wp_style_add_data( 'theme-full-page' );

} 

else { wp_enqueue_style( 'theme_style', get_stylesheet_uri() );

wp_enqueue_style( 'theme_style_ie8', get_stylesheet_directory_uri() . '/css/ie8.css', array( 'theme_style' ) ); 
wp_style_add_data( 'theme_style_ie8', 'conditional', 'IE 8' );

However, it’s also coming up with the following error message. 

Warning
: Missing argument 3 for wp_style_add_data(), called in /var/sites/l/lucieaverillphotography.co.uk/public_html/wp-content/themes/lucieaverillphotography/functions.php on line 31 and defined in
/var/sites/l/lucieaverillphotography.co.uk/public_html/wp-includes/functions.wp-styles.php
on line
223

I think this is because I’ve removed the part that tells it to only take effect if the user is viewing the website on IE 8, but I’ve been researching what I could add instead, and haven’t been able to find an answer.

Any help would be greatly appreciated.

UPDATE: ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

I think I’ve managed to work this out, as it seems to be working now – any changes I make in style.css are affecting the other stylesheet full-page.css, unless I specify something else in full-page.css.

Looking at the code, would this be the correct/best way to write this out? It seems a little lengthy and I have to repeat the stylesheet names a lot, but it also seems to work. I know that there are often different ways of doing things with PHP and I’m wary of causing complications later down the line as I’m building my theme.

if (is_page_template(‘page-templates/full-page.php’)) 

{ wp_enqueue_style( 'theme_style', get_stylesheet_uri() );

  wp_enqueue_style( 'theme-full-page', get_stylesheet_directory_uri() . '/css/full-page.css', array( 'theme_style' ) ); 
  wp_style_add_data( 'theme-full-page', 'title', 'theme-full-page' );
}
Post Views: 1

Related posts

1 comment

  1. you have already enqueued the style, wp_style_add_data() does not enqueue, it adds meta data to an already enqueued style and this function does not allow for empty parameters. see below.

    if (is_page_template('page-templates/full-page.php')) { 
      wp_enqueue_style( 'lucieaverillphotography_style', get_stylesheet_uri() );
      wp_enqueue_style( 'lucieaverillphotography-full-page', get_stylesheet_directory_uri() . '/css/full-page.css', array( 'lucieaverillphotography_style' ) ); 
      //wp_style_add_data( 'lucieaverillphotography-full-page' );  --> not needed & cannot be used without required inputs

}

    But…..you could combine all your css into a single file and call this as default on all pages (call ie8 specific stylesheets if you want….), this way it can be browser cached and after the 1st visit, your css loads faster…Brush up on CSS specificity and ids/ classes, it will save you a lot of work in the long run!

    If you want template specific changes to css you have a couple of options

    1. if the css changes are in the article/ page, there will be usually a id/class set unique to that page (or add one yourself).

    2. add custom css directly to the template (it works anywhere in the page, wont be popular with standards but for the moment you can put css rules anywhere inside style tags

    3. Add a custom class into your header for the body tag, e.g.
      >

    You can then specifically target css in your template…
    e.g.

     .page-id-2 header{ display: none;} //-->use chrome inspector to see what classes are outputted on each template

Comments are closed.