How To Implement Custom jQuery and CSS In WordPress Plugin

Malika Rani

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.

Plugin Name: Demo jQuery plugin
Plugin URI:
Description: This is a demo plugin.
Version: 1.0

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 class="outer">
<div class="demo_click_me" id="jp_demo" style="clear:both;">
<b>Click Me </b>

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

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;
margin-left: 20px;

position: fixed;
bottom:0px !important;
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(".popup_window").css("display", "block");


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


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.

Last Updated on: August 30, 2014

Under: ,

Comments and Responses

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