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

16

4

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?

Tim Kelty

Posted 2014-06-18T12:15:29.710

Reputation: 1 871

Answers

20

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.

Josh Angell

Posted 2014-06-18T12:15:29.710

Reputation: 2 046

If you implement the includeJsResource or includeCssResource method, where would you put the actual resources? – bravokiloecho – 2015-04-15T09:17:36.950

1

Well, if you are doing it in your own plugin then in the resources folder in the root of your plugin. So for example includeJsResource ('myPlugin/js/script.js') would load pluginRoot/resources/js/script.js. See the docs for a more thorough explanation.

– Josh Angell – 2015-04-15T09:30:14.993

Brilliant, thanks for the super-speedy response – bravokiloecho – 2015-04-15T10:27:07.903

Glad I could help :) – Josh Angell – 2015-04-15T10:39:01.597

10

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:

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

Lindsey D

Posted 2014-06-18T12:15:29.710

Reputation: 18 570

2Good shout @Lindsey D! – Josh Angell – 2014-06-18T17:50:26.493