[PHP] Easy CSS and Javascript handling for different templates

Hello everyone it’s been a while since my last blog post, it’s because I’m pretty busy with work and trying to increase my programming skills. Anyway today I brought you people a nice PHP Class which could improve your sites performance by helping you handle css and javascript’s.

Let’s assume you have your own CMS system with a lot of templates and you haven’t yet coded a logic to seperate css and javascripts for your various templates, currently all your templates load the same css and javascript etc which are being fetched out of arrays, files or something else “That’s waste of bandwidth and can cause a lot of hours resolving javascript conflicts etc” this is the moment my class can help you separate things.

Let’s say you have 3 templates: section, home and article and you want each of them to have their own css, javascripts with the class I wrote you will be able to do something like this.

$site = new Configuration();

$site->css = array(‘section’ => array(‘first.css’, ‘second.css’, ‘third.css’),
‘home’ => array(‘style.css’),
‘article’ => array(‘jquery.css’, ‘tools.css’, ‘grid.css’)

$site->js = array(‘section’ => array(‘first.js’, ‘second.js’, ‘third.js’),
‘home’ => array(‘super.js’),
‘article’ => array(‘jquery.js’, ‘tools.js’, ‘grid.js’)

with the code above we have just associated css and javascripts to three templates, this code part comes usually comes into your bootstrap-per or config files whatever your CMS uses to initialize classes and stuff.

Let’s also say you also have a variable which holds the current template name let’s call it $template now with this variable we can do something like this.

$template = ‘section‘;
$site->get_output(‘css’, $template); // This function returns html output it also has a third parameter which if false returns an array please return to the source code and read the parameter comments.

this part would be called before the <head> tag ends on your page, after you would view the source code you would see that all scripts for this template are loaded of course you still need to make create a template logic by that I mean a variable which holds the template name to automate the process and also the path to the css and js need to be changed but this is all easy done because I’ve included a small template logic to the class that lets you easy manipulate with it and also add your custom script templates (preffix and suffix) as you will see from the source code but also you will see that I have used PHP’s magic getter and setter functions which will let you add custom arrays for many different things but all this can only be achieved by further exploring the class.

<link rel=”stylesheet” type=”text/css” href=”first.css”>
<link rel=”stylesheet” type=”text/css” href=”second.css”>
<link rel=”stylesheet” type=”text/css” href=”third.css”>

<script type=”text/javascript” src=”first.js”></script>
<script type=”text/javascript” src=”second.js”></script>
<script type=”text/javascript” src=”third.js”></script>

I wont further explain the class because I seem to confuse everything I’m kind tired so take a look at the source code which includes a working example code.

I welcome every kind of feedback or suggestions, also If you have your own algorithm that handles the logic of implementing js and css scripts let me know I would like to learn more.

Here’s a little screenshot I’ve took

This image shows only dummy tests.

If you like to download the file it can be found here it also includes a working example of the code, but the code is self explaining so you wont have trouble using it.

Here’s also a Pastebin link

P.s. sorry for my bad English, but I’m pretty tired ^.^


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s