Catch up: Joining 10up, WebVisions, WCSEA, PDX-WP

So for a while it looked like I actually might be regularly writing things for the blog. At least it looked like it to me. Possibly. Maybe. Then I got hired by a top-tier web development agency: 10up, LLC and I moved to Oregon and my life has been all sorts of busy since.

This means it’s time for another re-design of this site despite this one not even being completed. Since I’m not going to use it as a client landing page any more, I think I’ll re-focus attention on blogging about WordPress, UiX, Web Design, etc and have a separate section that can serve as landing pages for community projects. But that’s a weekend project vying for attention with all this other stuff:

Coming up quickly (happening right now) is WebVisions Portland. I’ll be there on Lorelle VanFossen’s panel with a few other WordPress experts from the Portland area. If you happen to be headed there, our panel is Friday (May 18th) in the afternoon, stop by and say hi!

I was able to secure a last minute ticket to WordCamp Seattle and will be driving up for the day to be there. Plan on attending my coworker, Zack’s, presentation titled “There’s a function for that…

Totally unrelated, but Sunday is a World War II living history event in Adair Village, OR. Adair Village exists because of the WWII-era Camp Adair – a training and staging installation for troops eventually headed overseas. If you’re into that stuff and in the area, stop by the WWII barracks… Unfortunately I’m not really sure where they are, but the city is quite small – someone’s bound to know… We’ll be there in the early afternoon

This Monday evening (May 21st) will be my second attendance at the Portland WordPress User group meetup. The topic is all about editing the codex – I’m looking forward to being there.

50+ tools that make WordPress developers’ lives easier

Brainstorm whiteboard with this list

On Sunday at WordCamp Phoenix I led an unconference session with a few awesome WordPress developers to find out what tools we all use. The list is impressive and so I compiled it here.

Servers

  • Nginx
  • Lighttpd
  • Apache A The recommendation from, well, just about all developers is to drop Apache as soon as possible for one of the other web servers

Text Editors

Hardware

Command Line Tools

Development Environments

Support Tickets

Version Control

Freelancer Billing Tools

Online Tools

Debugging

CSS Tools

Other

Many thanks to everyone who attended the session and contributed to this list. Sound off in the comments if we missed something that makes your WordPress development life easier.

One simple trick to find design issues

Two times in the last few hours I’ve found areas of a design that could be improved by using one simple trick:

By shifting my perspective, literally, I was able to see the design in a different way. Here are some practical exercises to literally shift your perspective:

  • Turn the entire design upside down. While it may look funny to turn a laptop upside down, it’s totally doable and allows you to see how a design flows vertically.
  • Look at the design on the screen from an extreme angle left or right to see how the design flows horizontally.
  • Zoom way in and pixel-peep design. I did this to confirm the baseline was consistent by zooming in and literally holding a ruler to my screen.

Do you consistently use any of these tricks to help you look at design?

New Business Cards

I just finished my first batch of handmade business cards. I’m very pleased how they are coming out.

I decided that instead of ordering cards, I’d attempt to hand make them in small batches. This will allow me to tweak, update, or even switch designs as often as I need.

These cards have a special QR code on the back and my logo heat embossed on the front in either ninja black or line green. They are 2″ square with rounded corners.

20120126-022218.jpg

New version of TDD Progress Bars

New progress bar colors: black and silver

Just pushed version TDD-Progress-Bars v0.3 to WordPress/Extend. It incorporates some of the things that I’ve been meaning to get around to.

Widget
The progress bars can now be displayed easily in a widgetized sidebar. It’s a basic implementation using just a text-box to take a comma separated list of progress bar IDs, but it’ll work for now.

New Colors!
Two new colors, Black and Silver:

New progress bar colors: black and silver
New progress bar colors: silver and black

Compatability fixes
Mark Ayers (@Philoserf) let me know via github that there was an incompatibility with the CSS of this plugin and, well, other things. In this released I’ve prefixed all my CSS classes so that won’t be an issue. Also filing that away as a best-practice.

Taxonomy Archive Pagination 404

The issue:
When creating a custom taxonomy archive and you want to modify the posts_per_page setting. The first page works just fine, but subsequent pages will take into account the blog’s posts per page setting. This means that while the first page will show the number of taxonomy terms specified by the “posts_per_page” query_posts() variable, subsequent pages may return a 404 error or just mess up your pagination. This may only be an issue when using a page template such as taxonomy-{$taxonomy}.php

Why this occurs:
Specifically, I’ve no idea. Generally this is because the WordPress query is determining what template to show before it ever gets to the page template. The query takes the number of taxonomy terms to show for a given taxonomy, looks at the blog option posts_per_page and then determines what template to serve (404 or your custom one).

How to fix:
The solution I found was to filter the blog option posts_per_page if viewing the custom taxonomy. It’s pretty simple and looks like this:

[php]
add_filter( ‘option_posts_per_page’, ‘tdd_tax_filter_posts_per_page’ );
function tdd_tax_filter_posts_per_page( $value ) {
return (is_tax(‘custom-taxonomy’)) ? 1 : $value;
}
[/php]

The filter attaches to the posts_per_page filter hook. It then returns a “1” for one post per page if it’s the taxonomy archive I’m concerned about, otherwise it returns the default value.

My server doesn’t hate me anymore thanks to W3 Total Cache

Website load-time results (from Amsterdam)

For the better part of yesterday and most of today I’ve been working on optimizing my websites. I had determined — using I method I’ll show you shortly — that if I had just one person access all of my websites consecutively, my server would crash. Just one person. Here’s some details about what I’m running:

At the time of writing, I was running a VPS with guaranteed 600MB per month. The aforementioned websites consisted of approximately 15 WordPress sites of which three had an anecdotally “intensive” amount of plugins installed. The server is running PHP5/fcgi and I had enabled x-cache support (but had no idea if it’s actually running).

My sites aren’t popular. Based on my analytics, I’d estimate about 50 hits per day against my server. Yet, once every few days my server was being automatically restarted because it was using too much memory. Once a client started getting the same thing on their single WordPress site on their server, I decided to start poking around.

First, I started by looking at the currently running processes and memory usage on my server. I SSH’d in and — after reading some DreamHost documentation — found these commands:

top -c

watch free -m

Results of "watch free -m" command

The first gave me a running list of the processes on my server. The second just gives a running and easy to see display of total/used/free memory available to my virtual server. So I started opening websites to see what happened. Basically, new processes were spawned every time I refreshed or opened a website and they stayed there, running, for quite some time. I then found this command:

ab -n 1000 -c 20 -t 5 http://websitesthatdontsuck.com/

This code allowed me to simulate high traffic. In this case, 1000 visitors, 20 at a time, wait no more than 5 seconds for a response. Suffice it to say, my server didn’t handle it well. If I recall, about 10 requests completed, with the remainder failing.

So I had established the problem, what did I do to fix the problem? W3-Total-Cache.

Setting up W3 Total Cache

fluid width oEmbed videos in WordPress

Here’s the problem: Video elements embedded from YouTube, Vimeo, etc, generally don’t comply with a max-width:100% declaration in your beautiful fluid-width layout. This is because these embeds are generally presented in an iframe which causes some trickery. Ideally, we could present a javascript-free approach…

Note: If you’ve implemented some type of HTML5 video solution, a simple video{ max-width:100%; height:auto; } will be sufficient and will work wonderfully.

Luckily, the Web Designer Wall published a method that we’re going to use. It’s a fancy bunch of CSS. I’d just grab it and throw it in your stylesheet.

The CSS

[css]
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
/* overflow: hidden; */
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
[/css]

edit: The overflow:hidden style was causing my site to cease scrolling (everything outside the viewport was… hidden?) It didn’t really make sense, but deleting the line didn’t seem to have an adverse effect… for now..

In fact, that’ll work just fine as long as you wrap some sort of container (such as a <div>) around your oEmbed URL… But that’s too much work, the point of oEmbeds is to be super quick and simple.

Filter the oEmbed

oEmbedding actually runs the URLs it finds through the shortcode and just before it outputs HTML, it applies the embed_oembed_html filter. We can make use of this to very easily wrap a container (as required by the above CSS) and add a layer of semantics by using the HTML5 <figure> tag.

[php]
add_filter( ’embed_oembed_html’, ‘tdd_oembed_filter’, 10, 4 ) ;

function tdd_oembed_filter($html, $url, $attr, $post_ID) {
$return = ‘<figure class="video-container">’.$html.'</figure>’;
return $return;
}
[/php]

New Plugin: TDD Progress Bars

After recently getting around to updating my old recent posts plugin for WordPress I decided to get cracking at a real plugin.

[progress id=1256]
You’re 33% complete with reading this short post

The result is version 0.1.2 of my progress bar plugin. It’s somewhat basic for now, but I have plans! For now, you can manage your progress bars and include them, using shortcode, into posts or pages. There are some basic settings to control colors and whatnot, but that’s about it. In the near future, I hope to add the ability to pull the current progress of any public GitHub project using their API and it would be nice if I could do the same for Trac (though I’m not sure it’s possible…).

Get TDD Progress Bars

Adding a sub-menu to a custom post type

This is a pretty advanced post, but it was causing me issues for about half an hour, so I thought I’d share quickly.

Here’s the deal: I wanted to add a submenu to an existing custom post type. Right away, when creating a custom post type with public or show_ui set to true, WordPress will create a new top-level menu item, with a submenu item of “Add .” I wanted to be able to hook into that, and add a new sub-menu item called “settings”

Already in the plugin, I had created a custom post type:
[code lang=”php”]
register_post_type( ‘tdd_beans’, ‘tdd_beans_register_post_type’ );
[/code]

The details of my beans post-type are unimportant. What is important is the handle. In all cases, it’s the first parameter that you pass to register_post_type() — in this case, beans.

[code lang=”php”]
function tdd_beans_menu(){
add_submenu_page( ‘edit.php?post_type=tdd_beans’, ‘Beans Settings’, ‘Settings’, ‘manage_options’, ‘tdd-beans-settings-menu’, ‘tdd_beans_view_settings’ );
}
add_action( ‘admin_menu’, ‘tdd_pb_beans_menu’ );
[/code]

The add_submenu_page() function takes these parameters:

  1. $parent_slug: The magic is that it requires that whole edit.php whatnot in order to work. At least right now, although I believe that may be a bug in WordPress. Future versions may only require the slug (tdd_beans). In any case, it’s the slug for the parent page
  2. $page_title: This is what goes between the <title> tags
  3. $menu_title: What shows up in the menu (keep it short)
  4. $capability: This maps to a WordPress capability that will be required to access this sub-menu. It should probably map to whatever the capability is for your custom post type. Sub-menus will continue to display even if their parent menu is unavailable due to permissions
  5. $menu_slug: Put your own menu slug here for referencing this menu item elsewhere.
  6. $function: Lastly, this is the function that will echo stuff to the page.
  7. [code lang=”php”]
    function tdd_beans_view_settings(){
    echo ‘<div class="wrap"><h2>Hello World (inc. beans)</h2></div>’;
    }
    [/code]