Monthly Archives: March 2010

jQuery fix for tables lacking a thead

5 Replies

Every web developer that’s ever had to use jQuery knows just how much time it can save, and just how quickly it can fix a lot of problems. I recently had a case where I wanted to implement the jQuery Tablesorter plugin into a site that had a badly constructed table that I couldn’t change its construction. Tablesorter requires a table to be setup similar to:

<table id="tablesorter">
<thead>
<tr>
<th>name</th>
<th>something</th>
<th>something else</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aaron</td>
<td>red</td>
<td>blue</td>
</tr>
...
</tbody>
</table>

The table I was working with lacked a thead and instead used the first tr as the head. It also added some styling classes for zebra striping that I wanted to get rid of so that tablesorter could add its zebra striping. Using jQuery, I was able to fix this up in just a few short lines:

$(document).ready(function()
    {
 $('table.example').prepend(
        $('<thead></thead>').append($('.example tr:first').remove())
        );
 $('table.example > tbody > tr').removeClass('odd');
 $('table.example > tbody > tr').removeClass('xx');
	}
);

Line 1 starts jQuery. Line 2 selects our table and tells it to we are going to add something to the beginning of it. Line 3 takes the first tr, adds it to a new thead and removes it from the body. Lines 5 and 6 then remove the classes we aren’t going to use.

If you want to see this fix in action, take a look at a live demo. I hope this fix helps you out if you ever need to a jquery fix for a table with no thead. Let me know if you use it.

Tweets from the week before 2010-03-29

Leave a reply

Constructing my new theme with Thematic

1 Reply

EDIT: I’ve switched to a Twenty Ten Child Theme

When I heard Ian Stewart’s announcement that he become an Automattician I figured it was a good idea to take a look at Thematic and see what it could do. I’ve mostly built my themes from scratch, but Thematic looked like it could streamline my work and hasten the development of sites. I figured if I’m going to try it out, I might as well give my site some love an a new theme. Thus Aaron.Jorb.In 3.0 was born.

I couldn’t believe how easy it was. Essentially Thematic makes theme development as easy as plugin development. Find the appropriate hook/filter and make the changes needed. For example, I wanted a slightly different loop for My Clients Category Page that also doubles as my Portfolio. By adding an action to wp_head, I am able to check if it is the My-Clients Category, and if so I can remove the default loop, add my own, and also add a notice to appear above the loop.

It’s also super easy to remove the sidebar. All I had to do was add an action to thematic_sidebar that returned false. Essentially Thematic has removed my need to make custom page templates when I want to keep 90% of the page the same.

Overall, redoing my site took about a third of the time that it took me to construct the last version. I would encourage anyone familiar with the plugin architecture of WordPress to take a look at Thematic. And the best part about it? It’s 100% gpl compatible and doesn’t cost a penny.

If you have any question how I added or did anything on here, please comment below.

Tweets from the week before 2010-03-22

Leave a reply

WordPress 3.0 sneak peak presentation from the Portland WordPress User Group

Leave a reply

Last night I presented at Portland WordPress user group on some of the features and changes coming in WordPress 3.0. In case you weren’t in attendance, my slides are below, and what I went over can be summed up in a couple of points:

  • The changes taking place are going to make things easier for you, but nothing is groundbreaking
  • It’s still Alpha at this point. Things can and will change before it’s released.
  • Multisite in a true sense is not going to work on a lot of shared hosting plans. You can still use Sub Directories though

After my presentation I gave a quick case study of what would happen if the A-team decided to use WordPress Multisite. I figured BA would be put in charge and would create the initial site theateam.tld. The next step for him would be to create a site for himself, ba.theateam.tld . And of course when the time came, he would create a site for a film they were using as cover, Boots and Bikinis. He would use the domain mapping plugin and thus would have just created three sites in a matter of minutes.

Continuing with my case study, I built a quick plugin to demonstrate just how easy it is to add a new post type. Figuring that the team would want to show off their missions, that’s what it does.

/*
Plugin Name: A-Team Missions
Description: I love it when a plan comes together
Author: Aaron Jorbin
Version: 1.0
Author URI: http://aaron.jorb.in/
*/


function post_type_missions() {
	register_post_type( 'missions',
                array( 'label' => __('missions'), 'public' => true, 'show_ui' => true ) );
	register_taxonomy_for_object_type('post_tag', 'movies');
}
add_action('init', 'post_type_missions');

function loop_missions(){
	$missions = get_posts('post_type=missions');
	ob_start();
	echo "<ul>";
	foreach ($missions as $mission){
		echo "<li>".$mission->post_title."</li>";
	}
	echo "</ul>";
}

add_shortcode('missions', 'loop_missions');

It’s just that easy. Two functions. The first adds our post type, and the second adds a shortcode to display the title of each mission so it’s embeddable anywhere.

If you want to know more about my presentation, Kathleen Mcdade was live tweeting it.

I’m going to have some more posts in the coming weeks about WordPress 3.0. If you have any questions, please ask below.

View more presentations from aaronjorbin.

Tweets from the week before 2010-03-15

Leave a reply

More Twitter Shortcodes for WordPress

2 Replies

Building on my WordPress Shortcode How To, here are two more Twitter shortcodes. I’ve also added a new project on google code to track all of my shortcodes.

The first new shortcode is for twitter search. It’s logically enough

Like my last twitter shortcode, it caches the results for two minutes. It also includes some other options. You can specify the number of tweets using the number attribute. There is a default of 20. You can also specify a max and min tweet id using max_id and since_id . Finally, you can specify the language with the lang attribute. This defaults to English.

function jorbin_firestream_search($atts){
        extract(shortcode_atts(array(
        'phrase' => false,
        'lang' =&gt; 'en',
        'max_id' =&gt; false,
        'since_id' =&gt; false,
        'number' =&gt; '20'
        ), $atts));
        if ('phrase' == false){
                return false;
        }
        //*/ Build our search url and transient name
        $transient = 'tweet-'. esc_sql($phrase) . '&l=' . esc_sql($lang);
        $url = 'http://search.twitter.com/search.json?q='. urlencode($phrase) . '&show_user=true〈='. urlencode($lang) .'&rpp=' . $number;

        if ($max_id != false){
                $url .= '&max_id=' . (int) $max_id;
                $transient .= '&m=' . (int) $max_id;
        }
        if ($since_id != false){
                $url .= '&since_id=' . (int) $since_id;
                $transient .= '&s=' . (int) $since_id;
        }

        if ( $tweet_display = get_transient($transient) ){
                // It's allready been brought
        }
        else {

                if ($search = wp_remote_get( $url ) ){

                $results = json_decode($search['body']);

                ob_start();
                        $tweets = $results-&gt;results;
                         //*/
                        foreach ( (array) $tweets as $tweet){
                                $tweetcontent = $tweet-&gt;text;
                                $newcontent = preg_replace('%@([^\s]*)%', "<a href="http://twitter.com/\\1">@\\1</a>", $tweetcontent);
                                echo "<div class="twitter_shortcode"><p>
                                <img class="twitter_shortcode_image" src="&quot;.esc_url($tweet-&gt;profile_image_url).&quot;"><span class="twitter_shotcode_username"><a href="http://twitter.com/&quot;.$tweet-&gt;from_user.&quot;">".$tweet-&gt;from_user."</a>&nbsp;—&nbsp;</span>". $newcontent ."</p>
                                </div>";

                        }
                $tweet_display = ob_get_clean();
                set_transient($transient, $tweet_display, 300);
                }
                else
                {
                        $tweet_display = "I'm sorry, no tweets are availailable at this time";
                }
        }
        return apply_filters('jorbin_tweet_content', $tweet_display) ;
}
add_filter('jorbin_tweet_content', 'make_clickable' );
add_shortcode('twitter-search', 'jorbin_firestream_search');

Like before, there are some classes for you to work with that should make it easy for you to theme these shortcodes. If you want for me to add more, comment below.

The second shortcode allows you to get and display a list of the most recent trends on twitter using the shortcode:

This one doesn’t have any attribute. The output is in an unordered list with the class of twitter-trends.

function jorbin_twitter_trends(){

        $transient='twitter-trends';
        $url = 'http://search.twitter.com/trends.json';

        if ( $tweet_display = get_transient($transient) ){

        }
        else{
                $search = wp_remote_get( $url );

                $results = json_decode($search['body']);
                $trends = $results-&gt;trends;
                ob_start();
                        echo "<ul class="twitter-trends">";
                        foreach ($trends as $trend){
                                echo '<li><a href="' . esc_url($trend-&gt;url) . '"> '. esc_html($trend-&gt;name) . '</a></li>';
                        }
                        echo "</ul>";
                $tweet_display = ob_get_clean();
                set_transient($transient, $tweet_display, 120);
        }
        return $tweet_display;
}

add_shortcode('twitter-trends', 'jorbin_twitter_trends');

If you use any of these, let me know. If there are any improvements or more you want to see, comment below.