Using sIFR in Wordpress

Design is important on any project. Anything from the user interface down to the button icons are an important part of the overall design. But when you are on the web, there is one design element that slacks big time when it comes to choices: fonts. Typefaces on the web have been a major complaint of web designers since the web began, and there is no real trend that shows there will be support for more than just web-safe fonts anytime soon. To make things worse, there is not much you can do about the issue. Images seem to be the most widely used and accepted medium for custom type-facing, but today we will discuss another choice: sIFR.

Unlike images, and a little complex as well, sIFR offers the functionality of using custom fonts, without sacrificing the text itself. In short, you can still select, copy, and even "screen read" the text. It does this using a combination of Adobe flash and JavaScript, which is a pretty crazy approach. But, it works quite well.

One of the most popular outlet for designers today is a wordpress blog. Wordpress is easy to set up, maintain, and use. A perfect example of where you might want to use this new technology. Thus, today I am going to take your through the steps to integrate sIFR into wordpress. It is pretty simple, and once you have it setup, you will have a great way to give your site some extra customization.

A Good Example of a sIFR Replaced Heading

sIFR

*Before we get started, I should probably note that there is a wordpress plugin for sIFR. I used it for a while, but it does have limitations that can be overcome with a custom installation of sIFR. It is still great for most uses, and it is really easy to use. WP sIFR.

So the first real step is to get sIFR. In order to get it, go to lastest nightly builds and grab the newest version, which at this time is v3 r436 beta. For this tutorial at least, we are using the latest nightly build, which is a beta. Right now, the beta seems pretty stable, and I have not had any issues as of yet. Once you have it downloaded, you will have a root sIFR folder with a change log and 4 sub-folders. You are going to take all of these and upload them to your wordpress theme.

Your theme is located at wordpress-root/wp-content/themes/your-theme. You will need to create a sIFR folder in your theme folder, and then you can upload your sIFR content to this folder. This means that your change log and 4 sub folders will now be located at wordpress-root/wp-content/themes/your-theme/sIFR. This means that your sIFR installation will only be for this theme, but the installation is fairly easy, plus you can copy your sIFR settings just by copying files, so it is not that difficult to transfer it to a new theme.

functions.php

Moving on, the next thing we have to do is get our theme to include the correct files. In order to do this we need to add to the theme's functions.php. Every theme has one of these files, in its root folder, and it is uses it to do anything from adding the theme to wordpress to including the correct files to make the theme run correctly. We are going to add some functions that will include our JavaScript and CSS files in the theme. Obviously the first step is to open up the file.

Once opened up, scroll down to the very bottom. We are adding some php, so make sure you are inside php tags when you are adding these functions. The functions we are actually adding are fairly simple. All they do is add our CSS to the HTML header, and add our JS to the page footer. The JS is in the footer for better performance, and this is definitely not a tutorial on better performance, but it is still good practice to stuff any JS you can in the bottom of the page rather than the top.

Let’s get started by adding the JS function. What we have to accomplish is including the sIFR main file and the options file. However, before we include the options, we have to set the font variables. We set up the fonts in the function simply because it is much easier to do this in this file, rather than in the options file itself. So, to do this we need to add the following function:

As you can clearly see, what this function is going to do is echo our JS includes to the page. Since this is a function, we will later tell Wordpress where to print it. For now, we are going to be using a test font, which we will talk about later. That is what the code in between the two includes is doing, setting up this test font. Of course you can add more fonts, or change that font, but in this tutorial we are just going to call our font "test".

For the CSS include function, it is even simpler:

A plain ol' CSS header include. It doesn't get much simpler or self explanatory than that. Now, being the smart person you are, you might be asking "Ok, what do I do with these functions?" A good question, and one that can easily be answered. What we need to do now is tell wordpress what to do with these functions. That is where the add_action() wordpress function comes into play. Our CSS needs to go in the header, and our JS at the bottom of the page (i.e. the footer). The php code to do this will look like this:

These two lines of php are telling wordpress to run the function sifr_css in the header of the page, and to run sifr_js in the page footer. This will accomplish exactly what we wanted. For review, here is what the whole code block will look like:

sIFR Config

At this point, if you tried to look at your blog, nothing would be different. We have included all the necessary sIFR components into our theme, but we have not set up sIFR itself. Thankfully we are going over that right now.

First things first, we need a font file, which for sifr means we have to convert a font into a SWF file. There are some complex techniques that require you to have Flash and that sort of thing, but there is an easier way. The website sIFR Generator is quite possibly the fastest and easiest way to create a sIFR file from a font file. All you have to do is go there, click on wizard, and follow the steps. Just make sure that you create a sIFR 3 r436 file, with a full character set. And don't forget that for this tutorial you need to name it test.swf. Or you can just download the font file provided below. However you get the font, it needs to be saved to the flash folder.

Ok, so we have a font, we have set up a JS variable for that font, so now we have to activate it and use it. In sIFR, all this is done in the sifr-config.js file. You can find this file in the js folder of the sifr directory. Once you have it opened, you will see a lot of comments. These are there to explain what to do, but since this is a tutorial, I will go ahead and concisely explain all those instructions for you.

There are basically 3 parts to sIFR. The initialization, the activation and the use. The variables we set up in the sifr_js function in functions.php are the initialization part. We are basically pointing a JS variable to the font file. Since we do this already, we do not have to do this in the config file. The activation, however, we do have to do. Looking at sifr-config.js, you should see the following line:

This is activating the default font that comes with sIFR. We don't want to use this font, so let’s change "futura" to "test". This will activate our font instead of the default. All that is left to do now is use our font. This is the most complex part.

sIFR actually uses CSS to type all of the replacements, which makes things a lot easier. Basically, what you do is give it CSS selectors and CSS styles, and it replaces the selected elements then styles them accordingly. To do this we call sIFR.replace(), which has been done already to show you how to use it. I have modified the sample call a little, but it stays basically the same:

What we are doing here is telling sIFR to take the "test" font, and replace all h1 elements with it. The css variable holds the CSS to style the element replacement with, and I have taken an extra step and added a wmode. The "wmode" or "window mode" is just whether the background of the flash movie is transparent or not. For this case, and most I might add, it will be transparent.

The blog title is now a little.....Star Wars-y.

It looks a little goofy because we never styled the anchor, which you can in fact do. You can mess around with it. Instead of .sIFR-root you would use a {} just like real CSS. You can also use them both if you want. As long as the link in nested inside of the replaced element, you can style it all you want.

Conclusion

That’s it. We have just successfully installed sIFR on wordpress. It may seem complex, but in reality it takes all of 5 minutes. Now all you have to do is get all the styles working. I would suggest taking a look at the sIFR docs and checking out all things you can do, because you can do quite a bit.

Wordpress is quite a blog engine, and sIFR is a great way to customize text on the web. It only takes a little effort to make them work together. In five minutes you can have nice and cool looking text. I hope this tutorial has showed you how to accomplish just that.

Well, I am out for now. I hope you enjoyed this tutorial and remember, if you need programming help, all you have to do is Switch On The Code.