Monday, March 27, 2023

Enqueue Style and Scripts in Wordpress function file

In WordPress, instead of simply adding these to the header, you should use a method called enqueueing which is a standardized way of handling your assets with the added bonus of managing dependencies. Find out how to do it below using wp_enqueue_scripts.


<?php


add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {

    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

    wp_enqueue_style( 'owl-style', get_stylesheet_directory_uri() . '/assets/css/owl.carousel.min.css');

    wp_enqueue_style( 'owl-default-style', get_stylesheet_directory_uri() . '/assets/css/owl.theme.default.min.css');

  //wp_enqueue_script( 'owl-carousel', get_stylesheet_directory_uri() . '/assets/js/owl.carousel.min.js', array(), '1.0.0', true);

}

To load scripts in footer use wp_footer.

function add_this_script_footer() {

wp_enqueue_script( 'owl.carousel-js', get_stylesheet_directory_uri() . '/assets/js/owl.carousel.min.js');

wp_enqueue_script( 'scripts_js', get_stylesheet_directory_uri() . '/assets/js/scripts.js');

}

add_action('wp_footer', 'add_this_script_footer'); 

No comments:

Post a Comment

For Professional website contact WEB CODE ADDICT

View this post on Instagram A post shared by WebCodeAddict (@webcodeaddicted)