Revision 451 is a pre-publication revision. (Viewing current revision instead.)

How to enqueue Scripts & Stylesheets to WordPress via a plugin

Taken from here: https://www.creare.co.uk/how-to-enqueue-scripts-stylesheets-to-wordpress-via-a-plugin For that extra level of safety and control, we recommend enqueuing via a separate  dedicated plugin. In the video, I demonstrate how simple this is. Firstly, create a folder within WordPress’ plugin folder located at /wp-content/plugins/. Name your folder something useful like ‘theme-scripts’ and create a php file with the exact same name within (i.e theme-scripts.php). Then, simply add and customise the following code, as per our example. [php]<code><?php</code> <div><code>/*</code></div> <div><code>Plugin Name: James' WP Enqueue Scripts &amp; Styles</code></div> <div><code>Plugin URI: <a href="http://www.creare.co.uk/">http://www.creare.co.uk/</a></code></div> <div><code>Description: This is my own custom plugin for enqueuing Scripts and Styles in my WordPress theme</code></div> <div><code>Version: 1.0</code></div> <div><code>Author: James Bavington</code></div> <div><code>Author URI: <a href="http://twitter.com/jamesbavington">http://twitter.com/jamesbavington</a></code></div> <div><code>License: Help yourselves to the shelves</code></div> <div><code>*/</code></div> <div></div> <div><code>function</code> <code>james_adds_to_the_head() {</code></div> <div></div> <div><code>    </code><code>//wp_enqueue_script('jquery');</code></div> <div></div> <div><code>    </code><code>wp_register_script( </code><code>'add-bx-js'</code><code>, get_template_directory_uri() . </code><code>'/jquery.bxslider/jquery.bxslider.min.js'</code><code>, </code><code>array</code><code>(</code><code>'jquery'</code><code>),</code><code>''</code><code>,true  );</code></div> <div><code>    </code><code>wp_register_script( </code><code>'add-bx-custom-js'</code><code>, get_template_directory_uri() . </code><code>'/jquery.bxslider/custom.js'</code><code>, </code><code>''</code><code>, null,</code><code>''</code>  <code>);</code></div> <div><code>    </code><code>wp_register_style( </code><code>'add-bx-css'</code><code>, get_template_directory_uri() . </code><code>'/jquery.bxslider/jquery.bxslider.css'</code><code>,</code><code>''</code><code>,</code><code>''</code><code>, </code><code>'screen'</code> <code>);</code></div> <div></div> <div><code>    </code><code>wp_enqueue_script( </code><code>'add-bx-js'</code> <code>);</code></div> <div><code>    </code><code>wp_enqueue_script( </code><code>'add-bx-custom-js'</code> <code>);</code></div> <div><code>    </code><code>wp_enqueue_style( </code><code>'add-bx-css'</code> <code>);</code></div> <div></div> <div><code>}</code></div> <div></div> <div><code>add_action( </code><code>'wp_enqueue_scripts'</code><code>, </code><code>'james_adds_to_the_head'</code> <code>);</code></div> [/php]

Revisions

Revision Differences

May 31, 2013 @ 01:57:47Current Revision
Content
 Added: Taken from here: <a href="https:/ /www.creare.co.uk/how-to- enqueue-scripts- stylesheets- to-wordpress- via-a-plugin" target="_blank" >https://www.creare.co.uk/ how-to-enqueue- scripts-stylesheets- to-wordpress- via-a-plugin</a>
 Added: For that extra level of safety and control, we recommend enqueuing via a separate  dedicated plugin. In the video, I demonstrate how simple this is. Firstly, create a folder within WordPress’ plugin folder located at /wp-content/plugins/. Name your folder something useful like ‘theme-scripts’ and create a php file with the exact same name within (i.e theme-scripts.php). Then, simply add and customise the following code, as per our example.
 Added: [php]&lt;code&gt; &lt;?php&lt;/code&gt;
 Added: &lt;div&gt;&lt; code&gt;/*&lt; /code&gt;&lt;/div&gt;
 Added: &lt;div&gt;&lt; code&gt;Plugin Name: James' WP Enqueue Scripts &amp;amp; Styles&lt;/code&gt; &lt;/div&gt;
 Added: &lt;div&gt;&lt; code&gt;Plugin URI: &lt;a href=&quot;http: //www.creare.co.uk/&quot; &gt;http://www.creare.co.uk/ &lt;/a&gt;&lt; /code&gt;&lt;/div&gt;
 Added: &lt;div&gt;&lt; code&gt;Description: This is my own custom plugin for enqueuing Scripts and Styles in my WordPress theme&lt;/code&gt; &lt;/div&gt;
 Added: &lt;div&gt;&lt; code&gt;Version: 1.0&lt;/code&gt; &lt;/div&gt;
 Added: &lt;div&gt;&lt; code&gt;Author: James Bavington&lt; /code&gt;&lt;/div&gt;
 Added: &lt;div&gt;&lt; code&gt;Author URI: &lt;a href=&quot;http: //twitter.com/ jamesbavington&quot; &gt;http://twitter.com/ jamesbavington&lt; /a&gt;&lt;/code&gt; &lt;/div&gt;
 Added: &lt;div&gt;&lt; code&gt;License: Help yourselves to the shelves&lt;/code&gt; &lt;/div&gt;
 Added: &lt;div&gt;&lt; code&gt;*/&lt; /code&gt;&lt;/div&gt;
 Added: &lt;div&gt;&lt;/div&gt;
 Added: &lt;div&gt;&lt; code&gt;function&lt;/code&gt; &lt;code&gt;james_ adds_to_the_head() {&lt;/code&gt; &lt;/div&gt;
 Added: &lt;div&gt;&lt;/div&gt;
 Added: &lt;div&gt;&lt; code&gt;    &lt;/code&gt; &lt;code&gt;/ /wp_enqueue_ script('jquery') ;&lt;/code&gt; &lt;/div&gt;
 Added: &lt;div&gt;&lt;/div&gt;
 Added: &lt;div&gt;&lt; code&gt;    &lt;/code&gt; &lt;code&gt;wp_ register_script( &lt;/code&gt; &lt;code&gt;'add-bx-js'&lt; /code&gt;&lt;code&gt;, get_template_ directory_uri() . &lt;/code&gt; &lt;code&gt;'/ jquery.bxslider/ jquery.bxslider.min.js'&lt; /code&gt;&lt;code&gt;, &lt;/code&gt; &lt;code&gt;array&lt;/code&gt; &lt;code&gt;( &lt;/code&gt; &lt;code&gt;'jquery'&lt;/ code&gt;&lt;code&gt;),&lt; /code&gt;&lt; code&gt;''&lt; /code&gt;&lt; code&gt;,true  );&lt;/code&gt; &lt;/div&gt;
 Added: &lt;div&gt;&lt; code&gt;    &lt;/code&gt; &lt;code&gt;wp_ register_script( &lt;/code&gt; &lt;code&gt;'add-bx-custom- js'&lt;/code&gt; &lt;code&gt;, get_template_ directory_uri() . &lt;/code&gt; &lt;code&gt;'/ jquery.bxslider/ custom.js'&lt; /code&gt;&lt;code&gt;, &lt;/code&gt; &lt;code&gt;''&lt;/code&gt; &lt;code&gt;, null,&lt;/code&gt; &lt;code&gt;''&lt;/code&gt;  &lt;code&gt;) ;&lt;/code&gt; &lt;/div&gt;
 Added: &lt;div&gt;&lt; code&gt;    &lt;/code&gt; &lt;code&gt;wp_ register_style( &lt;/code&gt; &lt;code&gt;'add-bx-css'&lt; /code&gt;&lt;code&gt;, get_template_ directory_uri() . &lt;/code&gt; &lt;code&gt;'/ jquery.bxslider/ jquery.bxslider.css'&lt;/ code&gt;&lt;code&gt;,&lt; /code&gt;&lt; code&gt;''&lt; /code&gt;&lt; code&gt;,&lt; /code&gt;&lt; code&gt;''&lt; /code&gt;&lt;code&gt;, &lt;/code&gt; &lt;code&gt;'screen'&lt;/code&gt; &lt;code&gt;) ;&lt;/code&gt; &lt;/div&gt;
 Added: &lt;div&gt;&lt;/div&gt;
 Added: &lt;div&gt;&lt; code&gt;    &lt;/code&gt; &lt;code&gt;wp_ enqueue_script( &lt;/code&gt; &lt;code&gt;'add- bx-js'&lt;/code&gt; &lt;code&gt;) ;&lt;/code&gt; &lt;/div&gt;
 Added: &lt;div&gt;&lt; code&gt;    &lt;/code&gt; &lt;code&gt;wp_ enqueue_script( &lt;/code&gt; &lt;code&gt;'add-bx-custom- js'&lt;/code&gt; &lt;code&gt;) ;&lt;/code&gt; &lt;/div&gt;
 Added: &lt;div&gt;&lt; code&gt;    &lt;/code&gt; &lt;code&gt;wp_ enqueue_style( &lt;/code&gt; &lt;code&gt;'add- bx-css'&lt;/code&gt; &lt;code&gt;) ;&lt;/code&gt; &lt;/div&gt;
 Added: &lt;div&gt;&lt;/div&gt;
 Added: &lt;div&gt;&lt; code&gt;}&lt; /code&gt;&lt;/div&gt;
 Added: &lt;div&gt;&lt;/div&gt;
 Added: &lt;div&gt;&lt; code&gt;add_action( &lt;/code&gt; &lt;code&gt;'wp_ enqueue_scripts'&lt; /code&gt;&lt;code&gt;, &lt;/code&gt; &lt;code&gt;'james_adds_to_ the_head'&lt;/code&gt; &lt;code&gt;) ;&lt;/code&gt; &lt;/div&gt;
Deleted: Added: [/php]

Note: Spaces may be added to comparison text to allow better line wrapping.

Tags:

No comments yet.

Leave a Reply