Press "Enter" to skip to content

Category: Tutorials

Foundation, Underscores and Sass, Oh My!

Can I just say that command line and I aren’t friends? I think we have this odd relationship where we pretend we’re friends and then when it gets down to the nitty gritty, we just don’t get along.

I’m new to the Foundation framework. Although I’ve used Bootstrap in the past, for a recent WordPress project of mine, Foundation seemed to be exactly what I needed. I specifically wanted to work in Sass, and I only needed some of the framework. Extra brownie points, Foundation also supports accessibility – hurray! To set up Foundation normally with vanilla ( or just plain old css, not fancy Sass ), the instructions in Steve Zehngut’s video made sense. To use the Sass version however, this is where my brain was melting…

All of a sudden I was on all these sites, BowerNode, Ruby, use this command in terminal, then that one! What the hell are all these files in the Foundation Sass version? Which ones do I even need?! Apparently Foundation, Underscores and Sass are quite the combination and it has yet to be documented on how to integrate them together manually – until now.

Yep. With some tinkering ( and frustration ), I finally figured it out. If you’re thinking of using Foundation with Sass in your WordPress theme, and would like a step by step set of instructions all in one place, then this post is for you. And the good news – no command line necessary!

Before We Begin:

  • For this tutorial, I’m using the Underscores starter theme. You don’t have to use this theme, but for the sake of reference, this is what I’m using.
  • I’m not using Bower. So we don’t need Node since apparently that’s only necessary if we’re using Bower.
  • These instructions are tailored for Macs. I’m sorry. T^T
  • You will need a Sass Compiler if you don’t already have one. I’m using Koala. Don’t use Scout because it’s deprecated. Here’s a handy list of supported compilers. This tutorial assumes that you already have Sass installed and know how to use compilers.
  • For reference, this is Foundation 5 that we’re integrating.

How to Future-proof WordPress Links

If you’ve ever been faced with 404’s and broken links after a site migration or web address change – then this post is for you!

You can prevent this from ever happening again with future-proofed links. Future-proofed links are links that are written with the future in mind. So in our case, the future might be that the site moves from it’s current place and/or the web address changes. And in the event that either one of those situations happen, these future-proofed links will automatically update and prevent broken links. No more 404’s – hurray!

Great, so how do we create these future-proofed WordPress links? Easy peasy. ( I never say easy peasy in real life, writing does that to you… ) Here are a few code snippets to help you out.

Leave a Comment

Choosing the Right Colors for Web Accessibility

[series] View all posts in the Making your WordPress Theme Accessible Series so far… [/series]


Before I get started, I’d like to give a disclaimer that on paper, I am not defined as a “designer” anywhere. I got off that train after a 2-year-no-longer-existing college that’s still drowning me in debt made me seek a better education at the college I eventually got my BA from. I’d also like to confess that I took advanced color theory because credits allowed me to skip the two introductory courses – and that was the biggest mistake I’d ever made. Color is hard and Pratt didn’t play around. Therefore, color, is not my forte.

However, I’m getting better at it! Let’s improve together, shall we?

So, in this fourth installment of my accessibility series, I’d like to review choosing colors for your WordPress site. First, we’ll talk about why choosing the right colors for web accessibility is important. Then there will be a brief overview on color theory with some links pointing you toward those “designers” on paper that could provide deeper insights than I can. Finally, we’ll jump into our WordPress stylesheets and change some key selectors that should make a difference right away in improving our theme’s accessibility. Let’s get started!


How to Remove TinyMCE Buttons

I recently read a blog post by Tom McFarlin titled, Remove TinyMCE Buttons. For the confused, TinyMCE buttons refers to the buttons available in WordPress’ text-editor toolbar for formatting and styling your content. Here’s more on how to use the text-editor along with learning to love the text-editor.

Anyway, it never occurred  to me that I could remove TinyMCE buttons. Tom McFarlin’s blog post inspired me to try it out. Since his blog post was more of a guide through the thought process of completing the task rather than a literal walk-through, once I resolved the mystery, I wanted to share it with others. So here is how I went about it – how to remove TinyMCE buttons step by step with images, code, and further explanation.

Before We Begin

  • You should take a look at Tom McFarlin’s blog post as I’ll be referring to it as my guide to writing code
  • Get your theme’s functions.php ready as that will be what we’ll be working in ( or plugin file, wherever you’re keeping your custom functions )
  • Just to future-proof this tutorial as reference, using WordPress 4.0 when this was written

How to Make Your Images Accessible

How to Make Your Images Accessible in WordPress

[series]Making your WordPress Theme Accessible Series:

  1. An Intro to Web Accessibility
  2. How to Organize Headings for Accessibility
  3. How to make your images accessible in WordPress ( We’re here now )



In the previous two installments of this accessibility series, I introduced web accessibility in general, and together, we went over organizing headings in our WordPress theme. In today’s post, we’re going to go over images. This post will cover what makes images accessible, and how we can apply those methods both in our theme templates and in our content. Let’s get started, shall we?

%d bloggers like this: