HTML and CSS Reference
In-Depth Information
Having enqueued
custom.js
for output to the HTML, WordPress will figure out that it depends
on
base.js
being present and that
base.js
, in turn, requires jQuery. The resulting HTML is:
<
script
src
="
/wp-includes/js/jquery/jquery.js?ver
=
1.6.1
"
type
="
text/
javascript
"></
script
>
<
script
src
="
/wp-content/themes/my-theme/base.js?ver
=
1.0.0
"
type
="
text/
javascript
"></
script
>
<
script
src
="
/wp-content/themes/my-theme/custom.js?ver
=
1.0.0
"
type
="
text/
javascript
"></
script
>
Registering Style Sheets
Both of the functions for adding JavaScript to our HTML have sister PHP functions for adding
style sheets to the HTML:
wp_register_style
and
wp_enqueue_style
.
As with the JavaScript example, we'll use a couple of CSS files throughout this chapter,
employing the mobile-first methodology for responsive Web design.
The
mobile.css
file is the CSS for building the mobile version of the website. It has no
dependencies.
The
desktop.css
file is the CSS that is loaded for desktop devices only. The desktop version
builds on the mobile version, so
mobile.css
is a dependency.
Once you've decided on version numbers, dependencies and media types, it's time to register
your style sheets using the
wp_register_style
function. This function takes the following
arguments:
•
$handle
A string
•
$source
A string
•
$dependancies
An array (optional, default is none)
•
$version
A string (optional, the default is the current WordPress version number)
