Installing and Setting up WordPress Blade

Benefits of Using Laravel Blade Templates vs. PHP Templates

Laravel Blade templates offer a clean and efficient approach to writing views compared to traditional PHP templates. One of Blade’s major benefits is its lightweight syntax. It allows developers to write expressive code without the clutter of standard PHP, improving readability and reducing code duplication. Blade provides features like template inheritance, sections, and layouts, making it easier to create reusable templates, which saves time in managing common elements like headers, footers, or sidebars across multiple pages.

Another key feature is Blade’s automatic escaping of output. This helps prevent common security vulnerabilities like cross-site scripting (XSS) by ensuring that user-generated content is safely handled. Additionally, Blade supports convenient shorthand for common PHP control structures. For example, @if and @foreach directives are much more concise and readable compared to their PHP counterparts, keeping the view logic clean and maintainable.

In contrast, traditional PHP templates often involve repetitive code, leading to harder-to-maintain views as your project grows. The blending of business logic and presentation logic in PHP templates can make debugging and maintenance cumbersome over time.

In this blog, I’ll explain how to install and set up the WordPress Blade plugin. This plugin allows you to use Blade templates in your WordPress projects, bringing all the benefits of Blade’s syntax and structure to WordPress development.

Installation and Setup

Create a composer.json file in the root of your project with following config

{
	"name": "imran/wordpress",
	"description": "Custom website for Wp",
	"extra": {
		"installer-paths": {
			"wp-content/mu-plugins/{$name}/": ["type:wordpress-muplugin"]
		}
	},
	"require": {
		"composer/installers": "^2.3"
	},
	"config": {
		"allow-plugins": {
			"composer/installers": true
		}
	},
	"scripts": {
		"wordpress-blade": "wordpress-blade"
	}
}

Then run

composer install

This will install the package in the vendor directory and add the wordpress-blade package inside the mu-plugins.

Then load this plugin in your mu-plugins/loader.php

require_once '/path.../wordpress-blade/plugin.php';

Your composer.json would now look like this:

{
	"name": "imran/wordpress",
	"description": "Custom website for Wp",
	"extra": {
		"installer-paths": {
			"wp-content/mu-plugins/{$name}/": ["type:wordpress-muplugin"]
		}
	},
	"require": {
		"travelopia/wordpress-blade": "^1.0.0",
		"composer/installers": "^2.3"
	},
	"config": {
		"allow-plugins": {
			"composer/installers": true
		}
	},
	"scripts": {
		"wordpress-blade": "wordpress-blade"
	}
}

Then require the autoload file from vendor directory by adding the following code in your wp-config.php file.

require_once 'vendor/autoload.php';

Then create a components directory in your theme and add the components inside them.

# bootstrap.blade.php
<x-layout>
    <x-hello name="Jane">Hi there!</x-hello>
</x-layout>

# layout.blade.php
@php
    get_header();
@endphp

    <main>
        {{ $slot }}
    </main>

@php
    get_footer();
@endphp

# hello.blade.php
@props( [
    'name' => '',
] )

<div>
    <h1>{{ $slot }}</h1>
    <p>Hello, {{ $name }}</p>
</div>

And then create a template file and load the view in your template e.g. laravel-blade.php:

<?php
/**
 * Template Name: Laravel
 */

Travelopia\Blade\load_view( 'bootstrap' );

Based on where your component directory is, add create a blade.config.php file in the root of your project and add the 

Also add the build/dist folder path where the blade files need to be compiled.

<?php
/**
 * Blade Config.
 *
 * @package wordpress-blade
 */

const WORDPRESS_BLADE = [
	'paths_to_views'         => [
		__DIR__ . '/wp-content/themes/aquila/assets/src/',
		__DIR__ . '/wp-content/themes/aquila/assets/src/components',
		// Any other paths where Blade needs to look for components.
	],
	'path_to_compiled_views' => __DIR__ . '/wp-content/themes/aquila/assets/build/blade',
	// Where you want Blade to save compiled files.
	'never_expire_cache'     => false,
	// Use `true` on production environments.
	'base_path'              => __DIR__,
	// The base path that is common to the front-end and admin.
];

Now every time you open/refresh that template page in your browser it looks for the files from components directory and builds it into the build/blade directory. If something has changed it will only rebuild that file

For production build run the following from the root of the project.

composer exec wordpress-blade -- --config-file=blade.config.php