Enqueue

The Enqueue Handler in the WP Blueprint Classic Theme allows you to manage the enqueuing of styles and scripts to your WordPress site. Enqueuing styles and scripts in a well-structured manner ensures proper functionality and performance across your website. This guide will walk you through the process of setting up and using the Enqueue Handler effectively.

Setting Up the Enqueue Handler

Step 1

Create a New Class: Begin by creating a new class that extends the base Enqueue Handler class provided by WP Blueprint Theme Core.
class Enqueue extends \WPBlueprint\Theme\Core\Handlers\Enqueue {

Step 2

Register Styles and Scripts: In the newly created class, define the styles and scripts you want to enqueue. Each style and script is represented as an associative array within the $styles_and_scripts array.

$styles_and_scripts = [
    [
        'handle'  => 'main-style',
        'src'     => mix( 'css/style.css' ),
        'deps'    => [],
        'version' => '1.0.0',
        'media'   => 'all',
        'hook'    => 'front',
    ],
    [
        'handle'    => 'main-script',
        'src'       => mix( 'js/app.js' ),
        'deps'      => [],
        'version'   => '1.0.0',
        'in_footer' => true,
        'hook'      => 'front',
    ],
];

Step 3

Set Styles and Scripts: Utilize the parent method set_styles_and_scripts() to set the defined styles and scripts.
parent::set_styles_and_scripts( $styles_and_scripts );

Setting Up the Enqueue Handler

• handle: A unique identifier for the style or script.
• src: The source URL of the style or script file.
• deps: An array of handles of any styles or scripts that this style or script depends on.
• version: The version number of the style or script.
• media: The media type for which this style should be defined.
• in_footer: If true, the script will be placed in the footer, improving page load performance.
• hook: The WordPress hook at which the style or script should be enqueued (‘front’ for front-end, ‘admin’ for admin area).

Example Usage

Here’s how the Enqueue Handler might look in your theme:

class Enqueue extends \WPBlueprint\Theme\Core\Handlers\Enqueue {
    public function __construct() {
        $this->register_styles_and_scripts();
    }

    private function register_styles_and_scripts() {
        $styles_and_scripts = [
            // Define your styles and scripts here...
        ];
        parent::set_styles_and_scripts( $styles_and_scripts );
    }
}

By effectively using the Enqueue Handler, you can ensure that your theme’s styles and scripts are enqueued in an organized and efficient manner, contributing to a seamless user experience on your WordPress site.

For more information about enqueuing styles and scripts in WordPress, refer to the WordPress documentation.