Making a jQuery image slideshow in Thesis is actually very easy. There are four basic steps:

• Insert a few lines of code into the header.
• Make a slideshow <div id="slideshow">.
• Put some images into your images folder.
• Write a little custom.css code magic.

To begin, I want to outline a few assumptions. I am going to assume that you have images of the same size (height and width). Also, although you can put any HTML into a “slide” I will only be using images. Lastly, I will be using a default transition effect called “fade” and I will not be adjusting all of the variables. In fact, if you read the Cycle Plugin documentation, you will see that there are about a million tweaks possible.

Update 2/18/09

For the sake of this tutorial, I am going to assume that you only want the slideshow to appear on your home page. If you want the slideshow on every page simply remove if (is_front_page()){...........}. Also, never be embarrassed to ask me for help! I am the Thesis Tutor, after all.

Now, onto the juicy parts!

First, copy and paste the following into your custom_functions.php:

function slidewhow() {
if (is_front_page()) {
?><div class="slideshow">
    <a id="slide1" class="slide" href="http://yourblog.com/link"></a>
    <a id="slide2" class="slide" href="http://yourblog.com/link2"></a>
  </div>
<?php
}}
add_action('thesis_hook_after_header','slideshow');

function slide_script() {
echo "\n\n";
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
	fx: 'fade' //You can change transition effects here.
	});
});
</script>
<?php
}
add_action('wp_head','slide_script');

It is important to note that you can add as many images as you please, just be sure to give them each a unique id so you can target them later in the CSS.

Next, drop the images you want to use in the slideshow in your images folder.

Last, we need to add some CSS to whip this little slideshow into shape. So, open up your custom.css and paste this little bit of code in there:

.custom .slideshow .slide { display: block; height: ---em; width: ---em; outline: none; }
.custom .slideshow #slide1 { background: url('images/image-1.jpg') no-repeat; }
.custom .slideshow #slide2 { background: url('images/image-2.jpg') no-repeat; }

Be sure to insert your images names and height/width. By default, the font-size is 10px. Therefore, to convert to ems, simply divide pixels by 10. Yes, it is THAT easy.

That should cover it, folks. Happy coding!

Upgrading Thesis is extremely easy. Be sure to back-up all files before upgrading any software.

Also don’t forget to upgrade your copy of Thesis to the Developer’s Option!

Download Matt Industries Skin for Thesis Here!

Installation Instructions:

1. Download and unzip from link above.
2. Rename your current custom.css file something like custom-old.css. Then upload the new, Matt Industries custom file [to domain.com/wp-content/themes/thesis_16/] you got from unzipping.
3. Thesis Options→Design Options→Framework Options→Outer Page Padding. Set to 0 [zero].
4. Thesis Options→Design Options→Multimedia Box→Select ‘Do Not Show Box’
5. Thesis Options→Design Options→Site Layout→Columns. Select 3 Column Layout with Content=507px, Sidebar1=248, Sidebar2=149px
6. Optional: From Wordpress Dash go to Settings→Reading. In this area set ‘Blog Pages Show at Most: 4
7. The following show some suggested font families and required font sizes:
   • Content Area: 14pt
   • Nav Menu: Helvetica, 11pt
   • Header: Helvetica, 36
   • Tagline: Inherit from Header, 14pt
   • Headlines: Helvetica, 22pt
   • By-lines: Lucida Grande, 10pt
   • Sidebars: Helvetica, 13pt
   • Footer: Inherit, 12pt

Remember! Content is restricted to an area that is 450px wide! In the near future the content area will be dynamic.

About Matt Industries Skin

I have been waiting to drop a Thesis Skin for a while. So, I decided there could not be a better time than now!

With the release of Thesis 1.6 and it’s new menu class system, the Matt Industries Skin needed a little tweaking. So, I set out to understand the new menu class system in order to make the Matt Industries Skin Thesis 1.6 compliant. I was incredibly impressed with the new system, to say the least.

The Matt Industries Experiment

The Matt Industries Experiment is simply this: I want to show that the coolest designs on the web, if not already made with Thesis, can be. But, let’s make sure that the record stays straight. All of my skins will be “in the style of __________.” Does that mean I just go and copy files from someone’s site? Heck no. My code is 100% original. I tackle problems from a usability/extensibility point of view.

Thesis tackles 90% of the work in web design and it is an epic SEO powerhouse. As of 10/21/2009, 12:51pm EST a site made on Thesis is the fourth search result for a Bing search of “twitter.” That is amazing, folks. The point is all you need to do is tweak the design of Thesis; there is an underlying framework spitting out TONS of code that you don’t ever touch. In order to get the most out of Thesis you must learn to work with the Thesis code and not against it. I assure you that it is far better than anything you or I will ever write.

I digress.

There are a few nuances in Thesis that I had to account for when making the Matt Industries Skin. One nuance is that Thesis, for good reason, does not extend the sidebars all the way to the bottom of #content_box unless there is content in the sidebars that fills in the area. That means in order to get the effect of the long sidebars I had to get creative.

First, I decided to position background images to get the sidebar effect. Then I wrote a program that actually makes .gif’s so you can change the color of the sidebars by simply entering a hex value. Genius, I thought!

The hover triangle in the menu was my next challenge because I needed it to also be easily color-changeable. At first I tried using PHP to draw the triangle, but it came out wonky and looked silly. So I made a small, white triangle in Photoshop and put it in the images folder. I then wrote another little program that will change the white to any color I specify.

For the three areas above the content and sidebars, I simply hooked in some divs into place and lined everything up.

The last thing I addressed was the category tags and number of comments displayed for each post on the blog home. I used some simple code to move those around and have them display what I needed. I also changed the way comments look on a single post page, which was nearly 100% a CSS issue.

All in all I think that I made a great skin that is completely color flexible and looks awesome!

Here are some facts about the final product of this skin:

• The area where actual content will go is 450px. For pics to look good in a post, make them 450px wide.
• The sidebars are the same width displayed in Thesis.
• You must change the colors for the sidebars and the triangle in the custom_function.php file, which is now easily accessed through the Custom File Editor.
• For now, many color changes will have to be made through custom.css

Disclaimer:
This design is based on Mike Davidson’s site. I did not copy a single file of his and there are many aspects of his site that I did not emulate. Although the outward appearance of his site and my skin are the same, the underlying code is entirely different. This will be the first in a long series of skins in which I will emulate another site using Thesis.

The release of Thesis 1.6b marks a huge milestone for web design. Thesis 1.6 poses a few new challenges from a developer’s standpoint. It isn’t that Thesis is somehow more difficult, but rather it is simply a little different. The navigation area has had a ton of changes which means that some older tutorials on Thesis Tutor may not work as intended.

So, what is the point here? Well, I have a TON of work to do in order to correct all my nav related tutorials.

How can you help?

Well there are two ways that you can help me, the Thesis Community and yourself.

First, you can donate to Thesis Tutor. To this date, literally thousands of people have visited ThesisTutor.com and only one person has made a donation. This makes further development of Thesis Tutor very difficult. I have many other things that I can do that make money and to date Thesis Tutor and all the help I have given people has lead to a financial net loss. I have made some good friends, but they ain’t exactly gonna help me pay the bills :-/ I recommend a $25 donation to every person that uses this site.

Second, you can send me the fixes. If you discover that something doesn’t work properly in Thesis 1.6 [because of the nav changes] tell me. More important, if you have the answer let me know. Then, instead of making corrections on old videos I can move forward with new, original content.

So, there you have it. I am possibly the most excited person alive in regards to Thesis 1.6 and soon Thesis 2.0 (other than Chris Pearson). I can’t wait to watch Thesis, which has the potential to be the most significant piece of software in web design history, mature. I want to be at the forefront of showing end users and developers how to use Thesis and Wordpress but I need some help.

Categorical Exclusion

Sometimes, there is a benefit to excluding posts of a certain category from the main blog page. For instance, you may want a page that updates frequently. Rather than go in and edit the page each time you want new content, you could simply write a post, mark it in a special category, exclude that category from the main blog [this tutorial], and have posts within the special category appear on the page [another post]. Shoo! That sounds like a lot, but it is actually very simple.

Consider this post part of a series in which I will explain the process of excluding a post from the main blog, then having it appear on another page [instead of page content, that is].

The Code

Alright guys and gals, this is super easy to pull off. Simply copy and paste the code in the box below and change the number to the Category ID for your site. That’s it!

function exclude_cat($query) {
if ( $query->is_home) {
	$query-> set('cat','-13');
	}
return $query;
}
add_filter('pre_get_posts','exclude_cat');

Don’t forget to get your copy of Thesis!

Thesis makes customizing your Twitter feed incredibly easy. Thanks to the Custom.css file, you can make a few simple tweaks to your Twitter widget and your Tweets can look freakin’ sweet.

Installing The Widget

From the Dashboard, go to Plugins→Add New. Search for “Twitter For Wordpress.” The top result should be what you want. Click “Install” in the upper right hand corner of the widget. Then, click “Install Now” in the new window that opens. From the next screen, click “Activate Plugin.”

Now that the plugin is activated, go to Appearance→Widgets. In the Widgets area, drag “Twitter #1″ to the sidebar of your choosing. Also, notice at the bottom of the Widgets page that you can add more Twitter Widgets, if you are that crazy for sharing updates.

Now Comes The Tweaking

In my example, I put the following in my Custom.css:

.custom .twitter-item { margin-bottom: 0em; padding: .5em 0 .5em 0; border-bottom: 1px solid #000; }
	.custom .twitter-item:hover { background: #ccc; }
	.custom .twitter-item a { color: #ffff00; }
	.custom .twitter-item a:hover { color: #ff00ff; }

Don’t Forget To Pick Up Your Copy Of Thesis!

Also, help keep Thesis Tutor alive by donating!

IE7 and IE8 display issue is fixed!

Changed the background position from “-3.2em” to “32px.” Changed width from “3.2em” to “32px.” Simply make those changes and it should work great! Thanks to gtalbot.org, who listed it as number 37 of 171 allegedly fixed bugs in IE 8 [fixed as of 6001.18343]. Sorry I didn’t notice this sooner, guys!

Social Icons Code Update: 8/14/2009

The code for this tutorial has been updated in the text, with a new video coming momentarily. Please make sure that you make the proper adjustments. This now validates like a mofo

Share Yourself In Under Seven Minutes

So, as I sit here and get severely tortured by my wife’s new obsession called “More To Love”, I figured I should share a really awesome way to display some social networking icons, RSS and email just like you see to the left on my site. In less than 7 minutes you will be able to connect your readers/users/subscribers to your Twitter, Facebook, RSS and Email all using Thesis Hooks. Below is the code you need to make it all happen.

Put This In Your Custom_Functions.PHP

function social_iconz() {
?>
<div id="feedback"><a href="http://twitter.com/yourusername" id="twitter">[your name] on Twitter</a><a href="http://facebook.com/yourusername" id="facebook">[your name] on Facebook</a><a href="Your RSS Feed URL" id="rss">[your] RSS Feed</a><a href="mailto:youraddress@whatever.com" id="email">[your] Email</a></div>
<?php
}
add_action('thesis_hook_after_html','social_iconz');

Put This In Your Custom.CSS

.custom #feedback { background: transparent; width: 3.2em; position: fixed; top: 40%; left: 0.25%; }

.custom #feedback a { display: block; text-indent: -9999px; height: 32px; outline: none; }

.custom #feedback #twitter { background: url('http://thesistutor.com/wp-content/uploads/2009/07/twittericon.png') no-repeat 0 -32px; }
	.custom #feedback #twitter:hover { background-position: 0 0; }

.custom #feedback #facebook { background: url('http://thesistutor.com/wp-content/uploads/2009/07/facebookicon.png') no-repeat 0 -32px; }
	.custom #feedback #facebook:hover { background-position: 0 0; }

.custom #feedback #rss { background: url('http://thesistutor.com/wp-content/uploads/2009/07/rssicon.png') no-repeat 0 -32px; }
	.custom #feedback #rss:hover { background-position: 0 0; }

.custom #feedback #email { background: url('http://thesistutor.com/wp-content/uploads/2009/07/emailicon.png') no-repeat 0 -32px; }
	.custom #feedback #email:hover { background-position: 0 0; }

Special Cases

Special cases will be updated as I discover them. Special cases can, from time to time, cause HTML validation errors. The errors are NOT a product of my work, but are issues with the way that sites such as Delicious and StumbleUpon work their magic. If you have a validation concern, please email me.

For Delicious, the CSS principle stays the same but what goes into custom_functions changes.

<a href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;" id="delicious">Bookmark this</a>

For StumbleUpon, the CSS principle stays the same but the custom_functions changes.

<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" id="stumbleupon" target="_blank">Stumble</a>

AND DON’T FORGET!
You are WELCOME to use the images I have made for YOU! In fact, if you want me to make others, I will!

Here are the ones I can make:

• AIM
• Apple
• Bebo
• Blogger
• BrightKite
• Delicious http://thesistutor.com/wp-content/uploads/2009/07/deliciousicon.png
• DesignFloat
• Digg http://thesistutor.com/wp-content/uploads/2009/07/diggicon.png
• Dopplr
• Flickr http://thesistutor.com/wp-content/uploads/2009/07/flickricon.png
• FriendFeed http://thesistutor.com/wp-content/uploads/2009/08/friendfeedicon.png
• Gamespot
• Google
• GoogleTalk
• Last.fm
• LinkedIn http://thesistutor.com/wp-content/uploads/2009/07/linkedinicon.png
• Mixx
• MobileMe
• MySpace http://thesistutor.com/wp-content/uploads/2009/07/myspaceicon.png
• NetVibes
• NewsVine
• OpneID
• Picasa
• Plurk
• Posterous http://thesistutor.com/wp-content/uploads/2009/07/posterousicon.png
• Reddit
• Skype
• StumbleUpon http://thesistutor.com/wp-content/uploads/2009/07/stumbleuponicon.png
• Technorati
• Tumblr
• Viddler http://thesistutor.com/wp-content/uploads/2009/07/viddlericon.png
• Vimeo http://thesistutor.com/wp-content/uploads/2009/07/vimeoicon.png
• Virb
• Windows (though I won’t be happy)
• WordPress
• Yahoo
• YahooBuzz
• Yelp http://thesistutor.com/wp-content/uploads/2009/07/yelpicon.png
• Youtube http://thesistutor.com/wp-content/uploads/2009/07/youtubeicon.png

How To Get Your Icon

In order for me to make an icon you may either leave me a comment on this post or send me an email by clicking the little mail image to the left of the screen.

Don’t Forget To Pick Up Your Copy Of Thesis!

Also, help keep Thesis Tutor alive by donating!