How To Implement Custom jQuery and CSS In WordPress Plugin

By Our Bestseller: WordPress Themes

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.

 Custom jQuery and CSS In WordPress Plugin

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
/*
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
}
?>

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.

// 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;
}

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.


jQuery(document).ready(function() {
jQuery('#jp_demo').click(function(){
jQuery(".popup_window").css("display", "block");
});
});

Screenshots

Demo jQuery plugin listed under WordPress dashboard.

create jquery plugin

You need to click on the Click Me button.

click on the button

A popup window appears on the screen.

popup window appears

 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.

About Malika Rani
author
I am Malika Rani, a software engineer and a blogger. My hobby is to learn new things, searching exciting and informative discoveries over the web. So blogging is the best platform through which I can share my knowledge and experiences with you. Hope you enjoy reading my blogs and it will be helpful for you.

Comments and Responses

Your email address will not be published. Required fields are marked *