Part two is up now: Learn how to integrate a custom loop to pull posts into your alert box.
One of the coolest features of the Thesis theme is the ability to hook into the feature box and show visitors time sensitive, or otherwise important information above your normal content. Expanding on this, I wanted a quick and easy way to add a little pizzaz to this, so the tutorial below shows you how to make an alert box complete with a jQuery close-out button.
Also note, this is the first part of a multi-part tutorial. I’ll start with the basics of making the box, and move on to showing how to pull posts from an “alert” category (so you don’t have to dig into the custom_functions.php file every time you want to change your alert message). From there, I’ll explain how to show different alerts based on category, page and referring website (ie. – showing special messages to those who visit from twitter).
If you have questions, or would like to see something specific, please leave a comment and I’ll try to get back to you as quickly as possible, and be sure to signup for a free ThesisReady account while you’re here, to be kept up to date about new skins and tutorials.
1. Enable the feature box
Start by enabling the feature box in the Thesis Design Options panel. I selected “Full-width above header area” and “on front page only” for the “show feature box” setting. In the next part of this tutorial, we’ll want to the hook to be available on every page, but for now, the front page is enough.
2. Create your alert function in custom_functions.php
To start, we create the function that will eventually be inserted into the feature box hook. (If you need a refresher on what hooks are, check out Hooks for Dummies by Rae Hoffman.)
In this instance, the function will be called “custom_alert” and will contain an “h2″ title, along with a paragraph of text and a link with an id of “close”. This link will be how users will shut the popup box, so it is a must if you don’t want to annoy visitors too badly. Be sure to make sure the link id is correct, otherwise you’ll have errors later on.
function custom_alert() { ?>
<h2>Your alert title goes here</h2>
<p>Some text that describes your alert.</p>
<a href="#" id="close" title="Click to close">Close</a>
<? }
This bundle of code goes into your custom_functions.php file. Once that’s done, save your file, and continue reading.
3. Add the jQuery to custom_functions.php!
Time for another function! This one will be called “load_jquery” and handle the javascript for the feature box to work. Inside of the function you see two calls for javascripts. The first function loads jQuery from the Google ajax library. For the most advanced users among you, double check to make sure you aren’t already loading the jQuery library, and if so, you can omit this script. Otherwise, carry on!
The second javascript is the bulk of the project here. This plugin (not the bad kind of plugin us Thesis users avoid like the plague) waits for the link with an id of “close” to be clicked, then sets the css display property of the div with an id of “feature_box” to none, thereby hiding it. Pretty simple, right?
function load_jquery() {
?>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$('a#close').click(function(){
$('#feature_box').hide();
})
});
</script>
<?php
}
This too goes into your custom_functions.php file. Add it, save it, and get back here!
4. Hook your new functions into place.
As with any good function, Thesis needs to know what to do with them once you’ve written them. Since we have two functions, we need to hook each into its proper place. The first function gets hooked into the “thesis_hook_feature_box” hook. It makes most sense to go here (aside from being the purpose of this tutorial) so you can quickly and easily toggle the display of the box with limited extra effort. Work smarter, not harder!
The second function is hooked into one of the default WordPress hooks, called “wp_head”. This is a useful hook to know if you want to do something like create an IE only stylesheet.
add_action('thesis_hook_feature_box', 'custom_alert');
add_action('wp_head', 'load_jquery');
5. Style your alert box.
Now comes the fun part! Styling the feature box to match you website.
First of all, I decided I wanted the alert box to float over top of the content, to make sure people read it. If you don’t want this, don’t use absolute positioning for .custom #feature_box. The exact css I used is below, but I’m not going to explain it, other than to say, you control the box it’s self with .custom #feature_box, and the link with .custom #feature_box #close. I’ve included the small “x” image at the bottom of the post, if you want to download it to use.
.custom #feature_box {
border: 4px solid red;
background: #ff9999;
padding: 1em;
width: 800px;
margin: 1em auto;
text-align: center;
position: absolute;
top: 25%;
left: 50%;
margin-left: -400px;
z-index: 100;
}
.custom #feature_box #close {
display: block;
background: url('images/x.png') no-repeat 10px;
height: 29px; width: 25px;
text-indent: -9999px;
position: absolute;
top: -22px;
right: -20px;
padding: 1em 0 1em 2em;
}
.custom #feature_box h2 {
font-weight: 900;
font-size: 2em;
margin: 0 0 .5em 0;
border-bottom: 1px solid red;
}
.custom #feature_box p {
line-height: 1.6em;
font-size: 1.5em;
}
6. Test your work.
Time to load your page and see how things look. At this point, everything should show up and work without error, though it may be in need of some design tweaks. Check out the screen shot below to get an idea of how it should turn out.
That’s it for part one. Check back later in the week for part two, which will discuss the best way to pull posts from an “alert” category into the box to allow for easier updating.
Thanks!
{ 2 trackbacks }