Get it All
Together

As much as I love WordPress, I am continually frustrated with the pace at which forms get created. That’s because, while WordPress seems to have thought of everything else, the most basic part of creating interactive websites seems to have been ignored: the forms.

Yes. There are front end form builders like Ninja Forms. But while they all work well within their own context, much of the customization of the forms either requires additional, paid-for plugins or simply isn’t possible due to constraints of the plugins themselves. Besides which: I’m not often building front-end forms, but rather forms to add metadata to posts or set configuration variables for the site.

What I have wanted and needed was something like CakePHP’s FormHelper: an interface that simplifies the process of outputting HTML5-valid forms and inputs. Something that allows me to specify the settings for an input, and puts the aggravating process of laying out the form in it’s own hands. And so I created EasyInputs: A Forms generator for WordPress.

The plugin is still in early stages of development. But so far, I’ve been able to clean up and cut down on code for one of my other projects significantly. And besides speed and accuracy, there are a couple of key advantages to building forms in this way. For a start, if you’re trying to keep your WP code as close as possible to PSR2 standards, adding values to an array is a lot more convenient than sprintf’ing the long HTML code associated with forms. Secondly, the code output from my plugin is significantly clearer than a rat’s nest of escaped and unescaped HTML code.

WP-Scholar’s Person CPT with escaped HTML:

WP-Scholar’s Person CPT with EasyInputs:

This is just a relatively basic example. The plan is to support every HTML-valid input including <datalist>, <keygen> and <output>. Right now, these new elements are missing. I’ll be updating that shortly (perhaps before you even read this!), along with some basic HTML security: every EasyInputs text input will include the maxlength attribute.

I know that the WordPress devs are working on some sort of fields API. But as I’ve observed it, the development process still banks too heavily on bringing those fields into the WP regime, which may satisfy the needs of the WordPress team, seems too rigidly focused. Developers don’t need a complete solution for every little thing, they need simple tools that do simple things well. That’s the aim of this development project.

Please have a look at the latest stable tag and tell me what you think!

I’m not a fan of unstyled content. I don’t think many developers are. Worse, while I like to reuse my dialog divs, I don’t want the old content confusing users when the dialog first opens. And of course, users often rush to try to use dialogs as soon as they open, so we need to give the dialog a chance to load it’s content before that. So I needed to create a generic function for opening a jQuery dialog box, putting a “spinner” in the box until the proper content loads. Here is my solution:

The function presumes you will be loading content from an AJAX call and provides a couple of very handy parameters. First, you can pass the complete option object for the jQuery Dialog API into your function call, making the dialog itself completely customizable. Second, it provides a callback function parameter, which will be run after the content is loaded into the content area of the dialog.

To use this function, simply include the following HTML into your page, somewhere near the footer (I use CakePHP, but you can just use a regular image call to get the spinner:

Use your CSS to hide the #popup div and you’re ready to start implementing dialog boxes the smart way!

So the issue is this: I’m creating a faceted search interface for a client’s application. Rather than clutter a window with textbox after textbox, select after select, most of which they don’t use on a regular basis, my solution is to create dynamic form fields based on the user’s requests. Need to search a SKU? No problem! Need to select from a list of clients? Gotcha covered.

All of this has worked out quite swimmingly overall, but a bug was brought to my attention today that I had to share with the rest of the Internet. Specifically: users were typing their responses into a jQuery Autocomplete field and then clicking “Submit,” only to find that their response was not recorded and not passed on in the query. Annoying!!

With a bit of digging, I discovered the problem. The jQuery autocomplete UI does not allow the value of the field to be updated until one of two events is fired: “change” and “select.” Trouble is: if you go directly from typing a value into the autocomplete field, directly to the submit button, the “change” event does not have time to fire.

The solution to the problem, which I discovered on the always-helpful StackOverflow website, follows below. The gist of it is that you need to first prevent the form from submitting, double-check that autocomplete fields have been properly “change”-d and then submit the form:

I have had the privilege of working with Tom at Holistic Networking at multiple clients over the past 10 years. He has consistently provided web development, digital marketing and e-commerce solutions for many of these organizations while addressing a wide variety of challenges. Tom has always furnished his expertise to serve the needs of diverse types of businesses.

Tom/Holistic Networking helped us to create a dynamic user experience with intuitive navigation, which is critical for a company with both B2B and B2C sales channels. We also needed to build an e-commerce platform with several technical requirements including secure Rx transmission and multi-field checkout, and Tom/Holistic Networking embraced the challenge and executed with ease.

Tom has been great to work with. He was able to transition a custom built legacy system into a clean and modern WordPress installation that is much easier to maintain. He didn’t simply move 25 years of data as we initially instructed. He took the time to learn what our data meant and built the system we needed, rather than the one we asked for.

Without [Holistic Networking]’s expertise, The Rochesterian would not be where it is today. The blog was voted best in Rochester in its first year by readers of City Newspaper. [Holistic Networking] helped me with design, advertising, plugins and numerous other features that are important to a website. He did all of this work efficiently and skillfully.

I’m sure I’m not alone among developers who are continually frustrated by the lack of imagination shown for implementing the Customizer in WordPress. Sure, I have praised its existence and support its use to replace the labyrinthine system of developer-created admin pages. But then once I got into serious development work, I quickly found that having all the HTML controls handed to you means having the ability to decide how they get rendered taken away from you.

For example, I’d like to give users of my core theme the option to define the number and content of columns on their site. Doing so obviously means creating repeating fields: first, you define the user-specified number of columns, then you produce enough identical fields as necessary to define each column. In my case, that meant providing an ID, column width at various responsive sizes and of course, the content of the column.

Yes. I could certainly decide that no one needs more than four columns and just assign each column it’s own static block of controls. If there’s no Column 4, then those settings are just ignored. But this is a sloppy way to build a UI that is going to naturally lead to some confusion when changing settings never seem to have any effect. Better, then to just have dynamically created settings blocks. One drawback: the Customizer API has no repeating fields and doesn’t even include a vehicle for a button that doesn’t submit, leaving you without the option to create a JS-driven solution.

After months of frustration, I eventually found Kirki. Now, we are talking! I currently include Kirki as a Composer package into the core of my base theme, but it’s also available as a plugin for those who would be more comfortable with that solution. From the Kirki homepage:

Kirki is a Toolkit allowing WordPress developers to use the Customizer and take advantage of its advanced features and flexibility by abstracting the code and making it easier for everyone to create beautiful and meaningful user experiences.

So, it’s not an entirely new API or a replacement. It simply harnesses the power already manifest in the Customizer, but gives it a few gooses that make it a whole heck of a lot easier and more flexible to use.

Using Kirki

Kirki frees you to create forms that properly express what your theme does, rather than having to build all that functionality into your theme or worse than this, simply allow your theme to be driven by the limitations of the current Customizer UI. A full spectrum of HTML5 form elements is introduced, along with a plethora of more exotic controls. Especially useful for me – beside the repeater control – were the multicheck and radio-image controls. But there’s so many more that I’d like to play around with! Maybe for some custom implementations, I suppose.

Replacing the existing Customizer API calls with the Kirki API calls was a snap in fact, about the only confusion was that there was so much less code than before, I had to keep checking that I’d actually gotten all the controls passed over:

 // Icon Fonts:
Kirki::add_field( 'hn_reactive', array(
'type' => 'multicheck',
'settings' => 'icon_fonts',
'label' => esc_attr__( 'WeLoveIconFonts', 'hn_reactive' ),
'section' => 'icon_fonts',
'priority' => 10,
'choices' => ReactiveCustomizer::$icon_fonts,
) );

I use nine fonts from WeLoveIconFonts.com, so as you might imagine, a huge selection of code simply disappeared when this Kirki version replaced it. Who doesn’t love that??

As for building repeatable blocks of controls, this too is a simple matter:

/* 
// Columns:
*/
Kirki::add_field( 'hn_reactive', array(
	'type'        => 'repeater',
	'label'       => esc_attr__( 'Column Definitions', 'hn_reactive' ),
	'section'     => 'hn_layout_defaults',
	'priority'    => 9,
	'settings'    => 'column_contents',
	'default'     => array(
		array(
			'content' 	=> 'post_data',
			'small'		=> '9'
		),
		array(
			'content'	=> 'default',
			'small'		=> '3'
		),
	),
	'row_label'		=> array(
		'type'		=> 'text',
		'value'		=> 'Column'
	),
	'fields' => array(
		'col_id' => array(
			'type'			=> 'text',
			'label'			=> esc_attr__( 'CSS Column ID', 'my_textdomain' ),
			'description'	=> esc_attr__( 'Any XHTML-compatible ID you like', 'my_textdomain' )
		),
		'content' => array(
			'type'			=> 'select',
			'label'			=> esc_attr__( 'Content', 'my_textdomain' ),
			'description'	=> esc_attr__( 'Specify what kind of content will go in this column', 'my_textdomain' ),
			'choices'		=> $this->content_choices(),
		),
		'small' => array(
			'type'			=> 'text',
			'label'			=> esc_attr__( 'Cols at small', 'my_textdomain' ),
			'description'	=> esc_attr__( 'How many grid columns this column takes up at small and up sizes.', 'my_textdomain' ),
		),
		'medium' => array(
			'type'			=> 'text',
			'label'			=> esc_attr__( 'Cols at medium', 'my_textdomain' ),
			'description'	=> esc_attr__( 'How many grid columns this column takes up at medium and up sizes.', 'my_textdomain' ),
		),
		'large' => array(
			'type'			=> 'text',
			'label'			=> esc_attr__( 'Cols at large', 'my_textdomain' ),
			'description'	=> esc_attr__( 'How many grid columns this column takes up at large and up sizes.', 'my_textdomain' ),
		)
	)
) );

I have so far found Kirki to be exactly the tool that I need, until of course WordPress comes up with their own solution.. and who knows when that will be?

Among my very favourite reads on the Internet, AddThis always has something worth reading:

Tip 6: Freshen Up Your Feed

Brainstorm new types of content you haven’t tried in the past as a way to drive more engagement and reach new users via your social channels.

Here are some ideas to freshen your feed and boost engagement:&hellips;

I’d like to expand on this excellent bit of advice. Yes, you need to find ways to spark new creativity into your daily content. But let me suggest that another “feed” you need to refresh: the feed you feed your head. Spring is a great time to make sure that the things that are supposed to be inspiring you actually are:

RSS Feeds

This is a dying avenue, I know. But for those of you who, like me, cannot quite let go of your well-honed RSS feeds, now is the moment to undertake the grim work of seeing who’s news feeds have gone silent while you’ve been sleeping.

Other sites simply do not contribute the quality of content they once did. Just page after page of uninteresting promotions and grants. Gone is the excitement of the latest discovery. Even the discoveries aren’t written of with any enthusiasm.

Twitter Lists

Among the Eureka moments in my career as a social media personality was the moment I discovered the power of Twitter’s lists. Creating lists of accounts that you see as having a common bond – local feeds, topic feeds, influencer feeds – is a great way to survey an important component of your social network in-context. It is this ability to interact with your networks in such specific ways that I maintain is why content on Twitter is consistently better quality – even as compared to other social feeds of the same agent.

But people move on and feeds become less relevant than they promised to be. It’s not personal: yours may not be so hot, either. But spring may be time to start taking a long look at those accounts that are just taking up space on your lists.

The “Daily Scroll”:

We’ve all got one: that list of websites that, even when we know there won’t be more content, we still end up checking in bored moments throughout the day. Is yours working for you, or can you add some new stuff?

I’ve recently become fascinated by one of the most cerebral science news and thoughts sites I’ve ever read, Nautilus:

Could these people’s immune systems be converging because their microbiomes are adapting to their shared environment? The immune system must maintain a relationship with friendly microbes to keep them straight from the bad ones, so if partners are exposed to similar bacteria and viruses, that exposure could make their populations of immune cells more similar. The researchers point out that it’s already known that couples who live together have more similar microbiomes than strangers do, perhaps because they swap bacteria with each other or share lifestyle choices like smoking or drinking. “Some of these factors are likely to be even more shared after children,” says Adrian Liston, the senior author and a professor at University of Leuven in Belgium. “For example, children are likely to increase the exchange of gut bacteria by reducing the sterility of the household (to put it nicely).”

On top of fabulously-gross biology articles such as this one, Nautilus continues to surprise in it’s ability to describe the cutting edge of science in an understandable and engaging way without pandering to simple “wisdom.”

But other sites with whom I have “frequent flier miles” aren’t as inspiring right now. Maybe the core content has strayed from its mission, or just isn’t as sharp as it used to be. It may be time to move on.

It’s not personal, it’s inspiration:

A big part of me worries when I stop following someone. It’s silly, but it’s true. I know my support is just one set of eyeballs, but when content gets stale and I decide I need to move on, it feels like I’m letting someone down. Self-important, much?

But losing audience members has never been the end of the road for my writing career. It hurts, but only because you know you’re not inspiring people like you once did. But the answer to that is not to look on your former viewers with disappointment, but to look on their departure as a signal. The signal is: it’s time to get relevant, again.

foundation6-logo

I’ve been a big fan of Zurb Foundation for quite a while. So much so, that every WordPress project I’ve created in the last six months (about 40, all tolled) have been built using my Foundation 5-based theme, HN Reactive. The new version of Foundation has had me itching to start developing, but I’m presented now with a problem:

The production server where I house my clients’ projects has tons of projects that rely on Foundation 5. But Foundation 6 is significantly different from 5 that they’re not at all compatible. Worse, since both versions want to use the name “foundation” as their function name, they step on each other. So, how can we use Foundation 5 and 6 together?

It is true that the only reason to use the “foundation” command with 5 is usually to create a new project. You could probably continue to use Compass to compile existing Foundation 5 projects while using the Foundation 6 version to create new projects. But that is a wholly unsatisfactory position to put myself in, on the off chance that an installation of 5 needs to be rebuilt for some reason or another. And there’s no way I’m putting myself in that position on a production server where a lot of people are paying me money not to have such problems.

Zurb Foundation 5 and 6 together:

After searching for a solution and finding none, the solution ends up being aliases. By creating an alias record in your shell profile (.bashrc or .bash_aliases in Ubuntu), you can all live together in one happy, productive family:

Late Update: it appears based on further research that a recent update of Foundation 5 ended up putting that executable in the same place as F6. So with this in mind, I recommend:

  • Install Foundation 5
  • Move the foundation executable from /usr/local/bin to /usr/bin
  • Install Foundation 6
  • Setup your aliases.