How to all, Welcome to therichpost.com In this post, we will discuss Best way to including css and javascript files in wordpress theme.
Mostly we will add css and javascript files in wordpress theme header.php file. Including css and javascript files in wordpress theme, we will use wp_enqueue_script() and wp_enqueue_style() functions.
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);
$handle=>Name of file.
$src=>Path fo file.
$deps=>you can set the dependency that which will load first.
$ver=>you can define this version number for uniqueness.
$media=>you can define the type of media to load this stylesheet like ‘all’, ‘screen’ etc.
$in_footer=>(true/false) that allows you to place your scripts in the footer.
For css, we will use wp_enqueue_style().
Here is the code for including css file:
wp_enqueue_style( ‘yourcssfilename’, get_template_directory_uri() .’/css/yourcssfilename.css’ ,false,’1.3′,’all’);
For javascript, we will use wp_enqueue_script().
Here is the code for including javascript file:
wp_enqueue_script( ‘yourscriptname’, get_template_directory_uri() . ‘/js/yourscriptname.js’, array ( ‘jquery’ ), 1.3, true);
To call these functions, we will use wp_enqueue_scripts action.
Here is the proper code and you need to paste this code in your theme’s functions.php file:
function therichpost_load_scripts()
{
wp_enqueue_style( ‘yourcssfilename’, get_template_directory_uri() .’/css/yourcssfilename.css’,false,’1.3′,’all’);
wp_enqueue_script( ‘yourscriptname’, get_template_directory_uri() . ‘/js/yourscriptname.js’, array ( ‘jquery’ ), 1.3, true);
}
add_action( ‘wp_enqueue_scripts’, ‘therichpost_load_scripts’ );
With this you can stop the conflicts in javascript files. By default jQuery is already Included by WordPress
There are so many tricks in wordpress and I will let you know all. Please do comment if you any query related to this post. Thank you. Therichpost.com
Recent Comments