Title: Adding JavaScript and CSS
Last modified: January 19, 2017

---

# Adding JavaScript and CSS

 *  Resolved [adrianviz](https://wordpress.org/support/users/adrianviz/)
 * (@adrianviz)
 * [9 years, 2 months ago](https://wordpress.org/support/topic/adding-javascript-and-css/)
 * Hi,
 * I have a question and perhaps you can help me. I need to add two snippets. In
   examples below I did not include all lines only few starting and finishing lines.
 * How do I correctly add a snippet? I tried copying the entire Javascript and CSS
   like in the instructions here: [https://www.labnol.org/internet/light-youtube-embeds/27941/](https://www.labnol.org/internet/light-youtube-embeds/27941/)
   This are helpful instruction for inserting YouTube videos and reducing page size
   and load speed.
 * 1. Place the JavaScript anywhere in your web template. It finds all embedded 
   videos on a web page and then replaces the DIV elements with the video thumbnails.
 * It starts with:
 * 1. <script>
    2.   3. /* Light YouTube Embeds by [@labnol](https://wordpress.org/support/users/labnol/)*/
   4. /* Web: [http://labnol.org/?p=27941](http://labnol.org/?p=27941) */ 5.   6.
   document.addEventListener(“DOMContentLoaded”, 7. function() {
 * and ends with:
 * 32. }
    33.   34. </script>
 * 2. Finally, paste the CSS before the closing head tag of your web template.
 * It starts with:
 * 1. <style>
    2. .youtube-player { 3. position: relative;
 * and ends with:
 * 54. cursor: pointer;
    55. } 56.   57. </style>
 * Can you please let me know whether to include <script>, </script>, <style>, </
   style>, etc. or what do I leave out.
 * Thank you very much.
 * Adrian

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [SVTX](https://wordpress.org/support/users/svtx/)
 * (@svtx)
 * [9 years, 2 months ago](https://wordpress.org/support/topic/adding-javascript-and-css/#post-8674085)
 * I would like to see CSS and JS natively added to Code Snippets as well. For now
   I use this, maybe it helps you:
 * [https://wordpress.org/plugins/custom-css-js/](https://wordpress.org/plugins/custom-css-js/)
    -  This reply was modified 9 years, 2 months ago by [SVTX](https://wordpress.org/support/users/svtx/).
 *  Plugin Author [Shea Bunge](https://wordpress.org/support/users/bungeshea/)
 * (@bungeshea)
 * [9 years, 2 months ago](https://wordpress.org/support/topic/adding-javascript-and-css/#post-8711866)
 * I am planning on adding native CSS and JavaScript support at some point. The 
   biggest difficulty is working out how to integrate them into the existing interface
   in a way that does not make this plugin even more confusing to operate.
 * As for your situation, you will need to wrap your CSS and JavaScript code in 
   some WordPress action hooks, as currently this plugin only supports PHP code 
   that is executed in the same way as plugins. Here’s an example of how that snippet
   might look:
 *     ```
       add_action( 'wp_head', function () {
       <style>
   
       /* CSS code goes here */
   
       </style>
       <?php } );
   
       add_action( 'wp_footer', function () { ?>
       <script>
   
       /* JavaScript code goes here */
   
       </script>
       <?php } );
       ```
   
    -  This reply was modified 9 years, 2 months ago by [Shea Bunge](https://wordpress.org/support/users/bungeshea/).
    -  This reply was modified 9 years, 2 months ago by [Shea Bunge](https://wordpress.org/support/users/bungeshea/).
 *  [SVTX](https://wordpress.org/support/users/svtx/)
 * (@svtx)
 * [9 years, 2 months ago](https://wordpress.org/support/topic/adding-javascript-and-css/#post-8714207)
 * I had an idea on how to keep this simple and effective:
 * ![suggestion](https://i0.wp.com/oi65.tinypic.com/i3yjxz.jpg)
 * Please don’t mind my math not adding up though! 😀
 *  Plugin Author [Shea Bunge](https://wordpress.org/support/users/bungeshea/)
 * (@bungeshea)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/adding-javascript-and-css/#post-8810996)
 * Thanks for your suggestion – it looks like a really good design for the manage
   snippets page.
 * It’s really the add snippet page that I am unsure about – how to make the different
   sorts of snippets distinct and understandable – but I do have a few ideas for
   how this could look. I will get started on it as soon as I can.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Adding JavaScript and CSS’ is closed to new replies.

 * ![](https://ps.w.org/code-snippets/assets/icon.svg?rev=2148878)
 * [Code Snippets](https://wordpress.org/plugins/code-snippets/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/code-snippets/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/code-snippets/)
 * [Active Topics](https://wordpress.org/support/plugin/code-snippets/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/code-snippets/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/code-snippets/reviews/)

 * 4 replies
 * 3 participants
 * Last reply from: [Shea Bunge](https://wordpress.org/support/users/bungeshea/)
 * Last activity: [9 years, 1 month ago](https://wordpress.org/support/topic/adding-javascript-and-css/#post-8810996)
 * Status: resolved