How To Implement Custom jQuery and CSS In WordPress Plugin

By Malika Rani 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.

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.

This is your popup window.

Click Me

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.

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.

About Malika Rani
sbauthor

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.

Share on Google Plus

About Unknown