How To Include CSS and jQuery in my WordPress plugin

Question

User · Answer

See http   codex wordpress org Function Reference wp enqueue script  Example    lt  php function my init method         wp deregister script   jquery         wp register script   jquery    http   ajax googleapis com ajax libs jquery 1 4 jquery min js           add action  init    my init method      gt

User · Answer

You can use the following function to enqueue script or style from plugin   function my enqueued assets         wp enqueue script  my-js-file   plugin dir url   FILE        js script js       time         wp enqueue style  my-css-file   plugin dir url   FILE        css style css       time       add action  wp enqueue scripts    my enqueued assets

User · Answer

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

User · Answer

Put it in the init   function for your plugin   function your namespace         wp register style  your namespace   plugins url  style css    FILE           wp enqueue style  your namespace        wp register script   your namespace   plugins url  your script js    FILE           wp enqueue script  your namespace       add action   admin init   your namespace      It took me also some time before I found the  for me  best solution which is foolproof imho   Cheers

User · Answer

First you need to register the style and css using wp register script   and wp register style   functions      registering javascript and css  wp register script    mysample   plugins url    js myjs js     FILE         wp register style    mysample   plugins url    css mystyle css     FILE          After this you can call the wp enqueue script   and wp enqueue style   functions for loading the js and css in required page   wp enqueue script  mysample    wp enqueue style  mysample      I fount a nice example here http   wiki workassis com wordpress-create-advanced-custom-plugin-using-oop

User · Answer

Just to append to  pixeline s answer  tried to add a simple comment but the site said I needed 50 reputation    If you are writing your plugin for the admin section then you should use   add action  admin enqueue scripts    add my css and my js files      The admin enqueueu scripts is the correct hook for the admin section  use wp enqueue scripts for the front end

User · Answer

To include CSS and jQuery in your plugin is easy  try this      register jquery and style on initialization add action  init    register script    function register script         wp register script   custom jquery   plugins url   js custom-jquery js     FILE     array  jquery     2 5 1          wp register style   new style   plugins url   css new-style css     FILE     false   1 0 0    all          use the registered jquery and style above add action  wp enqueue scripts    enqueue style     function enqueue style       wp enqueue script  custom jquery        wp enqueue style   new style         I found this great snipped from this site How to include jQuery and CSS in WordPress     The WordPress Way  Hope that helps

User · Answer

Accepted answer is incomplete  You should use the right hook  wp enqueue scripts  Example       function add my css and my js files            wp enqueue script  your-script-name    this- gt urlpath      your-script-filename js   array  jquery     1 2 3   true           wp enqueue style   your-stylesheet-name   plugins url   css new-style css     FILE     false   1 0 0    all              add action  wp enqueue scripts    add my css and my js files

User · Answer

Very Simple   Adding JS CSS in the Front End   function enqueue related pages scripts and styles            wp enqueue style  related-styles   plugins url   css bootstrap min css     FILE              wp enqueue script  releated-script   plugins url    js custom js      FILE      array  jquery   jquery-ui-droppable   jquery-ui-draggable    jquery-ui-sortable           add action  wp enqueue scripts   enqueue related pages scripts and styles      Adding JS CSS in WP Admin Area   function enqueue related pages scripts and styles            wp enqueue style  related-pages-admin-styles    get stylesheet directory uri       admin-related-pages-styles css            wp enqueue script  releated-pages-admin-script   plugins url    js custom js      FILE      array  jquery   jquery-ui-droppable   jquery-ui-draggable    jquery-ui-sortable           add action  admin enqueue scripts   enqueue related pages scripts and styles

User · Answer

You can add scripts and css in back end and front end with this following code  This is simple class and the functions are called in object oriented way    class AtiBlogTest   function register          for backend     add action   admin enqueue scripts   array  this  backendEnqueue           for frontend     add action   wp enqueue scripts   array  this  frontendEnqueue       function backendEnqueue        wp enqueue style   AtiBlogTestStyle   plugins url    assets css admin mystyle css     FILE           wp enqueue script   AtiBlogTestScript   plugins url    assets js admin myscript js     FILE         function frontendEnqueue        wp enqueue style   AtiBlogTestStyle   plugins url    assets css front mystyle css     FILE           wp enqueue script   AtiBlogTestScript   plugins url    assets js front myscript js     FILE            if class exists  AtiBlogTest      atiblogtest new AtiBlogTest     atiblogtest- gt register

[javascript] How To Include CSS and jQuery in my WordPress plugin?

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to wordpress