Using Airtable to learn React

The past few weeks I’ve started to learn the React library more seriously with a few practice projects. I learned of Airtable from a CSS-Tricks article a while back which goes into more detail of what Airtable is but the TL;DR might sum it up as a Google Sheets on steroids with API endpoints. In the article author, Chris Coyier used Airtable and Javascript to create a favorite Emoji Poll and I’ve recreated it using React. This is entirely a front-end project, so the API key is exposed. If you are interested in using Airtable in production this article (Airtable As A Minimum Viable Database For Your ReactJs Project) got me started.

If you are interested in learning React please feel free to pick it apart. Happy Hacking!


I’d like to thank TyrantWarship from Twitch. I’ve been streaming some of my learning experiences to my Twitch channel and TyrantWarship would often pop by an help me through many of my roadblocks.

How I am styling Select elements

I’ve complained about styling forms before on this blog. But things have gotten better over the last several years and we are starting to see some browser consistency. I did run into a problem with select elements to find that adding pseudo classes won’t work, which is my usual go to for adding font icons to… things. So I tried something else, using an SVG as a background image and I think it came out pretty great.

Categorized as Tech Tagged ,

Custom Animated Submit Button for Ninja Forms

Ninja Forms is easily one of my favorite WordPress plugins. It’s one of the most design agnostic form building plugins I’ve come across and has saved me time on every project. Every now and then a designer asks for some UI that isn’t easily accommodated by most form markup. I needed to animate a submit button with a fancy hover effect and an icon font. I had already styled some anchor markup with the same effect (Codepen below) and was hoping to apply it to the site’s forms with relative ease.

I reached out to the WP Ninjas team and they were extraordinarily helpful in pointing me in the direction of Custom Field Templates, which I was previously unaware of. Below demonstrates how to set up your own Custom Field Template, I am creating a Submit button, but this works with other field types as well! If you are creating your own themes, you can simply create a “ninja-forms” directory, “templates” directory, and a “fields-submit.html” file inside of your theme as shown below and you’ll be all set to continue.

If you are using a Child Theme, create the same folder structure, but will also need to add the following code in your functions.php file for Ninja Forms to recognize the template directory. More information here.

Inside of the “fields-submit.html” file, I am going to take the markup from the animated anchor link in Codepen and modify it to accept information from Ninja Forms. You can, of course, use your own markup.

Then I took the CSS from the Codepen and place it in style.css, as well as called Font Awesome in functions.php, wpbeginner has a great tutorial on adding Font Awesome here. Now when you visit a form on the site you can see the new submit button in action, before and after picture below!



Categorized as Tech Tagged

Generate Post Title and Slug from Advanced Custom Fields

Advanced Custom Fields - Post Title

I often need to create post titles in WordPress based on fields I’ve generated using Advanced Custom Fields. Below is an example that assumes we have a Custom Post Type registered to “staff” and two Custom Fields with the name of “first_name” and “last_name”. Using the “update_value” hook provided by Advanced Custom Fields and “wp_update_post” I am able to update the Slug and Post Title using the values given in the respective fields.

// Create Title and Slug
function acf_title( $value, $post_id, $field ) {
if ( get_post_type( $post_id ) == 'staff' ) {
$new_title = get_field('first_name', $post_id) . ' ' . $value;
$new_slug = sanitize_title( $new_title );
// update post
wp_update_post( array(
'ID' => $post_id,
'post_title' => $new_title,
'post_name' => $new_slug,
) );
return $value;
add_filter( 'acf/update_value/name=last_name', 'acf_title', 10, 3 );

Disabling the title at a custom post type level will, unfortunately, remove the clickable permalink below the title that I often use. To combat that I create a very simple metabox with the permalink. Demonstrated below.

* Adds a meta box
function simple_meta_box() {
add_meta_box( 'prfx_meta', ( 'View Post' ), 'simple_meta_box_callback', 'staff', 'side', 'high' );
add_action( 'add_meta_boxes', 'simple_meta_box' );
* Outputs the content of the meta box
function simple_meta_box_callback( $post ) {
echo '<a href="';
echo '" class="button button-small" target="_blank">View Profile</a>';

How WordPress default themes add Google Fonts

I spent some time diving into Twenty Seventeen in preparation to develop for the theme directory. I was curious as to how the developers of very popular theme would enqueue a Google Font. I am no stranger to using a @import tag in the stylesheet, but I assumed there had to be a more sustainable solution. What I found was a thoughtful way of adding a font which I have digested into a gist below.

Handling your Google Fonts in this manner allows translators of your theme to disregard a font that may hinder the translation.

* Register custom fonts.
function themeslug_fonts_url() {
$fonts_url = '';
$fonts = array();
$subsets = 'latin,latin-ext';
* Translators: If there are characters in your language that are not supported
* by Oswald, translate this to 'off'. Do not translate into your own language.
if ( 'off' !== _x( 'on', 'Oswald font: on or off', 'themeslug' ) ) {
$fonts[] = 'Oswald:400,700';
* Translators: If there are characters in your language that are not supported
* by Montserrat, translate this to 'off'. Do not translate into your own language.
if ( 'off' !== _x( 'on', 'Montserrat font: on or off', 'themeslug' ) ) {
$fonts[] = 'Montserrat:400,700';
if ( $fonts ) {
$fonts_url = add_query_arg( array(
'family' => urlencode( implode( '|', $fonts ) ),
'subset' => urlencode( $subsets ),
), '' );
return esc_url_raw( $fonts_url );
* Enqueue scripts and styles.
function themeslug_scripts() {
// Add custom fonts, used in the main stylesheet.
wp_enqueue_style( 'themeslug-fonts', themeslug_fonts_url(), array(), null );
add_action( 'wp_enqueue_scripts', 'themeslug_scripts' );

If you are in a similar position as I am, trying to sharpen your WordPress skillset, I highly recommend tearing into some of the default themes. They are a plethora of knowledge.

Categorized as Tech Tagged

Free Plugins to Enhance your WordPress Experience!


The WordPress UI is one of the best CMS’s on the market and continues to improve with every version. That being said there are a few features that seem to be missing which could make your experience a whole lot better and I am going to show you a few plugins to fill that void!

Media File Sizes


The Media Library leaves a lot to be desired, with Media File Sizes we can add a new column showing the file size of your media. Allowing you to sort by size and identify any media that might be taking up a bit to much space on your site and possibly causing slow load times.

Check out Media File Size

Enable Media Replace


Sometimes you upload an image and realize it needs to be replaced, maybe you’ve already posted it in a few places on your site. By default, WordPress doesn’t give you a way to swap it out with Enable Media Replace you can replace your media sitewide! (Note: I have experienced some weirdness when used in conjunction with Jetpack’s Photon)

Check out Enable Media Replace

Duplicate Post


I find Duplicate Post particularly useful when dealing with posts that have a large amount of custom fields or sites using page builders. You find yourself creating a bunch of pages with similar layouts or content and instead of having to copy and paste or dragging and dropping over and over again you just want to make a duplicate and change the content our a bit. Duplicate Post solves this!

Check out Duplicate Post

Disable Title


I often find I don’t want my page headline to be what the title of the page is. There are a few ways to solve this, but I’ve found the least involved process is to disable the title and add my own H1 heading in the editor and with Disable Title you can do that!

Check out Disable Title

Big Bold Button

I’ve been on a spree of creating button styles as well as scalable elements using em’s. Combining those ideas I created the below button. I imagine it being a big call to action.

Adding a ‘Client’ User Role to WordPress

In an effort to make a better boilerplate my co-worker Jim Floss and I set out to create a new User Role inside our WordPress client sites. This role closely resembles the Editor role and Admin role, but allows us to turn different functionality on a per-client basis if need be, but by default locks them out of many things such as updates and plugins. I didn’t see much information on cloning a role and removing functionality online so I figured I would put it up here! Enjoy.

* Adds a 'Client' user role

add_action(‘init’, ‘add_client_role’);

function add_client_role() {
global $wp_roles;
if ( ! isset( $wp_roles ) )
$wp_roles = new WP_Roles();

$adm = $wp_roles->get_role(‘administrator’);
//Adding a ‘new_role’ with all admin caps
$wp_roles->add_role(‘client’, ‘Client’, $adm->capabilities);

add_action(‘init’, ‘revoke_client_capabilities’, 10);

function revoke_client_capabilities() {
$caps_to_remove = array(
‘switch_themes’ // etc
$custom_role = get_role(‘client’); // Edit according to your role as it was declared when added
foreach($caps_to_remove as $cap) {

Switch from Dreamweaver to Sublime


So several months ago I switched from Adobe Dreamweaver to Sublime Text. I switch for a number of reasons, many of which I will talk about below. If you are thinking about switching here is some good information to have during the transition.

Reasons to switch to Sublime Text

1. It’s much faster.

In every sense, Sublime Text is faster than Dreamweaver. Load time takes mere seconds and switching between projects in an instant. Coding also becomes faster with the addition of packages such as Emmet you can write several lines of code in just a few keystrokes.

2. Custom Themes and Layouts

Changing Dreamweaver to a dark theme has long been a pain in my ass, very talented developers have created gorgeous themes for Sublime Text that are easy to install, making staring at code for hours on end an absolute pleasure. Sublime Text also has several different layout options to place separate files next to each other horizontally, vertically, in a grid fashion and more.

3. Cheaper and all the cool kids are using it

A license for Sublime Text is $70, compared to Dreamweaver CC which could cost you $19.99 a month for just Dreamweaver or $49.99 a month for the entire Creative Cloud Suite. Which is a kick ass deal if you are using a large amount of Adobe products, but ultimately more expensive if you only need a text editor. I’ve long said Dreamweaver focuses too much on the shitty live preview and WYSIWYG editor. The direction of Dreamweaver is not that of a programmer, but some hybrid designer/developer. So why not switch to a “real programmers” 🙄 text editor like Sublime Text, Atom, or Vim.

Recommended Packages for Web Development

Out of the gate, Sublime Text does not come with most of the features that Dreamweaver does. In my opinion, this is a good thing. I don’t need dozens of panels that I never use cluttering my window. None the less, some of those features are a must have for my workflow. Listed below are packages I use to regain some of those features and a few others that are just awesome.

To start you are going to need Package Control, a Sublime Text package manager that makes finding, installing and managing your packages easier.


Do you ever find yourself sifting through folders in the sidebar trying to remember what you named that file? Can’t remember if it was a jpg or a png? Maybe you just wish you could type filenames faster. No more.

Whether your making a img tag in html, setting a background image in css, or linking a .js file to your html (or whatever else people use filename paths for these days…), you can now autocomplete the filename. Plus, it uses the built-in autocomplete, so no need to learn another pesky shortcut.


Bracket Highlighter matches a variety of brackets such as: [](){}""''<tag></tag>, and even custom brackets.

CSSFont Family

CSSFontFamily is a Sublime Text 2/3 plugin with a collection of font stacks autocomplete.


It is hard to explain Emmet, But you must get it. Trust me.


Commercial SFTP/FTP plugin – upload, sync, browse, remote edit, diff and vcs integration

Sidebar Enhancements

Provides enhancements to the operations on Sidebar of Files and Folders for Sublime Text.

Theme – Spacegray

I love this theme so much. I honestly forget what Sublime Text looks without it.