HTML and CSS Reference
In-Depth Information
In our example, we could get away with telling WordPress to queue only the style sheets that
have the handles theme-desktop and theme-desktop-ie . WordPress would then output the
mobile / all media version.
However, both style sheets apply styles to the website beyond a basic reset: mobile.css builds
the website for mobile phones, and desktop.css builds on top of that. If it does something and
I've registered it, then I should enqueue it. It helps to keep track of what's going on.
Here is the code to output the CSS to the HTML:
function mytheme_enqueue_styles (){
if ( ! is_admin ()):
wp_enqueue_style ( 'theme-mobile' ); //mobile.css
wp_enqueue_style ( 'theme-desktop' ); //desktop.css
wp_enqueue_style ( 'theme-desktop-ie' ); //desktop.css lte ie8
endif ; //!is_admin
add_action ( 'wp_print_styles' , 'mytheme_enqueue_styles' );
What's The Point?
You may be wondering what the point is of going through all of this extra effort when we could
just output our JavaScript and style sheets in the theme's header.php or using the wp_head
In the case of CSS in a standalone theme, it's a valid point. It's extra work without much of a
But with JavaScript, it helps to prevent clashes between plugins and themes when each uses
a different version of a JavaScript framework. It also makes page-loading times as fast as
possible by avoiding file duplication.
This group of functions can be most helpful when using a framework for theming. In my
agency, Soupgiant , we've built a framework to speed up our production of websites.
As with most agencies, we have internal conventions for naming JavaScript and CSS files.
Search WWH ::

Custom Search