Creating an Animated Submit Button for Ninja Forms

Posted on Published

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

Using Advanced Custom Fields to create Post Titles

Posted on Published

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.

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.

Free Plugins to Enhance your WordPress Experience!

Posted on Published

wordpress-plugin

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

file-media-size

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

enable-media-replace-wordpress

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

duplicate-post-wordpress

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

disable-title-wordpress

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

BackupBuddy saves the day… again.

Posted on Published

Three years ago, I joined an agency that up until my arrival had been manually migrating their WordPress sites. This processes usually involved pulling down all the site files through FTP or compressing them through shell on a development server, exporting the mySQL database through phpMyAdmin, uploading the site files to the live server, modifying some sort of config file, importing the mySQL database to the live server, edit a few tables in the database to reflect the live information, and followed up with a find and replace in all the content (usually with a lot of praying and cursing in between). Several hours and failed migrations later I determined there had to be a better way.

After a few Google searches the answer was obvious. Enter BackupBuddy!!! BackupBuddy by iThemes claims to have the best way to back up and move a WordPress site and I would agree. After using the plugin for a few years, I have easily migrated 50+ sites.

So why am I writing about how amazing BackupBuddy is today? Generally speaking I use BackupBuddy to migrate developments sites usually no larger than 500mb in size. Well, today I needed to move an existing site that came in around 2.5GB in file size and an uncompressed database of over 500MB to a development environment to work on. Think of it as if I duplicated a shitty car, park it into my garage to work on, then burned the old car to the ground, and rolled the now fixed car out of the garage. Now until now I had never attempted to migrate a site of that size with the plugin, usually because the existing site would be coming from some shitty server that wouldn’t be able to handle it. The success of a migration has a lot to do with the quality of where the site is currently hosted. But I had few options this time around as I did not have access to the servers databases. So I fired up BackupBuddy and ran a backup which the first time around halted at around 2.4GB of file backing up, which is damn good, but unfortunately the server wasn’t powerful enough to capture the whole thing. So then option two, I pulled down all of the site files, moved them to the development server, then ran BackupBuddy to backup the database only, followed the BackupBuddy instructions to migrate, and SUCCESS. A WordPress site with about 10,000 posts with large amount of images successfully migrated.

So buy BackupBuddy (Note: this was not paid for or sponsored by iThemes, I just really like the plugin.)

5 Free Plugins Everyone With a WordPress Site Should Be Using

Posted on Published

I have been developing WordPress sites for a long while now and have found a handful of plugins I couldn’t live without. I list them below in no particular order. I would love to hear what some of your must have plugins are in the comments.

WordPress SEO by Yoast

Do you like traffic to your site? Do you not have WordPress SEO by Yoast install? WHAT IS WRONG WITH YOU GO INSTALL AND CONFIGURE IT NOW! WordPress SEO by Yoast is the go to plugin to optimize your site for search engines. Easily edit page titles and meta descriptions, create xml sitemaps, modify robots meta, clean up your head section and much more. Also Yoast just partnered with the web security company Sucuri so you know it is legit!

Download Here

Stream

Update 4/30/15: I am putting this one on the bench for a while, will revisit soon.

Ever have a team member or client change something on your site, but can’t figure out exactly what, where, or when? Well Stream solves all of that by tracking every little move you make inside of WordPress including auto updates and displays the data in an easy to read and filterable manner. Never again will can a client call up yelling that you broke something on their site when in reality they uninstalled a key plugin.

Download Here

iThemes Security

Update 4/30/15: I have since found iThemes Security to be a bit buggy, I recommend reading the Hardening WordPress info as well as developing and maintaining a tip top WordPress install.

Somewhere out there is a someone or something trying to ruin your day right now. Hackers, bots, malware, and a slew of other nasty bullshit is trying to destroy all your hard work. Protect yourself with iThemes Security. iThemes Security protects your site against brute force attacks, common WordPress security flaws, banns known offenders, detect file changes, and so much more! If you are running a site without this plugin installed you are asking to be hacked. Just do me a favor and install it right now.

Download Here

WooSidebars

They way sidebars and widgets are currently handled in WordPress could use an overhaul. They have since outgrown their original purpose and are now being used to serve up large amounts of dynamic and custom content on a per situation basis. While WordPress core has done little to assist in these features a handful of plugins have come to ease the pain. I have used a fair amount of plugins to handle custom widget areas ( Display Widgets / Sidebar & Widget Manager ) none have been as simple and lightweight as WooSidebars.

Download Here

Akismet

Akismet is an anti-spam plugin that comes installed on every WordPress site installed. So why are so many of us guilty of never activating it? Is it because it requires you to associate it with a WordPress.com account which would take a whole 5 minutes of your life to sign up for? I guess you just like huge amounts of spam piling up in your database filled with malicious links and link bate galore? I will admit from an agency perspective it is a little bit of a pain to set up Akismet on every single site we build, but it’s benefits surpass that folly.

Download Here