1. Home
  2. Docs
  3. Application Framework
  4. Plugin Guide
  5. Assets

Assets

You can easily create new javascript modules, css stylesheets, html templates, and php classes for your plugin using the WP CLI.

$ wp mwp add-js myplugin-slug script-name > doc
$ wp mwp add-css myplugin-slug stylesheet-name > doc
$ wp mwp add-template myplugin-slug views/template-name > doc
$ wp mwp add-class myplugin-slug SubPackage\ClassName > doc

@Styles & Scripts

Use annotations on class properties to register your stylesheets and scripts. The properties are relative paths to the css/js file from your plugin root folder. Then to include them on the page, call the useScript() or useStyle() method on your plugin instance.

For scripts, you can also pass data along which will be injected into your script as local data.

class Plugin extends MWP\Framework\Plugin
{
    /**
     * @MWP\WordPress\Stylesheet( handle="vendor-style" )
     */
     public $myStyle = 'assets/css/stylesheet-name.css';

    /**
     * @MWP\WordPress\Script( handle="vendor-js", deps={"mwp"} )
     */
     public $myScript = 'assets/js/script-name.js';

    /**
     * @MWP\WordPress\Action( for="wp_enqueue_scripts" )
     */
     public function enqueueScripts()
     {
        // use the stylesheet on this page
        $this->useStyle( $this->myStyle );

        // use the script on this page, and inject some local variables
        $this->useScript( $this->myScript, array(
            'quote' => 'Try to learn something about everything and everything about something.',
            'author' => 'Thomas Henry Huxley (1825-1895)',
        ));
     }
}
/* File: plugin-dir/assets/js/script-name.js */
(function($, undefined) {
    mwp.controller.model( 'mycontroller-name', {
        init: function() {
            console.log( this.local.quote + ' / ' + this.local.author );
        }
    });
})(jQuery);

@PHP Classes

A well designed plugin is going to need a few different classes to separate between responsibilities.

$ wp mwp add-class myplugin-slug SubPackage\ClassName > doc

Learn about Class Extensibility.

@Templates

Templates are used to keep html separate from your core plugin logic.

$ wp mwp add-template myplugin-slug views/template-name > doc

Was this article helpful to you? Yes No

How can we help?