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:

   function custom_alert_box() {
   ?>
   
   <script type="text/javascript">// <![CDATA[
   $(document).ready(function() {
      $('#closealert').click(function(){
        $('p.alert').hide('2000');
      });
    });
   
   // ]]></script>
   
   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:

$('p.alert).click(function(){
$('p.alert').hide('2000');

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

Enjoy

This post was brought to you by the Thesis WordPress theme; the search-engine optimized powerhouse of a framework designed to help you get a website up and running faster and more successfully. Want more information? Get it here. Want a professional website built on the Thesis framework and customized just for you? Contact me.