v11

Posted on

Version 11.1

I realize that I was just writing about v10 four-and-a-half months ago. I liked it, but I haven’t done a ton of front-end work lately and I was itching to work on something. I started working on this probably six or seven weeks ago. It made its first public appearance on Dribble on July 14th. There’s a ton going on here, so I’m going to try and break it down a bit here.

Navigation

When I finally had something I wanted to build, I started with the main navigation. My first thought was to do it in CSS. The only sticking point is the darker yellow shadow on the bottom. It’s not even that hard to do, just a bunch of dropshadows. The way I did it looks pretty horrible in Safari, though, and not much better in Chrome. I’m going to look into this again when I get a minute because it would be awsome for customization. I’d love to be able to put an option in the customizer that lets you pick the nav color.

Mixins

So, I used Compass for this. Compass is the best reason for using SASS right now, in my opinion. Instead of maintaining your own list of mixins, which is likely to become out of date quickly, you can use Compass. It’s open source and used by tons of people.

And with SASS 3.2, there are some really cool things you can do with @media queries. For me, the following mixins made this theme easier to code and should make it much easier to maintain.

@mixin breakpoint($point) {
    @if $point == mid {
        @media (min-width: 800px) { @content; }
    }
    @else if $point == large {
        @media (min-width: 1170px) { @content; }
    }
}

@mixin retina() {
    @media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (   min--moz-device-pixel-ratio: 2),
    only screen and (     -o-min-device-pixel-ratio: 2/1),
    only screen and (        min-device-pixel-ratio: 2),
    only screen and (                min-resolution: 192dpi),
    only screen and (                min-resolution: 2dppx) { @content; }
}

Post Formats

This theme supports Standard, Link, Image, Video, Audio, Quote, and Status formats. Links still link to some external site or article. Image, Video, and Audio posts display extra content above the post title. Quote and Status posts are pretty straight forward, but it’s worth noting that they don’t have titles.

I’m still managing these with the Crowd Favorite Post Formats plugin.

Widgets

There are a couple of built in widgets. The biography widget, currently at the top of the sidebar, is available. It asks for an email address and will automatically pull your gravatar and profile information. The social icons are another widget that are part of this theme. Currently there are icons for Twitter, Dribbble, Forrst, Github, Google+, Facebook, LinkedIn, LastFM, Skype, Flickr, Vimeo, and WordPress.

WordPress.org Theme Directory

I’m going to submit this to the Theme Directory. The only thing I haven’t quite figured out yet is how to handle the navigation on mobile. The problem is that you can’t reliably set more than one level of sub-menus right now. Since they expand out to the right, eventually stuff is being drawn outside the page. I have some ideas for this, so hopefully I can get that figured out in the next week and get this thing up for review.

Since there’s no good way of distributing themes with specific TypeKit typefaces, I added some Google Fonts fallbacks that can be enabled in the customizer.

Theme Customizer

There are a few things you can specify in the customizer. The copyright notice starts you with a format of “© {yyyy}”. I replace the “{yyyy}” pattern with the current year. Hopefully it’s not super confusing, but I’m not replacing any other pattern so “{yy}” isn’t going to get you the last two digits of the current year or anything.

Google Fonts can be enabled, as I mentioned previously.

The background image or color can also be specified. The default is what I have set here, but you can upload your own image or pick your own color too.

Notes

  • I stole the awesome ❮ and ❯ arrows from Chexee.
  • The Wisconsin glyph in the footer is from StateFace.
  • Retina, baby. The entire thing has been written to take advantage of a retina screen. And it’s nice.
  • There’s a bunch of stuff from _s in here. Take a look. That’s the place to start.
  • The current breakpoints are at 650px, 800px and 1170px.
  1. Honestly, I don’t even remember how I came up with this number. It seems unreasonable. But I’m pretty sure I counted at some point. ↩

P2 Hovercards

Posted on

A couple weeks ago I worked on a project that we called P2 Hovercards. We released the code on Github last week for anyone else that might find them useful. The idea is that you can see additional information about certain links without clicking on them, therefore keeping you on the P2 and not diverting your attention unnecessarily.

Spotify Widget

Posted on

I wrote a little WordPress widget over the weekend that will add a Spotify play button to your website. The options you get are similar to the options you would see on the Spotify Developer site. It essentially just adds an iframe based on the parameters you set. Nothing too complicated here, but it’s nice to have as a widget that you can move around with the WordPress drag-n-drop interface.

ack shortcuts

Posted on

I just watched Daniel Bachhuber’s “The Zen of WordPress Coding” talk from #wcphx in February.1 There’s some really good stuff so I definitely recommend it if you’re a WordPress developer. He used a tool that I had never heard of called ack. Ack is “designed for programmers with large heterogeneous trees of source code…” — it’s faster than grep.

Daniel talks about some useful options for ack that make it especially useful for WordPress in a command like ack --before-context=10 --ignore-dir=wp-admin 'function esc_'. Find all the function definitions that start with “esc_”, ignore the wp-admin directory, and print the 10 lines before the function definition because that’s where the documentation is — genius. As soon as I saw this I knew it’d be something I could use all the time, so I opened the dotfiles.

a()

First, a shortcut function called a that runs a similar command and automatically wraps double quotes around the entire arguments string.

function a() {
  if [[ $ARGC -eq 0 ]]
  then ack
  else ack --before-context=10 --pager='less -FRX' "$*";
  fi
}

It checks that there were actually arguments specified and then runs ack with --before-context=10 to show the 10 lines before every result, --pager='less -FRX' so the results are paged and the formatting is kept (it also automatically quits if the results aren’t longer than one page), and "$*" which takes all the arguments and wraps them in double quotes. Now I can do something like a function esc_.

af esc_

Then I realized that it would probably be useful to have a shortcut since looking up functions is probably the most useful part of this in the first place. So, I created af.

alias af='a function $*'

This one is even more straight forward. Essentially, it turns what would have been ack --before-context=10 --pager='less -FRX' 'function esc_', or a function esc_, into af esc_.

  1. The slides for Daniel’s talk are available on his website. ↩

Jetpack Comments

Posted on

I’ve talked about it before: I like running my own web server. WordPress.com is awesome (seriously, go sign up for a blog), but I’m a nerd and I like configuring nginx and Apache and deploying with git. Lots of other people do too. It’s why Jetpack exists in the first place.

There have always been a few things about WordPress.com that I’ve been jelous of. That list got smaller this week with the release of Jetpack comments though. I’ve been searching for the right comment solution for a long time. WordPress comments are cool because you can style them with the rest of your site — I always saw the comment form as a barrier though. So I tried things like intensedebate and disqus — those things are cool because they make the process of submitting a comment and identifying yourself with a site you’re already logged in to very simple. The problem with disqus and intensedebate is that they’re not all that customizeable. But Jetpack comments fixes this.

Jetpack comments replaces the standard WordPress comment form with one similar to what you see on WordPress.com blogs. You can identify with WordPress.com, Twitter, or Facebook. Comments are submitted to your site just like they are with the normal comment form. I’ve already switched from disqus here.

One thing to note, your site must use the comment_form() function to generate the form. Some themes create the comment form manually which doesn’t give the plugin anything to hook into.

Now I just need to work on the comment styling here 🙂