<p><a href="https://craftcms.stackexchange.com/questions/267/can-a-plugin-add-js-or-css-to-the-control-panel/270#270">Josh's answer</a> 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...</p>

<p>You can use these plugins to quickly &amp; easily add CSS and JavaScript to your control panel:</p>

<ul>
<li><a href="https://github.com/doublesecretagency/craft-cpcss" rel="nofollow noreferrer">Control Panel CSS plugin</a></li>
<li><a href="https://github.com/doublesecretagency/craft-cpjs" rel="nofollow noreferrer">Control Panel JS plugin</a></li>
</ul>

<p><strong>Disclaimer:</strong> I wrote both of those plugins, let me know if you run into any issues!</p>

CC BY-SA 3.0
2014-06-18T17:50:26.493Z
Good shout @Lindsey D!
Josh Angell
CC BY-SA 4.0
2014-06-18T17:08:22.713Z
2019-08-05T16:41:48.713Z
2019-08-05T16:41:48.713Z
Lindsey D
<p>One way to accomplish this is to write some code in the <code>init()</code> function of your root plugin file. So in your example that might look something like:</p>

<pre><code>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()-&gt;request-&gt;isCpRequest() &amp;&amp; craft()-&gt;userSession-&gt;isLoggedIn() )
    {

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

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

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

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

    }

  }

  // rest of the root plugin file
  ...

}
</code></pre>

<p>The nice thing about the <code>init()</code> 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.</p>

<p>More detail on the available functions can be found in the <a href="http://buildwithcraft.com/classreference/services/TemplatesService">TemplatesService docs</a>.</p>

CC BY-SA 3.0
2015-04-15T09:17:36.950Z
If you implement the `includeJsResource` or `includeCssResource` method, where would you put the actual resources?
bravokiloecho
CC BY-SA 3.0
2015-04-15T09:30:14.993Z
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](http://buildwithcraft.com/docs/plugins/resources) for a more thorough explanation.
Josh Angell
CC BY-SA 3.0
2015-04-15T10:27:07.903Z
Brilliant, thanks for the super-speedy response
bravokiloecho
CC BY-SA 3.0
2015-04-15T10:39:01.597Z
Glad I could help :)
Josh Angell
CC BY-SA 3.0
2014-06-18T12:23:23.477Z
2015-04-15T09:31:11.500Z
2015-04-15T09:31:11.500Z
Josh Angell
<p>Say for example, I wanted to add a "Expand/Collapse All" button to Matrix fields.</p>

<p>Is there any way to do this, or is this something more appropriate for a feature request for P&amp;T?</p>

<plugins><control-panel>
Can a plugin add JS or CSS to the control panel?
# Can a plugin add JS or CSS to the control panel?

(Asked by: username_0 on 2014-06-18)

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?

**Tags:** plugins, control-panel


---

## 2 answers

### Answer by username_2 on 2014-06-18. Score: 23 | Accepted answer

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.

> **Comments:**
> **username_3**: If you implement the `includeJsResource` or `includeCssResource` method, where would you put the actual resources?  
> **username_2**: 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](http://buildwithcraft.com/docs/plugins/resources) for a more thorough explanation.  
> **username_3**: Brilliant, thanks for the super-speedy response  
> **username_2**: Glad I could help :)  

---

### Answer by username_1 on 2014-06-18. Score: 12

[Josh's answer](https://craftcms.stackexchange.com/questions/267/can-a-plugin-add-js-or-css-to-the-control-panel/270#270) 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](https://github.com/doublesecretagency/craft-cpcss)
* [Control Panel JS plugin](https://github.com/doublesecretagency/craft-cpjs)

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

> **Comments:**
> **username_2**: Good shout @username_1!  

---

