Question 30129 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Load a style sheet into a wordpress plugin

So I’m creating a simple plugin for wordpress that will load new block patterns. I’ve got everything working except for one thing which is enqueueing stylesheets. I’ve done some research and tried to figure it out but I’m not sure where my code has gone wrong.

/**
 * Load CSS
 */

function sebootscout_enqueue_frontend() {
    wp_enqueue_style( 'sebootscout-block-patterns', plugins_url( 'sebootscout-block-style.css', __DIR__ ), array(), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'sebootscout_enqueue_frontend' );
Tags:

2

Answers


  1. 0

    I always use something like the following. Also making sure I’m actually getting the correct path to the file. The browser developer tools to help show that.

    function pl_scripts()
{
  wp_enqueue_style('pl-main', plugin_dir_url(__FILE__) . 'css/pl-main.css', array(), 1.0);
}

add_action('wp_enqueue_scripts', 'pl_scripts');
    Login or Signup to reply.
  2. 0

    First you need to register the style

    add_action('wp_enqueue_scripts', function () {
    wp_register_style('sebootscout-block-patterns', plugins_url('sebootscout-block-patterns', __FILE__), [], false, 'all');
});

    If the file which calls this action is nested and not inside plugin’s root folder then replace

    plugins_url('sebootscout-block-patterns', __FILE__)

    with

    plugins_url('sebootscout-block-patterns', dirname(__FILE__))

    Finally wherever you want to load the specific registered style

    wp_enqueue_style('sebootscout-block-patterns');

    Make sure the theme you are testing this on has wp_head(); before </head> on header.php
    and wp_footer(); before </body> on footer.php

    This is because wordpress actually uses those 2 functions to hook your style to the DOM depending on the option to load it on footer or not.

    Hope this helps and wish you luck.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search