How to Include jQuery and CSS in WordPress Plugin and Theme Development?

Must Read

Four Things You Most Likely Didn’t Know About Guest Post Service

Guest Posting is a great way to raise awareness and build links. However, before starting a guest...

How Does Blogger Outreach Help Your Brand Grow?

Bloggers are eager to promote their content and engage their readers, so building relationships with them are...

How To Get Your Startup Noticed

Being an entrepreneur is always a learning experience. That's because the rules are constantly changing. The change...
Shrinivas
Hi, this is +Shrinivas. I am a freelance web developer and part time blogger having skills in WordPress, HTML/CSS, jQuery, PHP and CodeIgniter.

Looking for a short tutor on how to include jQuery and CSS while developing the WordPress plugin or theme? Here is the safe way of attaching your stylesheet and including jquery, along with this here I’ve also discussed on how to add your own jquery script in your plugin or theme. Before moving to our main topic let me mention the bad practice of adding jquery and CSS in wordpress plugin and theme developmet.

Also read:

Top 5 Free and Premium Chat Plugins for WordPress

Bad Practice of Adding JQuery and CSS in WordPress Plugin and Theme Development

If you are echoing the jquery or CSS in your wordpress plugin and theme development then this one is the wrong way of adding the stuff. Here is a sample of bad practice of adding jquery and CSS in wordpress development.

<?php
echo ‘<script src="http://code.jquery.com/jquery-1.9.1.js"></script>’
echo ‘<link href="’. plugins_url( 'css/mystyle.css' , __FILE__ ) . '" rel="stylesheet" type="text/css" />’;
?>

Proper Way of Adding JQuery and CSS in WordPress Plugin and Theme Development

We just had a look at the wrong way of adding CSS and jquery, then how to add them in proper way in wordpress plugin and theme development? WordPress comes with some useful functions that let you safely add the style sheets and jquery. wp_enqueue_script(), wp_register_style() and wp_enqueue_style() built-in functions makes your job easy. These functions should be used along with ‘wp_enqueue_scripts’ hook. Here is the sample code which uses these functions and hook to add jquery and CSS in wordpress plugin developmet-

<?php
function my_scripts() {
wp_enqueue_script( 'jquery' );
wp_register_style( 'prefix-style', plugins_url('mystyle.css', __FILE__) );
wp_enqueue_style( 'prefix-style' );
}
add_action('wp_enqueue_scripts','my_scripts');
?>

In the code above, we added jQuery with wp_enqueue_script function, we have also included our own CSS file using wp_register_style and wp_enqueue_style functions, all you need is to replace ‘prefix-style’ handle and ‘mystyle.css’ with your own CSS file name.

Just add the code written below in my_scripts() function to include your own jquery script in wordpress plugin development

wp_enqueue_script('newscript',plugins_url( 'myscript.js' , __FILE__ ),array( 'jquery' )); //replace myscript.js with your script file name

Replace plugins_url() with get_template_directory_uri() if you want use the code above for theme development.

WordPress comes pre-installed with jquery and many other popular scripts so it is not required to add the jquery CDN, just add wp_enqueue_script( ‘jquery’ ); that’s it.

- Advertisement -

Latest News

Four Things You Most Likely Didn’t Know About Guest Post Service

Guest Posting is a great way to raise awareness and build links. However, before starting a guest...

How Does Blogger Outreach Help Your Brand Grow?

Bloggers are eager to promote their content and engage their readers, so building relationships with them are essential to growing your brand....

How To Get Your Startup Noticed

Being an entrepreneur is always a learning experience. That's because the rules are constantly changing. The change happens so subtly that you...

The Benefits of Treemapping for Data Analysis

Treemapping is a great tool for data analysis because it allows you to see the big picture and the details at the...

Tips for driving more traffic to your engineering blog

Over the last two decades, blogging has transformed from being a somewhat hobbyist pursuit to a fully-fledged sector of the internet that...

More Articles Like This

- Advertisement -