I wrote quite a while ago about How to implement Syntax Highlight in your WordPress blog. It used an forward, yet permanent approach: modify you’re theme’s header.php. But is it enough?

Lately, I wanted to update my blog’s theme to the newest version. But hey! I had a lot of modifications such the one above that kept me from doing a smooth update: BNR Slider, custom images for RSS and Twitter, hints, Syntax Highlight and so on.

The newest solution that I come up with is using a child theme, feature provided by WordPress engine. Basically, you have a theme applied to you blog that you like. Instead of modifying it, you create a new folder in theme’s directory with a special name who’ll be applied OVER your base theme, customizing only the aspects you need. Assuming that your theme’s name is MyFavoriteTheme, you’ll have to create the child theme as MyFavoriteTheme-child.

In order to use your new theme, you’ll have to create in the MyFavoriteTheme-child folder two files:

1. styles.css – required – who’ll mark your folder as a child theme
2. functions.php – optional – for our example is required, as we’ll write code inside of it

First, you Really need to setup the styles. The content is simple and explained in this straight-forward article.

The most interesting part is the functions.php, where we’ll define code to add our Syntax Highlight classes. You’ll have to put all needed JavaScript files in the /scripts folder, in the root of the WordPress install, and the css files respectively in /styles folder. This is just for easy of migration from one theme to the other, if you get bored or want to change your current one.

Then, in the aforementioned functions.php from your MyFavoriteTheme-child folder you have to insert the following text:

<?php
$path_to_scripts = "/scripts/";
$path_to_styles = "/styles/";

function register_syntaxhighlight() {
  wp_enqueue_script('shcore',  $path_to_scripts.'shcore.js');
	
  wp_enqueue_script('shbrushcsharp', $path_to_scripts.'shBrushCSharp.js');
  wp_enqueue_script('shbrushcpp', $path_to_scripts.'shBrushCpp.js');
  wp_enqueue_script('shbrushcss', $path_to_scripts.'shBrushCss.js');
  wp_enqueue_script('shbrushobjc', $path_to_scripts.'shBrushObjC.js');
  wp_enqueue_script('shbrushjscript', $path_to_scripts.'shBrushJScript.js');
  wp_enqueue_script('shbrushphp', $path_to_scripts.'shBrushPhp.js');
  wp_enqueue_script('shbrushplain', $path_to_scripts.'shBrushPlain.js');
  wp_enqueue_script('shbrushruby', $path_to_scripts.'shBrushRuby.js');
  wp_enqueue_script('shbrushsql', $path_to_scripts.'shBrushSql.js');
  wp_enqueue_script('shbrushxml', $path_to_scripts.'shBrushXml.js');
  wp_enqueue_script('shbrushas3', $path_to_scripts.'shBrushAs3.js');
  wp_enqueue_script('shbrushjava', $path_to_scripts.'shBrushJava.js');
  wp_enqueue_script('shbrushSql', $path_to_scripts.'shBrushSql.js');

  wp_enqueue_script('shstarter', $path_to_scripts.'shstarter.js', array('shcore'));
	
  wp_enqueue_style('shcore',  $path_to_styles.'shcore.css');
  wp_enqueue_style('shThemeDefault', $path_to_styles.'shThemeDefault.css');
}

add_action('init', 'register_syntaxhighlight');

?>

The code explanation:

1. First we set some global vars, to know where the directories are;
2. Then we create a new function in which we add one by one the scripts required for the site – you can add the ones that you use and when you’ll post some content that requires a new brush, the shCore will kindly alert you that one of the brushes is missing, specify also the name of it. This way you’ll load only the ones used and no more, keeping the webpage size low and quality high.
3. wp_enqueue_script assures that the script will be loaded once. So if it is already loaded by any other plugin or theme, you will not have it downloaded twice;
4. finally, we add an WordPress action, binding to the init hook and add there our code.

After uploading your code to your WordPress install (be careful to names – Linux is case sensitive), you’ll have to select as theme the child theme, so your modification will be applied. Until you’ll select the child theme, you will not see any changes!

That’s it, folks!