P2 Theme

After trying to sort out the best way to facilitate asynchronous communication for a group project, I was reminded of P2. This talk by Pete Davies at WordCamp SF this past year tells a very compelling story about why you should use P2 on your project. You can use it for free on WordPress.com or download it to run on hosted WordPress. It took all of a few minutes to sign up for a free WordPress.com site and switch to the P2 theme. After that it was all work.

Using LESS as a Live CSS Engine

It generally just seems like a bad idea to trigger processing of LESS (or SASS) with a page load. Honestly, CodeKit does so much more than just compile your stylesheet into CSS that it doesn’t even seem worth it to me. You should still be generating minified CSS and Javascript as well as optimizing your images. Plus the syntax checking I get on my Javascript. Not to mention all the cool stuff it does with my browser. I’d still be using CodeKit even if I didn’t have to worry about compiling SASS.

Andrew Powers:

One of the coolest things about implementing LESS inside of the framework is that we’re able to dynamically control colors and typography based on user selections. This allows us to design things well, while still giving users the ability to customize colors and type.

Since WordPress 3.4, there is a theme customizer built in that allows you to dynamically control colors and typography based on user selections. Otto has a couple of really good articles on how to use it. The first, How to leverage the Theme Customizer in your own themes, is a good introduction to the customizer. I was happy find that there’s even Javascript that reloads the page within the customizer if you choose a new color so you don’t have to save it and manually reload to see what it will look like (possibly only in 3.5 and up).

Users are able to actually add their own LESS in the admin options panel. They can use common variables for the background color or main fonts.

If your users want to write custom code for their theme, don’t add a textarea to your admin panel that allows them to write code, encourage them to write a child theme — it’s what they’re here for.

v11

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. 

WordPress login/out

Lately I’ve been putting a login link in the footer of my site, but it’s also nice for that to be a logout link when you’re already logged in as well as inserting a link to the site admin section. This line of code does exactly that:


<?php if ( is_user_logged_in() ) { echo "<a href='" . get_option('siteurl') . "/wp-admin/'>Site Admin</a> |"; } ?> <?php wp_loginout(); ?>

JoshBetz.com v3.0

For the past few weeks I’ve been working on a new website layout and here it is. The logo at the top actually goes back few months when I started a new design to incorporate my portfolio into this website, but ended up ditching the design. After a recent design job, I decided to give it another go. This time I’m very pleased with the results. I took my time, for the most part, and tried not to rush anything. In the end, I couldn’t wait to push the site live though, and it currently is not completely finished. There are probably a handful of little things to go back and finish along with the only major part of the design to finish, the portfolio page. (more…)