You may have noticed that we changed our theme not too long back. We are running the Together theme by ThemeBrewers.com and now that we’ve had time to play around with it here and on our other sites we wanted to start sharing some of the things we really like about it starting with its ability to transform itself into lots of different looks with just a few clicks…

Global Theme Layout

The ability to set a global layout was one of the first things that really sold us on using the ThemeBrewer themes. Anyone who has purchased a theme somewhere only to find out that it would take an act of God or the very least help from one of your nerdy…errr…technically gifted…friends to get it to do what you wanted it to do should appreciate the incredible simplicity of radio buttons to change their layout. And better yet, you can wait to call in that favor from your own personal tech support until you really need it.

Per Page Layout

But what happens when you have some content that just can’t follow your global layout? Perhaps you have some graphics or other content that just doesn’t fit with the sidebar or maybe you need an extra sidebar for a particular page. That’s no problem either because each page can specify its own layout independent of the global option. Pretty cool stuff! And of course what makes us happiest about this whole process is we didn’t have to dig around in the theme code to make these changes.  And hey, it’s not like we’re lazy or we couldn’t write some code if we had to, but our TiVo might fill up and not record something important!  There are just some risks not worth taking.

We hope to delve into more of the cool features we like about ThemeBrewers themes over the next few weeks and we may even start tinkering with some of their other themes just to help us get familiar with, and test out, all the features. Besides, it’s always fun to redesign your blog, right?  Especially if it can be done quickly.

Let us know what you think in the comments and maybe even consider signing up for our newsletter.  We will be testing out a new WordPress newsletter application in the next few months, but we promise not to spam you. Optimus Prime would never allow it!

Tranformers of Themes

Espresso Features

• Multiple Layout Options for Header, Content and Footer Areas
• Easy-to-Use UI for Theme Customizations
• Unlimited Sites
• Unlimited Updates via Automated Updates
• Optimized for WordPress 3.1+
• SEO Optimized and Developed to Work with WordPress SEO Plugin by Yoast
• Custom Image Sizes with Image Regeneration Support
• Custom CSS and Styling Options
• 7 Widgetized Areas (one in the header, two in the sidebar, four in the footer)
• Multiple Shortcodes and more

Win a free Pro Membership

With the grand opening of Themebrewers they are giving away a free pro membership. All you have to do is go to the following link and enter to win.
ThemeBrewers Give Away

Espresso Theme Framework and ThemeBrewers

That’s no easy task, but WordPress makes it a little easier when it comes to theme development. Here’s three steps you can take to make your themes a little better than before.

Step One: Proper Template Directories

This is more of a general step you can take, but still useful, and it’s as simple as creating folders to organize your files in. Many developers like to have seperate folders for JavaScript, CSS, and images. These are the folders that I use to keep everything in its place:

• /theme-directory/css/
• /theme-directory/images/
• /theme-directory/js/
• /theme-directory/includes/

That last one is important. Anything custom that i’m building for the theme, such as a meta box or option page for the admin section of WordPress, would live in this folder. I used to put some front end PHP in there as well, but more on that later.

Step 2: Registering your CSS and JavaScript

WordPress comes with several functions you can use to queue and load your CSS and JavaScript files. You can set a version number for the files, and even tell WordPress that a specific file requires a previously queued file before this one loads (for example, requiring that jQuery is loaded before a jQuery plugin your theme needs gets loaded).

Step 3: Use WordPress Template Files!

WordPress is built around themes and plugins, and it’s really easy to make your theme easy to manage if you use what has been given to you. The best example of this is the function get_template_part(). This function allows for you to split your template files into smaller more manageable blocks of code. For example, you can make a loop.php file that you can use in all of your template files and include it simply by calling get_template_part(“loop”). It’s just that easy! You can use this function to display any file you make in the main template directory, the possibilities are endless.

That’s all there is to it. Check out the following links for more information.

wp_register_script
wp_deregister_script
wp_enqueue_script
wp_register_style
wp_enqueue_style
get_template_part

Organize your WordPress Theme in 3 Easy Steps

As a developer, one of my favorite things to do is write reusable code. I love when I start a theme and find it needs some bit of functionality that I wrote for something else, if all i need to do is include a file and make a couple strategic edit my job just got easier. Here is a quick example. Imagine you have a custom post type for events ( just an example, I have no code to back this up, sucks I know). If you create your event post type in a class, you can use the current_theme_supports method to check and see if you need it, and your class does the rest!

if(current_theme_supports('event-post-type')){
add_action("init", "jmh_event_post_init");
}

function jmh_event_post_init() {
global $event_class;
$event_class = new event_post_class();
}

So if you build a lot of themes, set up a single folder with an init file. include all your files there, organize it, then your functions PHP will just need to start off with a couple things:

add_theme_support('event-post-type');
require_once('your init php file');

Awesome WordPress Feature of the Day: Add Theme Support

1. Add the following to the wp-config.php

/**   MULTI-SITE SETUP   */
define('WP_ALLOW_MULTISITE', true);

2. Navigate to Tools > Network and choose your install type

You will have to choose what kind of network you want to run. Your choices are either Sub-directory setup or a Sub-domain setup. These choices affect how the addresses of your sites look.

Sub-directory
This configuration means that all your blogs/sites created within WordPress are extensions of your domain. So if you were using the domain myawesomesite.com then your blogs/sites within WordPress would all have domains like:
myawesomesite.com/siteone
myawesomesite.com/sitetwo

Sub-domain
This configuration does require some extra DNS work meaning you will need to setup a wildcard DNS record. With this setup each new blog/site in WordPress becomes it’s own sub-domain of the top level domain that was used to install WordPress. So if you installed WordPress on the url myawesomesite.com each new site’s domain would look like:
siteone.myawesomesite.com
sitetwo.myawesomesite.com

Once you have chosen the setup you want to run enter your network details and hit install.

3. Finish up the network install

There are a few things that you need to do manually to finish the install.

Create the blogs.dir directory
Create a new directory in the wp-content folder called blogs.dir, this directory will be where all your sites uploaded content is stored.

Edit wp-config.php
WordPress will generate some new settings for you to add to your config file. These settings are specific to your network. For the myawesomesite.com setup they would like this:

define( 'MULTISITE', true );
define( 'SUBDOMAIN_INSTALL', false );
$base = '/';
define( 'DOMAIN_CURRENT_SITE', 'myawesomesite.com' );
define( 'PATH_CURRENT_SITE', '/' );
define( 'SITE_ID_CURRENT_SITE', 1 );
define( 'BLOG_ID_CURRENT_SITE', 1 );

Edit or create the .htaccess file
If you already have a .htaccess file setup then you will just want to edit the area the contains WordPress rules. If you don’t have a .htaccess file go ahead and create one. Now all you have to do is copy in the settings provided by WordPress, save the file and you are done. This is an example of the code generated by WordPress:

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
 
# uploaded files
RewriteRule ^([_0-9a-zA-Z-]+/)?files/(.+) wp-includes/ms-files.php?file=$2 [L]
 
# add a trailing slash to /wp-admin
RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]
 
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule  ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) $2 [L]
RewriteRule  ^([_0-9a-zA-Z-]+/)?(.*\.php)$ $2 [L]
RewriteRule . index.php [L]

4. Remove the Tools > Network menu option

Once you have your network setup you can remove the menu option simple by commenting out the enable multi-site option in your wp-config.php file.

/**   MULTI-SITE SETUP   */
//define('WP_ALLOW_MULTISITE', true);

Enable Multi-Site in WordPress

Enter the Genesis Framework from StudioPress. As soon as I got a look at how the framework is built I was instantly impressed. First, it has several great features that are helpful to both developers and users. It offers automatic updates, great security, customizable theme settings, custom widgets, plenty of layout options, and the list goes on. There are a lot of frameworks out there that give you similar things, but Genesis has some really cool features for developers too.

For starters, the theme is fully compatible with all the new features in WordPress 3.0. StudioPress was quick to add those features for their users, and that kind of dedication to their product is a huge value. Another great value for developers is the themes construction. They have built Genesis to be a starting point for child themes, allowing for radically different sites without having to do the same edits to the main theme over and over again. To help make a child theme as customizable as it needs to be in order to be successful, they have built in plenty of hooks to do whatever you need. If you want to add a widgetized area above the footer, it’s easy. You need an add area above the content, it can be done. Anything you can think of you can do. Proof of this is easy enough to find, since from what I can tell every theme that StudioPress has available is a child theme of Genesis.

On top of all this, StudioPress has an active community of users and developers on their forums that can offer help to any problems people come up with. I think anyone who really uses WordPress knows how important an active community can be.

To wrap this up, I can simplify my first impressions into one word : awesome. I’m really looking forward to building some cool stuff on top of this theme framework, and when I do i’ll be back writing a post about it.

First Impressions: Genesis Theme Framework

add_filter( 'pre_get_posts', 'my_get_posts' );
 
function my_get_posts( $query ) {
	if ( is_home() )
		$query->set( 'post_type', array( 'post', 'page', 'album', 'movie', 'quote', 'attachment' ) );
 
	return $query;
}

So to add your custom post types into the your blog homepage you can put this code just before the WordPress post loop. The following code adds in the post types you would like to use and also checks to make sure your paging still works.

<?php 
if( is_home() ){
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts( array('post_type'=>array( 'post', 'linkpost'),'paged'=>$paged ) );
}
?>

if you want to read more about the first piece of code you can check it out on Justin Tadlock’s blog.

Displaying custom post types on your WordPress blog homepage

VPS.net WordPress Hosting

Think2Loud doesn’t yet need the power that Yoast.com is running on. I got a VPS.net Cloud Server with the following setup on it, and what’s more, I did it all on my own. Yoast mentions in their WordPress article that if you buy 6 nodes or more, VPS.net will set you up with exactly what they have. Since Think2Loud currently only has about 15K visits a month, I couldn’t justify that much power. With some help from the VPS.net forums and following Yoast’s setup list, this is what I have running:

• 1 Cloud Server at VPS.net, (2 nodes at the moment, tried 1 and there was just not enough RAM)
• Centos with CPanel in the Atlanta cloud
• replaced Apache with LiteSpeed (this really is easy )
• installed APC so I could do database and output caching with the W3 Total Cache plugin
• and of course a CDN. I went with MaxCDN because they were the best deal I could find

Pretty simple, right? Now there are a few things that I would like to share with you about VPS.net and the setup they have. I couldn’t find this info anywhere on the web but you may find it valuable. I know it made my day once I signed up and got started.

• CPanel and WHM are monthly add-ons and VPS.net does the licensing.
• LiteSpeed is also a monthly add-on and has a CPanel module. VPS.net also takes care of the license.
• TThere is a small fee for there snapshot service. (Get it! you can never have too many backups).
• I also setup Rsync on my server with the help of VPS.net. Again, there is a small fee, but it backs up everything.

That’s it! With just a little work, you can have one lean, mean, WordPress hosting machine. Be sure to check out the WordPress hosting article over at Yoast.com, and I would like to thank them for pointing me to a great hosting service.

WordPress Hosting

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
	<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
		<h1 class="entry-title"><?php the_title(); ?></h1>
		<div class="entry-content">
			<?php the_excerpt(); ?>
			<?php the_content(); ?>
		</div><!-- .entry-content -->
	</div><!-- #post -->
<?php endwhile; // end of the loop. ?>

Doing this causes the intro of the post to show twice, once from the auto-generated excerpt and once in the post content. To fix this, we added a quick check to the post loop. Simply replacing the_excerpt function in the post loop with this little piece of code removed the double intro.

<?php 
	if( !empty($post->post_excerpt) ) {
		//We have a excerpt so print it
		the_excerpt();
	} 
?>

How to see if a Post in WordPress has an Excerpt

A sticky post is a post that is plucked out from its publish date and moved to the front of your blog. This will keep the post on your homepage so you can increase the visibility of that post. Sticky posts have many uses–one would be if you were having a giveaway. You could stick that post to your homepage so everyone would see it when they visit your blog. Then, once the contest is over, you remove the sticky post option and the post falls back in line to when it was published.

Adding the post class function to your theme

Within the post loop there should be some code that looks something like what is below:

<div id="post-<?php the_ID(); ?>" class="post">
	Rest of loop here
<div>

Now some themes use more than one class to style their posts. You could have a setup like the following where you have not only a post class but also a box class. Thankfully for you they have made it very easy to add that class into the post_class function.

<div id="post-<?php the_ID(); ?>" class="post box">
	Rest of loop here
<div>

To update the theme all we need to do is replace class=”post” with our function call. Your updated post loop will now look like.

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	Rest of loop here
<div>

If you need that extra class like the second example that also uses the box class. All you need to do is pass that class name into the post class function.

<div id="post-<?php the_ID(); ?>" <?php post_class('box'); ?>>
	Rest of loop here
<div>

That is it for updating the code within your theme.

Adding style to your sticky post

The post class function will automatically add a class of sticky to any post marked as such in the post admin screen. So in your style sheet you will need to add some styles for this new class. Here we just added a different background color to our sticky posts.

.sticky{
	background-color: #c2c2c2;
}

Marking a post as sticky

In WordPress 2.8, make your way to the edit screen for the post you would like to make sticky. You’ll then see a box like the one to the left with the visibilty section closed. Click the edit link and you will now see the checkbox. That’s all it takes to take advantage of sticky posts in WordPress.

Be sure to check out the WordPress Codex to find more info on all the functions available in WordPress.

Harness the Power of the WordPress Post Class Function and Style Those Sticky Posts