Adding A New Theme

To add a new theme to SyntaxHighlighter Evolved, you must first register the stylesheet with WordPress:

wp_register_style(
	'syntaxhighlighter-theme-yourthemestub',
	content_url( 'path/to/your/theme.css' ),
	array( 'syntaxhighlighter-core' ),
	'1.2.3'
);

Note we’re using wp_register_style() and not wp_enqueue_style().

Parameters details:

  1. Change yourthemestub to something unique and simple. It doesn’t matter what as it’ll never be seen (you pick the title below), but remember it for below.
  2. The path to your SyntaxHighlighter theme stylesheet relative to your wp-content folder. See the content_url() documentation for more details. I would not store your stylesheet inside the plugin’s directory as it would be removed during a plugin upgrade. In your uploads folder or your WordPress theme folder is a decent place.
  3. This tells WordPress that the standard plugin styling sheet is needed. It adds the basic structural formatting in that you’ll probably want. Your stylesheet will add the colors and styling.
  4. A version number. It doesn’t matter what you set it to, but change this if you edit the stylesheet. It’s for browser cache busting.

Now that the stylesheet has been registered with WordPress, we need to tell the plugin about the stylesheet using the syntaxhighlighter_themes filter.

add_filter( 'syntaxhighlighter_themes', 'your_function_name_here' );

function your_function_name_here( $themes ) {
	$themes['yourthemestub'] = 'The Name Of Your Theme';

	return $themes;
}

You can drop that into a new plugin or your theme’s functions.php file.

21 thoughts on “Adding A New Theme”

  2. Pingback: AS3 Syntax Highlighting (with SyntaxHighlighter Evolved) | Course Vector

  3. I’m having no luck with this. I added the code above to my WordPress plug-in that i used to get my custom Brush loaded but the Theme just never shows up in the “Color Theme” drop down in the “Settings.SyntaxHighlighter Settings” page.

    I have the register code in the same method as the wp_register_script code used in the Brush example. I updated the code to say this:

    wp_register_style( ‘syntaxhighlighter-theme-Modified’, plugins_url( ‘shThemeModified.css’, __FILE__ ), array(‘syntaxhighlighter-core’), ‘1.0.0’ );

    Can you just go over this line?

    $themes[‘yourthemestub’] = ‘The Name Of Your Theme’;

    When you says “yourthemestub”, you you mean just provide the suffix you created for your theme or the full “syntaxhighlighter-theme-yourthemestub” title? Also, Is ‘The Name Of Your Theme’ just a description that should show up in the UI?

    Thanks

  5. Cool. Thanks. I ended up making the mistake in the add_filter(), I was appending my theme name to the first argument. After fixing this to the code below it started working. 😀

    // Tell SyntaxHighlighter Evolved about this new theme
add_filter( 'syntaxhighlighter_themes', 'syntaxhighlighter_Modified_addTheme' );

  6. Hmmm… I was wrong, something still isn’t working. The Theme shows up in the drop down but after choosing it and pressing save it doesn’t show up selected if I refresh the page.

  7. Ahhh… got it. So. I had some case-sensitivity evil, I ended up needing to make almost all the method name lower-case. Then I used this instead:

    $themes['modified'] = 'Modified';

    It seems to actually we working now. 🙂

  8. Viper007Bond ,

    I am having trouble with my CSS actually taking. I am trying to force a Font to be used for code and it doesn’t seem to be added. Other changed to the color do take but not the font. I was told that WordPress can sometimes try to be too smart an it dynamically creates the style sheets. I am not sure if that is the case here. I want to make “Courier New” the font, but in Firebug the .syntaxhighlighter class seems to be inheriting about 4 other fonts as well and “Courier New” is the 3rd font in the array of fonts.

    .syntaxhighlighter
{
	font-family: "Courier New";
	background-color: #fff !important;
	border: 1px solid #E0E0E0 !important;
	padding: 0 !important;
}

  9. Make sure you use !important on all of your CSS declarations so that your theme and more importantly the core SyntaxHighlighter CSS file (which controls everything but the colors) doesn’t override it.

  10. I’m trying to use this method to add a new stylesheet from my functions.php in my theme folder. It appears in the list at the settings page. After I save though, when I check the http calls, it gets shThemeDefault.css and not the CSS that I specified:

    wp_register_style('syntaxhighlighter-theme-mytheme', get_template_directory() .'/syntaxhighlighter/mytheme.css', array('syntaxhighlighter-core'), '0.11');

add_filter('syntaxhighlighter_themes', 'syntaxhighlighter_title');

function syntaxhighlighter_title($themes)
{
  $themes['syntaxhighlighter-theme-mytheme'] = 'My Theme';
  return $themes;
}

    Everything works, the file is there, just for some reason, it’s not even trying to get that css file, it just goes to the default one.

  14. Pingback: Wordpress Customization | The Devil In The Details

  15. Is this still functional with WordPress 4.1? I am getting blank screens using this. Sorry but for technical reasons I can’t access the error logs.

  18. Pingback: WordPress 「SyntaxHighlighter Evolved」プラグインのテーマの作成｜有限会社　オブジェクト・ラボ

  19. Perhaps I’m doing something wrong, but when I added the code to my plugin (I wrote a brush for Apex, Salesforce’s coding language), the block inspector doesn’t stay on the right side of the page anymore. It shifted to be below the editing block. My only need was to override the keyword css for use with my brush. Is there a way to accomplish this without having to write a new theme?

    My assumption is that when you say “theme”, it’s for the syntaxhighligher evolved plugin and not the website theme.

  20. Pingback: Wordpress 「SyntaxHighlighter Evolved」プラグインのテーマの作成 – オブジェクト・ラボ

Comments are closed.