A Whole New Dented Reality

Back in April, this blog celebrated 10 years of existence, and it’s been almost five years since the theme on this site changed. Yesterday I decided to just go ahead and flip the switch on something I’ve been working on here and there since late last year. It’s a complete new, very experimental theme that I call “Homeroom“.

There are some specific things driving what I was aiming for with Homeroom:

  1. First and foremost, a lot of the decisions are based around the intention that it would use Keyring and the Social Importers to pull in my content from all over the web. With that much data being collected and displayed here, I realized I couldn’t go exactly with a traditional blog layout, and had to get a bit creative with some types of data.
  2. It’s intentionally heavily integrated with Jetpack (although it works without it). Jetpack powers the comments, infinite scroll, sharing buttons and more. I’ve taken care to try to make that integration feel as native as possible (although I know there’s more to be done there).
  3. Homeroom started out as an _s-based theme, although it’s been pretty radically modified from there.
  4. I’m using a technique that I’ll call “post lookahead” when going through the loop to check the next post, and do some things like collapse sequential posts if they’re the sam type of thing.
  5. I wanted something with a bit of a timeline feel, since it’s now collecting some much data, and it’s all sequential; I wanted to show the relationship of different things along that sequence of time.

It’s not particularly beautiful because, well, I’m not a designer 馃檪 In the near future I’ll be talking to some friends who are though, so hopefully I can get some advice on improving things there. I’ve been mainly focused on getting it working the way that I wanted it to. Here are some other bits that might be interesting:

  • Allows custom Header and Backgrounds via wp-admin
  • Options (currently defined in a file, because I haven’t built a UI) to control some preferences around stuff like hiding Foursquare check-ins until a set amount of time after they happened (to help avoid the creepers!).
  • Heavy use of Post Formats
  • Ability to hide Twitter replies, which you probably don’t want showing up on your site.
  • There’s the beginnings of a front-end post box (partially inspired by o2), although it doesn’t actually work yet
  • Handles Foursquare checkins differently. Rather than showing them all as individual posts, it “collects” them and shows a single, multi-point map at the end of each day.
  • Shows a map automatically on any post using the WordPress-recommended postmeta fields.
  • Using the new taxonomy introduced in Keyring Social Importers 1.4, allows you to easily filter your display based on where posts were imported from.
  • Includes a custom icon font from IcoMoon to display social icons indicating where things were imported from.
  • Search results use a Masonry-based layout so that you can quickly scan the results. Unfortunately something is broken with the search mechanism on this site right now, so that’s not working 馃檨
  • Automatically lists out child-pages when you view a Page that has them, for example my Projects page.
  • Dynamic heading re-writes: format your posts for individual viewing, and the H1 etc tags are automatically “stepped down” on listing pages to maintain hierarchy
  • Has some fun mapping stuff for TripIt in particular, which draws out a “flight path” between airports. Check it it out in my TripIt section. Here’s a fun one.
  • Uses Photon to apply some effects to images in places
  • Borrows liberally from the styling of sites like Instapaper and Readability.

There’s still a聽lot of work to go, both on the theme itself and the importers that power a lot of the content. I wanted to get this online because I knew that’d motivate me to spend more time on it. I’m also hoping that other folks might be interested and/or have some ideas on ways to improve the theme. I haven’t got all of my content imported yet (that takes a while 馃檪 ), but you’ll see more and more things fill in over the coming week hopefully.

If you’ve got any ideas for improvements, I’d love to hear them down in the comments!

Moving Jetpack Sharing Buttons

I’m working on a new WordPress theme (for this site, and it’ll be released for download once complete). The theme is deeply integrated with Jetpack, and one of the things I wanted to do was have the Jetpack Sharing buttons appear in a location other than the very end of the content. Normally they are applied as a filter on the_content, so they just appear right at the end. I wanted to relocate them into a different location, and it turns out that’s really easy to do with the power of jQuery.

jQuery( document ).ready( function( $ ) {
	// Relocate Jetpack sharing buttons down into the comments form
	jQuery( '#sharing' ).html( jQuery( '.sharedaddy' ).detach() );
} );

The #sharing selector is just the DOM location where I want to move the buttons to, and the .sharedaddy one is the container that Jetpack places its buttons in normally. We just detach it from the normal position and then dump it into the new location exactly as it was.

Customizing WordPress 2.5’s Admin Panel

While I was poking around in a pre-release version of WordPress 2.5 (which has been slightly delayed for actual release), I found out that the Admin panel (everything under /wp-admin/) is now pretty easily customizable through CSS.

Basically what they’ve done is extracted all the color-based information from the admin CSS files, and put them into pluggable files called “Admin Color Schemes”. The cool bit is that it looks really easy to add your own! It looks like the Admin Color Scheme is one of the last (core) stylesheets loaded into a page as well, which means you’re really not limited to only changing the colors.

So how do you do it? Here we go:

  1. Download this plugin: WP Admin Color Schemer 1.0
  2. Install and enable the plugin, which will look for CSS files inside its own “/schemes/” directory (/wp-content/plugins/wp-admin-color-schemer/schemes/*.css).
  3. Create your own CSS file and drop it in that directory. The filename of the CSS file should be a lower-case, letters/numbers only, dash-separated version of the name of the scheme. For example, a scheme called “Billy’s Amazing Scheme” would be in a file named “billy-s-amazing-scheme.css” (replace everything that isn’t a letter or a number with a dash, but only ever have a single dash at a time). Make sure the first line looks like this (with “My Admin Scheme” being the name you want to give your scheme, and each hex value representing one of the main colors used in your CSS palette. This must be the first line of the CSS file, be commented out as below, and must contain commas, but the spaces are optional):
/* My Admin Scheme, #000000, #111111, #222222, #333333 */

Once you’ve done that, go to your profile page within the Admin Panel, and you’ll see your new scheme and should be able to easily select it. When you hit the Update button, your Admin Panel should take on the new colors immediately.

If you’d like to use one of the built-in Admin Color Schemes as a starting point, then they live at /wp-admin/css/colors-classic.css and colors-fresh.css.

Now you can easily style your Admin Panel to match the rest of your site (and hopefully Theme authors out there will start packaging Admin Color Schemes to match their Themes).