Code

WordPress: find posts with ANY term in a given taxonomy

I was recently Googling around for an answer to this, and didn’t see that anyone posted this method, but here’s the gist. If you want to find out if a given post has a certain taxonomy, (not just a specific term, but ANY term in that taxonomy), you can use the function has_term (more in…

Code

Unique styling with custom classes added to the body tag in WordPress

Sometimes when I’m making a site, I need to alter the overall page styles for a whole section, or collection of pages. To do this, I prefer adding a new class to the <body> tag so that I can target all of the children easily using CSS nesting. Let’s say I’m making a new website…

Code

 /  Front-end Series

Adding single page “scrolling” navigation to your site

Update: June 2021 Lots of people keep finding this page through search and the original method from 2014 was outdated and broken. So, this new method (embedded below and also available on CodePen) is a better version that works with vanilla JS instead of requiring jQuery. To see it in action on a full page,…

Code

 /  Front-end Series

Basic introduction to jQuery (Part 4)

Okay, this is the last part of the “intro to jQuery” tutorials… you can start with the previous tutorials if you’d like: Part 1 | Part 2 | Part 3 This time, we’re going to round out the functionality of the pop-ups by adding an optional “close” button inside of the pop-up, and use some different…

Code

 /  Front-end Series

Basic introduction to jQuery (Part 3)

Part three of learning jQuery extends the last tutorial. This time, we’re going to add multiple methods inside a single function, and learn about conditional statements. At the end of the last tutorial, we built some pretty solid looking tooltips (and that same method can be used to make a whole bunch of pop-up-type devices,…

Code

 /  Front-end Series

Basic introduction to jQuery (Part 2)

This tutorial directly follows the previous “Basic Introduction to jQuery (Part 1)“, so start there if you haven’t seen it yet. Previously, we wrote a very simple jQuery function to make a pop-up box show up when we click on a button. Check out the Pen below to see what this looks like, as well as…

Code

 /  Front-end Series

Basic introduction to jQuery (Part 1)

I’ll confess that when I was learning web development, javascript seemed intimidating. But it really doesn’t have to be. If you understand how to select HTML elements with CSS (do you know how classes work?), then you can easily transition into understanding Javascript with the help of jQuery. I should note that there are tons of…

Code

 /  Front-end Series

Building a CSS dropdown menu

One of the most basic features that the majority of websites share is a simple navigation menu that often includes some type of “dropdown”. These days, menus can take all shapes and forms, from the simple stacked list (left, below) to the “mega” menus including photos and other media (right side, below). We’re going to…

Code

 /  HTML & CSS Basics Series

The Box Model: visualizing HTML & CSS

Finally! We’re going to get to the layout of the page and make it look like a website. In the past few tutorials, we’ve been exploring some of the HTML and CSS fundamentals needed to start this, and now we’re going to dig in. As of the last tutorial, you should have three HTML pages…

Code

 /  Front-end Series

Practical web typography and font styling

Today, we have fine control over all of our web typography using just CSS—a vast improvement from just a few years ago when we were limited to a handful of “web safe” fonts or janky flash workarounds to use the fonts we wanted. Here’s a quick guide to get your started using CSS for fine…