Rather than trying to debug these issues myself and throwing myself into a blackhole of autosave hell, I’ve just started to (in effect) disable the autosave feature completely. My rationale being that the update button is more than sufficient when wanting to save something that we know we’ve updated.

Below is a quick step by step on how to disable autosave for WordPress version 3 and above. I could be wrong on this but I’m pretty sure that the definition for these settings were held in other files previous to version 3 of WordPress.

Here’s how to do it:

1. Open up ‘wp-includes/default-constants.php’ in your local WordPress file copy.
2. Looks for the following line of code:

if ( !defined( 'AUTOSAVE_INTERVAL' ) )
		define( 'AUTOSAVE_INTERVAL', 60 );

It should be around line 255.
3. Change the 60 following the AUTOSAVE_INTERVAL to a much larger number. The 60 represents 60 seconds. There are 3600 seconds in an hour. So if you changed this to 36000 for example it would only attempt the autosave every 10 hours.
4. Save the file and upload.

One key addition was the introduction of custom post types, used in conjunction with the custom post meta features the two become a very powerful tool for completely custom content authored via WordPress’s excellect UI.

In this very quick tip I’m going to assume that you’ve added a custom post type and have even gotten as far as adding a custom meta box to this post type. I’m then going to assume that you got stuck as I did with adding textareas and allowing for them to be formatted with the same flexibility as the main content area ie. with tinyMCE. So here is what a snippet of your theme’s function.php file will look like by now:

function meta_options(){
		global $post;
		$custom = get_post_custom($post->ID);
		$mytextarea = $custom["mytextarea"][0];

?>

	<label>My Textarea:</label> <textarea name="mytextarea" id="mytextarea"><?php echo $mytextarea; ?></textarea>

This may not be an exact copy of your code but yours will look very similar, probably just a little more complex. Now what I wanted todo but couldn’t figure out was how to take the textarea(s) set in the meta box above and add tinyMCE functionality to it. This is the code that I had to add to make it happen:

<script type="text/javascript">
				/* <![CDATA[ */

				jQuery(document).ready( function () {
					if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {

						tinyMCE.execCommand("mceAddControl", true, "mytextarea");

					}
				});

				/* ]]> */
		</script>

Quite a simple piece of jQuery (already in use across the WordPress admin) that executes on the document being ready that uses the tincyMCE execCommand to add the WYSIWYG editor to one or more textareas using the id of the textarea which you’ll notice is in the function options.

So althogether the code for the metabox in your theme’s function.php will look a little something like this:

function meta_options(){
		global $post;
		$custom = get_post_custom($post->ID);
		$mytextarea = $custom["mytextarea"][0];

?>

	<label>My Textarea:</label> <textarea name="mytextarea" id="mytextarea"><?php echo $mytextarea; ?></textarea>

<script type="text/javascript">
				/* <![CDATA[ */

				jQuery(document).ready( function () {
					if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {

						tinyMCE.execCommand("mceAddControl", true, "mytextarea");

					}
				});

				/* ]]> */
		</script>

You can also use the execCommand to add tinyMCE to multiple textareas like so:

function meta_options(){
		global $post;
		$custom = get_post_custom($post->ID);
		$mytextarea = $custom["mytextarea"][0];

?>

	<label>My Textarea:</label> <textarea name="mytextarea" id="mytextarea"><?php echo $mytextarea; ?></textarea>

<script type="text/javascript">
				/* <![CDATA[ */

				jQuery(document).ready( function () {
					if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {

						tinyMCE.execCommand("mceAddControl", true, "mytextarea");
tinyMCE.execCommand("mceAddControl", true, "mytextarea2");
tinyMCE.execCommand("mceAddControl", true, "mytextarea3");
tinyMCE.execCommand("mceAddControl", true, "mytextarea4");

					}
				});

				/* ]]> */
		</script>

One thing however that has always bothered me is IE7 and IE8′s rendering of embedded fonts, so today with IE tester at hand and google ready to get wild I vowed to come up with a solution and I think I may just have.

First off a quick recap

If you haven’t already read my previous postings on @font-face I’d like to direct you to the following two posts:

• Revisiting @font-face introduces font embedding options right now.
• Embedding fonts using @font-face is a guide to using fontsquirrel.com’s previously mention @font-face generator

Now let me illustrate the problem.

When embedding using @font-face IE6 (surprisingly) renders the type face perfectly as does Firefox and Safari but IE7 and IE8 serve up a sub-standard jagged font face that is really not pretty to look at.

Take a look at the first demo page for a simple example of a custom font-face that has been embedded. If you can, take a look at this page in both Firefox and either IE7 or 8 to see the difference.

What causes this?

After much research I discovered the problem was being caused by Microsoft’s ClearType functionality. ClearType is designed and very much works to make rendered text online and throughout the windows system clearer to read. That’s great for body text and like I say it does work but when it comes to custom fonts that have been embedded ClearType is attempting to do a job which isn’t needed. This is what gives us the sharp, jagged looking font face that we don’t want. Because we want nicely anti-aliased text like we see in Firefox, IE6 and Safari.

As a side note I’m assuming that IE6 never had the functionality to render ClearType functionality and uses some other sort of properietary technology, leading to nicely embedded fonts in IE6 in a perverse sort of way.

Update: For IE6, Windows XP does not force ClearType on in the browser and Windows Vista was shipped with IE7 pre-installed (falling into the bracket of our fix) therefore the risk of IE6 users being exposed to ClearType issues is minimal.

How to fix this

The good news is that there is a way to disable ClearType via the browser when visitors are viewing your web site. Now I’m not recommending this for any other use than what I’m demonstrating today, in general ClearType gets it right and helps visitors read your site the way it was meant to be read. Disabling ClearType in most circumstances leads to horribly rendered body text and a whole help of problems for your visitors eyes.

The process of disabling ClearType

Internet Explorer as a rule do not apply ClearType to elements using their proprietary CSS filters as they can conflict and result in wider issues for the browser so we can exploit this to make Internet Explorer leave our embedded fonts alone. Now unfortunately there a few subtle differences between the browser that mean we can’t simply apply a useless filter and move on.

Take a look at the second demo page where I’ve added a few additional fixes for IE7 and 8. Go ahead and take a look in both Firefox and IE7/8, you should now find a much nicer rendering of the font in IE. I’ll break down what’s been added below.

The crux of the fix:

h2, p {font: 36px/44px 'OldSansBlackRegular', Arial, sans-serif;letter-spacing: 0;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.png,sizingMethod=crop);zoom:1;}

The above snippet of CSS fixes our smoothing issues in both IE7 and IE8 as seen in the previously linked demo page. The key to this is filter CSS property and the zoom property which are only applicable to Internet Explorer.

Looking at the filter property

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/headers/hIEfix.png,sizingMethod=crop);

This part is mostly for IE8, both IE7 and 8 need to have a filter present to disable ClearType but IE8 has to have this filter actual doing something to recognise it. I also noticed when testing that without a background image being present in IE8 the ClearType disable had little effect. So what this filter property does in effect is kill two birds with one stone. We add a filter which checks the required boxes for IE7 and 8 as well as adding a one by one transparent png image to satisfy IE8.

Looking at the zoom property

zoom:1;

This is solely for IE7. It fixes an issue with hasLayout. If you don’t know anything about hasLayout then not to worry. Essentially IE filters can’t be assigned to any element that doesn’t have ‘layout’ so the zoom:1 property gives our headers ‘layout’. hasLayout is only applicable to IE version 7 and lower as it was dropped from IE8 (thankfully). To learn more about hasLayout see here.

Done and dusted

So in future when embedding fonts using @font-face you can use two simple IE only CSS properties and a 1 by 1 transparent png to give your fonts that anti-alias effect in IE7/8. You can even place these two properties in a separate IE only stylesheet as we are doing nothing else apart from tweaking the styles.

Just to note that as with any workaround you’ll need to test this on a site by site basis to ensure the fix is giving you the results you want. Even with this tweak font rendering in IE can still be unpredictable so testing and constant tweaking is a must!

File Summary

• First Demo Page – Showing an untouched @font-face embedding example.
• Second Demo Page – Showing a @font-face embedding example including the CSS fix.
• ZIP package – Containing both example pages and source files.
• jQuery plugin – Quick and easy jQuery plugin to achieve this fix.

Your viewing this article on allcreatives.net – the web design focused blog.

Update : Follow up post on ClearType issues in Firefox and Safari.

Whilst working on another web site recently I noticed that after installing the plugin and testing the form the success or warning message was appearing below the form on submit. This wasn’t ideal on longer forms as the messages would go completely unnoticed. So the idea was to get the message to appear above the form it was validating.

After a bit of research I couldn’t find a quick and easy way to configure this so I decided to go into the plugin and found it quite easy to change myself.

Changing this yourself …

After installing the plugin follow this path to get to open the file that will need editing.

Admin Home > Plugins > Editor > Contact Form 7 > Open – contact-form-7/includes/classes.php

Now look for this block of PHP code.

function form_html() {
		$form = '<div class="wpcf7" id="' . $this->unit_tag . '">';

		$url = wpcf7_get_request_uri();

		if ( $frag = strstr( $uri, '#' ) )
			$uri = substr( $uri, 0, -strlen( $frag ) );

		$url .= '#' . $this->unit_tag;

		$url = apply_filters( 'wpcf7_form_action_url', $url );
		$url = sanitize_url( $url );

		$enctype = apply_filters( 'wpcf7_form_enctype', '' );

		$form .= '<form action="' . $url
			. '" method="post" class="wpcf7-form"' . $enctype . '>' . "\n";
		$form .= '<div style="display: none;">' . "\n";
		$form .= '<input type="hidden" name="_wpcf7" value="'
			. esc_attr( $this->id ) . '" />' . "\n";
		$form .= '<input type="hidden" name="_wpcf7_version" value="'
			. esc_attr( WPCF7_VERSION ) . '" />' . "\n";
		$form .= '<input type="hidden" name="_wpcf7_unit_tag" value="'
			. esc_attr( $this->unit_tag ) . '" />' . "\n";
		$form .= '</div>' . "\n";
		$form .= $this->form_elements();
if ( ! $this->responses_count )
			$form .= $this->form_response_output();

		$form .= '</form>';

		$form .= '</div>';

		return $form;
	}

The lines that outputs the validation are …

if ( ! $this->responses_count )
			$form .= $this->form_response_output();

So if you cut this line and paste it anywhere else in the code block you can change the position of the validation block.

Here is my example of this which outputs the validation block before the form begins …

function form_html() {
		$form = '<div class="wpcf7" id="' . $this->unit_tag . '">';

		$url = wpcf7_get_request_uri();

		if ( $frag = strstr( $uri, '#' ) )
			$uri = substr( $uri, 0, -strlen( $frag ) );

		$url .= '#' . $this->unit_tag;

		$url = apply_filters( 'wpcf7_form_action_url', $url );
		$url = sanitize_url( $url );

		$enctype = apply_filters( 'wpcf7_form_enctype', '' );
if ( ! $this->responses_count )
			$form .= $this->form_response_output();

		$form .= '<form action="' . $url
			. '" method="post" class="wpcf7-form"' . $enctype . '>' . "\n";
		$form .= '<div style="display: none;">' . "\n";
		$form .= '<input type="hidden" name="_wpcf7" value="'
			. esc_attr( $this->id ) . '" />' . "\n";
		$form .= '<input type="hidden" name="_wpcf7_version" value="'
			. esc_attr( WPCF7_VERSION ) . '" />' . "\n";
		$form .= '<input type="hidden" name="_wpcf7_unit_tag" value="'
			. esc_attr( $this->unit_tag ) . '" />' . "\n";
		$form .= '</div>' . "\n";
		$form .= $this->form_elements();

		$form .= '</form>';

		$form .= '</div>';

		return $form;
	}

And that’s it! Any question, feel free to ask away in the comments.

So with that said what I am going to demonstrate here is a Javascript based work around for IE6 selector issues using jQuery’s powerful selector options.

First of all I should mention that a ‘do all’ script does already exist, authored by Dean Edwards the IE7 script includes a range of Javascript functions aiming to improve the experience of IE6 visitors viewing your site. The reason I tend to write a custom piece of Javascript rather than use Dean Edward’s script is simply down to control, I like to be in complete control rather than at the mercy of a third party script and the potential bugs that come along with third party scripts. I also find that the IE7 script contains I little bit more than I need and therefore adds excess weight to my pages.

The Setup

What you’ll need to implement this technique are three files, two you may have already if your site is already established. Firstly a copy of the jQuery framework, a IE6 specific stylesheet and an IE6 specific Javascript file. Of course the IE6 stylesheet and Javascript file will only be executed if the visitor’s browser is IE6. We achieve this using Microsoft lifesaving conditional browser comments.

An example of how this would look in your page head

<script type="text/javascript" src="/path/to/js/jquery.js"></script>
<!--[if IE 6]>
<script type="text/javascript" src="/path/to/js/ie6.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/js/ie6.css" />
<![endif]-->

Now what you’ll need is the selectors page of the jQuery documentation open and ready. It is almost identical to select an element in jQuery as it is in CSS but always check the documentation when in doubt.

Also take a look at some of the more advanced and 2.1 specification CSS selectors that are compatible with IE7. You’ll now able to use these and simply work around them in your ie6 Javascript/CSS technique.

In Practice

An nice piece of CSS that needs fixing in IE6

p:first-child { font-weight:bold; }
p > img { border:1px solid #CCC;float:right; }

So the above CSS will work in IE7, Firefox and any other browser you may care to mention. It uses the first-child selector as well as the parent > child selector. The problem is it doesn’t work at all in IE6, this is where the technique comes into play.

To work around this in IE6 you can use jQuery to select the CSS elements for IE6 that the stylesheet can’t.

As I mentioned early on the method of selecting an element in jQuery is almost identical to that of CSS so lets have a look at selecting the elements from the CSS snippet above. Once the elements have been selected they will need to be styled but doing this via Javascript is fairly messy so this script simply adds a new class that can be styled via the IE6 stylesheet on one line.

The IE6 Javascript file

$(document).ready( function(){

$("p:first-child").addClass("paragraphfirst");
$("p > img").addClass("imginp");

});

The Javascript above calls the jQuery document ready function to start. After this the jQuery selectors get the elements from the CSS code snippet further above and adds a new class to each instance.

So now in IE6 the first instance of a paragraph is accessible as well as any images contained directly in a paragraph using the class names assigned.

The beauty of this is that this file is only loaded in IE6 so does not affect the performance of your site for anyone wise enough to be using a browser other than IE6. As mentioned it also allows easy styling of these elements using one line of CSS code.

Once the classes have been added they are styled via the IE6 only stylesheet.

The IE6 stylesheet corresponding to the Javascript above

.paragraphfirst { font-weight:bold; }
.imginp { border:1px solid #CCC;float:right; }

Usage

Hopefully given this very simple demonstration of a very powerful technique you can see the benefits of using this technique over struggling with just an IE6 stylesheet on its own. As well as saving you time in IE6 hell it also sets you free to write cleaner, more forward thinking CSS in your regular stylesheets.

You can even get a little more advanced and use jQuery wraps and appends to fix more tricky bugs and add more dividers where necessary.

The key as mentioned earlier is to keep the selector page of the jQuery documents a click away and also do some research into CSS 2.1 selectors and beyond if you are not already familiar with them.

The process, thanks to fontsquirrel’s @font-face generator is now quite straight forward. If you are unsure of what @font-face actually is and what all the fuss is about then hop over the fonts category and take a look at my last two recent posts on the subject. Using the aforementioned generator we should be able to achieve @font-face perfection is two simple steps.

Step 1 : Get your @font-face kit

Font Squirrel have a great resource for prepackaged @font-face kits which are available here otherwise you can take a font you have already on your system and run it through the @font-face generator.  Just to note that you will have to check the license agreement for any font you use with this generator to make sure you are legally allowed to embed it.

Now following the steps on the generator page you should now be presented with download package. Take this, download, unzip and then re-upload the font files contained to your web hosting under a sub-directory such as fonts. Do this in the same way you would with a stylesheet. The files you have uploaded should be as follows for each font family you have ran through the generator:

• yourfont.eot – for Internet Explorer
• yourfont.woff – for Firefox 3.6+
• yourfont.svg – for Chrome and Opera
• yourfont.originalformat – whether it be .ttf of .otf for Safari and Firefox 3.5

Step 2 : Add the relevant CSS code to your stylesheet

Now we have our relevant font files uploaded all that’s left is todo is add the CSS code to our stylesheet the font(s) to be embedded and used. Within the package from Font Squirrel you should have an example CSS file that looks something like this :

/* * This CSS file has been generated by fontsquirrel.com and is based on the work of Paul Irish. * */ /* * * The fonts included are copyrighted by the vendor listed below. * * @vendor: West Wind Fonts * @licenseurl: http://www.fontsquirrel.com/license/Dearest * * */ @font-face { font-family: 'Dearest Regular'; src: url('Dearest.eot'); src: local('Dearest Regular'), local('Dearest'), url('Dearest.woff') format('woff'), url('Dearest.ttf') format('truetype'), url('Dearest.svg#Dearest') format('svg'); } @font-face { font-family: 'Dearest Open Regular'; src: url('Dearest_open.eot'); src: local('Dearest Open Regular'), local('DearestOpen'), url('Dearest_open.woff') format('woff'), url('Dearest_open.ttf') format('truetype'), url('Dearest_open.svg#DearestOpen') format('svg'); } @font-face { font-family: 'Dearest Outline Regular'; src: url('Dearest_outline.eot'); src: local('Dearest Outline Regular'), local('DearestOutline'), url('Dearest_outline.woff') format('woff'), url('Dearest_outline.ttf') format('truetype'), url('Dearest_outline.svg#DearestOutline') format('svg'); }

Copy this in its entirety and paste it into your stylesheet. Now look for the parts of the above code that precede an extension such as dearest.svg and change this to the correct path for your font files (uploaded earlier), keeping the font name and extension in place. Obviously the dearest font name in the above code with be replaced by your font file name.

After you have successfully changed the paths to point to the correct location of your font files you can use use the font name in the css ‘font-family’ property as you would with Arial or Verdana. Remember that if your font name has spaces in it you’ll need to enclose the name on the font-family line in single quotes.

Now if you go ahead and check your page in Firefox, Safari or heck even Internet Explorer you should now find beautifully replaced fonts.

Just a final note however to say that whilst @font-face rendering on Mac computers is near perfect it may be a little sketchy on Windows machines, a lot of this has to do with the quality of the font be used. Some fonts just seem to cope better with embedding than others at the moment and whilst Macs seem to mask this better you may find that it is indeed the font itself at fault as opposed to the operating system.

IE the devil child of Microsoft

XSLT is a great language used with XML files and is a language that we hope to cover a bit more of here on istmay. If you are new to XSLT and are dealing with stylesheets the following snippet of code could be invaluable.

<xsl:comment><![CDATA[[if IE]>
Browser rules go here as normal
<![endif]]]></xsl:comment>

You see XSLT is a very robust language and in turn can handle most of what you throw at it however it can be slightly temperamental when dealing with the browser comments. This is due to the comment code used to start the standard browser comments. Using the code above this is avoided.

In the example we’ve used if IE as the conditional comment but you can change this to check for any version of IE and you can also use the code multiple times to filter different versions of IE as you normally would.