Answers for "wordpress how to enqueue styles"

PHP
3

wp enqueue styles

/** 
 *   Enqueue your theme styles and scripts in functions.php
 *   use time() instead of a proper versioning to avoid caching when developing
 */
function my_theme_enqueue_scripts() {
    wp_enqueue_style( 'default-style', get_stylesheet_uri(), [], '1.0.0', 'all' ); //default styles.css
    wp_enqueue_style( 'main-style', get_stylesheet_directory_uri() . '/assets/css/main.min.css', [], time(), 'all' );
    wp_enqueue_script( 'main-script', get_stylesheet_directory_uri() . '/assets/js/main.min.js', [], time(), false );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
Posted by: Guest on March-02-2021
0

Enqueue WordPress Scripts and Styles

<?php
/* Enqueue Wordpress Scripts and Styles
-------------------------------------------------- */

function wp_enqueue_scripts_styles() {
    // Javascript - Register Scripts
    wp_register_script( 'bootstrap-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array( 'jquery' ), '3.2', true ); // -- From Parent Theme
    wp_register_script( 'documents-script', get_stylesheet_directory_uri() . '/bootstrap/docs/docs.min.js', array( 'bootstrap-script' ), '3.2', true ); // -- From Child Theme
    wp_register_script( 'bootlint-script', 'http://maxcdn.bootstrapcdn.com/bootlint/0.3.0/bootlint.min.js', array( 'angularjs-bootstrap-script' ), '0.3.0', true ); // -- From an External URL

    // Javascript - Enqueue Scripts
    wp_enqueue_script( 'bootstrap-script' );
    wp_enqueue_script( 'documents-script' );

    // Stylesheet - Register Styles
    wp_register_style( 'bootstrap-style', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css', '3.2', true ); // -- From Parent Theme
    wp_register_style( 'documents-style', get_stylesheet_directory_uri() . '/bootstrap/docs/docs.min.css', '3.2', true ); // -- From Child Theme
    wp_register_style( 'external-style', 'http://www.example.com/stylesheet.css', '0.0', true ); // -- From an External URL
    
    // Stylesheet - Enqueue Styles
    wp_enqueue_style( 'bootstrap-style' );
    wp_enqueue_style( 'documents-style' );
    
    // Conditional Statement to enqueue Scripts/Styles on specific page templates
    if ( is_page_template( 'page-template.php' ) ) {
      wp_enqueue_script( 'bootlint-script' );
      wp_enqueue_style( 'external-style' );
    }
}

add_action( 'wp_enqueue_scripts', 'wp_enqueue_scripts_styles' );
Posted by: Guest on August-07-2021

Browse Popular Code Answers by Language