Creating New theme .. add JS files issue
Permalink 1 user found helpful
I note in my theme, I can dynamically add .css files in header.php like:
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('assets/css/bootstrap.css');?>" />
Is there method for doing the same in the footer.php for JS files, like:
<script type="text/javascript" src="<?php echo $this->getScriptFile('assets/js/bootstrap-alert.js');?>"></script>
Obviously I have made the above up ( getScriptFile ) as it seems to make sense, so just wondering is there a method for adding js files in this manner. As I wish to keep all elements of my new theme within the one theme area, and not reference my theme files from outside of the theme structure.
Regards ( 1st Post )
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('assets/css/bootstrap.css');?>" />
Is there method for doing the same in the footer.php for JS files, like:
<script type="text/javascript" src="<?php echo $this->getScriptFile('assets/js/bootstrap-alert.js');?>"></script>
Obviously I have made the above up ( getScriptFile ) as it seems to make sense, so just wondering is there a method for adding js files in this manner. As I wish to keep all elements of my new theme within the one theme area, and not reference my theme files from outside of the theme structure.
Regards ( 1st Post )
As MoonGrab says is a good general technique for theme specific scripts.
However, bootstrap.js is also used by the core, so any functions also in bootstrap.js are no longer specific to your theme. Pulling in your own copy of a single bootstrap file could collide with the core loading bootstrap.js when the dashboard bar is showing and during edit mode.
If you use addHeaderItem/addFooterItem and the html helper, then multiple loading conflicts can usually be resolved by the core. I have read somewhere in the forums that this is possible from the right point in a theme header, but have never done it so you will need to search that out or someone else will need to post the final part of the answer.
You could also call addHeaderItem/addFooterItem from an on_start event handler in the theme's package controller. There is an example of doing this in my Load.UI addon. However, without further logic doing so will result in bootstrap.js being loaded all the time, not just for pages with your theme.
However, bootstrap.js is also used by the core, so any functions also in bootstrap.js are no longer specific to your theme. Pulling in your own copy of a single bootstrap file could collide with the core loading bootstrap.js when the dashboard bar is showing and during edit mode.
If you use addHeaderItem/addFooterItem and the html helper, then multiple loading conflicts can usually be resolved by the core. I have read somewhere in the forums that this is possible from the right point in a theme header, but have never done it so you will need to search that out or someone else will need to post the final part of the answer.
You could also call addHeaderItem/addFooterItem from an on_start event handler in the theme's package controller. There is an example of doing this in my Load.UI addon. However, without further logic doing so will result in bootstrap.js being loaded all the time, not just for pages with your theme.
@MoonGrab thankyou, perfect
@JohntheFish I gave that as an example, but I hadnt realised this so great info many thanks.
@JohntheFish I gave that as an example, but I hadnt realised this so great info many thanks.
Yeah, that's a fair point, although c5 doesn't use the default bootstrap stuff.
Not sure if this goes only to the bootstrap.css or to the JS as well. But still, you should always try using the core stuff like you do with jquery instead of loading your own libs. This makes things lighter and more integrated.
Not sure if this goes only to the bootstrap.css or to the JS as well. But still, you should always try using the core stuff like you do with jquery instead of loading your own libs. This makes things lighter and more integrated.
This piece of code references your theme directory.
There is no getScriptFile function.
The other way to add something to the header would be