Can a plugin add JS or CSS to the control panel?

Question

Say for example, I wanted to add a "Expand/Collapse All" button to Matrix fields.

Is there any way to do this, or is this something more appropriate for a feature request for P&T?

Answer 1

One way to accomplish this is to write some code in the init() function of your root plugin file. So in your example that might look something like:

class MyFunkyPlugin extends BasePlugin
{

  function init() {

    // check we have a cp request as we don't want to this js to run anywhere but the cp
    // and while we're at it check for a logged in user as well
    if ( craft()->request->isCpRequest() && craft()->userSession->isLoggedIn() )
    {

      // the includeJs method lets us add js to the bottom of the page
      craft()->templates->includeJs('var Myjs = "foo";');

      // the includeCss method will add css in the head
      craft()->templates->includeCss('.myFunkyPluginSelector { color: red; }');

      // the includeJsResource method will add a js file to the bottom of the page
      craft()->templates->includeJsResource('myPlugin/js/app.js');

      // the includeCssResource method will add a link in the head
      craft()->templates->includeCssResource('myFunkyPlugin/css/style.css');

    }

  }

  // rest of the root plugin file
  ...

}

The nice thing about the init() function is it gets run before anything else in your plugin does and it gets run on every request as every installed plugin is initialised on every request.

More detail on the available functions can be found in the TemplatesService docs.

Answer 2

Josh's answer is great if you are interested in building your own plugin. But if that's a little much for you, you're still in luck...

You can use these plugins to quickly & easily add CSS and JavaScript to your control panel:

• Control Panel CSS plugin
• Control Panel JS plugin

Disclaimer: I wrote both of those plugins, let me know if you run into any issues!