Jump to content

Have a scripts/styles loader like WP


pogidude
 Share

Recommended Posts

I don't know what the general stand is on this, but for me, I really like how in WordPress scripts and styles can be queued, and in the header and footer (via wp_head() and wp_footer() respectively) they are loaded with their dependencies sorted out.

Then, anytime before the template is output, you can do a call to:

wp_enqueue_script('script-name-id', '/url/to/script.js', array('dependency-script-id', 'jquery'), "version", true);

and you can be sure that the script will be loaded AFTER "dependency.js" and "jquery.js" has been loaded. And oh, the last parameter specifies whether the script should be loaded in the <head> or in the footer (or wherever wp_footer() is in the theme).

Now, I understand for many situations, this may seem like overkill especially if you are loading the same scripts/styles on all the pages. But there are situations where  you need a script only for *that* page and don't want it loading on all other pages. if you're using only one view template to output your pages, then that means you'll need to create another view template which includes the specific script/style on this page.

  • Like 1
Link to comment
Share on other sites

I'm not sure I understand fully: With your qp_enqueue_script function, how do you solve the problem of loading a script only for a specific page?

I think you still need an additional if?

// Only load script for Page with name 'pw-rocks'
if ($page->name == 'pw-rocks') $config->scripts->add('blub.js');
  • Like 1
Link to comment
Share on other sites

Hi pogidude,

This won't handle dependencies but will allow you to load scripts on per-page basis...

In your master template place the following code

<?php foreach($config->scripts->unique() as $file) echo "\n\t<script type='text/javascript' src='$file'></script>"; ?>

In your partial templates add

$config->scripts->append("/path/to/script.js"); 

You can also do the same with styles:

// in master
<?php foreach($config->styles->unique() as $file) echo "\n\t<link type='text/css' href='$file' rel='stylesheet' />"; ?>

// in sub-template
$config->styles->append("/path/to/style.css"); 

Link to comment
Share on other sites

thanks @wanze and @applab. I do use $config->styles and scripts to add my stuff - unless I'm using "getThumb()" in the page (from the Thumbnails module). Here's one of the issues about using $config->styles/scripts to store your assets files http://processwire.com/talk/topic/4740-jqueryfancybox-script-loading-by-itself-in-frontend/

Basically, modules can inadvertently "add" styles/scripts to your frontend (especially autoload modules). In that thread above, I was pulling the body content (which used the getThumb() function) BEFORE the whole view template was loaded. Meaning getThumb() - which also instantiates Imagefield module which in turn loads the JqueryFancybox module - was run before the whole foreach($config->styles/scripts) thing.

Anyway, this could probably be fixed with module creators doing something along the lines of:

if(CHECK_IF_IN_ADMIN){

//load modules

}

but yeah, what I really would want is the dependencies thing. and also a way to specify whether the script should go in the *footer* or in the *head*.

Link to comment
Share on other sites

You can clean that array, before you gonna use it.

Or you can make your own array. 

$cssfiles = new FilenameArray;

$cssfiles->add("/site/templates/css/middle.css");

$cssfiles->append("/site/templates/css/last.css");

$cssfiles->prepend("/site/templates/css/first.css");

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...