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
hook.
In the case of CSS in a standalone theme, it's a valid point. It's extra work without much of a
payoff.
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.
WORDPRESS FRAMEWORKS
This group of functions can be most helpful when using a framework for theming. In my
4
As with most agencies, we have internal conventions for naming JavaScript and CSS files.
