How To Implement Custom jQuery and CSS In WordPress Plugin

It happens many times that people facing issues while implementing jQuery in WordPress plugin. So in this tutorial you will learn, how to implement jQuery and CSS to create a WordPress plugin.

To do so, I am creating a WordPress plugin named Demo jQuery plugin with a functionality to appear a popup window on button click. Click Me button will appear at the footer of every page or post of your website and a popup window will appears as soon as user click on the button.

[dlv dl_url=”https://www.inkthemes.com/wp-content/uploads/2014/05/Demo_jquery_example.zip” dl_text =”Download Plugin Files”]

For that, just follow the steps given under this tutorial.

Step 1: PHP File – demo.php

Create a PHP file named demo.php which includes-

• Plugin details like name, version, description, author etc.
• Function plugin_name_scripts() to enqueue a CSS style file and JavaScript.
• On the button click, popup window appears.

[php]

<?php
/*
Plugin Name: Demo jQuery plugin
Plugin URI: http://www.inkthemes.com
Description: This is a demo plugin.
Version: 1.0
Author: inkthemes.com
*/
?>

<?php
function plugin_name_scripts() {
wp_enqueue_style( ‘style’, plugins_url(‘css/demo_style.css’, __FILE__));
wp_enqueue_script( ‘script’, plugins_url(‘js/demo_script.js’, __FILE__), array(‘jquery’));
}
add_action(‘init’, ‘plugin_name_scripts’);

if ( ! is_admin() ){
?>

<div class=”popup_window” id=”demo_popup_window”>
This is your popup window.
</div>
<div class=”outer”>
<div class=”demo_click_me” id=”jp_demo” style=”clear:both;”>
<b>Click Me </b>
</div>
</div>
<?php
}
?>

[/php]

Step 2: CSS File – demo_style.css

Create a CSS file named demo_style.css which includes-

HTML code which sets the appearance of button and popup window.

[css]// This is CSS file

#demo_popup_window{
display: none;
border: 2px solid rgb(47, 116, 8);
width: 300px;
height: 183px;
background-color: rgb(47, 116, 8);
color: #fff;
font-size: 26px;
margin-top: 20px;
padding: 60px 20px 0 20px;
text-align: center;
line-height: normal;
position:fixed;
bottom:70px;
z-index:100;
margin-left: 20px;
}

div.outer{
width:100%;
position: fixed;
bottom:0px !important;
}
div.demo_click_me{
background-color: #f5d715;
border-radius: 5px;
border: 1px solid #917a06;
display: inline-block;
color: #3e360c;
font-size: 26px;
font-weight: normal;
padding: 12px 33px;
margin-top: 25px;
clear: both !important;
cursor: pointer;
margin-left: 60px;
}[/css]

Step 3: JavaScript File – demo_script.js

Create a javascript file named demo_script.js which includes-

• ready()- ready event occurs after the document is loaded.
• click()- event occurs when user click on the button, a popup window appears.

[code lang=”js”]

jQuery(document).ready(function() {
jQuery(‘#jp_demo’).click(function(){
jQuery(“.popup_window”).css(“display”, “block”);
});
});

[/code]

Screenshots

Demo jQuery plugin listed under WordPress dashboard.

You need to click on the Click Me button.

A popup window appears on the screen.

 Conclusion

I hope this tutorial is very helpful to you and could teach you to implementing jQuery/css in WordPress plugin, but in case if you find any problem in following the above steps, free to share it in the comment section. I will definitely help you out. Please share your thoughts about the post too.