Five Sass-y tricks to impress your friends


I am not ashamed to tell you that I was really reluctant to try Sass.

When you’ve been doing front-end development as long as I have (20 years this August), you know that there are new tools and techniques made available on an almost-daily basis. Most of them are fleeting at best, so I tend to wait until it looks like something is gaining some traction before I take the time to try it out.

But Sass won me over on the very first project I put it to work on and I’ve used it on practically every project since. Along the way, I’ve picked up some clever tricks that make life easier and development faster.

Here’s a small roundup of some of my favorites. Enjoy! Continue reading

Creating interactive image maps in WordPress


Last year, I created a website for a client to showcase their new building. We wanted to make it easy for site visitors to explore the new areas of the new building while also making it easy for the client to update the building information.

The only materials available to us were the architect’s plans and renderings for the new building. We created an interactive floor plan where site visitors can click on different areas of the building to get more information.

A bit later on, I was doing another project for the same client, and we found a place where wanted similar functionality available. I also got a few inquiries from potential clients wanting a similar functionality for their own websites and that’s when the lightbulb finally went on – this needed to be a WordPress plugin. But it was a little more than I could handle myself, so I teamed up with Nathan Tyler of Tyler Digital.

We set aside four hours each week and got together to work on it – 4 months later, we announced the very first release of Draw Attention. And we’ve been working on it since then to add new features and keep things all up to date. Now it’s easy for anyone to create interactive image maps. Here’s an example of how it works:

Designer’s Desk

Click on the items on the desk to learn more.


Designers need a computer to do their work well. One with a big and gorgeous screen is preferable.


A tablet is helpful for taking notes, taking photos of great design, or sketching up design ideas on the go.


Great for keeping up with all those Instagram, Vine, and Periscope happenings.


Need to be able to pick out tiny issues with a design and set up crisp and gorgeous typography.


Helpful for typing out tweets and answering emails.


Best tool around for pushing pixels around a screen.

Graphics Tablet

For those times when fine-grained control over a design is necessary.

Small notebook

Great for slipping into a pocket when going out for an inspiration walk


For drawing sketches and detailing plans for world domination.

Mechanical Pencil

Best for getting sharp, thin lines in sketches.

These images are super easy to create and don’t require you to know any code. It’s easy to click to draw the highlightable areas of the image, and those can link to an external URL rather than loading up the more info box on the right.

In the Pro version of the plugin, you have a variety of layout options including tooltip and lightbox. The image is responsive, too! The Draw Attention area will automatically adjust to fit your theme and your site visitor’s screen. You can learn more about it, see some other demos, and watch a video over at We’re super excited about all the ways people have been using it and hope that you find some clever ways to put it to work for you, too.

jQuery for Designers and a weekly screencast!


book-coverI’m pleased to announce that after months and months of writing and editing that the 2nd edition of jQuery for Designers is now available!

Even if you’ve already got the 1st edition sitting on your bookshelf (thank you for that, by the way), you’ll want to check out this updated edition because it’s a huge update. I’ve added in new chapters on responsive design, creating charts and graphs, working with images, and parallax and other scrolling effects.

I’m really proud of how well it’s turned out. I literally combed through each and every code snippet and made sure it was updated to use the latest and greatest from the jQuery library. I removed references to any outdated or abandoned plugins and subbed in updated plugins that are being actively maintained.

And if that’s not enough jQuery learning for ya, I’ve also released a weekly screencast – short snippets that walk through how to use jQuery in digestible bites. If you’re just getting started learning jQuery, then you’ll definitely want to check it out – each week you can follow along and learn a little something new about jQuery.

Here’s the first episode, though there are a few more to go with it!

Now, with that big project out of the way, I’m looking forward to working on some new and interesting stuffs. Stay tuned!

How I beat writer’s block


In today’s episode of the WP Unicorn Project, Suzette and I were lucky enough to speak with Jennifer Bourn about content strategy. We spoke a little bit about techniques for overcoming writer’s block, and I wanted to share mine. It’s call free writing.

I learned this technique in a writing class in college. You get three pieces of paper, a pencil or a pen, and a timer. Set the timer for 15 minutes, then scribble furiously as you try to fill all three pages full from top to bottom in 15 minutes with your writing. No stopping to think, no pausing, no editing.

You might be thinking, “But if I have writer’s block, what am I going to write?” Well, if nothing comes to mind, then just start writing “I don’t know what to write. I don’t know what to write. I don’t know what to write.”

If all you do is just write that over and over again for the entire 15 minutes – mission accomplished! The goal isn’t to write anything usable or useful or even anything that makes sense. The only goal you have is putting words on a page. Any words. Any words at all. The goal is to write fast and fill as much of the three pages as you can. At the end of the 15 minutes, you crumple up the pages and throw them away.

Within 15 minutes, a funny thing happens. Your brain quiets down, you focus, new ideas form. It’s a form of meditation. And no, you can’t type. There’s something about the physicality of the pencil moving across the paper that makes it work so well. It’s just not the same when it’s a keyboard.

How it works

I usually kick off a free writing session by complaining about all the things that are clogging up my brain and making it impossible for me to write: the electric bill I have to remember to pay, the client who wants something by tomorrow, phone calls I need to make, emails I have to write, the fact that my oven desperately needs to be cleaned. Somewhere around the 7 minute mark, things shift. My brain clams down, I feel focused, and my thoughts actually become coherent. By the end of 15 minutes, my writer’s block is cured and I’ve got at least one idea for something I can write about.

I use free writing for other things as well. If I get an upset email from a client and I’m not sure how to respond, a free writing session helps me to move past my own emotions and see the situation from my client’s point of view. If I’m stressed out by the length of my to do list and unable to focus on anything, a free writing session helps to clear my brain and clarify what my priorities should be. If I make a mistake or let somebody down, a free writing session helps me put my gaffe in perspective, focus on how I can fix it, and not get too worked up about it.

Try it!

Next time you’re stuck for an idea for a blog post, try a free writing session. Have to write your own bio? Ugh, that’s the worst. Free writing session! Unsure what sorts of content to include on your website’s homepage? Free writing session!

It always works for me without fail, so why don’t you see if it works for you too? All you need is paper, a pen or pencil, and 15 minutes.

Image credit: Fredric Guillory

Responsive sticky footer woes and fixes


Over the years, I must have used about a dozen different approaches to coding up a sticky footer, with varying degrees of success. I recently stumbled upon an elegant CSS3 solution and immediately put it to work on the theme on this site. But then I discovered some problems. Here’s how I fixed them.

What’s a sticky footer?

Alright, let’s say you’ve got a design that involves a big, chunky footer like the one on this site. If you have a page or a post that’s light on content, maybe just a few lines (like my contact page) and your site visitor happens to have a tall browser window, you don’t want that big footer hanging out in the middle of the screen. You want it down at the bottom of the browser window.


That is the art of coding a sticky footer.

The flexible CSS3 solution

Before CSS3, many sticky footer solutions required you to specify an exact height for a sticky footer, in either pixels or ems. But if your sticky footer contains some WordPress widgets that could be just about any height, then a fixed-height solution just won’t work. Enter CSS3. I usually start a WordPress theme with Underscores, which gives us an HTML structure for the page like this:

We can add just this bit of CSS to code up a responsive sticky footer that works, no matter how tall (or short) it might be:

Now we’ve got a responsive sticky footer that will stick to the bottom of the window.

The first problem and solution

The first problem I encountered was trying to get images, especially images with captions, to behave as expected in a responsive layout. No matter what I tried, the .wp-caption was just too wide, causing horizontal scrolling when the screen was narrower than the image/caption. After hours of downloading assorted themes to check my own responsive image CSS against theirs, it finally occurred to me what the issue was.

Anyone who’s ever had to place a long string of unbroken text, like a URL, in a narrow HTML table column has bumped up against the HTML table’s weird handling of widths when the content in a table cell is too wide. I went back in and added a fixed table layout to the .site div, and voila! My layout was fixed.

I thought it was all smooth sailing from there, until I got a message that my blog was difficult to read on iOS.

The second problem and solution

There I was, all gloaty that I’d remembered about using fixed table layouts, when I got this comment on Google Plus:

Screen Shot 2014-05-07 at 12.27.30 AM

Eek, that didn’t sound good. So I opened up my iPhone to take a look and confirmed that I was seeing the same behavior. The issue was that iOS’s famous momentum scrolling wasn’t working. So you had to laboriously scroll line by line and there was no way to swipe quickly up or down the screen to set off a smooth scroll up or down the page. And, yep, about halfway down, the page was just suddenly blank. What was going on?

Luckily, I didn’t have to poke around too long to find a hint on Chris Coyier‘s CSS Tricks. Turns out that because I had set the <html> element to overflow: hidden, and then the <body> element to overflow: scroll, iOS had taken that as a cue to disable momentum scrolling. Luckily, it was a quick fix to add it back:

And now we’ve got a nice, responsive sticky footer that scrolls nicely on iOS. Phew.

A new approach on the horizon

One thing you’ll quickly learn with CSS is that you can never get comfortable with anything. As much as I like this solution to a sticky footer for now, Flexbox has it all over CSS table-like layouts. Browser support isn’t quite where I’d like it to be just yet, so for now, I’ll stick with this solution, but I’ll be keeping an eye on browser support for CSS Flexbox as it’s an even better solution to the sticky footer conundrum.

Image credit: Mahalie Stackpole

Why frameworks make me cranky


The past few years have been witness to an explosion of frameworks and libraries: CSS frameworks, WordPress theme frameworks, JavaScript frameworks, PHP frameworks…frameworks for just about any language you might want to write code in.

On one hand, this is great. As developers, we tend to solve the same problems over and over again. It makes sense to take advantage of code that’s already written that solves the problem we’re solving right now. On the other hand, it’s so easy to become over-reliant on frameworks. It’s so easy to solve every issue by looking for a a bit of code somebody else already wrote to solve our problem.

What’s so bad about frameworks?

I think that probably the biggest problem is one that I see growing and growing – new and junior-level developers who learn frameworks rather than learning to code from scratch. Rather than learning vanilla JavaScript, they learn jQuery. Rather than learning to make multi-column, responsive CSS layouts, they learn Foundation or Bootstrap. Rather than learning to build WordPress themes, they learn Genesis or Headway. Why is that a problem?

Because someone who’s got jQuery and Bootstrap down can build just about anything, right?

It’s a problem because there’s no real understanding of how the underlying languages work. There’s no knowledge of cross-browser CSS bugs and differences and how to work around them. There’s no knowledge of all the quirks and idiosyncrasies in JavaScript and how they can work for or against what you’re trying to accomplish. There’s no craftsmanship. There’s no deeper understanding of how multiple languages fit together or how the whole is greater than the sum of its parts.

If you can’t create a complex layout without using Foundation, then you’re not a front-end developer. If you can’t code up a slideshow without using jQuery, then you’re not a JavaScript developer. If you can’t create a WordPress theme without using Headway, then you’re not a WordPress themer.

If you don’t know how to create a multi-column, responsive layout that works across current versions of all major browsers without the use of a framework, then you simply aren’t equipped to properly evaluate a CSS framework and determine if it’s the right one for the project at hand.

As my good friend Alex Vasquez likes to say, every framework has a point of view. The person or persons creating the framework have to make certain assumptions, and he/she/they will have their own viewpoints on best practices, how best to deal with Internet Explorer, how best to deal with situations where JavaScript is disabled, etc. The best frameworks for you to use are the ones that match best with your own point of view, assumptions and opinions.

When is it appropriate to use a framework?

You might think after that little rant that I don’t use frameworks, but you’d be wrong. I do. In fact, there are a few that I’m downright smitten with. All their potential drawbacks aside, there are times when it just doesn’t make sense to re-invent the wheel. Let’s be pragmatic. When should you use a framework?

  1. When you can read through a framework, understand everything it’s doing, and why it’s doing it. When you can understand what decisions were made, and agree with why they were made. Go grab an uncompressed copy of jQuery and read through it some time – it’s beautiful, it’s simple, it’s elegant, it’s smart.
  2. When you wrote it yourself. Any developer finds themselves solving the same issues over and over – if there isn’t a pre-built framework that matches your style, create one yourself. You’ll learn more than you thought possible about the language you’re working in and will develop an even deeper and greater understanding.
  3. When you are not, and do not desire to be, a developer, but you really just want to get something accomplished fast. In the real world, sometimes a business owner really does want to build out their own website. They don’t care about making a CSS layout work cross-browser for anyone but themselves. They’re unlikely to ever tackle a web development project again.
  4. You’re learning and you need a leg up to be competitive. There are a million caveats here, but let’s face it – we all need to pay our rent, or land that job, or finish that project before the deadline. If this is where you are, see if you can poke around in the framework you’re working with to understand what’s going on. Read the documentation to understand the point of view of the creator and the assumptions that were made. A well-written framework can be a great learning tool. Be very careful not to rely too heavily on a framework – that’s like a baby that continues to crawl long after he should have learned to walk. Take every opportunity you possibly can to work without a framework so you can learn.

Hand-crafted by master craftsmen
(and craftswomen)

On a recent episode of The Big Web Show, Jeffery Zeldman described a perfect analogy.

Let’s say you wanted to learn to be a luthier – a violin-maker. You could attend an all-weekend intensive course in violin-making. There, you’d learn how to choose the best pre-cut pieces of wood to assemble into the violin body. You’d learn how to evaluate the different types of violin strings on the market and how to buy the best ones for the type of wood you used for the body. You’d learn how to buy the right bow to match the violin you made. You’re a luthier, but you’ve taken many shortcuts to arrive there, and you continue to take shortcuts while you ply your craft.

Or, you could go and be an apprentice in Stradivarius’s workshop. There, you’d learn to walk in the forest and select just the right tree to fell for the wood. You’d learn how to cut and cure the wood. You’d learn how to cure and cut sheep gut to make the strings. You might even learn which shepherds would sell you sheep that produced the best possible raw materials. You’d learn how to gather and treat horsehair to create a bow – what breeds of horses, what age of horse, etc. were the best. And eventually, after months or years of working with journeymen and masters, you’d eventually be awarded by a panel of masters and be allowed to join a guild and call yourself a master luthier. No shortcuts taken.

You can tear a poem apart to see what makes it technically tick, and say to yourself, when the works are laid out before you, the vowels, the consonants, the rhymes or rhythms, “Yes, this is it. This is why the poem moves me so. It is because of craftmanship.”

But you’re back again where you began. You’re back with the mystery of having been moved by words. The best craftsmanship always leaves holes and gaps in the works of the poem so that something that is not in the poem can creep, crawl, flash or thunder in. – Dylan Thomas, My Definition of Poetry

In our hurry-hurry world, we’re always in such a rush to get where we’re going, but there are no shortcuts to becoming a master.

It takes time to learn the nuances. It takes time to develop an appreciation and a deep understanding of a complex craft and to learn to do it well. And it takes time to continue learning as things change – as new browsers are released, as new versions of JavaScript and CSS and HTML are developed, as the web moves forward. It also takes a community of journeymen and masters to help you along your way.

Dig into the nitty-gritty details. Read up on different opinions about progressive enhancement and graceful degradation and form your own. Tear apart frameworks, looking for the assumptions, the points of view, the opinions. Look for all the places you can ask “What happens if …?” and find out. Experiment. Play. Ask questions. Anticipate the unexpected. Learn your craft and execute it beautifully.

Because code really is poetry.

Image credit: Alice Carrier

Eight tips for improving responsive typography


Don’t underestimate the importance of well-done typography in making a website appear more professional, polished, and just plain nicer. But in the world of responsive design, we need to have a few extra tricks up our sleeve for accomplishing gorgeous web type. Here are eight things you can do to improve typography in your responsive designs:

1. Use a modular scale

A modular scale is series of numbers calculated with a ratio. You choose an ideal text size (often 16 pixels for web) and then divide and multiply that number by a ratio multiple times to create the scale. Then, when you’re selecting font-sizes, line-heights, margins, and paddings for paragraphs, headings, lists, etc., limit yourself to values from the scale. You’ll find your typography has a more polished and professional feel than if you just eyeball the values. My favorite tool for calculating a modular scale quickly is by Tim Brown. Read Tim’s A List Apart article or watch his Build Conference talk for in-depth instructions on how to create and use a modular scale.

2. Use a global reset

The modular scale is really nice, but it’s not going to do you much good if you’re fighting against the browser’s default styling of various HTML elements. To start off with a totally clean slate and gain full control over the elements on the page, use a global reset in your CSS. My favorite reset is Eric Meyer’s Reset CSS. I use it on nearly every website I work on. Just copy and paste that CSS snippet to the top of your CSS file, and you’re all set.

3. Choose an appropriate typeface

The typeface you choose for your text communicates a feeling more strongly more than nearly any other element in your design. Slow down, do some research, and find a typeface that’s appropriate for your content, your audience, and one that conveys the right emotional feel.

Additionally, if you’ll be using bold, italic or bold italic text, be sure to select a font that includes a true bold, a true italic, and a true bold italic. Otherwise, the browser will just do its best to emulate bold and italic text and the effect is often less than desirable. If you’re choosing a Google font or some other web font, check for the existence of a true bold and a true italic, and be sure to select and embed those styles on your page, too.

4. Work with flexible units

Rather than setting font-sizes, margin, and padding in pixels, choose a flexible unit, like ems or rems. Ems are relative to their parent while rems are relative only to the root element (HTML). Jonathan Snook’s got a very nice writeup on his blog explaining the differences in detail. In a nutshell, the advantage is that you can resize all the text in your document in one line of CSS while maintaining the size difference ratios between your headings and text. Here’s an example using ems:

As the screen gets wider, the base font-size for the document gets bumped up – and all the text in the document resizes along with it. You can accomplish the same thing with rem units. You can’t do this with pixels – you’d have to write a media query on every single element to adjust its size according to the width of the screen.

5. Set leading carefully

In web design, we usually refer to leading as line-height, as that’s the CSS property we use to set it. As with font-size, margin, and padding, you’ll want to select numbers from your modular scale for setting line-height. But there’s an important key: you don’t want to specify a unit of measurement with those numbers. Keep your line-heights flexible by using unitless numbers. This allows the line-height value to cascade down the DOM in a much more elegant and useful manner.

Also note that the amount of leading you need depends on a number of factors – some typefaces will be more readable with looser leading, while others have a nicer feel when it’s a bit tighter. Larger headlines almost demand a tighter leading than the leading set for the body text. And if you’re working with a reversed design – with light text on a dark background – it’s almost guaranteed that more leading will make your text a lot more readable. And the wider your column of text? The more leading you’ll need to make it easy for your reader’s eye to easily track to the beginning of the next line.

6. Control measure

On wider screens, unconstrained text very quickly gets to a really long measure that’s challenging to read. You’ll want to be sure to take steps in your design to control the length of each line of text. There are a number of techniques you can use to do so: set a max-width on your content to be sure it stops growing with the window width, add a column or columns to the side of the main content area when the screen gets wider, or even bump up the font-size a bit as the window gets wider. The ‘ideal’ number of characters per line varies, depending on typeface, leading, font-size, etc., but you want to try to get somewhere in the range of 35 to 70 characters per line. Any narrower and the text gets annoying to read as your eye spends more time jumping to new lines than cruising comfortably across. Any longer, and it’s difficult for your eye to keep track of which line is next.

7. Take advantage of new CSS psuedo-classes

CSS now provides us with the ability to select and style the first letter, the first line, and to select the first element of a given type. This allows us a lot of flexibility in designing gorgeous introductions to our text passages, while still being flexible and allowing our text to wrap, resize, and otherwise adjust to different screen sizes.

Alice’s Adventures in Wonderland

CHAPTER I. Down the Rabbit-Hole

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, ‘and what is the use of a book,’ thought Alice ‘without pictures or conversations?’

So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.

There was nothing so VERY remarkable in that; nor did Alice think it so VERY much out of the way to hear the Rabbit say to itself, ‘Oh dear! Oh dear! I shall be late!’ (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but when the Rabbit actually …

These styles for the first paragraph, first line, and first letter are this simple:

8. Get a little help from JavaScript

As flexible as CSS can be in responsive design, we can progressively enhance our pages and add a little extra punch with just a bit of JavaScript. And we have no shortage of scripts to take advantage of. Here are some of my favorites:

  • FitText: Great for creating headlines that perfectly fill the screen width
  • Lettering.js: Fine-tune kerning or apply styles to individual letters. Check out the gallery for ideas
  • Responsive Measure: Automatically adjusts font size to create an ideal measure
  • Molten Leading: Automatically adjust line-height depending on screen width
  • SlabText: Creates big blocks of perfectly sized headlines

It just takes a bit of extra planning and forethought to accomplish beautiful web type and push your responsive designs over the edge from ‘nice’ to ‘wow’. Your readers will thank you, too, when your articles and content are just that much easier for them to enjoy.

Image credit: Taryn

Animate text over images on hover without JavaScript


A couple of months ago, I published a tutorial showing how to show text over images on hover without using JavaScript. When I presented to an HTML5 Meetup Group a couple of weeks ago, I took that idea and ran with it, adding some extra special animations, and I’ll show you how to do it too. Here’s what we’ll be creating:

There are three animations happening simultaneously when you move your mouse over each image:

  1. A zoom effect on the image itself, created by scaling the image up 140%
  2. The text and its transparent black background fading in
  3. The text dropping in from the top

You’re free to use all of the animations or to remove 1 or 2 of them – it all depends on how you’d like your final product to look. Let’s take a look at how to accomplish this.

1. HTML Markup

I’m going to put the images in a list, and then use the HTML5 figure and figcaption elements to hold the images and associated text:

2. CSS Styles

First up, we’ll modify the list style so that our images display side-by-side rather than in a list with bullets as they usually would. I’m going to use Eric Meyer’s reset, and then add these styles for the list of images:

We’re also setting a width and height for the list items, images, captions and the paragraphs inside the captions. We position the captions over the images, but set their opacity to 0 so that they’re not visible.

3. Show text on hover

Now let’s add a bit of CSS to show the text on hover:

This just changes the opacity of the figcaption to 1 when the list item is hovered. Now we can see the text. This will work just fine in most browsers, even if they don’t have support for the other CSS3 tricks we’ll be adding in the next few steps.

4. Zoom the images

Now it’s time to dig into adding the animations. Let’s tackle the image zoom effect first. I mentioned earlier that this is accomplished by scaling the images up 140%. Here’s how we’ll do that:

That first selector, for .photo-grid img was already in our CSS file. We’re just adding a CSS transition – along with the required browser prefixes. Then, we’ll add a :hover pseudoclass and add a CSS transform to perform the scaling, with browser prefixes.

5. Drop in the text

Next, let’s tackle that dropping-in effect on the text.

Just like with the image zoom, the .photo-grid figcaption p selector was already in our CSS. We’re just adding in the CSS transition. Then we add in a CSS transform to move the text 40px down.

6. Fade in the caption

Finally, let’s add the fading effect for the figcaption.

Here we’re adding two new CSS properties – a transition and a transition-delay. Because we’re zooming the image and dropping the text, we are going to wait a beat to start the fading effect so that the other animations aren’t lost in the shuffle.

And that’s it. Once again, our example is progressively enhanced. For those people who visit our page using browsers that don’t support CSS transitions or transforms yet, they’ll just see the figcaption and text appear when they hover their mouse over each image. But those who do have capable browsers get a little extra treat. And these are just the tip of the iceberg. Use your creativity to invent new animation combinations. Then share your links here so we can learn from each other!

Image credit: Moyan Brenn

How to Create an Alphabetical Index of Posts in WordPress


About a year ago, I was handed a design comp from a designer that required me to build out an alphabetical index for a custom post type in WordPress. You know, something like this:

WP Alpha Index

…where clicking on one of those letters would take you to a page showing only posts with titles starting with that letter. I managed to cobble together a solution that works pretty well. Not great, but passable. It involved writing quite a few custom functions – one to generate that bunch of links you see in that image above, one to register a query parameter so I could use it in WordPress, and then a few more functions to do the right queries in the database, a bunch of code in the template to make sure I was showing the right posts…and on and on.

I remember spending quite a bit of time hacking that all together and being pretty pleased with the results at the time. And then I promptly forgot about that ball of kludgy code…until that same designer handed me a design comp for another WordPress project just a couple months ago:

AZ Index WP

…and my first thought was, “Oh hey, I know how to do that. I’ll just open up that project from last year, and copy … OH SWEET MOTHER OF CHEESE WHAT WAS I THINKING?” Yeah. As I started hunting for and finding the bits of code scattered throughout the theme and plugins I’d written to accomplish that last time, I realized that there had to be a better way to go about this.

I was right. You can do this with a lot less code.

I was lucky to come across this post from Kathy is Awesome which set me on a much, much better path, though I quickly realized this bit of code was missing a few important things I needed. But with this little push in the right direction, I was off and running. And here’s how you can accomplish this bit of WP magic:

1. Plan a new plugin

This new plugin is going to do three things:

  1. Register a custom post type (I’m working with songs and song titles for my example)
  2. Register a custom taxonomy
  3. Use the ‘save_post’ hook to automagically assign new posts to the right taxonomy

If you’re going to be creating an alphabetical index of regular old blog posts, then you can skip that first step.

And, in case you’re wondering, yes, you could do all three of these things in your theme’s functions.php. But chances are that you’d like to have your custom post type, custom taxonomy, and alphabetical index available even if you decide to change themes or re-design your site, so a plugin is the better way to go.

2. Create a plugin

Go to /wp-content/plugins and create a new folder. I’m going to call mine alphaindex. Then create a blank index.php inside that folder.

Now, inside of index.php, we’ll add our header comment that tells WordPress about our plugin:

3. Register a custom post type

Next up, we’ll create a custom post type. I’m working with songs for my example, so I’ll create a post type called ‘song’.

This is a pretty common WordPress thing, so I won’t go into detail about creating a custom post type here. If you want to learn more about working with custom post types, check out the Codex.

4. Register a custom taxonomy

Now that we have a custom post type, we’ll create a custom taxonomy for that post type. I’m going to call mine ‘alpha’:

Again, since this is a pretty common WordPress thing, I won’t go into detail about creating custom taxonomies – there’s the Codex if you want to learn more. But I do want to point out a couple of important things about the way this taxonomy is set up.

First, be sure to set 'hierarchical' to 'false'. We don’t want to work with a hierarchical taxonomy here. Next, by setting 'show_ui' to false, we’re hiding the taxonomy from the WordPress admin. That allows our alphabetical index to appear to work automagically – you can set that to true if you want to see the taxonomy in the WordPress admin for troubleshooting or to assure that it’s working as expecting while you’re coding it up.

Also, yes, if you wanted to, you could register the custom post type and and the custom taxonomy inside the same function since they both get called on the 'init' hook. It works fine either way – just personal preference.

5. Automagically assign the correct taxonomy to the post when it’s saved

We’ll use the save_post hook. Here’s the function:

I’ve included comments throughout to explain what we’re doing step-by-step. Now, each time we save a post, the correct alphabetical taxonomy gets assigned.

6. Link to letters

Now that we’ve used a taxonomy for the letters of the alphabet, we’re just working with a taxonomy. To display a list of links to each letter, we just use wp_list_categories in the theme templates wherever we want them to display:

If you want to set up a special layout for these pages, create a taxonomy-alpha.php template in your theme.

7. Sort the posts alphabetically

Since we’re sorting our posts by alphabet letters, it makes the most sense to also sort them alphabetically. We’ll use the pre_get_posts hook. Use this function:

Now anytime we view the post archive for our custom post type or an archive page for our alpha taxonomy, the posts will be sorted alphabetically.

Now, next year if I need to do this again, hopefully I won’t find my code quite as cringeworthy. I especially like that we’re using the taxonomy functionality that’s already a part of WordPress – it makes it easier to work with and makes for nicer URLs too. Yay for no query parameters being required (as long as you’re using pretty permalinks of course).

In my case, I was creating this alphabetical index on a new site that didn’t have any content yet. What if you’re adding an alphabetical index to a site that already has dozens or hundreds of posts? That original post I referenced over at Kathy is Awesome shows you how to go through any existing posts and assign them to the correct taxonomy.

Image credit: Kristin Nador


Should everyone learn to code?


You keep using that word…

We hear about this a lot. Learning to ‘code’. But what are we talking about when we’re talking about coding?

Because that’s not just one thing. There are any number of different languages you could learn – HTML, JavaScript, Python, Java, Objective C, Basic, PHP and on and on and on. At some level, all of those could be considered ‘coding’.

When I say coding, I’m talking about anything you can use to make something with a computer, whether that’s a website, an iPhone app, a game, or a piece of software.

When I say I think everyone should learn to code, I mean that I think everyone should have the skills to make at least one simple, basic thing using a computer.

A generation of coders?

During Computer Science Education Week in December, the White House released a video of President Obama encouraging kids and teens to learn to code. He said, in part:

“Don’t just buy a new video game; make one. Don’t just download the latest app; help design it. Don’t just play on your phone; program it.”

And unfortunately, this message received a lot of backlash from programmers and developers. Rightfully proud of our hard-earned and specialized skills, we programmers balked at the suggestion that just anyone could learn to do what we do. The Year of Code initiative, announced this month in the UK, was received with similar outrage.

On one level, I agree. Because not everyone is cut out to be a coder.

But, I think it’s still important that everyone gets the chance to learn.

And no, I don’t think that if we start making some sort of coding a regular part of our school curriculum that we’ll produce a generation of coders. After all, we all learned anatomy in health class, but precious few of us are qualified to perform a heart transplant. We learned about history, literature, social studies, music, mathematics, biology, physics, economics, psychology, and anthropology, but few of us make our livings in any of those fields.

Teaching coding in schools does not mean turning out a generation of qualified coders. It means exposing a generation to yet another area they might consider for future study. Many will find they don’t have the knack for it, many will find they don’t care for it, but a precious few will discover a natural inclination and will fall in love with a skill and a field they wouldn’t have considered otherwise.

And that, to my thinking, is one of the points of our wide-ranging approach to education. We teach all the students a wide variety of topics not just to produce well-rounded, intelligent adults. But also to allow students to explore and discover the topics that make their hearts sing and where their natural talents shine through.

Why it matters

I think that because I deal so frequently with technologically-challenged small business owners, I see the gap that seems to be getting larger and larger where many people lack even a basic understanding of what’s involved in coding a web site or an app. So often, a potential client’s expectations about how long a project will take or how much it will cost are so far out of touch with reality that a project can’t possibly move forward.

I don’t mean to criticize, because it’s not their fault. They’re sold constantly on the idea that everything with computers is easy and quick and involves little more than flipping a few switches and clicking a few buttons. They’ve never attempted to get a fancy JavaScript trick to work correctly in a dozen different browsers and have no idea what goes into actually making that work.

Admittedly, that’s a purely selfish reason for wanting everyone to learn to code. But there’s more to it than that. There is currently such tremendous opportunity in coding – there are more available jobs than there are people to fill them. When we teach people to code, we empower them. We enable them to break through glass ceilings, provide for their families, make meaningful contributions, and live better lives.

To that end, I’m proud to be a founder of the Los Angeles chapter of Girl Develop It. We’re currently half-way through our first offering, a four-session course introducing students to HTML and CSS. A class of a dozen women and 1 man, ranging in age from college students to retirement, have now built a simple web page that’s got a custom background color and text in the typeface and color of their choosing. It’s a humble beginning, but I hope it leads to so much more for them.

If you believe in our cause, I’d be ever so grateful if you’d get involved. We need classroom spaces throughout Los Angeles, we need teachers who are passionate and engaging, and we need sponsors to help cover costs. Just contact me if you’d like to help.

And if you’re not in Los Angeles, maybe you could get involved with your local chapter. And if there isn’t a local chapter, maybe you could be the one to start one.

Image credit: focus on aperture