Building an HTML Form Importer for WordPress


I was working on a project for work recently where I had to take an old, terribly-coded, ASP.NET processed HTML form and move it over to WordPress.  This thing had a lot of inputs, selects and such.  Did a quick search for a tool that might help simplify the process.  For one thing, it would save some real time and for another, I HATE doing monotonous tasks.

Well, I had no luck finding anything to help me so I thought, “What if I could build it?”  I love toying with building scrapers and parsers.  I knew this would be sloppy as every crappy HTML form has completely different code, different structures, different mark-up and more times than not broken HTML.

I sketched a few concepts and settled on something that would work with <div> layouts, <table> and whatever else.  Will it work perfect? I knew right away that was not the case, but if I could get 80%, hell 60% right on most then it would save some real time.  And if I built some tools to help simplify fixing the errors, well hell, we saving some serious time, baby!

So what I settled on was this:

  • Recursively loop through all nodes in a block of HTML using DOMDocument.
  • Save current element if it’s just text/characters.
    This part gave me some issues.  I tried using preg_replace to remove all white space and detect if the element is a word but it just wasn’t catching them all.  So I decided to split the whole thing into individual characters.  If looping through encountered a character then it breaks and uses that node as the current element.  Basically this just bypasses any strange white space characters.

    if( 3 == $node->nodeType ) {
        $allchars = str_split( $nValue );
        foreach( $allchars as $achar ) {
            if( ctype_alnum ( $achar ) ) {
                $prevText = $nValue;
  • If the element is a form input of some sort, create a label input with value of previous textual element (saved as current element in previous step), create an element name input,  and finally create a duplicate of current element with it’s value in a table row and display it.

This way every form element would be displayed with a label best guessing its previous label and allow that to be edited easily.  It would also display an editable field for the name of the element and one for its value.

So far, I’m really happy with the results.  (

My plan is to finish all the different types of inputs (checkboxes, file uploads, etc.) and then add a way to drag and sort them, create additional elements and more.  I’ll give users the option to create a shortcode where they can display it, set if it emails/stores results in database and finally I’m hoping to make use of the Gravity Forms API and allow it to import there and other form plugins I can figure out.

Vagrant and VVV ,Win7 Command Prompt Scrolling, Errors, Problems and Fixes!

I’m gonna tell you guys something I’m a bit ashamed of: Up until today, when I work on a website, I upload the file to my staging server after every change then refresh the page to see my results. I’ve been doing web development, quite successfully, for 15 years now and I’ve never used a local environment to develop. I also switched from notepad to notepad++ only four years ago.  I just downloaded PhpStorm though, so watch out world! I’m getting crazy!

As I’ve grown in being a WordPress dev and just a better dev overall I’ve been making myself catch up with the times. Tonight I decided it’s time I install the Vagrant/VVV I’ve been hearing so much about. Would I jump off a bridge if all the successful WordPress devs did it? Probably, so why not jump into this as well.

I followed the tutorial at for a few pages to get it installed, then I hopped over to the VVV page to get that going. Basic steps to get started were pretty easy:

  1. Install VirtualBox & Vagrant
  2. Do the few Vagrant commands from the getting started page
    1. $ vagrant init hashicorp/precise64
      $ vagrant up
  3. I then ran the commands suggested on VVV
    1. vagrant plugin install vagrant-hostsupdater
    2. vagrant plugin install vagrant-triggers
    3. Go to my directory I created (C:/vagrant-projects) and run
      • git clone git:// vagrant-local
    4. cd to the vagrant-local directory and hit vagrant up.

Sweet!! Now I should be able to visit to see some stuff.  Wrong.  “Connection Timeout.”  Checked my hosts file, wasn’t right so I manually added the hosts:


Had to be sure to run my text editor as Administrator so I could save the changes.

Still connection error.  So I’m trying to follow the output in command prompt from my vagrant up command it keeps scrolling and scrolling and I can’t see the problem.  I open up the VirtualBox GUI (Programs/Oracle/VirtualBox/) and see that the box is being started, running, and then just shuts down.

Well, turns out if you click the menu icon on the command prompt window you can go to properties > layout tab then up the screen buffer size from the default 300.  So I put it at 1000 then ran the vagrant up command again.  Then I saw it, permission error right before it shut itself down.  So I closed command prompt and reopened by right clicking and using “Run as Administrator.”

vagrant up

BOOM! Success!! So today I learned how to get vagrant running AND I learned you can scroll higher than 300 lines back into a command’s output history in command prompt.  I’d call it a successful day.

Now, back to work…

Vertically Align Elements Using CSS3 TranslateY

Saw an interesting post on reddit yesterday, it was in r/askreddit. The question was along the lines of “What question do you ask someone in your industry to immediately tell if they are faking it?” One of the higher voted comments was “How do you vertically align an element?” The answer was using transformY. I’ve seen a lot of methods that were ridiculous but it appears this is the common way to do it now. Using position you can set an element to 50% of it’s parents height but the axis is based on the top of the element. By adding a -50% transformY it will bump the element up so the middle is aligned to the middle of the parent. It’s beautiful!

This box is vertically aligned.
Can you tell?

<div class='tyex-container'>
<div class='tyex-valign'>
This box is vertically aligned.
Can you tell?
<style type='text/css'>
.tyex-container {
border:#ccc solid 1px;
.tyex-valign {
-webkit-transform:translateY(-50%); /* added prefixes, thanks @isotrope */

Simple Responsive Slider For Sliding Posts/Pages/Whatever Using the WP Rest API

I have a client that wanted their website to be primarily just the home page.  They also want mobile and tablet users to just be able to swipe through the pages.  I found some potential solutions but they were mostly very large, overly complex plugins for a simple need.  I’ve been wanting to dive into the WP API and I found this to be a great opportunity.  This is VERY basic usage of the WP API, but hey, I’m just getting started.  And please read to the bottom if you are knowledgeable of the WP API as I’m a bit confused on why something I tried did not work.

So here is my simple solution for the sliding pages (works for posts and other post_types as well).


First we need to include a slider library.  I went with JSSOR because it works great with loads of features and is easy to get started quickly.

I enqueue this in my themes functions.php file

function theme_scripts() {
    wp_enqueue_script( 'jssor', get_template_directory_uri() . '/js/', array() );
add_action( 'wp_enqueue_scripts', 'theme_scripts' );


Then we have our function for building the slider.  This can be tweaked to your liking, I wanted to have title, featured image and content.  We take in the slider id and height as parameters and we also take in the full url for the WP API request.  We format around the loop through our results with the required JSSOR slider containers.  The jQuery at the bottom is used to make the slider responsive.

 * Build sliders
 function build_sliders( $slider_id, $slider_height, $api_request ) {
	<div id="<?php echo $slider_id; ?>_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: <?php echo $slider_height; ?>;">
		<!-- Slides Container -->
		<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: <?php echo $slider_height; ?>;">
	//rest api
	$slides = json_decode( file_get_contents( $api_request ), true );
	foreach( $slides as $slide ) {
		echo '<div>';
		echo '<h1>' . $slide['title'] . '<h1>';
		if( $slide['featured_image'] ) {
			$thumbnail_id = get_post_thumbnail_id ( $slide['ID'] );
			$thumbnail = wp_get_attachment_image_src( $thumbnail_id, 'full' );
			echo '<p><img src="' . $thumbnail[0] . '" /></p>';
			echo $slide['content'];
		echo '</div>';
		<!-- Trigger -->
		<script>jssor_<?php echo $slider_id; ?>_starter('<?php echo $slider_id; ?>_container');</script>
		jQuery(document).ready(function ($) {
			var options = { $AutoPlay: true, $Idle: 7000 };           
			var jssor_<?php echo $slider_id; ?> = new $JssorSlider$('<?php echo $slider_id; ?>_container', options);
			//responsive code begin
			//you can remove responsive code if you don't want the slider scales
			//while window resizing
			function ScaleSlider() {
				var parentWidth = $('#<?php echo $slider_id; ?>_container').parent().width();
				if (parentWidth) {
					jssor_<?php echo $slider_id; ?>.$ScaleWidth(parentWidth);
					window.setTimeout(ScaleSlider, 30);
			//Scale slider after document ready
			//Scale slider while window load/resize/orientationchange.
			$(window).bind("load", ScaleSlider);
			$(window).bind("resize", ScaleSlider);
			$(window).bind("orientationchange", ScaleSlider);
			//responsive code end

Finally we make a simple call to our function.  I placed this in the index.php file in my theme. It could easily be built into a plugin/shortcode.

<?php build_sliders( 'slider1', '1200px', '[category_name]=homeslide-new' ); ?>

I wanted pages from a specific page category (I used a plugin to add category options to pages:

WP API Question

When first building this out I wanted to add the featured image src to the WP API response, I found a site through google that explains how to do it.  But for some reason I did not see any data labeled ‘featured_image_thumbnail_url’ when testing my api calls.  What gives? I used the code below in my functions.php file.

 function my_rest_prepare_post ($data, $post, $request ) {
	$data = $data->data;
	$thumbnail_id = get_post_thumbnail_id ( $post->ID );
	$thumbnail = wp_get_attachment_image_src( $thumbnail_id, 'full' );
	$_data['featured_image_thumbnail_url'] = $thumbnail[0];
	$data->data = $_data;
	return $data;
add_filter( 'rest_prepare_post', 'my_rest_prepare_post', 10, 3 );

WordPress Multisite Migration, Broken Permalinks & Database Connection Errors: Don’t Forget wp_blogs & httpd.conf!

Today I was migrating to a new remote server.  Our internal was getting way too slow, old and laggy.

All was going smooth.  I moved over the files, the database, updated the wp-config.php file and updated wp_options to have the testing ip address instead of our domain: Error establishing connection to database.  Awesome.  I tested our database through a simple php script, connected and selected database no problem.  Checked file permissions, all seemed good.  Tried logging and debugging, nothing was showing up in log files.  I’ve noticed if you try and visit wp-admin you get different error sometimes.  Sure enough, apparently I needed to check on a table I didn’t think about: wp_blogs.  This is where domains are stored for all individual blogs so I changed the first, which is our primary blog, to the ip address and everything seemed swell.

Then I tried to test permalinks… awful, anything like was giving a 404 error.  Rebuild permalinks: No change.  Ok, is mod_rewrite installed and enabled? Tested, yep.  .htaccess permissions good? Yep, all well there.

What in the world could be wrong.  After some googling I found something else to check, the httpd.conf file.  Sure enough, AllowOverride was set to None for all directives.  Changed to All and everything works.

I know there are some security issues with that though so the next phase is finding the appropriate settings for allowing rewrites yet keeping our site secure.

This Bothers Me More Than It Should…Or Should It?

I’ve been visiting the WordPress plugin repository a lot lately and, specifically, on my iPhone for a lot of that action.  For a site as refined as WordPress, it almost hurts to see this on my visits.  The login form sits RIGHT on the border of the image below it.  This is such a small detail that’s easy to fix and it’s a high traffic area of the site.  Why does it go on this way? It’s been so since I started visiting regularly a couple months ago.

These small details are important in web design.  Tell me that three years ago and I’d have said, “whatever.”  But, as I’ve grown in this industry you realize the importance of items like this, especially on well put together web sites.  It’s a small detail, but it’s glaringly obvious.

Maybe they have a reason for it to be that way /shrug. Plugin Support Is Awesome

I’ve built two apps for the Android Play market.   Both function pretty good, but my code is terrible.  I’m not a java developer.  I learned enough to build those apps and use google to find functionality I need.  When I submitted them to play they were live immediately.

WordPress reviews every plugin submitted.  This can take days to a week+.  Each time I’ve submitted they’ve given me a detailed reasoning why it can’t be accepted yet.  Then they go so far above and beyond explaining why and what some solutions would be.  I always learn something here.  At google I continue to write pretty shoddy code because it just gets released no matter what.

Here is what I learned today:

Don’t use url’s to the plugin directory based on the site’s root.  I always thought the site url included any subdirectory it may be installed in so site_url() . ‘/wp-content/plugins’ would always point to the plugin’s directory.  Nope.

And the best thing I learned, they told me if my plugin is going to upload/create content you should never store that in your plugin’s directory.  It can be deleted when the plugin is upgraded.  It’s best to store in a custom sub directory under wp-content, something like ‘wp-content/your-plugins-name/’ or, even better, wp-content/your-plugins-name/uploads’ if you want it to work better with multi-sites.  That’s so awesome! I’d never have known or learned that if it weren’t for the awesome review team over at

It’s 3:09AM

Sleep is something we take for granted.  I tried.  My wife and I watched that horrible Robin Hood movie with Kevin Costner.  It’s soooo bad. Which makes me sad, because Costner in “Water World” is one of my favs.

Anyway, I told my boss I’d have a custom plugin functioning for him by Tomorrow.  Actually, today I guess technically.

So, I couldn’t sleep.  Things came up at work and I just wasn’t able to get it done.  But I told him it would be ready and you know what? It is.  I stayed up.  I couldn’t sleep thinking about it being there, non-functioning.

My brain is frazzled, but it works.  G’night.


Last night I submitted WP File Hide to It felt great, second plugin in review. I’ve got my third plugin, WP Name Your Donation, functional and now I just need to clean it up, comment better and submit.

I’ve been pushing hard to become a better WordPress dev. I’ve been forcing myself to do any task the right way even if there is a shortcut that will work just fine (in a small app). For instance including js in a plugin. In WP Name Your Donation one of the gateway options is Stripe. Stripe requires you to include a public api key in javascript. This is a key that I allow the site owner to set in their admin settings. I did some research and realized I had two options.

1) Echo out the javascript in a php function then add it to a hook. From what I could tell, this was the sloppy and easy way. Funnily, this was the first tutorial I found and it was on a WordPress codex page. Same page had the below method as well underneath this first one.

2) Register a .js file and localize it allowing variables to be passed. This seemed a bit more complicated but I opted to go that route after screwing around with option 1 and feeling the sloppiness build up. Final code came out like this:

wp_register_script( 'key', plugin_dir_url( __FILE__ ) . '../../gateways/stripe/key.js', array( 'jquery' ), '1.0', true );

$pubkey = array();
if( isset( $options['wpnyd_stripe-mode'] ) && isset( $options['wpnyd_stripe-tpk'] ) ) {
$pubkey['pubkey'] = trim( esc_attr( $options['wpnyd_stripe-tpk'] ) );
} elseif( isset( $options['wpnyd_stripe-lpk'] ) ) {
$pubkey['pubkey'] = trim( esc_attr( $options['wpnyd_stripe-lpk' ] ) );
wp_localize_script( 'key', 'pubkey', $pubkey );
wp_enqueue_script( 'key' );


SVN What?

I was so proud that my plugin got accepted into last night.  Now, I’m so lost on how to actually get it activated there.  But I’m working on it.

I just started using Git and tools associated.  I’ve figured out the repository system for the most part and mine are with BitBucket.  Wordpress requires you to use their repository which they call an SVN.  I guess SVN is a different kind of repository with features that allow better version tracking .. or something like that.  I’m still a bit lost.

So, after consulting with some dev friends I finally got this TortoiseGit system that I followed a few commands I found online and it seems to be doing something.  This little turtle is being thrown from an icon of earth into a folder.  And it’s taking forever.

My bit of reading indicates that when you do your first commit to activate your plugin, WordPress has to look through every single plugin in their system.  Why? I haven’t the foggiest, but hopefully after a few hours this turtle is completely in his folder and my plugin is active.