WordPress uses a system of so-called “hooks”, which are functions that are run at specific points within the process of building the webpage for the browser.
The system runs like this:
- A style is supposed to be within the
<head>portion of an HTML document. - within the function that outputs the
<head>portion, WordPress executes a function namedwp_enqueue_scripts. (this is for the “frontend” portion of the website. On the “backend” portion, a function namedadmin_enqueue_scriptsis executed, and on the login page, the function is namedlogin_enqueue_scripts)
Within your own code, you can “inject” your own stylesheets into this function like this:
add_action( 'wp_enqueue_scripts', 'my_awesome_additional_styles' );
//the previous line essentially says "Hey WordPress, when you output all your scripts and styles,
//please do whatever is written in the function my_awesome_additional_styles
function my_awesome_additional_styles(){
$css_path = plugins_url( "css/style.css", __FILE__ );
$css_dir = plugin_dir_path( __FILE__ ) . "css/style.css";
if( file_exists( $css_dir ) ) {
wp_enqueue_style( 'acf-block-css' , $css_path, array(), filemtime( $css_dir ) );
//The previous line essentially says: "Hey WordPress, output the link to this stylesheet, okay?"
}
}