Best way to include custom javascript into Vanilla 2

patric

I'm trying to include a custom .js file into Vanilla 2 but i don't want to modify any of the core files like class.vanillacontroller.php. Has anyone done this successfully?

patric

Note, i found one way that worked, its not exactly what i wanted but if you include a link to your .js file in your default.master.php it will work. But i'm still looking for a way to include a .js in the theme folder...

Todd

You can add a plugin class to a theme to add the js file. Let's assume your theme is called Patric. Do the following:

1. Add your custom.js to /themes/Patric/js/custom.js
2. Create a file called /themes/Patric/class.patricthemehooks.php
3. Add the following to the php file:

   
   <?php if (!defined('APPLICATION')) exit();
   
   class PatricThemeHooks implements Gdn_IPlugin {
   
     public function Base_Render_Before($Sender) {
         $Sender->AddJsFile('custom.js');
     }
   }

Themes are always searched for js and css files first so your custom.js will always be given the highest priority.

patric

Thanks Todd,

This will be very useful :-)

charliepratt

@Todd - I'm trying to get my theme's core.js as well as jquery.fitvids.js to run before some of the other JS files included with Vanilla. When I put this in my themehooks file, it runs, but it doesn't run before the other JS files. Example:

<script src="/js/library/jquery.js?v=2.0.18.8" type="text/javascript"></script> <script src="/js/library/jquery.livequery.js?v=2.0.18.8" type="text/javascript"></script> <script src="/js/library/jquery.form.js?v=2.0.18.8" type="text/javascript"></script> <script src="/js/library/jquery.popup.js?v=2.0.18.8" type="text/javascript"></script> <script src="/js/library/jquery.gardenhandleajaxform.js?v=2.0.18.8" type="text/javascript"></script> <script src="/js/global.js?v=2.0.18.8" type="text/javascript"></script> <script src="/applications/vanilla/js/bookmark.js?v=2.0.18.8" type="text/javascript"></script> <script src="/applications/vanilla/js/discussions.js?v=2.0.18.8" type="text/javascript"></script> <script src="/applications/vanilla/js/options.js?v=2.0.18.8" type="text/javascript"></script> <script src="/js/library/jquery.gardenmorepager.js?v=2.0.18.8" type="text/javascript"></script> <script src="/plugins/Voting/voting.js?v=1.1.1b" type="text/javascript"></script> <script src="/themes/Gunway/js/core.js?v=1.0" type="text/javascript"></script> <script src="/js/jquery.fitvids.js?v=2.0.18.8" type="text/javascript"></script>

charliepratt

This is being analyzed here via a Fitvids.js challenge - vanillaforums.org/discussion/23831/fitvids-js-breaks-layout-but-only-in-the-mobile-template#latest