Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/travelopia/wordpress-blade
Use Laravel Blade components in WordPress
https://github.com/travelopia/wordpress-blade
laravel-blade wordpress wordpress-plugin
Last synced: 6 days ago
JSON representation
Use Laravel Blade components in WordPress
- Host: GitHub
- URL: https://github.com/travelopia/wordpress-blade
- Owner: Travelopia
- License: mit
- Created: 2024-08-06T04:18:54.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-11-13T14:35:33.000Z (3 months ago)
- Last Synced: 2025-01-29T08:11:28.866Z (17 days ago)
- Topics: laravel-blade, wordpress, wordpress-plugin
- Language: PHP
- Homepage: https://packagist.org/packages/travelopia/wordpress-blade
- Size: 60.5 KB
- Stars: 4
- Watchers: 10
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: license
Awesome Lists containing this project
README
# WordPress Blade Plugin
Use Laravel Blade components in WordPress.
🚨 Note: Only Anonymous Components are currently supported: https://laravel.com/docs/10.x/blade#anonymous-components
Built by the super talented team at Travelopia.
## Video Tutorial
▶ ️[tutorial](https://www.youtube.com/watch?v=M7aCzMkL7Lo)
## Installation
### Install via Composer (recommended):
```
$ composer require travelopia/wordpress-blade
```
* Your composer file should include this
```json
{
"name": "your/packagename",
"description": "Description",
"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"
}
}
```
* This installs it as an MU Plugin.
* Then load this plugin in your mu plugins loader file e.g. mu-plugins/loader.php
```php
require_once WPMU_PLUGIN_DIR . '/wordpress-blade/plugin.php';
```
* Then require the autoload file from vendor directory by adding the following code in your wp-config.php file.
```php
require_once 'vendor/autoload.php';
```
### Manual Installation (if you know what you are doing):
1. Download this repository as a ZIP file.
2. Run `composer install --no-dev --optimize-autoloader`
3. Use it either as an MU plugin or a normal plugin!
## Building for Production
Compile your Blade components for production as a best practice. Some production environments are read-only, in which case this step is necessary.
Run the following command:
`composer exec wordpress-blade -- --config-file=blade.config.php` - Ensure the path to the Blade config is correct.
## Usage
First, create a `blade.config.php` file at the root of your project, and add the following code in there:
```php
[
__DIR__ . '/wp-content/themes//',
// Any other paths where Blade needs to look for components.
],
'path_to_compiled_views' => __DIR__ . '/wp-content/themes//dist/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.
]
);
```
### Bootstrap a layout.
As a best practice, and if applicable, bootstrap an entire layout like so:
```bladehtml
# bootstrap.blade.php
Hi there!
```
```bladehtml
# layout.blade.php
@php
get_header();
@endphp
{{ $slot }}
@php
get_footer();
@endphp
```
```bladehtml
# hello.blade.php
@props( [
'name' => '',
] )
{{ $slot }}
Hello, {{ $name }}
```
And then load the view in your template:
```php
Travelopia\Blade\load_view( 'bootstrap' );
```
You can also load an individual component like so:
```php
$name = 'hello'; // The name of the component.
$attributes = [ 'name' => 'Jane' ]; // Properties / attributes to pass into the component.
$echo = true; // Whether to echo the component. `false` returns the component as a string.
Travelopia\Blade\load_view( $name, $attributes, $echo );
```
This is especially useful when you want to load components from Blocks and Full Site Editing.