philhoyt

Ninja Forms is easily one of my favourite WordPress plugins. It’s one of the most design agnostic form building plugins I’ve come across and saves me time on every project. Every now and then a designer asks for some UI that isn’t easily accommodated by most form markup. If you have ever tried to style a <input type=”submit” value=”Submit” /> you know what I’m talking about. A couple of projects back 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 sites 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.

https://gist.github.com/philhoyt/efa932256a052d65f769fb10dda0508d

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. 

https://gist.github.com/philhoyt/d6d36aca6c14f235df8287f94fd379c4

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!

Before

After

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.

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.

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

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
* https://codex.wordpress.org/Roles_and_Capabilities
*/

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(
‘update_core’,
‘activate_plugins’,
‘install_plugins’,
‘update_plugin’,
‘edit_plugins’,
‘edit_themes’,
‘export’,
‘import’,
‘create_users’,
‘manage_options’,
‘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) {
$custom_role->remove_cap($cap);
}
}