How to load Javascript and CSS in WordPress

There are two common add_action hooks that can load scripts and CSS to WordPress:

Init: always load scripts and CSS for your website header (if you use home. php, index. php or a template file), and other "front-end" articles, pages, and template styles.
Wp_enqueue_scripts: the "appropriate" hook method is not always valid, according to your WordPress settings.

Load external jQuery library and custom scripts and styles of themes

The following example uses init in the add_action hook. There are two reasons for using init: One is that we are logging out of WordPress's default jQuery library and loading Google's jQuery library; the other is to ensure that scripts and CSS are loaded in the WordPress header.

Use if (! Is_admin () is used to ensure that these scripts and css are only loaded at the front end, and no backend management interface is loaded.

/** Google jQuery Library, Custom jQuery and CSS Files */
Function myScripts (){
Wp_register_script ('Google ', 'http: // ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js ');
Wp_register_script ('default', get_template_directory_uri (). '/jquery. Js ');
Wp_register_style ('default', get_template_directory_uri (). '/style.css ');
If (! Is_admin () {/** Load Scripts and Style on Website Only */
Wp_deregister_script ('jquery ');
Wp_enqueue_script ('Google ');
Wp_enqueue_script ('default ');
Wp_enqueue_style ('default ');
    } 
} 
Add_action ('init ', 'myscripts ');

Load the WP default jQuery library and custom scripts and styles of the topic

Row 3rd: array ('jquery ') is used to tell WordPress that jquery. js depends on the WordPress jquery library file, so that jQuery. js can be loaded after the WordPress jquery library file.

/** Add Custom jQuery and CSS files to a Theme */
Function myScripts (){
Wp_register_script ('default', get_template_directory_uri (). '/jquery. Js', array ('jquery '),'');
Wp_register_style ('default', get_template_directory_uri (). '/style.css ');
If (! Is_admin () {/** Load Scripts and Style on Website Only */
Wp_enqueue_script ('default ');
Wp_enqueue_style ('default ');
    } 
} 
Add_action ('init ', 'myscripts ');

Load print.css to your WordPress topic

Row 3: The final 'print 'is a media screen call. Make sure that print.css is loaded only when files in the printer of the website are loaded.

/** Adding a Print Stylesheet to a Theme */
Function myPrintCss (){
Wp_register_style ('print ', get_template_directory_uri ().'/print.css ', '','', 'print ');
If (! Is_admin () {/** Load Scripts and Style on Website Only */
Wp_enqueue_style ('print ');
    } 
} 
Add_action ('init ', 'myprintcss ');
If you want to load a unique script in an article or page, replace init with wp_enqueue_scripts. Wp_enqueue_scripts only loads scripts and CSS on the foreground and does not load scripts on the background management interface. Therefore, it is unnecessary to use wp_enqueue_scripts! Is_admin.