WP Style & Scripts

As you can see JavaScript and CSS will be kept in separate folders inside the main plugin that main php file contains the plugin definition and the important initialization functions of the plugin. If you are developing a single file plugin, all the codes will be kept inside the main PHP file.

Throughout plugin we will be integrating a jQuery to learn WordPress plugin development. Therefore it’s important to get used to the main components of a jQuery as shown in the following.

  • jQuery library – We need a core library to develop plugins. jQuery is chosen as the core library for the plugin used in this series. You have the freedom to work with other core libraries such as Prototype, etc.
  • jQuery plugin file – Every plugin has a main file which is built on top of the jQuery library. Usually we have all the codes for a jQuery inside single JavaScript file.
  • Intialization code – All the plugins need to be initialized at some point to make it work. Generally we use inline scripts in the HEAD section of the HTML document to include the initialization code.
  • CSS files used for plugin – we have CSS files specific to plugins to provide the default look and feel of the sliders.

Following hook use for adding stylesheet:-

add_action(‘wp_print_styles’, ‘add_pro_stylesheet’);

function add_pro_stylesheet()


$myStyleUrl = PRO_URL . ‘/donationpayment.css’;

$myStyleFile = PRO_FILE_PATH . ‘/donationpayment.css’;

if ( file_exists($myStyleFile) )


wp_register_style(‘myStyleSheets’, $myStyleUrl);

wp_enqueue_style( ‘myStyleSheets’);



Following hook use for adding script:-

function web_scripts() {


wp_register_script(‘slidesjs_core’, plugins_url(‘js/jquery.slides.min.js’, __FILE__), array(“jquery”));


wp_register_script(‘slidesjs_init’, plugins_url(‘js/slidesjs.initialize.js’, __FILE__));


$effect     = (get_option(‘fwds_effect’) == ”) ? “slide” : get_option(‘fwds_effect’);

$interval   = (get_option(‘fwds_interval’) == ”) ? 2000 : get_option(‘fwds_interval’);

$autoplay   = (get_option(‘fwds_autoplay’) == ‘enabled’) ? true : false;

$playBtn   = (get_option(‘fwds_playbtn’) == ‘enabled’) ? true : false;

$config_array = array(

‘effect’ => $effect,

‘interval’ => $interval,

‘autoplay’ => $autoplay,

‘playBtn’ => $playBtn


wp_localize_script(‘slidesjs_init’, ‘setting’, $config_array);


Inside fwds_scripts, we have used two other functions for including script files called wp_enqueue_script and wp_register_script.

wp_enqueue_script is used to include the script file to the HTML document. jQuery is one of the libraries which comes in-built with WordPress and hence we can include it directly as shown in the code. Latest version of jQuery will be included in this technique.

wp_register_script is used to register a script file into WordPress. We have to register the slider plugin file and initialization file since it is not built-in with WordPress. First parameter is a unique name to register your library. Next you have to provide the path of the js file.

plugins_url function will provide the URL of the plugin folder.

Leave a Reply