In the last tutorial (Turn Your Thesis Feature Box into a jQuery Alert – Part 1) I walked you through the basic setup of putting static text into the Thesis feature box, and using jQuery to make it modal. Now we’ll discuss putting a custom loop inside the box to allow you to manage its content directly from within WordPress. As always, if you have any questions, leave them in the comments and I’ll try to answer them.
Step 1 – Where We Left Off
In part 1, we created a function called custom_alert() and hooked it into the “thesis_hook_feature_box”. That’ll be the basis of this tutorial.
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>
<? }
Step 2 – Building the Loop
Kristarella wrote a great post about understanding loops and using them in Thesis. Check it out. At the end of the tutorial, she comes up with
$custom_loop = new WP_Query('showposts=5&category_name=Featured&orderby=rand');
if ( $custom_loop->have_posts() ) :
echo '<ul>';
while ( $custom_loop->have_posts() ) : $custom_loop->the_post();
echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
endwhile;
wp_reset_query();
echo '</ul>';
endif;
which is a good starting point for what we’re going to do. Start by changing the query line from
$custom_loop = new WP_Query('showposts=5&category_name=Featured&orderby=rand');
to
$custom_loop = new WP_Query('showposts=1&category_name=alert');
This change will show only 1 post from a category named “alert”. The next part that needs to be changed is the output of the loop – everything between “while” and “endwhile.” So
echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
will be changed to
?> <h2><a href="<?php the_permalink(); ?>"><?php the_title();</a></h2> <p><?php the_content(); ?></p> <a href="#" id="close" title="Click to close">Close</a> <?php
Also be sure to delete the echo ‘<ul>’; and echo ‘</ul>’; so the post isn’t wrapped in a <ul>.
Step 3 – Putting it Together
Now that we’ve changed the loop to output what we want, we can put everything together and get
function custom_alert() {
$custom_loop = new WP_Query('showposts=1&category_name=alert');
if ( $custom_loop->have_posts() ) :
while ( $custom_loop->have_posts() ) : $custom_loop->the_post();
?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<a id="readmore" href="<?php the_permalink(); ?>">Read more...</a>
<a href="#" id="close" title="Click to close">Close</a>
<?php
endwhile;
wp_reset_query();
endif;
}
which gets hooked into
add_action('thesis_hook_feature_box', 'custom_alert');
and combined with the load_query() function and css from the last tutorial and you’re good to go. You now have a modal pop-up box that will pull posts from a category you specify in the loop.
Using the thesis_hook_feature_box as an alert has a ton of uses. If you have any implementations you’d like to see, tell me. And if you come up with any good ideas be sure to let me know. I would love to see how this gets used in the wild.
{ 1 trackback }