Acorn in WordPress Plugin

Hi,
I was looking for some resource or example how to get started with acorn for building a WordPress plugin. I would appreciate any kind of suggestions.
Thanks

1 Like

After a lot of trial and error, I managed to make acorn work in a plugin context.

What I did:

First require acorn in the plugin’s folder:

composer require roots/acorn

Add this to composer.json scripts,

        "post-autoload-dump": [
            "Roots\\Acorn\\ComposerScripts::postAutoloadDump"
        ]

These 2 first steps are explained here in the official documentation.

Then, in my plugin, I customize acorn paths so that they match my plugin structure.

\add_filter(
	'acorn/paths.base',
	function() {
		return MY_PLUGIN_ROOT;
	}
);

\add_filter(
	'acorn/paths.app',
	function() {
		return MY_PLUGIN_ROOT . 'engine';
	}
);

\add_filter(
	'acorn/paths.public',
	function() {
		return MY_PLUGIN_ROOT . 'assets/build';
	}
);

This is explained here in the docs.

Right after I pasted this part from Sage theme:

try {
	\Roots\bootloader();
} catch ( Throwable $e ) {
	wp_die(
		__( 'You need to install Acorn to use this plugin.', MY_PLUGIN_TEXTDOMAIN ),
		'',
		[
			'link_url' => 'https://docs.roots.io/acorn/2.x/installation/',
			'link_text' => __( 'Acorn Docs: Installation',  MY_PLUGIN_TEXTDOMAIN ),
		]
	);
}

In composer.json, you want at least one of the PSR-4 classmap paths matching acorn/paths.app value, because acorn uses the PSR-4 classmap declared in composer.json to determine the app namespace while bootstraping.

If you want to use the default acorn folder structure for your plugin, similar as what you see in the theme folder from the docs, you would have something like this:

"autoload": {
        "psr-4": {
            "My_Plugin\\": "app\/",
        }
    },

After that, I was able to run:

─❯ wp cli vendor:publish

 Which provider or tag's files would you like to publish?:
  [0] Publish files from all providers and tags listed below
  [1] Provider: Log1x\AcfComposer\Providers\AcfComposerServiceProvider
  [2] Provider: Roots\Acorn\Providers\AcornServiceProvider
  [3] Tag: acorn
  [4] Tag: config
 > 1

and:

─❯ wp cli acorn acf:field TestField

🎉 TestField field successfully composed.
     ⮑  engine/Fields/TestField.php
1 Like

We need the Acorn blade compiler in the plugin. Our theme already uses Acorn.

How would this work when I want Acorn for both the theme and a plugin?

When I add the filters my theme stops working…

And there can be only one Bootloader (it’s a singelton), so callling \Roots\bootloader() again for my plugin does nothing :frowning:

Ok, figured the Blade part out myself :slight_smile:

Based on Views - Laravel - The PHP Framework For Web Artisans and php - Namespacing views in Laravel - Stack Overflow the following works

add_action( 'init', function() {
  if ( function_exists( '\Roots\view' ) ) {
    $view = \Roots\view();

    $view->addNamespace('your-plugin-name', __DIR__ . '/resources/views/');

    add_shortcode( 'acorn-blade-shortcode', function( $args ) {
      return \Roots\view( 'your-plugin-name::greeting', ['name' => 'James'] );
    } );
  }
} );