Thesis Tutor http://thesistutor.com Tutorials For The Thesis Wordpress Theme | Video Tutorials For The Thesis Wordpress Theme Fri, 09 Jul 2010 04:50:05 +0000 en hourly 1 http://wordpress.org/?v=abc How to Exclude Posts with a Certain Tag in Thesishttp://thesistutor.com/how-to-exclude-posts-with-a-certain-tag-in-thesis/ http://thesistutor.com/how-to-exclude-posts-with-a-certain-tag-in-thesis/#comments Mon, 28 Jun 2010 13:00:46 +0000 Matt http://thesistutor.com/?p=1047

Many of you have found the post on excluding categories from you blog very helpful. However, what happens when you want to exclude posts with a certain tag from appearing on the blog? Well, thankfully that is an extremely simple operation.

The first thing you have to do is figure what the tag id is. Simply go to Posts->Post Tags and hover over the name of the tag. Look at the bottom of the browser window (in the status bar) and look at the number on the end.

ID location

If you are confused, watch this video.

Next, open up custom_functions.php and enter the following (yes, that is two underscores between tag__not ):

function exclude_tag($query) {
if ( $query->is_home) {
	$query-> set('tag__not_in',array(ID));
	}
return $query;
}
add_filter('pre_get_posts','exclude_tag');

Where I have ID, you should have the number for the tag you want to exclude. For instance, 24 or 1. It is very important that you do not put apostrophes around the number. Also, if you want more than one tag, you would do the following:

function exclude_tag($query) {
if ( $query->is_home) {
	$query-> set('tag__not_in',array(ID, ID, ID, ID));
	}
return $query;
}
add_filter('pre_get_posts','exclude_tag');

That is pretty much all there is to it!

Remember, if you don’t have the Thesis Developer’s License, you are really missing out!

]]> http://thesistutor.com/how-to-exclude-posts-with-a-certain-tag-in-thesis/feed/ 0 Add WordPress 3 Custom Background to Thesishttp://thesistutor.com/add-wordpress-3-custom-background-to-thesis/ http://thesistutor.com/add-wordpress-3-custom-background-to-thesis/#comments Fri, 25 Jun 2010 13:30:36 +0000 Matt http://thesistutor.com/?p=1064

Did you know that Thesis has supported adding custom background colors (but not images) to the <body> for a few versions now? Well, it has :D WordPress has decided to catch up and add in a CSS background generator. Basically, WordPress adds <style> body { background: blah blah; } </style> to your <head>.

Remember, this is completely unnecessary if you just want a background color. Thesis already provides this functionality. This tutorial is aimed towards the very lazy user [ahem...] who wants to put a background image on their <body>.

Here’s what you do: open custom_functions.php and enter the following:

add_custom_background();

Embarrassingly simple ;)

Get Thesis now!

]]> http://thesistutor.com/add-wordpress-3-custom-background-to-thesis/feed/ 0 How to Register Multiple WordPress Menu Locations in Thesishttp://thesistutor.com/how-to-register-multiple-wordpress-menu-locations-in-thesis/ http://thesistutor.com/how-to-register-multiple-wordpress-menu-locations-in-thesis/#comments Thu, 24 Jun 2010 13:00:11 +0000 Matt http://thesistutor.com/?p=1036 'Primary Menu' )); } function wordpress_menu_support() { if (function_exists('wp_nav_menu')) wp_nav_menu('theme_location=primary&fallback_cb=thesis_nav_menu'); else thesis_nav_menu(); [...]]]>

Before you can start this tutorial, you’ll need to follow the tutorial on how to add the WordPress 3 menu to Thesis.

Once you finish that tutorial, you will have the following in your custom_functions.php:

add_action('init','register_menu');
remove_action('thesis_hook_before_header','thesis_nav_menu');
add_action('thesis_hook_before_header','wordpress_menu_support');

function register_menu() {
register_nav_menus(
    array(
        'primary'=>'Primary Menu'
    ));
}

function wordpress_menu_support() {
if (function_exists('wp_nav_menu'))
	wp_nav_menu('theme_location=primary&fallback_cb=thesis_nav_menu');
else
	thesis_nav_menu();
}

Now we need to do two things:

  1. Register the menu area.
  2. Hook the menu area into place. In this example I’ll be putting a menu above the footer.

To accomplish this, we will add the following to our code from above:

add_action('init','register_menu');
remove_action('thesis_hook_before_header','thesis_nav_menu');
add_action('thesis_hook_before_header','wordpress_menu_support');
add_action('thesis_hook_before_footer','footer_menu');

function register_menu() {
register_nav_menus(
    array(
        'primary'=>'Primary Menu',
        'footer'=>'Footer Menu'
    ));
}

function footer_menu() {
wp_nav_menu('theme_location=footer');
}

function wordpress_menu_support() {
if (function_exists('wp_nav_menu'))
	wp_nav_menu('theme_location=primary&fallback_cb=thesis_nav_menu');
else
	thesis_nav_menu();
}

For the register part, I simply added a comma then 'footer'=>'Footer Menu'. The first part, 'footer' is the menu slug. The second part, 'Footer Menu' is what will be displayed in the WordPress admin. So, if you were going to add a menu above the content, you may do something like this 'content-menu'=>'Content Menu'.

The second thing I did was add a function that contains my menu.

function footer_menu() {
wp_nav_menu('theme_location=footer');
}

If I wanted to add the menu above the content, I would do something like this:

function content_menu() {
wp_nav_menu('theme_location=content-menu');
}

Lastly, I hooked my function into place with

add_action('thesis_hook_before_footer','footer_menu');

If I were putting a menu area above the content, I may do something like this:

add_action('thesis_hook_before_content','content_menu');
]]> http://thesistutor.com/how-to-register-multiple-wordpress-menu-locations-in-thesis/feed/ 2 How To Add WordPress 3.0 Menu To Thesishttp://thesistutor.com/how-to-add-wordpress-3-menu-to-thesis/ http://thesistutor.com/how-to-add-wordpress-3-menu-to-thesis/#comments Tue, 22 Jun 2010 20:25:55 +0000 Matt http://thesistutor.com/?p=1023

I have seen a few ways to add WordPress 3.0 menu support to Thesis and they do “work”, but they really aren’t optimal. So, I have written a fix for this issue until Thesis can get updated.

First, let’s identify exactly what we need to get accomplished. This tutorial will only cover replacing the current navigation menu, called by the function thesis_nav_menu();, if and only if a replacement has been assigned by the WordPress functionality. It is important to remember that you lose some, but not all, of the CSS native to the Thesis navigation.

Let’s get started by opening custom_functions.php and entering the following function:

function register_menu() {
register_nav_menus(
    array(
        'primary'=> 'Primary Menu'
    ));
}

Basically, this allows us to register the area where we want a navigation bar to appear. Since we are using an array, this will allow us to go back at any point and register another area.

Next, we need set up the following 3 scenarios:

  1. No WordPress menu is detected, so the Thesis menu is shown.
  2. At least one WordPress menu exists, but none are selected for the nav bar, so the Thesis navigation is shown.
  3. At least one WordPress menu exists and one is selected for the area.

It is important to remember that this next function must be repeated to register other areas. Unlike register_nav_menus();, each area where you want a navigation bar to appear must have its own code to register. For the primary navigation, we will use the following code:

function wordpress_menu_support() {
if (function_exists('wp_nav_menu'))
	wp_nav_menu('theme_location=primary&fallback_cb=thesis_nav_menu');
else
	thesis_nav_menu();
}

Now, let’s register the menus and areas and take the default Thesis nav menu out.

add_action( 'init' , 'register_menu' );
remove_action('thesis_hook_before_header','thesis_nav_menu');
add_action('thesis_hook_before_header','wordpress_menu_support');

Now, Let me show you what all the code looks like together:

add_action('init','register_menu');
remove_action('thesis_hook_before_header','thesis_nav_menu');
add_action('thesis_hook_before_header','wordpress_menu_support');

function register_menu() {
register_nav_menus(
    array(
        'primary'=>'Primary Menu'
    ));
}

function wordpress_menu_support() {
if (function_exists('wp_nav_menu'))
	wp_nav_menu('theme_location=primary&fallback_cb=thesis_nav_menu');
else
	thesis_nav_menu();
}

Remember that the WordPress menu system is not as clean and robust as Thesis, so you will have to make some CSS changes. Some of the things that the WordPress menu does not contain are the home, current and current-parent classes. Why? Because Thesis‘ nav menu has a specific purpose and the WordPress menu system is for generic menu creation.

]]> http://thesistutor.com/how-to-add-wordpress-3-menu-to-thesis/feed/ 13 How To Add A Filter To The Homepage H1http://thesistutor.com/how-to-add-a-filter-to-the-homepage-h1/ http://thesistutor.com/how-to-add-a-filter-to-the-homepage-h1/#comments Thu, 22 Apr 2010 05:18:53 +0000 Matt http://thesistutor.com/?p=1002

In a recent job I was doing, I needed to change the <h1> tag on the homepage of my client’s site. In Thesis, the homepage <h1> is set as the tagline, and I not only needed to change that, but have a simple solution for all my sites from here on out.

My setup was as follows: I had a static homepage that I had done a bunch of custom work on.

Editing Core Files

Go to the thesis_1x folder. Click on lib then functions, then open document.php.

  • Go to line 95, which says the following:
    echo "\t\t<h1 id=\"tagline\">" . get_bloginfo('description') . "</h1>\n";
else
echo "\t\t<p id=\"tagline\">" . get_bloginfo('description') . "</p>\n";
  • Replace lines 95-97 with this:
    echo "\t\t<h1 id=\"tagline\">" . apply_filters('homepage_h1', get_bloginfo('description')) . "</h1>\n";
else
echo "\t\t<p id=\"tagline\">" . apply_filters('homepage_h1', get_bloginfo('description')) . "</p>\n";

Using the H1 Filter

To make use of this new filter, simply add the following to custom_functions.php:

function h1_replace() {
return "New H1 Text Goes Here";
}
add_filter('homepage_h1','h1_replace');

Be sure to change the text to what you want the new H1 to be.

Thesis is just that easy! :D

]]> http://thesistutor.com/how-to-add-a-filter-to-the-homepage-h1/feed/ 8 How To Make A Rotating Header Image In Thesishttp://thesistutor.com/how-to-make-a-rotating-header-image-in-thesis/ http://thesistutor.com/how-to-make-a-rotating-header-image-in-thesis/#comments Fri, 05 Mar 2010 23:36:46 +0000 Matt http://thesistutor.com/?p=942

When Chris Pearson, the creator of Thesis, recently redesigned Pearsonified.com on Thesis, he did something amazingly cool: he put rotating images in his header area.

Well, I was so inspired by his design that I wanted to figure out how he did it. It turns out that putting rotating images in your header is extremely easy.

On the backside.

Well, let’s get started. From the WordPress Dashboard, go to Thesis Options -> Design Options -> Feature Box.

In this tutorial, I am setting the Feature Box to “Full Width Above Content And Sidebars.” It is completely up to you whether you chose to show the rotator on every page or just the home page.

The Code

Let’s start with the Custom.CSS. I just want to warn you right now: THIS IS SUPER EASY!

Copy and paste the following into your Custom.CSS:

.custom #feature_box { padding: 0; border: none; }
	.custom #feature_box img { display: block; }

Wow! That’s it, folks. Ok, now let’s knock out the Custom_Functions.PHP part of this. Again, don’t be shocked when you see how unbelievably simple this is.

function header_rotator() {
echo thesis_image_rotator();
}
add_action('thesis_hook_feature_box','header_rotator');

Seriously, that is all. Unreal how simple that is, isn’t it?

Purchase or Upgrade to the Thesis Developer’s Option Today!

Add an Anchor Tag

Let’s say that you want to add an anchor tag, <a>, around the rotating image. Simply put this in your custom_functions.php file instead of what’s above:

function header_rotator() {
?><a href="http://addressgoeshere.com"><?php
echo thesis_image_rotator();
?></a><?php
}
add_action('thesis_hook_feature_box','header_rotator');

Just add the address you want to link to, and call it a day ;)

What about the images?

To get the images to line up perfectly you need to know the width of your site. If you use the Firebug plugin for Firefox or Google Chrome, you’ll have no problem finding out the width. Just remember that if you have page padding (as in the <div class=”page”>), you need to exclude that from the width calculation.

Also, I recommend making the images the same height so that the layout doesn’t shift on refreshes.

Oh, yeah. Don’t forget to Upgrade to the Developer Option! You will never regret it!

]]> http://thesistutor.com/how-to-make-a-rotating-header-image-in-thesis/feed/ 37 Mindlessly Simple Web Hostinghttp://thesistutor.com/mindlessly-simple-web-hosting/ http://thesistutor.com/mindlessly-simple-web-hosting/#comments Mon, 01 Mar 2010 20:26:11 +0000 Matt http://thesistutor.com/?p=906

Web hosting confused the hell out of me when I first started working on the web. What is hosting? What kinds of options did I have? What’s the deal with their advertised prices? What service does Thesis Tutor recommend? These are questions that I am going to stamp out once and for all. With this post, I bestow unto you the knowledge of website hosting.

What is Web Hosting?

Web hosting is a simple concept: it is a virtual storage unit. That’s it. No mystery, no surprises. It stores and holds your website content, pictures, videos, comments [ahem], etc on a server. The only difference between web hosting and real storage units is that much of the contents of your server are available for public viewing.

Now, when I first started, I wanted to know why I couldn’t just host a website at my home computer. I thought I had a good internet connection and enough storage. So why not?

The first problem is your ISP. They simply cannot allow residential customers to use the amount of bandwidth required by website hosting. More simply, it’s just too slow.

Second is security. Chances are, if you are reading this you don’t know jack about security. I bet simple PHP encoding would totally stump you. Don’t worry though, you are not alone.

Third is management. Servers require constant attention. There are always patches and upgrades and this-es and thats. You don’t have time to fool with that junk, trust me.

Head over to MidPhase and pick up hosting. Or, read on!

Hosting Options

There are essentially three primary hosting options:

  1. Shared Hosting:

    Shared hosting is exactly what it says: you share a server with multiple other users. This is the simplest form of hosting and is absolutely the cheapest route.

    There are certainly some drawbacks, however. If one of the sites you share resources with suddenly gets a million visitors, your site will slow to a crawl. Also, advanced modifications to ports are hard/impossible to make. But, if you’re a newbie, you won’t be doing that anyway ;)

  2. VPS: Virtual Private Server

    VPS is the obvious way of the future. Basically, VPS divides a server into distinct sections that act as their own server. It is many sub-servers within a server.

    Lemme break it down for ya:

    Imagine an apartment building where everyone shared the same air conditioning unit. This would be like shared hosting. One greedy neighbor decides to turn his house into an icebox and sets his thermostat to 33°F. Suddenly, everyone else in the building is having problems because greedy, creepy icebox guy is overloading the A/C. Such is the failure of shared hosting.

    Now, imagine the same apartment building. Instead of one huge A/C unit, each apartment has it’s own. Suddenly, creepy ice man’s insane usage has little to no effect on your comfort. You win. heh.

    The one drawback with VPS configurations is that they require a slightly higher level of technical knowledge. So, if you are completely ignorant, this may not be for you.

  3. Dedicated and Managed Hosting

    Quite simply, dedicated hosting is your own server that you manage yourself. Managed hosting is your own server that the hosting company manages for you. Both options are considerably more expensive that either shared or VPS and should only be used by people who have fairly hefty traffic and a relatively high level of expertise.

Pricing

What if I told you that you could have a brand new, 52 inch Samsung LCD Series 6 HDTV for only $55 per month?! Yeah, you totally can. Except for instead of $55 per month you pay me $2000 right now!

Wtf kind of logic is that?

This is exactly how hosting companies advertise.

I’m tired of that junk advertising method so I’m going to lay it out straight.

Here are the rates for MidPhase shared hosting and VPS.net vps services, the companies (both owned by UK2) I exclusively love. I’ll tell you more about why I have a monogamous hosting relationship after I tell you the prices.

For a full list of all the features for each class, click here.

Shared Hosting Prices

  • Basic Plan – for ONE website.

    • 24 Months – $70.80
    • 12 Months – $71.40
    • 3 Months – $26.85 + $49.00 Set Up Fee

  • Unlimited Plan – Unlimited Sites and Databases

    • 24 Months – $166.80
    • 12 Months – $107.40
    • 3 Months – $10.95 + $49.00 Set Up Fee

  • Business Plan – Dedicated Secure Certificate & Static Ip [among many]

    • 24 Months – $214.80
    • 12 Months – $143.40
    • 3 Months – $38.85 + $49.00 Set Up Fee

Dude! Get over to MidPhase and pick up hosting. You’ll love it!

VPS Hosting Prices

VPS pricing is based on ‘nodes’ which are basically resource measures. The more resources you want, the more it costs. For small sites the nodes start at $20/month. For extremely large sites, prices will hit $234/month. And yes, they really charge by the month!

Most regular old sites will only need one or two nodes. But wait! What happens if you suddenly start getting massive traffic one day? Easy answer: pay for one day’s worth of extra space. Done.

Say what?

VPS allows for one day expansion nodes. You can add one node for $1/day or 18 for $18/day. Done, done and done.

Why I use MidPhase and am Switching to VPS.net

Right now, I run a shared server on the unlimited plan. Why? Honestly, I just haven’t gotten around to switching to VPS’ cloud hosted servers. I should, but I have sites to build and content to make :P By the end of the year I hope to have it all switched over, however.

But, why do I like MidPhase?

There are two reasons, really. The first is that they are just easy to use. When you sign up you get all the information within seconds and you can start adding domains and databases right away. I love that.

Second, they have great customer support. You can always chat with a live rep or call them if you are feeling particularly frisky. Every hosting problem I have had [even ones only kind of related to hosting like an .htaccess question I had] have been answered by their customer support. Once, in my early days, I was too stupid to go into my server and make a change in WordPress. The MidPhase customer support did it for me.

Am I saying MidPhase will totally hold you hand and wipe your tush? No. But they are friendly as hell and willing to help. What is that worth to you? To me it is worth infinity dollars. No, seriously!

I hope that this little article will help you find the right hosting to fit your needs. Good luck!

You know it ALL now! Secure your hosting today!

]]> http://thesistutor.com/mindlessly-simple-web-hosting/feed/ 0 The Comprehensive List of Thesis Hooks and Thesis Filtershttp://thesistutor.com/comprehensive-list-of-thesis-hooks-and-thesis-filters/ http://thesistutor.com/comprehensive-list-of-thesis-hooks-and-thesis-filters/#comments Mon, 01 Mar 2010 15:35:11 +0000 Matt http://thesistutor.com/?p=859

When it comes to being a Thesis developer, there is one thing I have been unable to live without: Thesis Hooks. Good ol’ Chris Pearson has hooked us devs up with…well, a ton of hooks. The Thesis hooks list below tells you all 54 hooks in the order they appear in hooks.php. Before the list of hooks is the filters list with the corresponding file name.

Thesis Filters List

  1. Comments.PHP

    • thesis_comments_link
    • thesis_comments_intro
    • thesis_avatar
    • thesis_comments_navigation

  2. Compatibility.PHP

    • thesis_custom_field_keys

  3. Content.PHP

    • thesis_content_classes
    • thesis_image_caption_shortcode

  4. Document.PHP

    • thesis_body_classes

  5. Widgets.PHP

    • thesis_search_form_value

Thesis Hooks List

  1. thesis_hook_before_html - right after body.custom
  2. thesis_hook_after_html - after #container and before /body
  3. thesis_hook_before_header - between .menu and #header
  4. thesis_hook_after_header - between #header and #content_box, before thesis_hook_before_content_box
  5. thesis_hook_header - within #header, after #tagline, after thesis_hook_after_title
  6. thesis_hook_before_title - within #header before #logo
  7. thesis_hook_after_title - within #header, after #tagline, before thesis_hook_header
  8. thesis_hook_first_nav_item - right after .menu, before the first li
  9. thesis_hook_last_nav_item - within .menu, right after last li
  10. thesis_hook_before_content_box - between #header and #content_box, after thesis_hook_after_header
  11. thesis_hook_after_content_box - between #content_box and #footer
  12. thesis_hook_content_box_top -
  13. thesis_hook_content_box_bottom -
  14. thesis_hook_before_content - right after #content
  15. thesis_hook_after_content - at the end of #content, after .prev_next
  16. thesis_hook_before_content_area - before #content_area, only in full width framework
  17. thesis_hook_after_content_area - after #content_area, only in full width framework
  18. thesis_hook_feature_box - within #feature_box, either the first item within #content, between #header and #content_box, or between .menu and #header
  19. thesis_hook_before_post_box - after #content, before first post
  20. thesis_hook_after_post_box - within each .post, at the very end
  21. thesis_hook_before_teasers_box - within and at the beginning of .teasers_box
  22. thesis_hook_after_teasers_box - after each .teasers_box div
  23. thesis_hook_before_post - within and at the very beginning of .format_text
  24. thesis_hook_after_post - at the end of .format_text, after .to_comments
  25. thesis_hook_before_teaser_box - before each .teaser
  26. thesis_hook_after_teaser_box - after each .teaser [this one is a little tricky]
  27. thesis_hook_before_teaser - first thing within .format_teaser
  28. thesis_hook_after_teaser - last thing within .format_teaser
  29. thesis_hook_before_headline - first thing within headline_area
  30. thesis_hook_after_headline - right after .entry-title
  31. thesis_hook_before_teaser_headline - before each .teaser's .entry-title
  32. thesis_hook_after_teaser_headline - right below each .teaser's .entry-title
  33. thesis_hook_byline_item - right after .headline_meta
  34. thesis_hook_before_comment_meta - first thing within each dt.comment
  35. thesis_hook_after_comment_meta - last thing within each dt.comment
  36. thesis_hook_after_comment - last thing within each dd.comment .comment-body-n
  37. thesis_hook_after_comments - right after dl#comment_list
  38. thesis_hook_comment_form_top -
  39. thesis_hook_comment_field - right after #comment_form p
  40. thesis_hook_after_comment_box -
  41. thesis_hook_comment_form_bottom -
  42. thesis_hook_comment_form - right after .comment_box, before the submit button
  43. thesis_hook_archives_template - Used to customize the appearance of the Archives Template (archives.php). This hook calls the thesis_archives_template function by default. //from DIYthemes
  44. thesis_hook_custom_template - your very own custom page custom template replacing #content_box
  45. thesis_hook_faux_admin - within div#content_box (and also div#column_wrap if a sidebars-first three-column layout is in use) //from DIYthemes
  46. thesis_hook_archive_info - Above the first post only on archive views. //from DIYthemes
  47. thesis_hook_404_title - within a 404 page's .headline_meta h1
  48. thesis_hook_404_content - last thing within a 404 page's .format_text
  49. thesis_hook_before_sidebars - first thing within #sidebars
  50. thesis_hook_after_sidebars - last thing within #sidebars
  51. thesis_hook_multimedia_box - contents of #multimedia_box #custom_box
  52. thesis_hook_after_multimedia_box - after #multimedia_box, before #sidebar_1 and/or #sidebar_2
  53. thesis_hook_before_sidebar_1 - first thing within #sidebar_1 .sidebar_list, before the first li
  54. thesis_hook_after_sidebar_1 - last thing within #sidebar_1 .sidebar_list, after the last li
  55. thesis_hook_before_sidebar_2 - first thing within #sidebar_2 .sidebar_list, before the first li
  56. thesis_hook_after_sidebar_2 - last thing within #sidebar_2 .sidebar_list, after the last li
  57. thesis_hook_before_footer - right before #footer and after #content_box
  58. thesis_hook_after_footer - after #footer, but still within #page
  59. thesis_hook_footer - between attribution link and WP Admin link in #footer

Well, there you have it folks. A list of every single Thesis Hook available as of Thesis 1.6.

If you are interested in developing sites on Thesis, be sure to upgrade to the developer's option. If you don't have Thesis, you had better pick it up now!

]]> http://thesistutor.com/comprehensive-list-of-thesis-hooks-and-thesis-filters/feed/ 5 How To Make a jQuery Image Slideshow in Thesishttp://thesistutor.com/how-to-make-a-jquery-image-slideshow-in-thesis/ http://thesistutor.com/how-to-make-a-jquery-image-slideshow-in-thesis/#comments Mon, 15 Feb 2010 18:16:27 +0000 Matt http://thesistutor.com/?p=750

Updated! 03/23/10

Well I can’t spell apparently. I had misspelled ‘slideshow’ in the code below. The issue is fixed and my wife is now administering me weekly spelling tests. Thanks, Scott and Willie.

Slideshow Made Simple

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 slideshow() {
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!

]]> http://thesistutor.com/how-to-make-a-jquery-image-slideshow-in-thesis/feed/ 68 How to Upgrade from Thesis 1.5.1 to Thesis 1.6http://thesistutor.com/how-to-upgrade-from-thesis-1-5-1-to-thesis-1-6/ http://thesistutor.com/how-to-upgrade-from-thesis-1-5-1-to-thesis-1-6/#comments Mon, 26 Oct 2009 18:35:25 +0000 Matt http://thesistutor.com/?p=693

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!

]]> http://thesistutor.com/how-to-upgrade-from-thesis-1-5-1-to-thesis-1-6/feed/ 3