How To Include CSS and jQuery in my WordPress plugin?

by

For styles wp_register_style( 'namespace', 'http://locationofcss.com/mycss.css' );

Then use: wp_enqueue_style('namespace'); wherever you want the css to load.

Scripts are as above but the quicker way for loading jquery is just to use enqueue loaded in an init for the page you want it to load on: wp_enqueue_script('jquery');

Unless of course you want to use the google repository for jquery.

You can also conditionally load the jquery library that your script is dependent on:

wp_enqueue_script('namespaceformyscript', 'http://locationofscript.com/myscript.js', array('jquery'));

Update Sept. 2017

I wrote this answer a while ago. I should clarify that the best place to enqueue your scripts and styles is within the wp_enqueue_scripts hook. So for example:

add_action('wp_enqueue_scripts', 'callback_for_setting_up_scripts');
function callback_for_setting_up_scripts() {
    wp_register_style( 'namespace', 'http://locationofcss.com/mycss.css' );
    wp_enqueue_style( 'namespace' );
    wp_enqueue_script( 'namespaceformyscript', 'http://locationofscript.com/myscript.js', array( 'jquery' ) );
}

The wp_enqueue_scripts action will set things up for the “frontend”. You can use the admin_enqueue_scripts action for the backend (anywhere within wp-admin) and the login_enqueue_scripts action for the login page.

More Related Contents:

  1. best tools for theme design? [closed]
  2. How to keep the menu state on page reload
  3. How to keep elements non-refreshed
  4. Fade animation while scrolling
  5. Get the longest text in HTML document using Jquery or javascript
  6. jQuery SVG, why can’t I addClass?
  7. Setting background-image using jQuery CSS property
  8. JSFiddle code not working in my own page
  9. How to get the background color code of an element in hex?
  10. How to disable scroll without hiding it?
  11. “Uncaught TypeError: a.indexOf is not a function” error when opening new foundation project
  12. jQuery: Get selected element tag name
  13. Bootstrap 4 File Input
  14. jQuery jump or scroll to certain position, div or target on the page from button onclick [duplicate]
  15. Read :hover pseudo class with javascript
  16. How to ONLY trigger parent click event when a child is clicked
  17. Detect fullscreen mode
  18. Count down timer with circular progress bar
  19. How can I detect when a new element has been added to the document in jquery?
  20. JavaScript Loading Screen while page loads
  21. Change CSS properties on click
  22. How to use Javascript to check and load CSS if not loaded?
  23. Add CSS rule via jQuery for future created elements
  24. Remove scrollbar but not scrolling functionality [duplicate]
  25. Pausing CSS animation with javascript and also jumping to a specific place in the animation
  26. fade effect using javascript no jquery?
  27. How do you swap DIVs on mouseover (jQuery)?
  28. Center an Image vertically and horizontally using CSS
  29. Jquery/Javascript Opacity animation with scroll
  30. Can I save input from form to .txt in HTML, using JAVASCRIPT/jQuery, and then use it?

Leave a Comment