Proper Way To Use Scripts / Styles In WordPress

Proper Way To Use Scripts / Styles In WordPress

Using Scripts and Styles in WordPress Themes and Plugins

In this article, I am going to show you some examples of a wrong way to use Java Scripts and CSS Styles in WordPress themes and plugins. I will also show you the proper way to enqueue Scripts and Styles. So this article will be relatively short and brief, but to the point.

The Wrong Way

wrong way imageLike anything in life, there is the right way and there is the wrong way. Well, here are some examples of the wrong way to use your scripts and styles in WordPress themes and plugins.

How Not To Add Java Scripts to WordPress Frontend

I know, it just looks so much easier to add your scripts to the frontend of WordPress like this. It may be tempting, but don’t be this lazy. It’s really not hard to do it the right way, but as you can see by this example, this is the wrong way to handle it.

function some_script() {
    echo '<script src="/js/addtohomescreen.min.js"></script>';
}
add_action('wp_head', 'some_script');

How Not To Add Java Scripts to WordPress Wp-Admin

It really isn’t hard to add your scripts to the backend of WordPress, but definitely isn’t the right way.

function some_script() {
    echo '<script src="/js/addtohomescreen.min.js"></script>';
}
add_action('admin_head', 'some_script');

How Not To Add CSS Styles to WordPress Frontend

Despite what “others” are doing and told you, if you are including your CSS Styles to your WordPress theme’s frontend by this method, you are doing it incorrectly according to the WordPress Codex itself. (see External References – at the bottom of this article)

function some_script() {
    echo '<link rel="stylesheet" type="text/css" href="/css/addtohomescreen.css">';
}
add_action('wp_head', 'some_script');

How Not To Add CSS Styles to WordPress Wp-Admin

Yep, just like the last example, This too is the wrong way to add your CSS styles to your WordPress admin backend.

function some_script() {
    echo '<link rel="stylesheet" type="text/css" href="/css/addtohomescreen.css">';
}
add_action('admin_head', 'some_script');

The Right Way

right way imageNow let’s discuss how to use your Java Scripts and CSS Styles in WordPress, the right way! Yep, the WordPress Codex approved methods. So without further delay, let’s dive right on in.

How To Add Java Scripts to WordPress via Plugin

To properly add your JavaScript’s to WordPress from within a plugin, follow this example. Note: some_script() is the generic function name used here in this example and some_script_1 is also the generic name of the script we want to enqueue within WordPress. Something like this would probably go in a file within your plugin, like for example: wp-content/plugins/myplugin/myplugin.php and the script itself would be here wp-content/plugins/myplugin/js/example.js.

function some_script(){  
    wp_register_script( 'some_script_1', plugins_url() . '/js/example.js', array(), '1.0.0', true );
    wp_enqueue_script( 'some_script_1' );
}

If you want this to show on the backend (within the wp-admin), use this action to run the function.

add_action('admin_enqueue_scripts', 'some_script');

If you want this to show on the frontend, use this action to run the function.

add_action('wp_enqueue_scripts', 'some_script');

How To Add CSS Styles to WordPress via Plugin

To properly add your stylesheet to WordPress from within a plugin, follow this example. Note: some_style() is the generic function name used here in this example and some_style_1 is also the generic name of the stylesheet we want to enqueue within WordPress. Something like this would probably go in a file within your plugin, like for example: wp-content/plugins/myplugin/myplugin.php and the stylesheet itself would be here wp-content/plugins/myplugin/css/example.css.

function some_style(){  
    wp_register_style( 'some_style_1', plugins_url() . '/css/example.css', array(), '1.0.0', true );
    wp_enqueue_style( 'some_style_1' );
}

If you want this to show on the backend (within the wp-admin), use this action to run the function.

add_action('admin_enqueue_scripts', 'some_style');

If you want this to show on the frontend, use this action to run the function.

add_action('wp_enqueue_scripts', 'some_style');

How To Add JavaScript to WordPress via Theme

To properly add your JavaScript to WordPress from within a theme, follow this example. Note: some_script() is the generic function name used here in this example and some_script_1 is also the generic name of the script we want to enqueue within WordPress. Something like this would probably go in a file within your theme, like for example: wp-content/themes/mytheme/functions.php and the script itself would be here wp-content/themes/mytheme/js/example.js.

function some_script(){  
    wp_register_script( 'some_script_1', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
    wp_enqueue_script( 'some_script_1' );
}

If you want this to show on the backend (within the wp-admin), use this action to run the function.

add_action('admin_enqueue_scripts', 'some_script');

If you want this to show on the frontend, use this action to run the function.

add_action('wp_enqueue_scripts', 'some_script');

How To Add CSS Styles to WordPress via Theme

To properly add your stylesheet to WordPress from within a theme, follow this example. Note: some_style() is the generic function name used here in this example and some_style_1 is also the generic name of the stylesheet we want to enqueue within WordPress. Something like this would probably go in a file within your theme, like for example: wp-content/themes/mytheme/functions.php and the stylesheet itself would be here wp-content/themes/mytheme/css/example.css.

function some_style(){  
    wp_register_style( 'some_style_1', get_template_directory_uri() . '/css/example.css', array(), '1.0.0', true );
    wp_enqueue_style( 'some_style_1' );
}

If you want this to show on the backend (within the wp-admin), use this action to run the function.

add_action('admin_enqueue_scripts', 'some_style');

If you want this to show on the frontend, use this action to run the function.

add_action('wp_enqueue_scripts', 'some_style');

External References:

This is the recommended method of linking JavaScript to a WordPress generated page.
Function Reference/wp enqueue script

A safe way to add/enqueue a stylesheet file to the WordPress generated page.
Function Reference/wp enqueue style

You May Also Enjoy

Leave a Comment