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_enqueue_script(‘jquery’);

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

wp_enqueue_script(‘slidesjs_core’);

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

wp_enqueue_script(‘slidesjs_init’);

$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.


0 thoughts on “WP Style & Scripts”

Leave a Reply

Related Article

Blog

How to Create a Custom Page in WordPress

First, you need to open a text editor  add the blank file add this line of code at the top: <?php /* Template Name: Custom Page Template */ ?> Editing Your Custom Page Template Your Read more…

Blog

How to add user profile image by custom URL and custom fields in woocommerce

If you want to add user profile image by custom URL and add custom fields of profile image like first name, last name in your woo-commerce registration form then see our code below, you can Read more…

Blog

WordPress Create Own Forget Password Page

WordPress Custom Forgot Password Page, we need to use the same page for forgot password as well. Here is the jquery function and also we are going to give id to play with both forms. Read more…