W3hobbyist

Any web developer who has tried to write cross-browser compatible JavaScript knows that Opera may not be all that willing to co-operate with your javascript code. The problem could be with your javascript code itself(so don’t blame it on opera), but if your javascripts work fine in Firefox and Internet Explorer, you may need some workaround for opera.

I recently faced a situation where my javascript worked fine in Firefox but not in Opera. Google too did not help much(seems like I was one of the very few who faced that issue!). So I decided to dig those piles of TinyMCE documentation to look for browser configuration. I found something that worked. In the tinyMCE.init() function, I added the following line of code and it worked.

<script type="text/javascript">
tinyMCE.init({
...
...
browsers : "msie,gecko,opera",
});
</script>

Got this tip from TinyMCE documentation’s browser configuration page. Though the purpose of this configuration option is something else, it did help me. Don’t ask me why it worked. I don’t know that! See if this helps you too. Also note that, TinyMCE isn’t really made for Opera, but primarily for Internet Explorer and Firefox.

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

I made an observation. AJAX form submissions are much less prone to spamming. To give you an idea of what made me think so, I want you to understand the below facts:

1. I had a own-made simple blogging script(call it minimal) on this domain prior to Wordpress which I use now.
2. The comment submission system on that minimal system had no CAPTCHA and was through a simple HTML form.
3. I used to receive about 25-30 spam comments daily.
4. One fine day, I changed the comment submission to AJAX-powered
5. The new AJAX-powered comment system lived 33 days long before I removed my minimalistic blogging script and replaced it with Wordpress. During the 33 days long period, I received absolutely no spam comment. The CAPTCHA too were not implemented.

Some background about how spam bots function:

Spam bots do not actually fill in data by typing in into the fields. They simply harvest the value of the action attribute and names of input fields and post the data directly to the server script that is supposed to handle the inputs. Eg:

1
2
3
4
5
6

<form name="form1" action="submit.php" method="post">
   <input type="text" name="name">
   <input type="text" name="age">
   <input type="text" name="email">
   <input type="submit" value="Submit form">
</form>

In case of the above form the spam bot will directly post the values of name, age and email fields to submit.php file.

Future possibilities in form submission spamming:

1
2
3
4
5
6
7
8

<script type="text/javascript">
//
//
var params="name="+name+"&age="+age+"&email="+email+"";
xmlHttp.open("POST","submit.php",true);
//
//
</script>

As can be seen above, a future spam bot may be able to spot a AJAX-powered form submission and can forge the value of the variable params and send it to the target script-which is the second argument of xmlHttp.open()

CSS is a one of the most useful inventions made for the web. However, to style every element, you need to ‘hook’ the style statement to the elements by using selectors. Class and ID of an element(s) are most commonly used for hooking. But there are some lesser known hooks which can function without ‘class’ or ‘id’ hooks. These hooks style elements using other attributes and their values. Eg: A specific hyperlink can be styled using its ‘href’ attribute and its value.

A complete list of CSS selectors is available at w3.org. Another excellent source is Brian Wilson’s page on CSS attribute selectors

Eg: If you need to style internal links differently than external links, then here is how you should do it:

1
2
3
4
5
6

a[href*="yourdomain.com"]
{
font-family: Verdana;
font-size: 12px;
color: #0078B3;
}

Observe precautions because not all selectors belong to the same same CSS version. Some are CSS 2 properties whereas some are available only CSS 3 onwards. A compiled list of CSS versions and their browser compatibility can be found at QuircksMode.org and WebDevOut.