Build Your Own Business Website header image

How to Add Cufon Fonts to Thesis – Part 2 – Write the PHP Function

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

After we download the cufon font and upload it to the website, we write the PHP functions to Thesis. The first function adds the script that will load the cufon font. The next function calls the replacement script that will tell the web browser which selectors are to be replaced by the cufon. And the last function will call for IE to render the cufon. Look below for the code used in this lesson.

Code used in this lesson


function byob_add_cufon_fonts(){
 wp_register_script('flux-architect', get_template_directory_uri() . '/custom/fonts/flux-architect.cufonfonts.js');
 wp_register_script('cufon-fonts', 'http://cufon.shoqolate.com/js/cufon-yui.js');

 wp_enqueue_script('cufon-fonts');
 wp_enqueue_script('flux-architect');
}
add_action('wp_enqueue_scripts', 'byob_add_cufon_fonts');

function byob_cufon_font_replacement(){
 ?>
 <script type="text/javascript">
 Cufon.replace('.format_text h2, .format_text h3', { fontFamily: 'Flux Architect Bold', hover: true });
 Cufon.replace('.headline_area h1, .headline_area h2, .format_text p, .menu a', { fontFamily: 'Flux Architect', hover: true });
 </script>
 <?php
}
add_action('wp_head', 'byob_cufon_font_replacement');

function byob_cufon_end(){
 ?>
 <script type="text/javascript"> cufon.now(); </script>
 <?php
}
add_action('thesis_hook_after_html', 'byob_cufon_end');

Video Transcript

Now the fun part happens. Step 4, we have to create the function that loads the Script. In WordPress speak, this is called Enqueue the Script and we’re going to use two functions to do that.

Two Functions Use to Enqueue the Script

The first one is wp_register_script is the second one is wp_enqueue_ script. We’re going to start off in creating a function, function byob_add_cufon_fonts. There’s my function name and I started with the WordPress function wp_register_script. This takes a variety of properties but we’re going to use two of them in particular.

We’re going to use the handle property which is essentially the name that we’re going to use and that is going to be, flux-architect. There’s its handle and what we’ll do is place the address of the font and you could theoretically hard code the address of the font by saying, http://www.sbywh-final.byobtutorial.com/wp-content/themes/thesis_182/custom-fonts, that’s its location.

Then we need to put the name of the font file in and we’re going to get that font file from here. Essentially what we’re doing with this script is we’re specifying the actual location so it’s this thing right here, flux-architect.cufon.fonts.js. That’s one way to do it.

Get Template Directory URI

Unfortunately, it’s the wrong way. It actually would work but the right way to do this is to use a constant instead. If you really want this to withstand upgrades when this goes to Thesis 183 and you move your custom directory over, this would end up breaking. So instead of using this full URL what we’re going to do is to use a WordPress function called Get Template Directory URI and that concatenation symbol.

This is going to take us to Thesis 182 and this will be custom, fonts and flux-architect. Now you may be familiar with or may see other antiquated versions of getting this like Blog Info but this is actually the correct step to use, Get Template Directory URI and custom/fonts/flux-architect.cufonfonts.js. That’s registering the font and we are going to enqueue the script, wp_enqueue_script. In this case, it takes one property which is the handle.

Register and Enqueue the Script

There are things you can put in here as well but in terms of what we’re doing here today, all we need to do is register the script and then enqueue the script. The reason why you use this instead of what many people suggest which is adding it to the head, is because a WordPress knows to put the JavaScripts in the right spot. This is the WordPress way and the right way to do that.

From now on, everytime I do any instruction about this, I’m going to show you this way. This is going to make your site load the fastest, the cleanest and this prevents you from double loading the same script in a couple of different places. This is the best practice here.

So we’ve registered the script and we’ve enqueued the script. We actually have more than one script to do this way because we have to call this font JavaScript that we created but we also have to call the cufon JavaScript so we need to grab this URL, cufon.shoqolate.com/js/cufon-yui.js and we have to copy that file name and register this script as well.

We’re just going to come right down below that and say, wp_register_script and we’re going to say, cufon-fonts, that would be the handle and the address for that script is there. Again, register_script, handle is cufon-fonts, its location. In this case, you wouldn’t use this constant like this, you would just go ahead and use its actual location since it’s not on your site. Then we’ll go ahead and enqueue that script as well so we’ve registered both scripts and we’ve unqueued both scripts.

Hook the Function to the Appropriate WordPress Hook

Now what we need to do is hook this function to the appropriate WordPress hook which in this case, is wp_enqueue_script, we have one so it’s singular. This is an action hook which is scripts, a plural. Let’s come back over to that and we’re going to say, add_action and then wp_enqueue_scripts. There’s the action hook and the name of the function. So add_action to this hook, wp_enqueue_scripts and the action that we’re going to add is this function, byob_add_cufon-fonts.

Step Five – Call the Replacement Script

That’s the first part of the equation, that is enqueuing the script. We have another part of the equation which is where we Call the Replacement Script. This is the script that calls both these JavaScripts that we’ve just enqueued and it specifically tells the web browwer which selectors to replace. It has a specific syntax, it’s cufon.replace and the first set of parameters are the selectors that you want to replace.

The second set of parameters are essentially the fontFamily and a little fix for a hover text where we say hover=true. That’s the next function we’re going to create so, function byob_cufon_font_replacement.. We’re going to leave script and php.

Then we put in the script tag. We can get this script tag back from this and we just copy that. It’s a second piece of script and in this case, we’re actually grabbing the scripts tag as well. Copy that, come over here and paste it. Just go ahead and indent that. I think I grabbed the wrong one excuse me, I was totally mistaken it. What we’re really grabbing is this right here. It was the last piece of script, okay? The script starts in this script tag and ends in a script tag. We didn’t use the bold italic so we can delete that one and we didn’t use the italic so we can delete that one.

Specify Thesis Selectors to Replace

We have Cufon.replace and it suggests a class name but we’re going to delete those because we don’t have any selectors on our site that are named that. What we do have though are selectors that are called, headline_area h1 and headline_area h2. These are Thesis selectors and I’m going to copy those and put them. In this case, I’m going to have them not be bold in this one but I’m going to format_text h2 and h3, okay.

We’re using this cufon_font to replace, we’re using the bold one to replace the h2 and h3 tags inside of format_text and the regular one to replace the headline_area h1 and headline_area h2. Now we’ve called cufon_replace, we’ve specified which selector it’s going to replace, we’ve specified the fontFamily that’s going to be the replacement and we’ve used this little fix hover=true.

Step Six – Second Call for IE

Now we need to add this to the head, add_action, this is wp_head and the name of this function. We’ve enqueued our scripts, we’ve called our script and we have one last thing to do and that is to Force IE to render this stuff. We’re going to create one more function.

We are going to call this function cufon.now and we’re going to add that to thesis_hook_after_html. So function byob_cufon_end is our function name. This is a script so we’re going to leave php, go back into php. Then we’re going to have an Opening Script Tag and we’ll have a Closing Script Tag but inside the Opening Script we’re going to call that cufon.now and we can have our Closing Script Tag.

The Three Functions that Have Been Created

For Opening Script Tag cufon.now, we add this to the Thesis hook after HTML. So add_action(‘thesis_hook_after_html’), the name of our function which in this case is, byob_cufon_end and close it. Now what we have are the 3 functions that I created. The first function, enqueues the script, the second function sets up the font replacement and the third function Forces IE to render that font replacement and they’re enqueued to different places.

We can save this document, come back over to our custom_functions.php file and upload it. Presto chango it should be working so let’s go see what happens. So you see it worked now.

0 Comments… add one
0 comments… add one

Leave a Comment