Drupal Tutorial: Remove System CSS and JS files

Image
Drupal Logo

Developing themes with Drupal is fairly straightforward if you have a good understanding of Drupal's hook system works. The hook system allows the developer to apply global controls and functionality without hacking theme files with PHP.

Using something like ZEN theme is a good start to developing the front-end of a Drupal website, it provides a bare-bones base theme on which to build. However, there are some aspects of the Drupal theme system that are just plain annoying. Even if you use ZEN theme or another bare bones starter theme, certain system or module CSS and JavaScript files will creep into the theme as you develop the website. This makes it difficult to fully optimize a website as you end up serving requests for files that are often unused for displaying content to a visitor.

To remove these unwanted CSS and JS files simply add the following hooks to your theme's template.php file:

function THEME_NAME_css_alter(&$css)
{
    unset($css[drupal_get_path('module', 'system').'/system.theme.css']);
    unset($css[drupal_get_path('module','system').'/system.base.css']);
    unset($css[drupal_get_path('module', 'system').'/system.messages.css']);
    unset($css[drupal_get_path('module', 'comment').'/comment.css']);
    unset($css[drupal_get_path('module', 'field').'/theme/field.css']);
    unset($css[drupal_get_path('module', 'mollom').'/mollom.css']);
    unset($css[drupal_get_path('module', 'node').'/node.css']);
    unset($css[drupal_get_path('module', 'search').'/search.css']);
    unset($css[drupal_get_path('module', 'user').'/user.css']);
    unset($css[drupal_get_path('module', 'views').'/css/views.css']);
    unset($css[drupal_get_path('module', 'ctools').'/css/ctools.css']);
    unset($css[drupal_get_path('module', 'panels').'/css/panels.css']);
}

function THEME_NAME_js_alter(&$js)
{
    unset($js[drupal_get_path('module', 'panels').'/js/panels.js']);
    unset($js[drupal_get_path('module', 'views').'/js/views.js']);
    unset($js[drupal_get_path('module', 'views').'/js/ajax_view.js']);
    unset($js[drupal_get_path('module', 'views').'/js/base.js']);
}

Using the above technique of static file removal you will have a leaner and meaner Drupal website which serves only the static files you need, reduces bandwidth usage and makes your site load faster!