Home CMS Tutorial WordPress How to add Javascript code to WordPress website

How to add Javascript code to WordPress website

Mar 14, 2020 pm 02:11 PM
wordpress

The following column WordPress Tutorial will introduce to you how to add Javascript code to a WordPress website. I hope it will be helpful to friends in need!

How to add Javascript code to WordPress website

If you are modifying the template theme you made, and you have control over upgrading and updating, the addition of javascript code is relatively free and can be introduced according to the actual business logic. But if you want to add JavaScript code that has nothing to do with the theme, such as visitor statistics, performance monitoring and other types of independent code, since it has nothing to do with the theme file, then the best way is to add the code in the plug-in.

WordPress provides the function wp_enqueue_script and the hook wp_enqueue_scripts

to facilitate developers with the ability to embed custom code.

The following is a brief description of the steps to add:

Create a new directory under the plug-in directory. After entering the directory, create a new plug-in file index.php and insert the following sample code:

<?php
/*
Plugin Name: custom javascript
Description: Add custom javascript
*/
function add_custom_scripts() {  
   wp_enqueue_script( &#39;jquery-ui&#39;, &#39;https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js&#39;, array(), &#39;1.12.1&#39;, false);
}
add_action( &#39;wp_enqueue_scripts&#39;, &#39;add_custom_scripts&#39; );
Copy after login

wp_enqueue_script function five parameter description

1. string $handle #The unique name for the currently imported javascript file

2. string $src = '' #javascript document resource url

3. array $deps = array() #Depends on code handle

4. string|bool|null $ver = false #The version number, if not specified, is consistent with the WordPress system version number

5. bool $in_footer = false #Whether it is at the bottom of the document, if it is false, javascript will be loaded at the head of the document by default

Finally save the file, go to the plug-in center to activate the plug-in, and activate the plug-in in the browser If you view the page source code on the page, you can see the imported javascript file.

Using the wp_enqueue_script function has the following advantages:

a. You can set the loading order with other dependent codes

b. You can specify the version number to facilitate cache management

c. You can specify the location of the embedded code in the document

The above is the detailed content of How to add Javascript code to WordPress website. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to adjust the wordpress article list How to adjust the wordpress article list Apr 20, 2025 am 10:48 AM

There are four ways to adjust the WordPress article list: use theme options, use plugins (such as Post Types Order, WP Post List, Boxy Stuff), use code (add settings in the functions.php file), or modify the WordPress database directly.

What are the plugins for wordpress blocking ip What are the plugins for wordpress blocking ip Apr 20, 2025 am 08:27 AM

WordPress IP blocking plugin selection is crucial. The following types can be considered: based on .htaccess: efficient, but complex operation; database operation: flexible, but low efficiency; firewall: high security performance, but complex configuration; self-written: highest control, but requires more technical level.

How to cancel the editing date of wordpress How to cancel the editing date of wordpress Apr 20, 2025 am 10:54 AM

WordPress editing dates can be canceled in three ways: 1. Install the Enable Post Date Disable plug-in; 2. Add code in the functions.php file; 3. Manually edit the post_modified column in the wp_posts table.

How to write a header of a wordpress How to write a header of a wordpress Apr 20, 2025 pm 12:09 PM

The steps to create a custom header in WordPress are as follows: Edit the theme file "header.php". Add your website name and description. Create a navigation menu. Add a search bar. Save changes and view your custom header.

How to change the head image of the wordpress theme How to change the head image of the wordpress theme Apr 20, 2025 am 10:00 AM

A step-by-step guide to replacing a header image of WordPress: Log in to the WordPress dashboard and navigate to Appearance &gt;Theme. Select the topic you want to edit and click Customize. Open the Theme Options panel and look for the Site Header or Header Image options. Click the Select Image button and upload a new head image. Crop the image and click Save and Crop. Click the Save and Publish button to update the changes.

How to build a website for wordpress host How to build a website for wordpress host Apr 20, 2025 am 11:12 AM

To build a website using WordPress hosting, you need to: select a reliable hosting provider. Buy a domain name. Set up a WordPress hosting account. Select a topic. Add pages and articles. Install the plug-in. Customize your website. Publish your website.

How to import wordpress templates How to import wordpress templates Apr 20, 2025 am 10:18 AM

WordPress templates quickly create professional websites. The steps to import a template include: select and download the template. Log in to the WordPress dashboard. Select Theme from the Appearance menu. Click "Add New Theme". Click "Upload topic" and select the downloaded template .zip file. Click "Install Now". Click the "Activate" button. Customize the templates through the Customize menu.

WordPress website account login WordPress website account login Apr 20, 2025 am 09:06 AM

To log in to a WordPress website account: Visit the login page: Enter the website URL plus "/wp-login.php". Enter your username and password. Click "Login". Verification Two-step Verification (optional). After successfully logging in, you will see the website dashboard.

See all articles