W3hobbyist

Wordpress and WAMPserver are one of the best buddies when you want to write a personal localhost’ed blog. Recently, when I installed wordpress and chose to use ‘pretty permalinks’, all I got is Error 404-File not found. i checked the .htaccess file if the changes have been written to it. Yes, the changes were made to it and yet it won’t work.

The silly mistake I was making all the time was trying it with mod_rewrite disabled. Having used XAMPP in the past-which has mod_rewrite enabled by default, I had no idea that for WAMPserver, it would be turned off by default. So the simple fix is to enable mod_rewrite.  To enable it, follow the below steps:

Click on the WAMPserver tray icon>Apache>Apache modules> Scroll down the list of available modules and clcik on ‘rewrite_module‘. The Apache server would be restarted automatically and you can now use the pretty permalinks.

In the past few days, I was using iG:Syntax Hiliter to syntax highlight my code. But I came across Wp-CodeBox and decided to use it instead of iG:Syntax Hiliter. Migrating can be time-consuming because both usedifferent types of indicator tags:

iG:Syntax Hiliter uses square bracket tags such as [PHP] and [/PHP], [CSS] and [/CSS] and not the <pre lang=”LANGUAGE”> and </pre> tags. So this means that your code would not be displayed at all! Here is how you can successfully migrate.

3 ways I can think of:

Manually:

Suitable if you less no of posts. Download Maintenance mode plugin and install it. It will display a very meaning full message to the visitors saying that ‘This blog is undergoing scheduled maintenance. Please come back after some time.’. This assures that your visitors will not see broken posts without the code being displayed. Now manually edit every post and replace the tags.

Automated using ‘Search and Replace’ plugin:

Download the plugin here and install it. The plugin may not be in English language. However, you can read the descriptive field names on the right side of the checkboxes. If you absolutely need to see an English version here is a screenshot(Source: Six Revisions)

Advanced users only:

Only for those who have intermediate or higher skills in PHP-MySQL. Use MySQL search and replace functions.

This one is sought after by most web developers when they need to write code and have it displayed properly with syntax highlighting. You can do that without using any plugin, by wrapping your code into <code> and </code> tags(You will need to use HTML editor instead of visual editor) but still the code may be modified while being processed. Eg: While writing PHP code, the start tag is stripped out(this is a safety feature of Wordpress and not a bug!)

After searching, I was able to get these syntax highlighting plugins. Almost all of them use the same syntax highlighting engine known as Generic Syntax Highlighter - GeSHi. GeSHi is an highly acclaimed and award winning engine. Its used not only by Wordpress but even by some vBulletin forums. A demo of how the highlighted code looks is available here.

Here is the list of syntax highlighting plugins:

1. Wp-CodeBox This is the one I use on w3hobbyist.com and would recommend the same to you
   
2. Dean’s Code Highlighter
3. iG:Syntax Hiliter
4. Google Syntax Highligher for WordPress
5. SyntaxHighlighter Plus
6. WP-syntax
7. Wordpress:CodeHighlighterPlugin
8. Highlight Source Pro
9. and few more

Installing Wp-CodeBox:

Download Wp-CodeBox from here and extract the archive files. Upload the files/folder to your wp-content/plugins directory. After uploading the files/folders, your directory tree should look like this:

Once the files have been updated, fo to Your Wordpress Dashbord> Plugins panel. Decativate any other plugin(if any) which used GeSHi engine. Now activate Wp-CodeBox plugin. If you get an errror that looks like “Fatal error: Cannot redeclare class GeSHi in ##/wp-content/plugins/wp-codebox/geshi/geshi.php on line 158″, thats because you may have forgotten to deactivate any GeSHi based highlighter plugin as told earlier.

Using Wp-CodeBox:

Once activated successfully, this is how you can should you it to display your highlighted code:

Switch to HTML mode(non-visual editor). Write your code and wrap it in between preformatting tags: <pre> and </pre>. Declare some parameters as shown below: Example usage:

<pre lang="PHP" line="1">
<?php
//Your code should go in this space between the pre tags
function sayHelloWorld()
{
echo "Hello World!";
}
?>
</pre>

Parameters and attributes:

These should be declared in the opening pre tag. They can be declared as shown below:

<pre lang="PHP" file="some_filename.php" line="1" <

The 4 attributes and what they mean is explained below:

1. lang (required): This attribute declares the programming language. Eg: PHP, ASP, JAVASCRIPT, HTML, CSS, etc.
2. line (optional): This attribute declares whether to display or not the line numbers in the code. If you don’t want line numbers to be displayed, set its value to “0″. If you specify its value as “15″, then the first line number would start at 15(and not 1).
3. file (optional): If the user wants to download the code as a file, then you can specify a descriptive file name for the code. If this attribute is not specified, the user has a option a view the code in plain text format in a popup window that he can copy-paste in a file on his computer.
4. colla (optional): Value of this can be either “+” or “-”. It decides whether the codebox will be expanded or collaped. If set to “+”, the codebox is expanded. If set to “-”, the codebox is collapsed and to see the code, the user musct click the “[+]” button link. By default, the codebox is expanded

Demo:

1
2
3
4
5
6
7
8

<?php
function add_two_numbers($a,$b)
{
return $a+$b;
}
echo add_two_numbers("1","2");
//outputs 3
?>

Observe above that you can download the file by clicking on that “Download” link at the top of the codebox. This was possible because download=”add_two_numbers.php” attribute was specified. If it was not specified, it would have looked like below:

1
2
3
4
5
6
7
8

<?php
function add_two_numbers($a,$b)
{
return $a+$b;
}
echo add_two_numbers("1","2");
//outputs 3
?>

Modifications in presentation:

The default font-size in which the syntax highlighted code is displayed is very small(for me atleast). If you want to increase that font size, open the CSS file-wp-content/plugins/wp-codebox/css/codebox.css and add the below CSS code snippet to it

1
2
3
4
5

td.code>;pre
{
font-family: Courier New;
font-size: 13px;
}

If the color scheme of the top bar or the margins of do not go well with your theme, you can change that too in the codebox.css file.

Migrating from iG:Syntax Hiliter to Wp-CodeBox

If you used iG:Syntax Hiliter previously but now wish to use Wp-CodeBox then you will face some issues. iG: Syntax Hiliter uses tags like [PHP] and [/PHP], [CSS] and [/CSS], etc to function where as Wp-Codebox and most others use pre tags. So you can use this method to migrate from iG:Syntax Hiliter to any alternative which uses pre tags. More information on migration can be found here