<p>Did you place the init function within your asset bundle class as stated in the docs?</p>

<p>e.g.:</p>

<pre><code>&lt;?php
namespace ns\prefix;

use craft\web\AssetBundle;
use craft\web\assets\cp\CpAsset;

class MyPluginAsset extends AssetBundle
{
    public function init()
    {
        // define the path that your publishable resources live
        $this-&gt;sourcePath = '@ns/prefix/resources';

        // define the dependencies
        $this-&gt;depends = [
            CpAsset::class,
        ];

        // define the relative path to CSS/JS files that should be registered with the page
        // when this asset bundle is registered
        $this-&gt;js = [
            'script.js',
        ];

        $this-&gt;css = [
            'styles.css',
        ];

        parent::init();
    }
}
</code></pre>

<p>If so, there is only one step left to register the asset in your template (e.g. <code>yourplugin/src/templates/index.twig</code>), you simply have to register it in your template with:</p>

<p><code>{% do view.registerAssetBundle("ns\\prefix\\FooBundle") %}</code></p>

<p>If it still does't work, you could generate a minimalistic plugin scaffolding with <a href="https://pluginfactory.io/" rel="nofollow noreferrer">https://pluginfactory.io/</a> , its all set up for you and commented out.</p>

<p><strong>Update</strong>:
To register the plugins assetbundle in your frontend layout, add </p>

<pre><code>&lt;body&gt;
  {{ beginBody() }
    .
    .
    .
    content
    .
    .
    .
    {% do view.registerAssetBundle("ns\\prefix\\FooBundle") %}
  {{ endBody() }}
&lt;/body&gt;
</code></pre>

<p>to your frontend templates, e.g. in your main <code>layout.twig</code> at the start and the end of the body tag. </p>

CC BY-SA 4.0
2018-12-06T12:47:17.840Z
Thanks! I did read the docs but found it a little difficult to piece together exactly where some of this stuff went. I'll have to read more of the plugin factory comments.
Chattervast
CC BY-SA 4.0
2018-12-07T13:23:40.177Z
I wasn't able to get my scripts onto the page so I created a new scaffold via Plugin Factory. It worked but only loads the scripts onto the plugin's settings page in the dashboard. Is there something I need to change to get it to the frontend pages? It registers the asset bundles in templates/index.twig but most of the code references cp layouts.
Chattervast
CC BY-SA 4.0
2018-12-07T19:09:37.423Z
So you do want to make use of the plugins css and js assets not only in the cp but also on the regular frontend? So that your plugin modifies what you would usualy sort out with css and js linked in your frontend layout.twig?
HendrikEng
CC BY-SA 4.0
2018-12-07T19:13:47.520Z
Yes correct. The plugin doesn't need the css/js files for the backend. It needs to add the css and js files to the frontend to all pages.
Chattervast
CC BY-SA 4.0
2018-12-07T19:27:05.807Z
updated the answer
HendrikEng
CC BY-SA 4.0
2018-12-07T19:43:28.977Z
When you say layout.twig are you referring to a layout.twig within the plugin folders or the main templates folder in craft?
Chattervast
CC BY-SA 4.0
2018-12-07T20:09:57.407Z
the main templates folder you would use for frontend development https://docs.craftcms.com/v3/dev/#template-paths
HendrikEng
CC BY-SA 4.0
2018-12-07T20:17:48.000Z
So if I wanted to go the route of not requiring the user to add it to their templates and the plugin just add it to the frontend, Im guessing I would need to read more on template roots and registering with the frontend? https://docs.craftcms.com/v3/extend/template-roots.html#plugin-control-panel-templates
Chattervast
CC BY-SA 4.0
2018-12-06T10:48:06.283Z
2018-12-07T19:32:58.020Z
2018-12-07T19:32:58.020Z
HendrikEng
<p>If it helps, I couldn't get it to show either - my solution was that I wasn't calling {% do... inside the body tag, so it was being ignored!</p>

CC BY-SA 4.0
2020-02-12T12:43:53.083Z
Thank you! I actually figured it out without {% do calls by checking if CP request in init() and showing appropriate code like so: $request = Craft::$app->getRequest(); if ($request->getIsCpRequest()) {Craft::$app>view>registerAssetBundle(PluginNameCpAsset::class);} else {Craft::$app->view->registerAssetBundle(PluginNameFrontendAsset::class);}
Chattervast
CC BY-SA 4.0
2020-02-11T02:09:51.093Z
2020-02-11T02:09:51.093Z
Jamie M
<p>I found Yii's documentation on Assets to be helpful in understanding how to get asset dependencies. 
<strong>Assets</strong>
<a href="https://www.yiiframework.com/doc/guide/2.0/en/structure-assets" rel="nofollow noreferrer">https://www.yiiframework.com/doc/guide/2.0/en/structure-assets</a>
<strong>Asset Bundle Class documentation</strong>
<a href="https://www.yiiframework.com/doc/api/2.0/yii-web-assetbundle" rel="nofollow noreferrer">https://www.yiiframework.com/doc/api/2.0/yii-web-assetbundle</a></p>

CC BY-SA 4.0
2018-12-07T21:49:56.963Z
So from the first link, the top example, would that be what Plugin Factory generates for PluginNameAsset in the assetbundles folder? I looked through the craft3 class reference docs but mostly found craft\web\assets listed for cp side . is there a specific front end reference that Im missing? Or can I just use that first link template and reference it from my plugin main file init? Sorry Im fairly new to this, mostly just twig filters so far.
Chattervast
CC BY-SA 4.0
2018-12-07T21:57:30.740Z
This should be all you need 
{% do view.registerAssetBundle("ns\\prefix\\FooBundle") %}
bshelling
CC BY-SA 4.0
2018-12-07T22:00:21.107Z
For example if your plugin directory is structured like so:
plugin-name/src/FooBundle.php
bshelling
CC BY-SA 4.0
2018-12-08T15:39:44.267Z
Still struggling to get asset bundles to frontend pages. I have the bundles setup and can get stuff go to the setting page of the plugin with a new Plugin Factory generation. Shouldn't I be able to just create a new file in the templates folder of the plugin then call Craft::$app->getView()->renderTemplate('pluginName/templateFile'); and it output the asset bundle that is registered in that file with {% do view.... - obviously doesn't work that way cause page errors with "unable to find template"...
Chattervast
CC BY-SA 4.0
2018-12-07T21:32:34.700Z
2018-12-07T21:32:34.700Z
bshelling
<p>How do I add js and css files to frontend page loads via a plugin? I did reference this issue:
<a href="https://craftcms.stackexchange.com/questions/267/can-a-plugin-add-js-or-css-to-the-control-panel">Can a plugin add JS or CSS to the control panel?</a></p>

<p>but that is for Craft 2.</p>

<p>Reading the docs here:
<a href="https://docs.craftcms.com/v3/changes-in-craft-3.html#template-tags" rel="nofollow noreferrer">https://docs.craftcms.com/v3/changes-in-craft-3.html#template-tags</a>
and here
<a href="https://docs.craftcms.com/v3/extend/asset-bundles.html" rel="nofollow noreferrer">https://docs.craftcms.com/v3/extend/asset-bundles.html</a></p>

<p>show that Craft 3 is much different. I've looked through several Craft 3 plugins that do load scripts and styles on the frontend but each seems to handle this in very different ways. Is there a straight-forward standard that should be used if a plugin is loaded and needs to add resources to frontend page loads?</p>

<p>On the Asset Bundles doc page, it seems you can link directly to the asset in the plugin init but a comment further down the page suggests that you need to load the assets into the template:</p>

<p>"With that in place, all that is left is to register the asset bundle wherever its JS/CSS files are needed."</p>

<p>or I may be understanding this incorrectly.
Can I accomplish what I'm trying just by placing:</p>

<pre><code>$this-&gt;sourcePath = '@ns/prefix/resources';
    $this-&gt;depends = [
        CpAsset::class,
    ];

    $this-&gt;js = [
        'custom-scripts.js',
    ];

    $this-&gt;css = [
        'custom-styles.css',
    ];
</code></pre>

<p>within the init function? Is this enough to get those files onto the frontend loads or do I need something else and something to tell them not to load onto backend pages?</p>

<p>Thank you for any help. Most of my plugin knowledge is based on reverse engineering plugins and in this area I'm still confused.</p>

<plugin-development><assets><plugins>
Craft 3 Plugin Development: Add CSS and JS File to Frontend Templates
# Craft 3 Plugin Development: Add CSS and JS File to Frontend Templates

(Asked by: username_0 on 2018-12-05)

How do I add js and css files to frontend page loads via a plugin? I did reference this issue:
Can a plugin add JS or CSS to the control panel?
but that is for Craft 2.
Reading the docs here:
https://docs.craftcms.com/v3/changes-in-craft-3.html#template-tags
and here
https://docs.craftcms.com/v3/extend/asset-bundles.html
show that Craft 3 is much different. I've looked through several Craft 3 plugins that do load scripts and styles on the frontend but each seems to handle this in very different ways. Is there a straight-forward standard that should be used if a plugin is loaded and needs to add resources to frontend page loads?
On the Asset Bundles doc page, it seems you can link directly to the asset in the plugin init but a comment further down the page suggests that you need to load the assets into the template:
"With that in place, all that is left is to register the asset bundle wherever its JS/CSS files are needed."
or I may be understanding this incorrectly.
Can I accomplish what I'm trying just by placing:
$this->sourcePath = '@ns/prefix/resources';
    $this->depends = [
        CpAsset::class,
    ];

    $this->js = [
        'custom-scripts.js',
    ];

    $this->css = [
        'custom-styles.css',
    ];

within the init function? Is this enough to get those files onto the frontend loads or do I need something else and something to tell them not to load onto backend pages?
Thank you for any help. Most of my plugin knowledge is based on reverse engineering plugins and in this area I'm still confused.

**Tags:** plugin-development, assets, plugins

---

## 3 answers

### Answer by username_1 on 2018-12-06. Score: 2 | Accepted answer

Did you place the init function within your asset bundle class as stated in the docs?
e.g.:
sourcePath = '@ns/prefix/resources';

        // define the dependencies
        $this->depends = [
            CpAsset::class,
        ];

        // define the relative path to CSS/JS files that should be registered with the page
        // when this asset bundle is registered
        $this->js = [
            'script.js',
        ];

        $this->css = [
            'styles.css',
        ];

        parent::init();
    }
}

If so, there is only one step left to register the asset in your template (e.g. yourplugin/src/templates/index.twig), you simply have to register it in your template with:
{% do view.registerAssetBundle("ns\\prefix\\FooBundle") %}
If it still does't work, you could generate a minimalistic plugin scaffolding with https://pluginfactory.io/ , its all set up for you and commented out.
Update:
To register the plugins assetbundle in your frontend layout, add 

  {{ beginBody() }
    .
    .
    .
    content
    .
    .
    .
    {% do view.registerAssetBundle("ns\\prefix\\FooBundle") %}
  {{ endBody() }}


to your frontend templates, e.g. in your main layout.twig at the start and the end of the body tag.

> **Comments:**
> **username_0**: Thanks! I did read the docs but found it a little difficult to piece together exactly where some of this stuff went. I'll have to read more of the plugin factory comments.  
> **username_0**: I wasn't able to get my scripts onto the page so I created a new scaffold via Plugin Factory. It worked but only loads the scripts onto the plugin's settings page in the dashboard. Is there something I need to change to get it to the frontend pages? It registers the asset bundles in templates/index.twig but most of the code references cp layouts.  
> **username_1**: So you do want to make use of the plugins css and js assets not only in the cp but also on the regular frontend? So that your plugin modifies what you would usualy sort out with css and js linked in your frontend layout.twig?  
> **username_0**: Yes correct. The plugin doesn't need the css/js files for the backend. It needs to add the css and js files to the frontend to all pages.  
> **username_1**: updated the answer  
> **username_0**: When you say layout.twig are you referring to a layout.twig within the plugin folders or the main templates folder in craft?  
> **username_1**: the main templates folder you would use for frontend development https://docs.craftcms.com/v3/dev/#template-paths  
> **username_0**: So if I wanted to go the route of not requiring the user to add it to their templates and the plugin just add it to the frontend, Im guessing I would need to read more on template roots and registering with the frontend? https://docs.craftcms.com/v3/extend/template-roots.html#plugin-control-panel-templates  

---

### Answer by username_2 on 2020-02-11. Score: 2

If it helps, I couldn't get it to show either - my solution was that I wasn't calling {% do... inside the body tag, so it was being ignored!

> **Comments:**
> **username_0**: Thank you! I actually figured it out without {% do calls by checking if CP request in init() and showing appropriate code like so: $request = Craft::$app->getRequest(); if ($request->getIsCpRequest()) {Craft::$app>view>registerAssetBundle(PluginNameCpAsset::class);} else {Craft::$app->view->registerAssetBundle(PluginNameFrontendAsset::class);}  

---

### Answer by username_3 on 2018-12-07. Score: 1

I found Yii's documentation on Assets to be helpful in understanding how to get asset dependencies.
**Assets**
<https://www.yiiframework.com/doc/guide/2.0/en/structure-assets>
**Asset Bundle Class documentation**
<https://www.yiiframework.com/doc/api/2.0/yii-web-assetbundle>

> **Comments:**
> **username_0**: So from the first link, the top example, would that be what Plugin Factory generates for PluginNameAsset in the assetbundles folder? I looked through the craft3 class reference docs but mostly found craft\web\assets listed for cp side . is there a specific front end reference that Im missing? Or can I just use that first link template and reference it from my plugin main file init? Sorry Im fairly new to this, mostly just twig filters so far.  
> **username_3**: This should be all you need  {% do view.registerAssetBundle("ns\\prefix\\FooBundle") %}  
> **username_3**: For example if your plugin directory is structured like so: plugin-name/src/FooBundle.php  
> **username_0**: Still struggling to get asset bundles to frontend pages. I have the bundles setup and can get stuff go to the setting page of the plugin with a new Plugin Factory generation. Shouldn't I be able to just create a new file in the templates folder of the plugin then call Craft::$app->getView()->renderTemplate('pluginName/templateFile'); and it output the asset bundle that is registered in that file with {% do view.... - obviously doesn't work that way cause page errors with "unable to find template"...  

---

