WordPress – Page 6 – Who Is Chris

Building an HTML Form Importer for WordPress

Git: https://bitbucket.org/MrFlannagan/better-html-form-importer

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;
            break;
        }
    }
}
```
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. (https://bitbucket.org/MrFlannagan/better-html-form-importer)

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 vagrantup.com for a few pages to get it installed, then I hopped over to the VVV github.com page to get that going. Basic steps to get started were pretty easy:

Install VirtualBox & Vagrant
Do the few Vagrant commands from the getting started page
1. ```
$ vagrant init hashicorp/precise64
$ vagrant up
```
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://github.com/Varying-Vagrant-Vagrants/VVV.git vagrant-local
4. cd to the vagrant-local directory and hit vagrant up.

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

#VVV
192.168.50.4 vvv.dev local.wordpress.dev local.wordpress-trunk.dev src.wordpress-develop.dev build.wordpress-develop.dev

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…

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).

JSSOR

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.

http://www.jssor.com/development/

I enqueue this in my themes functions.php file

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

build_sliders

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 ) {
 
	?>
	
		
		
	';
		echo '' . $slide['title'] . '
';
		if( $slide['featured_image'] ) {
			$thumbnail_id = get_post_thumbnail_id ( $slide['ID'] );
			$thumbnail = wp_get_attachment_image_src( $thumbnail_id, 'full' );
			echo '';
			echo $slide['content'];
		}
		echo '';
	}
	
	?>

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.

I wanted pages from a specific page category (I used a plugin to add category options to pages: https://wordpress.org/plugins/add-category-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 http://usfsm.edu 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 usfsm.edu/academics 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.

WordPress.org 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 WordPress.org.

Journey

Last night I submitted WP File Hide to WordPress.org. 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:

stripe.php
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' );

key.js
Stripe.setPublishableKey(pubkey.pubkey);

SVN What?

I was so proud that my plugin got accepted into WordPress.org 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.

Publishing My First Plugin

I submitted my plugin WP People Pop a few days ago to the WordPress.org system. I waited anxiously to get my response and see if it was approved. Well, this morning I got my answer, no. No, it has not been approved yet.

I read through the email and turns out you aren’t supposed to include libraries with your plugin that WordPress already provides in its core. I was using jQuery UI to handle some interface items and I included the whole UI package in my plugin’s directory.

I checked out the list of included libraries and turns out you can’t just include all of jQuery UI but you have to include each component you need, seperately. I guess this makes sense, why have more code included than necessary?

I resubmitted with changes. Oh, they also made sure to mention I need to clear the now unused js files out. Email below:

There are issues with your plugin code. Please read this ENTIRE email, address all listed issues, and reply to this email with your corrected code attached. It is required for you to read and reply to these emails, and failure to do so will result in your plugin being rejected.

## Including jquery files (or calling them remotely)

WordPress includes its own version of jquery and many other similar JS files, which have all been rigorously tested with WP and many of the most common plugins. In order to provide the best compatibility and experience for our users, we ask that you not package your own (especially not an older version) and instead use wp_enqueue_script() to pull in WordPress’s version.

Please review http://codex.wordpress.org/Function_Reference/wp_enqueue_script and update your plugin accordingly. You need to both change your code to use our jquery as well as remove the unused files. Remember! Keeping unused files out of your plugins makes them smaller and less potentially vulnerable! if you have any jquery files included in your plugin that WP core has, just delete them.

Offloading jquery js, css, and other scripts to Google (or jquery.com or anywhere else frankly) is similarly disallowed for the same reasons, but also because you’re introducing an unnecessary dependency on another site. If the file you’re trying to use isn’t a part of WordPress Core, then you should include it -locally- in your plugin, not remotely.

If your code doesn’t work with the built-in versions of jquery, it’s most likely a no conflict issue. If you can’t guess, we -really- want you to use our JS files, and if you can’t, we need to know why so we can fix things for everyone. If you’re just including it because you want to support old versions of WP, or because you think they may not have jquery, please don’t. If they don’t have the default jquery, a lot more than your plugin will break. And if they’re on older versions of WordPress, they need to upgrade, and we don’t recommend you support anything except the most recent version of WP and one release back.

WordPress already has jquery and jquery UI included. Do not include your own. The CSS is fine, but the JS is not.

—-

Please make sure you’ve addressed ALL issues brought up in this email. When you’ve corrected your code, reply to this email with the updated code attached as a zip, or provide a link to the new code for us to review. If you have questions, concerns, or need clarification, please reply to this email and just ask us.

' . $slide['title'] . '

'; if( $slide['featured_image'] ) { $thumbnail_id = get_post_thumbnail_id ( $slide['ID'] ); $thumbnail = wp_get_attachment_image_src( $thumbnail_id, 'full' ); echo ''; echo $slide['content']; } echo '

'; if( $slide['featured_image'] ) { $thumbnail_id = get_post_thumbnail_id ( $slide['ID'] ); $thumbnail = wp_get_attachment_image_src( $thumbnail_id, 'full' ); echo '
'; echo $slide['content']; } echo '