Interview with Jeff Chandler of WP Tavern

Jeff Chandler is the founder of WPTavern.com, a leading WordPress community blog. His passion for WordPress, both the software and the community, has gained him considerable respect and appreciation around the community. He was kind enough to answer a few questions for our interview series.


Jeff Chandler

Age: 27.
Current City: Cleveland, Ohio.
Favorite City: So far, Chicago.
Favorite WordPress Feature: Automatic Core, Plugin and Theme Updates.
How long have you been working with WordPress? Since 2007.


How did you get started with WordPress?

When I decided to take blogging seriously in 2007, I decided to use my Joomla knowledge to build the site. I quickly found out that Joomla would be too much for what I needed. I can’t remember how I discovered WordPress but after I installed it for the first time and tried to edit a theme, I was overwhelmed and thought that it was too difficult to do anything in WordPress. I went back to my Joomla setup until I realized that it simply wouldn’t work so I decided to give WordPress a second try. Only after I figured out template tags and the way WordPress themes are developed did I finally get a sense of zen as I haven’t looked back since.

Where does the passion for the WordPress community come from?

That’s a good question. WordPress is a piece of software that has an international reach. Every day, someone somewhere is doing something cool with the software. Whether it’s a cool plugin or a beautiful theme or perhaps even a tool to help others, there’s always something new around the bend. In fact, there is so much new stuff happening within and around WordPress every week that it’s impossible for one man to cover it all. However, what I enjoy most is talking to people that no one has ever heard of such as the guy running his own hyper-local website for his community powered by WordPress or the woman that has developed a vibrant community surrounding her recipes using BuddyPress. All of the developments week in and week out not only surrounding the core software but the people making a difference for the rest of us is what fuels my passion for the software as well as the community.

Earlier this year you launched a VIP program. What brought you to start it, and why did you later close it down?

The VIP program was something put together to enable another revenue stream. The idea was to give VIP members exclusive coupons for products, give them their own area to talk, a job board as well as other content. However, I just never had enough time to put forth the effort in the program to justify the cost. I felt as if I was not delivering and in fact, those that had purchased accounts ended up wasting their money. I couldn’t take it anymore so I refunded everyone that had signed up and closed down that section of the forums so I wouldn’t have to worry about it anymore.

Did the campaign to bring back the VIP program sway your opinion?

As usually happens in my little neck of the woods, someone started a thread discussing the idea of bringing back the program. That thread has not swayed my opinion but since there is interest in helping to support the work that I do, I have a major call for help that will be on the website within the next few days.

If you could change one thing in about the WordPress community, what would it be?

If I could change one thing about the community, it would be to remove the asshats and replace them all with unicorns, pots of gold and triple rainbows. The human element is needed to keep the WordPress project a well oiled machine but it’s this human element that at times can be the software’s own worst enemy. Not only can the software succumb to the human element, but the community surrounding the software also suffers at times. At the end of the day though, that’s just the way it is.

What do you have planned in the future for WP Tavern?

You ask a tough question. With the death of my father-in-law that occurred recently and my stint away from writing and monitoring the community, it’s given me some time to think about what I want to do. Right now, WPTavern does not bring in enough income to live on and the income stream is very unreliable and not constant. On the other hand, I’ve never really taken myself or WPTavern seriously as a business where I put 110% into the site. Another thing that has bothered me is that I seem to have strayed away from what was making WPTavern successful in it’s earlier days in that I’ve branched off to write about bbPress, BuddyPress, etc, I’ve lacked consistency in publishing content and I’ve also lowered the amount of content I publish. It’s weird because since I began to write for an audience instead of for myself, I care about how many posts are published in a day, what posts should or should not be published, what to write about and what not to write about. I’ve tried to overcome these limitations I’ve put on myself but it’s been difficult.

So regarding the Tavern, I can tell you that after giving it some thought, I am going to try to focus on WordPress only with just a sprinkling of the other stuff. I am going to try and become consistent again with at least one post a day while some days there may be five posts. I’m going to point more people to the forum and continue to make sure it’s running like a well oiled machine. In fact, the beautiful thing about the forum is that it’s now running itself. People are finding it via referrals and Google and signing up, mainly for troubleshooting but it’s cool to see that there are almost 1,000 registered users.

I’m going to bring back the WordPress Weekly podcast and implement more news elements into the show such as 5-10 minute interview segments with the news makers themselves.

As for WordCamp coverage, I’ll put the call out to any company that would like to sponsor me for a particular event and if any of them bite the bait, I’ll be able to record sessions and create video interviews from those events for those that couldn’t make it.

Outside of WordPress and blogging, what do you enjoy doing?

I enjoy spending time with my fiancee, playing Battlefield Bad Company 2, wasting time on YouTube and living on the world wide web.


A big thanks to Jeff for the interview! Let me know in the comments who else you would like interviews with. Also check out WPTavern.com for WordPress news and a great community.

Leather: A Free WordPress Theme

This theme has been in the works for a few months, so I am very happy to have finally finished it, and get it ready for release. So enjoy this texture and font rich theme, that is most importantly completely free.

View Demo | Download Theme

A few quick features:

  • 100% GPL.
  • Supports Custom Menus (WordPress 3.0 Only).
  • Supports Featured Images (WordPress 2.9+).
  • Threaded commenting.
  • Dynamically loads Gravatars for comments.
  • Simple theme options page with a design that matches WordPress.

Enjoy!

Update (August 26,2010): This theme was updated to version 1.1 to fix some issues brought up by John Levandowski in the comments. Thanks John!

Cleaner Type in Photoshop

The Problem

While laying out new website designs in Photoshop I came across some strangely formatted text. The “r” character would stick up above the x height (or median). In general the text looked very poor.

The Simple Solution

It turns out I inadvertantly (no idea how it happened) set the anti-aliasing method to “sharp”. The fix was to set it “crisp”. Very easy, but it took me a while to figure out.

Building a jQuery Featured Posts Slider for WordPress

One of the most common requests in modern WordPress themes is the addition of a featured posts or featured image rotator. This is often a feature that users think makes a theme “premium”. Once you break down the code required,  it is actually much easier than it seems.

View Demo | Download Files

Also when combined with the WordPress 2.9 featured image feature (renamed in 3.0, it was previously called post thumbnail), it becomes much more powerful.

This technique can be seen in our themes Precision and Refresh.

A demo of what we are building.

Start by opening a containing div. Everything from here on will go inside this div. Note the ID because we will call it later.

[html]

<div id="photo-rotator">

[Featured Posts Here]

</div>

[/html]

Adding Featured Image Support

In order to let WordPress know that your theme supports featured images you need to add these line to the functions.php file:

[php]

add_theme_support( ‘post-thumbnails’, array( ‘post’ ) ); // Add support for posts
add_image_size( ‘nav-image’, 130, 40, true ); // nav thumbnail size, hard crop mode
add_image_size( ‘rotator-post-image’, 615, 280, true ); // large size, hard crop mode

[/php]

The values are for width (615) and height (280) in pixels. I like to specify multiple image sizes just in case I need more later. To do this just re-use the second line and change the name.

A New Query

With WordPress we use the loop to call in posts. Now you should not use the same loop twice on the same page. To work around this we are going to use WP Query.

[php]

<?php
$featuredPosts = new WP_Query();
$featuredPosts->query("showposts=4&cat=3");
while ($featuredPosts->have_posts()) : $featuredPosts->the_post();
?>

[/php]

Here we are showing up to 5 posts from the category with an ID of 3. You may use any of the standard query arguments to customize which posts show up. Just remove &cat=3 if you want to query all your posts. Using at least 1 argument is required (or at least it has caused me problems in the past!).

Now we get into the actual markup for each slide. Since this will be repeated for each post in the loop you only need to write it once.

[php]

<div id="slide-<?php echo $slide_id; $slide_id++;?>">
<a href="<?php the_permalink() ?>">
<?php the_post_thumbnail( ‘rotator-post-image’ ); ?>
<span><?php the_title(); ?></span>
</a>
</div>

[/php]

Then close the loop. The $slide_id is required so that we can tie the navigation to each specific post for linking. It increases by 1 for each post.

[php]

<?php endwhile; ?><!–/close loop–>

[/php]

Now for the Navigation

You probably want users to be able to move between the posts on their own, so we need to loop through our query again to create the post navigation.

[php]
<ul id="slide-nav">
<?php $nav_id=1; while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>
<li>
<a href="#slide-<?php echo $nav_id; ?>">
<span>
<?php the_post_thumbnail( ‘nav-image’ ); ?>
</span>
<? the_title(); $nav_id++;?>
</a>
</li>
<?php endwhile; ?><!–/close loop–>
</ul>

[/php]

And with that our PHP work is done.

Adding jQuery

We are using the jQuery tabs section to accomplish this, so you will need to include both jQuery and jQuery UI. WordPress has all the files you need built in, so you can use wp_enqueue_script(); to pull them in. Make sure to call in all the parts of jQuery Ui that you need.

[php]

<?php wp_enqueue_script(‘jquery’); ?>
<?php wp_enqueue_script(‘jquery-ui-core’); ?>
<?php wp_enqueue_script(‘jquery-ui-tabs’); ?>

[/php]

Now with to call in the jQuery UI Tabs function. With plenty of settings you can control speed, transitions, and much more. Read about it on the jQuery UI site.

[js]
jQuery(document).ready(function($){
$("#photo-rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000);
});

[/js]

Now for some Style

We’ve got functionality, now to make it pretty. Here are the styles I used to get started. You will need to modify this to match your site.

[css]
#photo-rotator {
background: url(‘img/background.png’) no-repeat 0px -10px;
width: 635px;
padding: 0px 10px;
height: 400px;
position: relative;
color: #fff;
margin: 20px auto 20px;
}

#photo-rotator .ui-tabs-panel {
list-style: none;
height: 300px;
}

#photo-rotator .ui-tabs-panel a.post-image {
display: block;
width: 615px;
height: 280px;
float: left;
margin: 10px;
background: #ccc;
position: relative;
text-decoration: none;
}

#photo-rotator .ui-tabs-panel a.post-image .title {
display: block;
padding: 10px;
background: #000;
background: rgba(0,0,0,.5);
color: #ccc;
position: absolute;
bottom: 0px;
left: 0px;
font-size: 18px;
width: 595px;
}

.ui-tabs-hide {display: none !important;}

#slide-nav {
padding: 0px;
margin: 0px;
position: relative;
float: left;
}

#slide-nav li {
float: left;
list-style: none;
}

#slide-nav a {
display: block;
color: #666;
float: left;
width: 138px;
padding: 12px 10px 10px;
text-decoration: none;
background: url(‘img/post-line.png’) no-repeat right top;
min-height: 100px;
font-size: 14px;
}

#slide-nav li:last-child a {
background: none;
}

#slide-nav a:hover {
color: #000;
}

#slide-nav a .thumbnail {
display: block;
background: #cbc9c9;
padding: 3px;
border-bottom: solid #fff 1px;
width: 130px;
height: 40px;
filter: alpha(opacity=50); /* Decreases opacity in IE */
-moz-opacity: .5; /* Decreases opacity in Firefox */
opacity: .5; /* Decreases opacity in Safari, Chrome, and Opera */
}

#slide-nav .ui-tabs-selected a { color: #222 }
#slide-nav .ui-tabs-selected a .thumbnail {
background: #bbb;
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

[/css]

I am linking to several images to add more style to the slider. You can get these images in the download file.

Wrapping it up

Our style here is pretty basic, but you can add more content and make your posts much more detailed. Plenty of great sites implement this feature. Please post in the comments if you have any questions or find some great examples of something similar being implemented around the web.

On WordPress Theme Options

Over the past year it has become trendy to build theme options pages crammed full of every possible setting. While it is well intentioned, I don’t think it is the best direction to take themes. In software design we always say that adding a preference should be your last resort. First you should try to design an elegant way, and add a setting only if absolutely needed. Thus avoiding unneeded complexity and setup time.

Adding more options actually makes the theme files more complex for someone trying to understand and customize the code that powers the website.

Start by removing options that aren’t really necessary. Here is Justin Tadlock on the subject:

One goal when making themes should be to avoid options by finding more intuitive ways for features to work. Ever heard of widgets?

So what does belong in a theme options page?

  • Theme style (Basically choosing a CSS file to reference)
  • Logo Upload (?)
  • Layout Switching (If it is crucial to the theme)
  • Custom text areas (though first consider if a widget would work)

Of course all of these depend on the theme.

Advertising

So you want to place small bits of code in assorted places throughout the site? Specifically places the user can control? This is perfect for a widget. No need for an entire tab of your options page devoted to configuring ads. Widgets are the answer.

SEO Options

Generally users need to customize page and posts titles,  meta information, and modify link attributes. While this can be important to a great site, it isn’t the role of a theme. WordPress has many great plugins that handle all the needed settings and more. Recently in their announcement of SEO settings in their themes WooThemes noted that it is compatible with the All-in-One SEO plugin. Meaning it is nothing more than duplicate functionality, and extra options for an end user to try and understand.

Navigation Menus

Since custom navigation menus are included in WordPress 3.0, you don’t need to make them part of your theme. If the theme already have this functionality I would recommend removing it with the next update.

Detailed Color Options

You’re a theme designer, right? Then the color decisions you made when designing the theme should be solid. It is good to design several different color variations the user can choose from, and even better to write your CSS so that it is easy to edit and understand. So having users be able to change the color of every link or heading from an options panel is excessive.

Now I don’t think this applies if you are trying to create a blank slate theme (i.e. Canvas, Headway, Thesis, etc).

Featured Images

With support for featured images in 2.9 (then called “Post Thumbnail”), you no longer need image resizing in your theme. Some say the built in WordPress support isn’t good enough, but I haven’t yet found a case where you couldn’t make it work.

Contact Forms

Forms are part of the functionality of the site, so they should be handled by plugins. There are some fantastic paid plugins (Gravity Forms) and some good free ones as well. Most commonly themes provide small contact forms to go in sidebars or footers. For that use a widget. Then it can be placed anywhere.

The Grey Areas

Here are the things I am not sure of their place in a theme or not. What do you think?

  • Analytics Code
  • Support Documentation (Just link to your knowledge base or support page. It isn’t needed as part of the theme)
  • Custom CSS
  • Number of posts on homepage (WordPress already has a posts per page setting)

On Style

Make it your options page design match WordPress. We don’t need a conflicting design style and user experience corrupting WordPress. Genesis is a great example of an options page that truly matches.

Simplicity

When it comes time to code the options for your next theme, keep it simple.


Note: sales from any affiliate links in the article go to WP Tavern. They deserve it.

It’s Personal (Preview)

This is our new personal blogging and photo theme. It would also work great for setting up a portfolio site. It also uses CSS3 to create a flip effect that you can see in the screencast. Enjoy!

Screencast Demo

Screenshots

Take a look at a few additional styles it comes in:

Managing Comments on Your Blog

If you blog most likely you will have comments enabled. Some think not having comments could be a feature, but the majority of blogs have them. Moderating comments can take as much time as you let it, so I recommend following one simple rule:

If a comment adds value to the discussion, then approve it. Otherwise it belongs in the trash.

So any comments such as “First!” or “Great post, I love it!” are not needed. If you want to maintain  a quality blog then you need quality comments as well. YouTube has the reputation for having the worst comments on the web. Let’s go the other direction and curate the discussion on our blog to maintain the highest quality.

Dealing with Spam.

The majority of spam comments can be stopped with a plugin like Akismet (which comes pre-installed with WordPress, you just need to activate it), but you will still have some slip through.

Everyone is familiar with the usual online spam (software, viagra, etc), but these days other forms of spam are becoming far more common. Here are some examples I have seen recently:

Though it doesn’t sound exactly like spam, I haven’t written anything on my blog about SQL. If it isn’t relevant, delete it.

Really? A small business owner? As in you run a spam business? This comment is off topic, poorly formatted, and the URL looks sketchy.

Loans? Yes please! Obviously spam. Though I have been surprised with how often I see comments like this approved on respectable blogs.

A compliment? For me? Sometimes these types of comments are written by humans, but complementing the author is a great way to get a spam link published. So automated or not, I don’t think it has a place in your carefully curated blog comments.

All of these comments fall under our simple rule:

If a comment adds value to the discussion, then approve it. Otherwise it belongs  in the trash.

For those of you who complain about dealing with too many comments, you could turn them off, or just remember this quote from Oscar Wilde:

“The only thing worse than being talked about is not being talked about.”

First Ever 3D CSS WordPress Theme

CSS3 has some great support for 3D transforms, perspective, and animation. Currently Safari is the only browser that fully supports it, but I am hoping Firefox and Chrome will add support soon. With that we can take regular objects (WordPress posts in this case) and animate them. I created 3 different shapes the posts can form while rotating. Click a post to view a larger size.

View the Demo or Download the Theme

Note: the 3D and animation only work in recent versions of Safari. Though the site does degrade gracefully in other, less capable browsers. Update: Only Safari in Snow Leopard can fully run this demo. Unfortunately preserve-3d doesn’t appear to be supported in Safari Windows or in Chrome on any platform.

Update 2: Safari 5 added support for this demo on all platforms. Download the new version if you are browsing on Windows. Unfortunately Chrome still doesn’t have support.

In this screen cast the animation doesn’t look very smooth. But when viewed live all the animations are silky smooth. You’ll just have to try it for yourself.

I know this theme isn’t the most practical, but I would love to hear your thoughts on it. Also feel free to download it to learn more about how it works.

A New Level of Precision

Announcing new themes is just fun. I personally love to see what other developers in the community are working on, and it gives potential customers a great opportunity to imagine a new look for their sites.

So, this is the Precision theme. It comes in a variety of colors (5 unique color schemes), and uses jQuery for the home page post slider. It also has extensive use of the WordPress featured image feature, so your post  lists are always visually interesting. Take a look!

Hopefully you can start imagining new sites that can be built with this theme. Precision is mostly coded (just wrapping up some final changes) so look for it to be released in the next week.