Expert Group of programming
Loading...

How to add/include script and style in WordPress

Posted by : Heycode Tech | Posted in : wordpress, WordPress Functions | Oct 6,2015 | 0 comments

As you know that we use the < link > and < script > tag functionality for adding/including the style and script in a webpage.

Here is the syntax :-

<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen><script src="js/all.min.js"></script>

But now wordpress have introduce hooks named :wp_enqueue_scripts AND admin_enqueue_scripts: for including the CSS and JS file in wordpress . Here is the detailed explanation about it.

Hooks used for including JS/CSS file

wp_enqueue_scripts  -> Adding/Including the script and style in front-end only.
admin_enqueue_scripts->Adding/Including the script and style in backend i.e wordpress admin only .

Functions for use : Here is the functions which is used for adding the CSS file .

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

Parameters
$handle = (string) (required) Name used as a handle for the stylesheet. It will unique name.
$src = (string|boolean) (optional) URL to the stylesheet.
$deps = (array) (optional) Array of handles of any stylesheet that this stylesheet depends on; stylesheets that must be loaded before this stylesheet. false if there are no dependencies.
$ver = (string|boolean) (optional) String specifying the stylesheet version number, if it has one.
$media = (string|boolean) (optional) String specifying the media for which this stylesheet has been defined. Possible values : ‘all’, ‘screen’, ‘handheld’, ‘print’. See this list for the full range of valid CSS-media-types.

For more information visit : http://codex.wordpress.org/Function_Reference/wp_enqueue_style : or comment me.

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

Parameters
$handle = (string) (required) Name used as a handle for the script. It will unique name.
$src = (string|boolean) (optional) URL to the script.
$deps = (array) (optional) Array of the handles of all the registered scripts that this script depends on, that is the scripts that must be loaded before this script.
$ver = (string|boolean) (optional) String specifying the script version number, if it has one.
$in_footer = (boolean) (optional) Normally, scripts are placed in of the HTML document. If this parameter is true, the script is placed before the end tag.
For more information visit here : http://codex.wordpress.org/Function_Reference/wp_enqueue_script : or do the comment me.

Including JS/CSS file in Front End – wp_enqueue_scripts : It is used for including the CSS and JS file in front-end only.

Here is the syntax - 
/**
 * Proper way to enqueue scripts and styles : Front end area
 */
function theme_name_scripts() {
	wp_enqueue_style( 'style-name', get_stylesheet_uri() );
	wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );// wp_enqueue_scripts action hook to link only on the front-end

Including JS/CSS file in BACK End i.e Admin dashboard – admin_enqueue_scripts : It is used for including the CSS and JS file in front-end only.

Here is the syntax - 
/**
 * Proper way to enqueue scripts and styles : admin dashboard area
 */
function load_custom_wp_admin_style() {
        wp_register_style( 'custom_wp_admin_css', get_template_directory_uri() . '/admin-style.css', false, '1.0.0' );
        wp_enqueue_style( 'custom_wp_admin_css' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

Share the idea’s if you face any difficulties .

Tags:

Author information - Heycode Tech

Every world can ask question and my website registered user give the suggestion.

See all posts by Author

Connect to author

About us

Heycodetech is a platform where you can ask any questions related to the programming like PHP,jQuery, MYSQL,HTML , CSS and moreHere is the Expert group of programming.