The boss wanted me to find a news ticker to put on the homepage of our community portal, buzzmontgomery.com.

So the search was on to find a “widget” from Fox News and CNN. No luck, well, no luck in the sense that their “widgets” didn’t fit my needs – in particular I needed something 930 pixels wide and 40 pixels tall.

So, I decided to teach myself how to use YQL (Yahoo! Query Language), so I could have access to “the worlds” database.

Here are some quick facts:

• YQL is huge, it powers mega-sites/platforms like Zillow and Yelp
• The Open Data Tables is made up of thousands of web sites sharing their data
• YQL has the ability to export this data into both XML and JSON
• PHP5 has a SimpleXML parser built in

With this knowledge I put my head down and started coding. Here I’ll show you how to create your own “ticker” using SimpleXML, YQL, jQuery, and CSS.

Step 1: Finding the data

We need to visit the YQL Console and run a query using a statement. For demonstration purposes, I’ll run a query to select the titles and links from an RSS feed.

select title,link from rss where url="http://rss.news.yahoo.com/rss/topstories"

The console

Un-check, “Diagnostics” and push “Test”.

After running the query, here is the URL we'll use in a minute

The result is a URL (aka REST query) we can use in our code (more on that in a second).

What just happened? Running this query will render an XML v1.0 formatted file via  URL – no downloading, plus it’s totally dynamic and auto-updates the contents based on the RSS feed. (amazing huh?)

The results in XML format

Step 2: Grab the data

This is easy since PHP 5+ has a built in xml reader, called SimpleXML. If you look at the code below you’ll see:

$requestAddress = "http://query.yahooapis.com/v1/public/yql?q=select%20title%2Clink%20from%20rss%20where%20url%3D%22http%3A%2F%2Frss.news.yahoo.com%2Frss%2Ftopstories%22";

This is URL that the YQL Console gave us as a result of our query. (You can run ANY QUERY you’d like. YQL has many sample queries to try on your own.)

This function below does a few things:

• Grabs XML
• Reads the content
• Parses the XML and turns it into a PHP variable
• Displays the content in a Loop

Add this to custom_functions.php

function news_ticker_html() {
// Grab XML
$requestAddress = "http://query.yahooapis.com/v1/public/yql?q=select%20title%2Clink%20from%20rss%20where%20url%3D%22http%3A%2F%2Frss.news.yahoo.com%2Frss%2Ftopstories%22";
// Read content
$xml_str = file_get_contents($requestAddress,0);
// Create variable
$xml = new SimplexmlElement($xml_str);
// Start displaying content
echo "<div id='news_ticker'><ul id='ticker'>";
// Begin Loop
foreach ($xml->results->item as $items)
 {
 echo "<li><a href=".$items->link[0].">".$items->title[0]."</a></li>";
 }
// End Loop
echo "</ul></div>";
}
// Add to hook
add_action('thesis_hook_before_content', 'news_ticker_html');

What makes XML so cool when mixed with PHP is how easy it is to read and parse thanks to XML tags. Here is a great tutorial on parsing xml with PHP5.

Each one of these <results><item><link><title> is a tag, which are easily extracted

Step 3: Install the jQuery

liScroll is a very simple, lightweight  jQuery script which will take our parsed data and bring it to life. Visit liScroll to download the script and to see more options.

Add this to custom_functions.php

function footer_scripts_html() {
<script type="text/javascript" src="http://yourwebsite.com/ticker-scroller.js"></script>
<script type="text/javascript">
   $(function(){ $("ul#ticker").liScroll(); });
</script>
<?php }
add_action('thesis_hook_after_html', 'footer_scripts_html');

Step 4: Install the CSS

Add this to your custom.css

#news_ticker{display:block;height:41px;width:931px;overflow:hidden;}
.tickercontainer{border:1px solid #000;background:#fff;width:929px;height:27px;overflow:hidden;margin:0;padding:0;}
.tickercontainer .mask{position:relative;left:10px;top:8px;width:900px;overflow:hidden;}
ul.newsticker{position:relative;left:900px;font:bold 10px Verdana;list-style-type:none;margin:0;padding:0;}
ul.newsticker li{float:left;background:#fff;margin:0;padding:0;}
ul.newsticker a{white-space:nowrap;color:red;font:bold 10px Verdana;margin:0 50px 0 0;padding:0;}
ul.newsticker span{margin:0 10px 0 0;}

The result:

See it in action

This is just the tip of the ice burg. By learning how to grab, parse, and display XML data from YQL – you are only limited to the crazy amount of data in the YQL Open Tables Database. Have fun and good luck!

PS – this only works if your server is running PHP5!

NextGEN Gallery Users: If you use Image Browser option to show your image galleries (and I highly recommend it over Effects, Lightbox and Cooliris – more on that in a minute) then you are forcing your users scroll down to navigate to the next image.

Here is a quick and dirty way to completely eliminate scrolling. Not only will this help the user experience, it will also help increase your page-views. We’re going to give the Image Browser some anchor text – and move the navigation to the top.

Get to the plug-in editor:

WP-Dashboard, click on “Plugins” and “Editor”

In the top right corner, there is a drop-down box. Choose “NextGEN Gallery” and click “Select”.

Scroll baby, scroll

NextGEN is a HUGE plug-in. However, it is also one of the most useful, and it’s the reason I switched to WordPress from Joomla.Scroll down until you see:

nextgen-gallery/view/imagebrowser.php

Copy and Paste please.

Now, copy the code below and paste it into the plugin editor, overwriting everything:

<?php
/**
Template Page for the image browser

Follow variables are useable :

 $image : Contain all about the image
 $meta  : Contain the raw Meta data from the image
 $exif  : Contain the clean up Exif data
 $iptc  : Contain the clean up IPTC data
 $xmp   : Contain the clean up XMP data 

 You can check the content when you insert the tag <?php var_dump($variable) ?>
 If you would like to show the timestamp of the image ,you can use <?php echo $exif['created_timestamp'] ?>
**/
?>
<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($image)) : ?>

<div id="<?php echo $image->anchor ?>">
 <div>
 <div>
 <a id="ngg-prev-<?php echo $image->previous_pid ?>" href="<?php echo $image->previous_image_link ?>#anchor">&#9668; <?php _e('Back', 'nggallery') ?></a>
 </div>
 <div>
 <a id="ngg-next-<?php echo $image->next_pid ?>" href="<?php echo $image->next_image_link ?>#anchor"><?php _e('Next', 'nggallery') ?> &#9658;</a>
 </div>
 <div><a name="anchor"><?php _e('Picture', 'nggallery') ?> <?php echo $image->number ?> <?php _e('of', 'nggallery')?> <?php echo $image->total ?></div>
 <div><p><?php echo $image->description ?></p></div>
 </div>    

 <div><?php echo $image->href_link ?></div>
 <h3><?php echo $image->alttext ?></h3>

</div>    

<?php endif; ?>

Click “Update File”. Now the Image Browser looks like this:

Navigation on top! When your users click “Next” or “Back” the page will change, but the navigation remains constant thanks to the 1995 HTML snippet: Anchor. Now the user’s mouse will always be on “Next” or “Back” at each click. Making your user very happy (and clicky) and your website stats climb.

Why I recommend Image Browser instead of  Effects (Flash) Gallery, Lightbox (jQuery), or Cooliris (software)

When you run a website that has advertisements, then you know about terms like “page-views” and “impressions”. Advertisers want to know: A) How many page-views does your website get? B) What is your CPM? The higher your page-views, the more you raise your CPM. Not only are image galleries great content for your users, they are a real easy way to increase page-views.

When you use Effects, Lightbox, or Cooliris instead of Image Browser, you’re taking away the ability to increase page-views since the image will be served by Flash, jQuery, or software.

What if someone’s on a mobile phone? They couldn’t see your images. What if someone had Java turned off? Do you really want to add additional  jQuery to your website? What if that user didn’t have the Cooliris plug-in or software? Shutting the user out of unique content is web no-no #1.

Sure, those effects are modern and pretty. But they won’t help your cause – if your cause is to give your users an easy, enjoyable image gallery experience on any browser or platform.

Check out my NextGEN gallery settings (.png, new window)

What’s great about this is how easy it’s going to be for your clients to update their header image. Obviously! Here’s how it works:

You’ll notice the “Header Image” under the Thesis menu in your WordPress Dashboard. Just click on it – and it will take you to the upload page. Thesis will tell you an optimal width. In my case it was 952 pixels. If the image is larger than specified – Thesis WILL crop it to fit – although, the image quality will suffer after the cropping software beats it up. It’s best just to make it the right width in Photoshop first.

Just click “Browse” and “Upload”

Now wasn’t that easy? Removing the image is even easier. Hover over the image, and click “Remove Image”.

You don’t have to have an image as wide as your site! You can upload a smaller image, say, a logo and it will align-left in the header.

The CSS output is as follows:

/*---:[ wp custom header image ]:---*/
#header { height: 12.9em; padding: 0; background-image: url('http://gregrickaby.com/wp-content/uploads/2010/07/cropped-awesome-header-image.jpg'); background-repeat: no-repeat; background-size: 85.2em 12.9em; }
#logo a { display: block; width: 23.667em; height: 3.583em; text-indent: -9999px; outline: none; }

The image upload object puts the image in /wp-content/uploads/ and then writes it into layout.css

Easy. And about time!

Maybe you’ve seen the “fade-in” effect of the content and images loading as you scroll down on some popular sites (most notably mashable.com) that effect is called “Lazy Load” and I’ll show you to roll it out in under five minutes.

Before we get started, you have download the jQuery and Placeholder image (right-click “save as”)

jQuery Lazy Load (minified) | Lazyload.gif

Now you have to upload those two files. Upload them to /wp-content/uploads/scripts/

Step 1: Insert the following into custom_functions.php

function lazy_load_html() {
?>
<script src="/wp-content/uploads/scripts/jquery.lazyload.mini.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
 if (navigator.platform == "iPad") return;
 $("img").lazyload({
 placeholder : "/wp-content/uploads/scripts/lazyload.gif",
 effect : "fadeIn"
 });
});
</script>
<?php }
add_action('thesis_hook_after_html','lazy_load_html');

Step 2 (optional): Turn on the jQuery library in Thesis Options –> Design Options –> JavaScript

Why is this optional? Because you may already have the jQuery library running. To check, you should view your source-code and look for something similar to this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

If you see this, then a plug-in has already loaded jQuery and there is no need to load it twice. (this is the reason 99% plug-ins conflict with each other and break)

Step 3: There is no step three. It was that easy. Enjoy!

For more information, check out the official website: Lazy Load Plug-in for jQuery andw00t for one less plug-in you have to install!

First, I want to thank @Matt425 for his tutorial on how to invoke the Follow Me Badge. It wasn’t until after I followed his tutorial that I started to see further kick-ass-ness on my site.

What is Twitter’s @Anywhere? In-short, a quick way to bring the power of Twitter’s API by use of Hovercards, Follow Me Badges, and Tweet Boxes to YOUR site. I’ll show you how to take advantage of some of the features – WITHOUT using a plug-in.

Step #1 – Create your own “Application” (in other words, authorize your Twitter account for @Anywhere usage)

a. http://dev.twitter.com/apps/new

b. fill out the info & hit “save”

c. copy the code (replacing the XXXXxxxxXXXXXxxxxXXXX with your own API)

<script src="http://platform.twitter.com/anywhere.js?id=XXXXxxxxXXXXXxxxxXXXX&v=1"></script>
  <script type="text/javascript">
     twttr.anywhere(function(twitter) {
              twitter.hovercards();
     });
  </script>

Step #2 – Work the code into your site

There are two ways 1) Easy 2) Ninja

EASY: Paste the code into WP-Dashboard -> Thesis -> Site Options -> Stats Software/Scripts -> Hit Save

NINJA: Using custom_functions.php we’re going to use a function to invoke the code

a.) Open custom_functions.php

b.) Copy the code below and paste near the bottom:

//Twitter @Anywhere
function twitter_anywhere_html() {
?>
<script src="http://platform.twitter.com/anywhere.js?id=XXXXxxxxXXXXXxxxxXXXX&v=1"></script>
  <script type="text/javascript">
     twttr.anywhere(function(twitter) {
              twitter.hovercards();
     });
  </script>
<?php }
add_action('thesis_hook_after_html','twitter_anywhere_html');

So what now? Now you’ve just merged Twitter’s API with your website, thus activating the “Hovercard” feature!

I’m going to type a Twitter user-name, let’s use @pearsonified and WITHOUT using HTML and a Twitter Hovercard will display!

Advanced Features

Want to show a Follow Me Badge? Replace the code directly above with this:

//Twitter @Anywhere
function twitter_anywhere_html() {
?>
<script src="http://platform.twitter.com/anywhere.js?id=XXXXxxxxXXXXXxxxxXXXX&v=1"></script>
  <script type="text/javascript">
     twttr.anywhere(function(twitter) {
              twitter.hovercards();
              twitter('#follow-yourusername').followButton("yourusername");
     });
  </script>
<?php }
add_action('thesis_hook_after_html','twitter_anywhere_html');

Paste this code anywhere in your content/sidebars:

<div id="follow-yourusername"></div>

Will display:

How about a Tweet Box? Replace code directly above with this:

//Twitter @Anywhere
function twitter_anywhere_html() {
?>
<script src="http://platform.twitter.com/anywhere.js?id=XXXXxxxxXXXXXxxxxXXXX&v=1"></script>
  <script type="text/javascript">
    twttr.anywhere(function(twitter) {
              twitter.hovercards();
              twitter('#follow-yourusername').followButton("yourusername");
 });
   twttr.anywhere(function (T) {
              T("#tbox").tweetBox({
              height: 100,
              width: 400,
              defaultContent: "@gregrickaby"
              });
 });
  </script>
<?php }
add_action('thesis_hook_after_html','twitter_anywhere_html');

Paste this code anywhere in your content/sidebars:

<div id="tbox"></div>

Will display:

Let’s review. All we’ve done is call a Javascript and then activate said Java using a <div>. Easy stuff, and you’ll be able to give your viewers another way to interact with you. Check out Twitter’s Beginners Guide to @Anywhere!

Adding more sidebars in Thesis (or any WordPress theme) is REALLY easy! It’s only three steps, and I’ll show you how to create 3 additional widgets to your footer.

Step #1: Insert the following code into custom_functions.php near the top

register_sidebar(array('name'=>'Footer Column 1', 'before_title'=>'<h3>', 'after_title'=>'</h3>'));
register_sidebar(array('name'=>'Footer Column 2', 'before_title'=>'<h3>', 'after_title'=>'</h3>'));
register_sidebar(array('name'=>'Footer Column 3', 'before_title'=>'<h3>', 'after_title'=>'</h3>'));

This code simply tells WordPress to “add a new widget space”.

Step #2: Insert the following code into custom_functions.php near the bottom

// Footer Widgets
function footer_widgets_html() {
?>
 <div id="custom_footer">
 <div class="column1">
 <ul>
 <?php    if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Column 1') ){    ?><?php    }    ?>
 </ul>
 </div>
 <div class="column2">
 <ul>
 <?php    if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Column 2') ){    ?><?php    }    ?>
 </ul>
 </div>
 <div class="column3">
 <ul>
 <?php    if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Column 3') ){    ?><?php    }    ?>
 </ul>
 </div>
 </div>
<?php }
add_action('thesis_hook_after_footer','footer_widgets_html');

Here we’ve setup a Function to build 3 columns inside the Thesis Hook: After Footer. The PHP just checks to see if there is a Sidebar named “Footer Column 1″, if there is print it.

Step #3: Add the following code to custom.css

/* --- Footer Widgets --- */
#custom_footer { /* The parent DIV containing all 3 widgets */
 height: 350px;
 width: 100%;
 margin: 30px 0 0 0;
}
#custom_footer h3 { /* Headline color */
 height: 40px;
 font-size: 20px;
 color: #000;
}
#custom_footer a { /* Link color */
 color: #000;
}
#custom_footer ul li { /* Remove bullets */
 list-style: none;
}
.column1 {
 height: auto;
 width: 30%;
 margin: 0 0 0 15px;
 padding: 5px;
 float: left;
}
.column2 {
 float: left;
 height: auto;
 width: 30%;
 margin: 0 0 0 15px;
 padding: 5px;
 float: left;
}
.column3 {
 height: auto;
 width: 30%;
 margin: 0 0 0 15px;
 padding: 5px;
 float: left;
}

Here we just add some quick styling to line-up all 3 columns next to each other. The end result, while basic, gets you headed in the right direction

There are a stack of plug-ins out there which use a mess of Java and jQuery to do what you could do in 50 lines or less. Creating a Featured Content Slider is easy when you take advantage of a Sub-Loop, Template Tags, TimThumb, and a little bit of jQuery inside the Thesis Theme.

Here is all the code:

custom.css

/* --- Featured Content Slider --- */
#slideshow {
 height: 250px;
 width: 660px;
 margin: 0 0 10px 0;
 overflow: hidden;
}
.nav {
 margin: 0;
}
#nav a {
 position: relative;
 top: 235px;
 left: 565px;
 color: #000;
 margin: 0;
 padding: 3px 5px;
 border: 1px solid #000;
 background: #FFF; /* sets the bg color of the nav box */
 text-decoration: none;
 z-index: 9999;
}
#nav a.activeSlide {
 background-color: #FD0000; /* sets the bg color of the nav box when active */
}
#nav a:focus {
 outline: none;
}

Anywhere in custom_functions.php

// Featured Content Slider jQuery
function fcs_scripts_html() {
?>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript">
$(function() {
    $('#slideshow').before('<div id="nav" class="nav">').cycle({
        fx:     'fade',
        speed:  '3000',
        timeout: '3000',
        pager:  '#nav',
        pause:   '0',
        fastOnEvent: '0',
        before: function() { if (window.console) console.log(this.src); }
    });
});
</script>
<?php }
add_action('thesis_hook_after_html','fcs_scripts_html');

// Image Grabber (Tim Thumb)
function grabImage() {
	global $post, $posts;
	$first_img = '';
	ob_start();
	ob_end_clean();
	$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
	$first_img = $matches [1] [0];
	return $first_img;
}

Thesis Hook: Before Post (or anywhere you want the Featured Content Slider to show up)

<div id="slideshow">
<?php $sub_loop_1 = new WP_Query("cat=6&showposts=5");
while ($sub_loop_1->have_posts()) : $sub_loop_1->the_post(); ?>
	<a href="<?php the_permalink(); ?>"><img src="<?php echo bloginfo('template_url'); ?>/lib/scripts/thumb.php?src=<?php echo grabImage(); ?>&amp;h=250&amp;w=660&amp;zc=1&amp;q=75" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" /></a>
<?php endwhile; ?>
</div>

How to use it:

1. Place the CCS in custom.css
2. Place the jQuery & PHP into custom_functions.php
3. Place the Slideshow code anywhere in your content, into any Thesis Hook (maybe thesis_hook_before_post), and even a custom page template
4. Change (“cat=6&showposts=5″); to match a Category ID and desired post count
5. Check “jQuery” in Thesis –> Design Options –> Javascript (see image)
6. Create a new post, upload/add at least one image 660×250 pixels

Let’s get technical

So far we’ve used 46 lines of code…pretty impressive considering the leading Featured Content Slider plug-in is over 1,000 lines of code, weighs 684KB, and is only compatible up to WordPress 2.7.1! (Uhh, WordPress 3.0 is fixin’ to come out!)

What I’ve done is really simple:

• Used CSS to style
• Used jQuery to create the “effects”
• Used a Sub-Loop to grab the post data
• Used Template Tags to print the post data
• Used TimThumb (already included in Thesis) to optimize the images
• Use PHP to pull the Image Path from the Post

The sub-loop simply queries the database at your direction. You need to specify what category to pull from, which is simple, just change: (“cat=6&showposts=5″); to whatever Category ID it is you want to feature. The template tags will populate the HTML for you.

The jQuery Cycle script has a huge range of options and effects. You can find them here

How do you find the Category ID?

WP Dashboard –> Posts –> Categories

The images don’t show up!?

1. Make sure you uploaded and inserted an image at least 660x250px wide!

2. It’s possible that TimThumb is a blacklisted on your server. (Hostgator) Check with your server administrator to make sure TimThumb is “white-listed”

3. Make sure you’ve checked “jQuery” in Thesis –> Design Options –> Javascript

Site Examples

http://979jamz.com

http://newstalk1079.com

http://kendallvandyk.com

This is part 3 of a never-ending-series about advanced ninja Thesis coding. You can get up-to-speed by reading, How To: Create a Custom Page Template and How To: Create Additional Page Templates.

The WordPress Loop

You’ve read about The WordPress Loop in other tutorials in other Themes; how you can “add/subtract post meta-data, tags, etc…” all you have to do is “edit ____ in the WordPress Loop” blah blah blah.

Not with Thesis you can’t.

Rule #1, never edit core Thesis files. It’s not that you’ll break Thesis, but you will however, take away one of the biggest selling points: “Thesis is future proof”. Alas, we still have our secret Thesis weapons:

custom.css? Check.
custom_functions.php? Check.
Custom Page Templates? Check.
Greg Rickaby’s awesome tutorials? Check.

The Everyday Scenario

Client XYZ want’s to feature one category of posts on the homepage. The problem is, the client also wants a jQuery slider and no sidebars. Easy enough, just create a Custom Page Template and then create a custom sub-loop in home.php. (For a great example, check out this conversion I did using a custom sub-loop. Look at the “News” box on the homepage).

The Query

Once you’ve created home.php and attached it to Thesis, we need to do three things to make this all work:

1. Specify a category
2. Query the database
3. Print the post data

<?php
$sub_loop_1 = new WP_Query("cat=1&showposts=3");
while ($sub_loop_1->have_posts()) : $sub_loop_1->the_post();
$category_link = get_category_link('1');
?>

In the code above, I said “Hello database, I’d like to pull 3 posts from Category ID #1, and while you’re in there I’ll take the permalink to Category #1 as well…”

This is exactly the same as The WordPress Loop. When you create a sub-loop, you get to pull ALL the same post data as the regular WordPress Loop, you’re just doing it outside, thus it’s called the “sub-loop”. Now, let’s start printing the data with what WordPress calls, “Template Tags”. Template Tags are just variables that become available to you when you query the database. Here is the official list.

For example:

<?php the_title(); ?> will show us the Post Title.

<?php the_permalink(); ?> will gives us the Post’s Permalink

<?php the_exceprt(); ?> will show us the Excerpt

The “Teaser” Box

Let’s put this code into a real world situation. Using CSS and some of those “Template Tags” you can create your own “Teaser” box.

<div id="news"> <-- Start the "Teaser" box

<div class="headline"> <-- Start the Post Title
   <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
</div>

<div class="thumb"> <-- Start the Post Thumbnail
  <?php the_post_thumbnail( array(100,100) ); ?>
</div>

<div class="excerpt"> <-- Start the Post Excerpt
  <p><?php the_excerpt(); ?>...<br />
    <a href="<?php echo $category_link; ?>"><?php $category = get_the_category(); echo $category[0]->cat_name; ?><?php $category = get_the_category(); echo $category[1]->cat_name; ?></a> | <a href="<?php the_permalink(); ?>"><?php echo thesis_teaser_link_text(); ?></a> | <a href="<?php the_permalink(); ?>#respond">Comments { <?php comments_number('0','1','%'); ?> }</a>
  </p>
</div>

</div> <-- End the "Teaser" box
<?php endwhile; ?> <-- End the sub-loop

Here is how all that works. I created a new <DIV ID> to encompass the entire “teaser”. Then I created a new <DIV CLASS> for the headline, post thumbnail, excerpt, permalink, and comment data. If you slow down and actually look at the PHP code you will see how easy it is. WordPress gives us all the tools (variables) we need with Template Tags.

I want to take a sec to talk about pulling out the Thumbnail. Since WP 2.9.0, the programmers of WordPress created awesome new functionality that has not yet been made available in Thesis (at press time, Thesis 1.6). So, in order to pull out thumbnails; YOU MUST add this line of code ANYWHERE in custom_functions.php: add_theme_support( 'post-thumbnails' ); You can learn all about the new WP 2.9+ Thumbnail features by reading Justin Adocks blog post.

The Final Output

<?php
$sub_loop_1 = new WP_Query("cat=1&showposts=3");
while ($sub_loop_1->have_posts()) : $sub_loop_1->the_post();
$category_link = get_category_link('1');
?>
<div id="news">

<div>
   <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
</div>
<div>
<?php the_post_thumbnail( array(100,100) ); ?>
</div>

<div>
<p><?php the_excerpt(); ?>...<br />
<a href="<?php echo $category_link; ?>"><?php $category = get_the_category(); echo $category[0]->cat_name; ?><?php $category = get_the_category(); echo $category[1]->cat_name; ?></a> | <a href="<?php the_permalink(); ?>"><?php echo thesis_teaser_link_text(); ?></a> | <a href="<?php the_permalink(); ?>#respond">Comments { <?php comments_number('0','1','%'); ?> }</a>
</p>
</div>

</div>
<?php endwhile; ?>

See it in action: here, here, and here, (yeah I do this a lot)

Closing Statement

When people call me for PSD Conversions they often comment, “We’re not sure we can do this with Thesis…” and it usually involves a custom page template and a sub-loop. Learning these skills will not only help you as a programmer, but being a hero too.

You see, when a client throws up a brick-wall-deal-breaker about making Thesis not LOOK LIKE Thesis, you can say with confidence, “Bring it on!” And that is all.

A few weeks ago I showed you how to make a Custom Homepage Template. Today, I will show you how to create additional page templates which will allow you to further customize Thesis without hacking core files.

This tutorial is based on my WidgetMe Framework. Which allows you to create additional page templates with page specific widgets.Why would you need this functionality? Take a look at a recent PSD Conversion and pay attention to pages that have their own sidebars and menus. This is all done with a Custom Page Templates.

Easy Breezy

Step 1: Create a new PHP document, and paste this code in the top:

<?php
/**
 * Template Name: About Us
 */

Explanation: What you’ve just done is created some code for WordPress to scan. WordPress will read these four lines of code and automatically add this page to a list of page templates. (This functionality is actually a native WordPress feature – not Thesis!)

Step 2: Save the PHP file as “about-us.php” Note: the file name MUST match line 3, using dashes for spaces

Step 3: Upload this to: /wp-content/themes/thesis_16/

Step 4: Create a new page (or edit an existing one) and select “About Us” from the drop-down

Now publish.

The Fun Part

Let’s get coding.

<?php
/**
 * Template Name: About Us
 */
?>
 <div id="custom-page">
 	<div class="content-column">
    	A whole bunch of content here.
 	</div>
 	<div class="sidebars">
 		<?php echo thesis_sidebars(); ?>
 	</div>
 </div>

When finished, save and upload. Nothing elaborate, but end result of this would be:

Taking it to the next level

If you noticed, I used:

<?php echo thesis_sidebars(); ?>

to place my sidebars from Thesis into this page template. That’s not the only Thesis function you can add. For example:

thesis_default_header();
thesis_nav_menu();
thesis_footer_area();

etc…

Explanation: What you’re doing is actually PHP 101. You’re simply calling a function that Chris Pearson wrote for Thesis and printing it. Let’s see a more advanced example:

<?php
/**
 * Template Name: About Us
 */
?>
<?php echo thesis_header(); ?>
<?php echo thesis_nav_menu(); ?>
 <div id="custom-page">
 	<div class="content-column">
    	A whole bunch of content here.
 	</div>
 	<div class="sidebars">
 		<?php echo thesis_sidebars(); ?>
 	</div>
 </div>
<?php echo thesis_footer_area(); ?>

Will return this:

Putting it all together

We’re getting there! All that’s missing is CSS. Let’s call some style-sheets:

<?php
/**
 * Template Name: About Us
 */
?>

<head>
	<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css" type="text/css" media="screen, projection" />
	<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/custom/layout.css" type="text/css" media="screen, projection" />
	<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/custom/custom.css" type="text/css" media="screen, projection" />
</head>
<?php echo thesis_header(); ?>
<?php echo thesis_nav_menu(); ?>
 <div id="custom-page">
 	<div class="content-column">
    	A whole bunch of content here.
 	</div>
 	<div class="sidebars">
 		<?php echo thesis_sidebars(); ?>
 	</div>
 </div>
<?php echo thesis_footer_area(); ?>

Returns this: http://gregrickaby.com/sample-about-us-for-tutorial (go ahead and view-source)

As you can see, you get to re-invent the wheel – except in your toolbox you have WordPress and Thesis!   Have fun.

List of Thesis Functions & Frameworks

Header
thesis_header_area();

Content
thesis_content();

Sidebars
thesis_sidebars();
thesis_sidebar_1();
thesis_sidebar_2();

Footer
thesis_footer_area();
thesis_attribution();

Full-Width Framework
thesis_wrap_header();
thesis_wrap_content();
thesis_wrap_footer();

The Mac-Daddy Framework (when used, will simply print Thesis as a whole)
thesis_html_framework();

There are actually about 50 more of these, but those listed above encompass all the smaller ones. For a complete list of Functions, navigate to: /wp-content/themes/thesis_16/lib/html/ and take a look.

Custom page templates are the easiest way to make a whole new web design – inside of Thesis. Imagine, all of this space could be yours to code however YOU want…INSIDE of Thesis.

Use the blank space Luke...

In this tutorial, I’ll show you how to create a custom homepage template, while using a conditional tag and a little custom PHP code.

Step 1. Create a new PHP page and name it home.php. Upload it to: /wp-content/themes/thesis_16/custom/

Step 2. Open custom-functions.php and paste this at the bottom of the file.

// Remove Default Page Template
remove_action('thesis_hook_custom_template', 'thesis_custom_template_sample');

// Custom Page Template
function custom_homepage() {
	if ( is_front_page() ) {
		include (TEMPLATEPATH . '/custom/home.php');
	}
}
add_action('thesis_hook_custom_template', 'custom_homepage');

Step 3. Log-in to your WP Dashboard and click on Pages –> Add New

Step 4. Type “Homepage”, leave the content area blank, select “Custom Template”, and then click “Publish”

Step 5. Go to Settings –> Reading and check “A static page”, then select “Homepage”. Click Save.

Step 6. The Result:

The possibilities are endless here. If you’ve ever seen a Thesis design that DIDN’T look like Thesis, chances are they are using custom page templates.

UPDATE: 3/3/10

Here is a real-world working example of home.php below (See it live)

<?php echo thesis_sidebars(); ?>
<div>
 <a href="#"><img src="<?php echo get_bloginfo('template_url'); ?>/custom/images/multimedia-box.jpg" /></a>
 <a href="#"><img src="<?php echo get_bloginfo('template_url'); ?>/custom/images/multimedia-box1.jpg" /></a>
 <a href="#"><img src="<?php echo get_bloginfo('template_url'); ?>/custom/images/multimedia-box2.jpg" /></a>
</div>
<div id="news">
 <img src="<?php echo get_bloginfo('template_url'); ?>/custom/images/bar-1.jpg" /><br />
<?php
$category_box_1 = new WP_Query("cat=1&showposts=2");
while ($category_box_1->have_posts()) : $category_box_1->the_post();
$category_link = get_category_link('1');
?>
<div class="news">
 <div id="headline">
  <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
 </div>
 <div id="thumb">
  <?php the_post_thumbnail( array(100,100) );  ?>
 </div>
 <div id="excerpt">
  <p><?php the_excerpt(); ?>...<br />
   <a href="<?php echo $category_link; ?>"><?php $category = get_the_category(); echo $category[0]->cat_name; ?><?php $category = get_the_category(); echo $category[1]->cat_name; ?></a> | <a href="<?php the_permalink(); ?>"><?php echo thesis_teaser_link_text(); ?></a> | <a href="<?php the_permalink(); ?>#respond">Comments {<?php comments_number('0','1','%'); ?>}</a>
  </p>
 </div>
</div>
  <?php endwhile; ?>
  <h3><a href="<?php echo $category_link; ?>">Read More <?php $category = get_the_category(); echo $category[0]->cat_name; ?>...</a></h3>
</div>
<div id="flickr">
 <ul>
  <?php    if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar 1') ){ ?><?php } ?>
 </ul>
</div>

It’s calling for the Thesis Sidebars, creating a jQuery slide-show, and a sub-loop for the news box.