Support » Developing with WordPress » Help understanding enqueue_style

  • I’m having difficulty understanding what exactly the purpose of the wp_enque functions are… How is this different than just hooking a link to the stylesheet/scripts to the footer/header?

    Also, I don’t really understand the variables. The codex offers the example below.

    function themeslug_enqueue_style() {
        wp_enqueue_style( 'my-theme', 'style.css', false );
    }
     
    function themeslug_enqueue_script() {
        wp_enqueue_script( 'my-js', 'filename.js', false );
    }
     
    add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );
    add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' );

    What do ‘my-theme’ and ‘my-js’ represent?

    How would one enqueue scripts/stylesheets that are placed in, for example, static.wordpress-install-url.com/assets/js and static.wordpress-install-url.com/css?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Those are bad code examples.
    Here is the Code Reference for wp_enqueue_style: https://developer.www.4f19.cn/reference/functions/wp_enqueue_style/
    and wp_enqueue_script: https://developer.www.4f19.cn/reference/functions/wp_enqueue_script/

    If you simply add a <link> in the footer or header, it is not flexible. Other plugins can’t influence it, and the order in which the scripts or styles are printed is static. If you use the functions, you can use the parameters to influence the order and you can remove some conditionally (it’s dynamic).

    The first parameter (‘my-theme’ or ‘my-js’) is the handle, which is like a nickname, so that the order can be juggled. I can use the ‘jquery’ handle as a dependency, and that tells WordPress that the jquery script needs to be output and then mine (since mine depends on it).

    When you use these functions, you need to specify the complete URL to the file, not just the filename as is shown in your example. Since your can install WP anywhere, there are functions to use to get the path needed. get_template_directory_uri() for the parent theme folder.

    Thanks for the input. I think I am starting to get it, now.

    So, get_template_directory_uri() will go to the directory of wherever Astra (or whatever theme my child theme is based on) and then ‘/assets/css/style.css’ is where I have placed my css file.

    So… since I need to load additional css/js (they pertain to the child theme I am making, not to the Astra theme, itself), is there a function to fetch child theme’s uri? or do I have to enter it manually?

    Yes, get_template_directory_uri() is for the parent theme, whatever and wherever it is. You would use concatenation to get the whole path:
    get_template_directory_uri() . '/assets/css/style.css'
    But the child theme style file should be in the root of the child theme folder.
    get_stylesheet_uri() will get the entire path for it. If your child theme has additional styles or scripts, you would use
    get_stylesheet_directory_uri() . '/assets/css/other.css'

    https://developer.www.4f19.cn/reference/functions/get_stylesheet_directory_uri/

    So all of that makes sense now, but will enqueue still just stick all of the scripts/css in the body/header of each page?

    For example, I have a slider built with a plugin called Flickity. It’s only on two of the pages, so I don’t want to load all of that js/css on the rest of the pages.

    How do I call the (as an example) Flickity css/js programatically?

    • This reply was modified 1 month, 2 weeks ago by oguruma.

    The default is to load it in the <head> section, but the last parameter indicates if it’s okay to load in the footer.
    The code that calls wp_enqueue_style should only call it when it should be loaded, so if there’s something to check, do the check. If it’s a shortcode, you can use has_shortcode() https://developer.www.4f19.cn/reference/functions/has_shortcode/
    or put the enqueue into the shortcode handler (obviously, loading in the footer).
    If it’s a known page slug, you can use is_page('slug'). https://developer.www.4f19.cn/reference/functions/is_page/

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.