BIOS,Windows, Linux, Software,Security, Domains, Web Hosting

Customize Loading CSS/JS in WordPress

CSS/JS files loading on special pages will speed up your wordpress, improve wordpress performance, and will have a  better user experience. Usually, it seems everyone is using two or more plugins in wordpress, on the other hand, many plugins/themes may have more than one CSS/JS files which will be called in every page. So we should combine some of them which have similar use or can be combined.

Note: Not all the CSS styles or JS files can be loaded optionally. You should make sure from their functions or features.

1. How to customize loading in wordpress

For more CSS or Javascript files, they may be used in different type of page, then you can make these CSS/JS files loading optional. for example. I am using a code highlighter plugin, this plugin will load several JS files in everypage of wordpress under default settings. So I make it optional in only single page, just do this.

<?php if(is_single()){ ?>
<link href="addtion.css" type="text/css" rel="stylesheet" />
<script class="javascript" src="js/addtion.js"></script>
<?php } ?>

But where should I add these codes? it's easy, at first you should make sure where are the CSS/JS files come from, plugin? or themes? or added by you manually?

  • If it is a plugin, you may need to modify the plugin source code(ie, insert_header or insert_footer function).
  • If it is a theme, just download the theme's package, modify it's loading action and make it optional.
  • If the CSS styles or js files are all added manually. you can modify your adding source code, and make sure they will be loaded optionally.

2. Example: customize crayon-syntax-highlighter loading on single pages

Here, I want to customize crayon-syntax-highlighter loading only on single pages. First we can find some crayon css/js in the homepage and other pages, screenshot shown here:

Finally I locate to the function wp_head() in crayon_wp.class.php. This function will be hooked in the end of the class for common visitors.

    public static function wp_head() {
//Add for single pages begin
//Add for single pages end
        self::$wp_head = TRUE;


Then we will make the crayon highlighter take effect only in single pages.

3. Some page indentifier functions in wordpress

​You can do like this for any other CSS/JS files. these ways can be used for all known pages in wordpress, such as:

<?php if (is_home()) { ?>
<link href="optional_A.css" type="text/css" rel="stylesheet" />
<script src="optional_1.js" type="text/javascript"></script>
<?php } ?>
<?php if (is_single()) { ?>
<link href="optional_B.css" type="text/css" rel="stylesheet" />
<script src="optional_1.js" type="text/javascript"></script>
<?php } ?>
<?php if (is_category()) { ?>
<link href="optional_C.css" type="text/css" rel="stylesheet" />
<script src="optional_1.js" type="text/javascript"></script>
<?php } ?>
<?php if (is_search()) { ?>
<link href="optional_A.css" type="text/css" rel="stylesheet" />
<script src="optional_1.js" type="text/javascript"></script>
<?php } ?>
<?php if (is_paged()) { ?>
<link href="optional_D.css" type="text/css" rel="stylesheet" />
<script src="optional_1.js" type="text/javascript"></script>
<?php } ?>

If you have any problems, please feel free to leave a comment to me.


Leave a Reply

Subscribe to BootBeta Comments RSS feed to receive notification of latest comments posted.


  • Enter Email Address:

Recent Post

Copyright@ 2010-2014 Bootbeta All Rights Reserved.
HooBlog Ver 1.5 Build 20140530