Load a style sheet into a wordpress plugin

user_19112638 0
Viewed 36

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' );
wordpress php
2 Answers

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');
user_72586300

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.

user_146578120
Related