1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
<title>WP Enqueue for Beginners</title>
<link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
<link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" />
<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style>
</head>
<nav>
<a href="#menu">Menu ↓</a>
</nav>
<main>
<h1 id="wp-enqueue-for-beginners">WP Enqueue for Beginners</h1>
<p>2020-05-05</p>
<p>Throughout my career designing, developing and auditing WordPress themes, I’ve come across many that include their custom styles / scripts as static HTML elements inside their respective <code>header</code> and <code>footer</code> templates. This is perfectly <em>fine</em>, but there is a cleaner way to include these files.</p>
<p>This post is purposefully catered for WordPress beginners, so if this seems overly simple, then you’re probably already developing WordPress themes that utilize these techniques. (Which is awesome!)</p>
<h2 id="introducing-wp-enqueue">Introducing WP Enqueue</h2>
<p>The description of Wp Enqueue from the WordPress documentation:</p>
<p>In a nutshell: Placing a <code>wp_enqueue_script</code> or <code>wp_enqueue_style</code> script in the <code>functions.php</code> of your custom theme tells WordPress to pull external files into the header or footer of your website. Best practice being: <em>styles into the header, scripts into the footer</em>.</p>
<p>I suggest you read the official documentation for more details: <a href="https://developer.wordpress.org/reference/functions/wp_enqueue_script/">wp_enqueue_script</a> and <a href="https://developer.wordpress.org/reference/functions/wp_enqueue_style/">wp_enqueue_style</a>.</p>
<h2 id="enqueue-stylesheets">Enqueue Stylesheets</h2>
<p>The default script to enqueue a CSS stylesheet:</p>
<pre><code>wp_enqueue_style( $handle, $src, $deps, $ver, $media );
</code></pre>
<ul>
<li><code>$handle</code> - the name associated with your stylesheet</li>
<li><code>$src</code> - URL pointing to the directory of the stylesheet itself</li>
<li><code>$deps</code> - An array of any other stylesheets needed as dependencies</li>
<li><code>$ver</code> - The version number of the stylesheet (used for cache busting)</li>
<li><code>$media</code> - Specify media type (<code>all</code>, <code>print</code>, <code>screen</code>, etc.)</li>
</ul>
<p>So, with all those parameters in mind, here is what a standard default enqueue of a CSS stylesheet looks like:</p>
<pre><code>wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Montserrat:200,300,300i,400,600,700,800,900', '', '1.0', '');
</code></pre>
<p>In this example we have rendered the following:</p>
<ul>
<li><code>$handle</code>: google-fonts</li>
<li><code>$src</code>: <a href="https://fonts.googleapis.com/css?family=Montserrat:200,300,300i,400,600,700,800-">https://fonts.googleapis.com/css?family=Montserrat:200,300,300i,400,600,700,800-</a> 0</li>
<li><code>$deps</code>: Null (left blank)</li>
<li><code>$ver</code>: 1.0</li>
<li><code>$media</code>: Null (left blank)</li>
</ul>
<p><strong>Important:</strong> Keep in mind that the <code>wp_enqueue_style</code> script will render the stylesheet link into the WordPress header automatically.</p>
<h2 id="enqueue-scripts">Enqueue Scripts</h2>
<p>The default script to enqueue an external JS file:</p>
<pre><code>wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
</code></pre>
<ul>
<li><code>$handle</code> - the name associated with your script</li>
<li><code>$src</code> - URL pointing to the directory of the script itself</li>
<li><code>$deps</code> - An array of any other scripts needed as dependencies</li>
<li><code>$ver</code> - The version number of the script (used for cache busting)</li>
<li><code>$in_footer</code> - Set whether the script is loaded in the <code><head></code> or just before the <code></body></code></li>
</ul>
<p>With all those parameters in mind, here is what a standard default enqueue of a Javascript file looks like:</p>
<pre><code>wp_enqueue_script( 'bxslider', get_template_directory_uri() . '/js/bxslider.js', array('jquery'), '1.0.0', true );
</code></pre>
<p>In this example we have rendered the following:</p>
<ul>
<li><code>$handle</code>: bxslider</li>
<li><code>$src</code>: get_template_directory_uri() . /js/bxslider.js’</li>
<li><code>$deps</code>: array(jquery’)</li>
<li><code>$ver</code>: 1.0.0</li>
<li><code>$in_footer</code>: True (<em>places script before closing body tag</em>)</li>
</ul>
<h2 id="packaging-everything-together">Packaging Everything Together</h2>
<p>Now that we have the custom stylesheet and script ready to be loaded into our custom WordPress theme, we just need to properly package them together as a function in our <code>functions.php</code> file:</p>
<pre><code>// Add styles and scripts to the header/footer
function custom_enqueue_scripts() {
wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Montserrat:200,300,300i,400,600,700,800,900');
wp_enqueue_script( 'bxslider', get_template_directory_uri() . '/js/bxslider.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts');
</code></pre>
<p>That’s it! Hopefully this helps prevent WordPress newbies from statically rendering their external CSS and JS files directly in template files. Let WordPress do that for you!</p>
<footer role="contentinfo">
<h2>Menu Navigation</h2>
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/uses">Uses</a></li>
<li><a href="/wiki">Wiki</a></li>
<li><a href="/resume">Resume</a></li>
<li><a href="/colophon">Colophon</a></li>
<li><a href="/now">Now</a></li>
<li><a href="/donate">Donate</a></li>
<li><a href="/atom.xml">RSS</a></li>
<li><a href="#top">↑ Top of the page</a></li>
</ul>
<small>
Built with <a href="https://git.sr.ht/~bt/barf">barf</a>. <br>
Maintained with ♥ for the web. <br>
Proud supporter of <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> & <a href="https://nextdns.io/?from=74d3p3h8">NextDNS</a>. <br>
The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.<br> The <a href="https://git.sr.ht/~bt/bt.ht">code for this site</a> is <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE">MIT</a>.
</small>
</footer>
|
