Looking For A Fast, Responsive, SEO Optimized & Self Customizable FREE WordPress Theme?

How
Pricing
My Account

How To Implement Custom jQuery and CSS In WordPress Plugin

Last Updated on July 7, 2020
by Neeraj Agarwal

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.

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.

Leave a Reply Cancel reply

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

InkThemes Logo

Customize Your Website With Beautiful Premium WordPress Themes, Templates & Plugins.

One Click Installation With Advanced Functionality & Awesome Support.

For any query contact us at:
  • [email protected]
Products
  • WordPress Themes
  • Email Marketing
  • Subscription Billing
  • Form Builder
  • Email Verification
Terms of Usage
  • Terms and Conditions
  • Privacy Policy
  • InkThemes Branding
  • Affiliate
  • Contact Us
Join Us
  • Follow us on Twitter
  • Be a fan on Facebook
Analytics
heap-logo1
Help and Support
  • Support
  • Documentation
About
  • Who we are?
  • Careers
Links
  • Blog Categories
  • Marketplace Categories

© 2023 InkThemes LLC. All rights reserved.