Quickly learn how to load JavaScript scripts in WordPress _ javascript skills

Source: Internet
Author: User
This article describes how to quickly learn how to load JavaScript scripts in WordPress and how to load CSS styles in response, for more information about how to load a script (CSS and JS, the same below) in WordPress, most people directly use the header. adding the link label to the php file or adding the link label directly to the head label through the wp_head Hook does not comply with official regulations.

The standard Script Loading method should be based on the functions officially provided by WordPress (as will be said later). There are several advantages to unified standards: security and management, and convenience and efficiency, in addition, not only can scripts be mounted to themes, but also plug-ins, but also scripts can be managed and the Mount sequence and position and other content can be adjusted.

In which hook is the file loaded?

Before calling the script function, we must first determine the hook where the function is executed. There are four common Script Loading hooks: wp_enqueue_scripts (loaded on the frontend), admin_enqueue_scripts (loaded in the background), login_enqueue_scripts (loaded on the logon page), and init (globally loaded ).

The most common method is wp_enqueue_scripts. Mount the script to this directory and load it only on the foreground.

Load JavaScript scripts

For example, I want to load a JS file on the foreground, which is the themes. JS file in the js folder of the topic root directory. First, you need to use the wp_register_script () function to add JS to the script Library (register the script), and then use the wp_enqueue_script () function to mount the script.

Function Bing_enqueue_scripts () {wp_register_script ('themes _ js', get_bloginfo ('template _ directory '). '/js/themes_js.js'); // register the JS script wp_enqueue_script ('themes _ js') with the ID of themes_js; // mount the script} add_action ('wp _ enqueue_scripts ', 'bing _ enqueue_scripts ');

Load CSS scripts

function Bing_enqueue_scripts(){  wp_register_style( 'style', get_bloginfo( 'template_directory' ) . '/style.css' );  wp_enqueue_style( 'style' );}add_action( 'wp_enqueue_scripts', 'Bing_enqueue_scripts' );


This article just briefly explains how to load the script and make rational use of the script queuing mechanism, which can make the program flexible and speed up the efficiency.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.