PHPackages                             boxybird/morph - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. boxybird/morph

ActiveLibrary[Utility & Helpers](/categories/utility)

boxybird/morph
==============

A plugin for building WordPress components with Alpine.js.

v0.3.4(2y ago)432131MITPHP

Since Sep 28Pushed 1y ago2 watchersCompare

[ Source](https://github.com/boxybird/morph)[ Packagist](https://packagist.org/packages/boxybird/morph)[ RSS](/packages/boxybird-morph/feed)WikiDiscussions master Synced today

READMEChangelog (1)Dependencies (2)Versions (42)Used By (0)

Morph
=====

[](#morph)

A WordPress theme package for building Laravel Livewire inspired WordPress components with Alpine.js.

Demos
-----

[](#demos)

Demos Theme
-----------

[](#demos-theme)

Installation
------------

[](#installation)

Install the package via composer.

```
cd wp-content/themes/your-theme

```

```
composer require boxybird/morph

```

> Location: /wp-config.php

```
define('BB_MORPH_HASH_KEY', 'SOME_RANDOM_16_CHARACTER_STRING');
```

> Location: /your-theme/functions.php

```
require_once __DIR__ . '/vendor/autoload.php';
```

> Location: /wp-admin/options-permalink.php

Visit and refresh permalinks by clicking **"Save Changes"** button

Important
---------

[](#important)

By default, this package pre-bundles Alpine. If you site already has Alpine installed, you should dequeue this packages version to avoid conflicts.

**Note:** A minimum version of Alpine 3.11.0 is required.

> Location: /your-theme/functions.php

```
add_action('wp_enqueue_scripts', function () {
    wp_dequeue_script('bb-alpine');
});
```

Hooks
-----

[](#hooks)

```
$wpMorph({ ... },  {
    onStart: () => {},
    onResponse: res => {},
    onSuccess: data => {},
    onError: error => {},
    onFinish: () => {},
})
```

By default, the `morph_component('example');` function will look for a matching file of name you passed in. E.g. `/your-theme/morph/components/example.php`.

You can override this root folder path by using the `morph/component/path` filter.

```
add_filter('morph/component/path', function ($path) {
    $path = get_template_directory() . '/custom-folder/';

    return $path;
});
```

Example Counters
----------------

[](#example-counters)

> Location: /your-theme/index.php

```

    Increment

```

Example Event/Listener
----------------------

[](#example-eventlistener)

> Location: /your-theme/index.php

```