Wp Enqueue With Code Examples

Written by
  • Updated
  • Posted in Programming
  • 4 mins read


Wp Enqueue With Code Examples

Hello everybody, In this publish, we’re going to take a look at how the Wp Enqueue downside could be solved utilizing the pc language.

/** 
 *   Enqueue your theme types and scripts in features.php
 *   use time() as a substitute of a correct versioning to keep away from caching when growing
 */
perform my_theme_enqueue_scripts() {
    wp_enqueue_style( 'default-style', get_stylesheet_uri(), [], '1.0.0', 'all' ); //default types.css
    wp_enqueue_style( 'main-style', get_stylesheet_directory_uri() . '/property/css/important.min.css', [], time(), 'all' );
    wp_enqueue_script( 'main-script', get_stylesheet_directory_uri() . '/property/js/important.min.js', [], time(), false );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

The varied approaches to fixing the Wp Enqueue downside are outlined within the following code.

perform wpdocs_theme_name_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_uri() ); /* enqueues model.css */
    /* if you wish to enqueue different types use: */
    /* wp_enqueue_style( 'style-name', get_template_directory_uri() . '/css/your-style-name.css' ); */
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/instance.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
perform script_that_requires_jquery() {
    wp_register_script( 'script-with-dependency', 'http://www.instance.com/script-with-dependency.js', array( 'jquery' ), '1.0.0', true );
    wp_enqueue_script( 'script-with-dependency' );
}
add_action( 'wp_enqueue_scripts', 'script_that_requires_jquery' );
perform my_scripts_method() {
    wp_enqueue_script(
        'custom-script',
        get_stylesheet_directory_uri() . '/js/custom_script.js',
        array( 'jquery' )
    );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css',false,'1.1','all');

As we’ve seen, the Wp Enqueue problemcode was solved by utilizing quite a lot of completely different cases.

What is WP enqueue?

wp_enqueue_scripts is the right hook to make use of when enqueuing scripts and types that are supposed to seem on the entrance finish. Despite the title, it’s used for enqueuing each scripts and types.

What is WP enqueue script?

wp_enqueue_script() is the perform all that may put all of the code within the web page the place it goes. $deal with is a singular title for the script itself. $src represents the URL of the particular . js file you are enqueueing. $deps are the $handles of any dependencies this one requires.28-Oct-2017

How do I enqueue pictures in WordPress?

ENQUEUE THE SCRIPT

  • /* Add the media add script */
  • perform wk_enqueue_script() {
  • //Enqueue media.
  • wp_enqueue_media();
  • // Enqueue {custom} js file.
  • wp_register_script( ‘wk-admin-script’, plugins_url( __FILE__ ), array(‘jquery’) );
  • wp_enqueue_script( ‘wk-admin-script’ );
  • }

How do I add enqueue scripts in WordPress?

To enqueue scripts and types within the front-end you will want to make use of the wp_enqueue_scripts hook. Within the hooked perform you should use the wp_register_script() , wp_enqueue_script() , wp_register_style() and wp_enqueue_style() features.21-Sept-2022

How do I enqueue CSS in WordPress?

Enqueueing the CSS Files The parameters are precisely the identical with the wp_register_style() perform, so there is not any must repeat them. // if we registered the model earlier than: wp_enqueue_style( ‘my-bootstrap-extension’ ); // if we did not register it, we HAVE to set the $src parameter!23-Jan-2021

How do I enqueue hyperlinks in WordPress?

Adding Links in WordPress

  • From the WordPress publish or web page editor, choose the textual content that you really want be hyperlinked.
  • Once you might have that textual content chosen, click on the hyperlink button within the toolbar.
  • This will carry up a field the place you possibly can enter the URL of your hyperlink.

What is Get_stylesheet_uri in WordPress?

get_stylesheet_uri(): string Retrieves stylesheet URI for the lively theme.03-Jul-2015

Is web page a slug?

A slug is the a part of a URL that identifies a selected web page on an internet site in an easy-to-read kind. In different phrases, it is the a part of the URL that explains the web page’s content material. For this text, for instance, the URL is https://yoast.com/slug, and the slug merely is ‘slug’.18-Sept-2019

To add the script within the footer or backside of a WordPress web page, all you should do is ready the $in_footer parameter to true . We have additionally used one other perform get_template_directory_uri() which returns the URL for the template listing.04-Oct-2013

How do I enqueue a script in WordPress little one theme?

How to Create a Child Theme

  • Create a baby theme folder. First, create a brand new folder in your themes listing, situated at wp-content/themes .
  • Create a stylesheet: model. css.
  • Enqueue stylesheet. The remaining step is to enqueue the guardian and little one theme stylesheets, if wanted.
  • Install little one theme.
  • Activate little one theme.

Leave a Reply