The Masonry effect has become popular among different web sites to achieve a unique layout. Using the jQuery Masonry code, I’ll show you how to get this effect with Thesis teasers.

What is jQuery Masonry?

Taken straight from the site:

Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

To give you an even better idea, check out these sites:

• The Inspiration Stream | Veerle’s blog 3.0
• Chromeography
• Scaffold Theme

Download the Code

First, you’ll need to download the jQuery code and move it to your site.

Download it here and move it to a new folder in your Thesis custom folder, called scripts. Make sure the file has the .js extension and not a .txt or .htm extension.

Use Teasers and Enable jQuery

In order for this to work you’ll  have to disable featured posts and use teasers. Go to your WP Dashboard and to your Thesis Design Options. Find Featured & Teasers and change the value to 0.

We’ll also have to enable jQuery for the homepage, so under that option find JavaScript and enable jQuery library.

Design Options

You’ll probably also want to make a few other changes in Thesis Options (if you haven’t already have it set this way). Under Site Layout, change the HTML Framework to Full-width framework and drop down Body (and Content Area) and uncheck Show interior layout borders.

Write the Function

Now you’ll need to open up custom_functions.php found in your custom folder and add the code below somewhere in that file:

add_action( 'thesis_hook_after_html', 'scripts' );
function scripts() { ?>
  <script type="text/javascript" src="<?php echo get_bloginfo(template_directory); ?>/custom/scripts/jquery.masonry.min.js"></script>
  <script type="text/javascript">
    $('#content').masonry({
      singleMode: true,
      itemSelector: '.teaser'
    });
  </script>
<?php }

At this point the code is in place and your teasers will be Masonry-ed, however they probably don’t look the best so we’ll look at styling them.

Style the Teasers

Finally, open up your custom.css file, again found in the custom folder. Add the code below to get a better set of teasers:

.prev_next { position: absolute; bottom: -25px; width: 100%; }
#content { padding-bottom: 30px; position: relative; }
.teaser { padding: 5px; margin: 6px; background: #eee; }

Click above for a larger shot.

What this CSS code does is simply adds some spacing background around each teaser and fixes the previous/next post navigation. Now you should see the final product, similar to the attached screenshot.

It doesn’t end here though- the Masonry plugin is very powerful and can do much, much more then just stylishly line up your teasers. Check out the documents and demos to see the full effect of Masonry and try something new with your Thesis site.

Throughout my time with WordPress, I have not found a good calendar/events plugin, but Events Calendar Pro (available here) changes that. It’s been the only solution I’ve found that covered everything you’d expect in a full calendar and events list. In the plugin creator’s own words:

The Events Calendar Premium plugin for WordPress enables you to rapidly create and manage events using the post editor. Features include Google Maps integration as well as default templates such as a calendar grid and event list for streamlined one click installation. Check out the full screencast here.

I purchased and rolled out the plugin onto a new site only to find out that Events Calendar Pro doesn’t work well with Thesis. However, Events Calendar Pro provides an easy way to template the plugin without touching any core files. So after some hacking and messing around, I’ve came up with a working template for Thesis.

Download the fix below and move the downloaded folder into your installed Thesis folder. Obviously you will need to already have Events Calendar Pro installed in order for the template files to do anything.

Note: I’ve tested the files with both Thesis 1.7 and Thesis 1.8b2 so far. Let me know if anyone sees any issues.

If you haven’t heard, Wordpress 3.0 dropped the other day with a bunch of new features.

Although there’s no news on a Thesis update, Thesis 1.7 seems to work fine with WordPress 3.0 but unfortunately doesn’t cash in on any of the new features. I’ve decided to tackle a few of those features to make them available right away:

• Custom Background Option
• WP 3.0 Navigation Menus
• Custom Header Image

Use the WordPress 3.0 Custom Background Option with Thesis

Let’s start small. Open up your custom_functions.php file (found in the custom folder) and add the following code at the end of the file:

add_custom_background();

Now if you pop in your Dashboard, drop down the Appearance tab you should see a Background option where you can set a background colour or image. I’ve heard plenty of people looking for this sort of customization so hopefully it helps!

Use WordPress 3.0 Navigation Menus with the Thesis Theme

I’ve seen a few tutorials on this already out in the wild- however they don’t provide full functionality like I had expected, so I worked in my own. Again, open up custom_functions.php and paste this code there:

add_theme_support('menus');
register_nav_menu('primary', 'Primary Navigation');
remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_before_header', 'new_menu');
function new_menu() {
   	wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) );
}

This will allow you to use the Menus option found under the Appearance tab in your Dashboard. Also (and this is where other solutions fell flat) you can create different sets of menus and switch them out as you please. Check the screen shot to see what I mean. Furthermore, you can see how you can use the code above to create different menus in different areas (say a menu in the footer area).

Use WordPress 3.0 Custom Header Images with Thesis

I’ll finish this round of WP 3.0 tricks off with a long set of code that gives functionality to change out the header background image for Thesis. This one is a bit “hacky” but I’ve tested it out with a bunch of different options and it seems to work fine.

So like usual, fire up your code editor and open custom_functions.php. Add this set of code to it:

global $thesis_design;
$layout = $thesis_design->layout;
$width_one = $layout['widths']['content'];
$width_two = $layout['widths']['sidebar_1'];
$width_three = $layout['widths']['sidebar_2'];

if ($layout['columns'] == 3) { $width_full = $width_one+$width_two+$width_three+79; }
elseif ($layout['columns'] == 2) { $width_full = $width_one+$width_two+57; }
elseif ($layout['columns'] == 1) { $width_full = $width_one+22; }

define( 'NO_HEADER_TEXT', true );
define('HEADER_IMAGE_WIDTH', $width_full); // Width will change automatically (depending on your Thesis options)
define('HEADER_IMAGE_HEIGHT', 110); // If you need a taller header image change this value

function header_style() { // Gets included in the site header
	?><style type="text/css">
    	#header { background: url(<?php header_image(); ?>); }
    </style>
<?php }

function admin_header_style() { // Gets included in the admin header
    ?><style type="text/css">
        #headimg { width: <?php echo HEADER_IMAGE_WIDTH; ?>px; height: <?php echo HEADER_IMAGE_HEIGHT; ?>px; }
    </style>
<?php }

add_custom_image_header('header_style', 'admin_header_style');

What this does is allow you to set a background for the Header element (which contains your Site Heading and Tagline). You can use the WP 3.0 crop tool as well. Check out the screenshot to see a (small) header that was easily uploaded and changed with this procedure.

Source File

I’ve packaged all three bits of code and have it available for download here. If you copy all of these functions over you should see three new options when you drop down your Appearance menu in your WP dashboard. If you don’t, make sure you have the latest version of both Thesis and WordPress and that you copied everything over correctly.

Let me know if you find any issues or anything wrong with my code!

Bonus: Even More WP 3.0 and Thesis Tutorials

• Looking to work in new WP 3.0 Custom Post Types and Taxonomies? Check out Kristarella’s post here.
• Problem with the custom file editor when updating to WordPress 3.0? Find the fix here.

Thesis comes packed with plenty of configuration options, but I’m going to show you how to create a fluid layout for your site by only editing custom.css.

Not sure what a fluid layout even is? Basically it’s just means the site width is determined by the size of the users browser window. If you resize, the content resizes as well. W3C’s site is a good example of a fluid/liquid layout. Google “Fluid Layout” and you’ll find plenty of info on it!

Making this change is actually pretty easy, but it should also be noted that you’ll lose the functionality inside Thesis to define column sizes. Also, with the code provided you can only use the 2 columns option (without making extra changes on your own).

Anyways, lets get to it- open up the custom.css file found inside the Thesis custom folder and add the code below:

#container { width: 100%; }
	#content_box { background-position: 70% 0; }
		#content { width: 70%; }
			.teasers_box { width: auto; }
				.teaser { width: 48%; }
		#sidebars { width: 30%; }
			#image_box { text-align: center; overflow: hidden; }
				#image_box img { display: inline-block; border: none; background: none; }

That’s going to give you your fluid design with no other steps and you should have something that looks like the site in the image below:

Of course you can take things into your own hands and edit the different % values to come up with different sidebar / content ratios (make sure it equals 100%). If you’re using interior lines (the default) make sure the background the #content_box and #content values match up. If you want to use your sidebar on the left column, have the #content_box value equal your #sidebars value.

Need more padding on the sides? Thesis has an option found in Design Options called Outer Page Padding, which you can tweak to your fancy.

I didn’t do extensive testing, but from the looks of things it works in IE6+ and all major browsers. Let me know any different.

Leave your questions, comments, and issues after the break!

I’m still kicking it in the Thesis world. For those of you who still don’t know what Thesis is, check it out here.

Anyways, as I’m sure most of you do know, Thesis is a leading WordPress framework that provides SEO, stability, and plenty of ways to customize your site. The customization scene has been picking up lately, with hundreds of great examples. Seeing all of those great customizations and skins that people are hammering out, I figured I’d try to make things easier for some people by providing a sort of starter pack to the public.

The files included in the pack are exactly what I use when I start a new site or skin. Included in the download are:

• Default Thesis PSD for a 2 column (600×300) site. Includes extra layers to visualize the blog page, normal page, comments and dropdowns. Also has default folders to keep things organized.

• Custom files, custom.css and custom-functions.php already commented out. Custom.css also includes some default styling for forms (as I’m not a fan of the default styling).

• Two import files that gives you a de-lined, full-width page with my preferred options (just try it out). NOTE: You need the Thesis import/export plugin in order to use these two files.

For those of you who don’t want to spend any time customizing stuff, why don’t you download my new Thesis skin: ThesisPlay. It’s awesome- in fact, it’s the skin running this very site!

Almost anything that can be done with a normal theme can, in almost the same way, be done with Thesis. The main custom functions file (custom_functions.php) is just an extension of Functions.php, the main function file for WordPress themes. So is it possible to add built in widgets with a Thesis skin or customization? Of course!

Note: For Thesis 1.5+ / WordPress 2.8.x

Double Note: If you came here looking how to build a widget into a non-thesis wordpress theme, almost the same tutorial applies. The only difference is you would contain everything in Functions.php.

In this example we’re going to build a simple rss/twitter widget, which will allow the user to input a twitter username and RSS link and have it show up wherever they place said widget.

To begin

First, open up custom_functions.php (found in your thesis install folder/custom). Anywhere after the code already in the file, paste the following:

class my_subscribe_widget extends WP_Widget {

	function my_subscribe_widget() {
		// Construct our widget
	}

	function widget($args, $instance) {
		// Our front end
	}

	function update($new_instance, $old_instance) {
		// Updates our widget
	}

	function form($instance) {
		// Our back end
	}
}

register_widget('my_subscribe_widget');

<?php
class my_subscribe_widget extends WP_Widget {
 function my_subscribe_widget() {
 $widget_ops = array('classname' => 'widget_bu_subscribe', 'description' => 'Add an RSS and twitter link' );
 $this->WP_Widget('my_subscribe_widget', 'RSS/Twitter Links', $widget_ops);
 }

 function widget($args, $instance) {
 extract($args, EXTR_SKIP);

 echo $before_widget;
 $title = empty($instance['title']) ? '&nbsp;' : apply_filters('widget_title', $instance['title']);
 $rss_link = empty($instance['rss_link']) ? '&nbsp;' : apply_filters('widget_rss_link', $instance['rss_link']);
 $twitter_link = empty($instance['twitter_link']) ? '&nbsp;' : apply_filters('widget_twitter_link', $instance['twitter_link']);

 if ( !empty( $title ) ) { echo $before_title . $title . $after_title; }; ?>
 <ul>
 <li><a title="Subscribe to the RSS Feed" href="<?php echo $rss_link; ?>">Subscribe to the RSS Feed</a></li>
 <li><a title="Follow on Twitter" href="http://www.twitter.com/<?php echo $twitter_link; ?>">Follow us on Twitter</a></li>
 </ul>

 <?php echo $after_widget;
 }

 function update($new_instance, $old_instance) {
 $instance = $old_instance;
 $instance['title'] = strip_tags($new_instance['title']);
 $instance['rss_link'] = strip_tags($new_instance['rss_link']);
 $instance['twitter_link'] = strip_tags($new_instance['twitter_link']);
 return $instance;
 }

 function form($instance) {
 $rss_default = get_bloginfo('rss2_url');
 $instance = wp_parse_args( (array) $instance, array( 'title' => '', 'rss_link' => $rss_default, 'twitter_link' => '') );
 $title = strip_tags($instance['title']);
 $rss_link = strip_tags($instance['rss_link']);
 $twitter_link = strip_tags($instance['twitter_link']);
?>
<p><label for="<?php echo $this->get_field_id('title'); ?>">Title: <input id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" /></label></p>
<p><label for="<?php echo $this->get_field_id('rss_link'); ?>">RSS Feed Link: <input id="<?php echo $this->get_field_id('rss_link'); ?>" name="<?php echo $this->get_field_name('rss_link'); ?>" type="text" value="<?php echo attribute_escape($rss_link); ?>" /></label></p>
<p><label for="<?php echo $this->get_field_id('twitter_link'); ?>">Twitter Username: <input id="<?php echo $this->get_field_id('twitter_link'); ?>" name="<?php echo $this->get_field_name('twitter_link'); ?>" type="text" value="<?php echo attribute_escape($twitter_link); ?>" /></label></p>

<?php
 }
}

register_widget('my_subscribe_widget');

 function my_subscribe_widget() {
 $widget_ops = array('classname' => 'widget_bu_subscribe', 'description' => 'Add an RSS and twitter link' );
 $this->WP_Widget('my_subscribe_widget', 'RSS/Twitter Links', $widget_ops);
 }

function widget($args, $instance) {
 extract($args, EXTR_SKIP);

 echo $before_widget;
 $title = empty($instance['title']) ? ' ' : apply_filters('widget_title', $instance['title']);
 $rss_link = empty($instance['rss_link']) ? ' ' : apply_filters('widget_rss_link', $instance['rss_link']);
 $twitter_link = empty($instance['twitter_link']) ? ' ' : apply_filters('widget_twitter_link', $instance['twitter_link']);

 if ( !empty( $title ) ) { echo $before_title . $title . $after_title; }; ?>
 <ul>
 <li><a title="Subscribe to the RSS Feed" href="<?php echo $rss_link; ?>">Subscribe to the RSS Feed</a></li>
 <li><a title="Follow on Twitter" href="http://www.twitter.com/<?php echo $twitter_link; ?>">Follow us on Twitter</a></li>
 </ul>

 <?php echo $after_widget;
 }

function update($new_instance, $old_instance) {
 $instance = $old_instance;
 $instance['title'] = strip_tags($new_instance['title']);
 $instance['rss_link'] = strip_tags($new_instance['rss_link']);
 $instance['twitter_link'] = strip_tags($new_instance['twitter_link']);
 return $instance;
 }

 function form($instance) {
 $rss_default = get_bloginfo('rss2_url');
 $instance = wp_parse_args( (array) $instance, array( 'title' => '', 'rss_link' => $rss_default, 'twitter_link' => '') );
 $title = strip_tags($instance['title']);
 $rss_link = strip_tags($instance['rss_link']);
 $twitter_link = strip_tags($instance['twitter_link']);
?>
<p><label for="<?php echo $this->get_field_id('title'); ?>">Title: <input id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" /></label></p>
<p><label for="<?php echo $this->get_field_id('rss_link'); ?>">RSS Feed Link: <input id="<?php echo $this->get_field_id('rss_link'); ?>" name="<?php echo $this->get_field_name('rss_link'); ?>" type="text" value="<?php echo attribute_escape($rss_link); ?>" /></label></p>
<p><label for="<?php echo $this->get_field_id('twitter_link'); ?>">Twitter Username: <input id="<?php echo $this->get_field_id('twitter_link'); ?>" name="<?php echo $this->get_field_name('twitter_link'); ?>" type="text" value="<?php echo attribute_escape($twitter_link); ?>" /></label></p>

<?php
}

Re-working the Thesis framework to your own liking?

Well, if your doing a huge overhaul, you might want to get rid of the separator lines the default styling has included. This includes the sidebar lines, the teaser box lines, the comment lines.etc.

To get rid of these lines, while editing the css (you should be using the custom.css located in the custom folder of Thesis) input this code at the top:

.custom #header, .custom .post, .custom .teasers_box, .custom #footer, .custom #footer a, .custom #footer a:active, .custom #archive_info, .custom .prev_next, .custom #comment_list, .custom #comment_list dd, .custom #commentform, .custom #sidebar_1, .custom #sidebar_2, .custom #comment_list dt.comment, .custom #comment_list dd.comment, .custom #comment_list dl .bypostauthor .format_text, .custom #trackback_list {
        border-bottom: 0px;
        border-top: 0px;
        border-right: 0px;
        border-left: 0px;
}
.custom #content_box, .custom #column_wrap {
        background: none;
}

This will effectively get rid of all separators, no matter the framework (page or full-width) or column amount / justification. Also, since you placed this code at the very top of the document, any border you might want to add in later will over-rule the top declarations. Good luck!

Yep, I’m using Thesis.

For the last couple of weeks I have been working with the latest Thesis framework (and WordPress of course) to create a variety of different Thesis “skins.” These skins will be released completely free sometime next month. The skin I currently have enabled is one of the simpler, toned down skins that are planned to be released to the public.

Now, I’m sure some of you proud Thesis owners might be thinking “Its pretty and all, but do I really want to go through all of the work to get it up and operational- and how much ‘out of the box’ work did you do to get it to look like this?” Well I won’t speak for the rest of the themes just yet- but this theme itself honestly took about 5 minutes to install. You do not need to enter in any hooks, or change any functions. There are a few steps to get the design “just right”, which can all be achieved using Thesis’ built in options. Upload, point, click, click, click save. Done.

Anyways- I won’t go into detail right now- but if you are a Thesis fan and happened to stumble across this post, bookmark the site, add me to twitter, drop a comment, or grab the RSS. I promise you won’t be disappointed.

Original Photo Credit: Flickr