HOW TO MAKE A JQUERY-POWERED ALERT BOX FOR THE THESIS WORDPRESS THEME

The details of this tutorial only apply to people using the Thesis theme. The technique, however, can apply to anyone. So if you’re new to jQuery with any tip of website, read on.

As you may know, the wonderful Thesis theme comes with some default paragraph styles. This includes styling for notes (as you can see above) and alerts (as you can see above that). These are great, but wouldn’t it be cool if you could close the alert after you’ve been alerted? Potentially.

This tutorial has a bigger purpose than that, though. It should be a great introduction to jQuery for those who have never used it before. So let’s begin.

1. Turn jQuery on

   On a normal site you would call jQuery from the head of your document. Thesis has support for this built in, so in your WordPress dashboard go to Thesis > Page Options > Javascript and select the jQuery library.

2. Place the following in custom_functions.php:

   view sourceprint?

   01.function custom_alert_box() {

   02.?>

   03. 

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

   05.$(document).ready(function() {

   06.$('#closealert').click(function(){

   07.$('p.alert').hide('2000');

   08.});

   09.});

   10. 

   11.// ]]></script>

   12. 

   13.add_action('wp_head', 'custom_alert_box');
   So what does this mean? It means that p.alert will be closed when you click something with the ID closealert and the animation will be finished in 2000ms. This allows for lots of customization, as #closealert could be an image or a span that says close me or a header, or whatever you think would be most useful.

3. Add alerts with your close mechanism

   Now when you use the built-in alert style with <p class=”alert”>, place your #closealert button in there somewhere and you’re all set.

Tip: If you don’t want to add a closing mechanism, then you can change the applicable lines in the code to this:

view sourceprint?

1.$('p.alert).click(function(){

2.$('p.alert').hide('2000');

Now when you click anywhere in the alert box it will close.